/* --- Variables & Reset --- */
/* Force box-sizing to prevent theme conflicts */
.qsa-wrapper *, .qsa-wrapper *::before, .qsa-wrapper *::after {
    box-sizing: border-box !important;
}

.qsa-wrapper {
    max-width: 900px !important;
    margin: 40px auto !important;
    font-family: 'Inter', Helvetica, Arial, sans-serif !important;
    color: #2D3748 !important;
    position: relative !important;
}

/* --- Form --- */
.qsa-input-group {
    display: flex !important;
    background: #fff !important;
    border: 2px solid #38B2AC !important;
    border-radius: 50px !important;
    padding: 5px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 10px rgba(56, 178, 172, 0.2) !important;
    /* FIXED: Prevent wrapping on Desktop/Tablet to keep the Pill shape */
    flex-wrap: nowrap !important; 
    align-items: center !important;
}

.qsa-input-group input {
    border: none !important;
    flex-grow: 1 !important;
    padding: 15px 25px !important;
    border-radius: 50px 0 0 50px !important;
    outline: none !important;
    font-size: 16px !important;
    background: transparent !important;
    color: #333 !important;
    min-width: 50px !important; /* Lower min-width to prevent overflow */
}

.qsa-input-group button {
    background: #009688 !important;
    color: white !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 40px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background 0.3s !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    flex-shrink: 0 !important; /* Prevent button from getting squashed */
}

.qsa-input-group button:hover { background: #00796b !important; }

/* --- Loader --- */
.qsa-spinner {
    border: 8px solid #f3f3f3 !important;
    border-top: 8px solid #38B2AC !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    animation: spin 1s linear infinite !important;
    margin: 0 auto !important;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- MODAL / POPUP STYLES --- */
#qsa-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.85) !important;
    z-index: 9999999 !important;
    overflow-y: auto !important; 
    padding: 20px !important;
    display: none; 
    text-align: center !important;
}

#qsa-modal-overlay.active {
    display: block !important;
}

/* The A4 Paper Look - This retains the white box ONLY for the report */
#qsa-report-container {
    background: white !important;
    width: 210mm !important; /* A4 Width */
    max-width: 100% !important;
    min-height: 297mm !important; /* A4 Height */
    margin: 0 auto !important;
    padding: 15mm !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
    text-align: left !important;
    position: relative !important;
    display: none; /* JS will toggle this */
}

