/* ============================================
   23:05 SPECIALTY COFFEE — GLOBAL STYLES
   ============================================ */
:root {
  --brown-dark:   #2C1A0E;
  --brown-mid:    #5C3317;
  --brown:        #7B4A28;
  --brown-light:  #C68642;
  --cream:        #FDF6EC;
  --cream-dark:   #F5ECD7;
  --gold:         #D4A017;
  --gold-light:   #F5D76E;
  --green:        #2ECC71;
  --red:          #E74C3C;
  --blue:         #3498DB;
  --purple:       #9B59B6;
  --text-dark:    #1A1A1A;
  --text-mid:     #555;
  --text-light:   #999;
  --border:       #E8DDD0;
  --shadow-sm:    0 2px 8px rgba(44,26,14,0.10);
  --shadow-md:    0 6px 24px rgba(44,26,14,0.14);
  --shadow-lg:    0 16px 48px rgba(44,26,14,0.18);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-xl:    32px;
  --transition:   all 0.22s cubic-bezier(0.4,0,0.2,1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================
   PAGE SYSTEM
   ============================================ */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ============================================
   LANDING PAGE
   ============================================ */
.landing-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--brown-dark) 0%, var(--brown-mid) 40%, var(--brown) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.landing-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(214,160,23,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.landing-bg::after {
  content: '☕';
  position: absolute;
  font-size: 400px;
  opacity: 0.04;
  top: -60px;
  right: -80px;
  user-select: none;
  pointer-events: none;
}

.landing-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.brand-logo {
  font-family: 'Playfair Display', serif;
  font-size: 3.2rem;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.brand-logo i { color: var(--gold-light); font-size: 2.8rem; }

.brand-tagline {
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.brand-tagline-sub {
  color: rgba(255,220,120,0.75);
  font-size: 0.82rem;
  margin-bottom: 28px;
  letter-spacing: 0.03em;
}
.brand-tagline-sub i { margin-right: 5px; }

/* ── CUSTOMER REDIRECT BANNER ── */
.customer-redirect-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(245,215,110,0.45);
  border-radius: 14px;
  padding: 16px 22px;
  margin-bottom: 28px;
  text-align: left;
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
.customer-redirect-banner > i {
  font-size: 2rem;
  color: var(--gold-light);
  flex-shrink: 0;
}
.customer-redirect-banner > div {
  flex: 1;
  min-width: 200px;
}
.customer-redirect-banner strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.customer-redirect-banner span {
  color: rgba(255,255,255,0.72);
  font-size: 0.84rem;
}
.btn-customer-redirect {
  background: linear-gradient(135deg, var(--gold) 0%, var(--brown-light) 100%) !important;
  color: #fff !important;
  white-space: nowrap;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.2s;
}
.btn-customer-redirect:hover { opacity: 0.88; }

.portal-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 10px;
}
.portal-cards.portal-cards-3col {
  grid-template-columns: repeat(3, 1fr);
  max-width: 860px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .portal-cards { grid-template-columns: repeat(2, 1fr); }
  .brand-logo { font-size: 2.2rem; }
}
@media (max-width: 540px) {
  .portal-cards { grid-template-columns: 1fr; }
}

.portal-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  color: #fff;
}

.portal-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  box-shadow: var(--shadow-lg);
}

.portal-card.featured {
  background: linear-gradient(135deg, rgba(212,160,23,0.25), rgba(255,200,50,0.12));
  border-color: rgba(212,160,23,0.5);
}

.portal-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold);
  color: var(--brown-dark);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.08em;
}

.portal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.7rem;
}

.portal-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.portal-card p { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-bottom: 22px; line-height: 1.5; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-portal {
  width: 100%;
  justify-content: center;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 40px;
  padding: 11px 20px;
  font-size: 0.9rem;
}
.btn-portal:hover { background: rgba(255,255,255,0.28); }
.btn-admin { background: var(--gold) !important; color: var(--brown-dark) !important; border-color: var(--gold) !important; }
.btn-admin:hover { background: var(--gold-light) !important; }

.btn-primary {
  background: var(--brown);
  color: #fff;
}
.btn-primary:hover { background: var(--brown-mid); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-gold {
  background: var(--gold);
  color: var(--brown-dark);
  font-weight: 700;
}
.btn-gold:hover { background: var(--gold-light); }

.btn-ghost {
  background: transparent;
  color: var(--text-mid);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--cream-dark); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #c0392b; }

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-full { width: 100%; justify-content: center; }

.btn-back {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--transition);
}
.btn-back:hover { background: rgba(255,255,255,0.25); }

/* ============================================
   AUTH PAGES — LOGIN & REGISTER
   ============================================ */
.auth-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #2C1A0E 0%, #5C3317 50%, #7B4A28 100%);
  display: flex;
  align-items: stretch;
  position: relative;
}
.auth-bg-b2b {
  background: linear-gradient(135deg, #1a2634 0%, #2C3E50 50%, #34495e 100%);
}
.auth-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(212,160,23,0.08) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 40%);
  pointer-events: none;
}
.auth-wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Left branding panel */
.auth-brand-panel {
  flex: 0 0 420px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.auth-brand-panel::after {
  content: '☕';
  position: absolute;
  font-size: 280px;
  right: -60px;
  bottom: -40px;
  opacity: 0.04;
  pointer-events: none;
}
.b2b-brand-panel::after { content: '💼'; }

.auth-brand-logo {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.12);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 28px;
  border: 1px solid rgba(255,255,255,0.15);
}
.auth-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 12px;
  color: #fff;
}
.auth-brand-sub {
  font-size: 1rem;
  opacity: 0.75;
  margin-bottom: 36px;
  font-style: italic;
}
.auth-brand-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-brand-perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  opacity: 0.88;
  line-height: 1.4;
}
.auth-brand-perks li i {
  width: 20px;
  color: var(--gold-light);
  flex-shrink: 0;
}
.btn-back-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  margin-top: auto;
  align-self: flex-start;
}
.btn-back-auth:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* Right form panel */
.auth-form-panel {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 48px 52px;
  justify-content: center;
  overflow-y: auto;
}

/* Auth tab switcher */
.auth-tabs {
  display: flex;
  gap: 0;
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 32px;
}
.auth-tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  font-family: inherit;
}
.auth-tab:hover { background: var(--cream); color: var(--brown); }
.auth-tab.active {
  background: var(--brown-dark);
  color: #fff;
}

/* Individual form pane */
.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-form-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: 6px;
}
.auth-form-sub {
  font-size: 0.88rem;
  color: var(--text-mid);
  margin-bottom: 26px;
  line-height: 1.5;
}

/* Fields */
.auth-field {
  margin-bottom: 16px;
  flex: 1;
}
.auth-field label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.auth-field label i {
  color: var(--brown-light);
  width: 14px;
}
.auth-field input,
.auth-field select {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-dark);
  background: #fff;
  transition: var(--transition);
  font-family: inherit;
  box-sizing: border-box;
}
.auth-field input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--brown-light);
  box-shadow: 0 0 0 3px rgba(198,134,66,0.12);
}

.auth-field-row {
  display: flex;
  gap: 14px;
}
.auth-field-row .auth-field { min-width: 0; }

/* Password toggle */
.auth-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-password-wrap input {
  padding-right: 44px;
}
.auth-eye-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 0.9rem;
  padding: 4px;
  transition: var(--transition);
}
.auth-eye-btn:hover { color: var(--brown); }

/* Error */
.auth-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.83rem;
  color: #b91c1c;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-error::before {
  content: '⚠';
  font-size: 1rem;
  flex-shrink: 0;
}

/* Submit button */
.auth-submit-btn {
  width: 100%;
  padding: 13px;
  background: var(--brown-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: var(--transition);
  font-family: inherit;
  margin-top: 4px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.auth-submit-btn:hover:not(:disabled) { background: var(--brown); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.auth-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
.auth-submit-btn.b2b-submit { background: #2C3E50; }
.auth-submit-btn.b2b-submit:hover:not(:disabled) { background: #34495e; }

.auth-switch-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-mid);
}
.auth-switch-hint a {
  color: var(--brown);
  font-weight: 700;
  text-decoration: none;
}
.auth-switch-hint a:hover { text-decoration: underline; }

/* Logged-in user chip in header */
.auth-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 40px;
  padding: 5px 10px 5px 5px;
}
.auth-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brown-light);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
}
.auth-user-avatar.b2b-avatar { background: #3498DB; }
.auth-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.auth-user-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-user-role {
  font-size: 0.68rem;
  opacity: 0.7;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-logout-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  font-size: 0.78rem;
  transition: var(--transition);
  flex-shrink: 0;
}
.auth-logout-btn:hover {
  background: rgba(231,76,60,0.3);
  color: #fff;
}

/* Responsive auth */
@media (max-width: 820px) {
  .auth-wrapper { flex-direction: column; }
  .auth-brand-panel {
    flex: none;
    padding: 32px 28px 28px;
  }
  .auth-brand-name { font-size: 1.6rem; }
  .auth-brand-perks { display: none; }
  .btn-back-auth { margin-top: 16px; }
  .auth-form-panel { padding: 28px 24px; }
  .auth-field-row { flex-direction: column; gap: 0; }
}

/* ============================================
   HEADERS & NAV
   ============================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 64px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.customer-header { background: var(--brown); color: #fff; }
.b2b-header { background: var(--brown-mid); color: #fff; }
.staff-header { background: #2C3E50; color: #fff; }

.header-brand {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.header-left { display: flex; align-items: center; gap: 12px; }
.header-right { margin-left: auto; }

.tab-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
  overflow-x: auto;
}

.tab-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 600;
  font-family: inherit;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tab-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.tab-btn.active { color: #fff; background: rgba(255,255,255,0.2); }

.customer-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}
.customer-picker select {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
}
.customer-picker select option { background: var(--brown-dark); }

/* ============================================
   MAIN CONTENT
   ============================================ */
.app-main { padding: 24px 20px; max-width: 1200px; margin: 0 auto; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--brown-dark); }

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.toolbar select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
  cursor: pointer;
}

