/* ========================================================
   Mama Lydia's Bites Receipt Photobooth
   Customer Kiosk Aesthetic - Korean Receipt Photobooth & Stationery Theme
   ======================================================== */

:root {
    --bg-paper: #F8F6F0;
    --bg-card: #FFFFFF;
    --text-primary: #121212;
    --text-secondary: #5A5A5A;
    --text-muted: #8E8E8E;
    --border-color: #E2DDD5;
    --accent-black: #000000;
    --accent-red: #D32F2F;
    --accent-gold: #C5A059;
    --receipt-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    --font-mono: "Courier New", Courier, monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --touch-min: 52px;
    --touch-target: 52px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --kiosk-padding: clamp(10px, 2.5vw, 24px);
    --content-max-width: 980px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    max-width: 100%;
}

html, body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background-color: #121212;
    color: var(--text-primary);
    font-family: var(--font-sans);
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    touch-action: pan-y;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Kiosk App Container (Fluid Fullscreen with Notch / Safe Area Support) */
#kiosk-app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-paper);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Subtle Receipt Perforation Header / Footer Border */
.perforated-border {
    background-image: radial-gradient(circle, var(--bg-paper) 4px, transparent 5px);
    background-size: 16px 16px;
    background-position: -8px -8px;
    height: 12px;
    width: 100%;
}

/* Kiosk Navigation Header (Hidden per user request for clean full-screen kiosk) */
.kiosk-header {
    display: none !important;
}

/* Floating Session Timer Badge (Prominent, High Visibility for Tablets & Kiosks) */
.floating-session-timer {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 99999;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    border-radius: 40px;
    background: #FFFFFF;
    border: 3px solid #111111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-session-timer .timer-icon {
    font-size: 24px;
    animation: timerTickWiggle 1.2s ease-in-out infinite;
}

@keyframes timerTickWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.floating-session-timer .timer-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.floating-session-timer .timer-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #71717A;
    margin-bottom: 2px;
}

.floating-session-timer .timer-clock {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #111111;
}

.floating-session-timer .timer-warning-chip {
    display: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Gentle Warning (Last 30 Seconds) */
.floating-session-timer.warning-gentle {
    background: #FFFBEB;
    border-color: #F59E0B;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5), 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: scale(1.06);
}

.floating-session-timer.warning-gentle .timer-icon {
    color: #D97706;
}

.floating-session-timer.warning-gentle .timer-clock {
    color: #B45309;
}

.floating-session-timer.warning-gentle .timer-warning-chip {
    display: inline-block;
    background: #F59E0B;
    color: #FFFFFF;
}

/* Urgent Alert (Last 10 Seconds) */
.floating-session-timer.warning-urgent {
    background: #FEF2F2;
    border-color: #EF4444;
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.7), 0 10px 30px rgba(0, 0, 0, 0.25);
    animation: urgentTimerPulse 0.5s infinite alternate;
}

.floating-session-timer.warning-urgent .timer-icon {
    color: #DC2626;
}

.floating-session-timer.warning-urgent .timer-clock {
    color: #DC2626;
    font-size: 32px;
}

.floating-session-timer.warning-urgent .timer-warning-chip {
    display: inline-block;
    background: #DC2626;
    color: #FFFFFF;
    animation: chipFlash 0.5s infinite alternate;
}

@keyframes urgentTimerPulse {
    from { transform: scale(1.05); }
    to { transform: scale(1.15); box-shadow: 0 0 40px rgba(239, 68, 68, 0.85); }
}

@keyframes chipFlash {
    from { opacity: 0.8; }
    to { opacity: 1; transform: scale(1.05); }
}

/* Studio Mode (Decorating Screen): Docks cleanly inside topbar center slot without covering any buttons */
.floating-session-timer.studio-mode,
#studio-timer-slot #session-timer-display,
#studio-timer-slot .floating-session-timer,
#kiosk-app:has(#screen-stickers.active) #session-timer-display {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 5px 14px !important;
    border-width: 2px !important;
    border-color: #111111 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    z-index: 10 !important;
    max-width: fit-content !important;
}

.floating-session-timer.studio-mode .timer-icon,
#studio-timer-slot #session-timer-display .timer-icon {
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    animation: none !important;
}

.floating-session-timer.studio-mode .timer-icon svg,
#studio-timer-slot #session-timer-display .timer-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.floating-session-timer.studio-mode .timer-text-container,
#studio-timer-slot #session-timer-display .timer-text-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1 !important;
}

.floating-session-timer.studio-mode .timer-label,
#studio-timer-slot #session-timer-display .timer-label {
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #71717A !important;
    margin-bottom: 1px !important;
}

.floating-session-timer.studio-mode .timer-clock,
#studio-timer-slot #session-timer-display .timer-clock {
    font-family: var(--font-mono) !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    color: #111111 !important;
    line-height: 1 !important;
}

.floating-session-timer.studio-mode .timer-warning-chip,
#studio-timer-slot #session-timer-display .timer-warning-chip {
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}

.floating-session-timer.studio-mode.warning-gentle,
#studio-timer-slot #session-timer-display.warning-gentle {
    background: #FFFBEB !important;
    border-color: #F59E0B !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35) !important;
    transform: none !important;
}

.floating-session-timer.studio-mode.warning-urgent,
#studio-timer-slot #session-timer-display.warning-urgent {
    background: #FEF2F2 !important;
    border-color: #EF4444 !important;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.45) !important;
    animation: urgentTimerPulseStudio 0.5s infinite alternate !important;
    transform: none !important;
}

@keyframes urgentTimerPulseStudio {
    from { opacity: 0.9; }
    to { opacity: 1; box-shadow: 0 0 20px rgba(239, 68, 68, 0.7); }
}

/* ========================================================
   APP-LIKE STARTUP SPLASH SCREEN
   ======================================================== */
.app-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: radial-gradient(circle at center, #1F1E1B 0%, #0E0E0E 100%);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 24px;
    box-sizing: border-box;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-splash-screen.fade-out {
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none;
}

.splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.splash-logo-cluster {
    position: relative;
    width: 130px;
    height: 130px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-glow-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.22);
    animation: splashRingSpin 14s linear infinite;
}

@keyframes splashRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.splash-logo-circle {
    width: 118px;
    height: 118px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 35px rgba(255, 255, 255, 0.15), 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    animation: splashLogoPulse 2.4s ease-in-out infinite alternate;
}

@keyframes splashLogoPulse {
    from { transform: scale(0.97); }
    to { transform: scale(1.03); }
}

.splash-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.splash-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    margin-bottom: 6px;
    font-family: var(--font-sans);
}

.splash-subtitle {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #A3A3A3;
    font-weight: 700;
    margin-bottom: 32px;
}

.splash-progress-track {
    width: 220px;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
}

.splash-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #FFFFFF);
    border-radius: 999px;
    animation: splashFillProgress 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes splashFillProgress {
    0% { width: 5%; }
    40% { width: 65%; }
    80% { width: 92%; }
    100% { width: 100%; }
}

.splash-loading-status {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888888;
    font-weight: 700;
}

