/* ── Chicken N Chicken Brand ── */
/* Primary: #f17d00 (orange)  Secondary: #9d292b (red)  Dark: #3d0d0f */

:root {
  --cnc-red: #9d292b;
  --cnc-orange: #f17d00;
  --cnc-orange-light: #f89020;
  --cnc-dark: #3d0d0f;
  --cnc-light: #fff8f0;
}

/* ═══ ALL BUTTONS — CONSISTENT ORANGE + BLACK TEXT ═══ */
.btn-green,
.btn-grey:hover,
.badge.badge-green,
.custom-control-input:checked ~ .custom-control-label::before,
.btn-green-line:hover,
.btn-theme,
.btn-primary,
.section-promo,
.layer-content,
.add_to_cart,
button.add_to_cart,
.add_to_cart span,
.add_to_cart .label,
.el-button--success,
.el-button--primary {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
  font-weight: 700 !important;
}
.btn-green:focus,
.btn-green:hover,
.btn-theme:hover,
.btn-primary:hover,
.add_to_cart:hover,
.el-button--success:hover,
.el-button--primary:hover {
  background: var(--cnc-red) !important;
  border-color: var(--cnc-red) !important;
  color: #fff !important;
}

/* Size selector pills — orange outline, not black */
.btn-black.rounded-pill,
.quantity a.rounded-pill,
.item-size-button,
.rounded-pill.active,
.rounded-pill[class*="btn"] {
  background: var(--cnc-dark) !important;
  border-color: var(--cnc-dark) !important;
  color: #fff !important;
}

/* Green text → Orange */
.text-green,
a:hover,
ul.top-menu a:hover,
.list-inline a:hover,
.menu-category a:hover,
.siderbar-menu li.active a,
#menu-category .col a.active,
.btn.normal:hover,
.menu-carousel a.active,
.menu-carousel a:hover {
  color: var(--cnc-orange) !important;
}

/* Green borders → Orange */
.btn-green-line,
.border-green {
  border: 1px solid var(--cnc-orange) !important;
  color: var(--cnc-orange) !important;
}
.btn-green-circle,
.btn-green-circle:hover {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
}
.btn-white {
  background: #fff;
  color: var(--cnc-orange) !important;
}
.badge-green {
  background: var(--cnc-orange) !important;
}

/* ═══ BLACK/RED BUTTONS — ALWAYS white text ═══ */
.btn-black,
.btn.btn-black,
a.btn-black,
button.btn-black,
.btn-black.w-100,
.drawer-menu .btn-black,
.modal .btn-black,
.modal-footer .btn-black,
.rounded-button-icon:hover {
  background: var(--cnc-red) !important;
  color: #fff !important;
}
.btn-black:focus,
.btn-black:hover,
.btn.btn-black:hover {
  background: var(--cnc-dark) !important;
  color: #fff !important;
}
/* Disabled green/orange buttons — keep readable */
.btn-green:disabled,
.btn-green[disabled],
.btn.btn-green:disabled {
  background: var(--cnc-orange) !important;
  color: #fff !important;
  opacity: 0.6;
}
/* Til kassen / checkout button — always bold orange */
.btn-green.w-100:not(:disabled),
.cart-summary .btn-green,
.sticky-cart .btn-green {
  background: var(--cnc-orange) !important;
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 700;
}

