/* ─── PREMIUM COFFEE DESIGN SYSTEM ─── */
:root {
  --primary: #5c4033;         /* Deep Rich Espresso */
  --primary-light: #8c624c;   /* Warm Latte */
  --primary-dark: #3d2a21;    /* Roasted Bean */
  --primary-glow: rgba(92, 64, 51, 0.15);
  
  --accent: #c49a6c;          /* Muted Gold / Caramel */
  --accent-light: #f5efe6;    /* Warm Milk / Cream */
  --accent-dark: #a1784c;     /* Dark Caramel */
  
  --text-main: #2b221e;       /* Warm Charcoal */
  --text-muted: #8a7b75;      /* Soft Earthy Gray */
  --bg-color: #faf8f5;        /* Premium Off-White */
  
  --card-bg: rgba(255, 255, 255, 0.85);
  --border-color: rgba(212, 197, 187, 0.5);
  --border-glass: 1px solid rgba(255, 255, 255, 0.6);
  
  --shadow-sm: 0 4px 12px rgba(92, 64, 51, 0.03);
  --shadow-md: 0 8px 24px rgba(92, 64, 51, 0.06);
  --shadow-lg: 0 16px 40px rgba(92, 64, 51, 0.1);
  --shadow-glow: 0 4px 20px rgba(196, 154, 108, 0.25);
  
  --logo: url("data:image/png;base64,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");
}

/* ─── RESET & BASIC ─── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/* Custom Premium Coffee-Themed Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Firefox scrollbar support */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-light) var(--bg-color);
}

body {
  background: #f0eae1;
  color: var(--text-main);
  line-height: 1.6;
  font-family: 'Kanit', sans-serif;
}

.phone-viewport {
  max-width: 412px;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg-color);
  box-shadow: 0 12px 50px rgba(92, 64, 51, 0.15);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  border-left: 1px solid rgba(92, 64, 51, 0.05);
  border-right: 1px solid rgba(92, 64, 51, 0.05);
}

@media (max-width: 412px) {
  .phone-viewport {
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
}

body, input, select, button, textarea {
  font-family: 'Kanit', sans-serif;
}

/* ─── BASE SCREEN WRAPPER ─── */
.screen {
  display: none;
  opacity: 0;
}

.screen.active {
  display: block;
  animation: screenSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes screenSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.auth-wrap {
  width: 100%;
  max-width: 100%;
  padding: 3rem 1.5rem 6rem;
}

.page-wrap {
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.25rem 7.5rem;
}

/* ─── HERO & LOGO ─── */
.auth-hero {
  text-align: center;
  padding: 1rem 0 2rem;
}

.logo-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--logo) center/cover;
  border: 4px solid #fff;
  box-shadow: var(--shadow-glow), var(--shadow-lg);
  margin: 0 auto 18px;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-circle:hover {
  transform: rotate(360deg) scale(1.05);
}

.auth-app-name {
  font-size: 24px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.5px;
}

.auth-app-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 3px;
}

/* ─── PREMIUM CARD ─── */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--border-glass);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card-tight {
  padding: 16px 20px;
}

.slabel {
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-light);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}

/* ─── MODERN FORM ELEMENTS ─── */
.fg-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.fg-row .fg {
  flex: 1;
  margin-bottom: 0;
}

.fg {
  margin-bottom: 16px;
  position: relative;
}

.fg:last-child {
  margin-bottom: 0;
}

.fg label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-left: 2px;
  letter-spacing: 0.5px;
}

.fg input, .fg select {
  width: 100%;
  height: 48px;
  border: 1.5px solid rgba(139, 94, 60, 0.15);
  border-radius: 14px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(92, 64, 51, 0.02);
  -webkit-appearance: none;
  appearance: none;
}

.fg input:focus, .fg select:focus {
  border-color: var(--gold, #d4af37);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15), 0 4px 12px rgba(212, 175, 55, 0.08);
  transform: scale(1.01);
}

.fg select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235c4033' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* ─── BUTTONS ─── */
.btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  box-shadow: 0 6px 20px rgba(92, 64, 51, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 8px 25px rgba(92, 64, 51, 0.35);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-outline {
  background: #fff;
  border: 1.5px solid var(--border-color);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.btn-outline:hover {
  background: var(--bg-color);
  border-color: var(--primary-light);
}

.btn-sm {
  height: 40px;
  font-size: 13px;
  width: auto;
  padding: 0 18px;
}

/* ─── OR DIVIDER ─── */
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.25rem 0;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 300;
}

.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* ─── PREMIUM MEMBER HERO ─── */
.member-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 22px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--shadow-lg), 0 8px 30px rgba(92, 64, 51, 0.25);
}

.member-hero::before {
  content: 'π';
  position: absolute;
  right: -5px;
  top: -25px;
  font-size: 140px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.05);
  line-height: 1;
  pointer-events: none;
}

.mh-greeting {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
}

