/*
=============================================================
  THE GOAN SPOON — custom-ui.css  (v3 — Root Variable Patch)
  Place at: public/client/css/custom-ui.css
  Loaded LAST in master_blade.php — wins over all template CSS.

  KEY FIX IN v3:
  We redefine the template's own CSS variables (--sandColor,
  --peachColor, --titleColor etc.) at :root so every var()
  call in the template resolves to our dark values.
  We also kill the nav ::after gold-fill animation that was
  making hovered menu text invisible.
=============================================================
*/

/* ====================================================
   1. PATCH ALL TEMPLATE CSS VARIABLES AT ROOT
   ==================================================== */
:root {
  --gs-dark:      #0b0502;
  --gs-dark2:     #1a0d07;
  --gs-mid:       #2a1206;
  --gs-mid2:      #3d1a0a;
  --gs-gold:      #f3c98b;
  --gs-gold2:     #e6b56a;
  --gs-gold-dim:  rgba(243,201,139,0.15);
  --gs-white:     #ffffff;
  --gs-off:       #d4c4b0;
  --gs-muted:     #9a8878;
  --gs-card:      rgba(255,255,255,0.05);
  --gs-card2:     rgba(255,255,255,0.08);
  --gs-border:    rgba(255,255,255,0.10);
  --gs-border2:   rgba(243,201,139,0.25);
  --gs-radius:    14px;
  --gs-radius-sm: 8px;
  --gs-font:      'Montserrat', sans-serif;
  --gs-shadow:    0 20px 50px rgba(0,0,0,0.5);
  --gs-shadow-sm: 0 8px 24px rgba(0,0,0,0.35);

  /* Override template font vars */
  --primaryFont:   'Montserrat', sans-serif;
  --secondaryFont: 'Montserrat', sans-serif;
  --optionalFont:  'Montserrat', sans-serif;
  --rubikFont:     'Montserrat', sans-serif;
  --josefinFont:   'Montserrat', sans-serif;

  /* Override template colour vars */
  --primaryColor:   #f3c98b;
  --secondaryColor: #e6b56a;
  --optionalColor:  #f3c98b;
  --paraColor:      #d4c4b0;
  --titleColor:     #f3c98b;
  --blackColor:     #f3c98b;
  --whiteColor:     #ffffff;
  --offwhiteColor:  #d4c4b0;
  --sandColor:      #1e0f06;
  --aztechColor:    #1e0f06;
  --codColor:       #0b0502;
  --mildColor:      #2a1206;
  --slateGrayColor: #2a3439;
  --peachColor:     #2a1206;
  --yellowColor:    #f3c98b;
  --fontSize:       16px;
  --transition:     all ease .4s;
}

/* ====================================================
   2. GLOBAL BASE
   ==================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--gs-font) !important;
  background:  radial-gradient(ellipse at top, var(--gs-mid), var(--gs-dark)) !important;
  color:       var(--gs-off) !important;
  margin: 0 !important;
  min-height: 100vh;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--gs-font) !important;
  color: var(--gs-gold) !important;
}
p {
  font-family: var(--gs-font) !important;
  color: var(--gs-off) !important;
  font-weight: 500 !important;
}
a,span,li,td,th,label,small,strong,em,div,button,input,select,textarea {
  font-family: var(--gs-font) !important;
}

.text-title    { color: var(--gs-white) !important; }
.text-para     { color: var(--gs-off)   !important; }
.text-muted    { color: var(--gs-muted) !important; }
.text-offwhite { color: var(--gs-off)   !important; }
.text-dark     { color: var(--gs-white) !important; }
.text-primary,   .text_primary   { color: var(--gs-gold) !important; }
.text-secondary, .text_secondary { color: var(--gs-gold) !important; }

.bg-white,.bg-sand,.bg-peach,.bg-light,.bg-spring,
.bg-aqua,.bg-yellow,.bg_primary,
.bg-primary,.bg-secondary {
  background-color: transparent !important;
}
/* bg_secondary excluded above — must NOT override .progress-bar.bg_secondary */
.bg_secondary:not(.progress-bar) {
  background-color: transparent !important;
}

/* ====================================================
   3. PRELOADER & THEME TOGGLE
   ==================================================== */
#preloader,.preloader-area { background: var(--gs-dark) !important; }
.preloader-area .spinner {
  border-color: var(--gs-gold) transparent transparent transparent !important;
}
.switch-theme-mode { display: none !important; }
/* Custom cursor — hidden to avoid the gold dot artifact on the page */
.cursor.style-one, .cursor-inner.style-one {
  display:    none !important;
  visibility: hidden !important;
  opacity:    0 !important;
}

/* ====================================================
   4. NAVBAR
   FIXES:
   a) White pill container -> transparent
   b) nav link ::after gold fill -> DISABLED (was hiding text)
   c) Sub-menu hover peach/green bg -> dark gold
   ==================================================== */
.navbar-area,
.navbar-area.style-one,.navbar-area.style-two,
.navbar-area.style-three,.navbar-area.style-four,
.navbar-area.sticky,
.navbar-area.style-four.sticky,.navbar-area.style-two.sticky,
.navbar-area.style-one.sticky,.navbar-area.style-three.sticky {
  background:    var(--gs-dark) !important;
  border-bottom: 1px solid var(--gs-border) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.navbar-wrapper {
  padding: 14px 24px !important;
  max-width: 1280px !important;
  margin: auto !important;
}
.navbar-brand img,.logo img { height: 54px !important; width: auto !important; }
.menu { background: transparent !important; border-radius: 0 !important; }

/* Nav link base */
.menu > ul > li > a,
.menu ul li a {
  font-weight:    700 !important;
  font-size:      14px !important;
  color:          var(--gs-white) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding:        10px 16px !important;
  background:     transparent !important;
  transition:     color 0.25s ease !important;
}

/* DISABLE the gold fill animation that hides text on hover */
.menu > ul > li > a::after {
  display:    none !important;
  content:    none !important;
  background: transparent !important;
  transform:  scaleX(0) !important;
}
.menu > ul > li > a::before { display: none !important; content: none !important; }

/* Hover / Active - colour only, no background */
.menu > ul > li > a:hover,
.menu > ul > li > a.active,
.menu ul li a:hover,
.menu ul li a.active {
  color:      var(--gs-gold) !important;
  background: transparent !important;
}

/* Dropdown panel */
.menu > ul > li .menu-subs {
  background:    var(--gs-dark2) !important;
  border:        1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important;
  box-shadow:    var(--gs-shadow) !important;
}
.menu > ul > li .menu-subs:before { border-left-color: var(--gs-dark2) !important; }

/* Sub-menu links */
.menu > ul > li .menu-subs li a,
.menu-subs .list-item a {
  color:         var(--gs-off) !important;
  font-weight:   600 !important;
  font-size:     13px !important;
  padding:       12px 18px !important;
  border-left:   2px solid transparent !important;
  border-bottom: 1px solid var(--gs-border) !important;
  background:    transparent !important;
}
/* Sub-menu link hover - gold, not green */
.menu > ul > li .menu-subs li a:hover,
.menu > ul > li .menu-subs li a.active,
.menu-subs .list-item a:hover {
  color:             var(--gs-gold) !important;
  background-color:  rgba(243,201,139,0.08) !important;
  border-left-color: var(--gs-gold) !important;
}

.header-submenu li span,.header-submenu li a {
  color: var(--gs-gold) !important; font-weight: 700 !important;
  font-size: 13px !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.menu-mobile-trigger span { background: var(--gs-white) !important; }
.menu-mobile-trigger:hover span { background: var(--gs-gold) !important; }
.menu-mobile-header {
  background: var(--gs-dark2) !important;
  border-bottom: 1px solid var(--gs-border) !important;
}
.menu-mobile-arrow,.menu-mobile-close { color: var(--gs-white) !important; }
.overlay { background: rgba(0,0,0,0.8) !important; }

@media (max-width:991px) {
  .menu { background: var(--gs-dark2) !important; }
  .menu > ul > li > a,.menu ul li a {
    color: var(--gs-white) !important;
    border-bottom: 1px solid var(--gs-border) !important;
  }
  .menu > ul > li > a:hover { color: var(--gs-gold) !important; background: transparent !important; }
}

/* ====================================================
   5. HERO
   ==================================================== */
.hero-area,.hero-area.style-two {
  padding: 100px 20px 80px !important;
  text-align: center !important;
  background: transparent !important;
}
.hero-area > img[class*="position-absolute"] {
  opacity: 0.04 !important; filter: brightness(0.2) !important;
}
.hero-content { max-width: 820px !important; margin: auto !important; }
.hero-content .font-optional {
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  color: var(--gs-gold) !important; margin-bottom: 20px !important;
}
.hero-content h1 {
  font-size: clamp(32px,5vw,58px) !important; font-weight: 900 !important;
  color: var(--gs-gold) !important; line-height: 1.1 !important; margin-bottom: 24px !important;
}
.hero-content .lead {
  font-size: 16px !important; font-weight: 600 !important;
  color: var(--gs-off) !important; max-width: 640px;
  margin: 0 auto 36px !important; line-height: 1.7;
}
.hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:10px; }

/* ====================================================
   6. BUTTONS (also kill ::after animation)
   ==================================================== */
.btn.style-one,.btn.style-two,.btn.style-three,
a.btn.style-one,a.btn.style-two,a.btn.style-three,
button.btn.style-one,button.btn.style-two,button.btn.style-three {
  font-weight: 800 !important; font-size: 14px !important;
  letter-spacing: 0.05em !important; text-transform: uppercase !important;
  background: var(--gs-gold) !important; color: var(--gs-dark) !important;
  border: 2px solid var(--gs-gold) !important; border-radius: 50px !important;
  padding: 13px 32px !important; transition: all 0.3s ease !important;
  box-shadow: 0 6px 20px rgba(243,201,139,0.2) !important;
  text-decoration: none !important; display: inline-block; cursor: pointer;
}
.btn.style-one::after,.btn.style-two::after,.btn.style-three::after {
  display: none !important; content: none !important;
}
.btn.style-one:hover,.btn.style-two:hover,.btn.style-three:hover {
  background: transparent !important; color: var(--gs-gold) !important; box-shadow: none !important;
}

.btn.style-seven,a.btn.style-seven,button.btn.style-seven {
  font-weight: 700 !important; font-size: 14px !important;
  letter-spacing: 0.05em !important; text-transform: uppercase !important;
  background: transparent !important; color: var(--gs-gold) !important;
  border: 2px solid var(--gs-gold) !important; border-radius: 50px !important;
  padding: 13px 32px !important; transition: all 0.3s ease !important;
  text-decoration: none !important; display: inline-block; cursor: pointer;
}
.btn.style-seven::after { display: none !important; content: none !important; }
.btn.style-seven:hover {
  background: var(--gs-gold) !important; color: var(--gs-dark) !important;
  box-shadow: 0 6px 20px rgba(243,201,139,0.2) !important;
}

.plan-btn { min-width: 140px; text-align: center; }

.btn-success,button.btn-success {
  font-weight: 700 !important; background: var(--gs-gold) !important;
  color: var(--gs-dark) !important; border: none !important;
  border-radius: 50px !important; padding: 9px 24px !important;
}
.btn-success:hover { background: var(--gs-gold2) !important; color: var(--gs-dark) !important; }

.btn.btn-sm.btn-dark,.btn-sm.btn-dark {
  background: var(--gs-mid2) !important; color: var(--gs-gold) !important;
  border: 1px solid var(--gs-border2) !important; border-radius: 50px !important;
  font-weight: 700 !important; font-size: 12px !important;
}
.btn-outline-primary {
  color: var(--gs-gold) !important; border-color: var(--gs-gold) !important;
  background: transparent !important; border-radius: 50px !important; font-weight: 700 !important;
}
.btn-outline-primary:hover { background: var(--gs-gold) !important; color: var(--gs-dark) !important; }
.btn-outline-secondary {
  color: var(--gs-off) !important; border-color: var(--gs-border) !important;
  background: transparent !important; border-radius: 50px !important; font-weight: 700 !important;
}
.btn-outline-secondary:hover { background: var(--gs-card2) !important; color: var(--gs-white) !important; }
.btn-danger,button.btn-danger {
  background: #8b1a1a !important; border-color: #8b1a1a !important;
  color: #fff !important; border-radius: 50px !important; font-weight: 700 !important;
}
.btn.btn-link.text-danger,.btn-link.text-danger {
  color: #f08080 !important; background: transparent !important; border: none !important;
  font-weight: 700 !important; text-decoration: none !important; padding: 0 !important;
}
.btn.btn-link.text-danger:hover { color: #ff4444 !important; text-decoration: underline !important; }

/* ====================================================
   7. FORMS
   ==================================================== */
.form-control,
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],input[type="tel"],input[type="search"],
input[type="date"],textarea,select,.form-select,
input.bg-peach,input.ht-50 {
  background:    rgba(255,255,255,0.07) !important;
  border:        1px solid var(--gs-border) !important;
  color:         var(--gs-white) !important;
  font-size:     14px !important; font-weight: 500 !important;
  border-radius: var(--gs-radius-sm) !important;
  padding:       12px 16px !important; height: auto !important;
  transition:    border-color 0.3s ease,box-shadow 0.3s ease !important;
}
.form-control.bg-light,input.bg-light,
.form-control[readonly],input[readonly] {
  background: rgba(255,255,255,0.04) !important; color: var(--gs-muted) !important;
}
.form-control:focus,.form-select:focus,input:focus,textarea:focus,select:focus {
  border-color: var(--gs-gold) !important;
  background:   rgba(255,255,255,0.10) !important;
  box-shadow:   0 0 0 3px rgba(243,201,139,0.12) !important;
  color:        var(--gs-white) !important; outline: none !important;
}
::placeholder { color: rgba(255,255,255,0.30) !important; }
.form-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f3c98b' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 12px center !important;
  background-size:     14px !important; padding-right: 36px !important;
}
option { background: var(--gs-dark2) !important; color: var(--gs-white) !important; }
label,.form-label,.form-check-label {
  color: var(--gs-off) !important; font-weight: 600 !important; font-size: 14px !important;
}
.form-check-input {
  background-color: rgba(255,255,255,0.07) !important; border-color: var(--gs-border) !important;
}
.form-check-input:checked {
  background-color: var(--gs-gold) !important; border-color: var(--gs-gold) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(243,201,139,0.2) !important; }

