/* Chosen Menu - Public Menu Templates & Shared Styles */

:root {
  --biz-primary: #1461C4;
  --biz-secondary: #1a1a2e;
}

body { background: #fafafa; padding-bottom: 40px; margin: 0; }

.loading-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; gap: 16px;
}

.unavailable-msg { text-align: center; padding: 80px 24px; }
.unavailable-msg h1 { font-size: 22px; margin-bottom: 12px; }
.unavailable-msg p { color: var(--text-secondary); font-size: 15px; }

.offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #975a16; color: white; text-align: center;
  padding: 8px 12px; font-size: 13px; font-weight: 600;
}
.offline-banner.hidden { display: none; }

.menu-container { max-width: 640px; margin: 0 auto; }

/* Header shared */
.menu-header, .tmpl-header, .elegant-header {
  background: var(--biz-primary); color: white; padding: 28px 20px 24px; text-align: center;
}
.menu-header h1, .tmpl-header h1, .elegant-header h1 { color: white; font-size: 22px; margin-bottom: 4px; }
.menu-header .tagline, .tmpl-header .tagline { font-size: 13px; opacity: 0.85; }
.logo-img {
  width: 64px; height: 64px; border-radius: 12px; object-fit: contain;
  background: white; margin: 0 auto 12px; padding: 4px; display: block;
}