.mh-nick {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mh-fullname {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2px;
}

.mh-dept {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

.mh-week {
  font-size: 12px;
  font-weight: 400;
  color: var(--accent);
  margin-top: 14px;
  letter-spacing: 0.5px;
}

.slots-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.slot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slot-avail {
  background: rgba(139, 94, 60, 0.06);
  border: 1.5px solid rgba(139, 94, 60, 0.2);
  color: var(--primary);
  box-shadow: 0 2px 6px rgba(139, 94, 60, 0.04);
}

.slot-used {
  background: rgba(92, 64, 51, 0.12);
  border: 1.5px solid rgba(92, 64, 51, 0.08);
  color: rgba(92, 64, 51, 0.3);
  filter: grayscale(1);
  opacity: 0.55;
}

.slot-bday-avail {
  background: rgba(212, 175, 55, 0.1);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  color: var(--gold, #d4af37);
  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.15);
  animation: quotaPulse 2s infinite ease-in-out;
}

.slot-bday-used {
  background: rgba(212, 175, 55, 0.04);
  border: 1.5px solid rgba(212, 175, 55, 0.15);
  color: rgba(212, 175, 55, 0.3);
  opacity: 0.5;
}

@keyframes quotaPulse {
  0% { transform: scale(1); box-shadow: 0 4px 10px rgba(212, 175, 55, 0.15); }
  50% { transform: scale(1.05); box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3); }
  100% { transform: scale(1); box-shadow: 0 4px 10px rgba(212, 175, 55, 0.15); }
}

.bday-banner {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-glow);
  animation: slideInDown 0.4s ease;
}

/* ─── POINTS & PROGRESS ─── */
#points-card {
  background: rgba(139, 94, 60, 0.04);
  border-radius: 20px;
  padding: 14px 16px;
  border: 1px dashed rgba(212, 175, 55, 0.4);
  margin-top: 16px;
}

/* ─── PAY TYPE CARDS ─── */
.pay-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pay-grid::-webkit-scrollbar {
  display: none;
}

.pay-card {
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  padding: 14px 12px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  position: relative;
  flex-shrink: 0;
  min-width: 104px;
  box-shadow: var(--shadow-sm);
}

.pay-card:active {
  transform: scale(0.95);
}

.pay-card .pc-icon {
  font-size: 22px;
  display: block;
  margin-bottom: 6px;
  transition: transform 0.2s ease;
}

.pay-card:hover .pc-icon {
  transform: scale(1.15);
}

.pay-card .pc-label {
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
  color: var(--text-main);
}

.pay-card .pc-sub {
  font-size: 10px;
  font-weight: 300;
  color: var(--text-muted);
  display: block;
  line-height: 1.4;
}

/* Active Pay Card States */
.pay-card.active-normal {
  border-color: var(--primary);
  background: #faf5f2;
  box-shadow: 0 4px 15px var(--primary-glow);
}
.pay-card.active-normal .pc-label { color: var(--primary); }

.pay-card.active-bday {
  border-color: var(--accent);
  background: #fdfaf5;
  box-shadow: 0 4px 15px rgba(196, 154, 108, 0.15);
}
.pay-card.active-bday .pc-label { color: var(--accent-dark); }

.pay-card.active-full {
  border-color: #333;
  background: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.pay-card.active-full .pc-label { color: #111; }

.pay-card.active-monthly {
  border-color: #5c4b8c;
  background: #f7f5fb;
  box-shadow: 0 4px 15px rgba(92, 75, 140, 0.12);
}
.pay-card.active-monthly .pc-label { color: #5c4b8c; }

.pay-card.disabled-card {
  opacity: 0.65;
  background: #fbfaf8;
  border-color: #e5dfd8;
  cursor: not-allowed;
  pointer-events: none;
}

.pay-card.disabled-card .pc-icon {
  filter: grayscale(100%);
  opacity: 0.5;
}

.pay-card.disabled-card .pc-label {
  color: var(--text-muted);
}

.pay-card.disabled-card .pc-sub {
  color: #bfa89c;
}

.check-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  display: none;
  align-items: center;
  justify-content: center;
  animation: scaleUp 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pay-card[class*="active-"] .check-badge {
  display: flex;
}
.pay-card.active-bday .check-badge { background: var(--accent); }
.pay-card.active-full .check-badge { background: #333; }
.pay-card.active-monthly .check-badge { background: #5c4b8c; }

.check-badge svg {
  width: 9px;
  height: 9px;
  fill: #fff;
}

/* ─── PAGE NAVIGATION ROW ─── */
.back-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  background: transparent;
}

.page-title {
  font-size: 19px;
  font-weight: 500;
  color: var(--primary-dark);
}

/* ─── INFO BANNER ─── */
.week-info {
  font-size: 13px;
  font-weight: 400;
  color: var(--primary);
  background: var(--accent-light);
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 14px;
  border-left: 4px solid var(--accent);
}

/* ─── MENU TABS ─── */
.tab-bar {
  display: flex;
  overflow-x: auto;
  padding: 12px 14px 0;
  background: #fff;
  border-bottom: 1.5px solid var(--border-color);
  scrollbar-width: none;
  gap: 8px;
}

.tab-bar::-webkit-scrollbar {
  display: none;
}

.tab {
  flex-shrink: 0;
  padding: 8px 18px 12px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: all 0.25s ease;
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
}

/* ─── MENU ITEMS ─── */
.menu-item {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid rgba(92, 64, 51, 0.08);
  cursor: pointer;
  background: #fff;
  transition: background 0.2s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background: rgba(245, 239, 230, 0.2);
}

.menu-item.selected {
  background: rgba(245, 239, 230, 0.45);
}

.menu-item-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.mi-thumb {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.mi-thumb-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  flex-shrink: 0;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--primary-light);
  border: 1px solid var(--border-color);
}

.mi-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.mi-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.4;
  word-break: break-word;
}

.mi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-top: 6px;
}

.menu-item.selected .mi-name {
  color: var(--primary-dark);
}

.menu-item.selected .mi-dot {
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}

.mi-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}

