:root { 
    --prq-bg: #ffffff; 
    --prq-text: #111; 
    --prq-accent: #000; 
    --prq-primary: #044636;
    --prq-badge-bg: #ecfdf5;
    --prq-secondary: #f4f4f5;
    --prq-radius: 16px; 
    --prq-shadow: 0 20px 40px -5px rgba(0,0,0,0.1);
}
.prq-modal { display:none; position:fixed; z-index:999999; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.8); backdrop-filter:blur(10px); justify-content:center; align-items:center; opacity:0; transition:opacity 0.3s; }
.prq-modal.open { display:flex; opacity:1; }

/* Enhanced Modal Design */
.prq-modal-content { 
    background: #f8fcfb; 
    width: 92%; 
    max-width: 800px; /* Wider */
    border-radius: var(--prq-radius); 
    box-shadow: var(--prq-shadow); 
    display: flex; 
    flex-direction: column; 
    max-height: 90vh; 
    overflow: hidden; 
    animation: prqSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(0,0,0,0.05);
}
@keyframes prqSlide { from{transform:translateY(40px) scale(0.98);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }

/* Header */
.prq-branding { padding: 20px 30px; border-bottom: 1px solid rgba(0,0,0,0.05); display:flex; justify-content:space-between; align-items:center; background:transparent; z-index:2; }
.prq-brand-title { font-size: 17px; font-weight: 800; margin:0; letter-spacing: -0.5px; color: var(--prq-text); }
.prq-brand-logo-wrap { display: flex; align-items: center; gap: 10px; }
.prq-brand-icon { width:27px; height: 27px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }

.prq-close { width: 32px; height: 32px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(0,0,0,0.05); cursor:pointer; transition:0.2s; font-size:27px; color:#555;}
.prq-close:hover { background: rgba(0,0,0,0.1); color:#000; }

.prq-back-btn { margin-right: 15px; cursor:pointer; font-size: 22px; display:none; color:#555; transition:0.2s; }
.prq-back-btn:hover { color:#000; transform:translateX(-2px); }
.prq-back-btn.visible { display:block; }

/* Progress */
.prq-progress-bar { height: 4px; background: #f0f0f0; width: 100%; }
.prq-progress-fill { height: 100%; background: var(--prq-accent); width: 0%; transition: width 0.4s ease; }

#prq-step-container { flex:1; overflow-y:auto; padding:0; padding-top: 30px; display:flex; flex-direction:column; background: transparent; scroll-behavior: smooth; position: relative; }

/* Step Screen */
.prq-step { padding: 10px 10px 40px; text-align: center; max-width: 650px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.prq-question-text { font-size: 28px; font-weight: 700; margin-bottom: 40px; color: var(--prq-text); line-height: 1.2; letter-spacing: -0.5px; }

/* Options Grid */
.prq-options-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prq-option-card { 
    border: 1px solid #000; 
    background: #fff;
    border-radius: 8px; 
    padding: 0; 
    cursor: pointer; 
    transition: all 0.2s; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start;
    min-height: auto;
    position: relative;
    overflow: hidden;
}
.prq-option-card:hover { transform: translateY(-4px); border: 2px solid #000;  box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.prq-opt-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin: 0; display: block; border-bottom: 2px solid #000; }
.prq-option-card span { font-weight: 700; font-size: 16px; color: #000; width: 100%; padding: 15px 10px; text-align: center; background: #fff; line-height: 17px; }

/* No Image Variant */
.prq-option-card.no-img { border: 1px solid #e5e7eb; background: #f9fafb; justify-content: center; min-height: 80px; }
.prq-option-card.no-img:hover { border-color: #000; background: #fff; }
.prq-option-card.no-img span { padding: 20px; background: transparent; }

/* Results Screen */
.prq-product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0px 30px 30px; }
.prq-product-item { border: 1px solid #dbdadb; padding: 5px; background: #fff; border-radius: 12px; text-align: left; transition: all 0.3s; display: flex; flex-direction: column; height: 100%; }
.prq-product-item:hover { transform: translateY(-5px);border: 1px solid #004822; }
.prq-product-item a.prq-link-wrap { text-decoration: none; color: inherit; display: block; flex: 1; }
.prq-product-item img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 12px; border-radius: 8px; background: var(--prq-secondary); }
.prq-product-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; display: block; line-height: 1.4; color: #111; }
.prq-product-price { font-size: 14px; color: #666; font-weight: 500; display: block; margin-bottom: 15px; }

.prq-btn-buy { display: block; border:1px solid #004822; background: #004822; color: #fff; padding: 12px; text-decoration: none; border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center; transition: 0.2s; }
.prq-btn-buy:hover { background: #fff; color: #004822; border:1px solid #004822; }

/* Buttons & Footer */
.prq-load-more { background: #000; color: #fff;  padding: 14px 40px; border-radius: 50px; cursor: pointer; margin: 0 auto 40px; display: block; font-weight: 600; font-size: 14px; transition: 0.2s; min-width: 160px; border: 1px solid #000 !important; border-radius: 7px !important; }
.prq-load-more:disabled { background: #ccc; cursor: not-allowed; opacity: 0.7; }

.prq-wa-help { background: #f0fff4; border-top: 1px solid #bbf7d0; padding: 15px 20px; border-radius: 0px; display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; color: #166534; font-weight: 600; transition: 0.2s; }
.prq-wa-help:hover { background: #dcfce7; }

/* Splash/Loading */
.prq-loading-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #000; border-radius: 50%; animation: prqSpin 1s linear infinite; margin-bottom: 20px; }
@keyframes prqSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Splash Screen */
.prq-splash-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; height: 100%; position: relative; z-index: 1; }
.prq-splash-bg-circle { position: absolute; border-radius: 50%; background: #e8f5f1; z-index: -1; pointer-events: none; }
.prq-splash-bg-circle.c1 { width: 200px; height: 200px; top: -50px; left: -50px; opacity: 0.6; }
.prq-splash-bg-circle.c2 { width: 150px; height: 150px; bottom: 20px; right: -30px; opacity: 0.6; }

.prq-splash-hero-icon { width: 80px; padding: 15px; height: 80px; background: var(--prq-primary); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; box-shadow: 0 10px 20px rgba(4, 70, 54, 0.15); color: #fff; position: relative; }
.prq-splash-title { font-size: 32px; font-weight: 800; color: #022c22; line-height: 1.1; margin: 0 0 15px 0; letter-spacing: -0.5px; }
.prq-splash-desc { font-size: 15px; color: #5f7d75; max-width: 420px; margin: 0 auto 30px; line-height: 1.5; }

.prq-splash-features { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }
.prq-feat-badge { background: var(--prq-badge-bg); color: #065f46; padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

.prq-start-btn { background: #004822 !important; color: #fff !important; border: 1px solid #004822 !important; padding: 16px 48px; border-radius: 7px !important; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 20px rgba(4, 70, 54, 0.2); text-decoration: none; }
.prq-start-btn:hover { background: #fff; color:#004822; border: 1px solid #004822 !important; transform: translateY(-2px); box-shadow: 0 15px 25px rgba(4, 70, 54, 0.25); }

.prq-splash-footer { margin-top: 20px; font-size: 12px; color: #8fa69f; font-weight: 500; }

@media(max-width:768px) { 
    .prq-product-list { grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 0px 15px 15px; }
    .prq-step { padding: 30px 20px; }
    .prq-question-text { font-size: 24px; }
    .prq-modal-content { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .prq-splash-title { font-size: 26px; }
    .prq-splash-features { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
}