/* ═══ TOP NAV BAR ═══ */
#top-navigation {
  background: var(--cnc-dark) !important;
}
/* Nav text white — scoped to direct nav elements only, NOT drawers/modals */
#top-navigation > div > div a,
#top-navigation > div > div i,
#top-navigation > div > div span,
#top-navigation .top-logo a,
#top-navigation ul#vue-cart-preview > li > a,
#top-navigation ul#vue-cart-preview > li > a *,
#top-navigation ul#vue-cart-preview > li > div,
#top-navigation ul#vue-cart-preview > li.line-left > a {
  color: #fff !important;
}
#top-navigation ul#vue-cart-preview > li > a:hover,
#top-navigation ul#vue-cart-preview > li > a:hover * {
  color: var(--cnc-orange) !important;
  opacity: 1;
}
/* Logged-in user name in nav */
#top-navigation .dropdown > a,
#top-navigation .dropdown > a *,
#top-navigation .dropdown-toggle,
#top-navigation .dropdown-toggle * {
  color: #fff !important;
}
#top-navigation .dropdown > a:hover,
#top-navigation .dropdown > a:hover * {
  color: var(--cnc-orange) !important;
}
/* Only invert the cart bag SVG, not profile pics or drawer content */
#top-navigation .cart-handle img,
#top-navigation .cart-handle svg {
  filter: brightness(0) invert(1) !important;
}
/* Profile pic — no filter */
#top-navigation .profile-photo img,
#top-navigation img.rounded-circle,
#top-navigation img[src*="avatar"],
#top-navigation img[src*="profile"],
.el-drawer img,
.drawer-menu img {
  filter: none !important;
}
#top-navigation .hamburger-inner,
#top-navigation .hamburger-inner::before,
#top-navigation .hamburger-inner::after {
  background-color: #fff !important;
}
#top-navigation .top-logo img {
  max-height: 55px;
  width: auto;
  padding: 4px 0;
}
#top-navigation {
  padding: 10px 0 !important;
}
/* Nav: logo left, items far right with spacing */
#top-navigation > .row {
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
/* Middle col (address widget) — collapse it */
#vue-widget-nav {
  display: none !important;
  flex: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Right col — push to far right */
#top-navigation > .row > .col-lg-auto.d-flex.justify-content-end,
#top-navigation > .row > div:last-child {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
ul#vue-cart-preview.top-menu {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
ul#vue-cart-preview.top-menu > li {
  margin: 0 0 0 24px !important;
  padding: 0 !important;
}
ul#vue-cart-preview.top-menu > li:first-child {
  margin-left: 0 !important;
}

/* Hide distance label */
li:has(.zmdi-pin),
[class*="distance"],
.info-items-dot-separator + li:has(.zmdi-pin) {
  display: none !important;
}

/* Hide top search bar */
#vue-cart-preview li a[href*="search"],
#vue-cart-preview li:has(a[href*="search"]),
.widget-search,
a[href="/search"] {
  display: none !important;
}

/* Hide static map image (403 from Google — we use embed instead) */
.section-address img[src*="staticmap"],
img[src*="googleapis.com/maps/api/staticmap"] {
  display: none !important;
}

/* Mobile sidebar / drawer menu */
.drawer-menu a,
.drawer-menu li a,
.drawer-menu-mobile a,
.drawer-menu-mobile li a,
.el-drawer a,
.el-drawer span,
.el-drawer li,
.el-drawer p {
  color: var(--cnc-dark) !important;
}
.drawer-menu a:hover,
.drawer-menu li a:hover,
.drawer-menu-mobile a:hover,
.el-drawer a:hover {
  color: var(--cnc-orange) !important;
}
.el-drawer__header span,
.drawer-menu #el-drawer__title {
  color: var(--cnc-dark) !important;
}
/* Drawer — force all content dark and readable */
.el-drawer i,
.drawer-menu i,
.drawer-menu-mobile i {
  color: var(--cnc-dark) !important;
}
.el-drawer img,
.drawer-menu img {
  filter: none !important;
}
/* Override the #top-navigation white text for drawer */
.el-drawer,
.el-drawer *,
.el-drawer a,
.el-drawer span,
.el-drawer li,
.el-drawer p,
.el-drawer div,
.el-overlay .el-drawer *,
.el-overlay a,
.el-overlay li {
  color: #333 !important;
}
.el-drawer a:hover {
  color: var(--cnc-orange) !important;
}

/* All modals/dialogs — force dark readable text */
.modal, .modal *, .modal select, .modal option,
#orderTypeTime, #orderTypeTime *,
#orderTypeTime select, #orderTypeTime option {
  color: #333 !important;
}
.modal select, #orderTypeTime select {
  background: #fff !important;
}
/* Toggle buttons (Nu / Planlæg til senere) */
.btn-group-toggle label.active,
.modal .btn-group-toggle label.active {
  color: #fff !important;
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
}
.btn-group-toggle label {
  color: #333 !important;
}