/* ====================================================
   8. BOOKING-BOX (CTA sections + Customize Plan page)
   --sandColor patch covers this, but we add explicit rules
   with max specificity as a hard fallback.
   ==================================================== */
.booking-box,div.booking-box,.booking-box.round-10 {
  background:    var(--gs-dark2) !important;
  border:        1px solid var(--gs-border2) !important;
  border-radius: 20px !important;
  box-shadow:    0 20px 50px rgba(0,0,0,0.5) !important;
  padding:       40px !important;
}
.booking-box h2,.booking-box h3,.booking-box h4 { color: var(--gs-gold) !important; }
.booking-box p { color: var(--gs-off) !important; font-weight: 500 !important; }
.booking-box hr { border-color: var(--gs-border) !important; }

/* Plan pill active */
.booking-box .plan-btn.active,
#planSelector .btn-outline-primary.active,
#planSelector button.active {
  background: var(--gs-gold) !important; color: var(--gs-dark) !important;
  border-color: var(--gs-gold) !important;
}

/* Order Summary box */
.booking-box .p-3.bg-light,
.booking-box .p-3.bg-light.border.rounded,
.p-3.bg-light.border.rounded.sticky-top {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--gs-border) !important; border-radius: var(--gs-radius) !important;
}
.booking-box .p-3.bg-light h5 { color: var(--gs-gold) !important; font-weight: 800 !important; }
.booking-box .p-3.bg-light .fw-bold { color: var(--gs-white) !important; }
.booking-box .p-3.bg-light small,.booking-box .p-3.bg-light .small { color: var(--gs-muted) !important; }
#targetMealsCount,.fw-bold.text-primary { color: var(--gs-gold) !important; }
.muted-note.text-danger,.booking-box .small.text-danger { color: #f08080 !important; }
#summaryList small.text-muted { color: var(--gs-muted) !important; }
#mealError { color: #ffc107 !important; background: rgba(255,193,7,0.08) !important; }

/* Qty +/- */
.qty-decrease,.qty-increase {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  color: var(--gs-gold) !important; border-radius: 6px !important;
  font-weight: 800 !important; min-width: 30px; text-align: center;
}
.qty-decrease:hover,.qty-increase:hover {
  background: var(--gs-gold) !important; border-color: var(--gs-gold) !important;
  color: var(--gs-dark) !important;
}
.qty-input {
  background: rgba(255,255,255,0.08) !important; color: var(--gs-white) !important;
  border: 1px solid var(--gs-border) !important; border-radius: 6px !important;
  text-align: center; font-weight: 700 !important;
}
#menuItemsList .form-group {
  border-bottom: 1px solid var(--gs-border) !important;
  padding-bottom: 12px !important; margin-bottom: 12px !important;
}

/* ====================================================
   9. CARDS & WRAPPERS
   ==================================================== */
.card {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important; box-shadow: var(--gs-shadow-sm) !important;
}
.card-body { background: transparent !important; }
.card-body h4,.card-body h5,.card-body h6 { color: var(--gs-gold) !important; }

.bg-sand,div.bg-sand {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--gs-border) !important; border-radius: var(--gs-radius) !important;
}
.bg-white,div.bg-white { background: rgba(255,255,255,0.05) !important; }

.account-box {
  background: rgba(255,255,255,0.05) !important; border: 1px solid var(--gs-border) !important;
  border-radius: 20px !important; box-shadow: var(--gs-shadow) !important; padding: 40px !important;
}
.account-box h4 { color: var(--gs-gold) !important; font-weight: 900 !important; }
.form-wrapper a { color: var(--gs-gold) !important; font-weight: 600 !important; }

.sticky-top.border,.border.rounded.p-3 {
  background: rgba(11,5,2,0.95) !important; border-color: var(--gs-border) !important;
  border-radius: var(--gs-radius) !important;
}
.account-wrap {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  border-radius: 20px !important; padding: 30px !important;
}
#bookingSection,.bg-white.border.p-4.round-10 {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--gs-border) !important; border-radius: var(--gs-radius) !important;
}
.d-flex.flex-wrap.gap-2.align-items-center.border.rounded.p-3 {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--gs-border) !important; border-radius: var(--gs-radius-sm) !important;
}

/* ====================================================
   10. TABLES
   ==================================================== */
.table,table { color: var(--gs-off) !important; }
.table thead th,.table th,thead.bg-light tr,thead.bg-light th {
  background: rgba(255,255,255,0.06) !important; color: var(--gs-gold) !important;
  font-weight: 700 !important; border-color: var(--gs-border) !important;
  font-size: 13px !important; letter-spacing: 0.04em; text-transform: uppercase;
}
.table td,.table tbody td {
  border-color: var(--gs-border) !important; color: var(--gs-off) !important; vertical-align: middle;
}
.table-responsive,.table-responsive.bg-white,div.table-responsive.bg-white {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--gs-border) !important; border-radius: var(--gs-radius) !important;
}
.table > tbody > tr { transition: background 0.2s ease; }
.table-hover > tbody > tr:hover > td { background: rgba(243,201,139,0.05) !important; }
.table td.fw-bold { color: var(--gs-gold) !important; }

/* ====================================================
   11. NAV TABS (History section)
   Clear pill-style tabs so active vs inactive is obvious
   ==================================================== */