.search-input {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
  min-width: 220px;
  transition: var(--transition);
}
.search-input:focus { outline: none; border-color: var(--brown-light); box-shadow: 0 0 0 3px rgba(198,134,66,0.12); }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 18px;
  transition: var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stat-icon.brown { background: rgba(123,74,40,0.12); color: var(--brown); }
.stat-icon.gold { background: rgba(212,160,23,0.14); color: var(--gold); }
.stat-icon.green { background: rgba(46,204,113,0.12); color: var(--green); }
.stat-icon.blue { background: rgba(52,152,219,0.12); color: var(--blue); }
.stat-icon.purple { background: rgba(155,89,182,0.12); color: var(--purple); }
.stat-icon.red { background: rgba(231,76,60,0.12); color: var(--red); }

.stat-info .stat-label { font-size: 0.78rem; color: var(--text-light); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-info .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--text-dark); line-height: 1.1; }
.stat-info .stat-sub { font-size: 0.78rem; color: var(--text-light); }

/* ============================================
   MENU GRID
   ============================================ */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.menu-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
  position: relative;
}
.menu-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.menu-card.has-promo { border-color: var(--gold); }

/* Promo badge overlay on menu cards */
.menu-promo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}
.menu-promo-badge.discount { background: #fff3e0; color: #e65100; border: 1.5px solid #e65100; }
.menu-promo-badge.bogo     { background: #e8f5e9; color: #1b5e20; border: 1.5px solid #4caf50; }
.menu-promo-badge.combo    { background: #ede7f6; color: #4a148c; border: 1.5px solid #9c27b0; }
.menu-promo-badge.fixed    { background: #e3f2fd; color: #0d47a1; border: 1.5px solid #1976d2; }

/* Promo / discounted price styles */
.menu-card-price.promo-price { color: var(--green); font-size: 1.1rem; font-weight: 800; }
.menu-card-orig-price { font-size: 0.82rem; color: var(--text-light); text-decoration: line-through; font-weight: 500; }

.menu-card-img {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--cream), var(--cream-dark));
}

.menu-card-body { padding: 16px; }
.menu-card-category { font-size: 0.7rem; color: var(--brown-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.menu-card-name { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.menu-card-desc { font-size: 0.8rem; color: var(--text-mid); margin-bottom: 12px; line-height: 1.4; }
.menu-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.menu-card-price { font-size: 1.1rem; font-weight: 800; color: var(--brown); }
.menu-card-stamps { font-size: 0.78rem; color: var(--gold); font-weight: 600; }

/* ============================================
   STAMPS DISPLAY
   ============================================ */
.stamp-card-header {
  background: linear-gradient(135deg, var(--brown), var(--brown-mid));
  border-radius: var(--radius-md);
  padding: 28px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.stamp-card-header::before {
  content: '☕';
  position: absolute;
  font-size: 140px;
  right: -20px;
  top: -20px;
  opacity: 0.08;
}

.stamp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 24px 0;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.stamp-slot {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: var(--transition);
}
.stamp-slot.filled {
  background: linear-gradient(135deg, var(--brown-light), var(--brown));
  color: #fff;
  box-shadow: 0 4px 12px rgba(123,74,40,0.3);
  transform: scale(1.05);
}
.stamp-slot.empty {
  background: var(--cream-dark);
  border: 2px dashed var(--border);
  color: var(--border);
  font-size: 1.2rem;
}


/* ============================================
   REWARDS
   ============================================ */
.reward-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.reward-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.reward-card.available { border-color: var(--green); }
.reward-card.available::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--green);
}
.reward-card.locked { opacity: 0.6; }
.reward-card:hover { box-shadow: var(--shadow-md); }

/* ============================================
   REWARD CARDS — sub-element styles
   ============================================ */
.reward-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.reward-card-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: 6px;
}
.reward-card-desc {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.5;
  margin-bottom: 14px;
  flex-grow: 1;
}
.reward-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--cream-dark);
  padding-top: 12px;
  margin-top: auto;
}
.reward-cost {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brown);
  display: flex;
  align-items: center;
  gap: 5px;
}
/* ============================================
   VOUCHERS — active voucher list
   ============================================ */
.voucher-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, #fffdf7, #fff9ee);
  border: 1.5px solid #f0d080;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(212,160,23,0.1);
  transition: var(--transition);
}
.voucher-card:hover { box-shadow: 0 4px 16px rgba(212,160,23,0.2); }
.voucher-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.voucher-icon {
  font-size: 2rem;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,160,23,0.12);
  border-radius: 50%;
  flex-shrink: 0;
}
.voucher-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: 3px;
}
.voucher-date {
  font-size: 0.75rem;
  color: var(--text-light);
}
.voucher-right {
  text-align: right;
  flex-shrink: 0;
}
.voucher-code {
  font-family: 'Courier New', monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brown-dark);
  background: var(--cream);
  border: 1px dashed var(--gold);
  border-radius: 6px;
  padding: 5px 10px;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.voucher-status {
  font-size: 0.7rem;
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================
   VOUCHER SUCCESS MODAL — post-redemption display
   ============================================ */
.voucher-success-anim {
  font-size: 4.5rem;
  margin-bottom: 12px;
  animation: bounceIn 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
  display: block;
  line-height: 1.2;
}
@keyframes bounceIn {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1);    opacity: 1; }
}
.voucher-code-display {
  background: linear-gradient(135deg, var(--cream), #fff9ee);
  border: 2px dashed var(--gold);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.voucher-code-big {
  font-family: 'Courier New', monospace;
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--brown-dark);
  letter-spacing: 0.18em;
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  display: inline-block;
  margin-top: 4px;
  word-break: break-all;
  text-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* ============================================
   TABLES
   ============================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.85rem;
}
thead { background: var(--cream-dark); }
thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--text-mid);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--cream-dark); transition: var(--transition); }
tbody tr:hover { background: var(--cream); }
tbody td { padding: 12px 16px; color: var(--text-dark); vertical-align: middle; }
tbody tr:last-child { border-bottom: none; }

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-earn { background: rgba(46,204,113,0.14); color: #27ae60; }
.badge-redeem { background: rgba(231,76,60,0.14); color: var(--red); }
.badge-bonus { background: rgba(212,160,23,0.14); color: var(--gold); }
.badge-expire { background: rgba(170,170,170,0.2); color: var(--text-light); }
.badge-active { background: rgba(46,204,113,0.14); color: #27ae60; }
.badge-inactive { background: rgba(231,76,60,0.14); color: var(--red); }
.badge-pending { background: rgba(230,126,34,0.14); color: #e67e22; }

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
}
.status-Pending { background: rgba(230,126,34,0.15); color: #e67e22; }
.status-Confirmed { background: rgba(52,152,219,0.15); color: var(--blue); }
.status-Fulfilled { background: rgba(46,204,113,0.15); color: #27ae60; }
.status-Invoiced { background: rgba(155,89,182,0.15); color: var(--purple); }
.status-Paid { background: rgba(46,204,113,0.2); color: #1a9e55; }
.status-Cancelled { background: rgba(231,76,60,0.14); color: var(--red); }
.status-Active { background: rgba(46,204,113,0.14); color: #27ae60; }
.status-Inactive { background: rgba(231,76,60,0.14); color: var(--red); }

/* ============================================
   PARTNER ONBOARDING — ADMIN PANEL
   ============================================ */
.partners-pending-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(230,126,34,0.12);
  border: 1.5px solid rgba(230,126,34,0.35);
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  color: #c0620a;
  font-weight: 600;
}
.partners-pending-banner i { font-size: 1rem; }

.partners-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Onboard Modal — application summary */
.ob-summary {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.ob-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 10px;
}
.ob-summary-row:last-child { margin-bottom: 0; }
.ob-summary-item { display: flex; flex-direction: column; gap: 3px; }
.ob-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
}
.ob-label i { margin-right: 4px; }
.ob-value {
  font-size: 0.88rem;
  color: var(--text-dark);
  font-weight: 500;
}
.ob-value.ob-message {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-mid);
}
.ob-config-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brown);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ob-login-info {
  margin-top: 16px;
  background: rgba(52,152,219,0.08);
  border: 1px solid rgba(52,152,219,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #2471a3;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.ob-login-info i { margin-top: 2px; flex-shrink: 0; }

/* ============================================
   FILTER PILLS
   ============================================ */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-mid);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.pill:hover { border-color: var(--brown-light); color: var(--brown); }
.pill.active { background: var(--brown); color: #fff; border-color: var(--brown); }

/* ============================================
   FORMS
   ============================================ */
.form-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  max-width: 600px;
  margin: 0 auto;
}
.form-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; color: var(--brown-dark); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-full { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-mid); }
.form-group input, .form-group select, .form-group textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.88rem;
  transition: var(--transition);
  background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--brown-light);
  box-shadow: 0 0 0 3px rgba(198,134,66,0.12);
}

