/**
 * =============================================================
 *  PUBLIC / AUTH DESIGN SYSTEM — Alumni Green Rebrand
 *  Shared styling for guest-facing pages (login, register,
 *  forgot-password, etc.) rendered through x-guest-layout.
 *  Mirrors the Alumni Green palette + Sanchez font used in
 *  admin-ds.css so admin and public pages feel consistent.
 * =============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Sanchez&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --auth-indigo:       #17896D; /* Alumni Green */
    --auth-indigo-dark:  #10664E;
    --auth-indigo-deep:  #0B4636;
    --auth-gold:         #f5c518;
    --auth-red:          #e03131;
}

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

body {
    background: #eef0f7 !important;
    font-family: 'Work Sans', serif !important;
    margin: 0; padding: 0;
}

/* ── Page shell ── */
.lp-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

/* ── Card ── */
.lp-card {
    display: flex;
    width: 100%;
    max-width: 860px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.06),
        0 8px 32px rgba(23,137,109,.10),
        0 32px 80px rgba(0,0,0,.10);
    animation: lp-rise .45s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes lp-rise {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ══════════════════════════════════════════
   BRAND PANEL (desktop)
══════════════════════════════════════════ */
.lp-brand {
    flex: 0 0 320px;
    background: linear-gradient(155deg, var(--auth-indigo) 0%, var(--auth-indigo-dark) 45%, var(--auth-indigo-deep) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 38px 32px 34px;
    position: relative;
    overflow: hidden;
}
.lp-brand::before {
    content: '';
    position: absolute;
    top: -70px; right: -70px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(245,197,24,.10);
    pointer-events: none;
}
.lp-brand::after {
    content: '';
    position: absolute;
    bottom: -90px; left: -50px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}
.lp-brand-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 380px; height: 380px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.06);
    pointer-events: none;
}

.lp-logo-box {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
    position: relative; z-index: 1;
}
.lp-logo-box img { width: 30px; height: 30px; object-fit: contain; }

.lp-brand-body { position: relative; z-index: 1; }
.lp-brand-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin-bottom: 12px;
}
.lp-brand-title span { color: var(--auth-gold); }
.lp-brand-desc {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    line-height: 1.8;
    margin-bottom: 22px;
}

.lp-features { display: flex; flex-direction: column; gap: 9px; }
.lp-feature {
    display: flex; align-items: center; gap: 9px;
    font-size: 11.5px; color: rgba(255,255,255,.65); font-weight: 500;
}
.lp-feature-dot {
    width: 22px; height: 22px; border-radius: 7px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 9px; color: var(--auth-gold);
}

.lp-brand-foot { position: relative; z-index: 1; margin-top: 28px; }
.lp-secure-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 30px;
    padding: 7px 14px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.6);
}
.lp-secure-badge i { font-size: 12px; color: var(--auth-gold); }