/* Container — remove Bootstrap's bottom border, add our own */
.nav-tabs {
  border-bottom: none !important;
  background:    rgba(255,255,255,0.04) !important;
  border-radius: 10px 10px 0 0 !important;
  padding:       6px 6px 0 6px !important;
  gap:           4px !important;
  display:       flex !important;
  border:        1px solid var(--gs-border) !important;
  border-bottom: none !important;
}

/* Inactive tab */
.nav-tabs .nav-item .nav-link {
  font-family:   var(--gs-font) !important;
  font-weight:   600 !important;
  font-size:     14px !important;
  color:         var(--gs-muted) !important;
  background:    transparent !important;
  border:        1px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  padding:       10px 22px !important;
  margin-bottom: 0 !important;
  transition:    all 0.2s ease !important;
  position:      relative;
}

/* Inactive hover */
.nav-tabs .nav-item .nav-link:hover {
  color:      var(--gs-off) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--gs-border) !important;
}

/* ACTIVE tab — solid gold background, dark text, clearly selected */
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active {
  color:         var(--gs-dark) !important;
  background:    var(--gs-gold) !important;
  border-color:  var(--gs-gold) !important;
  font-weight:   800 !important;
  font-size:     14px !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow:    0 -2px 12px rgba(243,201,139,0.25) !important;
}

/* Tab content area — seamless with active tab */
.tab-content {
  background:    rgba(255,255,255,0.03) !important;
  border:        1px solid var(--gs-border) !important;
  border-top:    2px solid var(--gs-gold) !important;
  border-radius: 0 0 10px 10px !important;
  padding:       20px !important;
}
.tab-pane { background: transparent !important; }

/* ====================================================
   12. ACCORDION
   ==================================================== */
.accordion-item {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important; overflow: hidden !important;
}
.accordion-button {
  background: rgba(255,255,255,0.04) !important; color: var(--gs-gold) !important;
  font-weight: 800 !important; font-size: 18px !important;
  border: none !important; box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background: rgba(243,201,139,0.08) !important; color: var(--gs-gold) !important; box-shadow: none !important;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(243,201,139,0.15) !important; }
.accordion-button::after {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.2) !important;
}
.custom-arrow { color: var(--gs-gold) !important; }
.accordion-body { background: rgba(255,255,255,0.02) !important; color: var(--gs-off) !important; }

/* ====================================================
   13. TOUR / MENU ITEM CARDS
   ==================================================== */
.tour-card.style-four {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important; overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  transition: transform 0.3s ease,box-shadow 0.3s ease !important;
}
.tour-card.style-four:hover {
  transform: translateY(-6px) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
}
.tour-card.style-four .tour-img img {
  width: 100% !important; height: 220px !important; object-fit: cover !important;
  display: block; transition: transform 0.4s ease !important;
}
.tour-card.style-four:hover .tour-img img { transform: scale(1.05) !important; }
.tour-card.style-four .tour-info {
  background: rgba(11,5,2,0.92) !important; padding: 18px !important;
  border-top: 1px solid var(--gs-border) !important;
}
.tour-card.style-four .tour-info h3 a { color: var(--gs-white) !important; }
.tour-card.style-four .tour-info h3 a:hover { color: var(--gs-gold) !important; }
.sidebar-widget,.sidebar-widget.style-two,.destination-info-widget {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important; padding: 24px !important;
}
.sidebar-widget .list-unstyled li {
  color: var(--gs-off) !important;
  border-bottom: 1px solid var(--gs-border) !important; padding: 10px 0 !important;
}

/* ====================================================
   14. PRICING CARDS
   ==================================================== */
.pricing-card,.pricing-card.style-one {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  border-radius: 20px !important; padding: 36px 28px !important;
  box-shadow: var(--gs-shadow) !important;
  transition: transform 0.3s ease,border-color 0.3s ease !important;
  display: flex; flex-direction: column;
}
.pricing-card:hover,.pricing-card.style-one:hover {
  transform: translateY(-8px) !important; border-color: var(--gs-gold) !important;
}
.pricing-card h5,.pricing-card .fs-24 { color: var(--gs-gold) !important; font-weight: 800 !important; }
.pricing-card h6 { color: var(--gs-off) !important; }
.pricing-card .price-tag,.price-tag {
  color: var(--gs-white) !important; font-weight: 900 !important; font-size: 48px !important;
}
.pricing-card .price-tag span { color: var(--gs-gold) !important; font-size: 24px !important; }
.feature-list li {
  color: var(--gs-off) !important; font-weight: 600 !important;
  font-size: 14px !important; margin-bottom: 10px !important;
}
.feature-list li span.bg-white,.feature-list li > span {
  background: rgba(243,201,139,0.12) !important; border: 1px solid var(--gs-border2) !important;
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important; margin-right: 10px !important;
}

/* ====================================================
   15. CUSTOM RADIO CARDS — meal booking
   Blade has hardcoded !important green — we use full
   class string to win.
   ==================================================== */
.form-check.p-3.border.round-10.h-100.position-relative.custom-radio-card,
.form-check.custom-radio-card,
div.form-check.custom-radio-card,
.custom-radio-card {
  background:    rgba(255,255,255,0.05) !important;
  border:        1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important;
  transition:    border-color 0.25s ease,background 0.25s ease !important;
  cursor: pointer;
}
.form-check.p-3.border.round-10.h-100.position-relative.custom-radio-card:hover,
.form-check.custom-radio-card:hover,
.custom-radio-card:hover {
  border-color: var(--gs-gold) !important;
  background:   rgba(243,201,139,0.08) !important;
}
.form-check.p-3.border.round-10.h-100.position-relative.custom-radio-card.selected,
.form-check.custom-radio-card.selected,
div.form-check.custom-radio-card.selected,
.custom-radio-card.selected {
  border-color:     var(--gs-gold) !important;
  background-color: rgba(243,201,139,0.10) !important;
}
.custom-radio-card.disabled {
  opacity: 0.45 !important; cursor: not-allowed !important;
  background: rgba(255,255,255,0.03) !important;
}
.custom-radio-card h6,.custom-radio-card .fw-bold { color: var(--gs-white) !important; }
.custom-radio-card small,.custom-radio-card span,.custom-radio-card p { color: var(--gs-off) !important; }

/* ====================================================
   16. BADGES
   ==================================================== */
.badge {
  font-weight: 700 !important; font-size: 11px !important;
  padding: 5px 12px !important; border-radius: 50px !important;
}
.badge.bg-info,.badge.bg-info.text-dark {
  background: #0dcaf0 !important; color: #0b0502 !important; border: none !important;
}
.badge.bg-warning,.badge.bg-warning.text-dark {
  background: #ffc107 !important; color: #0b0502 !important; border: none !important;
}
.badge.bg-success {
  background: rgba(40,167,69,0.2) !important; color: #7dcc96 !important;
  border: 1px solid rgba(40,167,69,0.3) !important;
}
.badge.bg-success.bg-opacity-10,.badge.bg-success.bg-opacity-10.text-success {
  background: rgba(40,167,69,0.12) !important; color: #7dcc96 !important;
  border: 1px solid rgba(40,167,69,0.35) !important;
}
.badge.bg-danger {
  background: rgba(220,53,69,0.2) !important; color: #f08080 !important;
  border: 1px solid rgba(220,53,69,0.3) !important;
}
.badge.bg-primary,.badge.bg-primary.bg-opacity-10,.badge.bg-primary.bg-opacity-10.text-primary {
  background: var(--gs-gold-dim) !important; color: var(--gs-gold) !important;
  border: 1px solid var(--gs-border2) !important;
}
.badge.bg-secondary {
  background: rgba(255,255,255,0.08) !important; color: var(--gs-off) !important;
  border: 1px solid var(--gs-border) !important;
}
.badge.bg-light,.badge.bg-light.text-dark {
  background: rgba(255,255,255,0.10) !important; color: var(--gs-off) !important;
  border: 1px solid var(--gs-border) !important;
}
.badge.fs-6 { font-size: 13px !important; }

/* ====================================================
   17. ALERTS
   ==================================================== */
.alert-info,.alert.alert-info {
  background: rgba(13,202,240,0.07) !important; border: 1px solid rgba(13,202,240,0.18) !important;
  color: #67e3f9 !important; border-radius: var(--gs-radius-sm) !important;
}
.alert-success,.alert.alert-success {
  background: rgba(40,167,69,0.10) !important; border: 1px solid rgba(40,167,69,0.25) !important;
  color: #7dcc96 !important; border-radius: var(--gs-radius-sm) !important;
}
.alert-danger,.alert.alert-danger {
  background: rgba(220,53,69,0.10) !important; border: 1px solid rgba(220,53,69,0.25) !important;
  color: #f08080 !important; border-radius: var(--gs-radius-sm) !important;
}
.alert-warning,.alert.alert-warning {
  background: rgba(255,193,7,0.08) !important; border: 1px solid rgba(255,193,7,0.2) !important;
  color: #ffc107 !important; border-radius: var(--gs-radius-sm) !important;
}
.alert .btn-close { filter: invert(1) !important; opacity: 0.6; }
.alert .btn-close:hover { opacity: 1; }

/* ====================================================
   18. PROGRESS BAR
   ==================================================== */
.progress {
  background: rgba(255,255,255,0.12) !important;
  border-radius: 50px !important; height: 10px !important;
}
.progress-bar,.progress-bar.bg_secondary,
.progress > .progress-bar {
  background: linear-gradient(90deg, var(--gs-gold2), var(--gs-gold)) !important;
  background-color: var(--gs-gold) !important;
  border-radius: 50px !important;
  min-width: 6px;
  height: 100% !important;
  display: block !important;
  box-shadow: 0 0 10px rgba(243,201,139,0.6) !important;
  transition: width 0.6s ease !important;
}

