/* ============================================
   TOOLS LAYOUT NORMALIZATION
   Forces all 5 distinct SEO tools to visually match
   the Ooi Solutions UI components (Heros, Cards, Inputs, Buttons)
   ============================================ */

/* 1. Global Wrapper Spacing */
.wrap {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 160px 5vw 40px !important; /* Reduced bottom padding to fix CTA gap */
    text-align: center !important;
}

/* 2. Hero Sections */
.hero {
    text-align: center !important;
    margin-bottom: 80px !important;
    position: relative !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero h1 {
    font-size: clamp(3rem, 6vw, 5.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.02em !important;
}

/* Hero Badges */
.hero-tag, .hero-eyebrow, .hero-badge, .badge {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    padding: 8px 16px !important; border-radius: 100px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    font-size: 0.85rem !important; font-weight: 600 !important; text-transform: uppercase !important;
    letter-spacing: 0.15em !important; margin-bottom: 2rem !important;
    color: var(--accent-green-dot, #4ADE80) !important;
}

/* Gradient Texts in H1 */
.hero h1 span, .hero h1 .grad, .hero h1 em {
    background: linear-gradient(135deg, var(--accent, #1D7C6E), var(--accent-gold, #E8C87A)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-style: normal !important;
}

/* 3. Main Tool Cards / Panels */
.input-card {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    padding: 50px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4) !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
    margin-bottom: 20px !important;
}

.results, .results-dashboard {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* Force CTA wrapper closer to the content */
#standard-cta-wrapper {
    margin-top: -20px !important; /* Pulls the CTA tight against the results */
}

.checker-panel, .calculator-grid, .panel, .results-panel, .form-panel, .input-panel {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    padding: 50px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4) !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
}

/* Small Cards / Sub-Panels */
.metric-input-card, .plat-card, .radio-card, .rec-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
}

/* Mobile responsiveness for cards */
@media (max-width: 768px) {
    .input-card, .checker-panel, .calculator-grid, .panel, .results-panel, .form-panel {
        padding: 30px 20px !important;
    }
}

/* 4. Form Inputs */
input[type="url"], input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select, .inp {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 20px 25px !important;
    border-radius: 12px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 1.1rem !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2) !important;
}
input:focus, select:focus {
    border-color: var(--accent, #1D7C6E) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

select option {
    background-color: var(--bg-dark, #0D1F1C) !important;
    color: #ffffff !important;
}

.field-lbl {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* 5. Buttons */
.check-btn, .btn-scan, .scan-btn, .cta-fix, .audit-action-btn, button[type="submit"], .nav-cta, .btn-next, .btn-back, .go-btn, .grade-btn, .analyze-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    background: var(--accent, #1D7C6E) !important;
    color: #fff !important;
    border: none !important;
    padding: 18px 40px !important;
    border-radius: 40px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-family: 'Inter Tight', sans-serif !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 15px 30px rgba(29, 124, 110, 0.3) !important;
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s !important;
    margin-top: 20px !important;
}
.check-btn:hover, .btn-scan:hover, .scan-btn:hover, .cta-fix:hover, button[type="submit"]:hover, .go-btn:hover, .grade-btn:hover, .analyze-btn:hover {
    background: var(--accent-hover, #145F55) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 40px rgba(29, 124, 110, 0.4) !important;
}

/* 6. Fix any rogue typography issues inside specific tags like loading indicators */
.loading div, .spinner-text {
    font-family: 'Inter Tight', sans-serif !important;
    color: var(--accent-gold, #E8C87A) !important;
}

/* Ensure no rogue light mode backgrounds */
html, body {
    background-color: var(--bg-dark, #0D1F1C) !important;
}

/* 7. Fix Alignment */
.hero p {
    margin: 0 auto !important;
    max-width: 700px !important;
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
}

.mode-tabs, .ai-logos {
    justify-content: center !important;
}

.results, .loading, .mode-tabs {
    text-align: center !important;
}

.wrap {
    text-align: center !important;
}

/* 8. Fix Tables & Comparison Grids */
.compare-grid, .audit-table, table {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    gap: 1px !important;
}

.compare-cell, td, th {
    background: transparent !important;
    padding: 16px 20px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.compare-cell.head, th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-green-dot, #4ADE80) !important;
    font-weight: 700 !important;
    text-align: left !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.compare-cell.highlight {
    background: rgba(29, 124, 110, 0.2) !important;
    border: 1px solid var(--accent, #1D7C6E) !important;
}

.cv.green { color: var(--accent-green-dot, #4ADE80) !important; }
.cv.red { color: #F87171 !important; }
.cl { color: rgba(255, 255, 255, 0.7) !important; }

/* 9. Fix Results & Data Rows */
.result-row, .breakdown-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 16px 0 !important;
}
.roi-big {
    background: rgba(29, 124, 110, 0.1) !important;
    border: 1px solid rgba(29, 124, 110, 0.3) !important;
    border-radius: 20px !important;
    padding: 30px !important;
}
.roi-big .roi-num { color: var(--accent-green-dot, #4ADE80) !important; }

/* 10. Fix Sliders */
input[type=range] {
    background: rgba(255, 255, 255, 0.1) !important;
}
input[type=range]::-webkit-slider-thumb {
    background: var(--accent, #1D7C6E) !important;
    border-color: #fff !important;
}

/* 11. Fix Progress Bars */
.bar-track { background: rgba(255, 255, 255, 0.1) !important; }
.bar-fill { background: linear-gradient(90deg, var(--accent, #1D7C6E), var(--accent-green-dot, #4ADE80)) !important; }

/* 12. Global Tool Header Gradients */
.hero h1 .grad, .hero h1 em {
    background: linear-gradient(135deg, var(--accent, #1D7C6E), var(--accent-gold, #E8C87A)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    font-style: normal !important;
}

/* ==================== 13. COMPREHENSIVE MOBILE RESPONSIVENESS ==================== */
@media (max-width: 768px) {
    /* 1. Wrapper Spacing */
    .wrap {
        padding: 120px 20px 80px !important;
    }

    /* 2. Typography Scaling */
    .hero h1 {
        font-size: clamp(2.2rem, 8vw, 3rem) !important;
        margin-bottom: 16px !important;
    }
    
    .hero p {
        font-size: 1.1rem !important;
        padding: 0 10px !important;
    }

    /* 3. Card Compactness */
    .input-card, .checker-panel, .calculator-grid, .panel, .results-panel, .form-panel {
        padding: 24px 16px !important;
        border-radius: 20px !important;
    }

    /* 4. Input Sizing */
    input[type="url"], input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select, .inp {
        padding: 16px 20px !important;
        font-size: 1rem !important;
    }

    /* 5. Button Scaling */
    .check-btn, .btn-scan, .scan-btn, .cta-fix, .audit-action-btn, button[type="submit"], .nav-cta, .btn-next, .btn-back, .go-btn, .grade-btn {
        padding: 16px 20px !important;
        font-size: 1rem !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    /* 5.5 Force Layout Stacking for Grids/Flex */
    .cgrid, .dgrid, .scards, .metrics-grid, .grid, .compare-grid, .calculator-grid, .form-panel {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .url-row, .input-row, .flex-row, .hfeat, .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .dc, .scard, .metric-box {
        width: 100% !important;
    }

    /* 6. Tabs & Layout Elements */
    .mode-tabs {
        flex-wrap: wrap !important;
    }
    .mode-tab {
        flex: 1 1 auto !important;
        text-align: center !important;
    }

    /* 7. Tables Overflow */
    .compare-grid, .audit-table, table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 8. AI Logos */
    .ai-logos {
        gap: 8px !important;
    }
    .ai-logo-pill {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    /* 9. CTA Card */
    .cta-card {
        min-height: auto !important;
        border-radius: 32px !important;
    }
    .cta-card-content {
        padding: 40px 20px !important;
    }
    .cta-card h2 {
        font-size: 2rem !important;
    }
}


/* 10. Tools Result Layout */
.sc .lb{font-size:.8rem;color:var(--t2);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:12px}
.sc .vl{font-size:2.8rem;font-weight:800;letter-spacing:-.03em}
.sc:nth-child(1) .vl{color:#a29bfe}.sc:nth-child(2) .vl{color:#55efc4}.sc:nth-child(3) .vl{color:#fdcb6e}.sc:nth-child(4) .vl{color:#74b9ff}
.sc .sb{font-size:.8rem;color:var(--t3);margin-top:4px}
.ci .nm{flex:1;color:var(--t2)}.ci .vl2{font-weight:600;color:var(--t1);font-size:.82rem}
.bbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--border);border-radius:var(--rs);background:0 0;color:var(--t2);font-size:.88rem;cursor:pointer;transition:var(--tr);margin-bottom:24px}
.bbtn:hover{border-color:var(--c1);color:var(--t1)}
.uh{display:flex;align-items:center;gap:12px;margin-bottom:32px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs)}
.uh .gb{width:40px;height:40px;border-radius:10px;background:var(--g1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.uh .gb svg{width:20px;height:20px;fill:#fff}.uh .ut{font-size:1rem;font-weight:600;word-break:break-all}.uh .us{font-size:.8rem;color:var(--t3)}

/* 11. Loading & Error States */
.lo{display:none;position:fixed;inset:0;z-index:200;background:rgba(10,10,15,.9);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;gap:24px}
.lo.on{display:flex}
.err-box{display:none;max-width:620px;margin:20px auto;padding:28px 24px;background:rgba(253,121,168,.06);border:1px solid rgba(253,121,168,.15);border-radius:16px;text-align:center}
.err-box.on{display:block}
.err-box h4{color:#fd79a8;margin-bottom:10px;font-size:1.1rem}
.err-box p{color:rgba(255, 255, 255, 0.7);font-size:.88rem;line-height:1.6}
.err-box button{padding:10px 24px;border:1px solid rgba(253,121,168,.3);border-radius:8px;background:rgba(253,121,168,.1);color:#fd79a8;cursor:pointer;font-size:.88rem;margin-top:16px;transition:all 0.3s}
.err-box button:hover{background:rgba(253,121,168,.2)}

/* ============================================
   12. UNIVERSAL MOBILE RESPONSIVENESS FIX
   ============================================ */
@media (max-width: 768px) {
    /* Stack grids universally */
    .scards, .dgrid, .cgrid, .dash-grid, .pricing-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Reduce padding on mobile cards */
    .fc, .dc, .cc, .sc, .r-card, .cta-card {
        padding: 20px !important;
    }

    /* Stack input forms */
    .url-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .analyze-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Fix table overflows causing horizontal scroll */
    .at, table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Shrink huge headings */
    .hero h1 {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.2rem) !important;
    }
    .badge, .hero-tag {
        font-size: 0.75rem !important;
        padding: 6px 12px !important;
    }
    /* Force 1 column on smallest screens */
    .scards, .dgrid, .cgrid, .dash-grid {
        grid-template-columns: 1fr !important;
    }
}