.splash-badge {
    position: absolute;
    bottom: 24px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========================================================
   ORIENTATION GUARD (PORTRAIT ENFORCEMENT)
   ======================================================== */
.orientation-guard-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(12, 12, 12, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 99998;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    color: #FFFFFF;
}

.orientation-guard-overlay {
    display: none !important;
}

.orientation-card {
    background: #1C1C1E;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 36px 28px;
    max-width: 440px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.orientation-icon-rotating {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F59E0B;
    animation: rotateTablet 2.2s ease-in-out infinite;
}

@keyframes rotateTablet {
    0%, 20% { transform: rotate(90deg); }
    50%, 80% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.orientation-card h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    margin: 0;
}

.orientation-card p {
    font-size: 15px;
    color: #A1A1AA;
    line-height: 1.5;
    margin: 0;
}

/* ========================================================
   DISCREET FULLSCREEN TOGGLE BUTTON
   ======================================================== */
.btn-kiosk-fullscreen {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    color: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    opacity: 0.7;
}

.btn-kiosk-fullscreen:hover,
.btn-kiosk-fullscreen:active {
    opacity: 1;
    transform: scale(1.08);
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Subtle look when in native standalone PWA */
@media all and (display-mode: fullscreen), all and (display-mode: standalone) {
    .btn-kiosk-fullscreen {
        opacity: 0.25;
    }
    .btn-kiosk-fullscreen:hover {
        opacity: 0.85;
    }
}

/* Screens Wrapper */
.screens-viewport {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.kiosk-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.kiosk-screen.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.kiosk-screen:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ========================================================
   SCREEN 1: IDLE / LANDING (SCRAPBOOK PHOTOBOOTH DESIGN)
   ======================================================== */
.idle-scrapbook-wrapper {
    position: relative;
    width: 100%;
    max-width: 980px;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 10px 14px;
    box-sizing: border-box;
}

/* Side Scrapbook Strips (Polaroid photostrip accents) */
.scrapbook-strip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.strip-left {
    left: 0;
    transform: translateY(-50%) rotate(-3deg);
}

.strip-right {
    right: 0;
    transform: translateY(-50%) rotate(3deg);
}

.scrapbook-clip {
    font-size: 26px;
    margin-bottom: -10px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.scrapbook-tape {
    width: 70px;
    height: 18px;
    background: rgba(244, 114, 182, 0.45);
    margin-bottom: -8px;
    z-index: 2;
    transform: rotate(-5deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.scrapbook-note {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #374151;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 8px;
}

.scrapbook-note .doodle-heart,
.scrapbook-note .doodle-star {
    display: block;
    font-size: 16px;
    margin-top: 2px;
    color: #111111;
}

.scrapbook-photostrip-wrap {
    width: 100%;
    background: #FFFFFF;
    padding: 6px 6px 12px 6px;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease;
}

.scrapbook-strip-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
}

.scrapbook-moment-tag {
    font-size: 10px;
    font-weight: 900;
    color: #111;
    background: #FEE2E2;
    padding: 4px 10px;
    border-radius: 4px;
    margin-top: 8px;
    transform: rotate(2deg);
    border: 1px dashed #F87171;
}

.scrapbook-doodles-left,
.scrapbook-doodles-right {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    font-size: 16px;
    color: #111;
}

/* Center Main Receipt Card */
.idle-receipt-strip {
    background: #FAF8F5;
    width: 590px;
    max-width: 95vw;
    padding: 34px 34px 22px;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16), 0 4px 18px rgba(0, 0, 0, 0.06);
    border-left: 1px solid #EAE5DE;
    border-right: 1px solid #EAE5DE;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    margin: 10px auto;
}

/* Receipt Top Zig-Zag Perforation */
.receipt-jagged-teeth-top {
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    background: radial-gradient(circle, transparent, transparent 50%, #FAF8F5 50%, #FAF8F5 100%);
    background-size: 20px 28px;
}

/* Receipt Bottom Perforation */
.receipt-jagged-teeth-bottom {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    height: 14px;
    background: radial-gradient(circle, transparent, transparent 50%, #FAF8F5 50%, #FAF8F5 100%);
    background-size: 20px 28px;
    transform: rotate(180deg);
}

/* Brand Header: Logo with Sparkles */
.idle-brand-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.sparkle-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #111111;
    font-size: 16px;
    animation: sparkleFloat 2s ease-in-out infinite alternate;
}

.sparkle-cluster.right {
    animation-delay: 1s;
}

@keyframes sparkleFloat {
    0% { transform: translateY(0) scale(0.9); opacity: 0.7; }
    100% { transform: translateY(-4px) scale(1.1); opacity: 1; }
}

.idle-logo {
    width: 136px;
    height: 136px;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border: 4px solid #FFFFFF;
    outline: 2px solid #E5E7EB;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.idle-logo:active {
    transform: scale(0.92);
}

.idle-logo img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    display: block;
    pointer-events: none;
}

.logo-tap-indicator {
    display: none;
}

/* Main Titles */
.idle-title-typewriter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 4px;
}

.idle-brand-title {
    font-size: 23px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #111111;
    margin: 0 0 2px;
    line-height: 1.2;
}

.idle-brand-title .title-heart {
    color: #F43F5E;
    display: inline-block;
    animation: heartbeat 1.6s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.2); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
}

.idle-service-title {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #111111;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Highlighter Brush Tagline */
.idle-tagline-brush-wrapper {
    margin: 8px 0 16px;
}

.idle-tagline-brush {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #18181B;
    background: #FEF08A;
    padding: 4px 16px;
    border-radius: 4px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(254, 240, 138, 0.5);
    transform: rotate(-0.5deg);
    margin: 0;
}

/* Ticket Style Package Cards (As shown in tablet kiosk media_1790695182893.png) */
.idle-ticket-packages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 8px 0 16px;
    box-sizing: border-box;
}

.ticket-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    text-align: left;
    cursor: pointer;
    min-height: 84px;
}

.ticket-card:active {
    transform: scale(0.98);
}

.ticket-card.selected {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-width: 2.5px !important;
}

.ticket-printed-only {
    background: #FFF5F5;
    border: 2px dashed #FCA5A5;
}

.ticket-printed-only.selected {
    border-color: #EF4444;
}

.ticket-softcopy {
    background: #FFFBF0;
    border: 2px dashed #FCD34D;
}

.ticket-softcopy.selected {
    border-color: #F59E0B;
}

.ticket-notch {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: #FAF8F5;
    border-radius: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
}

.ticket-notch.notch-left {
    left: -9px;
    border-right: 2px dashed #E5E7EB;
}

.ticket-notch.notch-right {
    right: -9px;
    border-left: 2px dashed #E5E7EB;
}

.ticket-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #111111;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ticket-content {
    flex: 1;
    min-width: 0;
}

.ticket-title {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #111111;
    margin: 0 0 3px;
    line-height: 1.25;
}

.ticket-desc {
    font-size: 12.5px;
    color: #4B5563;
    margin: 0;
    line-height: 1.35;
    font-weight: 500;
}

.ticket-addon-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #C2410C;
    background: #FFEDD5;
    border: 1px solid #FDBA74;
    padding: 3px 10px;
    border-radius: 12px;
    margin-top: 6px;
    letter-spacing: 0.3px;
}

.ticket-price-badge {
    padding: 10px 18px;
    border-radius: 16px;
    color: #FFFFFF;
    font-family: var(--font-mono);
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}

.ticket-price-badge .currency {
    font-size: 17px;
    font-weight: 900;
}

.ticket-price-badge .amount {
    font-size: 26px;
    font-weight: 900;
}

.badge-printed {
    background: #FF4D6D;
    box-shadow: 0 4px 14px rgba(255, 77, 109, 0.35);
}

.badge-softcopy {
    background: #F95738;
    box-shadow: 0 4px 14px rgba(249, 87, 56, 0.35);
}

/* 4-Feature Step Icons Row */
.idle-features-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1.1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin: 8px 0 16px;
    padding: 10px 4px;
    border-top: 1px dashed #D1D5DB;
    border-bottom: 1px dashed #D1D5DB;
    box-sizing: border-box;
}

.feature-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.feature-icon {
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #374151;
    line-height: 1.2;
    text-transform: uppercase;
}

.feature-label small {
    font-size: 8.5px;
    opacity: 0.85;
}

.feature-divider-v {
    width: 1px;
    height: 30px;
    background: #E5E7EB;
}

/* Big Tap to Start Button */
.btn-tap-start {
    width: 100%;
    height: 74px;
    background: #111111;
    color: #FFFFFF;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 2px;
    border: 3.5px solid #FFFFFF;
    outline: 3px solid #111111;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: tapButtonPulse 2.4s infinite ease-in-out;
    margin-bottom: 12px;
}

@keyframes tapButtonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.025);
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42), 0 0 0 8px rgba(0, 0, 0, 0.07);
    }
}

.btn-tap-start:active {
    transform: scale(0.96);
    background: #222;
}

.btn-tap-start .btn-camera-icon {
    font-size: 22px;
}

.btn-tap-start .btn-arrow {
    font-size: 22px;
    animation: bounceRight 1.4s infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* Footer Motto & Checkerboard */
.idle-receipt-footer-motto {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #6B7280;
    margin: 6px 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    user-select: none;
}

.idle-checkerboard-ribbon {
    width: calc(100% + 68px);
    height: 16px;
    margin: 10px -34px -22px -34px;
    background: repeating-conic-gradient(#111 0% 25%, #FFF 0% 50%) 50% / 14px 14px;
    border-top: 2px solid #111;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Responsive adjustment for tablets (Samsung Galaxy Tab A11 portrait 800x1280 & 601px-960px) */
@media (max-width: 960px) and (min-width: 601px) {
    .idle-scrapbook-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 8px 6px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    /* Keep side photo strips visible and positioned gracefully on tablets */
    .scrapbook-strip {
        display: flex !important;
        width: clamp(120px, 16vw, 138px);
        top: 50%;
        z-index: 1;
    }
    .strip-left {
        left: clamp(2px, 1.2vw, 10px);
        transform: translateY(-50%) rotate(-3.5deg);
    }
    .strip-right {
        right: clamp(2px, 1.2vw, 10px);
        transform: translateY(-50%) rotate(3.5deg);
    }
    .idle-receipt-strip {
        width: 535px;
        max-width: calc(100vw - 145px);
        padding: 36px 30px 24px;
        margin: 8px auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
        box-sizing: border-box;
        z-index: 2;
    }
    .idle-checkerboard-ribbon {
        width: calc(100% + 60px);
        margin: 12px -30px -24px -30px;
    }
    .idle-logo {
        width: 140px !important;
        height: 140px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        margin-bottom: 14px;
    }
    .idle-brand-title {
        font-size: 25px;
    }
    .idle-service-title {
        font-size: 30px;
    }
    .idle-tagline-brush {
        font-size: 13.5px;
    }
    .btn-tap-start {
        height: 80px;
        font-size: 22px;
        border-radius: 40px;
    }
    .ticket-card {
        padding: 16px 20px;
        min-height: 84px;
    }
    .ticket-title {
        font-size: 15.5px;
    }
    .ticket-price-badge .amount {
        font-size: 28px;
    }
    .guide-container {
        max-width: 740px;
        width: 100%;
    }
    .guide-steps-grid-v2 {
        max-width: 740px;
        gap: 18px;
    }
    .guide-step-card {
        min-height: 190px;
        padding: 22px;
    }
    .guide-step-title {
        font-size: 21px;
    }
    .payment-methods-grid {
        max-width: 740px;
        gap: 20px;
    }
    .payment-card {
        min-height: 400px;
        padding: 34px 20px;
    }
}

/* Hide side strips only on very narrow mobile phones (< 600px) */
@media (max-width: 600px) {
    .scrapbook-strip {
        display: none !important;
    }
    .idle-receipt-strip {
        width: 100%;
        max-width: 95vw;
        padding: 28px 18px 18px;
    }
    .idle-checkerboard-ribbon {
        width: calc(100% + 36px);
        margin: 10px -18px -18px -18px;
    }
}

/* ========================================================
   SCREEN 2: HOW IT WORKS / GUIDE
   ======================================================== */
.guide-container {
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-between;
    padding: 8px 4px;
    box-sizing: border-box;
}

#screen-guide .screen-heading {
    text-align: center;
    margin-top: 6px;
    margin-bottom: 12px;
}

#screen-guide .screen-heading h2 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

#screen-guide .screen-heading p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-weight: 500;
}

/* Aesthetic 4-Step Guide Grid */
.guide-steps-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    width: 100%;
    max-width: 740px;
    margin: 14px 0 20px;
    box-sizing: border-box;
}

.guide-step-card {
    background: #FFFFFF;
    border: 2px solid #EAE5DE;
    border-radius: 18px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 185px;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-align: left;
    position: relative;
}

.guide-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border-color: #111111;
}

.guide-step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
}

.guide-step-badge {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    background: #111111;
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

.guide-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FAF8F5;
    border: 1.5px solid #EAE5DE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
    flex-shrink: 0;
}

.guide-step-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #111111;
    margin: 0 0 6px;
    line-height: 1.25;
}

.guide-step-desc {
    font-size: 13.5px;
    line-height: 1.45;
    color: #4B5563;
    margin: 0 0 14px;
    flex: 1;
}