.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; }

.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; }
.radio-label input { width: auto; }

.stamp-form-wrapper { padding: 10px 0; }

.selected-customer-card {
  background: linear-gradient(135deg, var(--cream), var(--cream-dark));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 12px 0;
}

/* ============================================
   ADMIN LAYOUT
   ============================================ */
.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: 220px;
  background: var(--brown-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 24px 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-brand i { font-size: 1.4rem; color: var(--gold-light); margin-bottom: 4px; display: block; }
.sidebar-brand span { font-family: 'Playfair Display', serif; font-size: 1.1rem; display: block; }
.sidebar-brand small { color: rgba(255,255,255,0.45); font-size: 0.7rem; }

.sidebar-nav { padding: 12px 8px; flex: 1; }
.sidebar-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.sidebar-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-btn.active { background: var(--brown-light); color: #fff; }
.sidebar-btn i { width: 16px; text-align: center; }
.sidebar-divider { border-top: 1px solid rgba(255,255,255,0.1); margin: 12px 0; }
.logout-btn { color: rgba(231,76,60,0.8); }
.logout-btn:hover { background: rgba(231,76,60,0.12); color: var(--red); }
.sidebar-nav-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.3);
  padding: 8px 8px 4px; user-select: none;
}

/* Marketing portal active state — pink accent */
#page-marketing .sidebar-btn.active {
  background: linear-gradient(135deg, rgba(233,30,140,0.28), rgba(155,89,182,0.22));
  color: #fff;
}
#page-marketing .sidebar-btn.active i { color: #E91E8C; }
#page-marketing #mkt-breadcrumb { font-weight: 700; font-size: 0.95rem; color: var(--brown-dark); display: flex; align-items: center; gap: 8px; }
#page-marketing #mkt-breadcrumb i { color: #E91E8C; }

/* Shared marketing badge / empty state */
.mkt-type-badge {
  display: inline-block; padding: 3px 8px;
  background: rgba(233,30,140,0.1); color: #c2185b;
  border-radius: 20px; font-size: 0.75rem; font-weight: 700;
}
.empty-state {
  text-align: center; padding: 48px 24px; color: var(--text-light);
}
.empty-state i { font-size: 2.5rem; margin-bottom: 12px; display: block; opacity: 0.35; }
.empty-state p { font-size: 0.9rem; }

/* Subscription stat row (used in marketing portal) */
.sub-stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sub-stat-box {
  flex: 1; min-width: 100px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; text-align: center;
}
.sub-stat-box.pending { border-color: #ffc107; background: #fffbea; }
.sub-stat-box.active  { border-color: var(--green); background: #f0fdf4; }
.sub-stat-box .stat-num   { font-size: 1.6rem; font-weight: 800; color: var(--brown-dark); line-height: 1; }
.sub-stat-box .stat-label { font-size: 0.72rem; color: var(--text-light); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.admin-content { flex: 1; display: flex; flex-direction: column; min-height: 100vh; background: var(--cream); }

.admin-topbar {
  background: #fff;
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
#admin-breadcrumb { font-weight: 700; font-size: 0.95rem; color: var(--brown-dark); display: flex; align-items: center; gap: 8px; }
.admin-topbar-right { display: flex; align-items: center; gap: 12px; }
.admin-user { font-size: 0.82rem; font-weight: 600; color: var(--text-mid); display: flex; align-items: center; gap: 6px; }

.admin-section { display: none; padding: 24px; }
.admin-section.active { display: block; }

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 900;
  backdrop-filter: blur(3px);
}
.modal-overlay.active { display: block; }

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  width: 92%;
  max-width: 540px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: all 0.25s ease;
}
.modal.active {
  display: block;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.modal-wide { max-width: 720px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 1.05rem; font-weight: 700; color: var(--brown-dark); display: flex; align-items: center; gap: 10px; }
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 1rem;
  padding: 4px;
  transition: var(--transition);
}
.modal-close:hover { color: var(--red); }

.modal-body { padding: 20px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ============================================
   TOAST
   ============================================ */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--brown-dark);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  max-width: 340px;
  word-break: break-word;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success #toast-icon { color: var(--green); }
.toast.error #toast-icon { color: var(--red); }
.toast.info #toast-icon { color: var(--blue); }

/* ============================================
   MISC UTILITY
   ============================================ */
.no-customer-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-light);
  gap: 14px;
  text-align: center;
}
.no-customer-msg i { font-size: 3rem; }
.no-customer-msg p { font-size: 0.95rem; }

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 50px 20px;
  color: var(--text-light);
  font-size: 0.9rem;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}

.progress-bar-wrap { background: var(--cream-dark); border-radius: 20px; height: 8px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--brown-light), var(--brown)); transition: width 0.8s ease; }

.text-right { text-align: right; }
.text-muted { color: var(--text-light); }
.font-bold { font-weight: 700; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 768px) {
  .admin-sidebar { width: 60px; }
  .sidebar-brand span, .sidebar-brand small, .sidebar-btn span { display: none; }
  .sidebar-btn { justify-content: center; padding: 10px; }
  .sidebar-brand { padding: 16px 8px; text-align: center; }
  .form-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .app-header { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; }
  .tab-nav { order: 3; width: 100%; justify-content: flex-start; }
  .stamp-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 480px) {
  .stamp-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   B2B SPECIFIC
   ============================================ */
.invoice-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 16px;
  transition: var(--transition);
}
.invoice-card:hover { box-shadow: var(--shadow-md); }
.invoice-card-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cream-dark);
  background: var(--cream);
}
.invoice-card-body { padding: 16px 20px; }

.order-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 0.88rem;
}
.order-item-row:last-child { border-bottom: none; }

.b2b-order-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .b2b-order-builder { grid-template-columns: 1fr; } }

.order-product-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.order-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  font-size: 0.85rem;
}
.order-product-item:hover { border-color: var(--brown-light); background: var(--cream-dark); }

.cart-list { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.83rem;
}

/* ============================================
   STAFF ACTIVITY FEED
   ============================================ */
.activity-feed { display: flex; flex-direction: column; gap: 10px; }
.activity-item {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
}
.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.activity-dot.earn { background: var(--green); }
.activity-dot.redeem { background: var(--red); }
.activity-dot.bonus { background: var(--gold); }

/* ============================================
   CHARTS AREA
   ============================================ */
.chart-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.chart-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; color: var(--brown-dark); }
.chart-wrap { height: 260px; position: relative; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brown-light); }

/* ============================================
   SUBSCRIPTION PROGRAM
   ============================================ */

/* Active subscription banner */
.sub-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: linear-gradient(135deg, var(--brown-dark), var(--brown));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}
.sub-active-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sub-active-icon {
  font-size: 2.6rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  flex-shrink: 0;
}
.sub-active-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
  margin-bottom: 4px;
}
.sub-active-name {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.sub-active-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  opacity: 0.88;
}
.sub-active-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Billing cycle switcher */
.sub-cycle-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  background: var(--cream);
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.sub-cycle-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 14px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
  font-family: inherit;
}
.sub-cycle-btn:hover {
  background: #fff;
  color: var(--brown);
  border-color: var(--border);
}
.sub-cycle-btn.active {
  background: var(--brown-dark);
  color: #fff;
  border-color: var(--brown-dark);
  box-shadow: var(--shadow-sm);
}
.sub-cycle-badge {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--gold);
  color: var(--brown-dark);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.sub-cycle-btn.active .sub-cycle-badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Plan cards grid */
.sub-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.sub-plan-card {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.sub-plan-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.sub-plan-card.elite {
  border-color: var(--brown-dark);
  background: linear-gradient(160deg, #1a0e07 0%, #2C1A0E 100%);
  color: #f5e6d3;
}
.sub-plan-card.elite .sub-plan-name,
.sub-plan-card.elite .sub-plan-desc,
.sub-plan-card.elite .sub-plan-billed,
.sub-plan-card.elite .sub-plan-perks li {
  color: #f5e6d3;
}
.sub-plan-card.elite .sub-plan-price {
  color: #f5c842;
}
.sub-plan-card.elite .sub-plan-saving {
  color: #a3e47a;
}
.sub-plan-card.current {
  border-color: var(--green);
}
.sub-plan-card.current::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--green);
}

.sub-plan-popular-tag {
  position: absolute;
  top: 14px;
  right: -1px;
  background: var(--brown);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px 4px 10px;
  border-radius: 20px 0 0 20px;
  letter-spacing: 0.04em;
  z-index: 1;
}
.sub-plan-popular-tag.popular { background: var(--red); }
.sub-plan-popular-tag.current-tag { background: var(--green); }