.tag-free {
  background: var(--accent-light);
  color: var(--primary);
}

.tag-extra {
  background: var(--gold-light);
  color: var(--accent-dark);
}

.tag-full {
  background: #f2f2f2;
  color: #666;
}

/* ─── MODERNIZE CHIPS ─── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chip {
  padding: 8px 16px;
  border-radius: 24px;
  border: 1.5px solid var(--border-color);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
}

.chip:hover {
  border-color: var(--primary-light);
  color: var(--primary);
}

.chip.sel {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 4px 10px var(--primary-glow);
}

.choose-chip {
  padding: 6px 14px;
  border-radius: 18px;
  border: 1.2px solid var(--border-color);
  font-size: 12px;
  font-weight: 300;
  cursor: pointer;
  color: var(--text-muted);
  background: #fff;
  transition: all 0.2s ease;
}

.choose-chip.sel {
  border-color: var(--primary);
  background: rgba(92, 64, 51, 0.08);
  color: var(--primary);
  font-weight: 500;
}

/* ─── CHECKOUT SECTION ─── */
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.price-row .pk {
  font-weight: 300;
  color: var(--text-muted);
}

.price-row .pv {
  font-weight: 500;
  color: var(--text-main);
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 2px;
}

.total-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

.total-amount {
  font-size: 28px;
  font-weight: 600;
  color: var(--primary);
}

.total-amount.extra {
  color: var(--accent-dark);
}

.total-amount.full {
  color: #111;
}

.divider {
  border: none;
  border-top: 1.5px solid var(--border-color);
  margin: 12px 0;
}

/* ─── ADD TO CART FLOATING ACTION ─── */
.add-to-cart-btn {
  width: 100%;
  height: 52px;
  background: var(--primary);
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  margin-top: 14px;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px var(--primary-glow);
}

.add-to-cart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--primary-glow);
}

.add-to-cart-btn.bread-btn {
  background: #c0763c;
  box-shadow: 0 6px 18px rgba(192, 118, 60, 0.25);
}

.add-to-cart-btn.bread-btn:hover {
  box-shadow: 0 8px 22px rgba(192, 118, 60, 0.35);
}

/* ─── CART SYSTEM & LIST ─── */
.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1.5px dashed var(--border-color);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 4px;
}

.cart-item-sub {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
}

.cart-item-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.cart-item-del {
  width: 32px;
  height: 32px;
  border: none;
  background: #fff5f5;
  border-radius: 50%;
  font-size: 14px;
  color: #d9534f;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cart-item-del:hover {
  background: #d9534f;
  color: #fff;
  transform: rotate(90deg);
}

.cart-type-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 6px;
  font-weight: 400;
}

/* ─── SUCCESS SCREEN ─── */
.success-wrap {
  text-align: center;
  padding: 2.5rem 1rem 1rem;
}

.success-circle {
  width: 80px;
  height: 80px;
  background: var(--accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 36px;
  color: var(--primary);
  box-shadow: var(--shadow-md);
  border: 2px solid #fff;
}

.success-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.success-sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
  white-space: pre-line;
  margin-bottom: 2rem;
}

/* ─── ORDER HISTORY LIST ─── */
.hist-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(92, 64, 51, 0.08);
}

.hist-item:last-child {
  border-bottom: none;
}

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

