/* ============================================================
   YD COMMERCIAL CLEANING
   PREMIUM FAQ PAGE DESIGN
   CSS ONLY — NO BACKEND CHANGES REQUIRED
   ============================================================ */

:root {
    --faq-navy: #071b2d;
    --faq-navy-2: #0c2943;
    --faq-blue: #146ef5;
    --faq-blue-dark: #0b55c7;
    --faq-blue-light: #eaf3ff;

    --faq-text: #172033;
    --faq-muted: #667085;
    --faq-light-text: #8b96a8;

    --faq-bg: #f6f8fc;
    --faq-card: #ffffff;
    --faq-border: #e5eaf1;

    --faq-radius: 18px;

    --faq-shadow:
        0 18px 50px rgba(12, 35, 60, 0.08);

    --faq-shadow-hover:
        0 25px 65px rgba(12, 35, 60, 0.13);
}


/* ============================================================
   GENERAL PAGE
   ============================================================ */

.customer-submissions,
.faq-general,
.faq-form-section {
    background: var(--faq-bg);
}


/* ============================================================
   HERO
   ============================================================ */

.faq-hero {
    position: relative;
    overflow: hidden;

    padding: 100px 20px 115px;

    margin: 0;

    text-align: center;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(65, 151, 255, 0.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(0, 214, 255, 0.18),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061522 0%,
            #0b2944 48%,
            #145da9 100%
        );
}


/* Decorative circles */

.faq-hero::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -180px;
    top: -250px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 50%;

    pointer-events: none;
}


.faq-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -170px;
    bottom: -230px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 50%;

    pointer-events: none;
}


.faq-hero .container {
    position: relative;

    z-index: 2;

    max-width: 950px;

    margin: 0 auto;
}


/* Hero heading */

.faq-hero h1 {
    margin: 0 auto 22px;

    max-width: 850px;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        5vw,
        4.5rem
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -0.05em;
}


/* Hero paragraph */

.faq-hero p {
    max-width: 720px;

    margin: 0 auto 40px;

    color: rgba(255,255,255,0.86);

    font-size: clamp(
        1rem,
        1.8vw,
        1.18rem
    );

    line-height: 1.8;
}


/* ============================================================
   SEARCH
   ============================================================ */

.faq-search {
    position: relative;

    max-width: 700px;

    margin: 0 auto;
}


.faq-search::before {
    content: "⌕";

    position: absolute;

    left: 22px;
    top: 50%;

    transform: translateY(-53%);

    z-index: 2;

    color: #738096;

    font-size: 30px;

    line-height: 1;

    pointer-events: none;
}


#faqSearch {
    box-sizing: border-box;

    width: 100%;

    height: 68px;

    padding:
        0
        25px
        0
        60px;

    border:
        1px solid
        rgba(255,255,255,0.55);

    border-radius: 18px;

    background: rgba(255,255,255,0.98);

    color: var(--faq-text);

    font-family: inherit;

    font-size: 1rem;

    font-weight: 500;

    box-shadow:
        0 20px 55px rgba(0,0,0,0.20);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


#faqSearch::placeholder {
    color: #8993a5;
}


#faqSearch:focus {
    outline: none;

    border-color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 24px 60px rgba(0,0,0,0.25),
        0 0 0 4px rgba(255,255,255,0.14);
}


/* ============================================================
   CUSTOMER QUESTIONS SECTION
   ============================================================ */

.customer-submissions {
    padding: 85px 20px 35px;
}


.customer-submissions .container {
    max-width: 980px;

    margin: 0 auto;
}


/* Section heading */

.customer-submissions .section-title {
    max-width: 720px;

    margin:
        0
        auto
        45px;

    text-align: center;
}


.customer-submissions .section-title h2 {
    margin: 0 0 14px;

    color: var(--faq-navy);

    font-size: clamp(
        1.9rem,
        3vw,
        2.7rem
    );

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.035em;
}


.customer-submissions .section-title p {
    margin: 0;

    color: var(--faq-muted);

    font-size: 1rem;

    line-height: 1.8;
}


/* ============================================================
   FAQ GRID
   ============================================================ */