/* ══════════════════════════════════════════
   MOBILE BRAND BAR (hidden on desktop)
══════════════════════════════════════════ */
.lp-mobile-brand {
    display: none;
    background: linear-gradient(135deg, var(--auth-indigo) 0%, var(--auth-indigo-deep) 100%);
    padding: 28px 24px 26px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.lp-mobile-brand::before {
    content: '';
    position: absolute;
    top: -40px; right: -50px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(245,197,24,.09);
    pointer-events: none;
}
.lp-mobile-brand::after {
    content: '';
    position: absolute;
    bottom: -50px; left: -30px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}
.lp-mb-inner { position: relative; z-index: 1; }
.lp-mb-logo-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.lp-mb-logo-box {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
}
.lp-mb-logo-box img { width: 24px; height: 24px; object-fit: contain; }
.lp-mb-app-name {
    font-size: 15px; font-weight: 700;
    color: #fff; letter-spacing: -.2px;
}
.lp-mb-tagline {
    font-size: 22px; font-weight: 800;
    color: #fff; line-height: 1.2; letter-spacing: -.4px;
}
.lp-mb-tagline span { color: var(--auth-gold); }
.lp-mb-sub {
    margin-top: 6px;
    font-size: 11.5px;
    color: rgba(255,255,255,.5);
}

/* ══════════════════════════════════════════
   FORM PANEL
══════════════════════════════════════════ */
.lp-form-panel {
    flex: 1;
    background: #fff;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 500px;
}

/* icon circle (forgot-password) */
.lp-icon-circle {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(23,137,109,.08);
    border: 1.5px solid rgba(23,137,109,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--auth-indigo);
    margin-bottom: 18px;
}

.lp-form-head { margin-bottom: 24px; }
.lp-form-head h2 {
    font-size: 19px; font-weight: 800;
    color: #111827; letter-spacing: -.3px; margin-bottom: 4px;
}
.lp-form-head p {
    font-size: 12px; color: #9ca3af; line-height: 1.7;
    max-width: 320px;
}

/* info notice (forgot-password) */
.lp-notice {
    background: rgba(23,137,109,.05);
    border: 1px solid rgba(23,137,109,.14);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 12px; color: #4a5568;
    display: flex; gap: 9px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.lp-notice i { font-size: 14px; color: var(--auth-indigo); flex-shrink: 0; margin-top: 1px; }

/* success status (forgot-password) */
.lp-success {
    background: rgba(18,184,134,.06);
    border: 1px solid rgba(18,184,134,.2);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 12px; color: #0ca678;
    display: flex; gap: 9px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.lp-success i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* errors */
.lp-errors {
    background: rgba(224,49,49,.05);
    border: 1px solid rgba(224,49,49,.18);
    border-radius: 10px;
    padding: 10px 14px 10px 12px;
    font-size: 12px; color: #c92a2a;
    display: flex; gap: 9px;
    margin-bottom: 18px;
    line-height: 1.6;
}
.lp-errors i { font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* form groups */
.lp-group { margin-bottom: 16px; }
.lp-label {
    display: block;
    font-size: 10px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
    color: #6b7280; margin-bottom: 7px;
}

/* input */
.lp-input-wrap { position: relative; display: flex; align-items: center; }
.lp-input-icon {
    position: absolute; left: 13px;
    color: #c4c9d6; font-size: 13px;
    pointer-events: none;
    transition: color .18s;
}
.lp-input-wrap:focus-within .lp-input-icon { color: var(--auth-indigo); }

.lp-input {
    width: 100%;
    height: 44px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 14px 0 38px;
    font-size: 13px; font-weight: 500;
    font-family: 'Work Sans', serif;
    color: #111827;
    background: #fafbff;
    transition: border-color .18s, box-shadow .18s, background .18s;
    outline: none;
}
.lp-input::placeholder { color: #c4c9d6; font-weight: 400; }
.lp-input:focus {
    border-color: var(--auth-indigo);
    background: #fff;
    box-shadow: 0 0 0 3.5px rgba(23,137,109,.11);
}
.lp-input.has-eye { padding-right: 40px; }

.lp-pw-eye {
    position: absolute; right: 12px;
    background: none; border: none; cursor: pointer;
    color: #c4c9d6; font-size: 14px; padding: 0;
    transition: color .15s;
}
.lp-pw-eye:hover { color: var(--auth-indigo); }

/* meta */
.lp-meta {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 20px; margin-top: 4px;
}
.lp-remember { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.lp-remember input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--auth-indigo); cursor: pointer;
}
.lp-remember-label { font-size: 12px; color: #6b7280; cursor: pointer; }
.lp-forgot {
    font-size: 12px; font-weight: 700;
    color: var(--auth-indigo); text-decoration: none; transition: color .15s;
}
.lp-forgot:hover { color: var(--auth-indigo-dark); text-decoration: underline; }

/* submit */
.lp-submit {
    width: 100%; height: 46px;
    background: var(--auth-indigo);
    border: none; border-radius: 11px;
    font-family: 'Work Sans', serif;
    font-size: 13px; font-weight: 700;
    color: #fff; letter-spacing: .2px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .18s, box-shadow .18s, transform .15s;
    box-shadow: 0 4px 14px rgba(23,137,109,.35);
}
.lp-submit:hover {
    background: var(--auth-indigo-dark);
    box-shadow: 0 6px 20px rgba(23,137,109,.45);
    transform: translateY(-1px);
}
.lp-submit:active { transform: translateY(0); }

/* back to login link (forgot-password) */
.lp-back {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: #6b7280; text-decoration: none;
    transition: color .15s;
}
.lp-back:hover { color: var(--auth-indigo); }
.lp-back i { font-size: 11px; }

/* divider */
.lp-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0 16px;
    font-size: 10.5px; color: #d1d5db;
    font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
}
.lp-divider::before,
.lp-divider::after { content: ''; flex: 1; height: 1px; background: #f0f2f5; }

/* social */
.lp-socials { display: flex; justify-content: center; gap: 10px; }
.lp-social {
    width: 42px; height: 42px;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background: #fafbff;
    font-size: 15px; color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: all .16s;
}
.lp-social:hover {
    border-color: var(--auth-indigo);
    background: rgba(23,137,109,.06);
    color: var(--auth-indigo);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(23,137,109,.12);
}

/* register */
.lp-register {
    text-align: center;
    margin-top: 18px;
    font-size: 12px; color: #9ca3af;
}
.lp-register a {
    color: var(--auth-indigo); font-weight: 700; text-decoration: none;
}
.lp-register a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 680px) {
    body { background: #fff !important; }

    .lp-shell {
        padding: 0;
        align-items: stretch;
        background: #fff;
    }

    .lp-card {
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
        min-height: 100dvh;
        animation: none;
    }

    /* show mobile brand bar */
    .lp-mobile-brand { display: block; }

    /* hide desktop brand panel */
    .lp-brand { display: none; }

    .lp-form-panel {
        flex: 1;
        padding: 28px 22px 36px;
        justify-content: flex-start;
        min-height: unset;
    }

    .lp-form-head h2 { font-size: 17px; }
    .lp-input        { height: 48px; font-size: 14px; }
    .lp-submit       { height: 50px; font-size: 14px; }
}

@media (min-width: 681px) and (max-width: 860px) {
    .lp-brand { flex: 0 0 270px; padding: 32px 24px; }
    .lp-brand-title { font-size: 22px; }
    .lp-form-panel  { padding: 36px 30px; }
}

/**
 * =============================================================
 *  KIOSK CLAIMING PAGES — Shared Light Theme (v2, refined)
 *  Used by:
 *    resources/views/food-services/claiming-page.blade.php
 *    resources/views/token-of-appreciation/claiming-page.blade.php
 *
 *  Same Alumni Green + Sanchez/Work Sans tokens as the section
 *  above — this pass focuses on hierarchy, spacing, elevation
 *  and touch-friendly sizing for a more professional, easier to
 *  operate front-desk kiosk:
 *    - a 3-step progress rail (Scan → Select → Done)
 *    - services grouped into Available / Not Available / Redeemed
 *    - icon badges for quicker visual scanning
 *  All rules stay scoped under .kiosk-wrapper so nothing leaks
 *  onto other pages that also load this stylesheet.
 * =============================================================
 */

.kiosk-wrapper {
    /* Surfaces */
    --k-bg:          #eef0f7;
    --k-surface:     #ffffff;
    --k-surface2:    #f7f8fc;
    --k-surface3:    #eef0f7;
    --k-border:      rgba(17,24,39,.07);
    --k-border-mid:  rgba(17,24,39,.13);

    /* Alumni Green accent (reuses the auth vars above) */
    --k-accent:      var(--auth-indigo);
    --k-accent-dim:  var(--auth-indigo-dark);
    --k-accent-deep: var(--auth-indigo-deep);
    --k-accent-soft: rgba(23,137,109,.09);
    --k-accent-glow: rgba(23,137,109,.22);

    /* Semantic */
    --k-success:        #0ca678;
    --k-success-bg:     rgba(12,166,120,.08);
    --k-success-border: rgba(12,166,120,.22);

    --k-danger:        var(--auth-red);
    --k-danger-bg:     rgba(224,49,49,.06);
    --k-danger-border: rgba(224,49,49,.20);

    --k-warning:        #e8890c;
    --k-warning-bg:     rgba(232,137,12,.08);
    --k-warning-border: rgba(232,137,12,.22);

    --k-info:        #3b5bdb;
    --k-info-bg:     rgba(59,91,219,.07);
    --k-info-border: rgba(59,91,219,.20);

    /* Text */
    --k-text:     #111827;
    --k-text-dim: #4a5568;
    --k-muted:    #9ca3af;

    /* Elevation */
    --k-shadow-sm: 0 1px 2px rgba(17,24,39,.05);
    --k-shadow-md: 0 6px 20px rgba(17,24,39,.08);
    --k-shadow-lg: 0 20px 48px rgba(17,24,39,.16);

    --k-radius:     16px;
    --k-radius-lg:  20px;
    --k-radius-sm:  10px;
    --k-font-head:  'Sanchez', serif;
    --k-font-body:  'Work Sans', sans-serif;

    height: 100vh; width: 100vw;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    position: relative;
    background: var(--k-bg);
    color: var(--k-text);
    font-family: var(--k-font-body);
    z-index: 1;
}

.kiosk-wrapper, .kiosk-wrapper * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────── */
.kiosk-wrapper .kiosk-header {
    background: var(--k-surface);
    border-bottom: 1px solid var(--k-border);
    padding: 18px 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    box-shadow: var(--k-shadow-sm);
    z-index: 2;
}

.kiosk-wrapper .header-left { display: flex; align-items: center; gap: 14px; }

.kiosk-wrapper .header-logo,
.kiosk-wrapper .header-logo img {
    height: 44px; width: 44px;
    object-fit: contain; border-radius: 12px;
    border: 1px solid var(--k-border-mid);
    background: var(--k-surface2);
}

.kiosk-wrapper .header-text h1 {
    font-family: var(--k-font-head);
    font-size: 16px; font-weight: 700; color: var(--k-text); letter-spacing: -.01em;
    line-height: 1.25;
}
.kiosk-wrapper .header-text p {
    font-size: 11.5px; color: var(--k-muted); margin-top: 3px;
    font-family: var(--k-font-body); font-weight: 400;
}

.kiosk-wrapper .event-pill {
    display: flex; align-items: center; gap: 8px;
    background: var(--k-accent-soft);
    border: 1px solid rgba(23,137,109,.25);
    border-radius: 100px; padding: 8px 18px;
    font-family: var(--k-font-head);
    font-size: 12.5px; font-weight: 700; color: var(--k-accent); letter-spacing: .01em;
}

.kiosk-wrapper .event-pill .dot {
    width: 7px; height: 7px; background: var(--k-accent); border-radius: 50%;
    animation: k-pulse 2.5s infinite;
}

@keyframes k-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }

/* ── Body ────────────────────────────────────────────────── */
.kiosk-wrapper .kiosk-body { display: grid; grid-template-columns: 388px 1fr; overflow: hidden; }

/* ── Left Panel: Scan ────────────────────────────────────── */
.kiosk-wrapper .scan-panel {
    background: var(--k-surface);
    border-right: 1px solid var(--k-border);
    display: flex; flex-direction: column;
    padding: 24px 22px; gap: 18px; overflow-y: auto;
}

/* Progress rail — Scan → Select → Done, so the attendant always
   knows where they are in the redemption flow at a glance */
.kiosk-wrapper .steps-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 2px;
}

.kiosk-wrapper .step-item {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 600; color: var(--k-muted);
    font-family: var(--k-font-body);
    transition: color .2s;
}

.kiosk-wrapper .step-dot {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--k-surface3); color: var(--k-muted);
    border: 1.5px solid var(--k-border-mid);
    font-family: var(--k-font-head); font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; transition: all .2s;
}

.kiosk-wrapper .step-item.active { color: var(--k-accent); }
.kiosk-wrapper .step-item.active .step-dot {
    background: var(--k-accent); color: #fff; border-color: var(--k-accent);
    box-shadow: 0 0 0 3px var(--k-accent-soft);
}

.kiosk-wrapper .step-item.done { color: var(--k-text-dim); }
.kiosk-wrapper .step-item.done .step-dot {
    background: var(--k-accent-soft); color: var(--k-accent); border-color: rgba(23,137,109,.3);
}
.kiosk-wrapper .step-item.done .step-dot::before { content: '\f26a'; font-family: 'bootstrap-icons'; font-size: 10px; }

.kiosk-wrapper .step-sep {
    flex: 1; height: 2px; background: var(--k-border-mid); border-radius: 2px;
    transition: background .25s;
}
.kiosk-wrapper .step-sep.done { background: var(--k-accent); }

/* Section labels (Scan Mode) */
.kiosk-wrapper .scan-label {
    font-family: var(--k-font-head); font-size: 11px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--k-text-dim);
    display: flex; align-items: center; gap: 8px; margin: 0;
}

.kiosk-wrapper .mode-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    background: var(--k-surface2); padding: 5px;
    border-radius: var(--k-radius); border: 1px solid var(--k-border);
}