.guide-step-pill {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #111111;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

#screen-guide .kiosk-nav-bar {
    margin-top: 12px;
    gap: 16px;
}

#screen-guide .btn-secondary {
    min-width: 170px;
    height: 70px;
    font-size: 19px;
    font-weight: 800;
    border-radius: 16px;
}

#screen-guide .btn-primary {
    height: 70px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 1.2px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

@media (max-width: 580px) {
    .guide-steps-grid-v2 {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 10px 0;
    }
    .guide-step-card {
        min-height: auto;
        padding: 16px 14px;
    }
    .guide-step-title {
        font-size: 17px;
    }
    .guide-step-desc {
        font-size: 12.5px;
        margin-bottom: 10px;
    }
    #screen-guide .btn-primary, #screen-guide .btn-secondary {
        height: 54px;
        font-size: 15px;
    }
}

/* Navigation Action Bar */
.kiosk-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 740px;
    margin-top: 22px;
    gap: 18px;
    box-sizing: border-box;
}

#screen-layout #btn-layout-back {
    display: none !important;
}

#screen-layout .layout-nav-bar {
    justify-content: center;
}

#screen-layout #btn-layout-continue {
    width: 100%;
    max-width: 100%;
}

.btn-secondary {
    min-width: 170px;
    height: 70px;
    background: #FFFFFF;
    color: var(--text-primary);
    border: 2.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:active {
    background: #F0EDE5;
    transform: scale(0.97);
    border-color: #B5ADA1;
}

.btn-primary {
    flex: 1;
    max-width: none;
    height: 70px;
    background: var(--accent-black);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-md);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 1.2px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:active {
    transform: scale(0.98);
    background: #222222;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* ========================================================
   SCREEN 2B: PAYMENT METHOD SELECTION
   ======================================================== */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 740px;
    margin-top: 16px;
    box-sizing: border-box;
}

.payment-card {
    background: #FFFFFF;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 34px 24px 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 380px;
    box-sizing: border-box;
}

.payment-card:hover, .payment-card:active {
    border-color: var(--accent-black);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
}

.payment-card-badge {
    position: absolute;
    top: -14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 18px;
    border-radius: 20px;
    background: #EAE6DE;
    color: var(--text-primary);
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.payment-card-badge.featured {
    background: var(--accent-black);
    color: #FFFFFF;
}

.payment-card-icon {
    width: 125px;
    height: 125px;
    border-radius: 20px;
    overflow: hidden;
    margin: 12px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAF9F5;
    border: 1.5px solid var(--border-color);
    padding: 12px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.payment-card-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.payment-card-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.payment-card-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 22px;
}

.payment-card-cta {
    width: 100%;
    height: 64px;
    background: #F4F1EA;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.payment-card:hover .payment-card-cta,
.payment-card-cta.featured-cta {
    background: var(--accent-black);
    color: #FFFFFF;
    border-color: var(--accent-black);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ========================================================
   SCREEN 2C: PACKAGE SELECTION FOR QR PH
   ======================================================== */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 740px;
    margin-top: 16px;
    box-sizing: border-box;
}

.package-card {
    background: #FFFFFF;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 34px 24px 28px;
    position: relative;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    box-sizing: border-box;
}

.package-card:hover {
    border-color: var(--accent-black);
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
}

.package-card.featured {
    border-color: #111;
}

.package-card.selected {
    border-color: #111111;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    background: #FFFDF9;
    outline: 2.5px solid #111111;
}

.package-card.selected .btn-pkg-select {
    background: #111111;
    color: #FFFFFF;
    border-color: #111111;
}

.pkg-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #FAF8F5;
    border: 1.5px solid #EAE5DE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111111;
}

.pkg-icon-wrap.featured-icon {
    background: #FEF3C7;
    border-color: #FCD34D;
    color: #92400E;
}

.pkg-badge {
    position: absolute;
    top: -14px;
    right: 24px;
    background: var(--accent-black);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 18px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.pkg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.pkg-icon {
    font-size: 38px;
}

.pkg-price {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 900;
    color: var(--text-primary);
}

.pkg-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.pkg-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.45;
}

.pkg-features {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
    text-align: left;
    font-size: 14px;
    color: #333;
    line-height: 2;
    font-weight: 500;
}

.btn-pkg-select {
    width: 100%;
    height: 64px;
    background: #FFFFFF;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.btn-pkg-featured,
.package-card:hover .btn-pkg-select {
    background: #111;
    color: #fff;
    border-color: #111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ========================================================
   SCREEN 2D: LIVE QR PH BARCODE & POLLING
   ======================================================== */
.qrph-pay-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 680px;
    box-sizing: border-box;
}

.qrph-card {
    background: #FFFFFF;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    width: 100%;
    box-shadow: var(--receipt-shadow);
    text-align: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Payment Received Celebration Overlay */
.qrph-received-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 24px;
    box-sizing: border-box;
    animation: receivedPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes receivedPopIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.received-icon-ring {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 46px;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4), 0 0 0 10px rgba(16, 185, 129, 0.15);
    margin-bottom: 20px;
    animation: checkBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes checkBounce {
    0% { transform: scale(0); }
    70% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.received-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #065F46;
    margin: 0 0 8px;
}

.received-amount-tag {
    font-size: 15px;
    font-weight: 800;
    color: #047857;
    background: #D1FAE5;
    border: 1.5px solid #A7F3D0;
    padding: 6px 18px;
    border-radius: 20px;
    margin: 0 0 18px;
    display: inline-block;
}

.received-divider {
    width: 60px;
    height: 3px;
    background: #E5E7EB;
    border-radius: 2px;
    margin-bottom: 14px;
}

.received-subtext {
    font-size: 15px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 18px;
}

.received-countdown-bar {
    width: 240px;
    height: 8px;
    background: #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
}

.received-countdown-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10B981, #059669);
    transition: width 1.8s linear;
}

.qrph-package-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FAF9F5;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 22px;
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 800;
}

.qrph-img-container {
    width: 310px;
    height: 310px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2.5px solid var(--border-color);
    border-radius: 18px;
    padding: 10px;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.qrph-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qrph-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.qrph-status-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.qrph-timer-tag {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.qrph-polling-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #E8F5E9;
    color: #2E7D32;
    padding: 8px 22px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    border: 1.5px solid #C8E6C9;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2E7D32;
    animation: gentlePulse 1.5s infinite;
}

.accepted-apps-bar {
    border-top: 1px dashed var(--border-color);
    padding-top: 12px;
    margin-top: 8px;
}

.apps-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.app-tag {
    background: #F4F1EA;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text-secondary);
}

/* QR Ph Cancel / Switch Method Button */
.qrph-cancel-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
}

.btn-qrph-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    min-height: 58px;
    padding: 12px 24px;
    background: #FFFFFF;
    color: var(--text-primary);
    border: 2px solid #E2DDD5;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    user-select: none;
    font-family: inherit;
    box-sizing: border-box;
}

.btn-qrph-cancel:hover {
    background: #FAF8F5;
    border-color: #BDB6AA;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.btn-qrph-cancel:active {
    background: #F2EFE9;
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.btn-qrph-cancel-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #F4F1EA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-primary);
    transition: transform 0.2s ease, background 0.2s ease;
}

.btn-qrph-cancel:hover .btn-qrph-cancel-icon {
    background: #EAE5DB;
    transform: translateX(-3px);
}

.btn-qrph-cancel-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.btn-qrph-cancel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.25;
}

.btn-qrph-cancel-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.25;
}

@media (max-width: 600px) {
    .qrph-cancel-wrap {
        margin-top: 16px;
    }
    .btn-qrph-cancel {
        max-width: 100%;
        padding: 10px 16px;
        min-height: 52px;
        gap: 12px;
        border-radius: 14px;
    }
    .btn-qrph-cancel-icon {
        width: 34px;
        height: 34px;
    }
    .btn-qrph-cancel-title {
        font-size: 14.5px;
    }
    .btn-qrph-cancel-sub {
        font-size: 11px;
    }
}

/* ========================================================
   SCREEN 3: VOUCHER ENTRY & QR SCAN
   ======================================================== */
.voucher-container {
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 14px;
}

.voucher-tabs {
    display: flex;
    background: #EAE6DE;
    padding: 6px;
    border-radius: 36px;
    margin-bottom: 22px;
    width: 100%;
    max-width: 620px;
    box-sizing: border-box;
}