/* Close Button for Modal */
.qsa-close-modal {
    position: absolute !important;
    top: 10px !important;
    right: 20px !important;
    color: #fff !important;
    font-size: 30px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    z-index: 1000000 !important;
}
.qsa-close-modal:hover { color: #ff6b6b !important; }


/* --- Report Elements --- */
.qsa-header {
    text-align: center !important;
    border-bottom: 2px solid #38B2AC !important; /* Teal line */
    padding-bottom: 20px !important;
    margin-bottom: 30px !important;
}
.qsa-header img { max-height: 80px !important; margin-bottom: 15px !important; }
.qsa-header h2 { margin: 5px 0 !important; color: #1A202C !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-weight: 800 !important; font-size: 28px !important; }
.qsa-meta { display: flex !important; justify-content: space-between !important; font-size: 14px !important; color: #718096 !important; margin-top: 10px !important; border-top: 1px dashed #e2e8f0 !important; padding-top: 10px !important;}

/* --- Report Grid --- */
.qsa-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 40px !important;
    gap: 20px !important;
}

.qsa-score-card {
    flex: 0 0 35% !important;
    text-align: center !important;
    background: #F7FAFC !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

.qsa-graph-card {
    flex: 0 0 60% !important;
    max-height: 350px !important; /* Restrict height */
    display: flex !important;
    justify-content: center !important;
}
/* Force graph canvas size */
.qsa-graph-card canvas {
    max-width: 100% !important;
    max-height: 300px !important;
}

.circle-grade {
    font-size: 60px !important;
    font-weight: bold !important;
    color: #38B2AC !important;
    border: 8px solid #38B2AC !important;
    border-radius: 50% !important;
    width: 140px !important;
    height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 20px auto 0 !important;
    background: white !important;
}

/* --- Category Circles --- */
.qsa-cat-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important; /* Default Desktop: 6 columns */
    gap: 15px !important;
    margin-bottom: 40px !important;
    text-align: center !important;
}

.qsa-cat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.cat-ring {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
    border: 4px solid #ddd !important;
    background: #fff !important;
}
.cat-ring.green { border-color: #48BB78 !important; color: #48BB78 !important; }
.cat-ring.orange { border-color: #ED8936 !important; color: #ED8936 !important; }
.cat-ring.red { border-color: #F56565 !important; color: #F56565 !important; }

.cat-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #4A5568 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

/* --- Detailed Tables --- */
.qsa-details-table h4 {
    background: #00b4d8 !important; /* Branding Blue */
    color: white !important;
    padding: 10px !important;
    border-radius: 5px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.qsa-details-table table td {
    padding: 8px !important;
    border-bottom: 1px solid #edf2f7 !important;
    font-size: 13px !important;
    color: #333 !important;
    word-break: break-word !important; /* Prevent long URLs breaking layout */
}

/* --- PDF Page Break Control (STRICT) --- */
.qsa-details-section {
    display: block !important;
    background: #fff !important;
    border: 1px solid #f0f0f0 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    position: relative !important;
}

.qsa-details-table tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

@media print {
    .qsa-details-section, .qsa-cta-box, tr, td, img, canvas {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

/* --- Gated Overlay --- */
.qsa-blur-container { position: relative !important; }

#qsa-gated-overlay {
    display: none;
    position: absolute !important;
    top: 50px !important; 
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9), #fff 60%) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 100 !important;
    text-align: center !important;
    padding-top: 60px !important;
}

#qsa-gated-overlay.active { display: block !important; }

.qsa-gate-box {
    background: #2C5282 !important;
    color: white !important;
    padding: 30px !important;
    border-radius: 10px !important;
    max-width: 450px !important;
    margin: 0 auto !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    width: 90% !important; /* Mobile friendly width */
}
.qsa-gate-box h3 { color: white !important; margin-top: 0 !important; }

.qsa-btn-download {
    background: #C53030 !important;
    color: white !important;
    padding: 15px 40px !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    margin: 20px 0 !important;
}
.qsa-btn-download:hover { background: #9B2C2C !important; }

/* --- WhatsApp CTA Box (STRICT) --- */
.qsa-cta-box {
    display: block !important;
    margin-top: 30px !important;
    padding: 25px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    text-align: center !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    position: relative !important;
    z-index: 500 !important;
}

.qsa-cta-text {
    display: block !important;
    color: #14532d !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}

.qsa-btn-whatsapp {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #25D366 !important;
    color: white !important;
    text-decoration: none !important;
    padding: 14px 30px !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3) !important;
    transition: all 0.3s ease !important;
}

.qsa-btn-whatsapp:hover {
    background: #128C7E !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4) !important;
}

.qsa-btn-whatsapp i {
    margin-right: 10px !important;
    font-size: 24px !important;
}

/* =========================================
   MEDIA QUERIES (Responsive Design)
   ========================================= */

/* Tablet & Smaller Laptops (Max Width 1024px) */
@media screen and (max-width: 1024px) {
    .qsa-wrapper {
        width: 95% !important;
        margin: 20px auto !important;
        padding: 0 !important;
    }
}

/* Tablets (Max Width 768px) */
@media screen and (max-width: 768px) {
    /* Stack Report Grid vertically */
    .qsa-grid {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .qsa-score-card, .qsa-graph-card {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    
    /* Change Circle Category Grid to 3 Columns */
    .qsa-cat-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* FIXED: Keep Input Group as PILL (No Wrap) on Tablet.
       We removed the previous code that was breaking it. 
    */
    .qsa-input-group {
        flex-wrap: nowrap !important;
    }
}

/* Mobile Phones (Max Width 480px) */
@media screen and (max-width: 480px) {
    .qsa-header h2 {
        font-size: 20px !important;
    }
    
    /* Change Circle Category Grid to 2 Columns */
    .qsa-cat-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .circle-grade {
        width: 100px !important;
        height: 100px !important;
        font-size: 40px !important;
    }
    
    .qsa-btn-download, .qsa-btn-whatsapp {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    /* Ensure modal fits on small screens */
    #qsa-report-container {
        width: 100% !important;
        min-height: auto !important;
        padding: 15px !important;
    }
    
    /* Make tables scrollable if too wide */
    .qsa-details-section {
        overflow-x: auto !important;
    }

    /* Stacked Input Group logic for MOBILE ONLY */
    .qsa-input-group {
        flex-wrap: wrap !important; /* Allow wrapping on mobile */
        border-radius: 30px !important;
        padding: 8px !important;
        justify-content: center !important;
    }
    .qsa-input-group input {
        border-radius: 30px !important;
        padding: 10px 15px !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    .qsa-input-group button {
        width: 100% !important;
        border-radius: 30px !important;
    }
}