.kiosk-wrapper .mode-tab {
    padding: 12px 10px; border: none; border-radius: 11px;
    background: transparent; color: var(--k-muted);
    font-family: var(--k-font-head); font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .18s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px;
}

.kiosk-wrapper .mode-tab.active {
    background: var(--k-accent); color: #fff;
    box-shadow: 0 3px 10px var(--k-accent-glow);
}

.kiosk-wrapper .mode-tab:not(.active):hover { color: var(--k-text-dim); background: var(--k-surface3); }

/* NFC visual — a calm, centered icon reads clearer at a glance
   than a wall of text inside a dashed box */
.kiosk-wrapper .nfc-area, .kiosk-wrapper .qr-area { display: flex; flex-direction: column; gap: 10px; }

.kiosk-wrapper .nfc-visual {
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg); padding: 32px 20px; text-align: center;
    background: var(--k-surface2); position: relative;
    transition: border-color .3s, box-shadow .3s, background .3s;
}

.kiosk-wrapper .nfc-visual.scanning {
    border-color: var(--k-accent); background: var(--k-accent-soft);
    box-shadow: 0 0 0 4px rgba(23,137,109,.12);
}

.kiosk-wrapper .nfc-icon {
    font-size: 2.6rem; display: block; margin-bottom: 12px; color: var(--k-accent);
    animation: k-float 3.5s ease-in-out infinite;
}

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

