/* ==========================================================================
   TKS SUPREME 4D OVERFLOW, ZERO-SCROLLBAR & TEXT POSITIONING PATCH (WCAG AAA)
   ========================================================================== */

/* 1. 4D Result Containers: Auto Height, Aspect-Ratio Reset, Clear Flow */
.f4dk-widget,
.fourd-card,
.f4dk-hn-widget,
.f4dk-search-card,
.f4dk-board-grid,
.fourd-grid-container {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}

.tks-4d-widget-section,
.tks-4d-widget-section #Html1,
#Html1,
.fourd-main-wrapper,
.f4dk-wrapper,
.f4dk-hn-container,
.f4dk-search-container {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-bottom: 3.5rem !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
}

.tks-4d-widget-section::after,
#Html1::after,
.f4dk-wrapper::after,
.fourd-main-wrapper::after,
.f4dk-hn-container::after,
.f4dk-search-container::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* 2. Text Sections MUST Sit Strictly Below 4D Results */
.howto-section,
.faq-section,
.tks-eeat-trust-bar {
    clear: both !important;
    display: block !important;
    position: relative !important;
    margin-top: 3.5rem !important;
    z-index: 10 !important;
}

/* 3. Global Page Background & Text Base */
html, html body, body {
    background-color: #0b0f19 !important;
    color: #f8fafc !important;
}

/* 4. Headings High Contrast */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6,
html body [class*="-heading"], html body [class*="-title"] {
    color: var(--accent, #38bdf8) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* 5. Paragraphs, Descriptions & Hero Text High Contrast (#f1f5f9) */
html body p,
html body [class*="-paragraph"],
html body .jp01-paragraph,
html body .hero-paragraph,
html body [class*="-hero-content"] p,
html body [class*="-hero"] p,
html body [class*="-visual-footer"] p,
html body [class*="-visual-footer"],
html body .howto-step-content p,
html body .faq-body p,
html body .tks-eeat-trust-bar p,
html body footer p,
html body [class*="-footer"] p {
    color: #f1f5f9 !important;
    opacity: 1 !important;
}

/* 6. HOWTO & FAQ Visuals */
html body .howto-section,
html body .faq-section {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

html body .howto-step-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.8rem !important;
    border-radius: 8px !important;
}

html body .howto-step-content h3,
html body .howto-step-content h4 {
    color: var(--accent, #38bdf8) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.35rem !important;
}

html body .howto-step-content p {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
}

html body .howto-step-num {
    background: var(--accent, #38bdf8) !important;
    color: var(--btn-text, #000000) !important;
    font-weight: 900 !important;
}

html body .faq-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 0.8rem !important;
    border-radius: 8px !important;
}

html body .faq-header-btn {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
}

html body .faq-header-btn:hover {
    color: var(--accent, #38bdf8) !important;
}

html body .faq-body p {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
}