.faq-grid {
    display: grid;

    gap: 14px;
}


/* ============================================================
   FAQ CARD
   ============================================================ */

.customer-submissions .faq-item,
.faq-general .faq-item {

    position: relative;

    margin-bottom: 14px;

    background: var(--faq-card);

    border:
        1px solid
        var(--faq-border);

    border-radius: var(--faq-radius);

    overflow: hidden;

    box-shadow:
        0 3px 15px rgba(16,36,62,0.035);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.customer-submissions .faq-item:hover,
.faq-general .faq-item:hover {

    transform: translateY(-2px);

    border-color: #cbd8eb;

    box-shadow: var(--faq-shadow-hover);
}


.customer-submissions .faq-item.expanded,
.faq-general .faq-item.expanded {

    border-color:
        rgba(20,110,245,0.35);

    box-shadow:
        0 18px 45px rgba(20,110,245,0.10),
        0 3px 10px rgba(15,35,60,0.04);
}


/* ============================================================
   FAQ QUESTION
   ============================================================ */

.customer-submissions .faq-question,
.faq-general .faq-question {

    position: relative;

    width: 100%;

    min-height: 76px;

    box-sizing: border-box;

    padding:
        20px
        72px
        20px
        26px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    background: transparent;

    color: var(--faq-text);

    text-align: left;

    cursor: pointer;

    user-select: none;

    transition:
        background 0.2s ease;
}


.customer-submissions .faq-question:hover,
.faq-general .faq-question:hover {

    background:
        linear-gradient(
            90deg,
            #fbfdff,
            #ffffff
        );
}


/* ============================================================
   QUESTION TEXT
   ============================================================ */

.customer-submissions .faq-question-text,
.faq-general .faq-question-text {

    display: block;

    flex: 1;

    color: var(--faq-text);

    font-size: 1.02rem;

    line-height: 1.55;

    font-weight: 700;
}


/* ============================================================
   PLUS ICON
   ============================================================ */

.customer-submissions .faq-icon,
.faq-general .faq-icon {

    position: absolute;

    right: 21px;

    top: 50%;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--faq-blue-light);

    color:
        var(--faq-blue);

    font-size: 25px;

    font-weight: 400;

    line-height: 1;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.customer-submissions .faq-item.expanded .faq-icon,
.faq-general .faq-item.expanded .faq-icon {

    transform:
        translateY(-50%)
        rotate(45deg);

    background:
        var(--faq-blue);

    color: #ffffff;
}


/* ============================================================
   FAQ ANSWER
   ============================================================ */

.customer-submissions .faq-answer,
.faq-general .faq-answer {

    max-height: 0;

    padding:
        0
        26px;

    overflow: hidden;

    border-top:
        1px solid
        transparent;

    transition:
        max-height 0.4s ease,
        padding 0.3s ease,
        border-color 0.3s ease;
}


.customer-submissions .faq-item.expanded .faq-answer,
.faq-general .faq-item.expanded .faq-answer {

    padding:
        0
        26px
        27px;

    border-top-color:
        #edf1f6;
}


/* Answer typography */

.customer-submissions .faq-answer p,
.faq-general .faq-answer p {

    margin:
        22px
        0
        0;

    color:
        #596579;

    font-size:
        0.97rem;

    line-height:
        1.85;
}


.customer-submissions .faq-answer p + p,
.faq-general .faq-answer p + p {

    margin-top:
        12px;
}


.answer-text {
    color: #596579;

    line-height: 1.85;
}


.answer-text strong {
    color: var(--faq-navy);
}


.answer-text ul {
    margin: 18px 0;

    padding-left: 22px;
}


.answer-text li {
    margin: 8px 0;

    color: #596579;

    line-height: 1.7;
}


/* ============================================================
   CUSTOMER STATUS BADGES
   ============================================================ */

.customer-submissions .faq-status {

    display: inline-flex;

    align-items: center;

    margin:
        22px
        0
        0;

    padding:
        6px
        11px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.customer-submissions .faq-status-published {

    background:
        #e8f8f0;

    color:
        #137345;
}


.customer-submissions .faq-status-pending {

    background:
        #fff6df;

    color:
        #9a6700;
}


.customer-submissions .faq-status-unanswered {

    background:
        #fff0f0;

    color:
        #b42318;
}


.customer-submissions .faq-meta {

    color:
        #7b8799 !important;

    font-size:
        0.82rem !important;
}


.customer-submissions .faq-answer a {

    color:
        var(--faq-blue);

    font-weight:
        600;

    text-decoration:
        none;
}


.customer-submissions .faq-answer a:hover {
    text-decoration:
        underline;
}


/* ============================================================
   GENERAL FAQ SECTION
   ============================================================ */

.faq-general {

    padding:
        35px
        20px
        90px;
}


/* Center main FAQ content */

.faq-general .faq-section {

    max-width:
        980px;

    margin:
        0
        auto
        55px;
}


/* Section heading */

.faq-general .faq-section-title {

    position:
        relative;

    margin:
        0
        0
        25px;

    padding:
        0
        0
        16px;

    border:
        0;

    color:
        var(--faq-navy);

    font-size:
        clamp(
            1.55rem,
            2.5vw,
            2rem
        );

    line-height:
        1.3;

    font-weight:
        800;
}


.faq-general .faq-section-title::after {

    content:
        "";

    display:
        block;

    width:
        55px;

    height:
        4px;

    margin-top:
        14px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            var(--faq-blue),
            #53a3ff
        );
}


/* Categories */

.faq-general .faq-category {

    margin-bottom:
        42px;
}


.faq-general .faq-category-title {

    margin:
        0
        0
        15px;

    color:
        #26364d;

    font-size:
        1.1rem;

    font-weight:
        750;
}


/* ============================================================
   SUBMIT QUESTION SECTION
   ============================================================ */

.faq-form-section {

    padding:
        0
        20px
        90px;
}


.faq-form-section > * {

    max-width:
        980px;

    margin-left:
        auto;

    margin-right:
        auto;
}


/* Dark premium card */

.faq-submit-section {

    position:
        relative;

    overflow:
        hidden;

    padding:
        65px
        45px;

    border-radius:
        28px;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(83,163,255,0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(0,210,255,0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #081d31,
            #103e6a
        );

    box-shadow:
        0 25px 70px
        rgba(10,31,53,0.18);
}


.faq-submit-section::after {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -150px;

    bottom:
        -170px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        50%;

    pointer-events:
        none;
}


.faq-submit-section h3 {

    position:
        relative;

    z-index:
        2;

    margin:
        0
        0
        12px;

    color:
        #ffffff;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.3rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.03em;
}


.faq-submit-section > p {

    position:
        relative;

    z-index:
        2;

    max-width:
        650px;

    margin:
        0
        0
        30px;

    color:
        rgba(255,255,255,0.75);

    line-height:
        1.75;
}


/* Form grid */

.faq-form-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        18px;
}


/* Form group */

.faq-submit-section .faq-form-group {

    margin-bottom:
        18px;
}


.faq-submit-section label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(255,255,255,0.9);

    font-size:
        0.85rem;

    font-weight:
        700;
}