.kiosk-wrapper .nfc-visual p { color: var(--k-text-dim); font-size: 13px; line-height: 1.6; }

.kiosk-wrapper #rfidInput { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.kiosk-wrapper #qrReader {
    border-radius: var(--k-radius-lg); overflow: hidden; background: #0b0d1a;
    width: 100%; aspect-ratio: 1; display: none;
    border: 1px solid var(--k-border-mid);
}
.kiosk-wrapper #qrReader video { width: 100% !important; height: auto !important; }

.kiosk-wrapper .qr-start-btn {
    width: 100%; padding: 14px;
    border: 1px solid var(--k-border-mid); border-radius: var(--k-radius);
    background: var(--k-surface2); color: var(--k-text-dim);
    font-family: var(--k-font-head); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all .18s;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px;
}

.kiosk-wrapper .qr-start-btn:hover { border-color: var(--k-accent); color: var(--k-accent); }
.kiosk-wrapper .qr-start-btn.active { background: var(--k-danger-bg); border-color: var(--k-danger-border); color: var(--k-danger); }

.kiosk-wrapper #qrStatus { text-align: center; font-size: 11.5px; color: var(--k-muted); padding: 4px; }

/* Status bar — pill-style with an icon chip so state changes are easy to scan */
.kiosk-wrapper .status-bar {
    background: var(--k-surface2); border: 1px solid var(--k-border); border-radius: var(--k-radius);
    padding: 12px 14px; font-size: 12.5px; font-weight: 500; color: var(--k-muted);
    display: flex; align-items: center; gap: 10px; min-height: 48px; transition: all .25s;
}

.kiosk-wrapper .status-bar i { font-size: 15px; flex-shrink: 0; }
.kiosk-wrapper .status-bar.success { color: var(--k-success); background: var(--k-success-bg); border-color: var(--k-success-border); }
.kiosk-wrapper .status-bar.error   { color: var(--k-danger);  background: var(--k-danger-bg);  border-color: var(--k-danger-border); }
.kiosk-wrapper .status-bar.warning { color: var(--k-warning); background: var(--k-warning-bg); border-color: var(--k-warning-border); }
.kiosk-wrapper .status-bar.info    { color: var(--k-info);    background: var(--k-info-bg);    border-color: var(--k-info-border); }

/* Reset button */
.kiosk-wrapper .reset-btn {
    width: 100%; padding: 13px;
    border: 1px dashed var(--k-border-mid); border-radius: var(--k-radius);
    background: transparent; color: var(--k-text-dim);
    font-family: var(--k-font-head); font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .18s;
    display: none; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px;
}

.kiosk-wrapper .reset-btn:hover { border-color: var(--k-accent); border-style: solid; color: var(--k-accent); background: var(--k-accent-soft); }

/* ── Right Panel: Claim ──────────────────────────────────── */
.kiosk-wrapper .claims-panel { display: flex; flex-direction: column; overflow: hidden; background: var(--k-bg); }

.kiosk-wrapper .idle-state {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    padding: 40px; text-align: center;
}

.kiosk-wrapper .idle-glyph {
    font-size: 3rem; color: var(--k-accent); opacity: .28; margin-bottom: 10px; display: block;
}

.kiosk-wrapper .idle-state h2 {
    font-family: var(--k-font-head); font-size: 1.35rem; font-weight: 700;
    color: var(--k-text); margin-bottom: 2px;
}

.kiosk-wrapper .idle-state > p { color: var(--k-muted); font-size: 13px; max-width: 320px; }

.kiosk-wrapper .idle-hints {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-top: 24px; max-width: 460px;
}
.kiosk-wrapper .idle-hint {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; color: var(--k-text-dim);
    background: var(--k-surface); border: 1px solid var(--k-border);
    padding: 9px 16px; border-radius: 100px; box-shadow: var(--k-shadow-sm);
}
.kiosk-wrapper .idle-hint i { color: var(--k-accent); font-size: 13px; }

.kiosk-wrapper .active-state { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Claimer bar — reads like a verified receipt header */
.kiosk-wrapper .claimer-bar {
    background: var(--k-surface); border-bottom: 1px solid var(--k-border);
    padding: 18px 28px; display: flex; align-items: center; gap: 16px;
    box-shadow: var(--k-shadow-sm);
}

.kiosk-wrapper .claimer-avatar {
    width: 50px; height: 50px; border-radius: 50%;
    background: linear-gradient(135deg, var(--k-accent-dim), var(--k-accent));
    border: 3px solid var(--k-accent-soft);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--k-font-head); font-size: 15px; font-weight: 700;
    color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px var(--k-accent-glow);
}