.hist-name {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.hist-meta {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
}

/* ─── LOADING SPINNER ─── */
.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  padding: 10px 0;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(92, 64, 51, 0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── SHIMMER SKELETON ─── */
.skeleton {
  background: linear-gradient(90deg, rgba(92, 64, 51, 0.05) 25%, rgba(92, 64, 51, 0.1) 50%, rgba(92, 64, 51, 0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─── MODERN TOAST NOTIFICATION ─── */
.toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: rgba(43, 34, 30, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  padding: 12px 24px;
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 9999;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ─── FLOATING BOTTOM NAVIGATION ─── */
.bottom-nav {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 380px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 36px;
  box-shadow: 0 12px 32px rgba(92, 64, 51, 0.12);
  display: flex;
  z-index: 1000;
  padding: 6px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  height: 66px;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 4px 2px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-muted);
  transition: all 0.25s ease;
  position: relative;
  border-radius: 24px;
}

.nav-item.active {
  color: var(--primary);
}

.nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  border-radius: 18px;
  transition: background 0.25s ease;
  position: relative;
}

.nav-item.active .nav-icon-wrap {
  background: rgba(92, 64, 51, 0.08);
}

/* Central Floating Action Button (FAB) */
#nav-order.nav-item {
  position: relative;
  z-index: 1010;
}

#nav-order .nav-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #5c4033) 0%, var(--primary-dark, #3d2a21) 100%) !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(92, 64, 51, 0.3);
  border: 3px solid #fff;
  transform: translateY(-15px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#nav-order.nav-item.active .nav-icon-wrap {
  background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%) !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.4), 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
}

#nav-order:hover .nav-icon-wrap {
  transform: translateY(-19px) scale(1.06);
  box-shadow: 0 8px 22px rgba(92, 64, 51, 0.4);
}

#nav-order:active .nav-icon-wrap {
  transform: translateY(-13px) scale(0.96);
}

#nav-order .nav-label {
  position: absolute;
  bottom: 4px;
  font-size: 11px;
}

.nav-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.nav-label {
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}

/* Subtle logout link style */
.btn-logout-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  font-family: 'Kanit', sans-serif;
  padding: 4px 12px;
}

.btn-logout-link:hover {
  opacity: 1;
}

.nav-cart-badge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  background: #E74C3C;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 1.5px solid #fff;
}

.nav-cart-badge.show {
  display: flex;
}

/* ─── MODAL CONFIRM OVERLAY ─── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 34, 30, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.confirm-overlay.show {
  display: flex;
}

.confirm-sheet {
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 1.5rem 1.25rem 2.25rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirm-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--primary-dark);
  margin-bottom: 1.25rem;
  text-align: center;
}

.confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(92, 64, 51, 0.08);
  font-size: 13px;
}

.confirm-row:last-of-type {
  border-bottom: none;
}

.confirm-row .ck {
  color: var(--text-muted);
  font-weight: 300;
}

.confirm-row .cv {
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  color: var(--text-main);
}

.confirm-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--primary-dark);
}

.confirm-btns {
  display: flex;
  gap: 12px;
  margin-top: 1.5rem;
}

.confirm-btn-cancel {
  flex: 1;
  height: 48px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.confirm-btn-cancel:hover {
  background: var(--bg-color);
  color: var(--text-main);
}

.confirm-btn-ok {
  flex: 2;
  height: 48px;
  background: var(--primary);
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 4px 12px var(--primary-glow);
  transition: all 0.2s ease;
}

.confirm-btn-ok:hover {
  box-shadow: 0 6px 18px var(--primary-glow);
}

/* ─── MISC ─── */
.err {
  font-size: 13px;
  color: #c0392b;
  margin-top: 8px;
  font-weight: 400;
  padding-left: 2px;
}

.fab-home, .cart-fab {
  display: none !important;
}

/* Animations */
@keyframes scaleUp {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

/* ─── CUTE COFFEE ANIMATION LOADER ─── */
.cute-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 1.5rem;
  width: 100%;
}

.cute-coffee-cup {
  width: 44px;
  height: 34px;
  border: 3.5px solid var(--primary, #5c4033);
  border-radius: 2px 2px 14px 14px;
  position: relative;
  animation: cup-wiggle 1.2s ease-in-out infinite;
  background: transparent;
}

/* หูแก้ว */
.cute-coffee-cup::after {
  content: '';
  position: absolute;
  top: 4px;
  right: -10px;
  width: 8px;
  height: 14px;
  border: 3.5px solid var(--primary, #5c4033);
  border-left: none;
  border-radius: 0 8px 8px 0;
}

/* จานรองแก้ว */
.cute-coffee-cup::before {
  content: '';
  position: absolute;
  bottom: -6.5px;
  left: -7px;
  width: 58px;
  height: 3.5px;
  background: var(--primary, #5c4033);
  border-radius: 4px;
}

/* ไอกาแฟลอยล่อง */
.cute-steam-wrap {
  display: flex;
  gap: 5px;
  position: absolute;
  top: -18px;
  left: 9px;
}

.cute-steam {
  width: 3.5px;
  height: 14px;
  background: var(--accent, #c49a6c);
  border-radius: 3px;
  animation: steam-rise-animation 1.6s ease-in-out infinite;
  opacity: 0;
}

.cute-steam:nth-child(2) {
  animation-delay: 0.35s;
}

.cute-steam:nth-child(3) {
  animation-delay: 0.7s;
}

.cute-loader-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #8a7b75);
  animation: text-pulse 1.5s ease-in-out infinite;
}

/* Keyframes */
@keyframes cup-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-6deg) translateY(-2px); }
  75% { transform: rotate(6deg) translateY(-1px); }
}