/* Modal close button — always visible */
.modal .btn-black.btn-circle,
.modal .btn-circle,
.el-dialog .btn-circle {
  background: #333 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.modal .btn-black.btn-circle i,
.modal .btn-circle i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══ MENU PAGE ═══ */
#menu-category .nav-link.active,
#menu-category .nav-link:hover,
.menu-category a.active {
  color: var(--cnc-orange) !important;
  border-left: 3px solid var(--cnc-orange);
  font-weight: 600;
}
.item-price,
.price,
.pretty-price {
  color: var(--cnc-red) !important;
  font-weight: 700;
}
.cart-count,
.badge-cart {
  background: var(--cnc-orange) !important;
}
.merchant-banner-wrap,
.merchant-banner {
  background: linear-gradient(135deg, var(--cnc-dark), var(--cnc-red), var(--cnc-orange)) !important;
  min-height: 180px;
}

/* ═══ ITEM DIALOG / MODAL ═══ */
.item-modal-footer.modal-footer {
  background: #fff !important;
  border-top: 1px solid #eee !important;
}
.item-modal-footer .btn-green,
.item-modal-footer .btn-green.add_to_cart,
.item-modal-footer .btn-green span,
.item-modal-footer .btn-green .label {
  background: var(--cnc-red) !important;
  border-color: var(--cnc-red) !important;
  color: #fff !important;
}
.item-modal-footer .btn-green:hover,
.item-modal-footer .btn-green.add_to_cart:hover,
.item-modal-footer .btn-green:hover span,
.item-modal-footer .btn-green:hover .label {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
}
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
}
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--cnc-orange) !important;
}
.el-tag,
.el-tag--primary {
  background-color: var(--cnc-light) !important;
  border-color: var(--cnc-orange) !important;
  color: var(--cnc-red) !important;
}

/* ═══ CART SIDEBAR ═══ */
.cart-summary .btn-green {
  background: var(--cnc-orange) !important;
  color: #000 !important;
}