.kiosk-wrapper .claimer-info { flex: 1; min-width: 0; }
.kiosk-wrapper .claimer-name {
    font-family: var(--k-font-head); font-size: 15px; font-weight: 700; color: var(--k-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kiosk-wrapper .claimer-meta { font-size: 11.5px; color: var(--k-muted); margin-top: 3px; }

.kiosk-wrapper .claimer-badge {
    padding: 5px 13px; border-radius: 100px; flex-shrink: 0;
    font-family: var(--k-font-head); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; border: 1px solid transparent;
    display: flex; align-items: center; gap: 5px;
}
.kiosk-wrapper .claimer-badge::before { content: '\f26a'; font-family: 'bootstrap-icons'; font-size: 11px; }

.kiosk-wrapper .claimer-badge.user  { background: var(--k-accent-soft); color: var(--k-accent); border-color: rgba(23,137,109,.25); }
.kiosk-wrapper .claimer-badge.guest { background: var(--k-success-bg);  color: var(--k-success); border-color: var(--k-success-border); }

.kiosk-wrapper .services-scroll { flex: 1; overflow-y: auto; padding: 22px 28px; display: flex; flex-direction: column; gap: 22px; }

/* Grouped sections — Available Now / Not Available / Already Redeemed,
   so the attendant sees what's actionable first instead of one long
   mixed grid they have to scan through card by card */
.kiosk-wrapper .section-group { display: flex; flex-direction: column; gap: 14px; }

.kiosk-wrapper .section-head {
    display: flex; align-items: center; gap: 10px;
}
.kiosk-wrapper .section-head-title {
    font-family: var(--k-font-head); font-size: 11px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--k-text);
    display: flex; align-items: center; gap: 7px;
}
.kiosk-wrapper .section-head.muted .section-head-title { color: var(--k-muted); }

.kiosk-wrapper .section-count {
    font-family: var(--k-font-body); font-size: 11px; font-weight: 700;
    color: var(--k-muted); background: var(--k-surface3);
    padding: 2px 9px; border-radius: 100px;
}

.kiosk-wrapper .section-head::after { content: ''; flex: 1; height: 1px; background: var(--k-border); }

.kiosk-wrapper .section-toggle {
    order: 2; border: none; background: transparent; cursor: pointer;
    font-family: var(--k-font-body); font-size: 11.5px; font-weight: 600;
    color: var(--k-muted); display: flex; align-items: center; gap: 5px;
    padding: 4px 2px; flex-shrink: 0;
}
.kiosk-wrapper .section-head::after { order: 1; }
.kiosk-wrapper .section-toggle:hover { color: var(--k-accent); }
.kiosk-wrapper .section-toggle i { transition: transform .2s; }
.kiosk-wrapper .section-group.collapsed .section-toggle i { transform: rotate(-90deg); }
.kiosk-wrapper .section-group.collapsed .services-grid,
.kiosk-wrapper .section-group.collapsed .empty-note { display: none; }

.kiosk-wrapper .empty-note {
    font-size: 12.5px; color: var(--k-muted); background: var(--k-surface);
    border: 1px dashed var(--k-border-mid); border-radius: var(--k-radius);
    padding: 16px; text-align: center;
}

.kiosk-wrapper .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

/* ── Cards ──────────────────────────────────────────────── */
.kiosk-wrapper .service-card {
    background: var(--k-surface); border: 1px solid var(--k-border);
    border-radius: var(--k-radius); padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: var(--k-shadow-sm);
    transition: border-color .18s, transform .15s, box-shadow .18s;
}

.kiosk-wrapper .service-card.available { border-color: var(--k-border-mid); }
.kiosk-wrapper .service-card.available:hover {
    border-color: rgba(23,137,109,.35);
    box-shadow: var(--k-shadow-md);
    transform: translateY(-2px);
}

.kiosk-wrapper .service-card.claimed { opacity: .6; background: var(--k-surface2); }

.kiosk-wrapper .service-card.expired { border-color: var(--k-danger-border) !important; background: #fdf2f2 !important; }
.kiosk-wrapper .service-card.expired .service-name-text,
.kiosk-wrapper .service-card.expired .service-desc,
.kiosk-wrapper .service-card.expired .service-meta { color: #c92a2a !important; opacity: .9; }
.kiosk-wrapper .service-card.expired .service-card-icon { background: var(--k-danger-bg); color: var(--k-danger); }

.kiosk-wrapper .service-card.soon { border-color: var(--k-warning-border) !important; background: #fdf6ec !important; }
.kiosk-wrapper .service-card.soon .service-name-text,
.kiosk-wrapper .service-card.soon .service-desc,
.kiosk-wrapper .service-card.soon .service-meta { color: #a15c04 !important; opacity: .9; }
.kiosk-wrapper .service-card.soon .service-card-icon { background: var(--k-warning-bg); color: var(--k-warning); }

.kiosk-wrapper .service-name {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    color: var(--k-text);
}
.kiosk-wrapper .service-name-inner { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

.kiosk-wrapper .service-card-icon {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    background: var(--k-accent-soft); color: var(--k-accent);
    display: flex; align-items: center; justify-content: center; font-size: 13.5px;
}

.kiosk-wrapper .service-name-text {
    font-family: var(--k-font-head); font-size: 13.5px; font-weight: 700; color: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kiosk-wrapper .service-chip {
    font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px; white-space: nowrap; flex-shrink: 0;
    border: 1px solid transparent; margin-top: 2px;
}
.kiosk-wrapper .chip-claimed  { background: var(--k-surface3); color: var(--k-text-dim); border-color: var(--k-border-mid); }
.kiosk-wrapper .chip-expired  { background: var(--k-danger-bg);  color: var(--k-danger);  border-color: var(--k-danger-border); }
.kiosk-wrapper .chip-soon     { background: var(--k-warning-bg); color: var(--k-warning); border-color: var(--k-warning-border); }
.kiosk-wrapper .chip-available { display: none; }

.kiosk-wrapper .service-desc { font-size: 12.5px; color: var(--k-text-dim); line-height: 1.6; }

.kiosk-wrapper .service-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    border-top: 1px solid var(--k-border); margin-top: 2px; padding-top: 10px;
}
.kiosk-wrapper .service-meta span {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--k-text-dim); font-weight: 500;
    background: var(--k-surface2); padding: 4px 9px; border-radius: 7px;
}

/* Claim buttons */
.kiosk-wrapper .claim-btn {
    width: 100%; padding: 13px; border: none; border-radius: var(--k-radius-sm);
    font-family: var(--k-font-head); font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .18s;
    display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto;
    min-height: 46px;
}

.kiosk-wrapper .claim-btn.available { background: var(--k-accent); color: #fff; box-shadow: 0 3px 10px var(--k-accent-glow); }
.kiosk-wrapper .claim-btn.available:hover { background: var(--k-accent-dim); transform: scale(1.015); }
.kiosk-wrapper .claim-btn.available:active { transform: scale(.99); }

.kiosk-wrapper .claim-btn.claimed { background: transparent; border: 1px solid var(--k-border-mid); color: var(--k-muted); cursor: default; }

.kiosk-wrapper .claim-btn.disabled-btn { background: transparent; border: 1px solid currentColor; opacity: .55; cursor: not-allowed; }
.kiosk-wrapper .service-card.expired .claim-btn.disabled-btn { color: var(--k-danger);  border-color: var(--k-danger-border); }
.kiosk-wrapper .service-card.soon    .claim-btn.disabled-btn { color: var(--k-warning); border-color: var(--k-warning-border); }

/* ── Confirm Modal ───────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(17,24,39,.45);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .22s;
    padding: 20px;
}

.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-box {
    background: #fff; border: 1px solid rgba(17,24,39,.08);
    border-radius: 20px; padding: 40px 36px; max-width: 440px; width: 100%;
    text-align: center; transform: scale(.94) translateY(8px); transition: transform .22s;
    box-shadow: 0 32px 80px rgba(17,24,39,.25);
    font-family: 'Work Sans', sans-serif;
}

.modal-overlay.open .modal-box { transform: scale(1) translateY(0); }

.modal-icon-wrap {
    width: 58px; height: 58px; border-radius: 16px;
    background: rgba(23,137,109,.09); border: 1px solid rgba(23,137,109,.25);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; font-size: 26px;
}

.modal-title   { font-family: 'Sanchez', serif; font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.modal-service { font-family: 'Sanchez', serif; font-size: 13.5px; font-weight: 700; color: #17896D; margin-bottom: 8px; }
.modal-sub     { font-size: 12.5px; color: #9ca3af; margin-bottom: 28px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; }

.modal-cancel {
    flex: 1; padding: 14px; border: 1px solid #e5e7eb; border-radius: 12px;
    background: transparent; color: #6b7280;
    font-family: 'Work Sans', sans-serif; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .2s;
}
.modal-cancel:hover { border-color: #9ca3af; color: #111827; }

.modal-confirm {
    flex: 2; padding: 14px; border: none; border-radius: 12px;
    background: #17896D; color: #fff;
    font-family: 'Work Sans', sans-serif; font-size: 12.5px; font-weight: 800;
    cursor: pointer; transition: all .2s; box-shadow: 0 4px 16px rgba(23,137,109,.30);
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.modal-confirm:hover { background: #10664E; }

/* ── Flash toast ─────────────────────────────────────────────
   A compact bottom-center toast reads as more professional and
   is less disruptive than a full-screen blocking overlay, while
   using the exact same markup/JS the pages already call. */
.flash-overlay {
    position: fixed; left: 50%; bottom: 34px;
    transform: translate(-50%, 16px);
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    z-index: 99999; opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
    background: #fff; border-radius: 16px;
    padding: 14px 22px 14px 14px;
    box-shadow: 0 20px 48px rgba(17,24,39,.18);
    border: 1px solid rgba(17,24,39,.06);
    max-width: 90vw;
}

.flash-overlay.show { opacity: 1; transform: translate(-50%, 0); }
.flash-overlay.success { border-color: rgba(12,166,120,.25); }
.flash-overlay.error   { border-color: rgba(224,49,49,.25); }

.flash-icon-wrap {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.flash-overlay.success .flash-icon-wrap { color: #0ca678; background: rgba(12,166,120,.10); }
.flash-overlay.error   .flash-icon-wrap { color: #e03131; background: rgba(224,49,49,.10); }

.flash-msg {
    font-family: 'Sanchez', serif; font-size: 13.5px; font-weight: 700;
    color: #111827; text-align: left; white-space: nowrap;
}

/* ── Countdown bar ───────────────────────────────────────── */
.countdown-bar {
    height: 3px; background: linear-gradient(90deg, #17896D, #10664E);
    width: 100%; transform-origin: left; transition: transform linear;
    display: none; border-radius: 2px; flex-shrink: 0;
}

/* ── Scrollbar ───────────────────────────────────────────── */
.kiosk-wrapper ::-webkit-scrollbar { width: 4px; }
.kiosk-wrapper ::-webkit-scrollbar-track { background: transparent; }
.kiosk-wrapper ::-webkit-scrollbar-thumb { background: var(--k-border-mid); border-radius: 4px; }

@media (max-width: 900px) {
    .kiosk-wrapper .kiosk-body { grid-template-columns: 1fr; }
    .kiosk-wrapper .scan-panel { border-right: none; border-bottom: 1px solid var(--k-border); max-height: 46vh; }
    .flash-overlay { width: calc(100vw - 32px); }
    .flash-msg { white-space: normal; }
}

/**
 * =============================================================
 *  ATTENDANCE INPUT KIOSK — Alumni Green Rebrand
 *  Used by: resources/views/attendance-input.blade.php
 *
 *  Recolored from the original indigo/navy dark theme to the
 *  same Alumni Green + Sanchez/Work Sans tokens used across
 *  auth-ds.css. Scoped under .att-page (and body:has(.att-page)
 *  for the couple of rules that must reach ancestor layout
 *  wrappers) so it can't affect the login or kiosk-claiming
 *  pages that share this stylesheet.
 * =============================================================
 */

/* Reset parent layout constraints — only when this page is active */
body:has(.att-page) html,
body:has(.att-page),
body:has(.att-page) main,
body:has(.att-page) .main-content,
body:has(.att-page) .wrapper,
body:has(.att-page) #app,
body:has(.att-page) #wrapper {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: hidden !important;
}

.att-page {
  --att-accent:      var(--auth-indigo);       /* Alumni Green */
  --att-accent-dark: var(--auth-indigo-dark);
  --att-accent-deep: var(--auth-indigo-deep);
  --att-gold:        #a87500;                  /* warm secondary accent, e.g. chair number / pending state */
  --att-success:     #0ca678;
  --att-warning:     #e8890c;
  --att-danger:      var(--auth-red);
  --att-muted:       #6b7280;
  --att-border:      #e8eaf0;
  --att-font-head:   'Sanchez', serif;
  --att-font-body:   'Work Sans', sans-serif;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  font-family: var(--att-font-body);
  position: relative;
}

.att-page, .att-page * { box-sizing: border-box; }

/* ── Main Card ── */
.att-page .att-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(17,24,39,.06);
  max-width: 780px;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.03),
    0 8px 32px rgba(23,137,109,.08),
    0 32px 80px rgba(0,0,0,.08);
}

/* ── Card Header ── */
.att-page .att-card-header {
  background: linear-gradient(155deg, var(--att-accent) 0%, var(--att-accent-dark) 45%, var(--att-accent-deep) 100%);
  padding: 32px 48px 28px;
  position: relative;
  overflow: hidden;
}
.att-page .att-card-header::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(245,197,24,.10);
  pointer-events: none;
}

.att-page .att-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative; z-index: 1;
}

.att-page .att-logo-wrap { flex-shrink: 0; }

.att-page .att-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  padding: 8px;
  display: block;
}

.att-page .att-header-text {
  flex: 1;
  min-width: 0;
}

.att-page .att-event-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}

.att-page .att-event-name {
  font-family: var(--att-font-head);
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 12px;
  word-break: break-word;
}

.att-page .att-event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.att-page .att-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  padding: 5px 10px;
}
.att-page .att-meta-chip i { font-size: 10px; color: rgba(255,255,255,.5); }

/* ── Mode status bar ── */
.att-page .att-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f8fc;
  border-bottom: 1px solid var(--att-border);
  padding: 12px 48px;
}

.att-page .att-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--att-muted);
  letter-spacing: .2px;
}