.voucher-tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.voucher-tab.active {
    background: #FFFFFF;
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.voucher-tab-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Code Entry Input & On-Screen Numpad */
.voucher-input-wrap {
    width: 100%;
    max-width: 740px;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.voucher-code-input {
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    border: 3px solid var(--accent-black);
    border-radius: 18px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-primary);
    outline: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.voucher-code-input:focus {
    border-color: var(--accent-black);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.voucher-helper-text {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
}

.voucher-quick-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.btn-voucher-quick-prefix {
    background: #111111;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}

.btn-voucher-quick-prefix:active {
    transform: scale(0.96);
    background: #2a2a2a;
}

.btn-voucher-quick-clear {
    background: #FFFFFF;
    color: var(--accent-red);
    border: 2px solid #FCA5A5;
    border-radius: 12px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: all 0.15s ease;
}

.btn-voucher-quick-clear:active {
    transform: scale(0.96);
    background: #FFF0F0;
}

/* On-screen touch keypad for easy typing on kiosk */
.kiosk-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 12px;
}

.voucher-keypad {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 12px;
    width: 100%;
    max-width: 740px;
    box-sizing: border-box;
}

.voucher-keypad .keypad-btn {
    height: 70px;
    font-size: 26px;
    font-weight: 800;
    border-radius: 14px;
    border: 2.5px solid var(--border-color);
    background: #FFFFFF;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}

.voucher-keypad .keypad-btn:active {
    background: #E6E1D6;
    transform: scale(0.96);
    border-color: #B5ADA1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.keypad-btn {
    height: 64px;
    background: #FFFFFF;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}

.keypad-btn:active {
    background: #EAE6DE;
    transform: scale(0.96);
}

/* Camera QR Scan Mode */
.qr-scanner-box {
    width: 100%;
    max-width: 440px;
    height: 380px;
    background: #111;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--receipt-shadow);
    border: 3px solid #1E232F;
}

.qr-scanner-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qr-scan-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: 190px;
    border: 2px dashed rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}

/* Validation Feedback Alert */
.validation-alert {
    display: none;
    width: 100%;
    max-width: 740px;
    margin: 16px auto 0 auto;
    padding: 14px 18px;
    border-radius: var(--radius-md, 14px);
    box-sizing: border-box;
    animation: alertSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-alert .alert-content-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

.validation-alert .alert-icon-col {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.validation-alert .alert-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.validation-alert .alert-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 6px;
    line-height: 1;
}

.validation-alert .alert-msg {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

/* Status 1: ALREADY USED / INVALID / ERROR / CANCELLED */
.validation-alert.used,
.validation-alert.error,
.validation-alert.cancelled {
    display: block;
    background: #FFF1F2;
    border: 1.5px solid #FECDD3;
    color: #9F1239;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.08);
}
.validation-alert .status-badge-danger {
    background: #E11D48;
    color: #FFFFFF;
}

/* Status 2: EXPIRED / LOCKED (WARNING) */
.validation-alert.expired,
.validation-alert.locked {
    display: block;
    background: #FFFBEB;
    border: 1.5px solid #FDE68A;
    color: #92400E;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.08);
}
.validation-alert .status-badge-warning {
    background: #D97706;
    color: #FFFFFF;
}

/* Status 3: SUCCESS */
.validation-alert.success {
    display: block;
    background: #F0FDF4;
    border: 1.5px solid #BBF7D0;
    color: #166534;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.08);
}
.validation-alert .status-badge-success {
    background: #16A34A;
    color: #FFFFFF;
}

/* ========================================================
   SCREEN 4: CHOOSE TEMPLATE & LAYOUT
   ======================================================== */
.kiosk-template-section {
    width: 100%;
    margin-bottom: 24px;
}

.kiosk-template-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.kiosk-tpl-card {
    background: #FFFFFF;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    width: 160px;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kiosk-tpl-card:hover {
    transform: translateY(-3px);
    border-color: #888;
}

.kiosk-tpl-card.selected {
    border-color: var(--accent-black);
    background: #FFFBEB;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

.kiosk-tpl-thumb {
    width: 100%;
    height: 140px;
    background: #F4F1EA;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border: 1px solid #E5E2DA;
}

.kiosk-tpl-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kiosk-tpl-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
}

/* Sticker Screen Template Selector Strip */
.kiosk-sticker-template-strip {
    width: 100%;
    background: #FFFFFF;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    box-sizing: border-box;
}

.template-strip-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.template-strip-title {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.template-strip-count {
    background: #111111;
    color: #FFD700;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.kiosk-sticker-template-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-behavior: smooth;
}

.kiosk-sticker-template-carousel::-webkit-scrollbar {
    height: 4px;
}

.kiosk-sticker-template-carousel::-webkit-scrollbar-thumb {
    background: #CCC;
    border-radius: 4px;
}

.kiosk-sticker-tpl-card {
    flex: 0 0 92px;
    width: 92px;
    background: #FAF8F5;
    border: 2.5px solid #E5E2DA;
    border-radius: 10px;
    padding: 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    user-select: none;
    box-sizing: border-box;
}

.kiosk-sticker-tpl-card:hover {
    border-color: #888;
    transform: translateY(-2px);
}

.kiosk-sticker-tpl-card.selected {
    border-color: #111111;
    background: #FFFBEB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px) scale(1.03);
}

.kiosk-sticker-tpl-thumb {
    width: 100%;
    height: 64px;
    background: #FFFFFF;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    position: relative;
    border: 1px solid #E5E2DA;
}

.kiosk-sticker-tpl-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kiosk-sticker-tpl-check {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #111111;
    color: #FFD700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.kiosk-sticker-tpl-card.selected .kiosk-sticker-tpl-check {
    display: flex;
}

.kiosk-sticker-tpl-name {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.kiosk-sticker-tpl-tag {
    font-size: 9px;
    font-weight: 700;
    color: #78350F;
    margin-top: 1px;
    line-height: 1.1;
}

.layouts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    width: 100%;
    max-width: 740px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.layout-card {
    background: #FFFFFF;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}

.layout-card.selected {
    border-color: var(--accent-black);
    background: #FFF;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    transform: translateY(-5px);
}

.layout-mockup {
    width: 110px;
    height: 145px;
    background: #F4F2EB;
    border: 1.5px solid #D5CEBF;
    border-radius: 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-bottom: 14px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.mockup-slot {
    background: #C4BEB5;
    border-radius: 3px;
    width: 100%;
}

/* Mockup Variations */
.mockup-1 .mockup-slot { height: 100%; }
.mockup-2 .mockup-slot { height: 48%; }
.mockup-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 5px !important;
}
.mockup-4 .mockup-slot { height: 56px; }
.mockup-6 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4px !important;
}
.mockup-6 .mockup-slot { height: 36px; }

.layout-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.layout-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

/* ========================================================
   SCREEN 5: CAMERA & COUNTDOWN CAPTURE (STUDIO PHOTOBOOTH)
   ======================================================== */
.capture-container {
    width: 100%;
    max-width: 720px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px;
    box-sizing: border-box;
}

/* Top Camera Lens Cue Banner (points up to physical tablet lens) */
.camera-lens-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111827;
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    animation: cueBounce 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes cueBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.cue-arrow-up {
    font-size: 11px;
    color: #F59E0B;
}

.camera-preview-wrapper {
    width: 100%;
    flex: 1;
    max-height: 76vh;
    min-height: 480px;
    background: #090A0F;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
    border: 4px solid #1E232F;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-preview-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Floating Studio HUD Header */
.camera-hud-top {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 25;
    pointer-events: none;
}

.camera-live-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.rec-blinking-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 8px #EF4444;
    animation: recBlink 1.2s infinite ease-in-out;
}

@keyframes recBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.85); }
}

.camera-shot-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.shot-progress-text {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.shot-dots-track {
    display: flex;
    align-items: center;
    gap: 5px;
}

.shot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.shot-dot.active {
    background: #F59E0B;
    box-shadow: 0 0 8px #F59E0B;
    transform: scale(1.25);
}

.shot-dot.done {
    background: #10B981;
    box-shadow: 0 0 6px #10B981;
}

.camera-flip-pill {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}

.camera-flip-pill:active {
    transform: scale(0.92);
    background: #FFFFFF;
}

/* Professional Viewfinder Brackets & Reticle */
.camera-viewfinder-hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.vf-corner-bracket {
    position: absolute;
    width: 32px;
    height: 32px;
    border-color: rgba(255, 255, 255, 0.85);
    border-style: solid;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}

.vf-top-left {
    top: 48px;
    left: 20px;
    border-width: 3px 0 0 3px;
    border-top-left-radius: 8px;
}

.vf-top-right {
    top: 48px;
    right: 20px;
    border-width: 3px 3px 0 0;
    border-top-right-radius: 8px;
}

.vf-bottom-left {
    bottom: 50px;
    left: 20px;
    border-width: 0 0 3px 3px;
    border-bottom-left-radius: 8px;
}

.vf-bottom-right {
    bottom: 50px;
    right: 20px;
    border-width: 0 3px 3px 0;
    border-bottom-right-radius: 8px;
}

/* Composition Guide Grid */
.vf-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.12;
}

.vf-grid-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #FFFFFF;
}
.vf-v1 { left: 33.333%; }
.vf-v2 { left: 66.666%; }

.vf-grid-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #FFFFFF;
}
.vf-h1 { top: 33.333%; }
.vf-h2 { top: 66.666%; }

/* Center Focus Reticle */
.vf-center-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: reticlePulse 3s ease-in-out infinite;
}

@keyframes reticlePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.9; }
}

.reticle-ring {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.7);
}

.reticle-cross {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
}

.reticle-h {
    width: 16px;
    height: 1.5px;
}

.reticle-v {
    width: 1.5px;
    height: 16px;
}

.reticle-center-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 6px #F59E0B;
}

/* Bottom HUD Tip */
.camera-hud-bottom {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: center;
    z-index: 25;
    pointer-events: none;
}

.hud-tip-badge {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: 20px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    text-align: center;
}

/* Shutter Flash Animation */
.shutter-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #FFFFFF 60%, rgba(255, 255, 255, 0.85) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    transition: opacity 0.06s ease-out;
}

.shutter-flash.flash {
    opacity: 1;
}

/* High-Energy Studio Countdown Overlay */
.countdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    z-index: 35;
    user-select: none;
}

.countdown-overlay.active {
    display: flex;
}

.countdown-center-stage {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-dial-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.2);
}

.countdown-dial-ring-pulse {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 3px solid rgba(245, 158, 11, 0.8);
    animation: countdownRingPulse 1s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes countdownRingPulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.22); opacity: 0; }
}

.countdown-number {
    position: relative;
    z-index: 2;
    font-size: 110px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.8);
    animation: zoomCountdownNum 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.countdown-number.count-two-digit,
.countdown-number.count-10 {
    font-size: 80px;
    color: #C084FC;
    text-shadow: 0 0 35px rgba(192, 132, 252, 0.65);
}

.countdown-number.count-9,
.countdown-number.count-8,
.countdown-number.count-7,
.countdown-number.count-6 {
    color: #818CF8;
    text-shadow: 0 0 35px rgba(129, 140, 248, 0.65);
}

.countdown-number.count-5 {
    color: #60A5FA;
    text-shadow: 0 0 35px rgba(96, 165, 250, 0.65);
}

.countdown-number.count-4 {
    color: #34D399;
    text-shadow: 0 0 35px rgba(52, 211, 153, 0.65);
}

.countdown-number.count-3 {
    color: #FBBF24;
    text-shadow: 0 0 35px rgba(251, 191, 36, 0.6);
}

.countdown-number.count-2 {
    color: #F97316;
    text-shadow: 0 0 35px rgba(249, 115, 22, 0.6);
}

.countdown-number.count-1 {
    color: #EC4899;
    text-shadow: 0 0 35px rgba(236, 72, 153, 0.6);
}

.countdown-number.count-smile {
    font-size: 54px;
    color: #10B981;
    text-shadow: 0 0 35px rgba(16, 185, 129, 0.7);
    letter-spacing: 2px;
}

