:root {
    --ayat-wa-green:#4f5e1b;
    --ayat-wa-brand:#a4b61f;
    --ayat-wa-red:#c98278;
    --ayat-wa-text:#697257;
    --ayat-wa-line:rgba(79,94,27,.13);
}

/* ==================================================
   SURVEY
================================================== */

.ayat-wa-survey {
    background:#fff;
}

.ayat-wa-survey-head {
    margin-bottom:25px;
}

.ayat-wa-survey-eyebrow {
    display:block;
    margin-bottom:7px;
    color:var(--ayat-wa-brand);
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.ayat-wa-survey-head h2 {
    margin:0 0 9px;
    color:var(--ayat-wa-green) !important;
    font-size:clamp(26px,3vw,38px);
    line-height:1.08;
}

.ayat-wa-survey-head p {
    max-width:570px;
    margin:0;
    color:var(--ayat-wa-text) !important;
    font-size:14px;
    line-height:1.7;
}

.ayat-wa-survey-form {
    display:grid;
    gap:16px;
}

.ayat-wa-survey-form > label > span,
.ayat-wa-survey-form legend {
    display:block;
    margin-bottom:7px;
    color:var(--ayat-wa-green);
    font-size:12px;
    font-weight:800;
}

.ayat-wa-survey-form input[type="text"],
.ayat-wa-survey-form input[type="number"] {
    width:100%;
    height:50px;
    padding:0 14px;
    border:1px solid var(--ayat-wa-line);
    border-radius:13px;
    outline:none;
    background:#fafbf6;
    color:#354017;
    font:inherit;
}

.ayat-wa-survey-form input[type="text"]:focus,
.ayat-wa-survey-form input[type="number"]:focus {
    border-color:var(--ayat-wa-brand);
    box-shadow:
        0 0 0 3px rgba(164,182,31,.12);
}

.ayat-wa-survey-form fieldset {
    margin:0;
    padding:0;
    border:0;
}

.ayat-wa-language-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.ayat-wa-language-options label {
    position:relative;
    cursor:pointer;
}

.ayat-wa-language-options input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.ayat-wa-language-options span {
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border:1px solid var(--ayat-wa-line);
    border-radius:13px;
    background:#fafbf6;
    color:var(--ayat-wa-green);
    font-size:13px;
    font-weight:800;
    transition:
        border-color .18s ease,
        background .18s ease;
}

.ayat-wa-language-options input:checked + span {
    border-color:var(--ayat-wa-brand);
    background:#f1f4dc;
}

.ayat-wa-survey-form > button {
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:3px;
    border:0;
    border-radius:999px;
    background:#25D366;
    color:#fff;
    cursor:pointer;
    font:inherit;
    font-size:14px;
    font-weight:900;
}

.ayat-wa-survey-form > button svg {
    width:21px;
    height:21px;
}

.ayat-wa-survey-form > small {
    display:block;
    color:#959b89;
    font-size:10px;
    line-height:1.55;
    text-align:center;
}

/* ==================================================
   INLINE - FREE TRIAL PAGE
================================================== */

.ayat-wa-survey-inline {
    max-width:720px;
    margin:80px auto;
    padding:38px;
    border:1px solid var(--ayat-wa-line);
    border-radius:27px;
    box-shadow:
        0 22px 60px rgba(41,51,20,.07);
}

/* ==================================================
   FLOATING BUTTON
================================================== */

.ayat-wa-floating-button {
    position:fixed;
    z-index:9998;
    right:24px;
    bottom:24px;

    min-height:52px;
    display:flex;
    align-items:center;
    gap:9px;

    padding:7px 18px 7px 8px;

    border:0;
    border-radius:999px;

    background:var(--ayat-wa-green);
    color:#fff;

    box-shadow:
        0 14px 35px rgba(36,47,16,.22);

    cursor:pointer;

    font:inherit;
    font-size:13px;
    font-weight:900;
}

html[dir="rtl"] .ayat-wa-floating-button {
    right:auto;
    left:24px;

    padding:
        7px 8px 7px 18px;
}

.ayat-wa-floating-icon {
    width:38px;
    height:38px;

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

    border-radius:50%;

    background:var(--ayat-wa-brand);
    color:#fff;

    font-size:17px;
}

/* ==================================================
   MODAL
================================================== */

.ayat-wa-modal[hidden] {
    display:none !important;
}

.ayat-wa-modal {
    position:fixed;
    z-index:10000;
    inset:0;

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

    padding:20px;
}

.ayat-wa-modal-backdrop {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    border:0;

    background:
        rgba(22,29,12,.48);

    backdrop-filter:
        blur(4px);

    cursor:pointer;
}

.ayat-wa-modal-dialog {
    position:relative;
    z-index:1;

    width:min(100%,520px);

    max-height:calc(100vh - 40px);
    overflow-y:auto;

    padding:32px;

    border-radius:26px;

    background:#fff;

    box-shadow:
        0 30px 90px rgba(20,28,10,.24);
}

.ayat-wa-modal-close {
    position:absolute;
    z-index:3;
    top:12px;
    right:12px;

    width:36px;
    height:36px;

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

    border:1px solid var(--ayat-wa-line);
    border-radius:50%;

    background:#fff;
    color:var(--ayat-wa-green);

    cursor:pointer;

    font-size:24px;
    line-height:1;
}

html[dir="rtl"] .ayat-wa-modal-close {
    right:auto;
    left:12px;
}

body.ayat-wa-modal-open {
    overflow:hidden;
}

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

@media(max-width:640px) {

    .ayat-wa-floating-button {
        right:14px;
        bottom:14px;

        min-height:48px;

        padding:
            5px 14px 5px 6px;

        font-size:11px;
    }

    html[dir="rtl"] .ayat-wa-floating-button {
        right:auto;
        left:14px;

        padding:
            5px 6px 5px 14px;
    }

    .ayat-wa-floating-icon {
        width:36px;
        height:36px;
    }

    .ayat-wa-modal {
        align-items:flex-end;
        padding:10px;
    }

    .ayat-wa-modal-dialog {
        width:100%;
        max-height:92vh;

        padding:
            29px 18px 21px;

        border-radius:
            22px 22px 18px 18px;
    }

    .ayat-wa-survey-inline {
        margin:50px 14px;
        padding:25px 18px;
        border-radius:21px;
    }

    .ayat-wa-survey-head h2 {
        font-size:28px;
    }
}

/* AYAT WHATSAPP BUTTON - ALWAYS RIGHT */

.ayat-wa-floating-button,
html[dir="rtl"] .ayat-wa-floating-button,
html[dir="ltr"] .ayat-wa-floating-button {
    right: 24px !important;
    left: auto !important;

    padding:
        7px 18px 7px 8px !important;
}

@media(max-width:640px) {

    .ayat-wa-floating-button,
    html[dir="rtl"] .ayat-wa-floating-button,
    html[dir="ltr"] .ayat-wa-floating-button {
        right: 14px !important;
        left: auto !important;

        padding:
            5px 14px 5px 6px !important;
    }
}

/* AYAT SURVEY - FORCE LEFT ALL LANGUAGES */
.ayat-wa-floating-button,
html[dir="rtl"] .ayat-wa-floating-button,
html[dir="ltr"] .ayat-wa-floating-button {
    left: 24px !important;
    right: auto !important;
    padding: 7px 8px 7px 18px !important;
}

@media (max-width: 640px) {
    .ayat-wa-floating-button,
    html[dir="rtl"] .ayat-wa-floating-button,
    html[dir="ltr"] .ayat-wa-floating-button {
        left: 14px !important;
        right: auto !important;
        padding: 5px 6px 5px 14px !important;
    }
}

/* AYAT GLOBAL WHATSAPP RIGHT START */

.ayat-global-whatsapp,
html[dir="rtl"] .ayat-global-whatsapp,
html[dir="ltr"] .ayat-global-whatsapp {
    position: fixed !important;

    right: 24px !important;
    left: auto !important;
    bottom: 24px !important;

    z-index: 9997;

    width: 58px;
    height: 58px;

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

    border: 3px solid #fff;
    border-radius: 50%;

    background: #25D366;
    color: #fff;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

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

.ayat-global-whatsapp:hover {
    transform: translateY(-3px) scale(1.04);

    box-shadow:
        0 14px 38px rgba(0,0,0,.23);
}

.ayat-global-whatsapp svg {
    position: relative;
    z-index: 2;

    width: 31px;
    height: 31px;

    display: block;
}

.ayat-global-whatsapp-pulse {
    position: absolute;
    inset: -5px;

    border: 2px solid rgba(37,211,102,.35);
    border-radius: 50%;

    animation:
        ayatWhatsappPulse
        2.2s
        ease-out
        infinite;

    pointer-events: none;
}

@keyframes ayatWhatsappPulse {

    0% {
        transform: scale(.86);
        opacity: .7;
    }

    70% {
        transform: scale(1.28);
        opacity: 0;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

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

    .ayat-global-whatsapp-pulse {
        animation: none;
    }
}

@media (max-width: 640px) {

    .ayat-global-whatsapp,
    html[dir="rtl"] .ayat-global-whatsapp,
    html[dir="ltr"] .ayat-global-whatsapp {

        right: 14px !important;
        left: auto !important;
        bottom: 14px !important;

        width: 52px;
        height: 52px;
    }

    .ayat-global-whatsapp svg {
        width: 28px;
        height: 28px;
    }
}

/* AYAT GLOBAL WHATSAPP RIGHT END */