/* ============================================================
   MENUNICO — Custom CSS (Stitch redesign)
   Tailwind handles layout; this file handles:
   - View switching
   - Animations
   - JS-generated elements (menu, chat, social, quiz, leaderboard)
   - Sheet / Modal
   ============================================================ */

/* ── Globals ── */
* { -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }
body { min-height: max(884px, 100dvh); }

/* ── Animations ── */
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes msgIn     { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp   { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes typingDot { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }

/* ── Language switcher ── */
.lang-select {
    font-size: 11px; font-weight: 600; color: #800000;
    background: transparent; border: 1px solid rgba(128,0,0,0.15);
    border-radius: 8px; padding: 3px 6px; cursor: pointer;
    outline: none; appearance: none; -webkit-appearance: none;
}

/* ── Spinner ── */
.spinner {
    width: 22px; height: 22px;
    border: 2px solid rgba(128,0,0,0.12);
    border-top-color: #800000;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* ── View switching ── */
.view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.view.active { display: flex; }
#viewMenu.active  { overflow-y: auto; }
#viewSocial.active { overflow: hidden; }

/* ── Category pills ── */
.cat-pill {
    white-space: nowrap;
    font-family: 'Newsreader', serif; font-size: 1.1rem; font-weight: 400;
    color: #94a3b8; flex-shrink: 0;
    padding-bottom: 6px;
    border: none; border-bottom: 2px solid transparent;
    background: none; cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.cat-pill.active { color: #800000; border-bottom-color: #800000; font-weight: 600; }

/* ── Quick suggestion chips ── */
.sug {
    white-space: nowrap; border-radius: 9999px;
    border: 1px solid rgba(128,0,0,0.22);
    padding: 7px 16px; font-size: 12px; font-weight: 500;
    color: #800000; flex-shrink: 0; background: none; cursor: pointer;
    transition: background 0.15s;
}
.sug:active { background: rgba(128,0,0,0.06); }

/* ── Typing dots ── */
.typing-dots { display: flex; gap: 5px; align-items: center; padding: 4px 0; }
.typing-dots span {
    width: 6px; height: 6px; background: #C5A059;
    border-radius: 50%; animation: typingDot 1.4s ease infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── Bottom nav buttons ── */
.nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: #94a3b8; background: none; border: none; cursor: pointer;
    transition: color 0.2s; position: relative; padding: 0;
}
.nav-btn > span:first-child { font-size: 26px; }
.nav-btn > span:nth-child(2) {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.12em; font-weight: 500;
}
.nav-btn.active { color: #800000; }
.nav-btn.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

.badge {
    position: absolute; top: -2px; right: -4px;
    width: 8px; height: 8px; background: #34d399;
    border-radius: 50%; border: 1.5px solid #f8f5f5;
}

/* ── Chat messages (JS-generated) ── */
.message {
    animation: msgIn 0.25s ease-out; display: flex;
    flex-direction: column; gap: 4px;
}
.message.user { align-items: flex-end; }
.message.ai   { align-items: flex-start; padding-left: 38px; position: relative; }

.msg-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.message.ai .msg-avatar {
    position: absolute; left: 0; top: 0;
    background: rgba(128,0,0,0.07); border: 1px solid rgba(128,0,0,0.14);
    color: #800000; font-family: 'Newsreader', serif; font-style: italic; font-size: 11px;
}
.message.user .msg-avatar { background: #800000; color: white; }

.msg-bubble { font-size: 14px; line-height: 1.65; color: #334155; font-weight: 300; max-width: 90%; }
.message.user .msg-bubble {
    background: #800000; color: white;
    padding: 10px 14px; border-radius: 18px 18px 4px 18px;
    font-weight: 400; max-width: 82%;
}
.message.ai::after {
    content: ''; display: block; height: 1px;
    background: rgba(128,0,0,0.07); margin-top: 6px; width: 100%;
}
.msg-time { font-size: 10px; color: #94a3b8; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }
.message.user .msg-time { text-align: right; }

/* ── Menu items (JS-generated) ── */
.menu-group { margin-bottom: 24px; animation: msgIn 0.3s ease-out both; }
.group-header { margin-bottom: 10px; }
.group-name { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 600; color: #800000; }

.menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid rgba(128,0,0,0.06);
    cursor: pointer; transition: opacity 0.15s;
}
.menu-item:active { opacity: 0.65; }
.menu-item-left  { flex: 1; min-width: 0; }
.menu-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.menu-item-name { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: #1e293b; margin-bottom: 3px; line-height: 1.3; }
.menu-item-desc { font-size: 13px; color: #64748b; font-style: italic; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-item-price { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: #800000; display: block; margin-top: 5px; }
.menu-item-chevron { color: #cbd5e1; font-size: 15px; }
.menu-item-foto { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.no-results { text-align: center; color: #94a3b8; font-size: 14px; padding: 48px 20px; font-style: italic; }

/* ── Item sheet ── */
.overlay {
    position: fixed; inset: 0; background: rgba(26,11,13,0.55); z-index: 40;
    visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s;
    backdrop-filter: blur(2px);
}
.overlay.visible { visibility: visible; opacity: 1; }

.sheet {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
    width: 100%; max-width: 430px; background: #f8f5f5;
    border-radius: 24px 24px 0 0; z-index: 50;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 88vh; overflow-y: auto;
}
.sheet.open { transform: translateX(-50%) translateY(0); }
.sheet-pill { width: 40px; height: 4px; background: #e2e8f0; border-radius: 2px; margin: 12px auto 8px; }

.sheet-foto { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.sheet-name { font-family: 'Newsreader', serif; font-size: 26px; font-weight: 600; color: #1e293b; margin-bottom: 4px; line-height: 1.2; }
.sheet-price { font-family: 'Newsreader', serif; font-size: 22px; font-weight: 600; color: #800000; margin-bottom: 14px; }
.sheet-desc { font-size: 14px; line-height: 1.7; color: #64748b; font-style: italic; margin-bottom: 18px; }
.sheet-allergeni { font-size: 12px; color: #800000; background: rgba(128,0,0,0.05); border: 1px solid rgba(128,0,0,0.15); border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; }
.sheet-ask-btn {
    width: 100%; background: #800000; color: white; border: none;
    border-radius: 14px; padding: 15px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* ── Reservation modal ── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(26,11,13,0.6);
    z-index: 50; display: flex; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(4px);
}
.modal-box {
    background: #f8f5f5; width: 100%; max-width: 430px;
    border-radius: 24px 24px 0 0; max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* ── Cart tab switcher ── */
.cart-tab {
    background: transparent;
    color: #94a3b8;
    border: 1.5px solid transparent;
    cursor: pointer;
}
.cart-tab.active {
    background: rgba(128,0,0,0.07);
    color: #800000;
    border-color: rgba(128,0,0,0.15);
}
.res-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #800000; margin-bottom: 5px; }
.res-input { width: 100%; background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-family: 'Inter', sans-serif; color: #1e293b; outline: none; transition: border-color 0.2s; appearance: none; }
.res-input:focus { border-color: rgba(128,0,0,0.35); }
.res-input::placeholder { color: #94a3b8; }

/* ── Lounge active mode: header + nav adapt to dark theme ── */
#appHeader,
#navBuffer,
#navWrapper nav {
    transition: background-color 0.3s, border-color 0.3s;
}
#appRoot.lounge-active #appHeader {
    background-color: rgba(26,11,13,0.97) !important;
    border-bottom-color: rgba(197,160,89,0.15) !important;
}
#appRoot.lounge-active #appHeader h1 {
    color: rgba(197,160,89,0.85) !important;
}
#appRoot.lounge-active #appHeader .material-symbols-outlined {
    color: rgba(255,255,255,0.35) !important;
}
#appRoot.lounge-active #appHeader button.rounded-full {
    background-color: rgba(197,160,89,0.1) !important;
}
#appRoot.lounge-active #navBuffer {
    background-color: rgba(26,11,13,0.97) !important;
}
#appRoot.lounge-active #navWrapper {
    border-top-color: rgba(197,160,89,0.15) !important;
}
#appRoot.lounge-active #navWrapper nav {
    background-color: rgba(26,11,13,0.97) !important;
}
#appRoot.lounge-active .nav-btn {
    color: rgba(255,255,255,0.3) !important;
}
#appRoot.lounge-active .nav-btn.active {
    color: #C5A059 !important;
}
#appRoot.lounge-active .nav-btn.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}
#appRoot.lounge-active .badge {
    border-color: #1a0b0d !important;
}

/* ── Floating cart button: white ring visible on both cream and dark ── */
#btnCart {
    box-shadow: 0 0 0 1.5px rgba(128,0,0,0.18);
}
#appRoot.lounge-active #btnCart {
    box-shadow: 0 0 0 1.5px rgba(197,160,89,0.25);
}

/* ── Order status stepper ── */
.order-stepper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 0 8px;
}
.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}
.stepper-dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s, border-color .3s;
    z-index: 1;
    margin-bottom: 6px;
}
.stepper-dot .material-symbols-outlined {
    font-size: 18px;
    color: #9ca3af;
    transition: color .3s;
}
.stepper-line {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
    transition: background .3s;
}
.stepper-line-last { display: none; }
.stepper-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-align: center;
    transition: color .3s;
    line-height: 1.3;
}

/* Active step */
.stepper-step.active .stepper-dot {
    background: #800000;
    border-color: #800000;
}
.stepper-step.active .stepper-dot .material-symbols-outlined { color: #fff; }
.stepper-step.active .stepper-label { color: #800000; font-weight: 700; }

/* Done step */
.stepper-step.done .stepper-dot {
    background: #dcfce7;
    border-color: #86efac;
}
.stepper-step.done .stepper-dot .material-symbols-outlined { color: #16a34a; }
.stepper-step.done .stepper-label { color: #16a34a; }
.stepper-step.done .stepper-line { background: #86efac; }

/* Pulsing animation for active step */
.stepper-step.active .stepper-dot {
    animation: stepPulse 2s ease-in-out infinite;
}
@keyframes stepPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(128,0,0,0.3); }
    50%      { box-shadow: 0 0 0 6px rgba(128,0,0,0); }
}

/* ── Lounge form elements ── */
.lounge-label {
    display: block;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(197,160,89,0.65);
    margin-bottom: 8px;
}

.lounge-input {
    width: 100%;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px; font-family: 'Inter', sans-serif;
    color: white; outline: none;
    transition: border-color 0.2s;
    appearance: none;
}
.lounge-input:focus { border-color: rgba(197,160,89,0.4); }
.lounge-input::placeholder { color: rgba(255,255,255,0.2); }

.lounge-cta {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #800000; color: white;
    border: none; border-radius: 14px;
    padding: 14px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; transition: opacity 0.15s;
}
.lounge-cta:active { opacity: 0.8; }

/* ── Social / Lounge section ── */
.social-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 0; font-size: 10px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.3);
    border: none; border-bottom: 2px solid transparent;
    background: none; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.social-tab.active { color: #C5A059; border-bottom-color: #C5A059; font-weight: 700; }

.social-panel { display: none; flex-direction: column; flex: 1; overflow-y: auto; background: #1a0b0d; }
.social-panel.active { display: flex; }

#socialMain { display: none; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; background: #1a0b0d; }
#socialMain > .flex.border-b { flex-shrink: 0; } /* social tabs */

/* WiFi lock, picker, and main fill the view */
#wifiLock, #nicknamePicker {
    flex: 1; flex-direction: column;
    min-height: 0; overflow-y: auto;
    background: #1a0b0d;
}
#wifiLock { align-items: center; justify-content: center; }

/* Chat panel needs inner scroll */
#panelChat { overflow: hidden; }
.social-chat-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12px; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.social-chat-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.social-input-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px 20px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.social-input-bar input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 9999px; padding: 10px 16px; font-size: 14px; color: white; outline: none; font-family: 'Inter', sans-serif; transition: border-color 0.2s; }
.social-input-bar input::placeholder { color: rgba(255,255,255,0.22); }
.social-input-bar button { width: 40px; height: 40px; background: #800000; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: white; }
.social-nick-badge { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; }

/* Social messages */
.social-msg { display: flex; gap: 10px; animation: msgIn 0.2s ease-out; }
.social-msg.mine { flex-direction: row-reverse; }
.social-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; }
.social-bubble-wrap { max-width: 78%; }
.social-nick { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #C5A059; margin-bottom: 4px; }
.social-nick-desc { font-weight: 400; text-transform: none; color: #64748b; letter-spacing: 0; }
.social-bubble { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: #e2e8f0; }
.social-msg.mine .social-bubble { background: #800000; border-color: transparent; border-radius: 14px 14px 4px 14px; color: white; }
.social-time { font-size: 10px; color: rgba(255,255,255,0.2); margin-top: 4px; letter-spacing: 0.08em; }

/* Quiz */
.quiz-score-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.quiz-start { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 28px; }
.quiz-cat-header { padding: 16px 20px 8px; }
.quiz-cat-title { font-family: 'Newsreader', serif; font-size: 20px; color: white; font-weight: 600; margin-bottom: 4px; }
.quiz-cat-sub { font-size: 13px; color: #64748b; font-style: italic; }
.quiz-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 20px 24px; }
.quiz-cat-card { background: linear-gradient(145deg, #3d1418, #221012); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 20px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.15s; color: white; }
.quiz-cat-card:active { transform: scale(0.95); }
.quiz-cat-icon { font-size: 28px; color: #C5A059; }
.quiz-cat-name { font-size: 13px; font-weight: 600; text-align: center; letter-spacing: 0.04em; }
.quiz-cat-count { font-size: 10px; color: #64748b; }
.quiz-card-inner { padding: 16px 20px 4px; }
.quiz-cat-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 20px; margin-bottom: 14px; }
.quiz-question-text { font-family: 'Newsreader', serif; font-size: 19px; color: white; line-height: 1.4; font-weight: 400; margin-bottom: 16px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 16px; }
.quiz-option { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 13px 16px; text-align: left; font-size: 14px; color: #e2e8f0; cursor: pointer; transition: background 0.15s, border-color 0.15s; width: 100%; font-family: 'Inter', sans-serif; }
.quiz-option:hover:not(:disabled) { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); }
.quiz-option.correct { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.35); color: #34d399; }
.quiz-option.wrong { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #f87171; }
.quiz-feedback { font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 10px; margin: 4px 20px 0; }
.quiz-feedback.ok   { background: rgba(52,211,153,0.1);  color: #34d399; border: 1px solid rgba(52,211,153,0.2); }
.quiz-feedback.fail { background: rgba(239,68,68,0.1);   color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.quiz-next-btn { background: #800000; color: white; border: none; border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 700; cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: 'Inter', sans-serif; }
.quiz-back-btn { background: rgba(255,255,255,0.04); color: #94a3b8; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; padding: 12px; font-size: 12px; cursor: pointer; white-space: nowrap; font-family: 'Inter', sans-serif; }

/* Leaderboard */
.lb-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.lb-rank { font-family: 'Newsreader', serif; font-size: 20px; font-weight: 700; font-style: italic; width: 36px; color: rgba(255,255,255,0.12); }
.lb-rank.gold { background: linear-gradient(135deg,#c5a059,#f1e4c0,#c5a059); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lb-rank.silver { color: #94a3b8; }
.lb-rank.bronze { color: #c27c5a; }
.lb-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: white; }
.lb-sub { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; }
.lb-score { font-family: 'Newsreader', serif; font-size: 16px; font-weight: 600; color: #C5A059; }
.lb-empty { text-align: center; color: #64748b; font-size: 14px; padding: 40px 0; font-style: italic; }

/* Color dots */
.color-dot { width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.2s, transform 0.15s; }
.color-dot:active { transform: scale(0.9); }
.color-dot.active { outline-color: white; }

/* Table buttons */
.table-num-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); font-size: 14px; font-weight: 700; color: white; background: transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.table-num-btn.active { background: #800000; border-color: #800000; }

/* Send button */
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Menu item refs in chat (dotted underline → apre sheet) ── */
.menu-ref {
    text-decoration: underline dotted #800000;
    color: #800000;
    cursor: pointer;
    font-style: normal;
}