/* assets/css/guest.css - Guest Application Styles */

/* Header & Table Banner */
.guest-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--accent-gold);
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.table-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: var(--accent-gold-glow);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  background: var(--accent-gold);
  color: #000;
  border-color: var(--accent-gold);
}

@media (max-width: 380px) {
  .guest-header { padding: 0.7rem 0.85rem; }
  .brand-title { font-size: 1rem; }
  .brand-logo { width: 36px; height: 36px; }
  .icon-btn { width: 34px; height: 34px; font-size: 0.9rem; }
}

/* Landing Hero Page */
.hero-landing {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1.5rem;
  text-align: center;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.4);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.4) 0%, rgba(11, 15, 25, 0.95) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  margin: auto 0;
}

.hero-logo {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 3px solid var(--accent-gold);
  box-shadow: var(--shadow-glow);
  margin-bottom: 1.25rem;
}

/* Header actions row (table badge + language switch) and footer row (hours/address) --
   share the same max-width as .hero-content at wider viewports so the whole hero
   stays visually aligned as one column instead of spreading to the raw viewport
   edges while the content in between stays narrow and centered. */
.hero-header-row {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.hero-lang-btn {
  color: var(--text-main);
  border-color: var(--accent-gold);
}

.hero-footer-row {
  position: relative;
  z-index: 5;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-top: 1.5rem;
}

@media (min-width: 1024px) {
  .hero-header-row,
  .hero-footer-row {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-name {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.hero-tagline {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 380px) {
  .hero-landing { padding: 1.5rem 1rem; }
  .hero-logo { width: 88px; height: 88px; }
  .hero-name { font-size: 1.7rem; }
  .hero-tagline { font-size: 0.9rem; margin-bottom: 1.5rem; }
}

@media (min-width: 1024px) {
  .hero-content { max-width: 640px; margin: auto auto; }
}

.hero-menu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

.menu-card-btn {
  padding: 1.25rem 1rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.menu-card-btn:hover {
  border-color: var(--accent-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

.menu-card-btn i {
  font-size: 1.8rem;
  color: var(--accent-gold);
}

/* Promotions Banner Strip (guest/landing.php) */
.promo-banner-row {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  max-width: 100%;
  margin: 1.25rem auto 0;
  padding: 0.25rem 0.1rem 0.5rem;
  scrollbar-width: none;
}
.promo-banner-row::-webkit-scrollbar {
  display: none;
}

.promo-banner-card {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  height: 110px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
  transition: all var(--transition-fast);
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(0,0,0,0.35));
}

.promo-banner-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-gold);
  box-shadow: var(--shadow-glow);
}

.promo-banner-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.promo-banner-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  z-index: 1;
}

.promo-banner-title {
  position: relative;
  z-index: 2;
  padding: 0.6rem 0.75rem;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

@media (max-width: 560px) {
  .promo-banner-card { width: 180px; height: 96px; }
}

/* Promo badge on item cards + category ribbon (guest/menu.php) */
/* Compact badge sizing for the small item-thumbnail overlay context (the
   base .badge size is tuned for more spacious places like admin/backup.php's
   table, where "CHEF SPECIAL" fits fine; on a 100px item photo it doesn't) --
   shrinks the text and, if it's still too long, ellipsizes instead of
   wrapping to a second line or getting clipped by the image's overflow:hidden. */
.item-thumb-badge {
  font-size: 0.58rem;
  padding: 0.18rem 0.4rem;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-promo-badge {
  background: linear-gradient(135deg, var(--accent-gold), #b8860b);
  color: #000;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.category-promo-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-inline-start: 0.6rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: rgba(212, 175, 55, 0.18);
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  vertical-align: middle;
}

/* Highlight flash for deep-linked item/category anchors */
@keyframes promoHighlightFlash {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.9); }
  50% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}
.promo-highlight-flash {
  animation: promoHighlightFlash 1.4s ease-out 2;
  border-radius: var(--radius-lg);
}

/* Category Navigation -- vertical sidebar on tablet/desktop (so it doesn't
   waste the extra width and stays visible while scrolling through items),
   horizontal scrollable strip on mobile (where a sidebar would eat too much
   of the screen). Sits alongside .menu-sections-container inside
   .menu-page-layout. */
.menu-page-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.menu-category-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 160px;
  flex-shrink: 0;
  padding: 0.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.cat-pill {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  /* Wraps to 2 lines instead of truncating -- keeps the sidebar narrow
     while still showing the full category name (mobile strip below forces
     single-line + centered icon back on, since wrapping there would break
     the horizontal layout). */
  white-space: normal;
  line-height: 1.2;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.cat-pill i { width: 0.9em; font-size: 0.85em; flex-shrink: 0; margin-top: 0.2em; text-align: center; color: var(--text-light); transition: color var(--transition-fast); }

.cat-pill.active, .cat-pill:hover {
  background: var(--accent-gold-glow);
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

.cat-pill.active i, .cat-pill:hover i {
  color: var(--accent-gold);
}

@media (max-width: 900px) {
  .menu-page-layout {
    flex-direction: column;
    padding: 0;
    max-width: 100%;
  }

  .menu-category-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    position: sticky;
    top: 61px;
    z-index: 90;
    max-height: none;
    border-radius: 0;
    border-width: 0 0 1px 0;
    padding: 0.75rem 1rem;
    scrollbar-width: none;
  }

  .menu-category-sidebar::-webkit-scrollbar {
    display: none;
  }

  .cat-pill { border-radius: var(--radius-full); white-space: nowrap; align-items: center; }
  .cat-pill i { margin-top: 0; }
}

/* Search & Filter Bar */
.search-filter-section {
  padding: 1rem 1.25rem 0.5rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper i {
  position: absolute;
  left: 1rem;
  color: var(--text-muted);
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 0.95rem;
}

.filter-tags-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.filter-chip {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.filter-chip.active {
  background: var(--accent-gold-glow);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Food Items Grid/List */
.menu-sections-container {
  padding: 1rem 0 6rem 0;
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .menu-sections-container { padding: 1rem 1.25rem 6rem 1.25rem; }
}

.category-section {
  margin-bottom: 2.5rem;
}

.category-header-title {
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-header-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.items-grid {
  /* auto-fill/minmax sizes columns off the space .items-grid actually has
     (not the raw viewport), so it automatically adapts now that the
     category sidebar eats part of the width on tablet/desktop -- no
     viewport-based breakpoint needs to know the sidebar exists. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

@media (min-width: 1024px) {
  .items-grid { gap: 1.25rem; }
}

@media (max-width: 380px) {
  /* Small phones -- tighten spacing so nothing feels cramped */
  .item-card { gap: 0.75rem; padding: 0.75rem; }
  .item-img-wrapper { width: 80px; height: 80px; }
  .item-title { font-size: 0.98rem; }
  .item-desc { font-size: 0.8rem; }
  .item-price { font-size: 1rem; }
}

.item-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.item-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-md);
}

.item-img-wrapper {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.item-title {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Small veg/non-veg indicator square (standard menu convention: green dot in a
   green square = vegetarian, brown/red dot in a red square = non-vegetarian).
   Only rendered when the item has an explicit classification, so unrelated
   items (e.g. drinks) don't show a misleading mark. */
.veg-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid;
  position: relative;
  vertical-align: middle;
  margin-inline-end: 0.4rem;
}
.veg-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.veg-indicator.veg { border-color: var(--accent-success); }
.veg-indicator.veg::after { background: var(--accent-success); }
.veg-indicator.nonveg { border-color: var(--accent-danger); }
.veg-indicator.nonveg::after { background: var(--accent-danger); }

.item-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.25rem;
}

.item-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.item-price {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent-gold);
}

.item-price-old {
  text-decoration: line-through;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-right: 0.4rem;
}

.fav-btn {
  color: var(--text-light);
  font-size: 1.1rem;
  transition: color var(--transition-fast);
}

.fav-btn.active {
  color: var(--accent-danger);
}

/* Small info pill used for variant/size hints on item cards */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
}

.pill-info {
  background: rgba(2, 132, 199, 0.12);
  color: var(--accent-secondary);
  border: 1px solid var(--accent-secondary);
}

/* Admin-managed Dietary Tags (Halal, Seafood, Contains Nuts, etc.) shown on
   item cards -- neutral/muted so they don't compete visually with the
   promo/chef badges on the photo. */
.pill-tag {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.item-dietary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

/* Floating Cart Drawer Bar */
.floating-cart-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 500px;
  z-index: 200;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--accent-gold);
  box-shadow: var(--shadow-glow);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 380px) {
  .floating-cart-bar { width: calc(100% - 1.5rem); bottom: 0.85rem; padding: 0.7rem 1rem; }
}

.cart-bar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--accent-gold);
  color: #000;
  font-weight: 700;
  border-radius: var(--radius-full);
}

/* Modal Windows -- centered on every breakpoint (mobile, tablet, desktop) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-card {
  width: 100%;
  max-width: 550px;
  max-height: 88vh;
  margin: auto;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
  transform: scale(0.94);
  opacity: 0;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.modal-overlay.active .modal-card {
  transform: scale(1);
  opacity: 1;
}

@media (max-width: 560px) {
  .modal-overlay { padding: 0.6rem; align-items: center; }
  .modal-card { max-height: 92vh; padding: 1.15rem; border-radius: var(--radius-md); }
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-primary);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}