.sub-plan-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.sub-plan-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--brown-dark);
  margin-bottom: 4px;
}
.sub-plan-desc {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.5;
  margin-bottom: 12px;
}
.sub-plan-price-block {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.sub-plan-card.elite .sub-plan-price-block {
  background: rgba(255,255,255,0.08);
}
.sub-plan-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.1;
}
.sub-price-big {
  font-size: 2rem;
  font-weight: 900;
}
.sub-price-unit {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.75;
}
.sub-plan-billed {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 4px;
}
.sub-plan-saving {
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 700;
  margin-top: 3px;
}
.sub-plan-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-grow: 1;
}
.sub-plan-perks li {
  font-size: 0.82rem;
  color: var(--text-mid);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
}
.sub-plan-perks li .fa-check-circle { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.sub-plan-perks li .fa-star         { color: var(--gold);  flex-shrink: 0; margin-top: 2px; }
.sub-plan-card.elite .sub-plan-perks li .fa-check-circle { color: #7eeaa0; }
.sub-plan-card.elite .sub-plan-perks li .fa-star         { color: #f5c842; }

.sub-plan-btn {
  width: 100%;
  margin-top: auto;
  padding: 12px;
  font-size: 0.9rem;
}
.sub-plan-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Drinks info row inside plan card */
.sub-plan-drinks-info {
  font-size: 0.78rem;
  color: var(--text-mid);
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sub-plan-card.elite .sub-plan-drinks-info {
  background: rgba(255,255,255,0.08);
  color: #f5e6d3;
}

/* Plans info header */
.sub-plans-info-header {
  margin-bottom: 12px;
}

/* Add-ons section */
.sub-addons-section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px dashed var(--border);
}
.sub-addons-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sub-addons-sub {
  font-size: 0.83rem;
  color: var(--text-mid);
  margin-bottom: 18px;
}
.sub-addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.sub-addon-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.sub-addon-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sub-addon-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 6px;
}
.sub-addon-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brown-dark);
}
.sub-addon-desc {
  font-size: 0.78rem;
  color: var(--text-mid);
  line-height: 1.5;
  flex-grow: 1;
}
.sub-addon-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown);
  margin-top: 4px;
}
.sub-addon-extra {
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 700;
}

/* Drink categories in subscription */
.sub-drink-cats {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px dashed var(--border);
}
.sub-drink-cats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 600px) {
  .sub-drink-cats-grid { grid-template-columns: 1fr; }
}
.sub-drink-cat {
  border-radius: var(--radius-md);
  padding: 16px 18px;
  border: 1.5px solid var(--border);
}
.sub-drink-cat.standard {
  background: linear-gradient(135deg, #fdf8f3, #fff9ee);
  border-color: #d4a017;
}
.sub-drink-cat.premium {
  background: linear-gradient(135deg, #f0f8ff, #e8f4f8);
  border-color: #aecde6;
}
.sub-drink-cat-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--brown-dark);
}
.sub-drink-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sub-drink-tag.included {
  background: #d4edda;
  color: #155724;
}
.sub-drink-tag.upgrade {
  background: #fff3cd;
  color: #856404;
}
.sub-drink-cat ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sub-drink-cat ul li {
  font-size: 0.82rem;
  color: var(--text-mid);
  padding-left: 14px;
  position: relative;
}
.sub-drink-cat ul li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--brown-light);
}

/* ── Add-on selector (inside subscribe modal) ─────────────────── */
.addon-select-section {
  margin-top: 18px;
  border-top: 1.5px dashed var(--border);
  padding-top: 16px;
}
.addon-select-header {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--brown-dark);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.addon-select-header i { color: var(--brown-light); }
.addon-select-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-light);
  margin-left: auto;
}
.addon-select-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.addon-select-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  position: relative;
}
.addon-select-card:hover {
  border-color: var(--brown-light);
  box-shadow: var(--shadow-sm);
}
.addon-select-card.selected {
  border-color: var(--brown);
  background: linear-gradient(135deg, #fdf8f3, #fff9ee);
  box-shadow: 0 0 0 3px rgba(123,74,40,0.1);
}
.addon-select-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  font-size: 0.7rem;
  transition: var(--transition);
  background: #fff;
}
.addon-select-card.selected .addon-select-check {
  background: var(--brown);
  border-color: var(--brown);
  color: #fff;
}
.addon-select-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.addon-select-body {
  flex: 1;
  min-width: 0;
}
.addon-select-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: 2px;
}
.addon-select-desc {
  font-size: 0.75rem;
  color: var(--text-mid);
  line-height: 1.4;
}
.addon-select-extra {
  font-size: 0.72rem;
  color: #2ECC71;
  font-weight: 700;
  margin-top: 3px;
}
.addon-select-price {
  text-align: right;
  flex-shrink: 0;
}
.addon-select-aed {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--brown);
}
.addon-select-per {
  display: block;
  font-size: 0.7rem;
  color: var(--text-light);
}

/* ── Live total bar ────────────────────────────────────────────── */
.sub-drinks-info-bar {
  background: #f8f5f0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 0.79rem;
  color: var(--brown-dark);
  margin-top: 14px;
  line-height: 1.5;
}
.sub-total-bar {
  margin-top: 16px;
  background: linear-gradient(135deg, #fdf8f3, #fff9ee);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.sub-total-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-mid);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212,160,23,0.2);
}
.sub-total-breakdown strong { color: var(--brown-dark); }
.sub-total-sep {
  font-size: 0.8rem;
  color: var(--brown-light);
  font-weight: 700;
  padding: 0 2px;
}
.sub-total-grand {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sub-total-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sub-total-amount {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--brown);
  transition: color 0.2s;
}

/* ── Payment order summary (payment modal) ─────────────────────── */
.pay-order-summary {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
}
.pay-order-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pay-order-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--brown-dark);
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: 8px;
}
.pay-order-line:last-child { border-bottom: none; }
.pay-order-line.addon-line { color: var(--text-mid); }
.pay-order-line.addon-line span:last-child { font-weight: 700; }
.pay-addon-label {
  font-size: 0.7rem;
  opacity: 0.65;
  font-style: normal;
  margin-left: 3px;
}
.pay-order-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--brown-dark);
  padding: 10px 0 4px;
  margin-top: 4px;
  border-top: 2px solid var(--border);
}

/* ── Active subscription add-on badge ──────────────────────────── */
.sub-active-addons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.sub-active-addon-badge {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 2px 8px;
  color: inherit;
}

/* Subscription confirm modal grid */

.sub-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.sub-confirm-box {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  border: 1px solid var(--border);
}
.sub-confirm-box.highlight {
  background: linear-gradient(135deg, #fff9ee, #fffdf7);
  border-color: var(--gold);
}
.sub-confirm-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  margin-bottom: 5px;
}
.sub-confirm-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown-dark);
}

/* Subscription history */
.sub-history-section {
  margin-bottom: 32px;
}
.sub-history-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Custom Plan Builder ─────────────────────────────────────────── */
.sub-plan-card.custom-plan {
  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
  border: 2px solid #c084fc;
  position: relative;
  overflow: hidden;
}
.sub-plan-card.custom-plan::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: linear-gradient(180deg, #6B3FA0, #a855f7);
}
.sub-plan-card.custom-plan .sub-plan-price-block {
  background: rgba(107,63,160,0.07);
}
.sub-plan-card.custom-plan .sub-plan-drinks-info {
  background: rgba(107,63,160,0.07);
  color: #6B3FA0;
}
.sub-plan-card.custom-plan .sub-plan-perks li .fa-check-circle { color: #a855f7; }

/* Custom builder sections inside modal */
.custom-section {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.custom-section-hdr {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.custom-section-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-light);
  margin-left: auto;
}

/* Qty stepper row */
.custom-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.custom-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--cream);
  color: var(--brown-dark);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.custom-qty-btn:hover {
  background: var(--brown-dark);
  border-color: var(--brown-dark);
  color: #fff;
}
.custom-qty-input {
  width: 64px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brown-dark);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  background: var(--cream);
}
.custom-qty-input:focus {
  outline: none;
  border-color: #a855f7;
}
.custom-qty-price {
  font-size: 0.85rem;
  color: var(--text-mid);
  margin-left: 4px;
}
.custom-qty-price strong {
  color: #6B3FA0;
  font-size: 1rem;
}

/* Preset quick-pick buttons */
.custom-qty-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.custom-qty-presets button {
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brown-dark);
  cursor: pointer;
  transition: var(--transition);
}
.custom-qty-presets button:hover {
  background: #6B3FA0;
  border-color: #6B3FA0;
  color: #fff;
}

/* Pastry selector grid */
.custom-pastry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.custom-pastry-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--brown-dark);
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.custom-pastry-check:hover {
  border-color: #a855f7;
  background: #faf5ff;
}
.custom-pastry-check input[type="checkbox"] {
  accent-color: #6B3FA0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Extras toggle cards */
.custom-extras-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.custom-toggle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.custom-toggle-card:hover {
  border-color: #a855f7;
  box-shadow: var(--shadow-sm);
}
.custom-toggle-card.selected {
  border-color: #6B3FA0;
  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
  box-shadow: 0 0 0 3px rgba(107,63,160,0.1);
}
.custom-toggle-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: transparent;
  transition: var(--transition);
  font-weight: 800;
}
.custom-toggle-card.selected .custom-toggle-check {
  background: #6B3FA0;
  border-color: #6B3FA0;
  color: #fff;
}
.custom-toggle-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.custom-toggle-body {
  flex: 1;
  min-width: 0;
}
.custom-toggle-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: 2px;
}
.custom-toggle-desc {
  font-size: 0.75rem;
  color: var(--text-mid);
  line-height: 1.4;
}
.custom-toggle-price {
  font-size: 0.95rem;
  font-weight: 900;
  color: #6B3FA0;
  flex-shrink: 0;
  text-align: right;
}
.custom-toggle-price span {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-light);
  display: block;
}

