/* ============================================================================
   kiosk-modern.css — REYSTI Kiosk MODERN UI (Kiosk_UiMode = MODERN)
   Served from _content/RTT.Kiosk.UI/css/kiosk-modern.css

   EVERYTHING here is scoped under the .kiosk-modern root class, which pages
   put on their root div ONLY in modern mode (KioskTheme.RootClass).
   The CLASSIC markup/styles are untouched and never see these rules.

   NO hardcoded colors: every color/radius/size resolves through the
   --kiosk-* custom properties (set at runtime by KioskTheme.ApplyAsync from
   cloud params) with fallbacks to the rtt-theme.css design tokens.

   Signature: the "aurora go-rail" — exactly one dominant emerald (accent)
   action per screen, plus a blue->purple aurora glow behind the focal
   element (active category, order number, QR card, terminal ring).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TOKEN BRIDGE — cloud-param vars with design-system fallbacks
   ---------------------------------------------------------------------------- */
.kiosk-modern {
    --km-primary: var(--kiosk-primary, var(--rtt-primary));
    --km-secondary: var(--kiosk-secondary, var(--rtt-secondary));
    --km-accent: var(--kiosk-accent, var(--rtt-accent));
    --km-bg: var(--kiosk-bg, var(--rtt-bg));
    --km-surface: var(--kiosk-surface, var(--rtt-bg-elevated));
    --km-text: var(--kiosk-text, var(--rtt-text));
    --km-card-r: var(--kiosk-card-radius, var(--rtt-radius-2xl));
    --km-btn-r: var(--kiosk-btn-radius, var(--rtt-radius-xl));
    --km-fs: var(--kiosk-font-scale, 1);
    --km-font: var(--kiosk-font, 'adlib');
    --km-logo-h: var(--kiosk-logo-h, 80px);
    --km-overlay: var(--kiosk-overlay-opacity, 0.55);
    --km-glow: var(--kiosk-glow, 1);

    /* derived mixes (no literal colors) */
    --km-glass: color-mix(in srgb, var(--km-surface) 78%, transparent);
    --km-glass-soft: color-mix(in srgb, var(--km-surface) 55%, transparent);
    --km-line: color-mix(in srgb, var(--km-text) 12%, transparent);
    --km-line-strong: color-mix(in srgb, var(--km-text) 24%, transparent);
    --km-text-dim: color-mix(in srgb, var(--km-text) 62%, transparent);
    --km-shade: color-mix(in srgb, var(--km-bg) 92%, transparent);
    --km-glow-a: color-mix(in srgb, var(--km-primary) min(calc(45% * var(--km-glow)), 100%), transparent);
    --km-glow-b: color-mix(in srgb, var(--km-secondary) min(calc(35% * var(--km-glow)), 100%), transparent);
    --km-glow-go: color-mix(in srgb, var(--km-accent) min(calc(50% * var(--km-glow)), 100%), transparent);
    --km-on-accent: var(--rtt-text-on-primary);

    color: var(--km-text);
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    background-color: var(--km-bg);
    -webkit-tap-highlight-color: transparent;
}

/* accessibility bump: Kiosk_UseBigTxt=1 multiplies the cloud font scale */
.kiosk-modern.km-bigtxt {
    --km-fs: calc(var(--kiosk-font-scale, 1) * 1.2);
}

.kiosk-modern *,
.kiosk-modern *::before,
.kiosk-modern *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   ANIMATION GATES — Kiosk_Theme_AnimLevel: OFF / SUBTLE / FULL
   ---------------------------------------------------------------------------- */
.kiosk-modern.anim-off *,
.kiosk-modern.anim-off *::before,
.kiosk-modern.anim-off *::after {
    animation: none !important;
    transition: none !important;
}

/* SUBTLE keeps state transitions but kills the showy loops/bursts */
.kiosk-modern.anim-subtle .km-anim-extra,
.kiosk-modern.anim-subtle .km-anim-extra::before,
.kiosk-modern.anim-subtle .km-anim-extra::after {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-modern *,
    .kiosk-modern *::before,
    .kiosk-modern *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ----------------------------------------------------------------------------
   SHARED PRIMITIVES
   ---------------------------------------------------------------------------- */

/* touch buttons — 64px minimum targets */
.kiosk-modern .km-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: var(--rtt-touch-target-lg);
    min-width: var(--rtt-touch-target-lg);
    padding: 0.8em 1.6em;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(18px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    letter-spacing: 0.04em;
    color: var(--km-text);
    background: var(--km-glass);
    border: 2px solid var(--km-line-strong);
    border-radius: var(--km-btn-r);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
    transition: transform var(--rtt-transition-fast), box-shadow var(--rtt-transition-normal), border-color var(--rtt-transition-normal), background-color var(--rtt-transition-normal);
}

.kiosk-modern .km-btn:active {
    transform: scale(0.96);
}

/* THE go button — one per screen */
.kiosk-modern .km-btn-go {
    color: var(--km-on-accent);
    background: linear-gradient(140deg, var(--km-accent) 0%, color-mix(in srgb, var(--km-accent) 72%, var(--km-primary)) 100%);
    border-color: transparent;
    box-shadow: 0 6px 24px var(--km-glow-go);
}

.kiosk-modern .km-btn-go:hover,
.kiosk-modern .km-btn-go:active {
    color: var(--km-on-accent);
    box-shadow: 0 8px 34px var(--km-glow-go);
}

/* subdued/ghost action (cancel, back, close) */
.kiosk-modern .km-btn-ghost {
    background: var(--km-glass-soft);
    color: var(--km-text-dim);
}

.kiosk-modern .km-btn-ghost:hover,
.kiosk-modern .km-btn-ghost:active {
    color: var(--km-text);
    border-color: var(--km-primary);
}

/* Telerik button normalization inside modern root */
.kiosk-modern .k-button.km-btn,
.kiosk-modern .k-button.km-btn:hover,
.kiosk-modern .k-button.km-btn:focus {
    box-shadow: none;
}

.kiosk-modern .k-button.km-btn-go,
.kiosk-modern .k-button.km-btn-go:hover {
    box-shadow: 0 6px 24px var(--km-glow-go);
}

/* aurora glow halo (focal elements) */
.kiosk-modern .km-aurora {
    position: relative;
    z-index: 0;
}

.kiosk-modern .km-aurora::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: inherit;
    background: linear-gradient(120deg, var(--km-glow-a), var(--km-glow-b));
    filter: blur(26px);
    opacity: calc(0.85 * var(--km-glow));
    z-index: -1;
    pointer-events: none;
}