.att-page .att-mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--att-success);
  animation: att-pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes att-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(12,166,120,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(12,166,120,0); }
}

.att-page .att-mode-icon {
  color: var(--att-accent);
  font-size: 18px;
  display: flex;
  align-items: center;
  opacity: .8;
}

/* ── Card Body ── */
.att-page .att-card-body { padding: 36px 48px 40px; }

/* ── Screen visibility ── */
.att-page .att-screen { display: none; }
.att-page .att-screen.active { display: block; animation: att-fadeUp 0.3s ease-out; }

@keyframes att-fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scanner prompts ── */
.att-page .att-prompt-area {
  display: flex;
  gap: 32px;
  align-items: center;
}

.att-page .att-prompt-content { flex: 1; }

.att-page .att-prompt-title {
  font-family: var(--att-font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  line-height: 1.3;
}

.att-page .att-prompt-sub {
  font-size: 13px;
  color: var(--att-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* Steps */
.att-page .att-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.att-page .att-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #555;
}
.att-page .att-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(23,137,109,.08);
  border: 1px solid rgba(23,137,109,.18);
  font-size: 10px;
  font-weight: 700;
  color: var(--att-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* NFC pulse rings */
.att-page .att-nfc-rings-standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.att-page .att-nfc-rings-inner {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.att-page .att-nfc-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--att-accent);
  animation: att-ring-expand 2.2s ease-out infinite;
  opacity: 0;
}
.att-page .att-nfc-ring:nth-child(1) { width: 36px; height: 36px; animation-delay: 0s; }
.att-page .att-nfc-ring:nth-child(2) { width: 52px; height: 52px; animation-delay: .5s; }
.att-page .att-nfc-ring:nth-child(3) { width: 68px; height: 68px; animation-delay: 1s; }
.att-page .att-nfc-ring-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(23,137,109,.08);
  border: 1px solid rgba(23,137,109,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--att-accent);
  position: relative;
  z-index: 1;
}

@keyframes att-ring-expand {
  0%   { transform: scale(.6); opacity: .7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Hidden RFID input */
.att-page #rfidInput { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Status / result lines */
.att-page #rfid-status, .att-page #result {
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--att-accent);
  min-height: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* QR mode layout */
.att-page .att-qr-layout {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

.att-page .att-qr-info { flex: 1; padding-top: 4px; }

.att-page #reader {
  width: 100%;
  max-width: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--att-border);
  flex-shrink: 0;
}

/* ── Divider ── */
.att-page .att-divider { height: 1px; background: var(--att-border); margin: 24px 0; }

/* ── Result screens ── */
.att-page .att-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}