@keyframes zoomCountdownNum {
    0% { transform: scale(0.4); opacity: 0; }
    50% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.countdown-instruction {
    font-size: 26px;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
    margin-top: 14px;
    text-transform: uppercase;
}

.countdown-subtext {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* ========================================================
   SCREEN 6: REVIEW PHOTOS & INDIVIDUAL RETAKE
   ======================================================== */
.review-container {
    width: 100%;
    max-width: 740px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    box-sizing: border-box;
}

.retake-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 18px;
    background: #FFFFFF;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.06);
    margin: 4px auto 10px auto;
    transition: all 0.25s ease;
}

.retake-status-badge strong {
    font-weight: 800;
}

.retake-status-badge .retake-count {
    color: var(--brand-pink);
    font-weight: 800;
}

.retake-status-badge.badge-available {
    border-color: rgba(229, 62, 62, 0.25);
    background: #FFF5F5;
    color: #9B2C2C;
}

.retake-status-badge.badge-exhausted {
    border-color: #E2E8F0;
    background: #F7FAFC;
    color: #718096;
}

.review-photos-grid {
    flex: 1;
    width: 100%;
    display: grid;
    gap: 12px;
    padding: 8px 0;
    align-content: center;
}

/* 1 Column Layout: 2 Photos (Stacked vertical strip) */
.review-photos-grid.layout-2_photos {
    grid-template-columns: 1fr !important;
    max-width: 520px;
    margin: 0 auto;
    gap: 16px;
    width: 100%;
}

.review-photos-grid.layout-2_photos .review-photo-card {
    width: 100%;
    max-height: 330px;
    aspect-ratio: 4 / 2.8;
}

/* 1 Column Layout: 1 Photo */
.review-photos-grid.layout-1_photo {
    grid-template-columns: 1fr !important;
    max-width: 500px;
    margin: 0 auto;
    gap: 16px;
    width: 100%;
}

.review-photos-grid.layout-1_photo .review-photo-card {
    width: 100%;
    max-height: 520px;
    aspect-ratio: 3 / 4;
}

/* 2 Columns Layout: 4 Photos (2x2 Grid) */
.review-photos-grid.layout-4_photos {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 620px;
    margin: 0 auto;
    gap: 14px;
    width: 100%;
}

.review-photos-grid.layout-4_photos .review-photo-card {
    width: 100%;
    max-height: 250px;
    aspect-ratio: 1 / 1.1;
}

/* 2 Columns Layout: 6 Photos (2x3 Grid) */
.review-photos-grid.layout-6_photos {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 620px;
    margin: 0 auto;
    gap: 10px;
    width: 100%;
}

.review-photos-grid.layout-6_photos .review-photo-card {
    width: 100%;
    max-height: 175px;
    aspect-ratio: 1 / 0.95;
}

.review-photo-card {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid #E2E8F0;
    position: relative;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-photo-card:hover {
    border-color: #111827;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.review-photo-card:active {
    transform: scale(0.98);
}

.review-photo-card.selected {
    border-color: var(--accent-black);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.review-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-photo-num {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(15, 23, 42, 0.85);
    color: #F8FAFC;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 5;
}

.retake-btn-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.85);
    color: #FFFFFF;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    z-index: 5;
}

.retake-btn-tag .retake-icon {
    font-size: 13px;
}

.review-photo-card:hover .retake-btn-tag {
    background: #111827;
    border-color: #F59E0B;
    color: #FBBF24;
}

/* Review Screen Action Navigation & Buttons */
.review-action-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 540px;
    margin: 20px auto 0;
    box-sizing: border-box;
}

.btn-review-decorate {
    width: 100% !important;
    max-width: 480px;
    height: 74px !important;
    min-height: 74px;
    border-radius: 20px !important;
    background: #111827 !important;
    color: #FFFFFF !important;
    border: 2px solid #1F2937 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    padding: 0 24px !important;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap !important;
    user-select: none;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    margin: 0 auto;
}

.btn-review-decorate:hover {
    background: #000000 !important;
    border-color: #374151 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3) !important;
}

.btn-review-decorate:active {
    transform: scale(0.97) !important;
    background: #000000 !important;
}

.btn-review-decorate .btn-text {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase;
    color: #FFFFFF !important;
    white-space: nowrap !important;
}

.btn-review-decorate .btn-icon {
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.4));
}

.btn-review-decorate .btn-arrow {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    color: #FBBF24; /* warm gold accent on arrow */
    margin-left: 4px;
    transition: transform 0.18s ease;
}

.btn-review-decorate:hover .btn-arrow {
    transform: translateX(4px);
}

/* Secondary: Print Directly - Hidden permanently per requirement */
.btn-review-skip {
    display: none !important;
}

/* Responsive adjustments for 800x1280 tablet and mobile screens */
@media screen and (max-width: 820px) {
    .btn-review-decorate .btn-text {
        font-size: 16px !important;
        letter-spacing: 0.5px !important;
    }
    .btn-review-decorate {
        height: 68px !important;
        min-height: 68px;
        padding: 0 18px !important;
        gap: 10px !important;
    }
}

@media screen and (max-width: 540px) {
    .review-action-nav {
        width: 100% !important;
        padding: 0 12px;
    }
    .btn-review-decorate {
        width: 100% !important;
        height: 62px !important;
        min-height: 62px;
    }
}

/* ========================================================
   SCREEN 6B: CUSTOMIZE TEMPLATE & DECORATE STUDIO
   ======================================================== */
.kiosk-studio-container {
    width: 100%;
    max-width: 1040px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 6px 10px;
    box-sizing: border-box;
}

.kiosk-studio-topbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 10px;
    flex-shrink: 0;
    border-bottom: 1.5px solid var(--border-color);
    margin-bottom: 6px;
    gap: 12px;
    box-sizing: border-box;
    position: relative;
    min-height: 54px;
}

.btn-studio-back {
    background: #FAF8F5;
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    white-space: nowrap !important;
    flex-shrink: 0;
}

.btn-studio-back:hover {
    background: #F0ECE1;
    transform: translateX(-2px);
}

.studio-topbar-center-slot,
#studio-timer-slot {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    box-sizing: border-box;
}

.studio-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    z-index: 10;
}

.btn-studio-clear {
    background: #FFF0F0;
    color: #DC2626;
    border: 1px solid #FFCDD2;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.btn-studio-clear:active {
    transform: scale(0.95);
    background: #FFCDD2;
}

.btn-studio-continue {
    background: var(--accent-black);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap !important;
    flex-shrink: 0;
}

.btn-studio-continue:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.btn-studio-continue:active {
    transform: scale(0.98);
}

/* Studio Workspace: Left Sidebar + Right Receipt Stage */
.kiosk-studio-workspace {
    display: flex;
    flex-direction: row;
    gap: 14px;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* LEFT SIDEBAR: Templates / Frames */
.kiosk-studio-sidebar {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.studio-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1.5px dashed #E5E2DA;
    flex-shrink: 0;
}

.studio-sidebar-title {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-primary);
}

.studio-sidebar-badge {
    background: #111111;
    color: #FFD700;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.studio-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 3px;
    -webkit-overflow-scrolling: touch;
}

.studio-sidebar-scroll::-webkit-scrollbar {
    width: 5px;
}

.studio-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
}