/* glass panel */
.kiosk-modern .km-panel {
    background: var(--km-glass);
    border: 1px solid var(--km-line);
    border-radius: var(--km-card-r);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* chip */
.kiosk-modern .km-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.85em;
    border-radius: var(--rtt-radius-full);
    font-family: var(--rtt-font-mono);
    font-size: calc(15px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-text);
    background: color-mix(in srgb, var(--km-primary) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--km-primary) 35%, transparent);
    white-space: nowrap;
}

.kiosk-modern .km-chip-accent {
    color: var(--km-on-accent);
    background: var(--km-accent);
    border-color: transparent;
}

/* svg icons inherit the modern palette */
.kiosk-modern .km-btn svg,
.kiosk-modern .km-btn img.btnImg {
    height: 1.2em;
    width: 1.2em;
}

.kiosk-modern .km-btn-go svg { fill: var(--km-on-accent); }
.kiosk-modern .km-btn-ghost svg { fill: currentColor; }

/* hidden-scrollbar helper (modern variant) */
.kiosk-modern .km-scroll {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kiosk-modern .km-scroll::-webkit-scrollbar {
    display: none;
}

/* ----------------------------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------------------------- */
@keyframes km-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--km-glow-go); }
    50%      { transform: scale(1.045); box-shadow: 0 0 0 26px transparent; }
}

@keyframes km-kenburns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(1.5%, -1.5%); }
}

@keyframes km-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes km-scale-in {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes km-ring-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes km-countdown {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 289; }
}

@keyframes km-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes km-tap-wave {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

@keyframes km-confetti-fall {
    0%   { transform: translateY(-8vh) rotate(0deg); opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

@keyframes km-ripple {
    0%   { transform: scale(0); opacity: 0.45; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* ripple ink spawned by rtt-kiosk-animations.js on .km-ripple elements */
.kiosk-modern .km-ripple-ink {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--km-text) 35%, transparent);
    pointer-events: none;
    animation: km-ripple 550ms ease-out forwards;
}

/* ============================================================================
   1. PgKioskWelcome — full-bleed attract screen
   ============================================================================ */
.kiosk-modern.km-welcome {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* media layers (video / carousel) sit behind everything.
   The aurora gradient below is ALWAYS painted on the media layer itself, so a
   missing/failed video or image can never leave a plain black screen. */
.kiosk-modern .km-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 18% 8%, var(--km-glow-a), transparent 60%),
        radial-gradient(80% 60% at 85% 90%, var(--km-glow-b), transparent 55%),
        var(--km-bg);
}

/* explicit no-media fallback element (also themed, never plain black) */
.kiosk-modern .km-media-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 70% at 18% 8%, var(--km-glow-a), transparent 60%),
        radial-gradient(80% 60% at 85% 90%, var(--km-glow-b), transparent 55%),
        var(--km-bg);
}

/* single welcome image (no carousel needed) */
.kiosk-modern .km-media .km-media-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-modern .km-media video,
.kiosk-modern .km-media .km-carousel,
.kiosk-modern .km-media .k-carousel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    background: var(--km-bg);
}

.kiosk-modern .km-media .km-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ken-Burns drift on carousel stills (FULL anim only) */
.kiosk-modern .km-kenburns {
    animation: km-kenburns 9s ease-in-out infinite alternate;
    will-change: transform;
}

/* var-driven dark gradient overlay */
.kiosk-modern .km-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--km-bg) min(calc(100% * var(--km-overlay)), 100%), transparent) 0%,
        color-mix(in srgb, var(--km-bg) min(calc(55% * var(--km-overlay)), 100%), transparent) 40%,
        color-mix(in srgb, var(--km-bg) min(calc(120% * var(--km-overlay)), 100%), transparent) 100%);
}

.kiosk-modern .km-welcome-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: calc(28px * var(--km-fs)) 24px;
}

.kiosk-modern .km-welcome-logo {
    height: var(--km-logo-h);
    max-height: 160px;
    max-width: 70vw;
    object-fit: contain;
    border-radius: var(--rtt-radius-md);
    animation: km-float 6s ease-in-out infinite;
}

.kiosk-modern .km-welcome-msg {
    max-width: 72%;
    text-align: center;
    padding: 0.7em 1.4em;
    font-size: calc(26px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-text);
}

/* pulsing "touch to start" CTA — decorative, taps go to the flag pills */
.kiosk-modern .km-touch-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    pointer-events: none;
}

.kiosk-modern .km-touch-cta-ring {
    position: relative;
    width: calc(120px * var(--km-fs));
    height: calc(120px * var(--km-fs));
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--km-accent) 80%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: km-pulse 2.2s ease-in-out infinite;
}

.kiosk-modern .km-touch-cta-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--km-accent) 55%, transparent);
    animation: km-tap-wave 2.2s ease-out infinite;
}

.kiosk-modern .km-touch-cta-dot {
    width: 34%;
    height: 34%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--km-text) 65%, var(--km-accent)), var(--km-accent));
    box-shadow: 0 0 30px var(--km-glow-go);
}

.kiosk-modern .km-touch-cta-txt {
    font-size: calc(30px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--km-text);
    text-shadow: 0 2px 18px var(--km-glow-a);
    text-align: center;
}

/* language flag pills row (bottom)
   NOTE: no display rule with !important here — the classic page style drives
   #divLang_PgKioskWelcome display from code-behind (kiosk-disabled hiding). */
.kiosk-modern .km-flag-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(18px * var(--km-fs));
    width: auto;
    max-width: 94vw;
    padding: calc(16px * var(--km-fs)) calc(22px * var(--km-fs));
    background: var(--km-glass);
    border: 1px solid var(--km-line);
    border-radius: calc(var(--km-card-r) + 8px);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kiosk-modern .km-flag-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: calc(110px * var(--km-fs));
    min-height: var(--rtt-touch-target-lg);
    padding: 14px 16px;
    border-radius: var(--km-btn-r);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--rtt-transition-fast), border-color var(--rtt-transition-normal), background-color var(--rtt-transition-normal);
    text-align: center;
}

.kiosk-modern .km-flag-pill:active {
    transform: scale(0.94);
    border-color: var(--km-primary);
    background: color-mix(in srgb, var(--km-primary) 14%, transparent);
}

.kiosk-modern .km-flag-pill img {
    width: calc(88px * var(--km-fs));
    height: auto;
    border-radius: var(--rtt-radius-md);
    box-shadow: var(--rtt-shadow-md);
}

.kiosk-modern .km-flag-pill .lbl,
.kiosk-modern .km-flag-pill label {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(16px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-text);
    cursor: pointer;
}

/* dine-in / takeaway — two huge animated choice cards */
.kiosk-modern .km-choice-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: calc(36px * var(--km-fs));
    width: auto;
    padding: calc(20px * var(--km-fs));
    background: transparent;
}

