/* Merchant storefront skin (slug URL when storefront_enabled or ?storefront=1) */
/* Default = original white cart chrome. .is-branded = Website design colours (logo override on). */
:root {
  --navy: #003246;
  --navy-deep: #002433;
  --navy-soft: #0a3d52;
  --gold: #e2b04d;
  --gold-deep: #c9963a;
  --site-text: #ffffff;
  --cart-btn: #3ecf8e;
  --floating-basket: #000000;
  --floating-basket-text: #ffffff;
  --storefront-header-h: 64px;
}

/*
 * Storefront-only action colour (html.is-storefront set by registerStorefrontChrome).
 * Covers Add to cart, Go to checkout, Place Order, Go home.
 * Size / price chips stay black like the marketplace portal.
 * Subscribe (.el-button--success) stays default green — do not theme it.
 * Marketplace portal does not get this class — keeps default green.
 */
html.is-storefront .btn-green,
html.is-storefront .btn-green:focus,
html.is-storefront .btn-green:hover,
html.is-storefront .btn-grey:hover,
html.is-storefront .btn-green-line:hover,
html.is-storefront .badge.badge-green,
html.is-storefront .quantity-add-cart.btn-grey {
  background-color: var(--cart-btn, #3ecf8e) !important;
  border-color: var(--cart-btn, #3ecf8e) !important;
  color: #fff !important;
}

html.is-storefront .btn-green-line,
html.is-storefront .border-green {
  border-color: var(--cart-btn, #3ecf8e) !important;
}

html.is-storefront .btn-white,
html.is-storefront .text-green {
  color: var(--cart-btn, #3ecf8e) !important;
}

/* Item modal size/price box — match portal black (do not use storefront green) */
html.is-storefront .btn-group .btn.active,
html.is-storefront .btn-group-toggle .btn.active,
html.is-storefront .choose-sizex .btn.active {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* Mobile floating "View basket" bar (Just Eat–style total + CTA) */
html.is-storefront .floating-cart .btn-black,
html.is-storefront .floating-cart .btn-black:focus,
html.is-storefront .floating-cart .btn-black:hover {
  background-color: var(--floating-basket, #000) !important;
  border-color: var(--floating-basket, #000) !important;
  color: var(--floating-basket-text, #fff) !important;
}

html.is-storefront .floating-cart .btn-black.is-dimmed,
html.is-storefront .floating-cart .btn-black.is-dimmed:focus,
html.is-storefront .floating-cart .btn-black.is-dimmed:hover {
  opacity: 0.5 !important;
}

html.is-storefront .floating-cart count {
  background: var(--cart-btn, #3ecf8e);
  color: #fff;
}

.storefront-top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.storefront-top-nav {
  min-height: 64px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-wrap: nowrap;
}

/* Logo shrinks on phones; on desktop stay content-sized so nav keeps a row */
.storefront-top .storefront-logo-col {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

@media (min-width: 992px) {
  .storefront-top .storefront-logo-col {
    flex: 0 1 auto;
    max-width: 240px;
  }
}

.storefront-top .storefront-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Website-door desktop links: one horizontal row (not a stacked column) */
.storefront-top .storefront-nav-links {
  flex: 1 1 auto;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem;
  min-width: 0;
  overflow-x: auto;
}

.storefront-top .storefront-actions ul.top-menu {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.storefront-logo {
  max-width: 100%;
  min-width: 0;
}

.storefront-logo a {
  display: block;
  max-width: 100%;
}

.storefront-logo img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.storefront-logo.is-override img {
  max-height: 44px;
  max-width: min(180px, 100%);
  height: auto;
  border-radius: 0;
}

@media (max-width: 575.98px) {
  .storefront-logo.is-override img {
    max-height: 36px;
    max-width: min(140px, 100%);
  }
}

@media (min-width: 992px) {
  .storefront-logo.is-override img {
    max-height: 56px;
    max-width: 220px;
  }
}

/* Order tracking header: keep wide override logo on the left, icons on the right */
.order-track-top #top-navigation {
  flex-wrap: nowrap;
  margin-left: 0;
  margin-right: 0;
}

.order-track-top .storefront-logo-col {
  min-width: 0;
  flex: 1 1 auto;
  max-width: calc(100% - 120px);
}

.order-track-top .storefront-actions {
  flex: 0 0 auto;
}

.order-track-top .storefront-logo,
.order-track-top .storefront-logo a {
  max-width: 100%;
  min-width: 0;
}

.order-track-top .storefront-logo img,
.order-track-top .storefront-logo.is-override img,
.order-track-top .img-200 {
  max-width: 100% !important;
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 992px) {
  .order-track-top .storefront-logo img,
  .order-track-top .storefront-logo.is-override img,
  .order-track-top .img-200 {
    max-height: 52px !important;
  }
}

/* Checkout header: back link + wide logo must share one row without clipping */
.checkout-storefront-top #top-navigation.checkout-top-nav {
  flex-wrap: nowrap;
  margin-left: 0;
  margin-right: 0;
}

.checkout-storefront-top .checkout-logo-col {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

.checkout-storefront-top .back-arrow {
  white-space: nowrap;
}

.checkout-storefront-top .storefront-logo,
.checkout-storefront-top .storefront-logo.top-logo,
.checkout-storefront-top .top-logo {
  max-width: 100%;
  min-width: 0;
}

.checkout-storefront-top .storefront-logo a,
.checkout-storefront-top .top-logo a {
  display: block;
  max-width: 100%;
}

.checkout-storefront-top .storefront-logo img,
.checkout-storefront-top .storefront-logo.is-override img,
.checkout-storefront-top .top-logo img,
.checkout-storefront-top .img-200 {
  max-width: 100% !important;
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

@media (min-width: 992px) {
  .checkout-storefront-top .storefront-logo img,
  .checkout-storefront-top .storefront-logo.is-override img,
  .checkout-storefront-top .top-logo img,
  .checkout-storefront-top .img-200 {
    max-height: 52px !important;
  }
}

.storefront-logo-text,
.storefront-brand-name {
  font-size: 1.1rem;
  color: #222;
}

.storefront-nav-link {
  color: #222;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

.storefront-nav-link:hover {
  color: #000;
  text-decoration: none;
}

.storefront-phone {
  color: #222;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.storefront-phone:hover {
  color: #000;
  text-decoration: none;
}

.storefront-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa;
  margin-top: 2rem;
}

/* Website-door checkout/track: merchant override logo in Mealgo footer slot */
.sub-footer .footer-logo.is-override,
.sub-footer .footer-logo.is-override a {
  display: block;
  max-width: 180px;
  min-width: 0;
}

.sub-footer .footer-logo.is-override img,
.sub-footer .footer-logo.is-override .img-200 {
  max-width: 180px !important;
  max-height: 50px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 480px) {
  .sub-footer .footer-logo.is-override,
  .sub-footer .footer-logo.is-override a {
    max-width: 140px;
  }

  .sub-footer .footer-logo.is-override img,
  .sub-footer .footer-logo.is-override .img-200 {
    max-width: 140px !important;
    max-height: 30px !important;
  }
}

/* Branded chrome: only when Website design logo override is enabled */
.storefront-top.is-branded {
  border-bottom: none;
  background: var(--navy);
  color: var(--site-text);
}

/* Theme #top-navigation uses a light grey border — hide it on branded navy header */
.storefront-top.is-branded #top-navigation {
  border-bottom-color: var(--navy);
}

.storefront-top.is-branded .storefront-logo-text,
.storefront-top.is-branded .storefront-brand-name {
  color: var(--site-text);
}

.storefront-top.is-branded .storefront-nav-link {
  color: var(--site-text);
  opacity: 0.92;
}

.storefront-top.is-branded .storefront-nav-link:hover {
  color: var(--gold);
  opacity: 1;
}

.storefront-top.is-branded .storefront-phone {
  color: var(--site-text);
  opacity: 0.92;
}

.storefront-top.is-branded .storefront-phone:hover {
  color: var(--gold);
  opacity: 1;
}

.storefront-top.is-branded ul.top-menu > li > a,
.storefront-top.is-branded ul.top-menu a.d-inline-block {
  color: var(--site-text) !important;
}

.storefront-top.is-branded ul.top-menu > li > a:hover {
  color: var(--gold) !important;
}

/* Cart SVG + hamburger bars ignore `color` — tint from header luminance */
.storefront-top.is-branded .cart-handle img {
  filter: var(--chrome-icon-filter, brightness(0) invert(1));
}

.storefront-top.is-branded .hamburger-inner,
.storefront-top.is-branded .hamburger-inner::before,
.storefront-top.is-branded .hamburger-inner::after {
  background-color: var(--chrome-icon, var(--site-text)) !important;
}

.storefront-top.is-branded .badge,
.storefront-top.is-branded .notification-count {
  background: var(--gold);
  color: #1a1a1a;
}

.storefront-footer.is-branded {
  border-top: none;
  background: var(--navy-deep);
  color: color-mix(in srgb, var(--site-text) 70%, transparent);
  /* Compact bar ~header height; zero theme footer margin so body navy doesn’t look like a tall footer */
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  min-height: var(--storefront-header-h, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.storefront-footer.is-branded .container {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  width: 100%;
}

.storefront-footer.is-branded p,
.storefront-footer.is-branded .text-muted {
  color: inherit !important;
  text-align: center;
  margin: 0;
}

.storefront-footer.is-branded a {
  color: var(--site-text);
  text-decoration: none;
}

.storefront-footer.is-branded a:hover {
  color: var(--gold);
}

/* When branded, fill overscroll / bottom strip with footer colour; keep order content white */
body:has(.storefront-footer.is-branded),
html:has(.storefront-footer.is-branded) {
  background-color: var(--navy-deep);
}

body:has(.storefront-footer.is-branded) .page-content.storefront-page {
  background-color: #fff;
}

.storefront-page .join-section,
.storefront-page .template_join {
  display: none !important;
}

.storefront-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
}

.storefront-hero-overlay {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.storefront-hero-logo {
  max-height: 96px;
  width: auto;
  border-radius: 8px;
  background: #fff;
  padding: 0.5rem;
}

.storefront-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
}

.storefront-hero-lead {
  font-size: 1.15rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.95;
}

.storefront-order-btn {
  min-width: 12rem;
  font-weight: 600;
}

.storefront-content h1 {
  font-size: 2rem;
  font-weight: 700;
}

.storefront-about-body {
  line-height: 1.7;
}

.storefront-hours li {
  color: #444;
}

.storefront-map,
.storefront-map-placeholder {
  width: 100%;
  min-height: 280px;
  background: #f0f0f0;
}

.storefront-gallery-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/*
 * Item details modal (mobile full-screen): keep Add to cart visible.
 * Only the body scrolls when options/addons are long. Uses 100dvh so the
 * footer is not clipped by mobile browser chrome (100vh issue).
 */
#itemModal .modal-dialog.modal-full {
  margin: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#itemModal .modal-dialog.modal-full.modal-dialog-centered {
  min-height: 100%;
  align-items: stretch;
}

#itemModal .modal-full .modal-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  border: none;
  border-radius: 0;
}

#itemModal .modal-full .modal-header {
  flex-shrink: 0;
}

#itemModal .modal-full .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#itemModal .modal-full .item-modal-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/*
 * Just Eat-style item modal + list row (left_image_round / mealgo only).
 * Structure matches Just Eat; colours stay light for CurryBazar/mealgo.
 */
.je-menu-row .je-menu-thumb {
  overflow: hidden;
  border-radius: 8px;
}

.je-menu-row .je-menu-title {
  font-weight: 700;
  font-size: 1rem;
}

.je-menu-row .prices {
  font-weight: 600;
  font-size: 0.95rem;
}

.je-menu-row .menu-item-description {
  color: #666;
  font-size: 0.85rem;
  line-height: 1.35;
}

#itemModal .item-modal-justeat .je-item-title {
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
}

#itemModal .item-modal-justeat .je-item-from-price {
  font-size: 0.95rem;
  color: #444;
}

#itemModal .item-modal-justeat .je-item-description,
#itemModal .item-modal-justeat .je-item-description p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.45;
}

#itemModal .item-modal-justeat .je-size-heading {
  font-weight: 700;
  font-size: 1rem;
}

#itemModal .item-modal-justeat .je-required-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #e9ecef;
  color: #333;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Match Cooking Reference / addon "Required" to the grey chip (not yellow) */
#itemModal .addon-required {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #e9ecef;
  color: #333;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

#itemModal .item-modal-justeat .je-size-list {
  border-top: 1px solid #eee;
}

#itemModal .item-modal-justeat .je-size-row {
  position: relative;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

#itemModal .item-modal-justeat .je-size-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

#itemModal .item-modal-justeat .je-size-row-inner {
  padding: 0.85rem 0.15rem;
  gap: 0.75rem;
}

#itemModal .item-modal-justeat .je-radio {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 2px solid #bbb;
  border-radius: 50%;
  position: relative;
  background: #fff;
}

#itemModal .item-modal-justeat .je-radio.checked {
  border-color: var(--cart-btn, #f36d00);
}

#itemModal .item-modal-justeat .je-radio.checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cart-btn, #f36d00);
  transform: translate(-50%, -50%);
}

#itemModal .item-modal-justeat .je-size-name {
  font-weight: 600;
  font-size: 0.95rem;
}

#itemModal .item-modal-justeat .je-size-price {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

html.is-storefront #itemModal .item-modal-justeat .je-radio.checked {
  border-color: var(--cart-btn, #3ecf8e);
}

html.is-storefront #itemModal .item-modal-justeat .je-radio.checked::after {
  background: var(--cart-btn, #3ecf8e);
}

/* Reservation form: muted Reserve until email/details are valid */
#section-booking .booking-reserve-btn.is-booking-incomplete.el-button--success,
#section-booking .booking-reserve-btn.is-booking-incomplete.el-button--success:hover,
#section-booking .booking-reserve-btn.is-booking-incomplete.el-button--success:focus {
  background: #c8e6d4 !important;
  border-color: #b7dcc6 !important;
  color: #6b8f7a !important;
  cursor: not-allowed;
}

#section-booking .booking-field-error {
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: 600;
}

#section-booking .el-input.is-email-invalid .el-input__wrapper {
  box-shadow: 0 0 0 1px #c0392b inset !important;
  background: #fff5f5;
}