/* ====================================================
   19. HERO FACTS, TESTIMONIALS, SECTION TITLES
   ==================================================== */
.map-area.style-one,.hero-facts-wrap {
  background: rgba(255,255,255,0.03) !important; border: 1px solid var(--gs-border) !important;
  border-radius: 20px !important; padding: 50px 30px !important;
}
.hero-facts .counter-card {
  background: rgba(255,255,255,0.05) !important; border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important; box-shadow: var(--gs-shadow) !important;
}
.hero-facts .counter-card .value { color: var(--gs-gold) !important; font-weight: 900 !important; }
.hero-facts .counter-card .title { color: var(--gs-white) !important; }
.hero-facts .counter-card .desc  { color: var(--gs-off) !important; }
.testimonial-card.style-two,.testimonial-card.style-two.fixed-step {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.4) !important;
}
.testimonial-card.style-two h6 { color: var(--gs-gold) !important; font-weight: 800 !important; }
.testimonial-card.style-two p  { color: var(--gs-off) !important; }
.section-title,.section-title.style-one,.section-title.style-two,h2.section-title {
  font-weight: 900 !important; color: var(--gs-gold) !important;
  font-size: clamp(26px,3.5vw,42px) !important;
}
.section-title img,.section-title .position-absolute { display: none !important; }
.section-desc { color: var(--gs-off) !important; font-weight: 500 !important; }

/* ====================================================
   20. CART
   ==================================================== */
.cart-wrapper {
  background: rgba(255,255,255,0.04) !important; border: 1px solid var(--gs-border) !important;
  border-radius: 16px !important; padding: 24px !important;
}
.product-img { background: rgba(255,255,255,0.06) !important; border-radius: 8px !important; padding: 4px !important; }

/* Quantity +/- buttons — use high-specificity to beat Bootstrap's bg-transparent border-0 */
button.minusBtn, button.plusBtn,
.minusBtn, .plusBtn,
.v-counter .minusBtn,
.v-counter .plusBtn {
  background:    rgba(255,255,255,0.08) !important;
  border:        1px solid rgba(243,201,139,0.4) !important;
  color:         var(--gs-gold) !important;
  width:         30px !important;
  height:        30px !important;
  min-width:     30px !important;
  border-radius: 50% !important;
  font-weight:   800 !important;
  font-size:     18px !important;
  line-height:   1 !important;
  cursor:        pointer !important;
  display:       inline-flex !important;
  align-items:   center !important;
  justify-content: center !important;
  padding:       0 !important;
  flex-shrink:   0;
  transition:    all 0.2s ease !important;
}

button.minusBtn::before, .minusBtn::before {
  content: '−';
  color:   var(--gs-gold);
  font-size: 20px;
  line-height: 1;
  display: block;
}
button.plusBtn::before, .plusBtn::before {
  content: '+';
  color:   var(--gs-gold);
  font-size: 20px;
  line-height: 1;
  display: block;
}

button.minusBtn:hover, .minusBtn:hover,
button.plusBtn:hover,  .plusBtn:hover {
  background:   var(--gs-gold) !important;
  border-color: var(--gs-gold) !important;
}
button.minusBtn:hover::before, .minusBtn:hover::before,
button.plusBtn:hover::before,  .plusBtn:hover::before {
  color: var(--gs-dark) !important;
}

/* Quantity number input */
input.count,
.v-counter input.count,
.v-counter input[name="quantity"] {
  background:    rgba(255,255,255,0.10) !important;
  color:         var(--gs-white) !important;
  border:        1px solid rgba(243,201,139,0.35) !important;
  border-radius: 8px !important;
  text-align:    center !important;
  font-weight:   700 !important;
  font-size:     15px !important;
  width:         44px !important;
  height:        30px !important;
  line-height:   30px !important;
  padding:       0 4px !important;
  caret-color:   var(--gs-gold);
}

/* ====================================================
   21. SLIDERS, MODALS, PAGINATION
   ==================================================== */
.slider-btn.style-one button,.prev-btn,.next-btn {
  background: var(--gs-card) !important; border: 1px solid var(--gs-border) !important;
  color: var(--gs-gold) !important;
}
.slider-btn.style-one button:hover,.prev-btn:hover,.next-btn:hover {
  background: var(--gs-gold) !important; border-color: var(--gs-gold) !important;
}
.slider-btn.style-one button img,.prev-btn img,.next-btn img { filter: invert(1) !important; }
.slider-btn.style-one button:hover img,.prev-btn:hover img,.next-btn:hover img { filter: brightness(0) !important; }

.modal-content {
  background: var(--gs-dark2) !important; border: 1px solid var(--gs-border) !important;
  border-radius: 20px !important;
}
.modal-header { border-bottom: 1px solid var(--gs-border) !important; }
.modal-title  { color: var(--gs-gold) !important; font-weight: 800 !important; }
.modal-body   { color: var(--gs-off) !important; }
.btn-close { filter: invert(1) !important; opacity: 0.6; }
.btn-close:hover { opacity: 1; }
.offcanvas { background: var(--gs-dark2) !important; border-left: 1px solid var(--gs-border) !important; }

.pagination .page-link {
  background: var(--gs-card) !important; border-color: var(--gs-border) !important;
  color: var(--gs-off) !important; font-weight: 600 !important;
}
.pagination .page-item.active .page-link {
  background: var(--gs-gold) !important; border-color: var(--gs-gold) !important; color: var(--gs-dark) !important;
}
.pagination .page-link:hover { background: var(--gs-gold-dim) !important; color: var(--gs-gold) !important; }

/* ====================================================
   22. FOOTER
   ==================================================== */
.footer-area,.footer-area.style-two {
  background: var(--gs-dark2) !important; border-radius: 0 !important;
  margin: 0 !important; border-top: 1px solid var(--gs-border) !important;
}
.footer-bg-shape { display: none !important; }
.footer-widget-title { color: var(--gs-white) !important; font-weight: 800 !important; font-size: 18px !important; }
.footer-area .comp-desc,.footer-area .text-offwhite,.footer-area p { color: var(--gs-off) !important; }
.footer-area .footer-menu li a {
  color: var(--gs-off) !important; font-weight: 600 !important; font-size: 14px !important;
  transition: color 0.3s ease,padding-left 0.3s ease !important;
}
.footer-area .footer-menu li a:hover { color: var(--gs-gold) !important; padding-left: 6px !important; }
.footer-area .footer-menu li a i { color: var(--gs-gold) !important; }
.footer-area .contact-info li a { color: var(--gs-off) !important; font-weight: 600 !important; }
.footer-area .contact-info li a:hover { color: var(--gs-gold) !important; }
.footer-area .contact-info li span {
  background: rgba(243,201,139,0.1) !important; border: 1px solid var(--gs-border2) !important;
}
.social-profile.style-one li a {
  background: rgba(255,255,255,0.05) !important; border: 1px solid var(--gs-border) !important;
  color: var(--gs-off) !important; width: 40px !important; height: 40px !important;
  border-radius: 50% !important; transition: all 0.3s ease !important;
}
.social-profile.style-one li a:hover {
  background: var(--gs-gold) !important; border-color: var(--gs-gold) !important; color: var(--gs-dark) !important;
}
.footer-bottom {
  background: rgba(0,0,0,0.3) !important; border-top: 1px solid var(--gs-border) !important;
  border-radius: 0 !important; padding: 20px !important;
}
.footer-bottom .copyright-text { color: var(--gs-off) !important; font-weight: 600 !important; font-size: 13px !important; }
.footer-bottom .copyright-text i { color: var(--gs-gold) !important; }

/* ====================================================
   23. MISC, ICONS, SCROLLBAR, SPACING
   ==================================================== */