.kiosk-modern .km-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: calc(300px * var(--km-fs));
    max-width: 42vw;
    padding: calc(30px * var(--km-fs)) calc(22px * var(--km-fs));
    background: var(--km-glass);
    border: 2px solid var(--km-line);
    border-radius: var(--km-card-r);
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform var(--rtt-transition-normal), border-color var(--rtt-transition-normal), box-shadow var(--rtt-transition-normal);
    animation: km-scale-in 500ms ease-out both;
}

.kiosk-modern .km-choice-card:nth-child(2) { animation-delay: 120ms; }

.kiosk-modern .km-choice-card:active {
    transform: scale(0.96);
    border-color: var(--km-accent);
    box-shadow: 0 10px 40px var(--km-glow-go);
}

.kiosk-modern .km-choice-card img {
    width: calc(160px * var(--km-fs));
    height: auto;
    border-radius: calc(var(--km-card-r) - 8px);
    box-shadow: var(--rtt-shadow-lg);
}

.kiosk-modern .km-choice-card .lbl,
.kiosk-modern .km-choice-card label {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(26px * var(--km-fs)) !important;
    font-weight: var(--rtt-font-weight-extrabold);
    letter-spacing: 0.08em;
    color: var(--km-text);
    cursor: pointer;
}

/* round back button */
.kiosk-modern .km-back-btn {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    width: var(--rtt-touch-target-lg);
    height: var(--rtt-touch-target-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--km-glass);
    border: 1px solid var(--km-line-strong);
    border-radius: 50%;
    cursor: pointer;
    transform: rotate(180deg);
}

.kiosk-modern .km-back-btn svg {
    fill: var(--km-text);
    width: 40%;
    height: auto;
}

/* ============================================================================
   2. PgKiosk — menu: top bar / category rail / product grid / cart bar
   ============================================================================ */
.kiosk-modern.km-menu {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* top bar */
.kiosk-modern .km-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 12px 18px;
    background: var(--km-glass-soft);
    border-bottom: 1px solid var(--km-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.kiosk-modern .km-topbar-logo {
    height: var(--km-logo-h);
    max-height: 110px;
    max-width: 40vw;
    object-fit: contain;
    border-radius: var(--rtt-radius-sm);
    cursor: pointer;
}

.kiosk-modern .km-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* category rail */
.kiosk-modern .km-cat-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: clamp(130px, 16vw, 210px);
    min-width: clamp(130px, 16vw, 210px);
    padding: 18px 12px 90px 12px;
    overflow-y: auto;
    scrollbar-width: none;
}

.kiosk-modern .km-cat-rail::-webkit-scrollbar { display: none; }

.kiosk-modern .km-cat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--rtt-touch-target-lg);
    padding: 12px 8px;
    border-radius: var(--km-btn-r);
    border: 2px solid transparent;
    background: var(--km-glass-soft);
    color: var(--km-text-dim);
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(15px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: transform var(--rtt-transition-fast), border-color var(--rtt-transition-normal), color var(--rtt-transition-normal), box-shadow var(--rtt-transition-normal);
}

.kiosk-modern .km-cat-pill img {
    width: 82%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--km-btn-r) - 4px);
}

.kiosk-modern .km-cat-pill:active { transform: scale(0.95); }

/* active category — aurora glow indicator */
.kiosk-modern .km-cat-pill.active {
    color: var(--km-text);
    border-color: var(--km-primary);
    background: color-mix(in srgb, var(--km-primary) 14%, transparent);
    box-shadow: 0 0 22px var(--km-glow-a);
}

.kiosk-modern .km-cat-pill.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 22%;
    bottom: 22%;
    width: 5px;
    border-radius: var(--rtt-radius-full);
    background: linear-gradient(180deg, var(--km-primary), var(--km-secondary));
    box-shadow: 0 0 14px var(--km-glow-a);
}

/* center area (rail + grid) */
.kiosk-modern .km-center {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* upselling takes over the center column */
.kiosk-modern .km-center.km-center-upsell {
    flex-direction: column;
}

/* product grid */
.kiosk-modern .km-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--km-card-min, 300px), 1fr));
    gap: 16px;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 18px 110px 8px;
    overflow-y: auto;
    scrollbar-width: none;
}

.kiosk-modern .km-grid::-webkit-scrollbar { display: none; }

/* Kiosk_Theme_CardSize — M / L / XL density */
.kiosk-modern.km-size-m  { --km-card-min: 240px; }
.kiosk-modern.km-size-l  { --km-card-min: 300px; }
.kiosk-modern.km-size-xl { --km-card-min: 380px; }

/* product card — image-dominant dark glass */
.kiosk-modern .km-card {
    display: flex;
    flex-direction: column;
    min-height: calc(150px * var(--km-fs));
    background: var(--km-glass);
    border: 1px solid var(--km-line);
    border-radius: var(--km-card-r);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform var(--rtt-transition-fast), border-color var(--rtt-transition-normal), box-shadow var(--rtt-transition-normal);
}

.kiosk-modern .km-card:active {
    transform: scale(0.98);
    border-color: color-mix(in srgb, var(--km-primary) 45%, transparent);
}

.kiosk-modern .km-card.km-card-off {
    opacity: 0.55;
    filter: grayscale(100%);
    pointer-events: none;
}

.kiosk-modern .km-card-pic {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--km-shade);
}

.kiosk-modern .km-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 14px 16px 16px 16px;
}

/* product name — keeps the classic .prodName class for AnimateWords interop,
   restyled here (higher specificity than the page's bare .prodName rule) */
.kiosk-modern .km-card .prodName {
    display: flex;
    width: 100%;
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(19px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-text);
    text-align: left;
    text-transform: capitalize;
    overflow-wrap: anywhere;
}

.kiosk-modern .km-card-desc {
    font-family: var(--rtt-font-mono);
    font-size: calc(13px * var(--km-fs));
    line-height: var(--rtt-line-height-normal);
    color: var(--km-text-dim);
    overflow-wrap: anywhere;
}

.kiosk-modern .km-card-meta {
    font-family: var(--rtt-font-mono);
    font-size: calc(12px * var(--km-fs));
    color: color-mix(in srgb, var(--km-primary) 80%, var(--km-text));
    font-weight: var(--rtt-font-weight-bold);
}

.kiosk-modern .km-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.kiosk-modern .km-price-old {
    font-family: var(--rtt-font-mono);
    font-size: calc(13px * var(--km-fs));
    color: var(--km-text-dim);
    text-decoration: line-through;
    text-decoration-color: var(--rtt-error);
    text-decoration-thickness: 2px;
}

