.mrag-survey-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 96px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #d6b25e;
    border-radius: 10px;
    background: #fffaf0;
    color: #164397;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transform: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.mrag-survey-open span { color: #d9a526; font-size: 17px; line-height: 1; }
.mrag-survey-open:hover,
.mrag-survey-open:focus-visible {
    background: #fff6df;
    border-color: #cda342;
    box-shadow: 0 5px 18px rgba(22,67,151,.12);
    transform: none !important;
}
body.mrag-survey-opened { overflow: hidden; }
.mrag-survey-overlay[hidden] { display: none !important; }
.mrag-survey-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(13, 28, 55, .48);
    backdrop-filter: blur(5px);
    direction: rtl;
}
.mrag-survey-card {
    position: relative;
    width: min(100%, 520px);
    max-height: calc(100dvh - 36px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 28px;
    border: 1px solid rgba(22,67,151,.12);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(7,30,72,.22);
    color: #172033;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.mrag-survey-card:hover,
.mrag-survey-card:focus-within { scrollbar-color: rgba(22,67,151,.28) transparent; }
.mrag-survey-card::-webkit-scrollbar { width: 6px; }
.mrag-survey-card::-webkit-scrollbar-track { background: transparent; }
.mrag-survey-card::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.mrag-survey-card:hover::-webkit-scrollbar-thumb,
.mrag-survey-card:focus-within::-webkit-scrollbar-thumb { background: rgba(22,67,151,.28); }
.mrag-survey-close {
    position: absolute;
    top: 13px;
    left: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f4f8;
    color: #5c6778;
    font-size: 25px;
    line-height: 30px;
    cursor: pointer;
    transform: none !important;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mrag-survey-close:hover,
.mrag-survey-close:focus-visible { background: #e7ebf1; color: #26334a; transform: none !important; }
.mrag-survey-brand { color: #164397; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.mrag-survey-card h3 { margin: 0 0 6px; color: #123c87; font-size: 24px; }
.mrag-survey-target { margin: 0 0 22px; color: #6a7280; }
.mrag-survey-rating-wrap { padding: 18px; border-radius: 16px; background: #f7f9fc; text-align: center; }
.mrag-survey-score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0 0 12px;
    direction: rtl;
    color: #5b6573;
    line-height: 1.4;
}
.mrag-survey-score-label { font-size: 13px; color: #737d8c; }
.mrag-survey-score-value { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.mrag-survey-score strong { color: #164397; font-size: 22px; }
.mrag-survey-stars { position: relative; display: inline-block; direction: ltr; font-size: 34px; line-height: 1; letter-spacing: 2px; }
.mrag-survey-stars-bg { color: #dfe4eb; }
.mrag-survey-stars-fill { position: absolute; inset: 0 auto 0 0; width: 100%; overflow: hidden; white-space: nowrap; color: #d8a526; }
.mrag-survey-range {
    --mrag-rating-pct: 100%;
    display: block;
    width: 100%;
    height: 24px;
    margin: 14px 0 0;
    padding: 0;
    direction: ltr;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    border-radius: 999px;
    background: linear-gradient(to right, #164397 0 var(--mrag-rating-pct), #d9e0ea var(--mrag-rating-pct) 100%);
    background-size: 100% 4px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.mrag-survey-range::-webkit-slider-runnable-track { height: 4px; border: 0; background: transparent; }
.mrag-survey-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #164397;
    box-shadow: 0 0 0 1px rgba(22,67,151,.18), 0 2px 7px rgba(22,67,151,.18);
    appearance: none;
    -webkit-appearance: none;
    transition: width .12s ease, height .12s ease, box-shadow .12s ease;
}
.mrag-survey-range:hover::-webkit-slider-thumb,
.mrag-survey-range:focus-visible::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; box-shadow: 0 0 0 3px rgba(22,67,151,.10), 0 2px 8px rgba(22,67,151,.20); }
.mrag-survey-range::-moz-range-track { height: 4px; border: 0; border-radius: 999px; background: transparent; }
.mrag-survey-range::-moz-range-progress { height: 4px; border-radius: 999px; background: transparent; }
.mrag-survey-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #164397;
    box-shadow: 0 0 0 1px rgba(22,67,151,.18), 0 2px 7px rgba(22,67,151,.18);
    transition: width .12s ease, height .12s ease, box-shadow .12s ease;
}
.mrag-survey-range:hover::-moz-range-thumb,
.mrag-survey-range:focus-visible::-moz-range-thumb { width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(22,67,151,.10), 0 2px 8px rgba(22,67,151,.20); }
.mrag-survey-reason-wrap, .mrag-survey-mobile-wrap, .mrag-survey-otp-wrap { margin-top: 18px; }
.mrag-survey-card label { display: block; margin-bottom: 7px; color: #26334a; font-weight: 700; }
.mrag-survey-reason-required {
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff0ee;
    color: #b42318;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
.mrag-survey-reason-required[hidden] { display: none !important; }
.mrag-survey-reason-note {
    margin: 7px 2px 0;
    color: #747d8b;
    font-size: 12px;
    line-height: 1.8;
}
.mrag-survey-reason-wrap.is-required .mrag-survey-reason-note { color: #9b3128; }
.mrag-survey-reason-wrap.is-required #mrag-survey-reason { border-color: #e5b5b0; }
#mrag-survey-reason, #mrag-survey-mobile {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #d7dde7;
    border-radius: 12px;
    background: #fff;
    color: #172033;
    font: inherit;
    outline: none;
}
#mrag-survey-reason { padding: 12px 14px; resize: vertical; }
#mrag-survey-mobile { min-height: 45px; padding: 8px 13px; direction: ltr; text-align: left; }
#mrag-survey-reason:focus, #mrag-survey-mobile:focus { border-color: #164397; box-shadow: 0 0 0 3px rgba(22,67,151,.09); }
.mrag-survey-mobile-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.mrag-survey-send-otp, .mrag-survey-submit {
    border: 0;
    border-radius: 12px;
    background: #164397;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transform: none !important;
    transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mrag-survey-send-otp:hover:not(:disabled),
.mrag-survey-send-otp:focus-visible:not(:disabled),
.mrag-survey-submit:hover:not(:disabled),
.mrag-survey-submit:focus-visible:not(:disabled) { background: #123c87; box-shadow: 0 5px 16px rgba(22,67,151,.14); transform: none !important; }
.mrag-survey-send-otp { min-width: 105px; padding: 0 14px; }
.mrag-survey-submit { width: 100%; min-height: 48px; margin-top: 16px; padding: 10px 16px; }
.mrag-survey-send-otp:disabled, .mrag-survey-submit:disabled { opacity: .5; cursor: not-allowed; }
.mrag-survey-privacy { margin: 8px 2px 0; color: #747d8b; font-size: 12px; line-height: 1.8; }
.mrag-survey-otp { display: flex; justify-content: center; gap: 7px; direction: ltr; }
.mrag-survey-otp input {
    width: 43px;
    height: 49px;
    box-sizing: border-box;
    border: 1px solid #d7dde7;
    border-radius: 10px;
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    color: #164397;
    outline: none;
}
.mrag-survey-otp input:focus { border-color: #164397; box-shadow: 0 0 0 3px rgba(22,67,151,.09); }
.mrag-survey-status { min-height: 24px; margin-top: 14px; font-size: 13px; line-height: 1.7; }
.mrag-survey-status.is-error { color: #b42318; }
.mrag-survey-status.is-success { color: #087a4b; }
.mrag-survey-status.is-info { color: #164397; }
@media (max-width: 600px) {
    .mrag-survey-overlay {
        align-items: flex-start;
        justify-content: flex-start;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
        overflow-y: auto;
        touch-action: pan-y;
    }
    .mrag-survey-card {
        width: 100%;
        max-height: none;
        overflow: visible;
        margin: 0 auto;
        padding: 24px 16px 18px;
        border-radius: 18px;
        touch-action: pan-y;
    }
    .mrag-survey-stars { font-size: 30px; }
    .mrag-survey-rating-wrap { padding: 16px 14px; }
    .mrag-survey-otp { gap: 5px; }
    .mrag-survey-otp input { width: 39px; height: 46px; }
    .mrag-survey-mobile-row { grid-template-columns: 1fr; }
    .mrag-survey-send-otp { min-height: 44px; }
}