/* Search */
.search-bar {
  padding: 12px 16px; background: white; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.search-bar input {
  width: 100%; padding: 12px 16px 12px 40px; border: 1px solid var(--border);
  border-radius: 50px; font-size: 15px; background: var(--bg-light)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23718096' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") 14px center no-repeat;
  font-family: inherit;
}
.search-bar input:focus { outline: none; border-color: var(--biz-primary); box-shadow: 0 0 0 3px rgba(20,97,196,0.12); }

/* Category nav */
.cat-nav {
  display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto;
  background: white; border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav-btn {
  flex-shrink: 0; padding: 8px 16px; border-radius: 50px; border: 1px solid var(--border);
  background: white; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.cat-nav-btn.active, .cat-nav-btn:hover {
  background: var(--biz-primary); color: white; border-color: var(--biz-primary);
}

/* Offers */
.offers-section { padding: 16px; }
.offer-card {
  background: linear-gradient(135deg, var(--biz-primary), #0f4a9a);
  color: white; border-radius: 12px; padding: 18px; margin-bottom: 10px;
}
.offer-card h3 { color: white; font-size: 16px; margin-bottom: 4px; }
.offer-card p { font-size: 13px; opacity: 0.9; }
.offer-card .offer-price { font-weight: 800; font-size: 18px; margin-top: 8px; }

.menu-section { padding: 8px 16px 24px; }
.cat-heading {
  font-size: 18px; margin: 20px 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--biz-primary); display: inline-block;
}
.no-results { text-align: center; padding: 40px 20px; color: var(--text-muted); }

/* Biz info + footer */
.biz-info { padding: 24px 16px; background: white; border-top: 1px solid var(--border); margin-top: 20px; }
.biz-info h3 { font-size: 15px; margin-bottom: 12px; }
.biz-info p, .biz-info a { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.action-buttons a {
  flex: 1; min-width: 120px; text-align: center; padding: 12px; border-radius: 8px;
  font-weight: 600; font-size: 13px; background: var(--biz-primary); color: white; text-decoration: none;
}
.action-buttons a.secondary { background: white; color: var(--biz-primary); border: 1px solid var(--biz-primary); }
.menu-footer { text-align: center; padding: 24px 16px; font-size: 12px; color: var(--text-muted); }

.item-price { font-weight: 700; font-size: 15px; color: var(--biz-primary); }
.item-desc { font-size: 13px; color: var(--text-muted); display: block; margin-top: 2px; }
.item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.item-tag { font-size: 11px; padding: 2px 8px; border-radius: 50px; background: var(--bg-light); color: var(--text-secondary); }

/* ═══ MINIMAL ═══ */
.tmpl-minimal .minimal-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border);
}
.tmpl-minimal .item-name { font-weight: 600; font-size: 15px; display: block; }
.tmpl-minimal .item-price { white-space: nowrap; flex-shrink: 0; }

/* ═══ CLASSIC ═══ */
.tmpl-classic .classic-item {
  display: flex; gap: 14px; background: white; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; margin-bottom: 10px;
}
.tmpl-classic .item-img {
  width: 80px; height: 80px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg-gray);
}
.tmpl-classic .item-body { flex: 1; min-width: 0; }
.tmpl-classic .item-body h3 { font-size: 15px; margin-bottom: 2px; }

/* ═══ GALLERY ═══ */
.gallery-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.gallery-card {
  background: white; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.gallery-img-wrap {
  aspect-ratio: 1; background: var(--bg-gray); position: relative; overflow: hidden;
}
.gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; color: var(--text-muted); background: var(--bg-light);
}
.gallery-body { padding: 12px; }
.gallery-body h3 { font-size: 14px; margin-bottom: 4px; }
.gallery-body .item-desc { font-size: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ═══ ELEGANT ═══ */
.tmpl-elegant .elegant-header { background: var(--biz-secondary); padding: 40px 20px; }
.tmpl-elegant .elegant-sub { font-size: 13px; opacity: 0.7; letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; }
.tmpl-elegant .elegant-line { width: 60px; height: 2px; background: var(--biz-primary); margin: 16px auto 0; }
.tmpl-elegant .elegant-cat {
  font-size: 14px; letter-spacing: 3px; text-transform: uppercase; text-align: center;
  color: var(--biz-primary); margin: 32px 0 8px; border: none; padding: 0; display: block;
}
.tmpl-elegant .elegant-divider { width: 40px; height: 1px; background: var(--border); margin: 0 auto 20px; }
.tmpl-elegant .elegant-item { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.tmpl-elegant .elegant-item-top { display: flex; align-items: baseline; gap: 8px; }
.tmpl-elegant .elegant-name { font-weight: 600; font-size: 15px; }
.tmpl-elegant .elegant-dots { flex: 1; border-bottom: 1px dotted var(--border); margin: 0 4px; min-width: 20px; }
.tmpl-elegant .elegant-price { font-weight: 700; color: var(--biz-primary); white-space: nowrap; }
.tmpl-elegant .elegant-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.tmpl-elegant .elegant-section { padding: 8px 24px 32px; }

/* ═══ PHOTO HIGHLIGHTS ═══ */
.ph-featured { padding: 16px 0 8px; }
.ph-featured-title { font-size: 16px; padding: 0 16px; margin-bottom: 12px; }
.ph-featured-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ph-featured-scroll::-webkit-scrollbar { display: none; }
.ph-featured-card {
  flex-shrink: 0; width: 200px; border-radius: 12px; overflow: hidden;
  background: white; border: 1px solid var(--border);
}
.ph-featured-card img { width: 100%; height: 140px; object-fit: cover; }
.ph-featured-info { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ph-featured-info span:first-child { font-weight: 600; font-size: 13px; }
.ph-list-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.ph-list-item .item-name { font-weight: 600; font-size: 15px; display: block; }

@media (min-width: 640px) {
  .tmpl-classic .item-img { width: 100px; height: 100px; }
  .gallery-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Need Assistance */
.assistance-bar {
  padding: 16px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(transparent, #fafafa 30%);
  z-index: 30;
}
.assistance-btn {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: block;
  padding: 16px;
  background: var(--biz-primary);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.assistance-btn:active { transform: scale(0.98); }

.assistance-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 100; display: flex; align-items: flex-end; justify-content: center;
}
.assistance-modal.hidden { display: none; }
.assistance-sheet {
  background: white; width: 100%; max-width: 420px;
  border-radius: 20px 20px 0 0; padding: 24px 20px 32px;
  animation: sheetUp 0.25s ease;
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.assistance-sheet h3 { font-size: 18px; margin-bottom: 4px; text-align: center; }
.assist-hint { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 16px; }
.assist-option {
  display: block; width: 100%; padding: 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: white;
  font-size: 15px; font-weight: 600; font-family: inherit; text-align: left;
  cursor: pointer; transition: background 0.15s;
}
.assist-option:hover { background: var(--bg-light); }
.assist-option:disabled { opacity: 0.6; }
.assist-cancel {
  display: block; width: 100%; padding: 14px; margin-top: 8px;
  border: none; background: transparent; color: var(--text-muted);
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.assist-status {
  text-align: center; padding: 12px; margin-top: 12px;
  background: #f0fdf4; color: #166534; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.assist-status.hidden { display: none; }

@media (min-width: 600px) {
  .assistance-modal { align-items: center; }
  .assistance-sheet { border-radius: 16px; margin: 20px; }
}

/* Table selection in assistance sheet */
.assist-table-field {
  margin-bottom: 14px;
}
.assist-table-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.assist-select, .assist-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  background: white;
}
.assist-select:focus, .assist-input:focus {
  outline: none;
  border-color: var(--biz-primary);
  box-shadow: 0 0 0 3px rgba(20,97,196,0.12);
}

/* Add to order */
.add-order-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--biz-primary);
  background: white;
  color: var(--biz-primary);
  border-radius: 8px;
  cursor: pointer;
}
.add-order-btn:active { background: var(--bg-light); }

/* Cart bar */
.cart-bar {
  position: sticky;
  bottom: 0;
  z-index: 35;
  padding: 12px 16px 16px;
  background: linear-gradient(transparent, #fafafa 25%);
}
.cart-bar.hidden { display: none; }
.cart-bar-btn {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  background: var(--biz-secondary, #1a1a2e);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.cart-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 110; display: flex; align-items: flex-end; justify-content: center;
}
.cart-modal.hidden { display: none; }
.cart-sheet {
  background: white; width: 100%; max-width: 440px;
  border-radius: 20px 20px 0 0; padding: 20px 20px 28px;
  max-height: 85vh; overflow-y: auto;
}
.cart-sheet-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.cart-sheet-header h3 { font-size: 18px; margin: 0; }
.cart-close {
  border: none; background: var(--bg-light); width: 36px; height: 36px;
  border-radius: 50%; font-size: 22px; cursor: pointer; line-height: 1;
}
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cart-line-info strong { font-size: 14px; }
.cart-qty {
  display: flex; align-items: center; gap: 8px;
}
.cart-qty button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: white; font-size: 16px; cursor: pointer; font-family: inherit;
}
.cart-line-total { font-weight: 700; font-size: 14px; white-space: nowrap; }
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 4px; font-size: 16px;
}

@media (min-width: 600px) {
  .cart-modal { align-items: center; }
  .cart-sheet { border-radius: 16px; margin: 20px; }
}

/* When both cart and assistance bars exist, stack */
.assistance-bar { position: relative; }