.kiosk-modern .km-badge-off {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.25em 0.8em;
    border-radius: var(--rtt-radius-full);
    background: var(--rtt-error-light);
    border: 1px solid var(--rtt-error);
    color: var(--rtt-error);
    font-family: var(--rtt-font-mono);
    font-size: calc(12px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    letter-spacing: 0.06em;
    z-index: 2;
}

.kiosk-modern .km-badge-suggest {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    filter: drop-shadow(0 0 10px var(--km-glow-b));
}

.kiosk-modern .km-badge-suggest img { height: calc(24px * var(--km-fs)); }

/* card ADD button (the go action of the grid) */
.kiosk-modern .km-card .km-btn-add {
    min-height: var(--rtt-touch-target-lg);
    padding: 0.5em 1.2em;
    font-size: calc(16px * var(--km-fs));
    border-radius: var(--km-btn-r);
}

.kiosk-modern .km-card .km-btn-add svg,
.kiosk-modern .km-card .km-btn-add .add2BasketIco {
    fill: var(--km-on-accent);
    height: 1.2em;
    width: 1.2em;
}

/* small outline buttons on cards (menu details / view offers) */
.kiosk-modern .km-btn-mini {
    min-height: var(--rtt-touch-target);
    padding: 0.35em 0.9em;
    font-size: calc(13px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-primary);
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--km-primary) 55%, transparent);
    border-radius: var(--km-btn-r);
}

.kiosk-modern .km-btn-mini svg,
.kiosk-modern .km-btn-mini .viewIco {
    fill: var(--km-primary);
    height: 1.1em;
    width: 1.1em;
}

/* section header (menu detail name) */
.kiosk-modern .km-section-title {
    display: flex;
    justify-content: center;
    width: 100%;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(26px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    letter-spacing: 0.06em;
    color: var(--km-text);
    text-shadow: 0 0 24px var(--km-glow-a);
    padding: 6px 0;
}

/* stage separator inside a menu */
.kiosk-modern .km-separator {
    width: 60%;
    height: 2px;
    margin: 14px auto 0 auto;
    border-radius: var(--rtt-radius-full);
    background: linear-gradient(90deg, transparent, var(--km-line-strong), transparent);
}

/* bottom cart bar */
.kiosk-modern .km-cartbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rtt-z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: calc(88px * var(--km-fs));
    padding: 12px 18px;
    background: color-mix(in srgb, var(--km-bg) 88%, transparent);
    border-top: 1px solid var(--km-line-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -10px 40px var(--km-shade);
}

.kiosk-modern .km-cartbar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-family: var(--rtt-font-mono);
    font-size: calc(11px * var(--km-fs));
    color: var(--km-text-dim);
}

.kiosk-modern .km-cartbar .km-btn-go {
    min-height: var(--rtt-touch-target-lg);
    font-size: calc(20px * var(--km-fs));
    padding: 0.7em 1.8em;
}

/* count badge pop (re-created via @key when the order text changes) */
.kiosk-modern .km-cart-badge {
    animation: km-pop 450ms cubic-bezier(.68,-0.55,.27,1.55) both;
    display: inline-flex;
}

.kiosk-modern .km-cartbar .cartIco {
    fill: var(--km-on-accent);
    height: 1.3em;
    width: 1.3em;
}

.kiosk-modern .km-topbar .closeIco,
.kiosk-modern .km-topbar .closeIco2 {
    fill: currentColor;
    height: 1.1em;
    width: 1.1em;
}

/* upsell strip */
.kiosk-modern .km-upsell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 22px 0 22px;
    padding: 18px 20px;
    background: var(--km-glass);
    border: 1px solid color-mix(in srgb, var(--km-secondary) 45%, transparent);
    border-radius: var(--km-card-r);
    box-shadow: 0 0 34px var(--km-glow-b);
}

.kiosk-modern .km-upsell-msg {
    width: 100%;
    text-align: center;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(24px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-text);
}

.kiosk-modern .km-upsell-btns {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

/* ad banner + footer info stay subdued */
.kiosk-modern .km-ad {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 6px 14px 96px 14px;
}

.kiosk-modern .km-ad img {
    width: 95vw;
    max-width: 900px;
    object-fit: contain;
    border-radius: var(--km-card-r);
}

.kiosk-modern .km-footnote {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(88px * var(--km-fs));
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 20px;
    font-family: var(--rtt-font-mono);
    font-size: calc(10px * var(--km-fs));
    color: var(--km-text-dim);
    pointer-events: none;
    z-index: var(--rtt-z-sticky);
}

.kiosk-modern .km-footnote > * { pointer-events: auto; }

/* ============================================================================
   3. PgProdOptSelection — bottom-sheet options picker
   ============================================================================ */
.kiosk-modern.km-opts {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 50px);
    height: calc(100vh - 50px);
    overflow: hidden;
    position: relative;
    background: transparent;
}

.kiosk-modern .km-sheet {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: auto;
    background: color-mix(in srgb, var(--km-bg) 94%, transparent);
    border: 1px solid var(--km-line-strong);
    border-radius: calc(var(--km-card-r) + 10px) calc(var(--km-card-r) + 10px) 0 0;
    box-shadow: var(--rtt-shadow-xl), 0 -20px 80px var(--km-glow-a);
    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kiosk-modern .km-sheet-grip {
    width: 76px;
    height: 6px;
    margin: 12px auto 4px auto;
    border-radius: var(--rtt-radius-full);
    background: var(--km-line-strong);
}

.kiosk-modern .km-sheet-title {
    text-align: center;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(26px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    color: var(--km-text);
    padding: 6px 16px 0 16px;
}

.kiosk-modern .km-sheet-eyebrow {
    text-align: center;
    font-family: var(--rtt-font-mono);
    font-size: calc(15px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--km-primary);
    padding: 4px 16px 10px 16px;
}

.kiosk-modern .km-opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(220px * var(--km-fs)), 1fr));
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 20px calc(130px * var(--km-fs)) 20px;
    scrollbar-width: none;
}

.kiosk-modern .km-opt-grid::-webkit-scrollbar { display: none; }

.kiosk-modern .km-opt-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--km-glass);
    border: 2px solid var(--km-line);
    border-radius: var(--km-card-r);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform var(--rtt-transition-fast), border-color var(--rtt-transition-normal), box-shadow var(--rtt-transition-normal);
}

.kiosk-modern .km-opt-card:active { transform: scale(0.97); }

.kiosk-modern .km-opt-card.selected {
    border-color: var(--km-accent);
    box-shadow: 0 0 26px var(--km-glow-go);
}

.kiosk-modern .km-opt-card img.imgProdOpt {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}

.kiosk-modern .km-opt-name {
    text-align: center;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(18px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-text);
    padding: 0 10px;
    overflow-wrap: anywhere;
}

.kiosk-modern .km-opt-price {
    text-align: center;
    font-family: var(--rtt-font-mono);
    font-size: calc(14px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-primary);
    padding-bottom: 10px;
}