/* Inputs */

.faq-submit-section input,
.faq-submit-section textarea {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius:
        12px;

    background:
        rgba(255,255,255,0.09);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.95rem;

    backdrop-filter:
        blur(10px);

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.faq-submit-section input::placeholder,
.faq-submit-section textarea::placeholder {

    color:
        rgba(255,255,255,0.48);
}


.faq-submit-section input:focus,
.faq-submit-section textarea:focus {

    outline:
        none;

    border-color:
        rgba(255,255,255,0.65);

    background:
        rgba(255,255,255,0.13);

    box-shadow:
        0 0 0 4px
        rgba(83,163,255,0.15);
}


.faq-submit-section textarea {

    min-height:
        145px;

    resize:
        vertical;
}


/* ============================================================
   RELATED / CTA
   ============================================================ */

.faq-cta {

    position:
        relative;

    overflow:
        hidden;

    padding:
        95px
        20px;

    text-align:
        center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(44,121,255,0.13),
            transparent 45%
        ),
        #f8faff;
}


.faq-cta h2 {

    margin:
        0
        0
        14px;

    color:
        var(--faq-navy);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.04em;
}


.faq-cta p {

    max-width:
        650px;

    margin:
        0
        auto
        30px;

    color:
        var(--faq-muted);

    font-size:
        1rem;

    line-height:
        1.8;
}