/* Vertical Template Card inside Left Sidebar */
.studio-sidebar-scroll .kiosk-sticker-tpl-card {
    flex: 0 0 auto;
    width: 100%;
    background: #FAF8F5;
    border: 2px solid #EAE6DF;
    border-radius: 10px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    user-select: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-card:hover {
    border-color: #888;
    transform: translateY(-2px);
    background: #FFFFFF;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-card.selected {
    border-color: #111111;
    background: #FFFBEB;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px) scale(1.02);
}

.studio-sidebar-scroll .kiosk-sticker-tpl-thumb {
    width: 44px;
    height: 56px;
    background: #FFFFFF;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0;
    border: 1px solid #E5E2DA;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-check {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #111111;
    color: #FFD700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-card.selected .kiosk-sticker-tpl-check {
    display: flex;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-info {
    flex: 1;
    min-width: 0;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-name {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.studio-sidebar-scroll .kiosk-sticker-tpl-tag {
    font-size: 10px;
    font-weight: 700;
    color: #78350F;
    margin-top: 2px;
    line-height: 1.1;
}

/* RIGHT SIDE: Receipt Stage Panel */
.kiosk-studio-stage-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: #F4F1EA;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 6px 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.kiosk-studio-stage-panel .sticker-stage-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
}

.kiosk-studio-stage-panel .sticker-stage {
    position: relative;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1.5px solid var(--border-color);
    background: #FFFFFF;
    padding: 0;
    overflow: hidden;
    touch-action: none;
    display: block;
    width: auto;
    max-width: 96%;
    margin: auto;
}

.kiosk-studio-stage-panel #sticker-photo-canvas {
    display: block;
    max-height: 48vh;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    pointer-events: none;
    background: #FFFFFF;
    object-fit: contain;
}

/* BOTTOM TRAY: Stickers */
.kiosk-studio-bottom-tray {
    width: 100%;
    background: #FFFFFF;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 6px 12px;
    margin-top: 6px;
    flex-shrink: 0;
    box-shadow: var(--card-shadow);
    box-sizing: border-box;
}

.kiosk-studio-bottom-tray .sticker-tray-section {
    width: 100%;
    margin: 0;
    border: none;
    box-shadow: none;
    padding: 4px 2px;
    background: transparent;
}

@media (max-width: 820px) {
    .kiosk-studio-topbar {
        padding: 5px 8px;
        gap: 6px;
        min-height: 48px;
    }
    
    .btn-studio-back {
        padding: 7px 11px;
        font-size: 11.5px;
        gap: 5px;
    }

    .studio-topbar-actions {
        gap: 6px;
    }

    .btn-studio-clear {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .btn-studio-continue {
        padding: 7px 13px;
        font-size: 12px;
        gap: 5px;
    }

    #studio-timer-slot #session-timer-display,
    .floating-session-timer.studio-mode {
        padding: 4px 10px !important;
        gap: 6px !important;
    }

    #studio-timer-slot #session-timer-display .timer-clock,
    .floating-session-timer.studio-mode .timer-clock {
        font-size: 16px !important;
    }

    #studio-timer-slot #session-timer-display .timer-label,
    .floating-session-timer.studio-mode .timer-label {
        font-size: 7.5px !important;
    }

    #studio-timer-slot #session-timer-display .timer-icon svg,
    .floating-session-timer.studio-mode .timer-icon svg {
        width: 14px !important;
        height: 14px !important;
    }
}

@media (max-width: 600px) {
    .kiosk-studio-topbar {
        padding: 4px 6px;
        gap: 4px;
    }

    .btn-studio-back {
        padding: 6px 8px;
        font-size: 11px;
    }

    .btn-studio-clear {
        padding: 5px 8px;
        font-size: 10px;
    }

    .btn-studio-continue {
        padding: 6px 10px;
        font-size: 11px;
    }

    #studio-timer-slot #session-timer-display .timer-label,
    .floating-session-timer.studio-mode .timer-label {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .kiosk-studio-workspace {
        flex-direction: column;
    }
    .kiosk-studio-sidebar {
        width: 100%;
        height: 110px;
    }
    .studio-sidebar-scroll {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .studio-sidebar-scroll .kiosk-sticker-tpl-card {
        width: 130px;
        flex: 0 0 130px;
    }
}

.stickers-container {
    width: 100%;
    max-width: 740px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 8px 4px;
    box-sizing: border-box;
}

.stickers-header-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.btn-tool-danger {
    background: #FFF0F0;
    color: var(--accent-red);
    border: 1px solid #FFCDD2;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tool-danger:active {
    transform: scale(0.95);
    background: #FFCDD2;
}

.sticker-photo-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    flex-shrink: 0;
    justify-content: center;
}

.sticker-photo-tab {
    padding: 6px 16px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1.5px solid var(--border-color);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sticker-photo-tab.active {
    background: var(--accent-black);
    color: #FFFFFF;
    border-color: var(--accent-black);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sticker-stage-wrapper {
    flex: 1;
    width: 100%;
    min-height: 240px;
    max-height: 52vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    margin: 6px 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
}

.sticker-stage {
    position: relative;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1.5px solid var(--border-color);
    background: #FFFFFF;
    padding: 0;
    overflow: hidden;
    touch-action: none;
    display: block;
    width: 440px;
    max-width: 90vw;
    margin: 0 auto;
}

#sticker-photo-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    pointer-events: none;
    background: #FFFFFF;
}

.sticker-overlays-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 12px;
}

.placed-sticker {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.placed-sticker.selected {
    outline: 2px solid #18181B;
    outline-offset: 4px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px #FFFFFF, 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 40;
}

.placed-sticker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}

.sticker-handle-delete {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EF4444;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
    border: 2px solid #FFFFFF;
    z-index: 50;
    touch-action: auto;
    transition: transform 0.15s ease;
}

.sticker-handle-delete:active {
    transform: scale(0.9);
}

.sticker-handle-resize {
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #18181B;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: nwse-resize;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid #FFFFFF;
    z-index: 50;
    touch-action: none;
    transition: transform 0.15s ease;
}

.sticker-handle-resize:active {
    transform: scale(0.9);
}

.sticker-handle-rotate {
    position: absolute;
    top: -30px;
    left: calc(50% - 14px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #18181B;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid #FFFFFF;
    z-index: 50;
    touch-action: none;
    transition: transform 0.15s ease;
}

.sticker-handle-rotate::after {
    content: '';
    position: absolute;
    top: 26px;
    left: 12px;
    width: 2px;
    height: 14px;
    background: #18181B;
    z-index: -1;
}

.sticker-handle-rotate:active {
    transform: scale(0.9);
}

.sticker-active-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 98%;
    margin: 8px auto 4px;
    background: #FFFFFF;
    border: 2px solid #18181B;
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    overflow-x: auto;
    white-space: nowrap !important;
    z-index: 50;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.sticker-active-controls .ctrl-label {
    font-size: 11px;
    font-weight: 900;
    color: #18181B;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
    flex-shrink: 0;
}

.sticker-active-controls .ctrl-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap !important;
}

.sticker-active-controls .btn-ctrl {
    background: #F4F4F5;
    border: 1.5px solid #E4E4E7;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    color: #18181B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap !important;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    -webkit-user-select: none;
}

.sticker-active-controls .btn-ctrl span {
    white-space: nowrap !important;
    display: inline-block;
    font-size: 11.5px;
}

.sticker-active-controls .btn-ctrl:hover {
    background: #18181B;
    color: #FFFFFF;
    border-color: #18181B;
    transform: translateY(-1px);
}

.sticker-active-controls .btn-ctrl:active {
    transform: scale(0.95);
}

.sticker-active-controls .ctrl-sep {
    width: 1.5px;
    height: 18px;
    background: #D4D4D8;
    margin: 0 3px;
    flex-shrink: 0;
}

.sticker-active-controls .btn-ctrl-delete {
    color: #DC2626;
    background: #FEF2F2;
    border-color: #FECACA;
}

.sticker-active-controls .btn-ctrl-delete:hover {
    background: #DC2626;
    color: #FFFFFF;
    border-color: #DC2626;
}

.sticker-active-controls .btn-ctrl-delete:active {
    background: #B91C1C;
    color: #FFFFFF;
}

.btn-clear-stickers {
    background: #FFFFFF;
    border: 1.5px solid #E4E4E7;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #71717A;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
}

.btn-clear-stickers:hover,
.btn-clear-stickers:active {
    border-color: #EF4444;
    color: #EF4444;
    background: #FEF2F2;
    transform: scale(0.97);
}

.sticker-tray-section {
    width: 100%;
    background: #FFFFFF;
    border-radius: 22px;
    border: 2px solid #E4E4E7;
    padding: 10px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    margin-top: 6px;
    box-sizing: border-box;
}

.sticker-tray-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 10px;
}

.sticker-tray-label {
    font-size: 12.5px;
    font-weight: 800;
    color: #52525B;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.sticker-category-tabs {
    display: flex;
    gap: 4px;
    background: #EAE8E2;
    padding: 4px;
    border-radius: 999px;
}

.stk-cat-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 999px;
    color: #52525B;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.stk-cat-btn.active {
    background: #18181B;
    color: #FFFFFF;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.sticker-tray-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 4px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-height: 110px;
    align-items: stretch;
}

.sticker-tray-item {
    width: 96px;
    min-width: 96px;
    height: 106px;
    border-radius: 14px;
    background: #FAF9F6;
    border: 2px solid #E8E4DC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    padding: 8px 6px 6px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sticker-tray-item:hover,
.sticker-tray-item:active {
    transform: translateY(-3px) scale(1.04);
    border-color: #18181B;
    background: #FFFFFF;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.sticker-tray-img-wrap {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sticker-tray-img-wrap img,
.sticker-tray-item img {
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.10));
}

.sticker-tray-name {
    font-size: 10.5px;
    font-weight: 700;
    color: #27272A;
    line-height: 1.25;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    height: 27px; /* 2 full lines of text */
    box-sizing: border-box;
}

/* ========================================================
   SCREEN 7: FINAL RECEIPT PREVIEW & PRINTING
   ======================================================== */
.receipt-preview-container {
    width: 100%;
    max-width: 680px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 8px 4px;
    min-height: 0;
}

.receipt-paper-scroll {
    flex: 1;
    width: 100%;
    min-height: 0;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8px 0 20px 0;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
    -webkit-overflow-scrolling: touch;
}

.receipt-paper-scroll::-webkit-scrollbar {
    display: block !important;
    width: 6px;
}

.receipt-paper-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.receipt-paper-scroll::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 6px;
}

.receipt-thermal-paper {
    background: #FFFFFF;
    width: auto;
    max-width: min(460px, 92vw);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.receipt-thermal-paper img {
    max-width: 100%;
    max-height: calc(100vh - 220px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ========================================================
   80MM / 58MM THERMAL PRINTER NATIVE BROWSER PRINT RULES
   ======================================================== */
@media print {
    @page {
        size: 80mm auto;
        margin: 0mm;
    }
    html, body {
        width: 80mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #kiosk-app, .screens-viewport, .floating-session-timer, .kiosk-nav-bar, .screen-heading, .printing-modal {
        display: none !important;
    }
    #kiosk-thermal-print-frame {
        display: block !important;
    }
}

/* ========================================================
   SCREEN 7.5: THERMAL PRINTER HARDWARE ANIMATION MODAL
   ======================================================== */
.printing-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 16, 20, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    animation: printingModalFadeIn 0.3s ease-out;
}

.printing-modal.active {
    display: flex;
}

@keyframes printingModalFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Kiosk Printer Stage */
.printer-kiosk-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 16px auto;
}

/* Paper Extrusion Chute Viewport */
.printer-paper-chute {
    position: relative;
    width: clamp(210px, 32vw, 250px);
    height: clamp(230px, 32vh, 310px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: -6px;
    z-index: 1;
    border-radius: 4px 4px 0 0;
}

/* The Animated Paper Sheet emerging upwards from inside printer */
.printer-paper-sheet {
    position: relative;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 2px 2px 0 0;
    transform: translateY(105%);
    will-change: transform;
    transition: none;
}

.printer-paper-sheet.feeding {
    animation: feedReceiptProgressive 3.8s cubic-bezier(0.2, 0.7, 0.35, 1) forwards;
}

/* Progressive Paper Feed Keyframes (Realistic line-by-line stepping) */
@keyframes feedReceiptProgressive {
    0% {
        transform: translateY(105%);
    }
    10% {
        transform: translateY(88%);
    }
    22% {
        transform: translateY(74%);
    }
    38% {
        transform: translateY(56%);
    }
    54% {
        transform: translateY(38%);
    }
    70% {
        transform: translateY(22%);
    }
    85% {
        transform: translateY(10%);
    }
    94% {
        transform: translateY(2%);
    }
    100% {
        transform: translateY(0%);
    }
}

/* Authentic Serrated Paper Tear Lines */
.printer-paper-serration {
    width: 100%;
    height: 6px;
    background-repeat: repeat-x;
    background-size: 8px 6px;
}

.printer-paper-serration.top {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpolygon points='0,6 4,0 8,6' fill='%23ffffff'/%3E%3C/svg%3E");
    margin-top: -5px;
    position: relative;
    z-index: 2;
}

.printer-paper-serration.bottom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpolygon points='0,0 4,6 8,0' fill='%23ffffff'/%3E%3C/svg%3E");
    margin-bottom: -5px;
    position: relative;
    z-index: 2;
}

/* User's High-Res Receipt Image inside paper */
.printer-receipt-img {
    width: 100%;
    height: auto;
    display: block;
    background: #ffffff;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Printer Hardware Chassis */
.printer-chassis {
    position: relative;
    z-index: 3;
    width: clamp(250px, 38vw, 290px);
    background: linear-gradient(180deg, #2e323b 0%, #1c1f26 40%, #111317 100%);
    border-radius: 14px 14px 18px 18px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.16), inset 0 -2px 6px rgba(0, 0, 0, 0.7);
    padding: 10px 16px 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.printer-chassis.rumbling {
    animation: printerChassisRumble 0.08s infinite alternate;
}

@keyframes printerChassisRumble {
    0% { transform: translate(0, 0); }
    50% { transform: translate(0.4px, -0.4px); }
    100% { transform: translate(-0.4px, 0.4px); }
}

/* Top Slot Mouth & Cutter Bar */
.printer-slot-housing {
    position: relative;
    width: 100%;
    height: 16px;
    background: #090a0c;
    border-radius: 6px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.printer-slot-lip {
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 2px;
    background: linear-gradient(90deg, #444 0%, #888 50%, #444 100%);
    border-radius: 1px;
    opacity: 0.8;
}

.printer-slot-slit {
    position: relative;
    width: 90%;
    height: 4px;
    background: #000;
    border-radius: 2px;
    overflow: hidden;
}

/* Cutter Blade Snip Flash */
.printer-cutter-blade {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    opacity: 0;
}

.printer-cutter-blade.cut {
    animation: cutterBladeFlash 0.35s ease-out forwards;
}

@keyframes cutterBladeFlash {
    0% {
        opacity: 0;
        background: #10b981;
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    }
    40% {
        opacity: 1;
        background: #ffffff;
        box-shadow: 0 0 14px #10b981, 0 0 6px #ffffff;
    }
    100% {
        opacity: 0;
        background: #10b981;
    }
}

/* Printer Front Panel */
.printer-brand-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 4px;
}

.printer-brand-logo {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.printer-model-badge {
    font-size: 9.5px;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.6px;
}

.printer-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.printer-led-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.printer-led-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.printer-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    display: inline-block;
}

.printer-led.led-power.active {
    background: #06b6d4;
    box-shadow: 0 0 8px #06b6d4;
}

.printer-led.led-status {
    background: #10b981;
}

.printer-led.led-status.blinking {
    animation: statusLedBlink 0.6s infinite alternate;
}

@keyframes statusLedBlink {
    0% {
        opacity: 0.3;
        box-shadow: 0 0 2px #10b981;
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 10px #10b981, 0 0 4px #a7f3d0;
    }
}

.printer-led.led-feed.active {
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
}

.printer-led-label {
    font-size: 8.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
}

.printer-vents {
    display: flex;
    gap: 3px;
}

.printer-vents span {
    width: 3px;
    height: 12px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.06);
}

/* Printing Info & Progress Card */
.printing-info-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 16px 24px;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.printing-status-title {
    font-size: 21px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: 0.3px;
}

.printing-status-sub {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 14px 0;
    line-height: 1.4;
}

.printing-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.printing-progress-bar {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.printing-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%);
    border-radius: 999px;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

.printing-progress-pct {
    font-size: 13px;
    font-weight: 800;
    color: #10b981;
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Tablet Landscape / Compact Screen Optimization */
@media (max-height: 720px) {
    .printer-paper-chute {
        height: 190px;
        width: 195px;
    }
    .printer-chassis {
        width: 235px;
        padding: 8px 14px 10px 14px;
    }
    .printer-kiosk-stage {
        margin-bottom: 10px;
    }
    .printing-status-title {
        font-size: 18px;
    }
    .printing-status-sub {
        font-size: 12.5px;
        margin-bottom: 10px;
    }
    .printing-info-card {
        padding: 12px 18px;
        max-width: 340px;
    }
}

/* ========================================================
   SCREEN 8: SUCCESS & SOFTCOPY QR DISPLAY
   ======================================================== */
.success-container {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 10px 14px;
}

.success-icon {
    font-size: 64px;
    margin-bottom: 14px;
}

.softcopy-qr-card {
    background: #FFFFFF;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF9 100%);
    border-radius: 28px;
    padding: 32px 26px;
    width: 100%;
    max-width: 620px;
    border: 3px solid #27272A;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15), 0 4px 14px rgba(226, 59, 46, 0.08);
    margin: 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.softcopy-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #18181B 0%, #27272A 100%);
    color: #FEF3C7;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 14px;
    text-transform: uppercase;
    border: 1px solid #3F3F46;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
    animation: liveDotPulse 1.5s infinite;
}

@keyframes liveDotPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.softcopy-qr-frame {
    background: #FFFFFF;
    padding: 18px;
    border: 3px solid #18181B;
    border-radius: 22px;
    margin-bottom: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.softcopy-qr-frame canvas {
    display: block;
    width: 280px;
    height: 280px;
    border-radius: 6px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.softcopy-url-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #F4F4F5;
    border: 1px solid #E4E4E7;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    color: #3F3F46;
    margin-bottom: 12px;
    max-width: 100%;
    overflow: hidden;
}

.softcopy-url-pill code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: #18181B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.softcopy-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: #FAF8F5;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid #ECE7DE;
}

.softcopy-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.softcopy-step-item .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #18181B;
    color: #FFF;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.softcopy-wifi-tip {
    font-size: 11.5px;
    color: #71717A;
    margin-bottom: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.softcopy-expiry-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    line-height: 1.4;
}

.softcopy-expiry-warning strong {
    color: #78350F;
    font-weight: 800;
}

.softcopy-expiry-warning .warning-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.qr-timer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    background: #FFFFFF;
    border: 2px solid var(--accent-black);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin: 12px 0 6px;
    animation: gentlePillPulse 2s infinite ease-in-out;
}

@keyframes gentlePillPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.qr-timer-pill .icon {
    font-size: 18px;
}

.auto-reset-bar {
    width: 100%;
    height: 8px;
    background: #E0DDD6;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 14px;
}

.auto-reset-fill {
    height: 100%;
    background: var(--accent-black);
    width: 100%;
    transition: width linear;
}

/* ========================================================
   RESPONSIVE ENHANCEMENTS FOR SAMSUNG TABLETS (TAB A9/A8/A7/A11)
   & HUAWEI MATEPAD TOUCHSCREEN KIOSKS
   ======================================================== */
@media screen and (max-height: 820px) {
    .kiosk-header { height: 52px; padding: 0 16px; }
    .idle-receipt-strip { width: 380px; padding: 24px 20px 20px; margin-bottom: 18px; }
    .idle-logo { width: 90px; height: 90px; margin-bottom: 12px; }
    .idle-title { font-size: 21px; }
    .idle-subtitle { margin-bottom: 12px; }
    .pricing-pills { margin: 12px 0; }
    .btn-tap-start { height: 68px; font-size: 19px; max-width: 380px; }
    .camera-preview-wrapper { max-height: 60vh; }
    .guide-card { padding: 10px 14px; }
    .guide-steps-grid { gap: 8px; }
    .layouts-grid { gap: 12px; margin-bottom: 16px; }
    .receipt-paper-scroll { max-height: calc(100vh - 160px); }
    .receipt-thermal-paper img { max-height: calc(100vh - 180px); }
    .softcopy-qr-card { padding: 16px; margin: 12px 0; }
}

@media screen and (max-height: 750px) {
    .camera-preview-wrapper { max-height: 56vh; }
    .guide-steps-grid { grid-template-columns: 1fr; }
    .idle-tagline { display: none; }
}

/* ========================================================
   TABLET PORTRAIT OPTIMIZATION (Samsung Galaxy Tab A11,
   Huawei MatePad, 800x1280, 1200x1920, 1200x2000)
   ======================================================== */
@media screen and (min-width: 600px) and (min-height: 850px) {
    .idle-scrapbook-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 8px 6px;
        overflow: hidden;
        position: relative;
    }
    .scrapbook-strip {
        display: flex !important;
        width: clamp(120px, 16vw, 138px);
        top: 50%;
        z-index: 1;
    }
    .strip-left {
        left: clamp(2px, 1.2vw, 10px);
        transform: translateY(-50%) rotate(-3.5deg);
    }
    .strip-right {
        right: clamp(2px, 1.2vw, 10px);
        transform: translateY(-50%) rotate(3.5deg);
    }
    .idle-receipt-strip {
        width: 535px;
        max-width: calc(100vw - 145px);
        padding: 36px 30px 24px;
        z-index: 2;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
    }
    .idle-checkerboard-ribbon {
        width: calc(100% + 60px);
        margin: 12px -30px -24px -30px;
    }
    .idle-logo {
        width: 140px !important;
        height: 140px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        margin-bottom: 14px;
    }
    .idle-logo img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        object-fit: contain !important;
    }
    .idle-brand-title {
        font-size: 25px;
    }
    .idle-service-title {
        font-size: 30px;
    }
    .btn-tap-start {
        height: 80px;
        font-size: 22px;
        border-radius: 40px;
    }
    .voucher-container {
        max-width: 760px;
        padding: 16px 20px;
    }
    .voucher-tabs {
        max-width: 660px;
        margin-bottom: 24px;
    }
    .voucher-tab {
        padding: 16px 24px;
        font-size: 18px;
    }
    .voucher-code-input {
        height: 88px;
        font-size: 38px;
        letter-spacing: 5px;
        border-radius: 20px;
    }
    .voucher-keypad {
        max-width: 760px;
        gap: 12px;
        margin-top: 16px;
    }
    .voucher-keypad .keypad-btn {
        height: 76px;
        font-size: 28px;
        border-radius: 16px;
    }
    .kiosk-nav-bar {
        max-width: 760px;
        margin-top: 28px;
        gap: 20px;
    }
    .btn-secondary {
        height: 76px;
        font-size: 21px;
        min-width: 190px;
        border-radius: 18px;
    }
    .btn-primary {
        height: 76px;
        font-size: 23px;
        border-radius: 18px;
    }
    .payment-methods-grid,
    .packages-grid,
    .layouts-grid,
    .review-container,
    .stickers-container,
    .guide-container {
        max-width: 760px;
    }
    .payment-card,
    .package-card {
        min-height: 410px;
        padding: 38px 28px;
        border-radius: 24px;
    }
    .payment-card-icon {
        width: 140px;
        height: 140px;
    }
    .payment-card-title {
        font-size: 26px;
    }
    .payment-card-cta,
    .btn-pkg-select {
        height: 70px;
        font-size: 20px;
        border-radius: 16px;
    }
    .pkg-price {
        font-size: 44px;
    }
    .pkg-title {
        font-size: 24px;
    }
    .qrph-card {
        padding: 36px 32px;
        border-radius: 26px;
    }
    .qrph-img-container {
        width: 330px;
        height: 330px;
    }
}