/* ═══ FOOTER — no gap ═══ */
.sub-footer {
  background: var(--cnc-dark) !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.sub-footer a {
  color: #ccc !important;
  font-size: 13px;
}
.sub-footer a:hover {
  color: var(--cnc-orange) !important;
}
footer {
  background: var(--cnc-dark) !important;
  color: #ccc !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}
footer a {
  color: var(--cnc-orange) !important;
}
footer p {
  color: #ccc !important;
}

/* ═══ CHECKOUT ═══ */
.checkout-wrap .btn-green,
.payment-method.active {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
}

/* ═══ HIDE MULTI-RESTAURANT UI ═══ */
.components-cuisine-list,
.section-mobileapp,
.section-newmobileapp,
.components-join,
.home-steps,
.signup-section,
.section-social-links,
.app-store-wrap,
.section-join-us,
.section-join-us2,
.section-become,
.swiperOutsideContainer {
  display: none !important;
}

/* Hide address/delivery — pickup only, keep time picker */
#vue-widget-nav,
.component-change-address,
.components-select-address,
.components-address-form,
.home-search-wrap,
#main-search-banner,
.mobile-home-banner,
.delivery-address-wrap,
.address-selection-wrap,
components-location-estimation,
.address-needed {
  display: none !important;
}
/* In the delivery details modal, hide the address row but keep time */
#ModalDeliveryDetails .modal-body > a:first-child,
.component-delivery-details .chevron-section:first-child {
  display: none !important;
}

/* ═══ MENU ITEM IMAGES — 1:1 aspect ratio ═══ */
.item-image-preview .el-image {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 8px;
  overflow: hidden;
}
.item-image-preview .el-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ═══ QUANTITY ADD-CART — match the main Læg i kurv exactly ═══ */
.btn-grey.quantity-add-cart {
  background: var(--cnc-red) !important;
  border-color: var(--cnc-red) !important;
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 8px 20px !important;
  min-width: 120px !important;
}
.btn-grey.quantity-add-cart:hover {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
}

/* ═══ CATEGORY DRAWER — item count pill readable ═══ */
div.bg-light.btn-circle.rounded-pill {
  background-color: var(--cnc-orange) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══ WHITE ICONS on dark-bg containers — override drawer/overlay/modal dark text ═══ */
/* Needs high specificity to beat .el-overlay .el-drawer * (0,2,0) */
a.item-remove,
a.item-remove i,
.el-drawer a.item-remove,
.el-drawer a.item-remove i,
.el-overlay a.item-remove,
.el-overlay a.item-remove i,
.qty-btn i,
.qty-btn .zmdi,
.el-drawer .qty-btn i,
.el-drawer .qty-btn .zmdi,
.btn-black i.zmdi,
.el-drawer .btn-black i,
.el-overlay .btn-black i,
.quantity a.rounded-pill i,
.el-drawer .quantity a.rounded-pill i,
.el-overlay .quantity a.rounded-pill i,
.close-panel i,
.el-drawer .close-panel i,
.el-overlay .close-panel i,
.rounded-button-icon i,
.el-drawer .rounded-button-icon i,
.el-overlay .rounded-button-icon i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ═══ MOBILE CART — floating button z-index ═══ */
@media (max-width: 991px) {
  .floating-cart {
    z-index: 1000 !important;
  }
}

/* ═══ SEARCH — hide Restaurant tab, only Food ═══ */
.widget-search .nav-item:first-child,
.search-tabs .nav-item:first-child {
  display: none !important;
}

/* ═══ ELEMENT PLUS BUTTONS — force orange + black ═══ */
.el-button[style*="f17d00"],
.el-button[style*="3ecf8e"],
.el-button--success,
.el-button--primary,
.el-button.white-color {
  background-color: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
  font-weight: 700 !important;
}
.el-button[style*="f17d00"]:hover,
.el-button.white-color:hover {
  background-color: var(--cnc-red) !important;
  border-color: var(--cnc-red) !important;
  color: #fff !important;
}
/* "Læg i kurv" — dark red + white default, orange + black on hover */
.el-button.white-color,
button.add_to_cart,
.add_to_cart,
.add_to_cart span,
.add_to_cart .label {
  background: var(--cnc-red) !important;
  border-color: var(--cnc-red) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.el-button.white-color:hover,
button.add_to_cart:hover,
.add_to_cart:hover,
.add_to_cart:hover span,
.add_to_cart:hover .label {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
}

/* Disabled "Læg i kurv" — lighter red, not grey */
.el-button.is-disabled.white-color,
.el-button[disabled].white-color,
button.add_to_cart:disabled,
.btn-green:disabled {
  background-color: var(--cnc-red) !important;
  border-color: var(--cnc-red) !important;
  color: #fff !important;
  opacity: 0.5 !important;
}

/* ═══ PRICE HIGHLIGHT — bigger, bolder ═══ */
.item-price,
.price,
.pretty-price,
.pretty_price,
.prices,
[class*="price"] {
  color: var(--cnc-orange) !important;
  font-weight: 800 !important;
  font-size: 1.2em !important;
}

/* ═══ CNC PICKUP BUTTONS ═══ */
.cnc-pickup-buttons {
  display: flex !important;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0;
  visibility: visible !important;
  opacity: 1 !important;
}
.cnc-btn-pickup-now,
.cnc-btn-pickup-later {
  padding: 10px 28px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--cnc-dark);
  background: #fff;
  color: var(--cnc-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.cnc-btn-pickup-now:hover,
.cnc-btn-pickup-later:hover {
  background: var(--cnc-orange);
  border-color: var(--cnc-orange);
  color: #000;
}
.cnc-btn-pickup-now.active {
  background: var(--cnc-orange);
  border-color: var(--cnc-orange);
  color: #000;
}
.cnc-btn-pickup-later.active {
  background: var(--cnc-dark);
  border-color: var(--cnc-dark);
  color: #fff;
}
.cnc-btn-contact {
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  background: var(--cnc-dark) !important;
  color: #fff !important;
  border: 2px solid var(--cnc-dark) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 18px;
  transition: all 0.2s;
}
.cnc-btn-contact:hover {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
}
.cnc-pickup-status {
  font-size: 13px;
  color: #666;
}

/* ═══════════════════════════════════════════════════════════
   FIX #1: COMPACT ITEM CARDS — reduce height ~40%
   ═══════════════════════════════════════════════════════════ */
.list-item-rows {
  margin-bottom: 6px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: #fff;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  box-shadow: 0 2px 10px rgba(241,125,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(241,125,0,0.12) !important;
}
.list-item-rows:hover {
  box-shadow: 0 6px 25px rgba(241,125,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-3px);
  border-color: var(--cnc-orange) !important;
}
.list-item-rows:active {
  transform: translateY(0);
}
/* Shrink images from 140px → 85px */
.list-item-rows .item-image-preview .el-image {
  height: 85px !important;
  width: 85px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px !important;
}
.list-item-rows .fixed-height {
  min-height: 70px !important;
}
/* Description: 2 lines, always visible */
.list-item-rows .ellipsis-2-lines {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.4 !important;
  min-height: 2.8em !important;
  max-height: 2.8em !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Tighter item name */
.list-item-rows h6 {
  font-size: 14px !important;
  margin-bottom: 1px !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX #4: STICKY CATEGORY SECTION HEADERS
   ═══════════════════════════════════════════════════════════ */
.section-menu section[data-cat_id] > h5,
section[data-cat_id] > h5 {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cnc-light);
  padding: 10px 12px;
  margin: 0 -5px 8px;
  border-bottom: 2px solid var(--cnc-orange);
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--cnc-dark) !important;
  border-radius: 0;
}
section[data-cat_id] > p {
  font-size: 14px !important;
  color: #555 !important;
  font-weight: 500 !important;
  font-style: italic !important;
  margin-bottom: 10px !important;
  padding: 0 12px;
}
section[data-cat_id] + section[data-cat_id] {
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════
   FIX #2: MAXIMIZE MENU SPACE — wider menu, tighter layout
   ═══════════════════════════════════════════════════════════ */
/* Desktop: sidebar slim, menu takes most space, cart fixed width */
@media (min-width: 992px) {
  .menu-left {
    flex: 0 0 180px !important;
    max-width: 180px !important;
    padding-right: 0 !important;
  }
  .menu-center {
    flex: 1 !important;
    max-width: calc(100% - 180px - 300px) !important;
    padding: 0 15px !important;
  }
  .menu-right {
    flex: 0 0 300px !important;
    max-width: 300px !important;
  }
}
/* ═══ HERO BANNER — full-width gradient with logo + info ═══ */
.merchant-top-header {
  background: linear-gradient(135deg, var(--cnc-dark) 0%, #5a1a1d 50%, var(--cnc-red) 100%) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.merchant-top-header .container {
  max-width: 100% !important;
  padding: 20px 30px !important;
}
.merchant-top-header .left-info {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
/* Center everything in the banner */
.merchant-top-header .d-flex.align-items-start {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}
.merchant-top-header .d-flex.align-items-start > .pl-3 {
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.merchant-top-header .cnc-pickup-buttons {
  justify-content: center !important;
}
.merchant-top-header ul.p-0 {
  justify-content: center !important;
}
.merchant-top-header .row {
  justify-content: center !important;
}
/* White text on dark banner */
.merchant-top-header h4,
.merchant-top-header h5,
.merchant-top-header li,
.merchant-top-header span,
.merchant-top-header p,
.merchant-top-header b,
.merchant-top-header .text-grey li,
.merchant-top-header .info-items-dot-separator {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.merchant-top-header .zmdi-star,
.merchant-top-header .zmdi-star-half,
.merchant-top-header .zmdi-time {
  color: var(--cnc-orange) !important;
  -webkit-text-fill-color: var(--cnc-orange) !important;
}
/* Logo on banner — white bg circle, fully visible */
.merchant-top-header .img-thumbnail {
  border: none !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 6px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}
.merchant-top-header .img-thumbnail .el-image {
  max-height: 100px !important;
  min-height: 100px !important;
  width: 100px !important;
  min-width: 100px !important;
}
.merchant-top-header .img-thumbnail .el-image img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}
/* Pickup buttons on banner — invert for visibility */
.merchant-top-header .cnc-btn-pickup-now,
.merchant-top-header .cnc-btn-pickup-later {
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
  background: transparent !important;
}
.merchant-top-header .cnc-btn-pickup-now:hover,
.merchant-top-header .cnc-btn-pickup-later:hover {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
}
.merchant-top-header .cnc-btn-pickup-now.active {
  background: var(--cnc-orange) !important;
  border-color: var(--cnc-orange) !important;
  color: #000 !important;
}
.merchant-top-header .cnc-btn-pickup-later.active {
  background: rgba(255,255,255,0.15) !important;
  border-color: #fff !important;
  color: #fff !important;
}
.merchant-top-header .cnc-btn-contact {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff !important;
}
.merchant-top-header .cnc-pickup-status {
  color: rgba(255,255,255,0.7) !important;
}
/* Mobile banner — also show with gradient */
.merchant-top-header.d-none.d-lg-block {
  display: block !important;
}
/* Hide duplicate mobile header since banner now shows on all viewports */
#vue-merchant-details + .container.d-block.d-lg-none {
  display: none !important;
}
/* Category pill tabs styling */
#menu-category .nav-link {
  padding: 5px 10px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease;
}
.category-carousel .nav-link,
.owl-carousel .nav-link {
  white-space: nowrap;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cnc-dark) !important;
  background: var(--cnc-light) !important;
  border: 1.5px solid transparent !important;
  transition: all 0.2s ease;
  margin: 3px 2px !important;
}
.category-carousel .nav-link.active,
.owl-carousel .nav-link.active {
  background: var(--cnc-dark) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.category-carousel .nav-link:hover,
.owl-carousel .nav-link:hover {
  background: var(--cnc-orange) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
/* "Store is close" banner — compact */
#vue-schedule-order .container {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
#vue-schedule-order h4 {
  font-size: 15px !important;
  margin-bottom: 2px !important;
}
#vue-schedule-order p {
  font-size: 12px !important;
  margin-bottom: 2px !important;
}
/* Search bar — tighter */
.components-search-menu {
  margin-bottom: 8px !important;
}
.components-search-menu .el-input {
  max-height: 38px !important;
}

/* Hide breadcrumb (redundant for single restaurant) */
.el-breadcrumb,
.breadcrumb-section {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   VISUAL POLISH — shadows, depth, transitions
   ═══════════════════════════════════════════════════════════ */
/* Button press effects */
.btn-green,
button.add_to_cart,
.add_to_cart,
.el-button.white-color {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease !important;
}
.btn-green:active,
button.add_to_cart:active,
.el-button.white-color:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}
/* Modal polish */
.modal-content {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
}
/* Card borders removed for cleaner look */
.list-item-rows {
  border: none !important;
}
/* Full-width layout — use all screen space with comfortable padding */
.section-menu > .container {
  max-width: 100% !important;
  padding: 0 30px !important;
}
#vue-schedule-order > .container-fluid > .container {
  max-width: 100% !important;
  padding: 0 30px !important;
}
@media (max-width: 991px) {
  .section-menu > .container {
    padding: 0 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIX #5: MOBILE COMPACT LAYOUT
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Smaller image on mobile */
  .list-item-rows .item-image-preview .el-image {
    height: 68px !important;
    width: 68px !important;
  }
  .list-item-rows .fixed-height {
    min-height: auto !important;
  }
  /* Narrow image column */
  .list-item-rows > .row > .col-3 {
    flex: 0 0 80px !important;
    max-width: 80px !important;
    padding: 4px !important;
  }
  .list-item-rows > .row > .col-9 {
    flex: 1 !important;
    max-width: calc(100% - 80px) !important;
    padding: 4px 8px !important;
  }
  /* Description: 2 lines on mobile too */
  .list-item-rows .ellipsis-2-lines {
    -webkit-line-clamp: 2 !important;
    font-size: 11px !important;
    min-height: 2.5em !important;
    max-height: 2.5em !important;
  }
  /* Pin category carousel on mobile scroll */
  #vue-merchant-category {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
    padding: 4px 0 !important;
  }
  /* Tighter spacing */
  .list-item-rows {
    margin-bottom: 4px !important;
    padding: 3px !important;
  }
  /* Sticky section headers on mobile — below the pinned carousel */
  section[data-cat_id] > h5 {
    top: 50px !important;
    z-index: 90 !important;
    font-size: 15px !important;
    padding: 8px 10px !important;
  }
  /* Prominent floating cart button */
  .floating-cart button {
    border-radius: 999px !important;
    padding: 14px 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
    background: var(--cnc-dark) !important;
    border-color: var(--cnc-dark) !important;
  }
  .floating-cart p {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .floating-cart h5 {
    display: none !important;
  }
  /* Mobile banner — compact */
  .merchant-top-header .container {
    padding: 12px 15px !important;
  }
  .merchant-top-header .img-thumbnail .el-image {
    max-height: 75px !important;
    width: 75px !important;
    min-width: 75px !important;
    min-height: 75px !important;
  }
  .merchant-top-header h4 {
    font-size: 18px !important;
  }
  .merchant-top-header .d-flex.align-items-start {
    flex-wrap: wrap;
  }
  .merchant-top-header .cnc-pickup-buttons {
    padding: 6px 0 !important;
  }
  .merchant-top-header .cnc-btn-pickup-now,
  .merchant-top-header .cnc-btn-pickup-later {
    padding: 8px 20px !important;
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════ */
::selection {
  background: var(--cnc-orange);
  color: #fff;
}
::-webkit-scrollbar-thumb {
  background: var(--cnc-red);
  border-radius: 4px;
}
.nav-pills .nav-link.active {
  background-color: var(--cnc-orange) !important;
  color: #000 !important;
}
.progress-bar {
  background-color: var(--cnc-orange) !important;
}
.alert-success {
  background-color: var(--cnc-light) !important;
  border-color: var(--cnc-orange) !important;
  color: var(--cnc-dark) !important;
}
.jq-star-svg {
  fill: var(--cnc-orange) !important;
}

/* ═══════════════════════════════════════════════════════════
   VERTICAL CARD GRID — image top, text below, button bottom
   ═══════════════════════════════════════════════════════════ */
/* Desktop: 3 columns */
@media (min-width: 992px) {
  section[data-cat_id] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  section[data-cat_id] > h5,
  section[data-cat_id] > p {
    grid-column: 1 / -1;
  }
}
/* Mobile: 1 column */
@media (max-width: 991px) {
  section[data-cat_id] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Card layout: stack vertically, button pinned to bottom */
.list-item-rows {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.list-item-rows > .row {
  flex-direction: column !important;
  flex: 1 !important;
  display: flex !important;
}
/* Text column grows to push button down */
.list-item-rows > .row > .col-9 {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.list-item-rows > .row > .col-9 > .row {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Name+desc area grows, button stays at bottom */
.list-item-rows .col-lg-8.col-md-8 {
  flex: 1 !important;
}
/* Image: full width, centered */
.list-item-rows > .row > .col-3 {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}
.list-item-rows .item-image-preview {
  margin-bottom: 4px !important;
}
.list-item-rows .item-image-preview .el-image {
  width: 100% !important;
  height: 150px !important;
  aspect-ratio: auto !important;
}
.list-item-rows .item-image-preview .el-image img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}
/* Text: full width */
.list-item-rows > .row > .col-9 {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
.list-item-rows > .row > .col-9 > .row {
  flex-direction: column !important;
  align-items: stretch !important;
}
.list-item-rows .col-lg-8.col-md-8 {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}
.list-item-rows .fixed-height {
  min-height: auto !important;
}
.list-item-rows .ellipsis-2-lines {
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
}
/* Button: full width, pinned to bottom */
.list-item-rows .col-lg-4.col-md-4 {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin-top: auto !important;
}
.list-item-rows .col-lg-4.col-md-4 .quantity-wrapper,
.list-item-rows .col-lg-4.col-md-4 .position-relative {
  width: 100% !important;
}
.list-item-rows .col-lg-4.col-md-4 .el-button,
.list-item-rows .col-lg-4.col-md-4 .el-button.white-color,
.list-item-rows .col-lg-4.col-md-4 button.add_to_cart,
.list-item-rows .col-lg-4.col-md-4 .add_to_cart,
.list-item-rows .col-lg-4.col-md-4 .btn-grey.quantity-add-cart,
.list-item-rows .col-lg-4.col-md-4 a.btn-grey.quantity-add-cart,
.list-item-rows .col-lg-4.col-md-4 button {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   STRIKETHROUGH PRICES
   ═══════════════════════════════════════════════════════════ */
del {
  color: var(--cnc-dark) !important;
  font-weight: 600 !important;
  font-size: 0.95em !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--cnc-red) !important;
  text-decoration-thickness: 2px !important;
  opacity: 0.8;
  margin-right: 4px;
}
.btn-group del,
.btn-group-toggle del,
label.btn del {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(0,0,0,0.3) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-decoration-color: #fff !important;
  text-decoration-thickness: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   DARK SIDEBAR (desktop)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .menu-left {
    padding-top: 20px !important;
    position: relative !important;
  }
  .menu-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -200px;
    background: var(--cnc-dark);
    z-index: -1;
  }
  .section-menu {
    overflow: hidden !important;
  }
  .menu-left h5 {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  #menu-category .nav-link {
    color: rgba(255,255,255,0.7) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.7) !important;
  }
  #menu-category .nav-link.active,
  #menu-category .nav-link:hover {
    color: var(--cnc-orange) !important;
    -webkit-text-fill-color: var(--cnc-orange) !important;
    border-left-color: var(--cnc-orange) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PROMO BADGE IN HERO BANNER
   ═══════════════════════════════════════════════════════════ */
.cnc-hero-promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f17d00, #ff9a2e);
  padding: 6px 16px;
  border-radius: 20px;
}
.cnc-hero-promo-badge {
  background: var(--cnc-dark);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 1.5px;
}
.cnc-hero-promo-text {
  color: var(--cnc-dark);
  font-weight: 800;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   SIZE BUTTONS — plain text everywhere (menu cards + modal)
   ═══════════════════════════════════════════════════════════ */
.list-item-rows .btn-group-toggle {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.list-item-rows .btn-group-toggle label.btn,
.list-item-rows .btn-group-toggle label.btn.active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 4px 0 0 !important;
  margin: 0 !important;
  color: var(--cnc-orange) !important;
  -webkit-text-fill-color: var(--cnc-orange) !important;
  font-weight: 800 !important;
  font-size: 1.05em !important;
}
.list-item-rows .btn-group-toggle label.btn del {
  color: var(--cnc-dark) !important;
  -webkit-text-fill-color: var(--cnc-dark) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.95em !important;
  font-weight: 600 !important;
  opacity: 0.8 !important;
  text-decoration-color: var(--cnc-red) !important;
  text-decoration-thickness: 2px !important;
  margin-right: 4px;
}
/* Modal size buttons — same plain text style */
.modal .btn-group-toggle,
#itemModal .btn-group-toggle {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.modal .btn-group-toggle label.btn,
.modal .btn-group-toggle label.btn.active,
#itemModal .btn-group-toggle label.btn,
#itemModal .btn-group-toggle label.btn.active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 4px 0 0 !important;
  margin: 0 !important;
  color: var(--cnc-orange) !important;
  -webkit-text-fill-color: var(--cnc-orange) !important;
  font-weight: 800 !important;
  font-size: 1.2em !important;
}
.modal .btn-group-toggle label.btn del,
#itemModal .btn-group-toggle label.btn del {
  color: var(--cnc-dark) !important;
  -webkit-text-fill-color: var(--cnc-dark) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.95em !important;
  font-weight: 600 !important;
  opacity: 0.8 !important;
  text-decoration-color: var(--cnc-red) !important;
  text-decoration-thickness: 2px !important;
  margin-right: 6px;
}

/* ═══════════════════════════════════════════════════════════
   MENU AREA PADDING + BACKGROUND
   ═══════════════════════════════════════════════════════════ */
.section-menu {
  padding-top: 16px !important;
  padding-bottom: 60px !important;
}
/* Hide restaurant details below menu (about, gallery, address, map) */
.section-menu ~ .container,
#section-about,
#section-gallery,
#section-address,
#section-reviews,
.section-menu ~ div.container:not(.section-menu) {
  display: none !important;
}