/*
    قياس رضا المستخدمين — "ما مدى رضاك عن التجربة؟"
    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);
}

/* ---------- 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));
    }
}

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

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

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

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

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