/* selected check bubble */
.kiosk-modern .km-opt-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: calc(42px * var(--km-fs));
    height: calc(42px * var(--km-fs));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--km-accent);
    color: var(--km-on-accent);
    font-size: calc(22px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    box-shadow: 0 4px 18px var(--km-glow-go);
    animation: km-pop 300ms ease-out both;
    z-index: 2;
}

/* 72px quantity stepper */
.kiosk-modern .km-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px 14px 10px;
}

.kiosk-modern .km-stepper .k-button.km-step-btn,
.kiosk-modern .km-step-btn {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: var(--km-btn-r);
    background: var(--km-glass-soft);
    border: 2px solid var(--km-line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.kiosk-modern .km-step-btn:active {
    transform: scale(0.94);
    border-color: var(--km-accent);
}

.kiosk-modern .km-step-btn .minusIco,
.kiosk-modern .km-step-btn .plusIco,
.kiosk-modern .km-step-btn svg {
    fill: var(--km-text);
    height: 30px;
    width: 30px;
}

.kiosk-modern .km-step-val {
    min-width: 64px;
    text-align: center;
    font-family: var(--rtt-font-mono);
    font-size: calc(28px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    color: var(--km-text);
    margin: 0;
    align-self: center;
}

/* sticky sheet footer: hint + count + cancel/next */
.kiosk-modern .km-sheet-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rtt-z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px calc(18px * var(--km-fs)) 22px;
    background: color-mix(in srgb, var(--km-bg) 90%, transparent);
    border-top: 1px solid var(--km-line-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.kiosk-modern .km-sheet-hint {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-family: var(--rtt-font-mono);
    font-size: calc(13px * var(--km-fs));
    color: var(--km-text-dim);
}

.kiosk-modern .km-sheet-foot .km-btn { min-width: calc(190px * var(--km-fs)); }

/* ============================================================================
   4. PgKioskPayment — focused terminal screen
   ============================================================================ */
.kiosk-modern.km-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(14px * var(--km-fs));
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

.kiosk-modern.km-pay .km-pay-title {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 24px;
    text-align: center;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(30px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    letter-spacing: 0.04em;
    color: var(--km-text);
}

.kiosk-modern.km-pay .km-pay-sub {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 24px;
    text-align: center;
    font-family: var(--rtt-font-mono);
    font-size: calc(16px * var(--km-fs));
    color: var(--km-text-dim);
}

.kiosk-modern.km-pay .km-pay-amount {
    display: flex;
    justify-content: center;
    width: auto;
    padding: 0.35em 1.1em;
    text-align: center;
    font-family: var(--rtt-font-mono);
    font-size: calc(34px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    color: var(--km-text);
    border-radius: var(--rtt-radius-full);
    background: color-mix(in srgb, var(--km-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--km-primary) 40%, transparent);
}

/* animated terminal illustration (pure CSS/SVG, no external assets) */
.kiosk-modern .km-terminal-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(320px * var(--km-fs));
    height: calc(320px * var(--km-fs));
    margin: calc(6px * var(--km-fs)) 0;
}

/* progress ring while polling the payment */
.kiosk-modern .km-terminal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid var(--km-line);
    border-top-color: var(--km-accent);
    border-right-color: color-mix(in srgb, var(--km-accent) 40%, transparent);
    animation: km-ring-spin 1.6s linear infinite;
    box-shadow: 0 0 34px var(--km-glow-go), inset 0 0 24px var(--km-glow-a);
}

.kiosk-modern .km-terminal {
    position: relative;
    width: 46%;
    height: 62%;
    border-radius: calc(var(--km-card-r) - 4px);
    background: linear-gradient(160deg, var(--km-surface), color-mix(in srgb, var(--km-surface) 55%, var(--km-bg)));
    border: 2px solid var(--km-line-strong);
    box-shadow: var(--rtt-shadow-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10%;
    gap: 12%;
}

.kiosk-modern .km-terminal-screen {
    width: 100%;
    height: 34%;
    border-radius: var(--rtt-radius-md);
    background: color-mix(in srgb, var(--km-primary) 22%, var(--km-bg));
    border: 1px solid color-mix(in srgb, var(--km-primary) 45%, transparent);
    box-shadow: inset 0 0 16px var(--km-glow-a);
}

.kiosk-modern .km-terminal-keys {
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8%;
}

.kiosk-modern .km-terminal-keys span {
    border-radius: 22%;
    background: var(--km-line);
}

/* floating card drifting toward the terminal */
.kiosk-modern .km-paycard {
    position: absolute;
    top: 12%;
    left: 8%;
    width: 40%;
    height: 26%;
    border-radius: var(--rtt-radius-lg);
    background: linear-gradient(130deg, var(--km-primary), var(--km-secondary));
    box-shadow: 0 12px 34px var(--km-glow-a);
    transform: rotate(-14deg);
    animation: km-float 3s ease-in-out infinite;
    overflow: hidden;
}

.kiosk-modern .km-paycard::before {
    content: '';
    position: absolute;
    top: 26%;
    left: 0;
    right: 0;
    height: 18%;
    background: color-mix(in srgb, var(--km-bg) 65%, transparent);
}

.kiosk-modern .km-paycard::after {
    content: '';
    position: absolute;
    bottom: 14%;
    left: 10%;
    width: 24%;
    height: 16%;
    border-radius: 18%;
    background: color-mix(in srgb, var(--km-text) 80%, transparent);
}

/* contactless waves */
.kiosk-modern .km-tapwaves {
    position: absolute;
    right: 10%;
    top: 20%;
    width: 24%;
    aspect-ratio: 1 / 1;
}

.kiosk-modern .km-tapwaves span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--km-accent);
    animation: km-tap-wave 1.8s ease-out infinite;
}

.kiosk-modern .km-tapwaves span:nth-child(2) { animation-delay: 0.45s; }
.kiosk-modern .km-tapwaves span:nth-child(3) { animation-delay: 0.9s; }

/* cancel — subdued, still huge */
.kiosk-modern.km-pay .km-pay-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: calc(10px * var(--km-fs)) 24px;
}

/* ============================================================================
   5. PgKioskThanks — celebration
   ============================================================================ */
.kiosk-modern.km-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(12px * var(--km-fs));
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

.kiosk-modern.km-thanks .km-thanks-title {
    text-align: center;
    padding: 0 24px;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(30px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    color: var(--km-text);
    animation: km-scale-in 500ms ease-out both;
}

.kiosk-modern.km-thanks .km-thanks-sub {
    text-align: center;
    max-width: 80%;
    padding: 0 24px;
    font-family: var(--rtt-font-mono);
    font-size: calc(15px * var(--km-fs));
    line-height: var(--rtt-line-height-relaxed);
    color: var(--km-text-dim);
}

/* HUGE order number with aurora halo + scale-in */
.kiosk-modern .km-ordernr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: calc(18px * var(--km-fs)) calc(44px * var(--km-fs));
    border-radius: var(--km-card-r);
    background: var(--km-glass);
    border: 1px solid var(--km-line-strong);
    animation: km-scale-in 650ms cubic-bezier(.68,-0.55,.27,1.55) both;
}

.kiosk-modern .km-ordernr-label {
    font-family: var(--rtt-font-mono);
    font-size: calc(14px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--km-text-dim);
}

.kiosk-modern .km-ordernr-value {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(88px * var(--km-fs));
    font-weight: var(--rtt-font-weight-extrabold);
    line-height: 1.05;
    color: var(--km-text);
    text-shadow: 0 0 40px var(--km-glow-a), 0 0 90px var(--km-glow-b);
    letter-spacing: 0.04em;
}

/* elevated QR card with glow */
.kiosk-modern .km-qr-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(16px * var(--km-fs));
    border-radius: var(--km-card-r);
    background: var(--km-glass);
    border: 1px solid var(--km-line-strong);
    box-shadow: var(--rtt-shadow-xl), 0 0 44px var(--km-glow-a);
}

.kiosk-modern .km-qr-card .qrCode {
    border-radius: calc(var(--km-card-r) - 10px);
    overflow: hidden;
}

/* auto-close countdown: small dial beside the close button */
.kiosk-modern .km-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(16px * var(--km-fs));
    margin-top: calc(10px * var(--km-fs));
}