/* Mobile adjustments for custom builder */
@media (max-width: 600px) {
  .custom-pastry-grid { grid-template-columns: 1fr 1fr; }
  .custom-qty-presets button { padding: 4px 9px; font-size: 0.75rem; }
  .custom-section { padding: 13px 14px; }
  .custom-toggle-card { padding: 10px 12px; gap: 9px; }
  .custom-toggle-icon { width: 34px; height: 34px; font-size: 1.1rem; }
}

/* FAQ / How it works */
.sub-faq-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  border: 1px solid var(--border);
  margin-top: 8px;
}
.sub-faq-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: 18px;
}
.sub-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.sub-faq-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.83rem;
  color: var(--text-mid);
  line-height: 1.5;
}
.sub-faq-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brown);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .sub-confirm-grid { grid-template-columns: 1fr; }
  .sub-cycle-btn { font-size: 0.78rem; padding: 8px 10px; min-width: 80px; }
  .sub-plans-grid { grid-template-columns: 1fr; }
  .sub-active-banner { flex-direction: column; align-items: flex-start; }
}

/* ── Pending Approval banner ── */
.sub-pending-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #b8860b, #d4a017);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}
.sub-pending-icon {
  font-size: 2.4rem;
  flex-shrink: 0;
}

/* ── Payment method grid ── */
.pay-method-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.pay-method-btn {
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
}
.pay-method-btn .pay-icon { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.pay-method-btn.active {
  border-color: var(--gold);
  background: rgba(212,160,23,0.08);
  color: var(--brown-dark);
}
.pay-method-btn:hover { border-color: var(--brown-light); }

/* ── Staff subscription approval tab ── */
.staff-sub-pending-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff3cd;
  border: 1.5px solid #ffc107;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  color: #856404;
  flex-wrap: wrap;
}

.sub-approval-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.sub-approval-card:hover { box-shadow: var(--shadow-md); }
.sub-approval-icon {
  font-size: 2.2rem;
  width: 52px;
  height: 52px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-approval-info { flex: 1; min-width: 180px; }
.sub-approval-name { font-size: 1rem; font-weight: 800; color: var(--brown-dark); margin-bottom: 3px; }
.sub-approval-meta { font-size: 0.8rem; color: var(--text-mid); line-height: 1.6; }
.sub-approval-meta strong { color: var(--brown-dark); }
.sub-approval-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.btn-approve {
  background: #d4edda;
  color: #155724;
  border: 1.5px solid #c3e6cb;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-approve:hover { background: #c3e6cb; }
.btn-reject {
  background: #f8d7da;
  color: #721c24;
  border: 1.5px solid #f5c6cb;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-reject:hover { background: #f5c6cb; }

/* Status badge for Pending Approval */
.status-badge.status-Pending-Approval,
.status-badge.status-pending-approval {
  background: rgba(212,160,23,0.15);
  color: #856404;
}
.status-badge.status-Rejected,
.status-badge.status-rejected {
  background: rgba(231,76,60,0.12);
  color: var(--red);
}

/* Admin sub stats bar */
.sub-stats-bar,
.sub-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.sub-stat-box {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-align: center;
}
.sub-stat-box .stat-num,
.sub-stat-box > div:first-child {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--brown-dark);
  line-height: 1;
  margin-bottom: 4px;
}
.sub-stat-box .stat-lbl,
.sub-stat-box .stat-label,
.sub-stat-box > div:last-child {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
}
.sub-stat-box.pending .stat-num { color: #856404; }
.sub-stat-box.active  .stat-num { color: var(--green); }
.sub-stat-box.revenue .stat-num { color: var(--brown-light); }

/* ============================================
   ANNOUNCEMENTS PORTAL TAB
   ============================================ */
.ann-portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.ann-portal-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--ann-bg, linear-gradient(135deg, var(--brown), var(--brown-light)));
  color: #fff;
  transition: var(--transition);
}
.ann-portal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.ann-portal-card-inner {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

.ann-portal-type {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}
.ann-portal-badge {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 4px;
  padding: 2px 7px;
  color: rgba(255,255,255,0.9);
}
.ann-portal-emoji { font-size: 2.2rem; line-height: 1; }
.ann-portal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}
.ann-portal-body {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  flex: 1;
}
.ann-portal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.73rem;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}
.ann-portal-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ann-portal-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: var(--transition);
  backdrop-filter: blur(4px);
  width: fit-content;
}
.ann-portal-cta:hover { background: rgba(255,255,255,0.32); }

@media (max-width: 580px) {
  .ann-portal-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CUSTOMER PROFILE EDIT
   ============================================ */
.profile-card-wrap {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-avatar-block {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.profile-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.profile-avatar-info h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.77rem;
  color: var(--text-light);
}
.profile-meta-row span { display: flex; align-items: center; gap: 5px; }

.profile-edit-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.profile-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-section-title i { color: var(--brown-light); }

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.profile-stats-section { background: var(--cream); }
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.profile-stat-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
}
.profile-stat-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--brown);
  line-height: 1.1;
}
.profile-stat-label {
  font-size: 0.68rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}


@media (max-width: 600px) {
  .profile-form-grid  { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: 1fr 1fr; }
  .profile-avatar-block { flex-direction: column; text-align: center; }
  .profile-meta-row { justify-content: center; }
}

/* ============================================
   FLOATING MENU BUTTON (FAB) — CUSTOMER PORTAL
   Visible on all tabs except Menu itself
   ============================================ */
.fab-menu-btn {
  display: none; /* hidden until logged in — shown via JS */
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 900;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brown);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(44, 26, 14, 0.40);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  font-family: inherit;
}
.fab-menu-btn:hover {
  background: var(--brown-mid);
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 10px 28px rgba(44, 26, 14, 0.50);
}
.fab-menu-btn:active { transform: scale(0.95); }
.fab-menu-btn i { font-size: 1.35rem; line-height: 1; }
.fab-menu-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
/* When on the Menu tab, the FAB is hidden */
.fab-menu-btn.fab-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7);
}

/* Tooltip pulse ring on first load */
.fab-menu-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(198, 134, 66, 0.4);
  animation: fab-pulse 2.4s ease-out infinite;
}
@keyframes fab-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Keep FAB above any modals on mobile */
@media (max-width: 640px) {
  .fab-menu-btn {
    bottom: 20px;
    right: 16px;
    width: 56px;
    height: 56px;
  }
  .fab-menu-btn i { font-size: 1.15rem; }
}
   CUSTOMER PORTAL — MOBILE TAB NAV
   ============================================ */

/* Make tab-nav a smooth scrollable row on mobile */
.customer-header .tab-nav {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.customer-header .tab-nav::-webkit-scrollbar { display: none; }

/* Slightly more compact tab buttons inside customer portal */
.customer-header .tab-btn {
  padding: 7px 12px;
  font-size: 0.8rem;
  gap: 5px;
}

/* ============================================
   ALL PORTALS — MOBILE DROPDOWN NAV
   (customer, staff, b2b)
   ============================================ */

/* Desktop: show button row, hide dropdown */
.tab-nav-mobile { display: none; }

/* Mobile (≤ 600px): hide button tab row, show dropdown for ALL portal headers */
@media (max-width: 600px) {
  .customer-header .tab-nav,
  .staff-header .tab-nav,
  .b2b-header .tab-nav { display: none !important; }

  .tab-nav-mobile {
    display: flex;
    align-items: center;
    order: 3;
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 6px;
  }

  /* Keep all portal headers wrapping tidy */
  .customer-header,
  .staff-header,
  .b2b-header {
    flex-wrap: wrap;
    height: auto !important;
    padding-bottom: 8px;
  }
}

/* The <select> dropdown styling */
.tab-nav-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 9px 36px 9px 14px;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.01em;
}
.tab-nav-select:focus {
  outline: none;
  border-color: rgba(255,255,255,0.6);
  background-color: rgba(255,255,255,0.22);
}
.tab-nav-select option {
  background: var(--brown-dark);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px;
}

/* ============================================
   ADMIN — MARKETING PANEL
   ============================================ */

/* Sub-nav tab bar */
.mkt-subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  background: var(--cream);
  border-radius: 50px;
  padding: 5px;
  width: fit-content;
}
.mkt-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: none;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mid);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.mkt-tab.active {
  background: #fff;
  color: var(--brown-dark);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(44,26,14,0.12);
}
.mkt-tab:hover:not(.active) { color: var(--brown); }

/* Panels */
.mkt-panel { display: none; }
.mkt-panel.active { display: block; }

/* Type badge pill */
.mkt-type-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(44,26,14,0.07);
  color: var(--brown-dark);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Empty state */
.mkt-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-light);
}
.mkt-empty i {
  font-size: 3rem;
  margin-bottom: 14px;
  display: block;
  opacity: 0.35;
}
.mkt-empty p {
  font-size: 0.9rem;
}

/* Detail expand row */
#admin-collabs-table td,
#admin-influencers-table td {
  vertical-align: top;
}

