/* Kiosk Styles aligned with main site palette */
:root {
  /* Base palette from root styles */
  --primary-color: #2c1810;
  --secondary-color: #8b5a3c;
  --accent-color: #d4af37;
  --background-light: #faf8f5;
  --background-white: #ffffff;
  --border-light: rgba(44, 24, 16, 0.12);
  --shadow-soft: 0 8px 32px rgba(44,24,16,0.10);
  --shadow-hard: 0 16px 48px rgba(44,24,16,0.18);
  --gradient-primary: linear-gradient(135deg,#2c1810,#8b5a3c);
  --gradient-secondary: linear-gradient(135deg,#d4af37,#f4d03f);
  /* Component radii and transitions */
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --transition: 0.3s cubic-bezier(.4,.0,.2,1);
  /* Panels */
  --panel-bg: var(--background-white);
  /* Fixed card sizing (defaults) */
  --card-w: 250px;
  --card-h: 300px;
  --img-h: 160px;
  font-family: 'Noto Sans KR', sans-serif;
}

html,body {height:100%;margin:0;padding:0;}
body {background:var(--background-light);color:var(--primary-color);overflow:hidden;}

.kiosk-shell {max-width:960px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;}

/* Loading */
.loading-screen {position:fixed;inset:0;background:var(--background-light);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;visibility:hidden;transition:var(--transition);} 
.loading-screen.active {opacity:1;visibility:visible;}
.loading-inner {text-align:center;color:var(--primary-color);animation:fadeIn .6s ease;}
.loading-logo {width:120px;height:120px;border-radius:50%;background:rgba(139,90,60,0.12);display:flex;align-items:center;justify-content:center;font-size:58px;margin:0 auto 24px;backdrop-filter:blur(4px);animation:pulse 2.5s infinite;color:var(--secondary-color);} 
.progress-wrap {width:240px;height:8px;background:rgba(44,24,16,0.12);border-radius:4px;margin:24px auto 12px;overflow:hidden;}
.progress-bar {height:100%;width:0;background:var(--gradient-secondary);animation:progressAnim 2.4s ease forwards;}
.loading-text {font-weight:400;letter-spacing:.3px;color:var(--secondary-color);} 

@keyframes pulse {0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes progressAnim {0%{width:0}100%{width:100%}}
@keyframes fadeIn {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Header */
.kiosk-header {display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:var(--panel-bg);border-radius:0 0 var(--radius-xl) var(--radius-xl);box-shadow:var(--shadow-soft);} 
.brand {display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:#fff;cursor:pointer;background:var(--gradient-primary);padding:8px 16px;border-radius:48px;box-shadow:0 4px 14px rgba(44,24,16,.18);} 
.brand i {font-size:30px;}
.store-info {display:flex;align-items:center;gap:12px;}
.store-name {background:rgba(139,90,60,.12);padding:6px 12px;border-radius:16px;color:var(--secondary-color);font-weight:700;font-size:13px;} 
.clock {font-weight:800;font-size:16px;color:var(--primary-color);letter-spacing:.5px;} 

/* Screens */
.screens {flex:1;position:relative;overflow:hidden;padding:18px;}
.screen {position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateX(40px);transition:var(--transition);display:flex;}
.screen.active {opacity:1;pointer-events:auto;transform:translateX(0);}

/* Welcome */
.welcome-wrapper {margin:auto;background:var(--panel-bg);backdrop-filter:blur(14px);padding:58px 56px;border-radius:40px;box-shadow:var(--shadow-soft);text-align:center;max-width:760px;width:100%;animation:fadeIn .6s ease;}
.welcome-title {font-size:56px;font-weight:900;color:var(--primary-color);margin:0 0 12px;}
.welcome-sub {font-size:22px;font-weight:400;color:#555;margin:0 0 42px;}
.order-type-grid {display:flex;gap:36px;justify-content:center;flex-wrap:wrap;}
.order-type-card {background:#fff;border:1px solid var(--border-light);padding:38px 34px;width:300px;border-radius:32px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;box-shadow:0 8px 28px rgba(44,24,16,.08);transition:var(--transition);} 
.order-type-card:hover {transform:translateY(-10px);box-shadow:var(--shadow-hard);}
.order-type-card h3 {font-size:24px;margin:0;font-weight:800;color:var(--primary-color);} 
.order-type-card p {margin:0;font-size:15px;color:#6b5b5b;font-weight:400;} 
.icon-circle {width:92px;height:92px;border-radius:50%;background:var(--gradient-secondary);display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-size:46px;box-shadow:0 10px 26px rgba(44,24,16,.15);} 

/* Menu Layout */
.menu-topbar{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.scroll-row{display:flex;gap:10px;overflow:auto;padding:4px 2px}
.scroll-row::-webkit-scrollbar{height:8px}
.scroll-row::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#2196F3,#21CBF3);border-radius:8px}
.category-btn, .filter-btn {background:#fff;border:2px solid #e0f0ff;padding:10px 14px;border-radius:18px;cursor:pointer;font-size:14px;font-weight:600;color:#1c4774;display:flex;align-items:center;gap:8px;transition:var(--transition);white-space:nowrap}
.category-btn.active,.filter-btn.active {background:linear-gradient(90deg,#2196F3,#21CBF3);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(33,150,243,.4);} 
.category-btn:hover,.filter-btn:hover {transform:translateY(-3px);} 

.menu-area {flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--panel-bg);border-radius:28px;padding:20px 18px 24px;box-shadow:var(--shadow-soft);backdrop-filter:blur(10px);} /* overflow hidden to confine scroll to grid */
.menu-area.full{height:100%}
.menu-header-row {display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.menu-header-row h2 {margin:0;font-size:34px;font-weight:800;color:var(--primary-color);} 
.menu-header-row h2 {margin:0;font-size:40px;font-weight:800;color:var(--primary-color);}
.view-toggles {display:flex;gap:10px;}
.toggle-btn {width:46px;height:46px;border-radius:16px;border:2px solid var(--border-light);background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--secondary-color);cursor:pointer;transition:var(--transition);} 
.toggle-btn.active {background:var(--gradient-primary);color:#fff;border-color:transparent;}
.toggle-btn:hover {transform:translateY(-3px);}

.menu-grid {display:grid;grid-template-columns:repeat(auto-fill,var(--card-w));gap:18px;justify-content:flex-start;overflow-y:auto;padding:8px 10px 90px 4px;flex:1;min-height:0;} /* fixed card width with horizontal fill */
@media (min-width:1100px){ :root { --card-w: 240px; --card-h: 290px; --img-h: 150px; } }
@media (max-width:820px){ :root { --card-w: 220px; --card-h: 290px; --img-h: 145px; } }
@media (max-width:560px){ :root { --card-w: 180px; --card-h: 270px; --img-h: 130px; } }
.menu-grid.list {display:flex;flex-direction:column;}
.menu-item {background:#fff;border-radius:20px;box-shadow:0 6px 22px rgba(44,24,16,.08);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:var(--transition);position:relative;border:1px solid var(--border-light);width:var(--card-w);height:var(--card-h);} 
.menu-item:hover {transform:translateY(-6px);box-shadow:var(--shadow-hard);}
/* Compact card layout with full image visible (contain) */
.menu-thumb {height:var(--img-h);width:100%;display:flex;align-items:center;justify-content:center;background:#f3ede6;border-bottom:1px solid var(--border-light);}
.menu-thumb img {width:100%;height:100%;object-fit:contain;padding:6px;transition:var(--transition);background:linear-gradient(to bottom,#ffffff,#f8f3ee);} 
.menu-item:hover .menu-thumb img {transform:scale(1.02);}    
.menu-body {padding:10px 12px 10px;display:flex;flex-direction:column;gap:6px;flex:1;}
.menu-title {font-size:15px;font-weight:800;color:var(--primary-color);margin:0;line-height:1.25;} /* slightly smaller to fit at 100% zoom */
.menu-desc {font-size:11px;color:#6b5b5b;line-height:1.35;min-height:2.1em;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-clamp:2;} /* tighten description */
.price-row {display:flex;justify-content:space-between;align-items:center;margin-top:auto;}
.menu-price {font-size:14px;font-weight:900;color:var(--secondary-color);} 
.quick-add {background:var(--accent-color);border:none;color:var(--primary-color);padding:6px 10px;border-radius:10px;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(212,175,55,.30);transition:var(--transition);} 
.quick-add:hover {transform:translateY(-3px);filter:brightness(0.95);}
.quick-add:hover {transform:translateY(-3px);}
.badge-pop {position:absolute;top:14px;left:14px;background:var(--gradient-secondary);color:var(--primary-color);padding:6px 12px;border-radius:18px;font-size:11px;font-weight:800;letter-spacing:.5px;animation:popPulse 2.5s infinite;}
.badge-pop {position:absolute;top:14px;left:14px;background:var(--accent-color);color:var(--primary-color);padding:6px 12px;border-radius:18px;font-size:11px;font-weight:900;letter-spacing:.5px;animation:popPulse 2.5s infinite;}
/* Price badge (always visible) */
.price-badge {position:absolute;top:14px;right:14px;background:#ffffffd9;color:var(--secondary-color);backdrop-filter:blur(4px);border:1px solid var(--border-light);padding:6px 10px;border-radius:14px;font-size:12px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.08);} 
@keyframes popPulse {0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Cart */
.cart-wrapper {background:var(--panel-bg);flex:1;border-radius:32px;padding:34px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-light);} 
.cart-wrapper h2 {margin:0 0 24px;font-size:32px;font-weight:800;color:var(--primary-color);} 
.cart-items {flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:6px;}
.cart-item {display:flex;gap:16px;background:#fff;padding:16px 18px;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,.08);align-items:center;transition:var(--transition);}
.cart-item:hover {transform:translateY(-4px);box-shadow:0 10px 26px rgba(33,150,243,.25);}
.cart-thumb {width:72px;height:72px;border-radius:18px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.12);}
.cart-thumb img {width:100%;height:100%;object-fit:cover;}
.cart-info {flex:1;display:flex;flex-direction:column;gap:4px;}
.cart-name {font-size:16px;font-weight:700;color:#1c4774;}
.cart-options {font-size:12px;color:#666;}
.cart-price {font-size:16px;font-weight:800;color:var(--secondary-color);} 
.cart-controls {display:flex;align-items:center;gap:8px;}
.qty-btn {width:34px;height:34px;border-radius:50%;border:2px solid #2196F3;background:#fff;color:#2196F3;font-weight:700;cursor:pointer;transition:var(--transition);}
.qty-btn:hover {background:#2196F3;color:#fff;}
.remove-btn {background:#ff6b6b;color:#fff;border:none;width:34px;height:34px;border-radius:12px;font-weight:700;cursor:pointer;}
.empty-state {display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:40px;color:#666;gap:18px;}
.empty-state i {font-size:64px;opacity:.35;}
.hidden {display:none !important;}
.cart-summary {margin-top:24px;display:flex;flex-direction:column;gap:12px;background:#fff;padding:24px;border-radius:24px;box-shadow:0 6px 18px rgba(0,0,0,.12);}
.summary-line {display:flex;justify-content:space-between;font-size:15px;font-weight:600;color:#1c4774;}
.summary-line.total {font-size:18px;}
.w100 {width:100%;}
.mt-sm {margin-top:10px;}

/* Payment */
.payment-wrapper {background:var(--panel-bg);flex:1;border-radius:32px;padding:34px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-light);} 
.payment-wrapper h2 {margin:0 0 24px;font-size:32px;font-weight:800;color:var(--primary-color);} 
.payment-items {flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:6px;margin-bottom:18px;}
.pay-item {display:flex;justify-content:space-between;background:#fff;padding:14px 16px;border-radius:18px;font-size:14px;color:#1c4774;box-shadow:0 4px 14px rgba(0,0,0,.08);}
.payment-methods {margin-bottom:26px;}
.payment-methods h3 {margin:0 0 14px;font-size:20px;font-weight:700;color:#1c4774;}
.method-grid {display:flex;gap:16px;flex-wrap:wrap;}
.method-card {flex:1;min-width:140px;background:#fff;border:2px solid #e0f0ff;border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;color:#1c4774;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:0 4px 12px rgba(0,0,0,.08);}
.method-card i {font-size:32px;color:var(--secondary-color);} 
.method-card:hover, .method-card.selected {background:var(--gradient-primary);color:#fff;border-color:transparent;}
.method-card.selected i {color:#fff;}
.total-pay-box {display:flex;justify-content:space-between;align-items:center;background:#fff;padding:20px 24px;border-radius:22px;font-size:18px;font-weight:700;color:#1c4774;box-shadow:0 4px 14px rgba(0,0,0,.1);margin-bottom:18px;}

/* Complete */
.complete-wrapper {margin:auto;background:var(--panel-bg);padding:60px 56px;border-radius:42px;text-align:center;box-shadow:var(--shadow-soft);animation:fadeIn .6s ease;border:1px solid var(--border-light);} 
.complete-icon {font-size:100px;color:#4caf50;animation:popPulse 2.8s infinite;margin-bottom:10px;}
.complete-wrapper h2 {margin:0 0 14px;font-size:36px;font-weight:800;color:var(--primary-color);} 
.order-number,.wait-time {margin:6px 0;font-size:16px;color:#1c4774;font-weight:500;}
.mt {margin-top:24px;}

/* Bottom Nav */
.bottom-nav {display:flex;gap:10px;background:var(--panel-bg);padding:10px 12px;border-radius:24px 24px 0 0;box-shadow:0 -6px 24px rgba(44,24,16,.08);position:sticky;bottom:0;border-top:1px solid var(--border-light);} 
.nav-btn {flex:1;background:transparent;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:16px;color:#1c4774;font-size:11px;font-weight:600;cursor:pointer;transition:var(--transition);position:relative;}
.nav-btn i {font-size:22px;}
.nav-btn.active, .nav-btn:hover:not(:disabled) {background:var(--gradient-primary);color:#fff;box-shadow:0 6px 18px rgba(44,24,16,.20);}    
.nav-btn:disabled {opacity:.35;cursor:not-allowed;}
.badge {position:absolute;top:6px;right:20px;background:var(--gradient-secondary);color:var(--primary-color);padding:4px 8px;border-radius:16px;font-size:10px;font-weight:800;animation:popPulse 2.5s infinite;}

/* Buttons */
.btn-primary {background:var(--gradient-primary);border:none;color:#fff;padding:16px 22px;border-radius:18px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(44,24,16,.20);transition:var(--transition);} 
.btn-primary:hover {transform:translateY(-4px);} 
.btn-outline {background:#fff;border:2px solid var(--secondary-color);color:var(--secondary-color);padding:14px 20px;border-radius:18px;font-size:15px;font-weight:800;cursor:pointer;transition:var(--transition);} 
.btn-outline:hover {background:var(--secondary-color);color:#fff;} 
.btn-ghost {background:transparent;border:2px solid var(--border-light);color:var(--primary-color);padding:14px 20px;border-radius:18px;font-size:15px;font-weight:600;cursor:pointer;transition:var(--transition);} 
.btn-ghost:hover {background:#fff;} 

/* Modal */
.modal {position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.modal.show {display:flex;}
.modal-dialog {background:var(--panel-bg);width:100%;max-width:560px;border-radius:34px;padding:34px 32px;position:relative;box-shadow:var(--shadow-hard);animation:fadeIn .5s ease;border:1px solid var(--border-light);} 
.modal-close {position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:16px;border:none;background:#fff;color:var(--secondary-color);font-size:20px;cursor:pointer;box-shadow:0 4px 14px rgba(44,24,16,.15);} 
.modal-body {display:flex;flex-direction:column;gap:22px;}
.detail-header {display:flex;gap:20px;}
.detail-img {width:160px;height:160px;border-radius:28px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18);} 
.detail-img img {width:100%;height:100%;object-fit:cover;}
.detail-info {flex:1;display:flex;flex-direction:column;gap:8px;}
.detail-info h3 {margin:0;font-size:26px;font-weight:800;color:var(--primary-color);} 
.detail-desc {font-size:14px;color:#555;line-height:1.5;margin:0;}
.detail-base-price {font-size:18px;font-weight:800;color:var(--secondary-color);} 
.option-group {display:flex;flex-direction:column;gap:12px;}
.option-group h4 {margin:0;font-size:16px;font-weight:700;color:#1c4774;}
.choice-row {display:flex;flex-wrap:wrap;gap:10px;}
.choice-btn {background:#fff;border:2px solid var(--border-light);padding:10px 14px;border-radius:16px;font-size:13px;font-weight:700;color:var(--secondary-color);cursor:pointer;transition:var(--transition);} 
.choice-btn.active, .choice-btn:hover {background:var(--gradient-primary);color:#fff;border-color:transparent;} 
.qty-row {display:flex;align-items:center;gap:14px;} 
.qty-row button {width:44px;height:44px;border-radius:16px;border:2px solid var(--secondary-color);background:#fff;color:var(--secondary-color);font-size:20px;font-weight:800;cursor:pointer;transition:var(--transition);} 
.qty-row button:hover {background:var(--secondary-color);color:#fff;} 
.qty-value {font-size:18px;font-weight:800;color:#1c4774;min-width:34px;text-align:center;} 
.modal-total {display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-radius:20px;font-size:18px;font-weight:800;color:var(--primary-color);box-shadow:0 4px 12px rgba(44,24,16,.10);} 
.add-cart-btn {background:var(--gradient-primary);border:none;color:#fff;padding:18px 24px;border-radius:20px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(44,24,16,.20);transition:var(--transition);} 
.add-cart-btn:hover {transform:translateY(-4px);} 

/* Toast */
.toast-container {position:fixed;top:90px;right:24px;display:flex;flex-direction:column;gap:12px;z-index:1100;}
.toast {background:#fff;padding:14px 18px;border-radius:18px;box-shadow:0 6px 22px rgba(0,0,0,.18);display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:#1c4774;opacity:0;transform:translateX(40px);animation:toastIn .5s forwards;}
.toast.success {border-left:6px solid #4caf50;}
.toast.error {border-left:6px solid #ff5252;}
.toast i {font-size:18px;}
@keyframes toastIn {to {opacity:1;transform:translateX(0);}}

/* Processing Overlay */
.processing {position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1200;}
.processing.hidden {display:none;}
.processing-box {background:var(--panel-bg);backdrop-filter:blur(10px);padding:40px 46px;border-radius:34px;box-shadow:var(--shadow-hard);text-align:center;display:flex;flex-direction:column;gap:20px;}
.processing-box p {margin:0;font-size:18px;font-weight:600;color:#1c4774;}
.spinner {width:70px;height:70px;border:8px solid rgba(33,150,243,.25);border-top-color:#2196F3;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto;}
@keyframes spin {to {transform:rotate(360deg);}}

/* Scrollbar */
.menu-grid::-webkit-scrollbar, .cart-items::-webkit-scrollbar, .payment-items::-webkit-scrollbar {width:10px;} 
.menu-grid::-webkit-scrollbar-track {background:rgba(255,255,255,.4);border-radius:10px;} 
.menu-grid::-webkit-scrollbar-thumb {background:linear-gradient(135deg,#2196F3,#21CBF3);border-radius:10px;} 

/* Responsive */
@media (max-width:1020px){.kiosk-header{border-radius:0}.kiosk-shell{max-width:100%}}
@media (max-width:860px){
  .menu-layout{flex-direction:column}
  .category-panel{width:100%;flex-direction:row;flex-wrap:wrap;gap:10px}
  .panel-title{flex:1 1 100%;}
  .menu-area{padding:20px}
  .welcome-wrapper{padding:46px 36px}
}
@media (max-width:640px){
  .welcome-title{font-size:42px}
  .order-type-card{width:100%;}
  .menu-header-row h2{font-size:26px}
  .kiosk-header{padding:18px 20px}
}
@media (max-width:480px){
  .brand{padding:10px 18px;font-size:20px}
  .welcome-wrapper{padding:38px 28px;border-radius:32px}
  .welcome-title{font-size:36px}
  .order-type-card{padding:30px 26px}
  .icon-circle{width:78px;height:78px;font-size:38px}
  .bottom-nav{padding:12px 12px}
  .nav-btn i{font-size:19px}
  /* Move toasts to bottom on small screens */
  .toast-container{top:auto;bottom:20px;right:16px}
}