.kiosk-modern .km-countdown-svg {
    width: calc(48px * var(--km-fs));
    height: calc(48px * var(--km-fs));
    flex: 0 0 auto;
    pointer-events: none;
}

.kiosk-modern .km-countdown-svg circle {
    fill: none;
    stroke: var(--km-line);
    stroke-width: 6;
}

.kiosk-modern .km-countdown-svg circle.km-countdown-arc {
    stroke: var(--km-accent);
    stroke-linecap: round;
    stroke-dasharray: 289;
    animation: km-countdown var(--km-count, 60s) linear forwards;
    filter: drop-shadow(0 0 6px var(--km-glow-go));
}

/* CSS confetti burst (FULL anim level only — pieces carry km-anim-extra) */
.kiosk-modern .km-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.kiosk-modern .km-confetti i {
    position: absolute;
    top: -8vh;
    width: 12px;
    height: 22px;
    border-radius: 3px;
    opacity: 0;
    background: var(--km-primary);
    animation: km-confetti-fall 3.4s ease-in both;
}

.kiosk-modern .km-confetti i:nth-child(3n)   { background: var(--km-secondary); }
.kiosk-modern .km-confetti i:nth-child(3n+1) { background: var(--km-accent); }
.kiosk-modern .km-confetti i:nth-child(1)  { left: 6%;  animation-delay: 0.05s; }
.kiosk-modern .km-confetti i:nth-child(2)  { left: 14%; animation-delay: 0.35s; }
.kiosk-modern .km-confetti i:nth-child(3)  { left: 22%; animation-delay: 0.15s; }
.kiosk-modern .km-confetti i:nth-child(4)  { left: 30%; animation-delay: 0.55s; }
.kiosk-modern .km-confetti i:nth-child(5)  { left: 38%; animation-delay: 0.25s; }
.kiosk-modern .km-confetti i:nth-child(6)  { left: 46%; animation-delay: 0.65s; }
.kiosk-modern .km-confetti i:nth-child(7)  { left: 54%; animation-delay: 0.1s; }
.kiosk-modern .km-confetti i:nth-child(8)  { left: 62%; animation-delay: 0.45s; }
.kiosk-modern .km-confetti i:nth-child(9)  { left: 70%; animation-delay: 0.2s; }
.kiosk-modern .km-confetti i:nth-child(10) { left: 78%; animation-delay: 0.6s; }
.kiosk-modern .km-confetti i:nth-child(11) { left: 86%; animation-delay: 0.3s; }
.kiosk-modern .km-confetti i:nth-child(12) { left: 94%; animation-delay: 0.5s; }

/* ============================================================================
   6. PgKioskMsg — kiosk unavailable
   ============================================================================ */
.kiosk-modern.km-offline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(26px * var(--km-fs));
    height: 100vh;
    width: 100vw;
    position: relative;
}

.kiosk-modern .km-offline-logo {
    height: var(--km-logo-h);
    max-height: 140px;
    max-width: 60vw;
    object-fit: contain;
    opacity: 0.9;
}

.kiosk-modern .km-offline-card {
    max-width: 78%;
    padding: calc(28px * var(--km-fs)) calc(36px * var(--km-fs));
    text-align: center;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(24px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    line-height: var(--rtt-line-height-normal);
    color: var(--km-text-dim);
    background: var(--km-glass);
    border: 1px solid var(--km-line);
    border-radius: var(--km-card-r);
}

.kiosk-modern .km-offline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rtt-error);
    box-shadow: 0 0 14px var(--rtt-error-light);
    animation: km-pulse 2.4s ease-in-out infinite;
}

/* ============================================================================
   LEGACY-ID OVERRIDES
   The classic razor <style> blocks are rendered in BOTH UI modes and style
   elements by ID. The modern branches must reuse a handful of those IDs for
   JS-interop (slideInFrom/shakeElement/fly-to-cart/long-press), so the rules
   below re-assert the modern look with .kiosk-modern + #id specificity
   (1,1,0 beats the classic bare #id at 1,0,0).
   Behavior-driven properties are deliberately NOT overridden:
   - display (code-behind toggles it through razor fields)
   - pointer-events (code-behind disables buttons through razor fields)
   ============================================================================ */

/* ---- PgKioskWelcome ---- */
.kiosk-modern #divLang_PgKioskWelcome {
    width: auto;
    max-width: 94vw;
    justify-content: center;
    gap: calc(18px * var(--km-fs));
    padding: calc(16px * var(--km-fs)) calc(22px * var(--km-fs));
    background: var(--km-glass);
    border: 1px solid var(--km-line);
    border-radius: calc(var(--km-card-r) + 8px);
    cursor: default;
}

.kiosk-modern #divTakeAway_PgKioskWelcome {
    width: auto;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    padding: calc(20px * var(--km-fs));
    gap: calc(36px * var(--km-fs));
    cursor: default;
}

/* ---- PgKiosk (menu) ---- */
.kiosk-modern #divTop_PgKiosk {
    padding: 12px 18px;
}

.kiosk-modern #divCats {
    width: clamp(130px, 16vw, 210px);
    min-width: clamp(130px, 16vw, 210px);
    max-width: clamp(130px, 16vw, 210px);
    padding: 18px 12px 110px 12px;
    overflow-y: auto;
}

.kiosk-modern #divLstShownProd {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--km-card-min, 300px), 1fr));
    gap: 16px;
    align-content: start;
    padding: 18px 18px 130px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: transparent;
}