/* ========================================================
   COMPACT MOBILE FALLBACK (< 580px width)
   ======================================================== */
@media screen and (max-width: 580px) {
    .voucher-container {
        padding: 8px;
    }
    .voucher-keypad {
        gap: 5px;
    }
    .voucher-keypad .keypad-btn {
        height: 50px;
        font-size: 18px;
        border-radius: 8px;
    }
    .voucher-code-input {
        height: 62px;
        font-size: 22px;
    }
    .btn-secondary {
        min-width: 110px;
        height: 56px;
        font-size: 15px;
    }
    .btn-primary {
        height: 56px;
        font-size: 16px;
    }
    .payment-methods-grid,
    .packages-grid,
    .layouts-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .payment-card,
    .package-card {
        min-height: auto;
        padding: 20px;
    }
}

/* ========================================================
   HIDDEN ADMIN PIN MODAL
   ======================================================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
}

.modal-backdrop.active {
    display: flex;
}

.admin-pin-modal {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 24px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.pin-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
}

.pin-dot.filled {
    background: var(--accent-black);
    border-color: var(--accent-black);
}

/* ========================================================
   INTELLIGENT LANDSCAPE REFLOW (Tablets, Laptops, Mobile Landscape)
   Reflows interface horizontally rather than forcing vertical scrolling
   ======================================================== */