.att-page .att-result-icon-wrap { padding-top: 4px; }

.att-page .att-result-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  animation: att-scaleIn 0.35s cubic-bezier(.175,.885,.32,1.275);
}
.att-page .att-result-icon.success  { background: rgba(12,166,120,.08);  color: var(--att-success);  border: 1.5px solid rgba(12,166,120,.2); }
.att-page .att-result-icon.checkout { background: rgba(232,137,12,.08);  color: var(--att-warning);  border: 1.5px solid rgba(232,137,12,.2); }
.att-page .att-result-icon.error    { background: rgba(224,49,49,.07);   color: var(--att-danger);   border: 1.5px solid rgba(224,49,49,.15); animation: att-shake 0.5s ease-out; }
.att-page .att-result-icon.pending  { background: rgba(245,197,24,.09);  color: var(--att-gold);     border: 1.5px solid rgba(245,197,24,.28); }

@keyframes att-scaleIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes att-shake {
  0%,100%     { transform: translateX(0); }
  15%,45%,75% { transform: translateX(-6px); }
  30%,60%,90% { transform: translateX(6px); }
}

.att-page .att-result-body { min-width: 0; }

.att-page .att-result-name {
  font-family: var(--att-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
  line-height: 1.3;
}

.att-page .att-result-sub {
  font-size: 13px;
  color: var(--att-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Status badge */
.att-page .att-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.att-page .att-badge.checkin  { background: rgba(12,166,120,.08);  color: var(--att-success); border-color: rgba(12,166,120,.2); }
.att-page .att-badge.checkout { background: rgba(232,137,12,.08);  color: #c85400;            border-color: rgba(232,137,12,.2); }
.att-page .att-badge.present  { background: rgba(23,137,109,.07);  color: var(--att-accent);  border-color: rgba(23,137,109,.15); }
.att-page .att-badge.error    { background: rgba(224,49,49,.07);   color: var(--att-danger);  border-color: rgba(224,49,49,.15); }
.att-page .att-badge.pending  { background: rgba(245,197,24,.09);  color: var(--att-gold);    border-color: rgba(245,197,24,.28); }

.att-page .att-enjoy {
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
  display: inline-block;
}
.att-page .att-enjoy.success  { color: var(--att-success); }
.att-page .att-enjoy.checkout { color: #c85400; }

/* ── Seat info box ── */
.att-page .att-seat-box {
  background: #f8fbfa;
  border: 1px solid rgba(23,137,109,.14);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0;
}
.att-page .att-seat-box.error {
  border-color: rgba(224,49,49,.13);
  background: rgba(224,49,49,.02);
}
.att-page .att-seat-box-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.att-page .att-seat-box-title i { color: var(--att-accent); font-size: 11px; }
.att-page .att-seat-box.error .att-seat-box-title,
.att-page .att-seat-box.error .att-seat-box-title i { color: var(--att-danger); }

.att-page .att-seat-row { display: flex; gap: 24px; }
.att-page .att-seat-item { flex: 1; }
.att-page .att-seat-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ccc; margin-bottom: 5px; }
.att-page .att-seat-value { font-size: 1.5rem; font-weight: 800; color: var(--att-accent); line-height: 1; font-family: var(--att-font-head); }
.att-page .att-seat-value.chair { color: var(--att-gold); }
.att-page .att-seat-note {
  margin-top: 10px;
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(23,137,109,.08);
}
.att-page .att-seat-note i { color: var(--att-accent); flex-shrink: 0; font-size: 11px; }
.att-page .att-seat-box.error .att-seat-note { color: var(--att-danger); border-color: rgba(224,49,49,.1); }
.att-page .att-seat-box.error .att-seat-note i { color: var(--att-danger); }

/* ── Help box ── */
.att-page .att-help-box {
  background: rgba(224,49,49,.03);
  border: 1px solid rgba(224,49,49,.12);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.att-page .att-help-box i { color: var(--att-danger); font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.att-page .att-help-box.pending { background: rgba(245,197,24,.05); border-color: rgba(245,197,24,.22); }
.att-page .att-help-box.pending i { color: var(--att-gold); }
.att-page .att-help-text { font-size: 12.5px; color: #555; line-height: 1.6; }
.att-page .att-help-text strong { color: #333; }
.att-page .att-help-box.pending .att-help-text strong { color: var(--att-gold); }

/* ── Progress + return ── */
.att-page .att-return-wrap { margin-top: 20px; }
.att-page .att-progress-track { height: 2px; background: #eee; border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.att-page .att-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--att-accent);
  transform-origin: left;
}
.att-page .att-progress-fill.running { animation: att-shrink var(--dur, 2s) linear forwards; }
.att-page .att-progress-fill.error-fill { background: var(--att-danger); }

@keyframes att-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.att-page .att-return-msg {
  font-size: 11px;
  color: #ccc;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.att-page .att-return-msg i { font-size: 10px; }

/* ── Confirmation modals (Bootstrap) ── */
.att-modal-content { border-radius: 16px; border: 1px solid #eee; overflow: hidden; }
.att-modal-header   { border-bottom: 1px solid #f0f0f0; padding: 18px 24px; }
.att-modal-title {
  font-family: 'Sanchez', serif; font-size: 14px; font-weight: 700; color: #1a1a2e;
  display: flex; align-items: center; gap: 10px;
}
.att-modal-icon {
  width: 30px; height: 30px; background: rgba(23,137,109,.08); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: #17896D;
}
.att-modal-body   { padding: 24px; background: #fafafa; }
.att-modal-body.centered { text-align: center; }
.att-modal-body p { font-size: 13.5px; color: #444; margin: 0; line-height: 1.75; }
.att-modal-body-sub { font-size: 12.5px; color: #888; margin-bottom: 16px; line-height: 1.6; }
.att-modal-name { color: #111; }
.att-modal-footer { border-top: 1px solid #f0f0f0; padding: 14px 24px; gap: 8px; justify-content: center; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .att-page .att-card-header  { padding: 24px 24px 20px; }
  .att-page .att-card-body    { padding: 28px 24px 32px; }
  .att-page .att-mode-bar     { padding: 10px 24px; }
  .att-page .att-header-inner { gap: 14px; }
  .att-page .att-logo         { width: 52px; height: 52px; }
  .att-page .att-event-name   { font-size: 1.15rem; }
  .att-page .att-qr-layout    { flex-direction: column; }
  .att-page #reader           { max-width: 100%; }
  .att-page .att-result       { grid-template-columns: 1fr; gap: 16px; }
  .att-page .att-result-icon-wrap { display: flex; justify-content: center; }
  .att-page .att-result-body  { text-align: center; }
  .att-page .att-seat-row     { gap: 16px; }
  .att-page .att-seat-value   { font-size: 1.2rem; }
}