.kiosk-modern #btnViewOrder:hover {
    color: var(--km-on-accent);
    background: linear-gradient(140deg, var(--km-accent) 0%, color-mix(in srgb, var(--km-accent) 72%, var(--km-primary)) 100%);
}

.kiosk-modern #btnUpsellingNo:hover {
    color: var(--km-on-accent);
}

.kiosk-modern #divUpsellingMsg {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(24px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    color: var(--km-text);
    padding: 5px;
}

.kiosk-modern #btnCloseMenuDet {
    border: 2px solid var(--km-line-strong);
    border-radius: var(--km-btn-r);
}

.kiosk-modern #btnCloseMenuDet:hover {
    background-color: var(--km-glass);
    color: var(--km-text);
}

/* ---- PgKioskPayment ---- */
.kiosk-modern.km-pay #divMsg {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(30px * var(--km-fs));
    color: var(--km-text);
    padding: 0 24px;
}

.kiosk-modern.km-pay #divMsg2 {
    font-family: var(--rtt-font-mono);
    font-size: calc(16px * var(--km-fs));
    color: var(--km-text-dim);
}

.kiosk-modern.km-pay #divAmount {
    width: auto;
    font-family: var(--rtt-font-mono);
    font-size: calc(34px * var(--km-fs));
    color: var(--km-text);
    padding: 0.35em 1.1em;
}

.kiosk-modern.km-pay #divVideo {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.kiosk-modern.km-pay #divCenterOutter_PgKioskPayment {
    padding: calc(10px * var(--km-fs)) 24px;
}

.kiosk-modern.km-pay #btnCancel {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(18px * var(--km-fs));
    color: var(--km-text-dim);
    min-width: calc(220px * var(--km-fs));
    border: 2px solid var(--km-line-strong);
    border-radius: var(--km-btn-r);
    background: var(--km-glass-soft);
}

.kiosk-modern.km-pay #btnCancel:hover {
    background-color: var(--km-glass);
    color: var(--km-text);
    border: 2px solid var(--km-primary);
}

/* ---- PgProdOptSelection (options sheet) ---- */
.kiosk-modern.km-opts #divMsg {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(26px * var(--km-fs));
    color: var(--km-text);
    padding: 10px 16px 4px 16px;
}

.kiosk-modern.km-opts #divTile_Outter {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    padding: 0;
    margin-top: 8px;
}

.kiosk-modern.km-opts #divTiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(220px * var(--km-fs)), 1fr));
    gap: 14px;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 20px calc(130px * var(--km-fs)) 20px;
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    color: var(--km-text);
    border: none;
    border-radius: 0;
    background-color: transparent;
    overflow-y: auto;
    overflow-x: hidden;
}

.kiosk-modern.km-opts #divMsg2 {
    font-family: var(--rtt-font-mono);
    font-size: calc(13px * var(--km-fs));
    color: var(--km-text-dim);
    width: auto;
    flex: 1 1 auto;
    text-align: left;
    padding: 0;
}

.kiosk-modern.km-opts #divBtns_PgProdOptSelection {
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px calc(18px * var(--km-fs)) 22px;
}

.kiosk-modern.km-opts #btnCancel_PgProdOptSelection,
.kiosk-modern.km-opts #btnNext_PgProdOptSelection {
    min-width: calc(190px * var(--km-fs));
    height: auto;
    min-height: var(--rtt-touch-target-lg);
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(18px * var(--km-fs));
    font-weight: var(--rtt-font-weight-bold);
    border-radius: var(--km-btn-r);
    /* pointer-events intentionally NOT overridden (driven by code-behind) */
}

.kiosk-modern.km-opts #btnCancel_PgProdOptSelection {
    color: var(--km-text-dim);
    border: 2px solid var(--km-line-strong);
    background: var(--km-glass-soft);
}

.kiosk-modern.km-opts #btnNext_PgProdOptSelection {
    color: var(--km-on-accent);
    border: 2px solid transparent;
    background: linear-gradient(140deg, var(--km-accent) 0%, color-mix(in srgb, var(--km-accent) 72%, var(--km-primary)) 100%);
    box-shadow: 0 6px 24px var(--km-glow-go);
}

/* ---- PgKioskThanks ---- */
.kiosk-modern.km-thanks #btnClose_PgKioskThanks {
    font-family: var(--km-font), 'adlib', var(--rtt-font-family);
    font-size: calc(18px * var(--km-fs));
    color: var(--km-text-dim);
    min-width: calc(220px * var(--km-fs));
    border: 2px solid var(--km-line-strong);
    border-radius: var(--km-btn-r);
    background: var(--km-glass-soft);
}

.kiosk-modern.km-thanks #btnClose_PgKioskThanks:hover {
    background-color: var(--km-glass);
    color: var(--km-text);
    border: 2px solid var(--km-primary);
}


/* ============================================================================
   US COMPLIANCE 2026-10-29 (US_COMPLIANCE_SPEC.md §3–§5) — kiosk side (v2 + classic)
   Calories / legal notices, the accessibility button (UcKioskA11y) and accessibility mode.
   Accessibility mode = <html class="rtt-kiosk-a11y"> (+ "rtt-kiosk-a11y-reach"), set by rttKioskSetA11y.
   High contrast comes from ONE token override set (--rtt-a11y-*), mapped onto the v2 --kd-* tokens; classic
   pages (colors rendered inline from gv.Theme) get a contrast filter instead. Nothing here applies unless
   the param / class is present → EU kiosks without the button pressed render exactly as before.
   ============================================================================ */
:root {
    /* high-contrast token set (WCAG AAA pairs: yellow / white on black) */
    --rtt-a11y-bg: #000000;
    --rtt-a11y-surface: #000000;
    --rtt-a11y-surface-2: #1a1a1a;
    --rtt-a11y-text: #ffffff;
    --rtt-a11y-dim: #f0f0f0;
    --rtt-a11y-primary: #ffe600;
    --rtt-a11y-on-primary: #000000;
    --rtt-a11y-line: #ffffff;
    --rtt-a11y-focus: #00e5ff;
    --rtt-a11y-text-scale: 1.3;     /* >= 1.25x (spec) */
    --rtt-a11y-reach-scale: 0.78;   /* reach mode: the UI shrinks into the lower part of a tall screen ... */
    --rtt-a11y-reach-text: 1.6;     /* ... and v2 text grows to keep 1.6 x 0.78 = 1.25x net */
    --rtt-a11y-target: 44px;        /* minimum touch target (ADA / WCAG 2.5.5) */
}