@media screen and (orientation: landscape) and (max-height: 900px) {
    #kiosk-app {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }

    /* Screen 1: Idle Screen in Landscape */
    .idle-scrapbook-wrapper {
        min-height: 100%;
        padding: 8px 16px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .idle-receipt-strip {
        width: min(85vw, 500px);
        max-height: 94dvh;
        padding: 16px 24px 12px;
        margin: auto;
        overflow-y: auto;
    }

    .idle-logo {
        width: 65px;
        height: 65px;
        margin-bottom: 2px;
    }

    .idle-title-typewriter-container {
        margin-bottom: 2px;
    }

    .idle-brand-title {
        font-size: 16px;
        margin: 0;
    }

    .idle-service-title {
        font-size: 22px;
    }

    .idle-tagline-brush {
        font-size: 10px;
        padding: 2px 10px;
    }

    .idle-ticket-packages {
        margin: 6px 0;
        gap: 6px;
    }

    .ticket-card {
        padding: 8px 12px;
        min-height: auto;
    }

    .ticket-icon-box {
        width: 32px;
        height: 32px;
    }

    .ticket-title {
        font-size: 11px;
    }

    .ticket-desc {
        display: none;
    }

    .ticket-price-badge .amount {
        font-size: 18px;
    }

    .idle-features-row {
        margin: 4px 0;
        gap: 8px;
    }

    .feature-icon {
        width: 28px;
        height: 28px;
    }

    .feature-label {
        font-size: 8.5px;
    }

    .btn-tap-start {
        height: 48px;
        font-size: 15px;
        margin-bottom: 4px;
    }

    .scrapbook-strip {
        display: flex !important;
        width: clamp(100px, 13vw, 135px);
        top: 50%;
    }

    /* Screen 2: Guide in Landscape */
    .guide-container {
        max-width: 960px;
        justify-content: center;
        gap: 8px;
        padding: 4px 10px;
    }

    .guide-steps-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px;
        margin: 4px 0;
    }

    .guide-card {
        padding: 10px 12px;
        min-height: auto;
        gap: 10px;
    }

    .guide-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    .guide-text h4 {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .guide-text p {
        font-size: 11px;
        line-height: 1.2;
    }

    /* Screen 3 & 4: Payment Methods & Packages in Landscape */
    .payment-methods-grid,
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 860px;
        gap: 16px;
        margin-top: 8px;
    }

    .payment-card,
    .package-card {
        min-height: auto;
        padding: 18px 20px;
    }

    .payment-card-icon {
        width: 80px;
        height: 80px;
        margin: 6px auto 10px;
    }

    .payment-card-title {
        font-size: 19px;
    }

    .payment-card-desc {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .payment-card-cta,
    .btn-pkg-select {
        height: 48px;
        font-size: 15px;
    }

    /* Screen 5: Voucher Keypad in Landscape (Split Screen) */
    .voucher-container {
        max-width: 940px;
        padding: 6px 14px;
        justify-content: center;
    }

    .voucher-tabs {
        margin-bottom: 10px;
        max-width: 480px;
    }

    .voucher-tab {
        padding: 8px 16px;
        font-size: 14px;
    }

    .voucher-tab-content {
        display: grid !important;
        grid-template-columns: 1fr 1.25fr;
        gap: 20px;
        align-items: center;
        width: 100%;
        max-width: 900px;
    }

    .voucher-input-wrap {
        margin-bottom: 0;
    }

    .voucher-code-input {
        height: 64px;
        font-size: 26px;
        letter-spacing: 3px;
    }

    .voucher-keypad {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        margin-top: 0;
    }

    .voucher-keypad .keypad-btn {
        height: clamp(40px, 7vh, 52px);
        font-size: clamp(16px, 2.5vw, 22px);
        border-radius: 10px;
    }

    /* Screen 6: Layout Selection in Landscape */
    .layouts-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        max-width: 940px;
        gap: 12px;
        margin-bottom: 12px;
    }

    .layout-card {
        padding: 14px 10px;
    }

    .layout-mockup {
        height: 90px;
        margin-bottom: 8px;
    }

    .layout-title {
        font-size: 16px;
    }

    .layout-desc {
        font-size: 12px;
    }

    /* Screen 7: Camera Capture in Landscape */
    .capture-container {
        flex-direction: row;
        max-width: 940px;
        gap: 16px;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
    }

    .camera-preview-wrapper {
        flex: 1.5;
        max-height: 84vh;
        min-height: 240px;
        aspect-ratio: 4 / 3;
    }

    /* Screen 8: Review Photos in Landscape */
    .review-container {
        max-width: 960px;
        padding: 6px 10px;
    }

    .review-photos-grid.layout-2_photos {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 760px;
    }

    .review-photos-grid.layout-4_photos {
        grid-template-columns: repeat(4, 1fr) !important;
        max-width: 880px;
    }

    .review-photos-grid.layout-6_photos {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 880px;
    }

    /* Screen 9: Stickers Decorate in Landscape */
    .stickers-container {
        max-width: 960px;
        padding: 6px 10px;
    }

    .sticker-stage-wrapper {
        max-height: 48vh;
    }

    .sticker-tray-section {
        padding: 10px 14px;
        margin-top: 4px;
    }

    .sticker-tray-item {
        width: 68px;
        height: 68px;
        min-width: 68px;
    }

    /* Screen 10: Receipt Preview in Landscape */
    .receipt-preview-container {
        max-width: 860px;
        padding: 6px 12px;
    }

    .receipt-paper-scroll {
        max-height: calc(100vh - 120px);
    }

    .receipt-thermal-paper {
        max-width: 360px;
    }

    .receipt-thermal-paper img {
        max-height: calc(100vh - 140px);
    }

    /* Global Nav Bar in Landscape */
    .kiosk-nav-bar {
        margin-top: 10px;
        gap: 12px;
    }

    .btn-secondary,
    .btn-primary {
        height: 52px;
        font-size: 16px;
    }
}

/* ========================================================
   EXTRA SMALL SCREENS (Phones < 360px wide, e.g. iPhone SE, Galaxy Fold outer)
   ======================================================== */
@media screen and (max-width: 360px) {
    .idle-brand-title {
        font-size: 15px;
    }

    .idle-service-title {
        font-size: 18px;
    }

    .ticket-title {
        font-size: 12px;
    }

    .ticket-price-badge .amount {
        font-size: 18px;
    }

    .btn-tap-start {
        height: 52px;
        font-size: 15px;
        letter-spacing: 1px;
    }

    .guide-steps-grid {
        grid-template-columns: 1fr;
    }

    .voucher-code-input {
        height: 52px;
        font-size: 18px;
        letter-spacing: 2px;
    }

    .voucher-keypad {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    .voucher-keypad .keypad-btn {
        height: 44px;
        font-size: 16px;
    }

    .btn-secondary {
        min-width: 90px;
        height: 48px;
        font-size: 13px;
    }

    .btn-primary {
        height: 48px;
        font-size: 14px;
    }

    .qrph-img-container {
        width: 220px;
        height: 220px;
    }
}

/* ========================================================
   LARGE DESKTOPS & HIGH RESOLUTION MONITORS (> 1600px)
   Constrains maximum stretch while remaining bold & elegant
   ======================================================== */
@media screen and (min-width: 1601px) {
    .idle-scrapbook-wrapper {
        max-width: 1200px;
    }

    .scrapbook-strip {
        width: 170px;
    }

    .idle-receipt-strip {
        width: 600px;
    }

    .guide-container,
    .payment-methods-grid,
    .packages-grid,
    .layouts-grid,
    .voucher-container,
    .review-container,
    .stickers-container,
    .capture-container,
    .receipt-preview-container {
        max-width: 880px;
    }
}

/* ========================================================
   ACCESSIBILITY: PREFERS REDUCED MOTION
   ======================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}