/*
    قياس رضا المستخدمين — "ما مدى رضاك عن التجربة؟"
    Components/Shared/ExperienceSurveyWidget.razor + experience-survey.js.

    The corner prompt sits bottom-right like the chat button (which stays physical
    right in both languages), stacked above it when the assistant is on, and above
    the bottom nav on narrow screens. The dialog is the shared .dga-dialog.
*/

.xs {
    --xs-brand: var(--primary-green, var(--text-primary));
    --xs-brand-dark: #145f3d;
    --xs-star-off: #d2d6db;
    --xs-star-on: #f5a623;
    --xs-bottom: 24px;
}

/* The chat launcher is 64px at 24px from the bottom: clear it. */
body:has(#enb-chatbot) .xs {
    --xs-bottom: 104px;
}

.xs [hidden] {
    display: none !important;
}

.xs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- corner prompt ---------- */

.xs-prompt {
    position: fixed;
    right: 24px;
    bottom: var(--xs-bottom);
    z-index: 10001; /* with the chat button: over the cookie banner and the bottom nav */
    display: flex;
    align-items: center;
    gap: var(--spacing-1, 4px);
    max-width: min(340px, calc(100vw - 32px));
    padding: var(--spacing-1, 4px);
    border-radius: var(--radius-full, 999px);
    background: var(--background-white, #fff);
    border: 1px solid var(--border-neutral-primary, #e5e7eb);
    box-shadow: 0 10px 28px rgba(4, 84, 50, 0.18);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.xs-prompt.is-visible {
    opacity: 1;
    transform: none;
}

.xs-prompt-open {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    min-width: 0;
    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    border: 0;
    border-radius: var(--radius-full, 999px);
    background: transparent;
    color: var(--text-default);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.xs-prompt-open:hover {
    background: var(--background-neutral-100, #f3f4f6);
}

.xs-prompt-open:focus-visible,
.xs-prompt-close:focus-visible {
    outline: 2px solid var(--border-black, #161616);
    outline-offset: 2px;
}

.xs-prompt-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--xs-brand);
    color: var(--background-white, #fff);
    font-size: 24px;
}

.xs-prompt-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.xs-prompt-text strong {
    font-size: var(--text-sm-size, 14px);
    line-height: var(--text-sm-line-height, 20px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-display, #161616);
}

.xs-prompt-text span {
    font-size: var(--text-xs-size, 12px);
    line-height: var(--text-xs-line-height, 18px);
    color: var(--xs-brand);
    font-weight: var(--font-weight-medium, 500);
}

.xs-prompt-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-inline-end: var(--spacing-1, 4px);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary-paragraph, #6c737f);
    font-size: 16px;
    cursor: pointer;
}

.xs-prompt-close:hover {
    background: var(--background-neutral-100, #f3f4f6);
    color: var(--text-default);
}

/* ---------- dialog ---------- */

.xs-dialog {
    width: min(520px, calc(100% - 32px));
    text-align: center;
}

.xs-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2, 8px);
    margin-bottom: var(--spacing-5, 20px);
}

.xs-head-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--background-primary-50, #e7f5ee);
    color: var(--xs-brand);
    font-size: 32px;
}

.xs-dialog .dga-dialog__title {
    margin: 0;
    font-size: var(--text-xl-size, 20px);
    line-height: var(--text-xl-line-height, 30px);
}

.xs-hint {
    margin: 0;
    font-size: var(--text-sm-size, 14px);
    line-height: var(--text-sm-line-height, 20px);
    color: var(--text-secondary-paragraph, #6c737f);
}

.xs-scale {
    margin: 0 0 var(--spacing-5, 20px);
    padding: 0;
    border: 0;
    min-width: 0;
}

.xs-stars {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2, 8px);
}

/* المعيار 32 — the rating is real radio inputs, one per star: the star is the
   label, the input stays focusable but visually hidden. */
.xs-star {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
}

.xs-star input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.xs-star svg path {
    fill: var(--xs-star-off);
    transition: fill 0.12s ease, transform 0.12s ease;
}

.xs-star.is-on svg path {
    fill: var(--xs-star-on);
}

.xs-star:hover svg {
    transform: scale(1.08);
}

.xs-star:has(input:focus-visible) {
    outline: 2px solid var(--border-black, #161616);
    outline-offset: 2px;
}

.xs-level {
    min-height: 24px;
    margin: var(--spacing-2, 8px) 0 0;
    font-size: var(--text-md-size, 16px);
    line-height: var(--text-md-line-height, 24px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-display, #161616);
}

.xs-comment {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
    text-align: start;
}

.xs-label {
    font-size: var(--text-sm-size, 14px);
    line-height: var(--text-sm-line-height, 20px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-default);
}

.xs-textarea {
    width: 100%;
    min-height: 96px;
    box-sizing: border-box;
    padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
    border: 1px solid var(--colors-neutral-400, #9da4ae);
    border-radius: var(--radius-xs, 4px);
    background: var(--background-white, #fff);
    color: var(--text-default);
    font: inherit;
    font-size: var(--text-sm-size, 14px);
    line-height: var(--text-sm-line-height, 20px);
    resize: vertical;
}

.xs-textarea:hover {
    border-color: var(--form-field-border-hovered, #6c737f);
}

.xs-textarea:focus {
    outline: none;
    border-color: var(--form-field-border-pressed, #161616);
    box-shadow: var(--input-shadow-focus, 0 0 0 2px rgba(22, 22, 22, 0.2));
}

.xs-textarea::placeholder {
    color: var(--colors-neutral-400, #9da4ae);
}

.xs-count {
    align-self: flex-end;
    font-size: var(--text-xs-size, 12px);
    color: var(--text-secondary-paragraph, #6c737f);
}

.xs-error {
    margin-top: var(--spacing-4, 16px);
    text-align: start;
}

.xs-actions {
    justify-content: center;
    margin-top: var(--spacing-5, 20px);
}

.xs-actions .dga-btn {
    min-width: 160px;
}

.xs-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4, 16px);
    padding: var(--spacing-4, 16px) 0 0;
}

.xs-done-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--background-primary-50, #e7f5ee);
    color: var(--xs-brand);
    font-size: 36px;
}

.xs-done-text {
    margin: 0;
    font-size: var(--text-md-size, 16px);
    line-height: var(--text-md-line-height, 24px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-display, #161616);
}

/* ---------- consultation ---------- */

/* The consultation's title is long: two lines in the corner prompt. */
.xs--consultation .xs-prompt-text strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.xs-eyebrow {
    margin: 0;
    font-size: var(--text-sm-size, 14px);
    line-height: var(--text-sm-line-height, 20px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--xs-brand);
}

.xs--consultation .xs-dialog {
    width: min(600px, calc(100% - 32px));
}

.xs--consultation .xs-dialog .dga-dialog__title {
    font-size: var(--text-lg-size, 18px);
    line-height: var(--text-lg-line-height, 28px);
}

.xs-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    text-align: start;
}

/* المعيار 22 — زر الاختيار: a bordered circle that gains a dot when selected,
   inside a full-width card so the whole line is the target. */
.xs-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3, 12px);
    padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
    border: 1px solid var(--border-neutral-primary, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    background: var(--background-white, #fff);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.xs-option:hover {
    border-color: var(--form-field-border-hovered, #6c737f);
    background: var(--background-neutral-100, #f3f4f6);
}

.xs-option:has(input:checked) {
    border-color: var(--xs-brand);
    background: var(--background-primary-50, #e7f5ee);
}

.xs-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 1px solid var(--controls-control-border, #9da4ae);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.xs-option input[type="radio"]:checked {
    border-color: var(--controls-control-primary-checked, #1b8354);
}

.xs-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--controls-control-primary-checked, #1b8354);
    transform: translate(-50%, -50%);
}

.xs-option input[type="radio"]:focus-visible {
    outline: 2px solid var(--border-black, #161616);
    outline-offset: 2px;
}

.xs-option-text {
    font-size: var(--text-md-size, 16px);
    line-height: var(--text-md-line-height, 24px);
    color: var(--text-default);
}

/* ---------- inline block (الصفحة الرئيسية, above the services) ---------- */

/* .sectionContainer.bggray and .section-header already give the block the band,
   the rhythm and the heading of the sections around it, so what is left is the
   question itself and the two shapes the answer takes. */

/* A consultation's title is a whole sentence, not the two or three words the other
   sections head themselves with, so it takes a step down from .section-title —
   otherwise four lines of it tower over the question underneath. */
.xs-inline.xs--consultation .section-title {
    font-size: var(--display-xs-size, 24px);
    line-height: var(--display-xs-line-height, 32px);
    /* Wide enough that a title naming the consultation stays on one line in both
       languages — English runs about half as wide again as the Arabic — and still
       short enough to keep a long one down to a readable measure. */
    max-width: 60ch;
}

/* The question under the consultation's title: the line the other sections put
   there, but reading as the thing being asked rather than a caption. */
.xs-inline .xs-question {
    max-width: 68ch;
    color: var(--text-default);
    font-size: var(--text-lg-size, 18px);
    line-height: var(--text-lg-line-height, 28px);
}

/* The consultation fills the row: its options are the cards, laid out like the
   grids in the sections around it. */
.xs-inline.xs--consultation .xs-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4, 16px);
}

.xs-inline.xs--consultation .xs-option {
    align-items: center;
    gap: var(--spacing-4, 16px);
    padding: var(--spacing-5, 20px);
    /* The 16px of .mngha-card-item, so the options sit on the same corner as the
       service cards below them. */
    border-radius: 16px;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

/* A chosen option is the one thing on the band that has to be unmistakable, so it
   takes a second ring rather than only a colour the border already carries. */
.xs-inline.xs--consultation .xs-option:has(input:checked) {
    box-shadow: 0 0 0 1px var(--xs-brand);
}

.xs-inline.xs--consultation .xs-option input[type="radio"] {
    margin: 0;
}

/* Same height whatever the option's text runs to. */
.xs-inline.xs--consultation .xs-option-text {
    flex: 1;
}

/* The 1-5 question is a few stars and a comment box: that would be lost across the
   whole row, so it keeps a card in the middle. */
.xs-inline:not(.xs--consultation) .xs-inline-body {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--spacing-8, 32px);
    border: 1px solid var(--border-neutral-primary, #e5e7eb);
    border-radius: 16px;
    background: var(--background-white, #fff);
    text-align: center;
}

/* In the dialog the row comes from .dga-dialog__actions; here it is its own. The
   consultation's button starts where its options start, the rating's is centred
   under them. */
.xs-inline .xs-actions {
    display: flex;
    margin-top: var(--spacing-6, 24px);
}

.xs-inline.xs--consultation .xs-actions {
    justify-content: flex-start;
}

.xs-inline .xs-actions .dga-btn {
    min-width: 200px;
}

/* The thank-you is all that is left of the block once it is answered, so it keeps
   a card of its own rather than sitting bare on the band. */
.xs-inline.xs--consultation .xs-done {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--spacing-8, 32px);
    border: 1px solid var(--border-neutral-primary, #e5e7eb);
    border-radius: 16px;
    background: var(--background-white, #fff);
}

.xs-inline:not(.xs--consultation) .xs-done {
    padding: 0;
}

/* ---------- smaller screens ---------- */

/* Same breakpoint as the portal's bottom nav: sit above it, like the chat button. */
@media (max-width: 991.98px) {
    .xs {
        --xs-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    body:has(#enb-chatbot) .xs {
        --xs-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
    }

    /* Stop short of the accessibility and back-to-top buttons, which sit
       bottom-left at 16px and are 40px wide. */
    .xs-prompt {
        right: 16px;
        max-width: min(340px, calc(100vw - 84px));
    }
}

/* Where the services grid below drops to one card a row, so do the options. */
@media (max-width: 768px) {
    .xs-inline.xs--consultation .xs-options {
        grid-template-columns: 1fr;
    }

    .xs-inline .xs-actions .dga-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .xs-star {
        width: 46px;
        height: 46px;
    }

    .xs-star svg {
        width: 38px;
        height: 38px;
    }

    .xs-stars {
        gap: var(--spacing-1, 4px);
    }

    .xs-inline:not(.xs--consultation) .xs-inline-body,
    .xs-inline.xs--consultation .xs-done {
        padding: var(--spacing-5, 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xs-prompt,
    .xs-star svg path,
    .xs-star svg {
        transition: none;
    }
}

@media print {
    .xs {
        display: none;
    }
}