/* ---- calories + notices ---- */
.kd-cal { margin-left: .5em; font-size: .85em; color: var(--kd-dim); white-space: nowrap; }
.kd-opt-cal { margin-left: 0; }
.kd-legal { grid-column: 1 / -1; margin: calc(var(--kd-gap) * .5) 0; padding: calc(var(--kd-pad) * .5) var(--kd-pad);
            border: var(--kd-border) solid var(--kd-line); border-radius: var(--kd-card-r); background: var(--kd-surface);
            color: var(--kd-text); font-size: .9em; line-height: 1.35; }
.kd-legal-fda { color: var(--kd-dim); font-size: .8em; }
.kd-thanks-paycounter { color: var(--kd-accent); font-weight: 800; }
.kioskCal { font-size: 12px; opacity: .85; padding-left: 6px; color: var(--color_a, var(--rtt-text)); }
.kioskLegal { margin: 8px 10px; padding: 10px 14px; border: solid 1px var(--color_a, var(--rtt-text)); border-radius: 10px;
              color: var(--color_a, var(--rtt-text)); font-size: 14px; line-height: 1.35; }

/* ---- the accessibility dock (always visible, bottom-left, above page content) ---- */
.rtt-a11y-dock { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px));
                 z-index: 2147483000; display: flex; gap: 10px; pointer-events: none; }
.rtt-a11y-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-width: 56px; min-height: 56px;
                padding: 0 14px; border-radius: 28px; border: 2px solid var(--kd-primary, var(--color_a, var(--rtt-primary)));
                background: var(--kd-surface, var(--rtt-bg-elevated)); color: var(--kd-text, var(--rtt-text));
                font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px -6px rgba(var(--kd-shadow-rgb, 0, 0, 0), .5); }
.rtt-a11y-btn svg { width: 28px; height: 28px; fill: currentColor; flex: 0 0 auto; }
.rtt-a11y-btn .rtt-a11y-lbl { display: none; }                 /* icon only while off (no clutter) ... */
.rtt-a11y-btn.on .rtt-a11y-lbl, .rtt-kiosk-a11y .rtt-a11y-btn .rtt-a11y-lbl { display: inline; } /* ... labelled while on */
.rtt-a11y-btn:focus-visible { outline: 4px solid var(--rtt-a11y-focus); outline-offset: 2px; }
.rtt-a11y-reach { display: none; }
@media (min-height: 1300px) { .rtt-a11y-reach { display: inline-flex; } }   /* reach mode only matters on tall screens */

/* ---- accessibility mode: v2 pages (token override set) ---- */
html.rtt-kiosk-a11y .kd {
    --kd-bg: var(--rtt-a11y-bg) !important; --kd-surface: var(--rtt-a11y-surface) !important; --kd-surface-2: var(--rtt-a11y-surface-2) !important;
    --kd-text: var(--rtt-a11y-text) !important; --kd-dim: var(--rtt-a11y-dim) !important;
    --kd-primary: var(--rtt-a11y-primary) !important; --kd-on-primary: var(--rtt-a11y-on-primary) !important;
    --kd-accent: var(--rtt-a11y-primary) !important; --kd-on-accent: var(--rtt-a11y-on-primary) !important;
    --kd-price: var(--rtt-a11y-primary) !important; --kd-line: var(--rtt-a11y-line) !important; --kd-border: 2px !important;
    --kd-paper: var(--rtt-a11y-bg) !important; --kd-ink: var(--rtt-a11y-text) !important; --kd-ink-rgb: 255, 255, 255 !important;
    --kd-overlay: 0.85 !important;
    --kd-u: calc(17px * var(--kd-scale) * var(--kd-fs) * var(--rtt-a11y-text-scale)) !important;
    --kd-touch: max(var(--rtt-a11y-target), 64px, calc(var(--kd-u) * 3.4)) !important;
}
html.rtt-kiosk-a11y .kd *:focus-visible { outline: 4px solid var(--rtt-a11y-focus); outline-offset: 2px; }
html.rtt-kiosk-a11y .kd .selected, html.rtt-kiosk-a11y .kd .active { outline: 3px solid var(--rtt-a11y-primary); } /* never color-only state */

/* ---- accessibility mode: classic pages (colors are inline → contrast filter; text + targets enlarged) ---- */
html.rtt-kiosk-a11y body:not(:has(.kd)) #app { filter: contrast(1.45) saturate(1.15); }
html.rtt-kiosk-a11y body:not(:has(.kd)) :is(.prodName, .divPrice, .divProdDesc, #divAllergies, .divProdOptName, .kioskCal, .kioskLegal,
    #divMsg, #divMsg2, #divOrderRef, #lblTotal, #lblTotalAmount, .k-button-text) { zoom: 1.25; }

/* ---- 44 px minimum targets everywhere while on ---- */
html.rtt-kiosk-a11y .k-button, html.rtt-kiosk-a11y button, html.rtt-kiosk-a11y [role="button"] {
    min-height: var(--rtt-a11y-target); min-width: var(--rtt-a11y-target);
}

/* ---- reach mode (tall screens): the whole UI drawn in the lower part, controls within 15-48 in ---- */
@media (min-height: 1300px) {
    html.rtt-kiosk-a11y.rtt-kiosk-a11y-reach body { height: 100vh; overflow: hidden; transform: scale(var(--rtt-a11y-reach-scale)); transform-origin: 50% 100%; }
    html.rtt-kiosk-a11y.rtt-kiosk-a11y-reach .kd { --kd-u: calc(17px * var(--kd-scale) * var(--kd-fs) * var(--rtt-a11y-reach-text)) !important; }
}


/* ---- BO v3 D2 2026-10-29: OpeningHours closed banner (welcome screen) ---- */
.kd-closed { position: relative; z-index: 3; margin: var(--kd-gap) var(--kd-pad) 0; text-align: center; font-size: 1.3em; font-weight: 800;
             color: var(--kd-text); background: var(--kd-surface); border-color: var(--kd-accent); }
.kioskClosed { position: fixed; top: 20px; left: 20px; right: 20px; z-index: 20; text-align: center; font-size: 22px;
               background: var(--color_b, var(--rtt-bg)); }

/* ----------------------------------------------------------------------------
   2026-11-09 (user: "the vertical scroll bar should be themed... or even better, hidden"):
   NO visible scrollbar anywhere in the kiosk app (both heads load this file; classic + v2 + demo).
   Scrolling itself is unchanged: finger, mouse wheel, and the kiosk-design.js drag scrolling.
   Deliberately NOT scoped to .kiosk-modern: the page/body scrollbar (demo picker, menus) lives above
   every page root. This file is loaded only by the kiosk hosts, never by the back office.
   ---------------------------------------------------------------------------- */
/* !important (2026-11-09 fix): a universal selector loses to any class rule that sets its own scrollbar
   (kiosk-design.css .kd-grid "scrollbar-width: thin" kept the menu's product-grid scrollbar visible) */
html, body, * {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}