@keyframes steam-rise-animation {
  0% { transform: translateY(8px) scaleY(0.4); opacity: 0; }
  45% { opacity: 0.9; }
  100% { transform: translateY(-10px) scaleY(1.3); opacity: 0; }
}

@keyframes text-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ─── STEPPER UI STYLE ─── */
.stepper-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 16px;
  background: #fff;
  padding: 14px 16px;
  border-radius: 16px;
  box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.04));
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #8c7365);
  font-weight: 300;
  transition: all 0.3s ease;
  position: relative;
  flex: 1;
}

.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-cream-dark, #ede3d8);
  color: var(--text-muted, #8c7365);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.step-item.active {
  color: var(--primary, #5c4033);
  font-weight: 500;
}

.step-item.active .step-dot {
  background: var(--primary, #5c4033);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(92, 64, 51, 0.15);
}

.step-item.completed {
  color: var(--green, #2d7a4f);
}

.step-item.completed .step-dot {
  background: var(--green, #2d7a4f);
  color: #fff;
}

.step-line {
  height: 2px;
  background: var(--bg-cream-dark, #ede3d8);
  flex: 1;
  margin: 0 -8px;
  margin-top: -16px;
  transition: all 0.3s ease;
}

.step-line.active {
  background: var(--primary, #5c4033);
}

.step-line.completed {
  background: var(--green, #2d7a4f);
}

/* Stepper Navigation Buttons */
.stepper-nav {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.btn-step {
  flex: 1;
  height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Kanit', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── DIGITAL RECEIPT STYLE ─── */
.digital-receipt {
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px;
  border: 1px solid var(--border, #ddd0c0);
  border-bottom: none;
  box-shadow: 0 8px 24px rgba(92, 64, 51, 0.05);
  position: relative;
  margin-top: 12px;
}

.digital-receipt::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -1px;
  right: -1px;
  height: 10px;
  background-image: linear-gradient(-45deg, transparent 4px, #fff 4px), linear-gradient(45deg, transparent 4px, #fff 4px);
  background-size: 10px 10px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 2px rgba(92, 64, 51, 0.04));
  z-index: 10;
}

.receipt-header {
  text-align: center;
  border-bottom: 1.5px dashed var(--border, #ddd0c0);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.receipt-logo {
  font-size: 32px;
  margin-bottom: 6px;
}

.receipt-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--primary, #5c4033);
}

.receipt-time-box {
  background: var(--bg-cream, #faf6f0);
  border: 1px solid var(--border, #ddd0c0);
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  color: var(--primary, #5c4033);
  font-weight: 500;
  margin: 10px 0 0;
  display: inline-block;
}

.receipt-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  color: var(--text-main, #2b1d16);
}

.receipt-item-name {
  font-weight: 500;
  max-width: 70%;
  text-align: left;
}

.receipt-item-price {
  font-weight: 500;
  color: var(--primary, #5c4033);
}

.receipt-total-section {
  border-top: 1.5px dashed var(--border, #ddd0c0);
  margin-top: 14px;
  padding-top: 14px;
}

.receipt-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.receipt-total-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted, #8c7365);
}

.receipt-total-amount {
  font-size: 22px;
  font-weight: 600;
  color: var(--green, #2d7a4f);
}

.receipt-total-amount.extra {
  color: var(--gold, #b07a10);
}

/* ─── ACTIVE ORDER BANNER STYLE ─── */
.active-order-banner {
  background: linear-gradient(135deg, var(--primary, #5c4033), var(--primary-dark, #3d2a21));
  color: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(92,64,51,0.18);
  margin: 12px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  animation: slideInDown 0.4s ease;
}

.active-order-banner::before {
  content: '☕';
  position: absolute;
  right: -10px;
  bottom: -15px;
  font-size: 72px;
  opacity: 0.08;
  transform: rotate(-15deg);
}

.aob-header {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 6px;
}

.aob-pulse-dot {
  width: 6px;
  height: 6px;
  background: #2ecc71;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.4);
  animation: aob-pulse 1.5s infinite;
}

@keyframes aob-pulse {
  0% { box-shadow: 0 0 0 0px rgba(46, 204, 113, 0.6); }
  100% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}

.aob-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.aob-menu {
  font-size: 15px;
  font-weight: 500;
  word-break: break-word;
}

.aob-time {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

.aob-status {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.aob-status.s0 { color: #f39c12; background: rgba(243, 156, 18, 0.2); border-color: rgba(243, 156, 18, 0.3); }
.aob-status.s1 { color: #f1c40f; background: rgba(241, 196, 15, 0.2); border-color: rgba(241, 196, 15, 0.3); }
.aob-status.s2 { color: #2ecc71; background: rgba(46, 204, 113, 0.2); border-color: rgba(46, 204, 113, 0.3); }
.aob-status.s3 { color: #e74c3c; background: rgba(231, 76, 60, 0.2); border-color: rgba(231, 76, 60, 0.3); }

/* Confetti particles */
.confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  z-index: 999999;
  top: -10px;
  border-radius: 50%;
  animation: confetti-fall linear forwards;
}

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

/* ─── USER DASHBOARD STYLE ─── */
.dashboard-stats-grid {
  display: flex;
  gap: 10px;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.02));
  border: 1.5px solid var(--border, #eee9e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--primary, #5c4033);
}

.stat-label {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted, #8c7365);
}

.fav-drink-card {
  border: 1.5px dashed var(--accent, #c49a6c) !important;
  background: linear-gradient(135deg, #fff, #faf6f0) !important;
  box-shadow: 0 4px 15px rgba(196, 154, 108, 0.08) !important;
}

.fav-label {
  font-size: 11px;
  color: var(--accent-dark, #b07a10);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fav-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-dark, #3d2a21);
  margin-top: 2px;
}

.fav-badge {
  font-size: 24px;
  background: var(--accent-light, #fbe9d8);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(196, 154, 108, 0.15);
}

.btn-fav-shortcut {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent, #c49a6c), var(--accent-dark, #b07a10));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Kanit', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(196, 154, 108, 0.25);
  transition: all 0.2s ease;
  animation: fav-pulse 2s infinite;
}

.btn-fav-shortcut:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(196, 154, 108, 0.35);
}

.btn-fav-shortcut:active {
  transform: translateY(1px);
}

@keyframes fav-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ─── FLY TO CART & SHRINK TRANSITION STYLE ─── */
.cart-flyer {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary, #5c4033);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  border: 2px solid #fff;
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center;
}

/* Screen Shrink Transition */
.screen.shrink-out {
  animation: shrinkOut 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes shrinkOut {
  0% { transform: scale(1); opacity: 1; filter: blur(0); }
  100% { transform: scale(0.85); opacity: 0; filter: blur(4px); }
}

/* Bounce Pop effect for Cart Button */
.bounce-pop {
  animation: cartBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes cartBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Option 2: Pulse & Glow for Cart Badge and Icon Wrapper */
.nav-cart-badge.badge-pulse {
  animation: badgeBreathing 1.8s infinite ease-in-out;
}

@keyframes badgeBreathing {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.nav-icon-wrap.cart-glow {
  position: relative;
  animation: iconGlow 2.5s infinite ease-in-out;
}

@keyframes iconGlow {
  0% {
    box-shadow: 0 0 4px rgba(92, 64, 51, 0.1), inset 0 0 0 1px rgba(92, 64, 51, 0.1);
    background: rgba(92, 64, 51, 0.04);
  }
  50% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.65), inset 0 0 0 1px rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.15);
  }
  100% {
    box-shadow: 0 0 4px rgba(92, 64, 51, 0.1), inset 0 0 0 1px rgba(92, 64, 51, 0.1);
    background: rgba(92, 64, 51, 0.04);
  }
}

/* Dynamic Elevation for Cart Button (Combined Option 1 & 2) */
#nav-cart {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease;
}

#nav-cart.cart-elevated {
  transform: translateY(-14px);
}

#nav-cart.cart-elevated .nav-icon-wrap {
  background: var(--primary, #5c4033) !important;
  color: #fff !important;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 8px 24px rgba(92, 64, 51, 0.35);
  border: 2px solid #fff;
  transform: scale(1.05);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#nav-cart.cart-elevated .nav-label {
  color: var(--primary, #5c4033) !important;
  font-weight: 600;
  margin-top: 2px;
}

#nav-cart.cart-elevated .nav-cart-badge {
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  border-width: 2px;
}

/* Update the glow to also be applied to the elevated circular icon wrap */
#nav-cart.cart-elevated .nav-icon-wrap.cart-glow {
  animation: iconGlowElevated 2.5s infinite ease-in-out;
}

@keyframes iconGlowElevated {
  0% {
    box-shadow: 0 8px 24px rgba(92, 64, 51, 0.35);
    border-color: #fff;
  }
  50% {
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.8), 0 0 15px rgba(212, 175, 55, 0.4);
    border-color: rgba(212, 175, 55, 1);
    background: #6d4c3d;
  }
  100% {
    box-shadow: 0 8px 24px rgba(92, 64, 51, 0.35);
    border-color: #fff;
  }
}

/* ==========================================================================
   BARISTA CLUB PREMIUM REDESIGN - v1.2.0
   ========================================================================== */

/* 1. Profile Hero Card */
.member-hero-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 12px 36px rgba(92, 64, 51, 0.08);
  padding: 20px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.member-hero-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.mh-profile-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(92, 64, 51, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(92, 64, 51, 0.1);
  position: relative;
  transition: all 0.3s ease;
}

.avatar-wrap.vip-border {
  border-color: var(--gold, #d4af37) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), 0 6px 16px rgba(92, 64, 51, 0.1) !important;
}

.avatar-icon {
  font-size: 28px;
}

.mh-welcome-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-greeting {
  font-size: 13px;
  color: var(--text-muted, #8b5e3c);
  font-weight: 300;
}

.mh-nick {
  font-size: 22px;
  font-weight: 600;
  color: var(--primary, #5c4033);
  line-height: 1.2;
}

.mh-fullname {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.8;
}

.mh-details-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(92, 64, 51, 0.08);
  padding-top: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.mh-dept {
  font-weight: 500;
}

.mh-bday {
  opacity: 0.9;
}

.mh-slots-section {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(92, 64, 51, 0.05);
}

.mh-week-title {
  font-size: 11px;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 8px;
  text-align: center;
}

.mh-week {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  opacity: 0.9;
}

/* 2. Cafe Loyalty Stamp Section */
.loyalty-stamp-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1.5px dashed rgba(212, 175, 55, 0.35);
  transition: all 0.3s ease;
}

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

.loyalty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.loyalty-pts-summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold, #d4af37);
  background: rgba(212, 175, 55, 0.1);
  padding: 3px 10px;
  border-radius: 12px;
}

.stamp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.stamp-slot {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.stamp-slot.stamp-filled {
  background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 10px rgba(170, 124, 17, 0.35), 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
  animation: stampPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.stamp-slot.stamp-empty {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1.5px dashed rgba(139, 94, 60, 0.28) !important;
  color: rgba(139, 94, 60, 0.3) !important;
}

@keyframes stampPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.loyalty-footer-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loyalty-progress-container {
  height: 6px;
  background: rgba(92, 64, 51, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.loyalty-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4AF37, #AA7C11);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.loyalty-info-msg {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 300;
}

/* 3. Cozy Cup Favorite Drink Card */
.fav-drink-card {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.15);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fav-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fav-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FAF6F0 0%, #eae0d5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 12px rgba(92, 64, 51, 0.06);
}

.fav-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.fav-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  text-transform: uppercase;
}

.fav-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
}

.fav-custom-desc {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 300;
}

.btn-fav-shortcut {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #8B5E3C 0%, #5c4033 100%);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(92, 64, 51, 0.15);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.btn-fav-shortcut:hover, .btn-fav-shortcut:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(92, 64, 51, 0.25);
}

/* 4. Active Order Tracker (Brew-Tracker Redesign) */
.active-order-banner-card {
  background: rgba(92, 64, 51, 0.94);
  color: #fff;
  border-radius: 24px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 10px 30px rgba(92, 64, 51, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}

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

.aob-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.aob-card-time {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 400;
  color: #fff;
}

.aob-card-menu {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aob-tracker-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.aob-tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 2;
  flex: 1;
}

.aob-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.4s ease;
  position: relative;
  color: #fff;
}

.aob-step-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
}

.aob-tracker-line {
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  flex: 1;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  border-radius: 1.5px;
}

/* Tracker Step Active States */
.aob-tracker-step.step-active .aob-step-circle {
  background: var(--gold, #d4af37) !important;
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

.aob-tracker-step.step-active .aob-step-label {
  color: #fff !important;
  font-weight: 500;
}

.aob-tracker-step.step-complete .aob-step-circle {
  background: #2ecc71 !important;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
}

.aob-tracker-step.step-complete .aob-step-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

.aob-tracker-line.line-complete {
  background: #2ecc71 !important;
}

/* Steam Animation for Step 2 */
.coffee-steam-wrap {
  position: absolute;
  top: -12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
}

.aob-tracker-step.step-active .coffee-steam-wrap {
  opacity: 1;
}

.steam-line {
  width: 2px;
  height: 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1px;
  animation: steamRise 1.5s infinite ease-in-out;
}

.steam-line:nth-child(2) {
  animation-delay: 0.4s;
}

@keyframes steamRise {
  0% { transform: translateY(2px) scaleY(0.5); opacity: 0; }
  50% { transform: translateY(-4px) scaleY(1); opacity: 0.8; filter: blur(0.5px); }
  100% { transform: translateY(-8px) scaleY(0.5); opacity: 0; }
}

/* 5. Live Shop Status indicator */
.shop-live-status-wrap {
  position: absolute;
  top: 10px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  z-index: 10;
}

.shop-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #95a5a6;
  position: relative;
}

.shop-status-dot.active-green {
  background: #2ecc71 !important;
}

.shop-status-dot.active-green::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #2ecc71;
  animation: pulseDot 2.0s infinite ease-out;
}

.shop-status-dot.active-yellow {
  background: #f1c40f !important;
}

.shop-status-dot.active-yellow::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #f1c40f;
  animation: pulseDot 2.0s infinite ease-out;
}

@keyframes pulseDot {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.shop-status-text {
  color: var(--text-muted);
}

.btn-use-reward {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.08);
  color: var(--primary, #5c4033);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
  font-family: 'Kanit', sans-serif;
}

.btn-use-reward:active {
  background: rgba(212, 175, 55, 0.15);
  transform: scale(0.98);
}

/* Greeting row & Live Shop Status Badge */
.mh-greeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.shop-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(92, 64, 51, 0.1);
  padding: 3px 8px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(92, 64, 51, 0.03);
}

.shop-status-text {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Card Entrance Slide-up Animation */
.member-hero-card,
.dashboard-stats-grid,
.fav-drink-card,
#active-order-banner,
.screen-home-action-card {
  animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.member-hero-card { animation-delay: 0.05s; }
.dashboard-stats-grid { animation-delay: 0.15s; }
.fav-drink-card { animation-delay: 0.25s; }
.screen-home-action-card { animation-delay: 0.35s; }

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button Shine Loop effect */
.btn-primary, .btn-fav-shortcut {
  position: relative;
  overflow: hidden;
}

.btn-primary::after, .btn-fav-shortcut::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 25%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shineLoop 5s infinite ease-in-out;
}

.btn-fav-shortcut::after {
  animation-delay: 1.5s;
}

@keyframes shineLoop {
  0% { left: -150%; }
  18% { left: 150%; }
  100% { left: 150%; }
}

/* ─── PWA INSTALL BANNER ─── */
.pwa-install-banner {
  background: linear-gradient(135deg, rgba(196, 154, 108, 0.12), rgba(92, 64, 51, 0.05));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px dashed var(--accent) !important;
  box-shadow: var(--shadow-sm);
  padding: 18px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 16px;
  box-sizing: border-box;
  animation: cardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pwa-install-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.pwa-install-banner .banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pwa-install-banner .banner-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-install-banner .banner-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.2s ease;
}

.pwa-install-banner .banner-close:hover {
  color: var(--primary);
}

.pwa-install-banner .banner-body {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.pwa-install-banner .btn-install {
  margin-top: 14px;
  height: 40px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 12px rgba(92, 64, 51, 0.15);
  transition: all 0.2s ease;
  font-family: 'Kanit', sans-serif;
  position: relative;
  overflow: hidden;
}

.pwa-install-banner .btn-install::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 25%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shineLoop 4s infinite ease-in-out;
  animation-delay: 0.5s;
}

.pwa-install-banner .btn-install:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(92, 64, 51, 0.2);
}

.pwa-install-banner .btn-install:active {
  transform: translateY(0);
}

@media (display-mode: standalone) {
  .pwa-install-banner {
    display: none !important;
  }
}

/* Prevent iOS auto-zoom on input focus */
.fg input, 
.fg select, 
textarea, 
#hist-date-input {
  font-size: 16px !important;
}

/* ─── DRINK SUMMARY SPEC LIST ─── */
#drink-summary-text {
  white-space: normal !important;
}

.summary-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--accent-light), rgba(255, 255, 255, 0.95));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(196, 154, 108, 0.2);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.summary-menu-icon {
  font-size: 20px;
  background: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(92, 64, 51, 0.06);
  flex-shrink: 0;
}

.summary-menu-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.3;
}

.summary-spec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  border: 1px solid rgba(212, 197, 187, 0.25);
  transition: all 0.2s ease;
}

.summary-spec-row:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent);
}

.summary-spec-label {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.summary-spec-label span {
  font-size: 14px;
}

.summary-spec-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(92, 64, 51, 0.04);
  text-align: right;
}

/* Badge colors for highlights */
.summary-spec-value.highlight-gold {
  background: rgba(196, 154, 108, 0.12);
  color: var(--accent-dark);
}

.summary-spec-value.highlight-green {
  background: rgba(46, 204, 113, 0.08);
  color: #27ae60;
}

.summary-spec-value.highlight-blue {
  background: rgba(52, 152, 219, 0.08);
  color: #2980b9;
}

/* ─── RECOMMENDED TOAST CAROUSEL ─── */
.recommend-toast-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Hide scrollbars for clean look */
}
.recommend-toast-scroll::-webkit-scrollbar {
  display: none;
}
.recommend-card {
  flex: 0 0 130px; /* fixed width of card */
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  position: relative;
  transition: all 0.25s ease;
  box-sizing: border-box;
  cursor: pointer;
}
.recommend-card.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--shadow-glow);
}
.rec-thumb {
  width: 55px;
  height: 55px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 6px;
}
.rec-thumb-placeholder {
  width: 55px;
  height: 55px;
  background: rgba(92, 64, 51, 0.05);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 6px;
}
.rec-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 28px; /* reserve space for 2 lines */
}
.rec-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}
.rec-btn {
  width: 100%;
  height: 24px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 500;
  border: 1px solid var(--primary-light);
  background: #fff;
  color: var(--primary-light);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Kanit', sans-serif;
  pointer-events: none; /* card click handles it */
}
.recommend-card.selected .rec-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}