/* Status colours for marketing */
.status-badge.status-Reviewing {
  background: rgba(52,152,219,0.12);
  color: #1a5276;
}

@media (max-width: 768px) {
  .mkt-subnav { flex-direction: column; border-radius: 14px; width: 100%; }
  .mkt-tab    { border-radius: 10px; justify-content: center; }
}

/* ============================================
   PORTAL MENU — FILTER PILLS WRAP
   ============================================ */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 560px) {
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .filter-pills { gap: 5px; }
  .pill { font-size: 0.73rem; padding: 5px 11px; }
}

/* ============================================
   NO-ITEMS EMPTY STATE
   ============================================ */
.no-customer-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 24px;
  color: var(--text-light);
  text-align: center;
}
.no-customer-msg i {
  font-size: 2.8rem;
  color: var(--brown-light);
  opacity: 0.5;
}
.no-customer-msg p {
  font-size: 0.95rem;
  max-width: 320px;
  line-height: 1.5;
}

/* ============================================
   SUBSCRIPTION LANDING PAGE — PAY AT STORE BADGE
   ============================================ */
.cl-sub-pay-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff8e1;
  border: 1px solid #ffc107;
  border-radius: 10px;
  padding: 12px 20px;
  margin: 0 auto 28px;
  max-width: 480px;
  font-size: 0.85rem;
  color: #856404;
  font-weight: 600;
}
.cl-sub-pay-info i { font-size: 1.1rem; color: var(--gold); }
.cl-sub-login-cta {
  text-align: center;
  margin-top: 28px;
}
.cl-sub-login-cta p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
}
.cl-sub-login-cta .cl-sub-login-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================
   STAFF VOUCHER VERIFICATION CARDS
   ============================================ */
.staff-voucher-card {
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(212,160,23,0.1);
  transition: var(--transition);
}
.staff-voucher-card:hover { box-shadow: var(--shadow-md); }
.staff-voucher-card.used {
  border-color: var(--border);
  opacity: 0.72;
}
.staff-voucher-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.staff-voucher-icon {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,160,23,0.1);
  border-radius: 50%;
  flex-shrink: 0;
}
.staff-voucher-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brown-dark);
}
.staff-voucher-customer {
  font-size: 0.78rem;
  color: var(--text-mid);
  margin-top: 2px;
}
.staff-voucher-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* ============================================
   QR CODE — CUSTOMER SIDE
   ============================================ */
.qr-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

/* stamp grid inside the QR card — keep slots tighter */
.qr-card .stamp-grid {
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.qr-card .stamp-slot { font-size: 1.1rem; }
.qr-card .stamp-slot.empty { font-size: 0.75rem; }

.qr-card-header {
  background: linear-gradient(135deg, var(--brown-dark), var(--brown));
  border-radius: var(--radius-md);
  padding: 20px;
  color: #fff;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.qr-card-header::after {
  content: '☕';
  position: absolute;
  font-size: 90px;
  right: -14px;
  bottom: -20px;
  opacity: 0.08;
}

.qr-code-wrap {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 18px;
  display: inline-block;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--cream-dark);
  margin-bottom: 20px;
  position: relative;
}

.qr-code-wrap::before,
.qr-code-wrap::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--brown-light);
  border-style: solid;
}
.qr-code-wrap::before { top: -3px; left: -3px; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.qr-code-wrap::after  { bottom: -3px; right: -3px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

.qr-customer-id-label {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--text-light);
  letter-spacing: 0.12em;
  margin-top: 8px;
}

.qr-pulse-ring {
  position: absolute;
  inset: -8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--brown-light);
  opacity: 0;
  animation: qrPulse 2.4s ease-in-out infinite;
}

@keyframes qrPulse {
  0%   { opacity: 0; transform: scale(0.96); }
  50%  { opacity: 0.4; }
  100% { opacity: 0; transform: scale(1.04); }
}

.qr-instructions {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.6;
  text-align: left;
  margin-top: 4px;
}
.qr-instructions li { margin-left: 16px; margin-bottom: 4px; }

/* ============================================
   QR SCANNER — STAFF SIDE
   ============================================ */
.qr-scanner-box {
  text-align: center;
}

.qr-scanner-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 14px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #111;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.qr-scanner-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  padding: 40px;
  width: 100%;
  height: 100%;
}
.qr-scanner-placeholder i { font-size: 3.5rem; opacity: 0.4; }

.qr-scanner-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Corner brackets */
.qr-corner {
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: var(--gold-light);
  border-style: solid;
}
.qr-corner.tl { top: 16px;  left: 16px;  border-width: 3px 0 0 3px;  border-radius: 4px 0 0 0; }
.qr-corner.tr { top: 16px;  right: 16px; border-width: 3px 3px 0 0;  border-radius: 0 4px 0 0; }
.qr-corner.bl { bottom: 16px; left: 16px;  border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.qr-corner.br { bottom: 16px; right: 16px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

/* Scanning line */
.qr-scan-line {
  position: absolute;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow: 0 0 8px var(--gold-light);
  top: 16px;
  opacity: 0;
  transition: opacity 0.3s;
}
.qr-scan-line.active {
  opacity: 1;
  animation: scanLine 2s ease-in-out infinite;
}

@keyframes scanLine {
  0%   { top: 16px; }
  50%  { top: calc(100% - 18px); }
  100% { top: 16px; }
}

.qr-hint {
  font-size: 0.82rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

/* Scanned customer result card */
.qr-result-card {
  background: linear-gradient(135deg, #f0faf4, #e8f8ef);
  border: 2px solid var(--green);
  border-radius: var(--radius-md);
  padding: 22px;
  animation: fadeSlideIn 0.35s ease;
}

.qr-result-card.error-card {
  background: linear-gradient(135deg, #fff5f5, #feeaea);
  border-color: var(--red);
}

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

.qr-found-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(46,204,113,0.25);
}

.qr-stamp-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.qr-action-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Scan success flash */
.scan-success-flash {
  position: fixed;
  inset: 0;
  background: rgba(46, 204, 113, 0.18);
  pointer-events: none;
  z-index: 9998;
  animation: flashGreen 0.5s ease forwards;
}
@keyframes flashGreen {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE OVERRIDES
   ============================================ */

/* ── Admin mobile dropdown nav — desktop: hidden ── */
.admin-nav-mobile { display: none; }

/* ── Admin mobile dropdown nav — ≤600px: show dropdown, hide sidebar ── */
@media (max-width: 600px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { display: none !important; }
  .admin-nav-mobile {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--brown-dark);
    padding: 10px 14px;
    flex-shrink: 0;
  }
  .admin-nav-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.15)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
      no-repeat right 12px center;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 9px 36px 9px 14px;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.01em;
  }
  .admin-nav-select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.6);
    background-color: rgba(255,255,255,0.22);
  }
  .admin-nav-select option {
    background: var(--brown-dark);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px;
  }
  .admin-content { min-height: calc(100vh - 52px); width: 100%; }
  .admin-section { padding: 12px; }
  .admin-topbar { padding: 0 12px; }
  .admin-topbar-right { gap: 8px; }
  .admin-topbar #admin-breadcrumb { font-size: 0.82rem; }
}

