/* ==========================================================
   PADIDAR HOME FAQ RED GLASS V2
   Premium responsive / navy + red glass
   ========================================================== */


/* ==========================================================
   SECTION
   ========================================================== */

html body.home.pf-site
.pf-home-faq{

    position:relative !important;

    overflow:hidden !important;

    padding:
        58px 0 64px !important;

    background:
        radial-gradient(
            circle at 92% 16%,
            rgba(236,16,36,.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 7% 85%,
            rgba(7,58,104,.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f5f9fc 100%
        ) !important;
}


/* outer glass container */

html body.home.pf-site
.pf-home-faq
> .pf-wrap{

    position:relative !important;

    padding:
        32px !important;

    border:
        1px solid rgba(9,55,96,.075) !important;

    border-radius:
        28px !important;

    background:
        rgba(255,255,255,.67) !important;

    box-shadow:
        0 22px 55px rgba(10,44,78,.085),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    backdrop-filter:
        blur(18px) saturate(125%) !important;

    -webkit-backdrop-filter:
        blur(18px) saturate(125%) !important;
}


/* common possible FAQ layouts */

html body.home.pf-site
.pf-home-faq
:is(
    .pf-faq-layout,
    .pf-faq-grid,
    .pf-home-faq-grid
){

    gap:
        28px !important;
}


/* ==========================================================
   RIGHT INTRO PANEL
   ========================================================== */

html body.home.pf-site
.pf-home-faq
.pf-faq-intro{

    position:relative !important;

    overflow:hidden !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:
        22px !important;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(236,16,36,.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 88%,
            rgba(40,142,235,.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #073b65 0%,
            #052f55 54%,
            #032743 100%
        ) !important;

    box-shadow:
        0 18px 40px rgba(4,39,72,.20),
        inset 0 1px 0 rgba(255,255,255,.08) !important;

    transition:
        transform .35s cubic-bezier(.2,.7,.25,1),
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* subtle reaction */

@media (hover:hover){

    html body.home.pf-site
    .pf-home-faq
    .pf-faq-intro:hover{

        transform:
            translateY(-4px) !important;

        border-color:
            rgba(236,16,36,.25) !important;

        box-shadow:
            0 24px 48px rgba(4,39,72,.25),
            0 0 34px rgba(236,16,36,.08),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

}


/* title */

html body.home.pf-site
.pf-home-faq
.pf-faq-intro h2{

    color:#ffffff !important;

    font-size:
        clamp(22px,1.55vw,27px) !important;

    line-height:
        1.65 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.15px !important;
}


/* text */

html body.home.pf-site
.pf-home-faq
.pf-faq-intro p{

    color:
        rgba(225,236,246,.78) !important;

    font-size:
        13.5px !important;

    line-height:
        2 !important;

    font-weight:
        500 !important;
}


/* small labels / eyebrow */

html body.home.pf-site
.pf-home-faq
.pf-faq-intro
:is(
    .pf-faq-badge,
    .pf-faq-kicker,
    .pf-faq-eyebrow
){

    color:
        #ff6b7a !important;

    border-color:
        rgba(255,76,95,.30) !important;

    background:
        rgba(236,16,36,.09) !important;

    box-shadow:
        0 0 18px rgba(236,16,36,.06) !important;
}


/* ==========================================================
   FAQ ITEMS
   ========================================================== */

html body.home.pf-site
.pf-home-faq
.pf-faq-item{

    position:relative !important;

    isolation:isolate !important;

    overflow:hidden !important;

    margin-bottom:
        12px !important;

    border:
        1px solid rgba(8,51,89,.085) !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.93),
            rgba(249,252,255,.80)
        ) !important;

    box-shadow:
        0 7px 22px rgba(7,47,83,.055),
        inset 0 1px 0 rgba(255,255,255,.98) !important;

    backdrop-filter:
        blur(12px) !important;

    -webkit-backdrop-filter:
        blur(12px) !important;

    transform:
        translateY(0) !important;

    transition:
        transform .30s cubic-bezier(.2,.7,.25,1),
        border-color .30s ease,
        box-shadow .30s ease,
        background .30s ease !important;
}


/* low opacity red glass layer */

html body.home.pf-site
.pf-home-faq
.pf-faq-item::after{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    z-index:0 !important;

    pointer-events:none !important;

    opacity:0 !important;

    background:
        linear-gradient(
            110deg,
            rgba(236,16,36,.070) 0%,
            rgba(236,16,36,.025) 45%,
            transparent 78%
        ) !important;

    transition:
        opacity .30s ease !important;
}


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

html body.home.pf-site
.pf-home-faq
.pf-faq-item
summary{

    position:relative !important;

    z-index:2 !important;

    min-height:
        70px !important;

    display:flex !important;

    align-items:center !important;

    padding:
        17px 58px 17px 22px !important;

    color:
        #0b3b67 !important;

    font-size:
        16px !important;

    line-height:
        1.8 !important;

    font-weight:
        700 !important;

    cursor:pointer !important;

    user-select:none !important;

    transition:
        color .28s ease,
        padding-right .28s ease !important;
}


/* remove browser native marker */

html body.home.pf-site
.pf-home-faq
.pf-faq-item
summary::-webkit-details-marker{

    display:none !important;
}


/* ==========================================================
   PLUS / MINUS BUTTON
   Existing content is preserved
   ========================================================== */

html body.home.pf-site
.pf-home-faq
.pf-faq-item
summary::before{

    width:
        34px !important;

    height:
        34px !important;

    display:grid !important;

    place-items:center !important;

    border:
        1px solid rgba(236,16,36,.12) !important;

    border-radius:
        10px !important;

    color:
        #ec1024 !important;

    background:
        rgba(236,16,36,.055) !important;

    box-shadow:
        0 5px 15px rgba(236,16,36,.05) !important;

    font-size:
        18px !important;

    font-weight:
        500 !important;

    transition:
        color .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease !important;
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover:hover){

    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item:hover{

        transform:
            translateY(-4px) !important;

        border-color:
            rgba(236,16,36,.34) !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.96),
                rgba(255,247,248,.88)
            ) !important;

        box-shadow:
            0 14px 30px rgba(90,16,29,.09),
            0 0 24px rgba(236,16,36,.07),
            inset 0 1px 0 rgba(255,255,255,.98) !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item:hover::after{

        opacity:
            1 !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item:hover
    summary{

        color:
            #c90f22 !important;

        padding-right:
            61px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item:hover
    summary::before{

        color:
            #ffffff !important;

        border-color:
            rgba(236,16,36,.65) !important;

        background:
            linear-gradient(
                145deg,
                #ff3348,
                #df0d20
            ) !important;

        box-shadow:
            0 7px 18px rgba(236,16,36,.24),
            0 0 16px rgba(236,16,36,.17) !important;

        transform:
            scale(1.06) !important;
    }

}


/* ==========================================================
   OPEN STATE
   ========================================================== */

html body.home.pf-site
.pf-home-faq
.pf-faq-item[open]{

    border-color:
        rgba(236,16,36,.50) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(255,242,244,.89)
        ) !important;

    box-shadow:
        0 16px 36px rgba(111,13,27,.10),
        0 0 27px rgba(236,16,36,.075),
        inset 0 1px 0 rgba(255,255,255,.98) !important;
}


html body.home.pf-site
.pf-home-faq
.pf-faq-item[open]::after{

    opacity:
        1 !important;
}


html body.home.pf-site
.pf-home-faq
.pf-faq-item[open]
summary{

    color:
        #a90b1b !important;

    font-weight:
        800 !important;
}


html body.home.pf-site
.pf-home-faq
.pf-faq-item[open]
summary::before{

    color:
        #ffffff !important;

    border-color:
        rgba(236,16,36,.70) !important;

    background:
        linear-gradient(
            145deg,
            #ff3348,
            #dc0b1e
        ) !important;

    box-shadow:
        0 7px 20px rgba(236,16,36,.25),
        0 0 18px rgba(236,16,36,.15) !important;
}


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

html body.home.pf-site
.pf-home-faq
.pf-faq-item
:is(
    p,
    .pf-faq-answer,
    .pf-faq-content
){

    position:relative !important;

    z-index:2 !important;

    color:
        #61778b !important;

    font-size:
        13.5px !important;

    line-height:
        2.05 !important;

    font-weight:
        500 !important;
}


html body.home.pf-site
.pf-home-faq
.pf-faq-item[open]
> *:not(summary){

    animation:
        pfFaqRedGlassReveal .30s ease both !important;
}


@keyframes pfFaqRedGlassReveal{

    from{
        opacity:0;
        transform:translateY(-5px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


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

html body.home.pf-site
.pf-home-faq
.pf-faq-item
summary:focus-visible{

    outline:
        2px solid rgba(236,16,36,.72) !important;

    outline-offset:
        -3px !important;

    border-radius:
        14px !important;
}


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

@media (max-width:1000px){

    html body.home.pf-site
    .pf-home-faq{

        padding:
            45px 0 50px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    > .pf-wrap{

        padding:
            22px !important;

        border-radius:
            23px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    :is(
        .pf-faq-layout,
        .pf-faq-grid,
        .pf-home-faq-grid
    ){

        grid-template-columns:
            1fr !important;

        gap:
            20px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-intro{

        position:
            relative !important;

        top:
            auto !important;

        border-radius:
            20px !important;
    }

}


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

@media (max-width:700px){

    html body.home.pf-site
    .pf-home-faq{

        padding:
            30px 0 36px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    > .pf-wrap{

        width:
            calc(100% - 24px) !important;

        padding:
            12px !important;

        border-radius:
            20px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-intro{

        border-radius:
            18px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-intro h2{

        font-size:
            21px !important;

        line-height:
            1.65 !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-intro p{

        font-size:
            12.5px !important;

        line-height:
            1.95 !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item{

        margin-bottom:
            9px !important;

        border-radius:
            14px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item
    summary{

        min-height:
            62px !important;

        padding:
            13px 50px 13px 12px !important;

        font-size:
            14px !important;

        line-height:
            1.75 !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item
    summary::before{

        width:
            30px !important;

        height:
            30px !important;

        border-radius:
            9px !important;

        font-size:
            16px !important;
    }


    html body.home.pf-site
    .pf-home-faq
    .pf-faq-item
    :is(
        p,
        .pf-faq-answer,
        .pf-faq-content
    ){

        font-size:
            12.5px !important;

        line-height:
            2 !important;
    }

}


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

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

    html body.home.pf-site
    .pf-home-faq *,

    html body.home.pf-site
    .pf-home-faq *::before,

    html body.home.pf-site
    .pf-home-faq *::after{

        animation:
            none !important;

        transition:
            none !important;
    }

}


/* ==========================================================
   END PADIDAR HOME FAQ RED GLASS V2
   ========================================================== */