:root {
  --primary: #FFB72B;
  --primaryDark: #F4A306;
  --secondary: #FFB72B;   /* was #46AA02 (green) → gold */
  --bodyBg: #fff;
  --darkBg: #FFFDEE;
}
body {
  color: var(--black);
}
.navItems a {
  color: inherit;
}
.btnPrimary::before, .btnWhiteOutline::before {
  background-color: var(--primaryDark);
}
.btnWhiteOutline {
  border-color: var(--black);
  background-color: var(--black);
}
.btnWhiteOutline:hover {
  border-color: var(--primaryDark);
}
.formStyle input[type="date"] ~ .inputFieldIcon, .formStyle input[type="time"] ~ .inputFieldIcon {
  background-color: var(--bs-body-bg);
  color: var(--black);
}
.lineSubTitle > span::before, .lineSubTitle > span::after {
  border-top-color: var(--black);
}
:where(.bannerStyle2, .reservationSection) .lineSubTitle > span::before,
:where(.bannerStyle2, .reservationSection) .lineSubTitle > span::after {
  border-top-color: var(--white);
}
.infoCard, .addressCol {
  border-color: rgba(0,0,0,.2);
}
.aboutInfoSection {
  color: var(--black);
}
.aboutImgStyle img {
  --darkBg: #252525;
}
.fromTheMenu .btnLight {
  background-color: var(--black);
  border-color: var(--black);
}
.fromTheMenu .btnLight:hover {
  border-color: var(--darkBg);
  background-color: var(--darkBg);
}
.fromTheMenu .btnLight::before {
  background-color: var(--primaryDark);
}
.aboutInfoSection .lineSubTitle.textSecondary {
  color: inherit;
}
.selectionCard {
  background-color: rgba(255,255,255,0.5);
  border-color: rgba(0,0,0,0.1);
}
.cartCount {
  color: var(--black);
}
.menuColMain {
  --darkBg: var(--black);
}
.btn_primary{
  background: var(--primary);
}
.modalNewstyle .modal-content {
  background-color: var(--white) !important;
  color: #212529 !important;
}
.modalNewstyle .close {
  color: gray !important;
  border: 2px solid transparent !important;
}
.modal-content {
  background-color: var(--white) !important;
  color: #212529 !important;
}
.modalNewstyle .modal-content .rightIconFld{
  color: #212529 !important;
  background-color: transparent !important;
  border-radius: 30px;
}
.dropMenu li > a, .navItems li > a {
  color: var(--dark) !important;
}
.dropMenu li > a.active,.dropMenu li > a:hover, .navItems li > a.active, .navItems li > a:hover {
  color: var(--primary) !important;
}
.modalNewstyle .modal-content .rightIconFld > input{
  color: #212529;
  background-color: var(--white) !important;
  border-radius: 30px;
}
.modalNewstyle .modal-content .form-select, .modalNewstyle .modal-content .form-control {
  background-color:var(--white) !important;
}

/* ============================================================
 * INVERT HEADER + FOOTER TO DARK  (the rest of the site stays white)
 * ============================================================ */

/* ---- Header → dark ---- */
header.headerSection {
  background-color: #141414;
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.12);
}
/* Keep the header dark once scrolled: custom.js adds body.fixed-header on
   scroll, and the theme's `.fixed-header .headerSection` rule paints it
   var(--bodyBg) — which is WHITE in this variation. Override it. */
.fixed-header header.headerSection {
  background-color: #141414 !important;
  color: #ffffff !important;
}
header.headerSection .navItems a,
header.headerSection .navItems li > a {
  color: #ffffff !important;
}
header.headerSection .navItems a.active,
header.headerSection .navItems a:hover,
header.headerSection .navItems li > a.active,
header.headerSection .navItems li > a:hover {
  color: var(--primary) !important;
}
header.headerSection .menuToggle > a > span {
  background-color: #ffffff;
}
/* Register (outline) button: white outline so it's visible on the dark bar
   (Login uses the gold gradient, already visible) */
header.headerSection .btnWhiteOutline {
  border-color: #ffffff;
  background-color: transparent;
  color: #ffffff;
}
/* cart badge is gold; keep dark text on it for contrast */
header.headerSection .cartCount {
  color: var(--black);
}

/* ---- Footer → dark ---- */
.footerColMain {
  background-color: #141414 !important;
  color: #ffffff !important;
}
.footerColMain .footerCol,
.footerColMain .footerCol p,
.footerColMain .footerCol ul > li,
.footerColMain .footerCol a {
  color: #ffffff !important;
}
/* footer logo divider was black (for light footer) → light on dark */
.footerLogo::before {
  background-color: #ffffff;
}
.footerLogo span {
    background-color: #141414 !important;
}