/* Improved menu card + responsive rules
   - Targets .menu-grid and .menu-item-card (used throughout templates/menu.html)
   - Small, high-specificity rules so it reliably overrides older inline/legacy styles
   - Focus on readable typography, accessible contrast, consistent spacing, and
     predictable responsive breakpoints.
*/

:root {
  --menu-bg: #ffffff;
  --menu-card-bg: #ffffff;
  --menu-card-border: rgba(0, 0, 0, 0.06);
  --menu-gap: 20px;
  --menu-radius: 12px;
  --menu-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
  --menu-accent: #2b6cb0; /* blue accent */
  --muted: #64748b;
}

/* Grid layout - use responsive auto-fill for flexibility */
.menu-grid {
  display: grid !important;
  /* mobile-first: single-column by default */
  grid-template-columns: 1fr !important;
  gap: var(--menu-gap) !important;
  padding: 12px 0 !important;
  align-items: start;
}

/* Card baseline */
.menu-item-card,
.menu-item {
  background: var(--menu-card-bg) !important;
  border-radius: var(--menu-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--menu-shadow) !important;
  border: 1px solid var(--menu-card-border) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  cursor: pointer !important;
  text-align: left !important;
}

.menu-item-card:hover,
.menu-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(16, 24, 40, 0.08) !important;
}

/* Image area - keep aspect ratio and center */
.menu-item-card .card-image,
.menu-item .item-image {
  width: 100% !important;
  /* Use a fixed (responsive) height so images line up with the larger card sizes */
  height: 380px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: linear-gradient(180deg, #f8fafc, #eef2f7) !important;
}
.menu-item-card .card-image img,
.menu-item .item-image img {
  position: relative !important;
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Body content */
.menu-item-card .card-body,
.menu-item .menu-item-content,
.menu-item .card-body {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.menu-item-card .card-title,
.menu-item .card-title,
.menu-item .item-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #0f1724 !important;
}

.menu-item-card .card-category,
.menu-item .card-category {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
}

.menu-item-card .card-description,
.menu-item .card-description {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.3 !important;
  display: block !important;
  max-height: 3.6em !important; /* clamp to ~3 lines */
  overflow: hidden !important;
}

/* Rating area - keep compact and layout as requested:
   Order in card-body should be: image -> title -> description -> rating ->
   actions where the first row is "- 1 + [cart icon]" and below it a centered
   "Baholash" (rating) button. Prices are hidden by default.
*/
/* Image area - keep aspect ratio and center
  Note: do NOT apply padding/height to the <img> element itself — only to the
  container (.card-image/.item-image). The <img> inside is positioned
  absolutely to fill the container. This avoids images disappearing when
  template-level rules conflict. */

/* Compact rating row: show stars and average score inline */
.menu-item-card .card-rating,
.menu-item .card-rating {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* Card actions: stack rows (quantity+cart row, then rating button) */
.menu-item-card .card-actions,
.menu-item .card-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important; /* keep actions at the bottom */
}

/* First row: form with quantity controls and cart icon aligned horizontally */
.menu-item-card .card-actions > form,
.menu-item .card-actions > form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.menu-item-card .qty-controls,
.menu-item .qty-controls {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
}

.menu-item-card .qty-btn,
.menu-item .qty-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #f1f5fb !important;
  color: var(--menu-accent) !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.menu-item-card .qty-input,
.menu-item .qty-input {
  width: 48px !important;
  padding: 6px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  text-align: center !important;
  font-weight: 600 !important;
}

/* Cart icon button placed to the right of the quantity controls */
.menu-item-card .btn-add-cart,
.menu-item .btn-add-cart {
  min-width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--menu-accent) !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 20px rgba(43, 108, 176, 0.18) !important;
}

/* Rating button: centered below the qty+cart row */
.menu-item-card .btn-rate,
.menu-item .btn-rate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: transparent !important;
  color: var(--menu-accent) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin: 0 auto !important; /* center */
}