.progress-wrap.style-one {
  background: var(--gs-dark2) !important; border: 2px solid var(--gs-gold) !important;
  box-shadow: 0 4px 20px rgba(243,201,139,0.15) !important;
}
.progress-wrap path { stroke: var(--gs-gold) !important; }
hr { border-color: var(--gs-border) !important; opacity: 1 !important; }
.round-10 { border-radius: 10px !important; }
.round-5  { border-radius: 6px !important; }
.ht-50    { height: 50px !important; }
.border-bottom { border-bottom-color: var(--gs-border) !important; }
.ri-truck-line.text-warning      { color: var(--gs-gold) !important; }
.ri-restaurant-line.text-success { color: #7dcc96 !important; }
.ri-store-2-line.text-primary    { color: var(--gs-gold) !important; }
.ri-vip-crown-2-fill             { color: var(--gs-gold) !important; }
.ri-shopping-bag-3-fill          { color: var(--gs-gold) !important; }
.ri-information-line             { color: #67e3f9 !important; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gs-dark); }
::-webkit-scrollbar-thumb { background: var(--gs-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gs-gold2); }
::selection { background: var(--gs-gold); color: var(--gs-dark); }
.ptb-120 { padding-top: 80px !important; padding-bottom: 80px !important; }
.pt-120  { padding-top: 80px !important; }
.pb-120  { padding-bottom: 80px !important; }
.pt-90   { padding-top: 60px !important; }
.pb-90   { padding-bottom: 60px !important; }
.pt-60   { padding-top: 40px !important; }
.pb-60   { padding-bottom: 40px !important; }
.mb-50   { margin-bottom: 40px !important; }
.mb-40   { margin-bottom: 32px !important; }
.mb-30   { margin-bottom: 22px !important; }

@media (max-width:768px) {
  .hero-area,.hero-area.style-two { padding: 70px 16px 50px !important; }
  .hero-content h1 { font-size: 30px !important; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .navbar-wrapper { padding: 12px 16px !important; }
  .account-box { padding: 28px 20px !important; }
  .pricing-card { margin-bottom: 20px !important; }
  .booking-box { padding: 24px 16px !important; }
}
@media (max-width:480px) {
  .hero-content h1 { font-size: 26px !important; }
  .btn.style-two,.btn.style-three,.btn.style-seven { padding: 12px 24px !important; font-size: 13px !important; }
}

/* ============================================================
   PATCH v3.1 — Two targeted fixes
   Append this to the bottom of custom-ui.css
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   FIX 1: Bootstrap 5 table white background
   Bootstrap sets --bs-table-bg: var(--bs-body-bg) and uses
   box-shadow:inset 0 0 0 9999px ... to paint every cell.
   We patch the Bootstrap variables themselves at :root.
   ───────────────────────────────────────────────────────── */
:root {
  --bs-body-bg:            #0b0502;
  --bs-body-bg-rgb:        11, 5, 2;
  --bs-body-color:         #d4c4b0;
  --bs-body-color-rgb:     212, 196, 176;
  --bs-emphasis-color:     #f3c98b;
  --bs-emphasis-color-rgb: 243, 201, 139;
  --bs-secondary-bg:       #1e0f06;
  --bs-secondary-bg-rgb:   30, 15, 6;
  --bs-tertiary-bg:        #2a1206;
  --bs-tertiary-bg-rgb:    42, 18, 6;
  --bs-border-color:       rgba(255,255,255,0.10);
  --bs-border-color-translucent: rgba(255,255,255,0.10);
  --bs-link-color:         #f3c98b;
  --bs-link-color-rgb:     243,201,139;
  --bs-link-hover-color:   #e6b56a;
  --bs-link-hover-color-rgb: 230,181,106;
  /* Table-specific overrides */
  --bs-table-bg:           transparent;
  --bs-table-color:        #d4c4b0;
  --bs-table-border-color: rgba(255,255,255,0.10);
  --bs-table-hover-bg:     rgba(243,201,139,0.05);
  --bs-table-hover-color:  #f3c98b;
  --bs-table-striped-bg:   rgba(255,255,255,0.03);
  --bs-table-striped-color:#d4c4b0;
  --bs-table-active-bg:    rgba(243,201,139,0.08);
  --bs-table-active-color: #f3c98b;
}

/* Belt-and-suspenders: also override the inset box-shadow trick directly */
.table > :not(caption) > * > * {
  background-color: transparent !important;
  box-shadow: none !important;
  color: #d4c4b0 !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Restore input inside table cells — don't let table rule clear the input bg */
.table > :not(caption) > * > * input.count,
.table > :not(caption) > * > * input[name="quantity"] {
  background-color: #2a1a0e !important;
  background:       #2a1a0e !important;
  box-shadow:       inset 0 0 0 9999px #2a1a0e !important;
  color:            #ffffff !important;
}

/* Table rows hover */
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(243,201,139,0.05);
  background-color: rgba(243,201,139,0.05) !important;
  color: #f3c98b !important;
}

/* Empty state row (white tbody area) */
.table tbody tr td[colspan] {
  background-color: transparent !important;
}

/* "No upcoming meals scheduled" empty cell */
.table tbody tr:has(td[colspan]) td,
.table tbody tr td.text-center.text-muted.py-4 {
  background: transparent !important;
  color: #9a8878 !important;
}

/* ─────────────────────────────────────────────────────────
   FIX 2: Calendar picker icon invisible on dark inputs
   The browser renders a dark calendar icon on a dark bg.
   We invert + recolour it to match our gold theme.
   ───────────────────────────────────────────────────────── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(1.1) !important;
  cursor: pointer;
  opacity: 0.85;
  padding: 2px;
  border-radius: 3px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: rgba(243,201,139,0.15);
}

/* Also fix the date/time text fields internal edit fields */
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-text {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────
   FIX 3: Bootstrap pagination also uses --bs-body-bg
   ───────────────────────────────────────────────────────── */
.page-link {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #d4c4b0 !important;
}
.active > .page-link, .page-link.active {
  background-color: #f3c98b !important;
  border-color: #f3c98b !important;
  color: #0b0502 !important;
}
.page-link:hover {
  background-color: rgba(243,201,139,0.10) !important;
  color: #f3c98b !important;
}

/* ─────────────────────────────────────────────────────────
   FIX 4: Bootstrap card bg uses --bs-body-bg  
   ───────────────────────────────────────────────────────── */
.card {
  --bs-card-bg: rgba(255,255,255,0.05);
  --bs-card-border-color: rgba(255,255,255,0.10);
  --bs-card-color: #d4c4b0;
}

/* ─────────────────────────────────────────────────────────
   FIX 5: "Showing N to N of N results" text
   ───────────────────────────────────────────────────────── */
.table-responsive + div,
.mt-2.text-muted, small.text-muted {
  color: #9a8878 !important;
}


/* ====================================================
   PLAN STATUS CARD — prevent text clipping
   The .card.border-0.bg-white.round-10.mb-3.p-3
   inner card must not clip the progress bar & small text
   ==================================================== */
.col-lg-4 .bg-sand .card,
.col-lg-4 .bg-sand .card.border-0,
.col-lg-4 .bg-sand .bg-white.round-10 {
  overflow: visible !important;
  background:    rgba(255,255,255,0.07) !important;
  border:        1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  padding-bottom: 16px !important;
}

/* Make progress wrapper use full width and proper height */
.col-lg-4 .progress {
  width: 100% !important;
  height: 10px !important;
  overflow: visible !important;
  background: rgba(255,255,255,0.12) !important;
  border-radius: 50px !important;
}

/* Remaining meals number — tighten size so it doesn't crowd */
.col-lg-4 .text-center h2.fw-bold.text_secondary {
  font-size: clamp(28px, 5vw, 40px) !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
  color: var(--gs-gold) !important;
}

.col-lg-4 .text-center p.text-muted.small {
  font-size: 13px !important;
  color: var(--gs-muted) !important;
  margin-bottom: 10px !important;
}

/* Total Allowed label */
.col-lg-4 small.text-center.d-block.mt-2.text-muted {
  font-size: 12px !important;
  color: var(--gs-muted) !important;
  display: block !important;
  text-align: center !important;
  margin-top: 8px !important;
  padding-bottom: 4px !important;
}

/* ============================================================
   HISTORY TABLE — Mobile responsive card layout
   On screens < 640px the table rows become stacked cards.
   No blade changes needed — pure CSS.
   ============================================================ */

@media (max-width: 639px) {

  /* Hide the thead on mobile — labels come from data-label */
  #meal-history  .table thead,
  #plan-history  .table thead { display: none !important; }

  /* Make table, tbody, tr all block */
  #meal-history  .table,
  #meal-history  .table tbody,
  #meal-history  .table tr,
  #plan-history  .table,
  #plan-history  .table tbody,
  #plan-history  .table tr {
    display: block !important;
    width:   100% !important;
  }

  /* Each row becomes a card */
  #meal-history  .table tbody tr,
  #plan-history  .table tbody tr {
    background:    rgba(255,255,255,0.05) !important;
    border:        1px solid rgba(255,255,255,0.10) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding:       4px 0 !important;
    overflow:      hidden !important;
  }

  /* Each cell becomes a label:value row */
  #meal-history  .table tbody td,
  #plan-history  .table tbody td {
    display:       flex !important;
    align-items:   center !important;
    justify-content: space-between !important;
    padding:       9px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-size:     13px !important;
    text-align:    right !important;
    color:         #d4c4b0 !important;
    min-height:    0 !important;
  }

  #meal-history  .table tbody td:last-child,
  #plan-history  .table tbody td:last-child {
    border-bottom: none !important;
  }

  /* Inject column label on the left via data-label attribute */
  #meal-history  .table tbody td::before,
  #plan-history  .table tbody td::before {
    content:     attr(data-label);
    font-weight: 700 !important;
    font-size:   11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       #9a8878 !important;
    flex-shrink: 0;
    margin-right: 12px;
    text-align:  left;
    white-space: nowrap;
  }

  /* Date cell — gold highlight */
  #meal-history  .table tbody td:first-child {
    background: rgba(243,201,139,0.06) !important;
    color:      #f3c98b !important;
    font-weight: 700 !important;
  }

  /* Remove table-responsive horizontal scroll on mobile */
  #meal-history  .table-responsive,
  #plan-history  .table-responsive {
    overflow-x: visible !important;
    border:      none !important;
    background:  transparent !important;
  }

  /* Pagination on mobile */
  #meal-history  .mt-2 nav,
  #plan-history  .mt-2 nav {
    display: flex;
    justify-content: center;
  }

  .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .pagination .page-link { padding: 6px 10px !important; font-size: 13px !important; }
}


/* ============================================================
   CART QUANTITY COUNTER — NUCLEAR OVERRIDE
   Uses every selector pattern + :is() + attribute selectors
   to guarantee win over Bootstrap bg-transparent / border-0
   ============================================================ */

/* Force − button */
button.minusBtn,
button[class*="minusBtn"],
.cart-table button.minusBtn,
.v-counter button.minusBtn,
form button.minusBtn {
  background-color: rgba(255,255,255,0.10) !important;
  background:       rgba(255,255,255,0.10) !important;
  border:           1px solid rgba(243,201,139,0.5) !important;
  border-radius:    50% !important;
  color:            #f3c98b !important;
  width:            30px !important;
  height:           30px !important;
  min-width:        30px !important;
  max-width:        30px !important;
  padding:          0 !important;
  margin:           0 !important;
  display:          inline-flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  font-size:        20px !important;
  font-weight:      800 !important;
  line-height:      1 !important;
  cursor:           pointer !important;
  flex-shrink:      0 !important;
  position:         relative !important;
  overflow:         visible !important;
}

