/* Prevent white bleed outside container — match register.css */
@font-face {
    font-family: 'Super Bubble';
    src: url('/040app/assets/fonts/super_bubble.ttf') format('truetype');
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

html {
    background: var(--brand-black);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--brand-black);
    color: var(--brand-white);
    font-family: var(--font-body);
    line-height: var(--line-height-normal);
}

/* Per-venue theme: optional --feedback-* set inline on body.feedback-page */
body.feedback-page {
    font-family: var(--feedback-font-body, var(--font-body));
    --fp: var(--feedback-primary, var(--brand-petrolium));
    --fs: var(--feedback-secondary, var(--feedback-primary, var(--brand-petrolium)));
    --feedback-page-bg: var(--fp);
    --feedback-header-bg: var(--feedback-header-bar, var(--brand-white));
    --feedback-surface-bg: var(--brand-white);
    --feedback-surface-text: #000;
    --feedback-surface-muted: rgba(0, 0, 0, 0.82);
    --feedback-surface-soft: rgba(0, 0, 0, 0.72);
    --feedback-surface-border: rgba(0, 0, 0, 0.15);
    --feedback-surface-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    --feedback-star-outline: rgba(0, 0, 0, 0.4);
    --feedback-modal-backdrop: rgba(0, 0, 0, 0.72);
    background: var(--feedback-page-bg);
    color: var(--feedback-surface-text);
    /* Improve glyph crispness on Windows when venue fonts are loaded dynamically. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Venue mode: strong branding with a dark contrast-safe base */
body.feedback-page--venue {
    background: var(--feedback-page-bg);
    color: var(--feedback-surface-text);
}

@supports (color: color-mix(in srgb, red, blue)) {
    body.feedback-page--venue {
        background: color-mix(in srgb, var(--fp) 94%, #fff 6%);
    }
}

/* Header: same height ladder as welcomegift register (80 → 70 → 60px) */
.feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    padding: 0 clamp(0.5rem, 2vw, 1rem);
    padding-left: calc(clamp(0.5rem, 2vw, 1rem) + env(safe-area-inset-left, 0px));
    padding-right: calc(clamp(0.5rem, 2vw, 1rem) + env(safe-area-inset-right, 0px));
    background: var(--feedback-header-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(14, 67, 71, 0.1);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .feedback-header {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 4px color-mix(in srgb, var(--fp) 10%, transparent);
    }
}

.feedback-header .feedback-header-logo {
    display: flex;
    align-items: stretch;
    flex: 0 1 auto;
    flex-shrink: 0;
    min-width: 0;
    height: 100%;
    line-height: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
}

.feedback-header .feedback-header-logo img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.feedback-lang-switcher {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.feedback-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem;
    border-radius: 0.35rem;
    text-decoration: none;
    line-height: 0;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.feedback-lang-link:focus-visible {
    outline: 2px solid var(--fp);
    outline-offset: 2px;
}

.feedback-lang-link.active {
    background: rgba(14, 67, 71, 0.14);
    background: color-mix(in srgb, var(--fs) 14%, transparent);
    border-color: rgba(14, 67, 71, 0.25);
    border-color: color-mix(in srgb, var(--fs) 25%, transparent);
}

/* Same flag treatment as welcomegift register.css .lang-flag */
.feedback-lang-switcher .lang-flag {
    width: clamp(1.25rem, 3vw, 1.5rem);
    height: clamp(0.9375rem, 2.25vw, 1.125rem);
    border-radius: 0.125rem;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(14, 67, 71, 0.2);
    display: block;
}

@supports (color: color-mix(in srgb, red, blue)) {
    .feedback-lang-switcher .lang-flag {
        box-shadow: 0 1px 3px color-mix(in srgb, var(--fp) 20%, transparent);
    }
}

.feedback-container {
    width: min(100%, 48rem);
    margin: clamp(1.25rem, 4vw, 1.5rem) auto clamp(1.75rem, 5vw, 2rem);
    padding: 1rem;
    box-sizing: border-box;
}

/* Tighter than brand.css .subtitle (DIN letter-spacing) */
.feedback-container .subtitle {
    letter-spacing: 0.02em;
}

/* Venue logo + name (040 Group logo stays in header) */
.feedback-venue-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 1.15rem;
    min-width: 0;
}

.feedback-venue-brand__logo {
    display: block;
    max-width: min(16.5rem, 82vw);
    width: auto;
    height: auto;
    max-height: clamp(4.25rem, 20vw, 6.5rem);
    object-fit: contain;
    object-position: center;
}

/* S1 Luxury Suites: transparent PNG — no forced dark plate behind logo */

.feedback-venue-brand__name {
    margin: 0;
    font-size: clamp(0.875rem, 2.25vw, 0.95rem);
    font-weight: var(--font-weight-medium);
    color: var(--feedback-surface-soft);
    text-align: center;
}

.feedback-card {
    position: relative;
    background: var(--feedback-surface-bg);
    color: var(--feedback-surface-text);
    border: 1px solid var(--feedback-surface-border);
    border-radius: 1rem;
    box-shadow: var(--feedback-surface-shadow);
    padding: clamp(1.25rem, 4.5vw, 2rem);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

body.feedback-page--venue .feedback-card {
    border-color: var(--feedback-surface-border);
    background: var(--feedback-surface-bg);
    box-shadow: var(--feedback-surface-shadow);
}

@supports (color: color-mix(in srgb, red, blue)) {
    body.feedback-page--venue .feedback-card {
        border-color: color-mix(in srgb, var(--fp) 18%, #000 12%);
    }
}

.feedback-card--rating {
    margin-bottom: 1.5rem;
    text-align: center;
}

.feedback-card--rating h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--feedback-surface-text);
}

.feedback-card--rating .subtitle {
    margin: 0 0 0.75rem;
    color: var(--feedback-surface-soft);
    text-align: center;
    font-size: clamp(0.875rem, 2.5vw, 0.95rem);
}

.feedback-card--rating .venue-name {
    margin: 0 0 1rem;
    font-size: clamp(0.875rem, 2.25vw, 0.95rem);
    font-weight: var(--font-weight-medium);
    color: var(--feedback-surface-soft);
    text-align: center;
}

.feedback-card--rating .stars-section {
    margin: 0.25rem 0 0;
}

/* Headings must stay light: brand.css sets h2 to var(--color-text) (dark) */
.feedback-card h2,
.feedback-card h3 {
    color: var(--feedback-surface-text);
}

.feedback-card--thanks {
    text-align: center;
    padding: clamp(1.5rem, 5vw, 2.25rem);
}

.feedback-card--thanks .thank-you {
    margin: 0;
    font-size: clamp(1rem, 3vw, 1.1rem);
    color: var(--feedback-surface-text);
}

.mode-badge {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(14, 67, 71, 0.45);
    background: rgba(14, 67, 71, 0.16);
    color: var(--feedback-surface-text);
    font-size: clamp(0.8125rem, 2.25vw, 0.875rem);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .mode-badge {
        border: 1px solid color-mix(in srgb, var(--fp) 45%, transparent);
        background: color-mix(in srgb, var(--fp) 16%, transparent);
    }
}

h1,
h2,
h3 {
    font-family: var(--feedback-font-heading, var(--font-heading));
    /*
     * Prevent synthetic (fake) bold/italic on single-weight fonts.
     * Synthesized weights are a common source of fuzzy edges on Windows.
     */
    font-synthesis-weight: none;
    font-synthesis-style: none;
}

.subtitle,
.venue-name {
    color: var(--feedback-surface-muted);
}

.stars-section {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(0.125rem, 1.25vw, 0.5rem);
    margin: 1.5rem 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Scale hit area with viewport; min 2.5rem keeps single-row fit on ~320px inner width */
.star-btn {
    --star-hit: clamp(2.5rem, 9vw, 3rem);
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: var(--star-hit);
    min-height: var(--star-hit);
    width: var(--star-hit);
    height: var(--star-hit);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    font-size: clamp(1.35rem, 5.5vw, 2rem);
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.star-btn:focus-visible {
    outline: 2px solid var(--fp);
    outline-offset: 2px;
}

.star-btn:focus:not(:focus-visible) {
    outline: none;
}

.star-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.star-outline,
.star-filled {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    font-size: 1em;
    line-height: 1;
    pointer-events: none;
}

.star-outline {
    color: var(--feedback-star-outline);
}

.star-filled {
    opacity: 0;
    color: #fbbc04;
}

/* After user selected a rating, keep stars filled up to choice */
.stars-section.is-rated[data-rating="1"] .star-btn:nth-child(-n + 1) .star-filled,
.stars-section.is-rated[data-rating="2"] .star-btn:nth-child(-n + 2) .star-filled,
.stars-section.is-rated[data-rating="3"] .star-btn:nth-child(-n + 3) .star-filled,
.stars-section.is-rated[data-rating="4"] .star-btn:nth-child(-n + 4) .star-filled,
.stars-section.is-rated[data-rating="5"] .star-btn:nth-child(-n + 5) .star-filled {
    opacity: 1;
}

/* Hover: progressive fill 1..n */
.stars-section:has(.star-btn:nth-child(1):hover) .star-btn:nth-child(-n + 1) .star-filled,
.stars-section:has(.star-btn:nth-child(2):hover) .star-btn:nth-child(-n + 2) .star-filled,
.stars-section:has(.star-btn:nth-child(3):hover) .star-btn:nth-child(-n + 3) .star-filled,
.stars-section:has(.star-btn:nth-child(4):hover) .star-btn:nth-child(-n + 4) .star-filled,
.stars-section:has(.star-btn:nth-child(5):hover) .star-btn:nth-child(-n + 5) .star-filled {
    opacity: 1;
}

/* Keyboard focus: same progressive fill */
.stars-section:has(.star-btn:nth-child(1):focus-visible) .star-btn:nth-child(-n + 1) .star-filled,
.stars-section:has(.star-btn:nth-child(2):focus-visible) .star-btn:nth-child(-n + 2) .star-filled,
.stars-section:has(.star-btn:nth-child(3):focus-visible) .star-btn:nth-child(-n + 3) .star-filled,
.stars-section:has(.star-btn:nth-child(4):focus-visible) .star-btn:nth-child(-n + 4) .star-filled,
.stars-section:has(.star-btn:nth-child(5):focus-visible) .star-btn:nth-child(-n + 5) .star-filled {
    opacity: 1;
}

label {
    font-size: 0.95rem;
}

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

/* Low-rating follow-up: native dialog (compact, scales with viewport) */
.feedback-low-modal {
    box-sizing: border-box;
    /* minmax(0,1fr) avoids grid/track min-content width forcing horizontal overflow */
    width: min(21rem, calc(100vw - 1.25rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-width: calc(100vw - 1.25rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    min-width: 0;
    /* Short viewports / landscape: scroll inside dialog instead of clipping */
    max-height: min(88vh, 40rem);
    max-height: min(88dvh, 40rem);
    padding: 0;
    border: 1px solid var(--feedback-surface-border);
    border-radius: clamp(0.65rem, 2vmin, 0.85rem);
    background: var(--feedback-surface-bg);
    color: var(--feedback-surface-text);
    box-shadow: var(--feedback-surface-shadow);
    overflow-x: hidden;
    overflow-y: auto;
}

.feedback-low-modal::backdrop {
    background: var(--feedback-modal-backdrop);
}

.feedback-low-modal__form {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(0.55rem, 2.2vmin, 0.85rem) clamp(0.65rem, 2.5vmin, 0.9rem) clamp(0.65rem, 2.5vmin, 0.85rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.4rem, 1.8vmin, 0.65rem);
    margin: 0;
}

.feedback-low-modal__toolbar {
    display: flex;
    justify-content: flex-end;
    margin: -0.15rem -0.15rem 0 0;
}

.feedback-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(2.75rem, 11vmin, 3rem);
    height: clamp(2.75rem, 11vmin, 3rem);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--feedback-surface-soft);
    font-size: clamp(1.25rem, 4vmin, 1.45rem);
    line-height: 1;
    cursor: pointer;
}

.feedback-modal-close:focus-visible {
    outline: 2px solid var(--fp);
    outline-offset: 2px;
}

.category-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.25rem, 1.2vmin, 0.45rem) clamp(0.35rem, 2vw, 0.65rem);
    min-width: 0;
    max-width: 100%;
}

.category-rating--overall {
    padding-bottom: clamp(0.35rem, 1.5vmin, 0.55rem);
    margin-bottom: clamp(0.15rem, 0.8vmin, 0.3rem);
    border-bottom: 1px solid var(--feedback-surface-border, rgba(0, 0, 0, 0.08));
}

.category-rating__label {
    font-size: clamp(0.8125rem, 2.2vmin, 0.9375rem);
    font-weight: var(--font-weight-medium);
    color: var(--feedback-surface-text);
    flex: 0 0 auto;
}

.stars-section--category,
.stars-section--overall {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin: 0;
    min-width: 0;
    gap: clamp(0.05rem, 0.8vmin, 0.25rem);
}

.stars-section--category .star-btn,
.stars-section--overall .star-btn {
    --star-hit: clamp(1.95rem, 5.5vmin, 2.35rem);
    font-size: clamp(1rem, 3.4vmin, 1.3rem);
}

.feedback-detail-prompt {
    margin: 0.1rem 0 0;
    font-size: clamp(0.8125rem, 2vmin, 0.9rem);
    color: var(--feedback-surface-muted);
    line-height: var(--line-height-normal);
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Tighter controls inside modal only (global form rules stay for any future non-modal fields) */
.feedback-low-modal__form textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: clamp(3.25rem, 11vmin, 4.5rem);
    max-height: min(22vh, 8.5rem);
    max-height: min(22dvh, 8.5rem);
    resize: vertical;
    padding: clamp(0.45rem, 1.8vmin, 0.6rem) clamp(0.5rem, 2vmin, 0.65rem);
    line-height: var(--line-height-normal);
}

.feedback-low-modal__form button[type="submit"] {
    box-sizing: border-box;
    max-width: 100%;
    padding: clamp(0.5rem, 2vmin, 0.65rem) clamp(0.65rem, 2.5vmin, 0.85rem);
    margin-top: clamp(0.1rem, 0.6vmin, 0.25rem);
}

/* Short viewports (e.g. landscape phone): keep modal usable without overflowing */
@media (max-height: 520px) {
    .feedback-low-modal {
        max-height: min(92vh, 92dvh);
        border-radius: 0.5rem;
    }

    .feedback-low-modal__form {
        gap: 0.3rem;
        padding: 0.45rem 0.55rem 0.5rem;
    }

    .feedback-low-modal__form textarea {
        min-height: 2.75rem;
        max-height: min(16vh, 4.5rem);
        max-height: min(16dvh, 4.5rem);
    }

    .stars-section--category .star-btn,
    .stars-section--overall .star-btn {
        --star-hit: clamp(1.85rem, 5vmin, 2.1rem);
        font-size: clamp(0.95rem, 3.2vmin, 1.15rem);
    }
}

input,
textarea,
button {
    width: 100%;
    border-radius: 0.5rem;
    color: var(--feedback-surface-text);
    border: 1px solid var(--feedback-surface-border);
    padding: 0.7rem;
    font: inherit;
}

@supports (color: color-mix(in srgb, red, blue)) {
    input,
    textarea,
    button {
        border-color: color-mix(in srgb, var(--feedback-surface-text) 25%, transparent);
    }
}

button[type="submit"] {
    background: var(--fp);
    color: var(--brand-white);
    border: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

button[type="submit"]:hover {
    background: var(--fs);
    box-shadow: 0 6px 16px rgba(14, 67, 71, 0.28);
}

button[type="submit"]:active {
    transform: translateY(1px);
}

button[type="submit"]:focus-visible {
    outline: 2px solid var(--fp);
    outline-offset: 2px;
}

@supports (color: color-mix(in srgb, red, blue)) {
    button[type="submit"]:hover {
        background: color-mix(in srgb, var(--fs) 84%, var(--fp) 16%);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--fs) 34%, transparent);
    }
}

.thank-you {
    margin-top: 1rem;
    font-size: 1.05rem;
}

.hidden {
    display: none;
}

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 1px;
    width: 1px;
}

footer {
    text-align: center;
    padding: clamp(1.25rem, 3.5vw, 1.5rem) clamp(0.75rem, 2.5vw, 1rem);
    padding-left: calc(clamp(0.75rem, 2.5vw, 1rem) + env(safe-area-inset-left, 0px));
    padding-right: calc(clamp(0.75rem, 2.5vw, 1rem) + env(safe-area-inset-right, 0px));
    font-family: var(--font-body);
    color: var(--feedback-surface-soft);
    font-size: clamp(0.6875rem, 1.75vw, 0.8125rem);
}

/* Small screen / tablet-narrow: full width; horizontal inset matches .feedback-header (no double gutter) */
@media (max-width: 767px) {
    .feedback-container {
        width: 100%;
        max-width: 100%;
        margin: 1rem 0 2rem;
        padding: 1rem;
        padding-left: calc(clamp(0.5rem, 2vw, 1rem) + env(safe-area-inset-left, 0px));
        padding-right: calc(clamp(0.5rem, 2vw, 1rem) + env(safe-area-inset-right, 0px));
        box-sizing: border-box;
    }
}

/* Phone (max 680px): header 70px, iOS-friendly form font size */
@media (max-width: 680px) {
    .feedback-header {
        height: 70px;
        min-height: 70px;
        max-height: 70px;
    }

    .feedback-header .feedback-header-logo img {
        height: 100%;
    }

    .feedback-lang-switcher {
        padding-right: 1rem;
    }

    /* Input font ≥16px to prevent iOS zoom on focus */
    .feedback-low-modal__form textarea,
    .feedback-low-modal__form button[type="submit"] {
        font-size: 1rem;
    }
}

/* Very narrow: shorter header, tight header padding (register @360px) */
@media (max-width: 360px) {
    .feedback-header {
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        padding-left: calc(0.5rem + env(safe-area-inset-left, 0px));
        padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));
    }

    .feedback-header .feedback-header-logo img {
        height: 100%;
    }

    .feedback-lang-switcher {
        padding-right: 0;
    }

    .feedback-container {
        padding-left: calc(0.5rem + env(safe-area-inset-left, 0px));
        padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));
    }

    /* Allow two rows if still tight; centered */
    .stars-section {
        flex-wrap: wrap;
        row-gap: 0.35rem;
        max-width: 100%;
    }

    .star-btn {
        --star-hit: clamp(2.4rem, 8.5vw, 2.75rem);
    }

    .category-rating {
        flex-direction: column;
        align-items: stretch;
    }

    .stars-section--category,
    .stars-section--overall {
        justify-content: center;
    }
}