/* ── Base mobile fixes — tablet (601px–768px): sidebar scrollable row ── */
@media (max-width: 768px) {

  /* Admin layout: sidebar becomes compact scrollable top row on tablet */
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100% !important;
    height: auto;
    position: relative;
    top: auto;
    flex-direction: row;
    align-items: center;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
  }
  .sidebar-brand {
    padding: 10px 14px;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sidebar-brand i   { display: inline; font-size: 1.1rem; margin: 0 6px 0 0; }
  .sidebar-brand span { display: inline; font-size: 0.9rem; }
  .sidebar-brand small { display: none; }
  .sidebar-nav {
    display: flex;
    flex-direction: row;
    padding: 6px 8px;
    flex: 1;
    overflow-x: auto;
    gap: 2px;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-divider { display: none; }
  .sidebar-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    font-size: 0.65rem;
    gap: 3px;
    white-space: nowrap;
    min-width: 56px;
    text-align: center;
    border-radius: var(--radius-sm);
  }
  .sidebar-btn i { width: auto; font-size: 1rem; }
  .admin-content { min-height: calc(100vh - 60px); }
  .admin-topbar { padding: 0 14px; }
  .admin-topbar-right { gap: 8px; }
  .admin-topbar #admin-breadcrumb { font-size: 0.82rem; }
  .branch-badge { display: none; }
  .admin-section { padding: 14px; }

  /* Tables: horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 0.78rem; min-width: 600px; }
  thead th { padding: 10px 10px; }
  tbody td  { padding: 10px 10px; }

  /* Stat grid 2-col on tablet */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 16px; gap: 12px; }
  .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; }
  .stat-info .stat-value { font-size: 1.4rem; }

  /* Modal fix */
  .modal { width: 96%; max-width: 96%; left: 50%; }
  .modal-body { padding: 16px 16px; }
  .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }

  /* Cards */
  .card { padding: 14px; }
  .form-card { padding: 18px 16px; }

  /* Grid utilities */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  /* Sub plan cards */
  .sub-plans-grid { grid-template-columns: 1fr; }
  .sub-confirm-grid { grid-template-columns: 1fr; }

  /* Subscription addon cards */
  .addon-select-card { flex-wrap: nowrap; }

  /* Staff approval card actions */
  .sub-approval-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }

  /* Pay method grid */
  .pay-method-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Section header */
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-header h2 { font-size: 1.2rem; }

  /* Toolbar */
  .toolbar { flex-direction: column; gap: 8px; }
  .search-input { min-width: unset; width: 100%; }
  .toolbar select { width: 100%; }

  /* App main padding */
  .app-main { padding: 16px 12px; }

  /* Portal header right: push to end on mobile */
  .customer-header .header-right,
  .staff-header .header-right,
  .b2b-header .header-right { margin-left: auto; flex-shrink: 0; }

  /* Staff selector compact */
  .staff-header .customer-picker label { display: none; }
  .staff-header .customer-picker select { font-size: 0.78rem; padding: 4px 8px; max-width: 130px; }

  /* Auth chip tighten */
  .auth-user-chip { gap: 6px; }
  .auth-user-info { display: none; }

  /* Auth form panel */
  .auth-form-panel { padding: 20px 16px; }
  .auth-brand-perks { display: none; }
  .auth-brand-panel { padding: 24px 20px 20px; }
  .auth-field-row { flex-direction: column; gap: 0; }

  /* Profile grid */
  .profile-form-grid { grid-template-columns: 1fr; }
  .profile-stats-grid { grid-template-columns: 1fr 1fr; }
  .profile-avatar-block { flex-direction: column; text-align: center; }
  .profile-meta-row { justify-content: center; }

  /* Voucher card */
  .voucher-card { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Announcements portal grid */
  .ann-portal-grid { grid-template-columns: 1fr; }

  /* Sub active/pending banners */
  .sub-active-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sub-pending-banner { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Sub total bar breakdown */
  .sub-total-breakdown { font-size: 0.74rem; }

  /* Drink categories grid */
  .sub-drink-cats-grid { grid-template-columns: 1fr; }

  /* Menu grid: 2-col on tablet */
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .menu-card-img { height: 110px; font-size: 2.5rem; }
  .menu-card-body { padding: 10px 12px; }

  /* Stamp grid */
  .stamp-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 6px; }
}

/* ── Small phones ── */
@media (max-width: 480px) {

  /* Stat grid single col on small phones */
  .stat-grid { grid-template-columns: 1fr; }

  /* Admin sidebar: compact icon-only on very small */
  .sidebar-btn span { display: none; }
  .sidebar-btn { min-width: 44px; padding: 8px 6px; }

  /* Tables: even smaller font */
  table { font-size: 0.72rem; }

  /* Modal on very small screen */
  .modal { border-radius: var(--radius-md); }
  .modal-header { padding: 14px 14px 12px; }
  .modal-header h3 { font-size: 0.95rem; }

  /* Menu grid: single col on very small */
  .menu-grid { grid-template-columns: 1fr; }

  /* QR card */
  .qr-card { padding: 20px 16px; }

  /* Subscription plan card */
  .sub-plan-card { padding: 18px 16px; }
  .sub-price-big { font-size: 1.7rem; }

  /* Profile stats 2x2 */
  .profile-stats-grid { grid-template-columns: 1fr 1fr; }

  /* Section padding */
  .admin-section { padding: 10px; }
  .app-main { padding: 12px 10px; }

  /* Sub confirm grid */
  .sub-confirm-grid { grid-template-columns: 1fr; }

  /* Pay modal order summary */
  .sub-order-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ── Extra small (375px and below) ── */
@media (max-width: 375px) {
  .brand-logo { font-size: 1.6rem; }
  .stat-info .stat-value { font-size: 1.2rem; }
  .auth-user-chip .auth-user-avatar { width: 28px; height: 28px; font-size: 0.8rem; }
  .tab-btn { padding: 5px 7px; font-size: 0.68rem; }
}

/* ── Touch-friendly button sizes ── */
@media (max-width: 768px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; padding: 6px 12px; }
  .pill { min-height: 34px; padding: 6px 14px; font-size: 0.79rem; }
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
}

/* ── Subscription modal: fix inner layout on mobile ── */
@media (max-width: 600px) {
  .sub-plans-info-header { flex-direction: column; gap: 8px; }
  .addon-select-card { padding: 10px 12px; gap: 10px; }
  .addon-select-icon { width: 34px; height: 34px; font-size: 1.1rem; }
  .sub-total-bar { padding: 12px 14px; }
  .sub-confirm-box { padding: 12px; }
  .sub-history-section table { min-width: 400px; font-size: 0.74rem; }
}

/* ── Fix toast on mobile ── */
@media (max-width: 600px) {
  .toast {
    bottom: 16px;
    right: 12px;
    left: 12px;
    text-align: center;
    justify-content: center;
  }
}

/* ── Bottom-sheet modal on small phones ── */
@media (max-width: 500px) {
  .modal {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(4%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    max-height: 92dvh;
  }
  .modal.active {
    transform: translateY(0);
  }
  .modal-footer {
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }
}

/* ============================================
   STAFF LOGIN PAGE
   ============================================ */
.sl-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #2C1A0E 0%, #5C3317 50%, #7B4A28 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
}
.sl-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.sl-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  position: relative;
  z-index: 1;
}

/* Brand row */
.sl-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.sl-brand-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--brown-dark), var(--brown));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(44,26,14,0.3);
}
.sl-brand-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown-dark);
  line-height: 1.2;
}
.sl-brand-sub {
  font-size: 0.78rem;
  color: var(--brown);
  font-weight: 600;
  margin-top: 2px;
}

/* Title */
.sl-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: 4px;
}
.sl-hint {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 22px;
}

/* Fields */
.sl-field {
  margin-bottom: 16px;
}
.sl-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: 6px;
}
.sl-field label i {
  color: var(--brown-light);
  width: 14px;
  text-align: center;
}
.sl-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--cream);
  transition: var(--transition);
  box-sizing: border-box;
}
.sl-field input:focus {
  outline: none;
  border-color: var(--brown);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(123,74,40,0.1);
}

/* PIN wrap */
.sl-pin-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sl-pin-wrap input {
  padding-right: 44px;
  letter-spacing: 0.2em;
}
.sl-eye-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 0.9rem;
  padding: 4px;
  transition: var(--transition);
}
.sl-eye-btn:hover { color: var(--brown); }

/* Error */
.sl-error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Login button */
.sl-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--brown-dark), var(--brown));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(44,26,14,0.25);
  margin-bottom: 12px;
}
.sl-btn:hover {
  background: linear-gradient(135deg, var(--brown-mid), var(--brown-dark));
  box-shadow: 0 6px 20px rgba(44,26,14,0.35);
  transform: translateY(-1px);
}
.sl-btn:active { transform: translateY(0); }
.sl-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Back button */
.sl-back-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: var(--text-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: var(--transition);
}
.sl-back-btn:hover {
  border-color: var(--brown-light);
  color: var(--brown);
  background: var(--cream);
}

/* Logged-in badge in staff header */
.sl-logged-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.15);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.sl-logged-badge i {
  font-size: 1rem;
  opacity: 0.9;
}

@media (max-width: 480px) {
  .sl-card { padding: 28px 20px; }
  .sl-title { font-size: 1rem; }
}

/* ============================================
   LANDING MENU PANEL
   Full-screen slide-up panel from the landing page
   ============================================ */

.lm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.lm-overlay.lm-overlay-active { opacity: 1; }

.lm-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 92vh;
  height: 92dvh;
  z-index: 1101;
  background: #fff;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}
.lm-panel.lm-panel-active { transform: translateY(0); }

/* Header */
.lm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--brown-dark);
  color: #fff;
  flex-shrink: 0;
  border-radius: 24px 24px 0 0;
}
.lm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lm-header-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.lm-title {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}
.lm-subtitle {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.lm-close-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
  flex-shrink: 0;
}
.lm-close-btn:hover { background: rgba(255,255,255,0.28); }

/* Category filter pills */
.lm-filters {
  display: flex;
  gap: 8px;
  padding: 14px 20px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.lm-filters::-webkit-scrollbar { display: none; }
.lm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: #fff;
  color: var(--text-mid);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  font-family: inherit;
  flex-shrink: 0;
}
.lm-pill:hover {
  border-color: var(--brown-light);
  color: var(--brown);
}
.lm-pill.active {
  background: var(--brown-dark);
  border-color: var(--brown-dark);
  color: #fff;
}

/* Scrollable body */
.lm-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

/* Menu grid */
.lm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Menu card */
.lm-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}
.lm-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brown-light);
}
.lm-card.lm-card-promo {
  border-color: var(--gold);
}