.cta-buttons {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;
}


.faq-cta .btn {

    min-width:
        150px;

    min-height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        24px;

    border-radius:
        12px;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.faq-cta .btn-primary {

    background:
        var(--faq-blue);

    color:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(20,110,245,0.22);
}


.faq-cta .btn-primary:hover {

    background:
        var(--faq-blue-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px
        rgba(20,110,245,0.28);
}


.faq-cta .btn-outline {

    background:
        #ffffff;

    color:
        var(--faq-navy);

    border:
        1px solid
        #d8e0eb;
}


.faq-cta .btn-outline:hover {

    color:
        var(--faq-blue);

    border-color:
        var(--faq-blue);

    transform:
        translateY(-2px);
}


/* ============================================================
   NO RESULTS
   ============================================================ */

.no-results {

    max-width:
        700px;

    margin:
        30px
        auto;

    padding:
        45px
        25px;

    text-align:
        center;

    background:
        #ffffff;

    border:
        1px solid
        var(--faq-border);

    border-radius:
        18px;

    color:
        var(--faq-muted);

    box-shadow:
        var(--faq-shadow);
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.faq-question:focus-visible {

    outline:
        3px solid
        rgba(20,110,245,0.25);

    outline-offset:
        -3px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 768px) {

    .faq-hero {

        padding:
            75px
            18px
            85px;
    }


    .faq-hero h1 {

        font-size:
            clamp(
                2.25rem,
                10vw,
                3.2rem
            );
    }


    .faq-hero p {

        font-size:
            0.98rem;

        line-height:
            1.7;
    }


    #faqSearch {

        height:
            60px;

        border-radius:
            15px;
    }


    .customer-submissions {

        padding-top:
            60px;
    }


    .faq-form-grid {

        grid-template-columns:
            1fr;
    }


    .faq-submit-section {

        padding:
            45px
            28px;

        border-radius:
            22px;
    }


    .faq-cta {

        padding:
            70px
            20px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .faq-hero {

        padding:
            58px
            15px
            65px;
    }


    .faq-hero h1 {

        font-size:
            2.15rem;

        letter-spacing:
            -0.04em;
    }


    .faq-hero p {

        margin-bottom:
            28px;
    }


    .faq-search::before {

        left:
            17px;

        font-size:
            25px;
    }


    #faqSearch {

        height:
            56px;

        padding-left:
            50px;

        padding-right:
            15px;

        font-size:
            0.92rem;
    }


    .customer-submissions,
    .faq-general {

        padding-left:
            14px;

        padding-right:
            14px;
    }


    .customer-submissions .faq-question,
    .faq-general .faq-question {

        min-height:
            68px;

        padding:
            17px
            62px
            17px
            19px;
    }


    .customer-submissions .faq-question-text,
    .faq-general .faq-question-text {

        font-size:
            0.94rem;
    }


    .customer-submissions .faq-icon,
    .faq-general .faq-icon {

        right:
            17px;

        width:
            34px;

        height:
            34px;

        font-size:
            22px;
    }


    .customer-submissions .faq-item.expanded .faq-answer,
    .faq-general .faq-item.expanded .faq-answer {

        padding:
            0
            19px
            22px;
    }


    .customer-submissions .faq-answer p,
    .faq-general .faq-answer p {

        font-size:
            0.9rem;

        line-height:
            1.75;
    }


    .faq-form-section {

        padding-left:
            14px;

        padding-right:
            14px;

        padding-bottom:
            65px;
    }


    .faq-submit-section {

        padding:
            35px
            20px;

        border-radius:
            20px;
    }


    .faq-submit-section h3 {

        font-size:
            1.7rem;
    }


    .faq-cta {

        padding:
            60px
            15px;
    }


    .faq-cta .cta-buttons {

        flex-direction:
            column;
    }


    .faq-cta .btn {

        width:
            100%;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }
}