/* Favorite/heart button: prefer top-right corner */
.menu-item-card .btn-favorite-top,
.menu-item .btn-favorite-top {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important; /* prefer right corner */
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide prices by default inside menu cards. Page-level `body.show-prices` can reveal them. */
.menu-item-card .menu-item-price,
.menu-item .menu-item-price,
.menu-item-card .item-price {
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Ensure accessibility for focus states */
.menu-item-card:focus-within,
.menu-item-card:focus {
  outline: 3px solid rgba(43, 108, 176, 0.12) !important;
  outline-offset: 2px !important;
}

/* Media queries: mobile-first improvements */
/* Tablet: two columns */
@media (min-width: 576px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .menu-item-card .card-image {
    height: 260px !important;
  }
}

/* Laptop / desktop: make cards bigger and taller images for notebooks */
/* Notebook/Desktop: three columns */
@media (min-width: 992px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
  }
  .menu-item-card {
    border-radius: 16px !important;
  }
  .menu-item-card .card-image {
    height: 380px !important; /* default desktop image height */
  }
  .menu-item-card .card-body {
    padding: 16px 18px !important;
  }
  .menu-item-card .card-title {
    font-size: 20px !important;
  }
}

@media (max-width: 575px) {
  .menu-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .menu-item-card {
    border-radius: 10px !important;
  }
  .menu-item-card .card-image {
    height: 200px !important;
  }
  .menu-item-card .card-body {
    padding: 10px !important;
  }
  .menu-item-card .card-actions {
    flex-direction: row !important;
    gap: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-item-card,
  .menu-item {
    transition: none !important;
    animation: none !important;
  }
}

/* Utility: compact grid for very narrow sidebars or embeds */
.menu-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}

/* Responsive column counts requested by user:
   - Phone: 2 columns
   - Tablet: 3 columns
   - Laptop/Desktop: 4 columns
   Also slightly reduce the card min width so cards feel less wide on large screens.
*/
/* Mobile first: default two columns for narrow phones */
@media (max-width: 575px) {
  .menu-grid {
    /* phone: single column */
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .menu-item-card {
    border-radius: 10px !important;
  }
  .menu-item-card .card-image {
    height: 200px !important;
  }
}

/* Tablet: three columns */
@media (min-width: 576px) and (max-width: 991px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }
}

/* Laptop / Desktop: show 3 columns on typical computer screens */
@media (min-width: 992px) {
  .menu-grid {
    /* 3 columns on typical desktop but keep responsive min width */
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    gap: 28px !important;
    grid-auto-columns: minmax(380px, 1fr) !important;
  }
}

/* Modal styling improvements for #itemModal */
.modal-overlay {
  display: none; /* shown by JS via display='flex' */
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.48) !important;
  padding: 20px !important;
}
.modal-content {
  width: min(980px, 98%) !important;
  max-height: calc(100vh - 120px) !important;
  overflow: hidden !important;
  display: flex !important;
  gap: 18px !important;
  background: var(--menu-card-bg) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.6) !important;
  padding: 0 !important;
}
.modal-body {
  display: flex !important;
  gap: 18px !important;
  width: 100% !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}
.modal-image {
  flex: 0 0 62% !important;
  max-width: 62% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important; /* to position overlay controls */
}
.modal-media-container {
  width: 100% !important;
  min-height: 380px !important; /* bigger image area */
  max-height: 740px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #f8fafc, #eef2f7) !important;
}
.modal-media-item {
  max-width: 100% !important;
  max-height: 740px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform 0.28s ease, opacity 0.18s ease !important;
}
.modal-media-item.active {
  opacity: 1 !important;
}
.modal-media-item:not(.active) {
  opacity: 0;
  pointer-events: none;
}
.modal-media-item.zoomed {
  transform: scale(1.8) !important;
  cursor: zoom-out;
}

/* Overlay controls on the image */
.modal-media-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.modal-media-controls .modal-nav-btn,
.modal-media-controls .modal-zoom-btn {
  pointer-events: auto; /* re-enable clicks for the buttons */
}
.modal-media-controls .modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
#modalPrevBtn {
  left: 12px !important;
}
#modalNextBtn {
  right: 12px !important;
}
.modal-media-controls .modal-zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Make image nav buttons larger on hover for clarity */
.modal-media-controls .modal-nav-btn:hover,
.modal-media-controls .modal-zoom-btn:hover {
  transform: translateY(-50%) scale(1.06);
}

/* Modal details (right column) improvements */
.modal-details {
  padding: 20px !important;
}
.modal-details #modalDescription {
  color: #334155;
  font-size: 15px;
  line-height: 1.45;
}
.modal-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-rating .rating-text {
  font-weight: 700;
  color: #0f1724;
}

/* Size/color selects: make them visually consistent */
.modal-select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}
.select-wrapper {
  position: relative;
}
.select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}

/* Quantity selector and Add button */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.quantity-selector button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #f1f5fb;
  cursor: pointer;
  font-weight: 700;
}
.quantity-selector input {
  width: 72px;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.modal-cart-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-actions form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-actions .btn-add-cart {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
}

/* Responsive: stack modal content on small screens */
@media (max-width: 780px) {
  .modal-content {
    flex-direction: column !important;
    max-height: calc(100vh - 60px) !important;
  }
  .modal-image {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  .modal-media-container {
    min-height: 260px !important;
  }
  .modal-details {
    max-width: 100% !important;
  }
  .modal-media-controls .modal-nav-btn {
    width: 40px;
    height: 40px;
  }
}
.modal-details {
  flex: 1 1 52% !important;
  max-width: 52% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-right: 12px !important;
}
.modal-rating .stars .star {
  font-size: 20px !important;
  color: #e6e9eb !important;
  margin-right: 6px !important;
}
.modal-rating .stars .star.filled {
  color: #ffd166 !important;
}
.modal-actions {
  margin-top: 8px !important;
}

/* Increase overall content width so menu-section has more space */
.menu-container {
  max-width: 1600px !important;
}
.content-area {
  width: calc(100% - 360px) !important; /* account for sidebar */
  max-width: 1320px !important;
}

/* Option badges for sizes and colors on cards */
.card-options {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap;
  align-items: center;
}
.option-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  background: #f1f5fb;
  color: #0f1724;
  font-weight: 600;
  font-size: 12px;
  margin-right: 6px;
}
.color-badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-right: 6px;
  vertical-align: middle;
}
.card-sizes,
.card-colors {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* End of menu-cards.css */