/* Promo ribbon */
.lm-card-promo-ribbon {
  background: var(--gold);
  color: var(--brown-dark);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.lm-card-emoji {
  font-size: 2.8rem;
  text-align: center;
  padding: 18px 0 10px;
  line-height: 1;
  background: var(--cream);
}
.lm-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lm-card-cat {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brown-light);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.lm-card-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: 5px;
  line-height: 1.3;
}
.lm-card-desc {
  font-size: 0.78rem;
  color: var(--text-mid);
  line-height: 1.45;
  margin-bottom: 10px;
  flex: 1;
}
.lm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.lm-card-price-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lm-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown-dark);
}
.lm-price-promo {
  color: #1a6b3c;
  font-size: 1.05rem;
}
.lm-orig-price {
  font-size: 0.78rem;
  color: var(--text-light);
  text-decoration: line-through;
}
.lm-saving {
  font-size: 0.7rem;
  font-weight: 700;
  color: #1a6b3c;
  background: #e8f5e9;
  border-radius: 10px;
  padding: 2px 7px;
}
.lm-promo-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--gold);
  color: var(--brown-dark);
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.lm-card-stamps {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brown-light);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Footer */
.lm-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--cream);
  flex-shrink: 0;
  text-align: center;
}
.lm-footer-btn {
  background: var(--brown-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 28px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: var(--transition);
}
.lm-footer-btn:hover {
  background: var(--brown);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 600px) {
  .lm-panel { height: 96vh; height: 96dvh; border-radius: 18px 18px 0 0; }
  .lm-header { padding: 16px 16px 12px; border-radius: 18px 18px 0 0; }
  .lm-body { padding: 14px; }
  .lm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .lm-card-emoji { font-size: 2.2rem; padding: 14px 0 8px; }
  .lm-card-body { padding: 10px 12px; }
  .lm-card-name { font-size: 0.88rem; }
}

/* ============================================================
   SETTINGS SECTION — Email Notifications
   ============================================================ */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  padding: 4px 0 24px;
}

/* Card shell */
.settings-card {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Card header strip */
.settings-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(135deg, rgba(101,67,33,0.04) 0%, rgba(101,67,33,0.01) 100%);
}
.settings-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.settings-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 2px;
  line-height: 1.2;
}
.settings-card-sub {
  font-size: 0.75rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.3;
}

/* Card body */
.settings-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Generic form row within settings */
.settings-form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.settings-form-row label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-form-row input[type="text"],
.settings-form-row input[type="email"] {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.12);
  font-size: 0.85rem;
  color: var(--dark);
  background: var(--light-bg, #faf9f7);
  transition: border-color 0.2s;
  outline: none;
}
.settings-form-row input:focus {
  border-color: var(--brown);
}
.settings-form-row .hint {
  font-size: 0.72rem;
  color: var(--gray);
  line-height: 1.4;
}

/* Status badge */
.settings-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.settings-status-on {
  background: rgba(40,167,69,0.12);
  color: #1a7a32;
}
.settings-status-off {
  background: rgba(180,180,180,0.18);
  color: #888;
}

/* Toggle rows (notification switches) */
.settings-toggles-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.settings-toggle-row:last-child {
  border-bottom: none;
}
.settings-toggle-info {
  flex: 1;
  min-width: 0;
}
.settings-toggle-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--dark);
  display: block;
  line-height: 1.3;
}
.settings-toggle-desc {
  font-size: 0.72rem;
  color: var(--gray);
  display: block;
  margin-top: 1px;
  line-height: 1.35;
}

/* Custom checkbox toggle pill */
.settings-checkbox {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
}
.settings-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.settings-checkbox .slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.25s;
}
.settings-checkbox .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.settings-checkbox input:checked + .slider {
  background: var(--brown, #654321);
}
.settings-checkbox input:checked + .slider::before {
  transform: translateX(20px);
}
.settings-checkbox input:focus-visible + .slider {
  outline: 2px solid var(--brown);
  outline-offset: 2px;
}

/* EmailJS guide box */
.settings-emailjs-guide {
  background: rgba(101,67,33,0.05);
  border: 1px dashed rgba(101,67,33,0.22);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.76rem;
  color: var(--dark);
  line-height: 1.6;
}
.settings-emailjs-guide strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 4px;
  color: var(--brown);
}
.settings-emailjs-guide ol {
  margin: 0;
  padding-left: 16px;
}
.settings-emailjs-guide a {
  color: var(--brown);
  font-weight: 600;
}

/* Save / test buttons in settings */
.settings-save-btn {
  padding: 10px 20px;
  background: var(--brown);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
}
.settings-save-btn:hover {
  background: var(--dark-brown, #4a2e0e);
  transform: translateY(-1px);
}
.settings-test-btn {
  padding: 10px 20px;
  background: transparent;
  color: var(--brown);
  border: 2px solid var(--brown);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  align-self: flex-start;
}
.settings-test-btn:hover {
  background: var(--brown);
  color: #fff;
  transform: translateY(-1px);
}
#test-notify-result {
  font-size: 0.8rem;
  min-height: 20px;
  margin-top: 2px;
}

/* Responsive — settings */
@media (max-width: 700px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .settings-card-body {
    padding: 14px 16px 16px;
  }
}

/* ============================================================
   ADMIN DATA MANAGER
   ============================================================ */

/* ── Intro / picker ── */
.dm-picker-intro {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

.dm-table-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white, #fff);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.dm-table-card:hover {
  border-color: var(--brown-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.dm-table-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.dm-table-card-body {
  flex: 1;
  min-width: 0;
}
.dm-table-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}
.dm-table-card-desc {
  font-size: 0.74rem;
  color: var(--text-light);
  margin-top: 2px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-table-card-arrow {
  font-size: 0.8rem;
  opacity: 0.4;
  flex-shrink: 0;
}

/* ── Toolbar ── */
.dm-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dm-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.dm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brown);
  cursor: pointer;
  transition: var(--transition);
}
.dm-back-btn:hover {
  background: var(--cream-dark);
  border-color: var(--brown-light);
}
.dm-search {
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.83rem;
  color: var(--text-dark);
  background: #fff;
  min-width: 200px;
  transition: border-color 0.2s;
  outline: none;
}
.dm-search:focus { border-color: var(--brown); }

.dm-page-size {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  background: #fff;
  cursor: pointer;
  outline: none;
}

.dm-record-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(101,67,33,0.09);
  color: var(--brown);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ── Table header strip ── */
.dm-table-header-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--cream);
  border-radius: 10px 10px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0;
}
.dm-col-count {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-light);
  margin-left: auto;
}

/* ── Data table ── */
.dm-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.dm-th {
  padding: 10px 12px;
  text-align: left;
  background: #faf7f3;
  border-bottom: 2px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mid);
  white-space: nowrap;
}
.dm-th-actions {
  text-align: right;
  min-width: 110px;
}
.dm-td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  max-width: 220px;
}
.dm-row:hover .dm-td { background: rgba(123,74,40,0.03); }
.dm-td-actions {
  text-align: right;
  white-space: nowrap;
}

/* ── Cell value types ── */
.dm-cell-text {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.dm-id-chip {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  background: rgba(0,0,0,0.05);
  color: var(--text-mid);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.dm-bool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
}
.dm-bool-yes { background: rgba(46,204,113,0.13); color: #1a7a32; }
.dm-bool-no  { background: rgba(180,180,180,0.15); color: #888; }

/* ── Row action buttons ── */
.dm-btn-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(123,74,40,0.08);
  color: var(--brown);
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-right: 5px;
}
.dm-btn-edit:hover {
  background: var(--brown);
  color: #fff;
}
.dm-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(231,76,60,0.08);
  color: var(--red);
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition);
}
.dm-btn-delete:hover {
  background: var(--red);
  color: #fff;
}

/* ── Pagination ── */
.dm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 4px;
}
.dm-page-info {
  font-size: 0.8rem;
  color: var(--text-light);
}
.dm-page-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dm-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: var(--transition);
}
.dm-page-btn:hover { background: var(--cream); border-color: var(--brown-light); color: var(--brown); }
.dm-page-active { background: var(--brown) !important; color: #fff !important; border-color: var(--brown) !important; }
.dm-page-ellipsis { font-size: 0.82rem; color: var(--text-light); padding: 0 4px; }

/* ── Empty / error states ── */
.dm-empty, .dm-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-light);
  font-size: 0.88rem;
  gap: 12px;
  text-align: center;
}
.dm-empty i, .dm-error i { font-size: 2.5rem; opacity: 0.35; }
.dm-error { color: var(--red); }
.dm-error i { opacity: 0.5; }

/* ── Form inside modal ── */
#dm-modal-body .form-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
#dm-modal-body textarea {
  padding: 9px 12px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text-dark);
  background: #faf9f7;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
}
#dm-modal-body textarea:focus { border-color: var(--brown); }

/* Bool toggle inside DM form */
.dm-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}
.dm-toggle-wrap input { display: none; }
.dm-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.25s;
  flex-shrink: 0;
}
.dm-toggle-wrap input:checked ~ .dm-toggle-track { background: var(--brown); }
.dm-toggle-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.dm-toggle-wrap input:checked ~ .dm-toggle-track .dm-toggle-thumb {
  transform: translateX(20px);
}
.dm-toggle-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-mid);
}

/* Delete button in modal footer */
#dm-delete-btn {
  background: rgba(231,76,60,0.1);
  color: var(--red);
  border: 1.5px solid rgba(231,76,60,0.25);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: var(--transition);
}
#dm-delete-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .dm-table-grid { grid-template-columns: 1fr; }
  .dm-toolbar { flex-direction: column; align-items: stretch; }
  .dm-toolbar-right { margin-left: 0; }
  .dm-search { min-width: 0; width: 100%; }
  #dm-modal-body .form-grid { grid-template-columns: 1fr; }
  .dm-table-card-desc { display: none; }
}