button.minusBtn::before,
button[class*="minusBtn"]::before,
.cart-table button.minusBtn::before,
.v-counter button.minusBtn::before {
  content:     '−' !important;
  display:     block !important;
  color:       #f3c98b !important;
  font-size:   22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

button.minusBtn:hover,
.v-counter button.minusBtn:hover {
  background:   #f3c98b !important;
  border-color: #f3c98b !important;
}
button.minusBtn:hover::before,
.v-counter button.minusBtn:hover::before {
  color: #0b0502 !important;
}

/* Force + button */
button.plusBtn,
button[class*="plusBtn"],
.cart-table button.plusBtn,
.v-counter button.plusBtn,
form button.plusBtn {
  background-color: rgba(255,255,255,0.10) !important;
  background:       rgba(255,255,255,0.10) !important;
  border:           1px solid rgba(243,201,139,0.5) !important;
  border-radius:    50% !important;
  color:            #f3c98b !important;
  width:            30px !important;
  height:           30px !important;
  min-width:        30px !important;
  max-width:        30px !important;
  padding:          0 !important;
  margin:           0 !important;
  display:          inline-flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  font-size:        20px !important;
  font-weight:      800 !important;
  line-height:      1 !important;
  cursor:           pointer !important;
  flex-shrink:      0 !important;
  position:         relative !important;
  overflow:         visible !important;
}

button.plusBtn::before,
button[class*="plusBtn"]::before,
.cart-table button.plusBtn::before,
.v-counter button.plusBtn::before {
  content:     '+' !important;
  display:     block !important;
  color:       #f3c98b !important;
  font-size:   22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

button.plusBtn:hover,
.v-counter button.plusBtn:hover {
  background:   #f3c98b !important;
  border-color: #f3c98b !important;
}
button.plusBtn:hover::before,
.v-counter button.plusBtn:hover::before {
  color: #0b0502 !important;
}

/* Force quantity input — beat Bootstrap --bs-body-bg white */
input.count,
input[name="quantity"].count,
.v-counter input,
.v-counter input.count,
.cart-table input.count,
.cart-wrapper input.count,
form input.count {
  background-color: #2a1a0e !important;
  background:       #2a1a0e !important;
  color:            #ffffff !important;
  border:           1px solid rgba(243,201,139,0.5) !important;
  border-radius:    8px !important;
  text-align:       center !important;
  font-weight:      700 !important;
  font-size:        15px !important;
  width:            44px !important;
  height:           30px !important;
  min-height:       30px !important;
  padding:          0 4px !important;
  box-shadow:       none !important;
  -webkit-appearance: none !important;
  appearance:       none !important;
}

/* Override Bootstrap's inset box-shadow that re-paints the bg white */
input.count,
.v-counter input.count {
  box-shadow: inset 0 0 0 9999px #2a1a0e !important;
}

/* v-counter container sizing */
.v-counter {
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  flex-wrap:   nowrap !important;
}

/* PRODUCT header cell — fix gold highlight bleeding */
.cart-table thead th:first-child,
.cart-table table thead tr th:first-child {
  background: transparent !important;
  color:      #f3c98b !important;
}


/* ================================================================
   CART PAGE — COMPLETE REWRITE USING FRESH CLASS NAMES
   Blade now uses .gs-qty-btn / .gs-qty-input instead of
   .minusBtn/.plusBtn so template CSS cannot interfere at all.
================================================================ */

/* ── Table header ── */
.cart-table table thead tr th,
.cart-table table thead th {
  background:     rgba(255,255,255,0.06) !important;
  color:          #f3c98b !important;
  font-size:      12px !important;
  font-weight:    700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border:         none !important;
  border-bottom:  1px solid rgba(255,255,255,0.10) !important;
  padding:        13px 16px !important;
  box-shadow:     none !important;
}

/* ── Table body rows ── */
.cart-table table tbody tr td {
  background:     transparent !important;
  vertical-align: middle !important;
  padding:        14px 16px !important;
  border:         none !important;
  border-bottom:  1px solid rgba(255,255,255,0.07) !important;
}

/* ── Product image ── */
.cart-table .product-img,
.cart-table table tbody tr td .product-img {
  background:      rgba(255,255,255,0.06) !important;
  border-radius:   8px !important;
  width:           76px !important;
  height:          76px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  overflow:        hidden !important;
  padding:         6px !important;
}

/* ── v-counter container: kill white capsule ── */
.cart-table table tbody tr td .v-counter,
.cart-wrapper .v-counter,
.v-counter {
  background:       transparent !important;
  background-color: transparent !important;
  border-radius:    0 !important;
  width:            auto !important;
  height:           auto !important;
  display:          flex !important;
  align-items:      center !important;
  gap:              6px !important;
  padding:          0 !important;
}

.v-counter form {
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  background:  transparent !important;
  border:      none !important;
  padding:     0 !important;
  margin:      0 !important;
}

/* ── NEW: gs-qty-btn — fresh class, no template interference ── */
.gs-qty-btn {
  /* Size */
  width:           34px !important;
  height:          34px !important;
  min-width:       34px !important;
  min-height:      34px !important;
  /* Appearance */
  background:      rgba(255,255,255,0.10) !important;
  border:          1.5px solid rgba(243,201,139,0.6) !important;
  border-radius:   50% !important;
  /* Text symbol */
  color:           #f3c98b !important;
  font-size:       20px !important;
  font-weight:     700 !important;
  line-height:     1 !important;
  font-family:     'Montserrat', sans-serif !important;
  /* Layout */
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         0 !important;
  margin:          0 !important;
  cursor:          pointer !important;
  flex-shrink:     0 !important;
  /* Reset */
  position:        static !important;
  float:           none !important;
  text-indent:     0 !important;
  transition:      background 0.2s ease, border-color 0.2s ease !important;
}

.gs-qty-btn:hover {
  background:   #f3c98b !important;
  border-color: #f3c98b !important;
  color:        #0b0502 !important;
}

/* No ::before or ::after on fresh buttons */
.gs-qty-btn::before,
.gs-qty-btn::after {
  display: none !important;
  content: none !important;
}

/* ── NEW: gs-qty-input ── */
.gs-qty-input {
  /* Background — solid dark, beats Bootstrap inset box-shadow */
  background:         #1e100a !important;
  background-color:   #1e100a !important;
  box-shadow:         inset 0 0 0 9999px #1e100a !important;
  /* Text */
  color:              #ffffff !important;
  font-size:          15px !important;
  font-weight:        700 !important;
  text-align:         center !important;
  font-family:        'Montserrat', sans-serif !important;
  /* Border */
  border:             1.5px solid rgba(243,201,139,0.45) !important;
  border-radius:      8px !important;
  /* Size */
  width:              48px !important;
  height:             34px !important;
  min-height:         34px !important;
  line-height:        34px !important;
  /* Reset */
  padding:            0 4px !important;
  margin:             0 !important;
  float:              none !important;
  display:            inline-block !important;
  vertical-align:     middle !important;
  -webkit-appearance: none !important;
  appearance:         none !important;
}

/* ── Tfoot ── */
.cart-table tfoot td {
  background: transparent !important;
  border:     none !important;
  padding:    12px 16px !important;
}
.cart-table tfoot .text_secondary { color: #f3c98b !important; font-weight: 800 !important; }

/* ── Item name & price ── */
.cart-table a.text-title, .cart-table .text-title {
  color: #ffffff !important; font-weight: 700 !important;
}
.cart-table a.text-title:hover { color: #f3c98b !important; }
.cart-table .text-para { color: #d4c4b0 !important; font-weight: 700 !important; }

/* ── Delete icon ── */
.cart-table .cart-action {
  background: transparent !important; border: none !important; padding: 0 !important;
}
.cart-table .cart-action i    { color: #f08080 !important; font-size: 18px !important; }
.cart-table .cart-action:hover i { color: #ff5555 !important; }


/* ================================================================
   CART PAGE — MOBILE RESPONSIVE (≤ 640px)
   Transforms the 6-column table into stacked card layout.
   Pure CSS — no blade changes needed.
   Each <tr> becomes a horizontal card: [image | info | qty+total]
================================================================ */
@media (max-width: 640px) {

  /* Wrapper padding */
  .cart-wrapper {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Hide table header — info shown inline on mobile */
  .cart-table thead { display: none !important; }

  /* Make table / tbody block */
  .cart-table table,
  .cart-table tbody { display: block !important; width: 100% !important; }

  /* Each row = a card */
  .cart-table tbody tr {
    display:       flex !important;
    align-items:   flex-start !important;
    gap:           12px !important;
    background:    rgba(255,255,255,0.05) !important;
    border:        1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px !important;
    padding:       14px !important;
    margin-bottom: 12px !important;
    width:         100% !important;
    box-sizing:    border-box !important;
  }

  /* Hide all td by default, show specific ones */
  .cart-table tbody td {
    display:       none !important;
    border:        none !important;
    padding:       0 !important;
  }

  /* ── Col 1: Product image — show, fixed size ── */
  .cart-table tbody td:nth-child(1) {
    display:    block !important;
    flex-shrink: 0;
    width:       70px !important;
    padding:     0 !important;
  }

  .cart-table tbody td:nth-child(1) .product-img {
    width:           70px !important;
    height:          70px !important;
    min-width:       70px !important;
    border-radius:   10px !important;
    background:      rgba(255,255,255,0.07) !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    overflow:        hidden !important;
    padding:         6px !important;
  }

  .cart-table tbody td:nth-child(1) img {
    max-width:  100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  /* ── Info column: name + price + qty + total stacked ── */
}

/* ================================================================
   RENEW PLAN BUTTON — shown when all meals used, plan still valid
================================================================ */
.gs-renew-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             5px !important;
  background:      linear-gradient(135deg, #e6b56a, #f3c98b) !important;
  color:           #0b0502 !important;
  border:          none !important;
  border-radius:   50px !important;
  padding:         5px 14px !important;
  font-size:       12px !important;
  font-weight:     800 !important;
  letter-spacing:  0.04em !important;
  text-transform:  uppercase !important;
  text-decoration: none !important;
  cursor:          pointer !important;
  white-space:     nowrap !important;
  animation:       gs-renew-pulse 2s ease-in-out infinite !important;
  box-shadow:      0 3px 12px rgba(243,201,139,0.4) !important;
  transition:      transform 0.2s ease, box-shadow 0.2s ease !important;
}

.gs-renew-btn i {
  font-size: 13px !important;
  color:     #0b0502 !important;
}

.gs-renew-btn:hover {
  transform:  translateY(-1px) scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(243,201,139,0.5) !important;
  color:      #0b0502 !important;
}

/* Subtle pulse animation to draw attention */
@keyframes gs-renew-pulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(243,201,139,0.4); }
  50%       { box-shadow: 0 3px 20px rgba(243,201,139,0.7); }
}

/* ====================================================
   CART PAGE  (card-based, mobile-first layout)
   ==================================================== */

/* Page wrapper */
.cart-page-wrap {
  padding: 60px 0 80px;
}
.cart-page-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--gs-gold);
}
.cart-page-subtitle {
  font-size: 14px;
  opacity: 0.6;
  margin-bottom: 32px;
}

/* ── Item count badge ── */
.cart-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  margin-left: 8px;
  background: var(--gs-gold);
  color: var(--gs-dark);
  vertical-align: middle;
}

/* ── Cart Item Card ── */
.cart-item-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--gs-card);
  border: 1px solid var(--gs-border);
  margin-bottom: 14px;
  transition: box-shadow 0.2s;
}
.cart-item-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
}

/* Image */
.cart-item-img {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--gs-card2);
}
.cart-item-img-placeholder {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--gs-card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

/* Info block */
.cart-item-info {
  flex: 1;
  min-width: 0;
}
.cart-item-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  display: block;
  text-decoration: none;
  color: var(--gs-white) !important;
}
.cart-item-name:hover { color: var(--gs-gold) !important; }
.cart-item-unit-price {
  font-size: 13px;
  color: var(--gs-muted) !important;
  margin-bottom: 10px;
}

