/* =========================================================
   AWTI DEVICES HUB
   FAQ CSS
   File: assets/css/device-faq.css
   ========================================================= */

.awti-device-single .awti-faq-list{
    display:grid;
    gap:10px;
    margin-top:15px;
}


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

.awti-device-single .awti-faq-item{
    position:relative;

    margin:0;

    border:1px solid rgba(37,99,235,.16);
    border-left:3px solid #16a34a;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5 0%,
            #ffffff 50%,
            #eff6ff 100%
        );

    box-shadow:
        0 4px 14px rgba(15,23,42,.04);

    overflow:hidden;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


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

.awti-device-single .awti-faq-item[open]{
    border-color:rgba(37,99,235,.28);

    box-shadow:
        0 7px 20px rgba(15,23,42,.07);
}


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

.awti-device-single .awti-faq-item summary{
    position:relative;

    display:flex;
    align-items:center;

    min-height:52px;

    padding:14px 45px 14px 16px;

    color:#0f172a;

    font-size:14px;
    line-height:1.45;
    font-weight:800;

    cursor:pointer;

    list-style:none;

    user-select:none;
}


/* Remove default marker */

.awti-device-single .awti-faq-item summary::-webkit-details-marker{
    display:none;
}

.awti-device-single .awti-faq-item summary::marker{
    display:none;
}


/* =========================================================
   FAQ ARROW
   ========================================================= */

.awti-device-single .awti-faq-item summary::after{
    content:"⌄";

    position:absolute;

    right:16px;
    top:50%;

    transform:translateY(-50%);

    width:25px;
    height:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#eff6ff;

    color:#2563eb;

    font-size:16px;
    font-weight:900;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


/* Open arrow */

.awti-device-single .awti-faq-item[open] summary::after{
    transform:
        translateY(-50%)
        rotate(180deg);

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #0d9488,
            #2563eb
        );

    color:#fff;
}


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

.awti-device-single .awti-faq-item summary:hover{
    background:
        linear-gradient(
            90deg,
            rgba(236,253,245,.75),
            rgba(239,246,255,.75)
        );
}


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

.awti-device-single .awti-faq-item > .awti-rich-text{
    padding:0 16px 16px;

    border-top:1px solid rgba(37,99,235,.10);

    color:#475569;

    font-size:13px;
    line-height:1.7;

    background:rgba(255,255,255,.55);
}

.awti-device-single .awti-faq-item > .awti-rich-text p{
    margin:12px 0 0;
}


/* =========================================================
   FAQ FOCUS
   ========================================================= */

.awti-device-single .awti-faq-item summary:focus-visible{
    outline:3px solid rgba(37,99,235,.22);
    outline-offset:-3px;
}


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

@media(max-width:600px){

    .awti-device-single .awti-faq-list{
        gap:8px;
    }

    .awti-device-single .awti-faq-item{
        border-radius:12px;
    }

    .awti-device-single .awti-faq-item summary{
        min-height:50px;

        padding:13px 42px 13px 13px;

        font-size:13px;
    }

    .awti-device-single .awti-faq-item summary::after{
        right:12px;
    }

    .awti-device-single .awti-faq-item > .awti-rich-text{
        padding:0 13px 13px;

        font-size:12px;
    }

}