/* ── Qty pill ── */
.qty-controls {
  display: inline-flex;
  align-items: center;
  border-radius: 50px;
  overflow: hidden;
  border: 1.5px solid var(--gs-border);
  background: rgba(255,255,255,0.04);
}
.qty-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--gs-gold);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  line-height: 1;
}
.qty-btn:hover { background: rgba(243,201,139,0.12); }
.qty-value {
  min-width: 34px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--gs-white) !important;
  background: transparent;
  border: none;
  pointer-events: none;
}

/* ── Right side (total + delete) ── */
.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.cart-item-total {
  font-size: 17px;
  font-weight: 800;
  color: var(--gs-gold) !important;
  white-space: nowrap;
}
.cart-delete-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(220,53,69,0.12);
  border-radius: 8px;
  color: #f08080;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}
.cart-delete-btn:hover { background: rgba(220,53,69,0.28); }

/* ── Order Summary box ── */
.cart-summary-box {
  border-radius: 20px;
  background: var(--gs-card);
  border: 1px solid var(--gs-border);
  padding: 24px 22px;
  position: sticky;
  top: 90px;
}
.summary-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gs-gold) !important;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gs-border);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--gs-off);
}
.summary-row.total {
  font-size: 18px;
  font-weight: 800;
  color: var(--gs-white) !important;
  padding-top: 14px;
  border-top: 1px solid var(--gs-border);
  margin-top: 8px;
  margin-bottom: 0;
}

/* Checkout CTA button */
.btn-checkout {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  margin-top: 20px;
  background: var(--gs-gold) !important;
  color: var(--gs-dark) !important;
  border: none;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 6px 20px rgba(243,201,139,0.25);
}
.btn-checkout:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(243,201,139,0.35);
  color: var(--gs-dark) !important;
}

/* Continue shopping link */
.btn-continue {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
  margin-top: 10px;
  border: 1.5px solid var(--gs-border);
  background: transparent;
  color: var(--gs-off) !important;
  transition: background 0.2s, color 0.2s;
}
.btn-continue:hover {
  background: var(--gs-card2);
  color: var(--gs-white) !important;
}

/* ── Empty Cart State ── */
.cart-empty {
  text-align: center;
  padding: 70px 20px;
  border-radius: 20px;
  background: var(--gs-card);
  border: 1px dashed var(--gs-border);
}
.cart-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.4;
  display: block;
}
.cart-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gs-gold) !important;
  margin-bottom: 8px;
}
.cart-empty-text {
  font-size: 14px;
  color: var(--gs-muted) !important;
  margin-bottom: 28px;
}

/* ── Responsive: stack on small screens ── */
@media (max-width: 576px) {
  .cart-page-wrap { padding: 40px 0 60px; }
  .cart-page-title { font-size: 22px; }
  .cart-item-img, .cart-item-img-placeholder { width: 62px; height: 62px; }
  .cart-item-name { font-size: 14px; }
  .cart-item-total { font-size: 15px; }
  .cart-summary-box { position: static; margin-top: 8px; }
}

/* ====================================================
   CUSTOMIZE PLAN PAGE — mobile-first fixes
   ==================================================== */

/* ── Plan selector pills: wrap & full-width on mobile ── */
#planSelector {
  gap: 10px !important;
}
#planSelector .plan-btn {
  flex: 1 1 auto;
  text-align: center;
  white-space: normal !important;
  word-break: break-word;
  font-size: 13px !important;
  padding: 10px 14px !important;
  border-radius: 50px !important;
}

/* ── Menu item row: prevent overlap ── */
#menuItemsList .form-group {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--gs-border) !important;
  margin-bottom: 0 !important;
}

/* Meal info: takes remaining space, truncates if needed */
#menuItemsList .form-group > div:first-child {
  flex: 1 1 0;
  min-width: 0;
  padding-right: 8px;
}
#menuItemsList .form-group .meal-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gs-white) !important;
  line-height: 1.3;
  word-break: break-word;
  white-space: normal !important;
}
#menuItemsList .form-group .small.text-muted {
  font-size: 12px !important;
  color: var(--gs-muted) !important;
  line-height: 1.4;
  word-break: break-word;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#menuItemsList .form-group .small.fw-bold.text-success {
  font-size: 13px !important;
  color: var(--gs-gold) !important;
  margin-top: 3px;
}

/* Qty controls: fixed width, never shrink */
#menuItemsList .form-group .d-flex.align-items-center.gap-2 {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* +/- buttons */
#menuItemsList .qty-decrease,
#menuItemsList .qty-increase {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: var(--gs-card2) !important;
  border: 1px solid var(--gs-border) !important;
  color: var(--gs-gold) !important;
}
#menuItemsList .qty-decrease:hover,
#menuItemsList .qty-increase:hover {
  background: var(--gs-gold) !important;
  color: var(--gs-dark) !important;
  border-color: var(--gs-gold) !important;
}

/* Qty input box */
#menuItemsList .qty-input {
  width: 44px !important;
  min-width: 44px !important;
  height: 34px !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--gs-border) !important;
  color: var(--gs-white) !important;
  flex-shrink: 0 !important;
}

/* ── Order Summary box: show BELOW the form on mobile ── */
@media (max-width: 991px) {
  /* Order Summary: remove sticky, add spacing */
  .col-xl-4.col-lg-4.col-md-12 .p-3.bg-light.border.rounded.sticky-top {
    position: static !important;
    margin-top: 28px !important;
  }

  /* Booking box padding reduction on mobile */
  .booking-box { padding: 24px 16px !important; }

  /* Plan pills: each pill takes at least 45% width */
  #planSelector .plan-btn {
    min-width: calc(50% - 8px);
  }

  /* Allowed meals input */
  #allowedMeals { font-size: 14px !important; }

  /* Submit button full width */
  #submitBtn {
    width: 100% !important;
    font-size: 15px !important;
    padding: 14px !important;
  }
}

@media (max-width: 576px) {
  /* Full width plan pills on very small screens */
  #planSelector .plan-btn {
    min-width: 100% !important;
  }

  /* Slightly smaller text in summary */
  #summaryList { font-size: 13px !important; }
}

/* ====================================================
   HOME PAGE — hero facts & testimonial cards
   (moved from client/home.blade.php)
   ==================================================== */
.hero-facts-wrap { padding: 28px 0 50px; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 25px; justify-content: flex-start;
}
.hero-facts .counter-card {
  background: rgba(255,255,255,0.06); border-radius: 14px; padding: 25px;
  border: 1px solid var(--gs-border);
  color: var(--gs-off); flex: 1 1 300px; max-width: 320px; min-width: 280px;
  height: 160px; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
}
.hero-facts .value {
  font-size: 42px; font-weight: 800; line-height: 1;
  margin: 0 0 6px; color: var(--gs-gold);
}
.hero-facts .title {
  font-size: 16px; font-weight: 700; color: var(--gs-white); margin: 0 0 4px;
}
.hero-facts .desc { font-size: 14px; opacity: 0.85; margin: 0; font-weight: 600; }
.hero-facts-btn { text-align: center; margin-top: 35px; }
@media (max-width: 991px) {
  .hero-facts { justify-content: center; }
  .hero-facts .counter-card { max-width: 100%; height: auto; text-align: center; align-items: center; }
}

/* Testimonial slider equal-height cards */
.testimonial-slider-two .swiper-wrapper { align-items: stretch; }
.testimonial-slider-two .swiper-slide { display: flex; align-items: stretch; height: auto; }
.testimonial-card.style-two.fixed-step {
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; padding: 28px;
  height: 220px; min-height: 220px;
  box-shadow: 0 18px 20px rgba(0,0,0,0.25);
  border-radius: 12px; transition: transform .25s ease;
  background: var(--gs-card); border: 1px solid var(--gs-border);
}
.testimonial-card.style-two.fixed-step:hover { transform: translateY(-6px); }
.testimonial-card.style-two.fixed-step h6 { margin-bottom: 8px; line-height: 1.1; }
.testimonial-card.style-two.fixed-step p { margin-bottom: 0; opacity: .9; }
@media (max-width: 767px) {
  .testimonial-card.style-two.fixed-step { height: auto; padding: 18px; }
}

/* ====================================================
   DASHBOARD PAGE
   (moved from client/dashboard.blade.php)
   ==================================================== */
.dashboard-card {
  background: rgba(255,255,255,.05); border-radius: 16px; padding: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.05);
}
.dashboard-title { color: var(--gs-gold); font-weight: 800; margin-bottom: 15px; }
.dashboard-btn {
  background: var(--gs-gold); color: var(--gs-dark); border: none;
  padding: 12px 18px; border-radius: 10px; font-weight: 700;
}
.dashboard-btn:hover { opacity: .9; }
.dashboard-table { background: rgba(255,255,255,.04); border-radius: 12px; }
.dashboard-table th { color: var(--gs-gold); font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); }
.dashboard-table td { border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.dashboard-progress { height: 8px; background: rgba(255,255,255,.15); border-radius: 10px; overflow: hidden; }
.dashboard-progress-bar { background: var(--gs-gold); height: 100%; }

/* Info box */
.info-box {
  margin: 10px 0 15px; padding: 12px 16px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--gs-border);
  font-size: 14px; color: var(--gs-off);
}
.info-box strong { color: var(--gs-gold); display: block; margin-bottom: 4px; }

/* Zone table */
.zone-table {
  margin-top: 14px; background: rgba(255,255,255,.04);
  border: 1px solid var(--gs-border); border-radius: 10px; padding: 12px;
}
.zone-table h6 { margin: 0 0 8px; font-size: 14px; font-weight: bold; }
.zone-table table { width: 100%; font-size: 13px; }
.zone-table th { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--gs-border); color: var(--gs-muted); }
.zone-table td { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.zone-table tr:last-child td { border-bottom: none; }

/* Radio meal cards */
.meal-radio-btn { width: 22px; height: 22px; border: 2px solid #adb5bd; margin-top: 0 !important; }
.custom-radio-card {
  background: rgba(255,255,255,.05); border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08); transition: .25s;
}
.custom-radio-card:hover { border-color: var(--gs-gold); cursor: pointer; }
.custom-radio-card.selected { border: 2px solid var(--gs-gold); background: rgba(243,201,139,.08); }
.custom-radio-card.disabled { opacity: 0.6; cursor: not-allowed; background: rgba(255,255,255,.03); }

/* Status badges */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font-size: 12px;
  font-weight: 600; white-space: nowrap; letter-spacing: .3px;
}
.status-placed           { background: #fff3cd; color: #856404; }
.status-preparing        { background: #ffe8cc; color: #b45309; }
.status-out_for_delivery { background: #cfe2ff; color: #084298; }
.status-delivered        { background: #d1e7dd; color: #0a3622; }
.status-cancelled        { background: #f8d7da; color: #842029; }

/* Booking input */
.booking-input { background: #0b0502; border: 1px solid rgba(255,255,255,.15); color: #fff; }
.booking-input:focus { border-color: var(--gs-gold); box-shadow: none; }

/* History tabs */
.history-tabs .nav-link { color: #fff; font-weight: 600; }
.history-tabs .nav-link.active { background: var(--gs-gold); color: var(--gs-dark); }

/* Meal name in schedule */
.gs-meal-name {
  display: block; color: #fff; font-weight: 700; font-size: 14px;
  line-height: 1.4; white-space: normal !important; word-break: break-word; width: 100%;
}
.meal-content {
  flex: 1; display: flex; flex-direction: column;
  align-items: flex-start; gap: 5px; min-width: 0;
}

/* Schedule table mobile */
@media (max-width: 767px) {
  .schedule-table thead { display: none; }
  .schedule-table, .schedule-table tbody,
  .schedule-table tr, .schedule-table td { display: block; width: 100%; }
  .schedule-table tr {
    background: rgba(255,255,255,.06); border-radius: 12px;
    margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08);
  }
  .schedule-table td {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0; border: none; font-size: 13px;
  }
  .schedule-table td::before {
    content: attr(data-label); font-size: 11px; font-weight: 700;
    color: var(--gs-gold); text-transform: uppercase; letter-spacing: .6px;
    min-width: 80px; flex-shrink: 0;
  }
  .schedule-table td.action-cell {
    justify-content: flex-end; padding-top: 10px;
    margin-top: 4px; border-top: 1px solid rgba(255,255,255,.07);
  }
  .schedule-table td.action-cell::before { content: ''; min-width: 0; }
  .schedule-table td[data-label="Meal"] { align-items: flex-start; }
  .schedule-table td[data-label="Meal"]::before { padding-top: 2px; }
}

/* ====================================================
   ORDER STATUS PAGE & RECEIPT PAGE
   (moved from orders/show.blade.php & plans/receipt.blade.php)
   ==================================================== */
.status-icon-wrapper {
  width: 80px; height: 80px; color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.status-icon-wrapper i { font-size: 40px; font-weight: bold; }
.info-label {
  font-size: 13px; color: var(--gs-muted); font-weight: 700; margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.info-value { font-size: 16px; font-weight: 700; color: var(--gs-white); }
.item-list li { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.item-list li:last-child { border-bottom: none; }

/* ====================================================
   MENU PAGE (clientindex)
   (moved from admin/menuItems/clientindex.blade.php)
   ==================================================== */
.accordion-button::after { display: none !important; }
.accordion-button {
  background: var(--gs-dark) !important; color: var(--gs-white) !important;
  border-radius: 14px !important; border: 1px solid rgba(255,255,255,.08);
  box-shadow: none !important;
}
.accordion-button.collapsed { background: var(--gs-dark) !important; color: var(--gs-white) !important; }
.accordion-button span { color: var(--gs-gold); font-weight: 800; letter-spacing: 1px; }
.custom-arrow { color: var(--gs-gold); transition: transform .3s ease; }
.accordion-button:not(.collapsed) .custom-arrow { transform: rotate(180deg); }
.accordion-body { background: transparent !important; }
.accordion-item { background: transparent; }
.tour-card {
  background: rgba(255,255,255,.06); border-radius: 22px;
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 20px 40px rgba(0,0,0,.35); transition: .3s;
}
.tour-card:hover { transform: translateY(-6px); }
.tour-img img { border-radius: 14px; height: 210px; width: 100%; object-fit: cover; }
.tour-content h3 a { color: #fff; font-weight: 700; }
.tour-content h3 a:hover { color: var(--gs-gold); }
.tour-content p { color: #ccc; font-size: 14px; }
.tour-price h6 { color: var(--gs-gold); font-size: 22px; }
.btn.style-four {
  background: var(--gs-gold); color: var(--gs-dark); border: none;
  font-weight: 700; border-radius: 8px; padding: 8px 14px;
}
.btn.style-four:hover { background: var(--gs-gold2); }
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ====================================================
   NAVBAR MOBILE z-index fix
   (moved from client/layouts/master.blade.php)
   ==================================================== */
@media only screen and (max-width: 991px) {
  .switch-theme-mode {
    top: auto !important; bottom: 20px !important; right: 20px !important;
    transform: none !important; z-index: 900 !important;
  }
  .menu-area, .menu, .menu-mobile-header { z-index: 99999 !important; }
  .menu-item-has-children > a i { z-index: 100000; position: relative; }
}

.theme-arrow {
        width: 45px;
        height: 45px;
        background-color: rgba(243, 201, 139, 0.1); 
        color: #f3c98b; 
        border: 1px solid rgba(243, 201, 139, 0.2) !important;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        z-index: 10; /* Keeps arrows above the images */
      }
      .theme-arrow:hover {
        background-color: #f3c98b;
        color: #2a1206; 
      }
      .theme-arrow.swiper-button-disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }
      
      /* NEW: Floating positions for the Category slider */
      .overlay-prev {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
      }
      .overlay-next {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
      }

/* ====================================================
   ZONE SCHEDULE CARDS — Mobile-first card design
   Matches the dark card style with gold zone name
   ==================================================== */

.zone-schedule-wrap {
  margin-top: 16px;
}

.zone-schedule-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gs-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.zone-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Desktop: 2 columns */
@media (min-width: 768px) {
  .zone-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Large desktop: 4 columns */
@media (min-width: 1200px) {
  .zone-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

.zone-card {
  background: var(--gs-mid);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.zone-card.active-zone {
  border-color: var(--gs-gold);
  box-shadow: 0 0 0 2px rgba(243, 201, 139, 0.18);
}

.zone-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--gs-gold);
  letter-spacing: 0.02em;
}

.zone-card-area {
  font-size: 12px;
  color: var(--gs-muted);
  line-height: 1.45;
  margin-bottom: 4px;
}

.zone-card-slots {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.zone-slot-pill {
  flex: 1;
  min-width: 110px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.slot-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gs-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.slot-label i {
  font-size: 12px;
  color: var(--gs-gold2);
}

.slot-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--gs-white);
  letter-spacing: 0.02em;
}

.zone-schedule-note {
  font-size: 11px;
  color: var(--gs-muted);
  margin-top: 10px;
  margin-bottom: 0;
  font-style: italic;
}

/* On very small screens, stack the slot pills if needed */
@media (max-width: 360px) {
  .zone-card-slots {
    flex-direction: column;
  }
  .zone-slot-pill {
    min-width: unset;
  }
}


/* ====================================================
   ZONE LOCATION WRAP — parent container for zone section
   Replaces Bootstrap bg-light so dark zone cards render correctly
   ==================================================== */
.zone-location-wrap {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--gs-border) !important;
}
.zone-location-wrap h6,
.zone-location-wrap label.small {
  color: var(--gs-off) !important;
}