@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');

:root {
  --baseFont: "Nunito", sans-serif;
  --subTitleFont: "Playball", cursive;
  --primary: #F3274C;
  --primaryDark: #ce001f;
  --primaryRGB: 243, 39, 76;
  --secondary: #01693A;
  --white: #FFFFFF;
  --black: #121212;
  --blackRGBA: 18, 18, 18;
  --darkBg: #121212;
  --primaryBg: #F3274C;
  --text: #434343;
  --border: #E8E8E8;
  --transition: 400ms ease-in-out 0s;
}
body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text); 
  font-family: var(--baseFont);
}
a, a:hover {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
img {
  max-width: 100%;
}

/* ===== Scrollbar CSS ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--darkBg);
}
*::-webkit-scrollbar {
  width: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--darkBg);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 0px;
  border: 1px solid var(--darkBg);
}

/* Btn */

.btn {
  padding: 14px 32px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  text-transform: capitalize;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 101%;
  height: 100%;
  -webkit-mask: url("../images/urban-sprite.png");
  mask: url("../images/urban-sprite.png");
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
}
.btn:hover::before {
  -webkit-animation: ani 0.7s steps(29) forwards;
  animation: ani 0.7s steps(29) forwards;
}
@-webkit-keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
.btnPrimary {
  background-color: var(--primary);
  color: var(--white);
}
.btnPrimary:hover {
  background-color: var(--primaryDark);
  color: var(--white);
}
.btn.btnPrimary::before {
  background-color: var(--primary);
  color: var(--white);
}
.btnPrimaryOutline {
	background-color: var(--white);
	border: 1px solid var(--primary);
	color: var(--primary);
}
.btnPrimaryOutline:hover {
  background-color: rgba(var(--primaryRGB), 0.1);
  border-color: var(--primary);
  color: var(--primary);
}
.btn.btnPrimaryOutline::before {
  background-color: var(--white);
  color: var(--primary);
}
.btnDarkOutline {
	background-color: var(--white);
	border: 1px solid var(--darkBg);
	color: var(--black);
}
.btnDarkOutline:hover {
  background-color: rgba(var(--blackRGBA), 0.1);
  border-color: var(--darkBg);
  color: var(--black);
}
.btn.btnDarkOutline::before {
  background-color: var(--white);
  color: var(--black);
}
.btnDark {
  background-color: var(--darkBg);
  color: var(--white);
}
.btnDark:hover {
  background-color: var(--white);
  color: var(--black);
  border-color: transparent;
}
.btn.btnDark::before {
  background-color: var(--darkBg);
  color: var(--white);
}

/* ── .btn_primary (underscore) → v19 button appearance ───────────────────────
   Content views use class="btn btn_primary" (underscore); v19 only defines
   .btnPrimary (camelCase). These rules give .btn_primary the same appearance.

   Cascade problems fixed:
   1. root .btn_primary (0,1,0): min-width:170px  → reset with min-width:auto (0,2,0 wins)
   2. root .btn_primary:before (0,1,1): opacity:0 + background:secondary-theme-color
      → override with (0,2,1) — opacity:1 lets the mask control visibility; correct bg color
   3. newthemechangeui.css .btn_primary:hover:before { rgba(0,0,0,0.1) !important } (0,2,1)
      → override with (0,3,1) + !important — restores correct hover animation colour
   ──────────────────────────────────────────────────────────────────────────── */
.btn.btn_primary {
  background-color: var(--primary);
  color: var(--white);
  min-width: auto;  /* reset root's forced min-width: 170px */
}
.btn.btn_primary:hover {
  background-color: var(--primaryDark);
  color: var(--white);
}
.btn.btn_primary::before {
  background-color: var(--primaryDark); /* override root's secondary-theme-color */
  opacity: 1;                            /* override root's opacity:0; mask controls visibility */
}
.btn.btn_primary:hover::before {
  /* (0,3,1) + !important beats newthemechangeui's (0,2,1) !important rgba(0,0,0,0.1) */
  background-color: var(--primaryDark) !important;
}
.btn.btn_primary.smBtn {
  min-width: 88px; /* restore small-button width from newthemechangeui.css */
}

/* components */
h2, h3, h4, h5, h6 {
  color: var(--black);
}
.sectionSpace {
  padding: 120px 0;
}
.centerTitle {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.textPrimary {
  color: var(--primary);
}
.textSecondary {
  color: var(--secondary);
}
.primaryBg {
  background-color: var(--primary);
}
.darkBg {
  background-color: var(--darkBg);
}
.lgTitle {
  font-size: 62px;
  line-height: 1.3;
  font-weight: 800;
  text-transform: capitalize;
}
.mdTitle {
  font-size: 36px;
  line-height: 1.1;
  font-weight: 800;
}
.pText {
  font-size: 18px;
  line-height: 1.7;
}
.subTitle {
  font-size: 36px;
  line-height: 1.1;
  font-family: var(--subTitleFont);
  display: block;
}
.titleCol h2{
  margin: 15px 0 20px;
}

/*-------------------------------
  Preloader
--------------------*/
/* Preloader */
.ak-preloader {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99999;
}
.ak-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}
.ak-preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: #777570;
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}
/* Neutralise the global .spinner:before rule from ui-util.css which
   would otherwise render a small red arc below the preloader spinner */
.ak-preloader .animation-preloader .spinner:before {
  content: none;
  display: none;
}
.ak-preloader .animation-preloader .txt-loading {
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 60px;
  font-weight: 800;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 3s infinite;
  color: var(--primary);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
}
.ak-preloader .animation-preloader .txt-loading .letters-loading {
  color: rgba(0, 0, 0, 0.2);
  position: relative;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  animation-delay: 0.1s;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  animation-delay: 0.2s;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  animation-delay: 0.3s;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  animation-delay: 0.4s;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  animation-delay: 0.5s;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  animation-delay: 0.6s;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
  animation-delay: 0.8s;
}
.ak-preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before {
  animation-delay: 0.9s;
}
.ak-preloader .loader-section {
  background-color: var(--darkBg);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}
.ak-preloader .loader-section.section-left {
  left: 0;
}
.ak-preloader .loader-section.section-right {
  right: 0;
}
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.2s ease-out;
}
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
/* loading-overlap */
.loading-overlap {
  position: fixed;
  background-color: var(--darkBg);
  z-index: 1000;
  height: 0vh;
  width: 100%;
  bottom: 0;
}
/* scrollup start */
.ak-scrollup {
  position: fixed;
  bottom: -60px;
  right: 40px;
  color: var(--white);
  padding: 5px;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.4s ease;
  z-index: 10;
  background-color: var(--black);
  box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.ak-scrollup:hover {
  background-color: var(--primary);
  color: var(--white);
}
.ak-scrollup.ak-scrollup-show {
  bottom: 50px;
}
/* scrollup end */

/* Header */
.logo svg, .sidebarLogo svg {
  max-width: 100%;
  height: auto;
}
.sidebarLogo {
	padding: 0 0 20px;
}
.sidebarLogo a {
  display: inline-block;
  max-width: 160px;
}
.logo {
  --logo-height: 50px;
  height: var(--logo-height);
  max-width: 200px;
  display: flex;
  align-items: center;
}
.logo > a > img, .logo > a > svg {
  max-width: 100%;
  object-fit: contain;
  max-height: var(--logo-height);
}
header.headerSection {
  position: sticky;
  top: 0;
  z-index: 9;
  background-color: var(--white);
  color: var(--black);
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.menuColMain {
  display: flex;
  justify-content: center;
}
.navItems {
  display: flex;
  column-gap: 40px;
  font-size: 16px;
}
.navItems a {
  font-weight: 700;
  color: var(--black);
  transition: color var(--transition);
}
.navItems a.active, .navItems a:hover {
  color: var(--primary);
}
.headerRightOption {
  display: flex;
  align-items: center;
  column-gap: 20px;
}
.cartCol {
  position: relative;
  display: block;
}
.cartIcon {
	display: block;
}
.cartCount {
  color: var(--white);
  background-color: var(--primary);
  font-size: 12px;
  padding: 2px 4px;
  position: absolute;
  top: -5px;
  right: 0;
  line-height: 1;
  border-radius: 10px;
  min-width: 14px;
  text-align: center;
  font-weight: 600;
}
.menuToggle {
  position: relative;
  width: 26px;
  height: 18px;
  margin-left: auto;
}
.menuToggle > a {
  display: block;
  width: 100%;
  height: 100%;
}
.menuToggle > a > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  width: 100%;
  background-color: var(--black);
  border-radius: 20px;
  transition: all 300ms ease-in-out 0s;
}
.menuToggle > a > span:nth-child(2) {
  top: 8px;
}
.menuToggle > a > span:last-child {
  bottom: 0;
  top: auto;
}
.actNav .menuToggle > a > span:nth-child(1) {
  transform: rotate(135deg);
  top: 8px;
}
.actNav .menuToggle > a > span:nth-child(2) {
  opacity: 0;
  transform: translateX(-25px);
}
.actNav .menuToggle > a > span:nth-child(3) {
  transform: rotate(-135deg);
  bottom: 8px;
}
.menuBackDrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 800ms ease-in-out 0s;
  z-index: 9;
  background-color: rgba(19, 15, 38, 0.7);
}


/* Modal */
/* login modal */
.modalNewstyle {
  --xSpace: 30px;
  --ySpace: 30px;
}
.modalNewstyle .modal-body,
.modalNewstyle .modal-header {
  padding: var(--ySpace) var(--xSpace);
  position: relative;
}
.modalNewstyle .modal-header {
	flex-direction: column;
	row-gap: 10px;
}
.modalNewstyle .modal-header + .modal-body {
  padding-top: 10px;
  padding-bottom: calc(var(--ySpace) + 10px);
}
.modalNewstyle .modal-content {
  background-color: var(--black);
}
html:not([data-bs-theme="dark"]) .modalNewstyle .modal-content {
	background-color: var(--white);
}
.modalNewstyle .btn-close {
	--closeIconSize: 10px;
  --closeIconPosition: 15px;
	padding: 4px;
	width: var(--closeIconSize);
	height: var(--closeIconSize);
	position: absolute;
	right: var(--closeIconPosition);
	top: var(--closeIconPosition);
	margin: 0;
}
.modalForm {
	margin: 0 auto;
	max-width: 520px;
}
.sideLinesDivider {
  overflow: hidden;
  text-align: center;
  position: relative;
}
.sideLinesDivider > .dividerText {
  display: inline-block;
  position: relative;
  padding: 0 20px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c1c5d0;
  font-weight: 600;
}
.sideLinesDivider > .dividerText::before, .sideLinesDivider > .dividerText::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100vw;
  margin-top: -1px;
  border-top: 2px solid currentColor;
  opacity: 0.2;
}
.sideLinesDivider > .dividerText::before {
  right: 100%;
}
.sideLinesDivider > .dividerText::after {
  left: 100%;
}
.modalNewstyle .form-label {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 4px;
}
.errorMsg {
	font-size: 14px;
	color: var(--error);
	letter-spacing: 0.5px;
	font-weight: 400;
	margin: 4px 0;
	line-height: 1.2;
  display: none;
}
#resend_otp {
  transition: color var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
#timer {
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}
.recaptchaCol {
	border-radius: 8px;
	overflow: hidden;
  display: inline-flex;
  max-width: 100%;
}
/* form style */
.rightIconFld {
	position: relative;
}
.rightIconFld > .inputFieldIcon {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translate(0, -50%);
	pointer-events: none;
  z-index: 2;
}
.fieldIcon {
	height: auto;
	width: 22px;
  display: block;
  opacity: 0.5;
}
.formStyle {
  font-size: 16px;
}
.formStyle .rightIconFld .form-control {
	padding-right: 50px;
}
.formStyle .form-select, .formStyle .form-control {
  border-radius: 30px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 20px;
  border-width: 2px;
  border-radius: 6px;
}
.formStyle .rightIconFld .form-control.reservationField {
	padding-right: 15px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
  pointer-events: none;
}

/* Target the custom container */
.customDatePicker input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.datePlaceholder {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #aaa;
  pointer-events: none;
  transition: 0.2s;
}
/* Opening Hour */
.titleLbl {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
}
.openingHourModalContent {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  font-size: 14px;
}
.simpleList > li + li {
	margin-top: 8px;
}
/* Modal */

/* banner */
.bannerSection {
  padding: 140px 0 200px;
  background-color: var(--darkBg);
  position: relative;
}
.customAnimation1 {
  opacity: 0;
  transform: scale(0.7);
  position: relative;
  top: 40px;
  transition: all 0.6s ease-in-out, transform 2s ease 0.7s;
}
.aos-animate .customAnimation1 {
  top: 0px;
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.2s;
}   
.bannerContent > p {
  padding-top: 15px;
}
.customAnimation2 {
  opacity: 0;
  position: relative;
  top: 40px;
  transition: all 0.8s ease-in-out, transform 2s ease 0.7s;
}
.bannerBtns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 40px;
}
.aos-animate .customAnimation2 {
  opacity: 1;
  top: 0px;
  transition-delay: 1.5s;
}
.reservationBtn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.btnSkew {
  padding: 15px 40px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  transition: all 0.3s ease;
  background-color: var(--white);
  border-radius: 0;
  font-size: 18px;
}
.btnSkew:hover, .btnSkew:active {
  color: var(--primary) !important;
  background-color: var(--white) !important;
}

/* Reservation */
.reservationInner {
  padding: 100px 60px;
  border-radius: 30px;
}

/* About */
.aboutImgCol {
  width: 675px;
}
.aboutImgStyle {
  position: relative;
}
.aboutImgStyle > img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.aboutImgLeft {
  padding-top: calc(490 / 280 * 100%);
}
.aboutImgRight {
  padding-top: calc(658 / 380 * 100%);
}
.aboutContent {
  padding: 60px;
  border-radius: 15px;
  background-color: var(--white);
  margin-left: -80px;
  z-index: 1;
  position: relative;
  transition: var(--transition);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.aboutContent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../images/about-shape-bg.svg);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 50% auto;
  pointer-events: none;
  opacity: 0.2;
}
.aboutContentInner {
  position: relative;
  z-index: 1;
}
.aboutContentInner .btnCol {
  padding-top: 20px;
}
.aboutContentInner .titleCol, .aboutContentInner .btnCol {
  position: relative;
}

/* Special Selection */
.filterTrigger {
  padding: 12px 20px;
  border-radius: 10px;
  background-color: transparent;
  color: var(--black);
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--black);
  font-size: 18px;
  line-height: normal;
  white-space: nowrap;
  transition: color 300ms ease-in-out 0s, opacity 300ms ease-in-out 0s, background-color 300ms ease-in-out 0s, border-color 300ms ease-in-out 0s;
}
.filterTrigger:not(.active) {
  opacity: 0.6;
  border-color: rgba(0, 0, 0, 0.2);
}
.filterTrigger:not(.active):hover {
	opacity: 1;
	background-color: var(--white);
	border-color: rgba(0, 0, 0, 0.6);;
}
.filterTrigger.active {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.selectionCard {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 15px;
  background-image: url('../images/card-side-bg.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  background-color: var(--white);
  color: var(--black);
	border: 2px solid var(--border);
	border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 300ms ease-in-out 0s;
}
.blankLink {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.selectionCard:hover {
  box-shadow: 0 6px 10px rgba(var(--primaryRGB), 0.2);
}
.selectionDish {
  --imgSize: 80px;
	width: var(--imgSize);
	height: var(--imgSize);
  max-width: initial;
	object-fit: cover;
	border-radius: 50%;
}
.selectionContentCol {
	width: 100%;
}
.dishName, .dishPrice {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.dishPrice {
	white-space: nowrap;
}
.dishName {
  padding-right: 16px;
}
.selectionContentCol p:last-child {
	margin-bottom: 0;
}
.selectionContentCol p {
	font-size: 16px;
	line-height: 1.5;
	margin-top: 10px;
}

/* Chef-Suggest */
.wAuto {
  width: auto !important;
}
.easeLinear {
  transition-timing-function: linear !important;
}
.chefSwiper .swiper-slide {
	height: auto;
}
.chefSwiper .swiper-slide .chefCard {
  --cardsize: 600px;
  min-width: var(--cardsize);
  max-width: var(--cardsize);
}
.chefSliderCol {
  padding: 30px;
  margin-top: 30px;
  padding-bottom: 0;
}
.chefCard {
  position: relative;
  height: 100%;
}
.chefCardInner {
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 1px;
  background-color: var(--white);
}
.chefImgCol {
  --imgSize: 300px;
  width: var(--imgSize);
  height: var(--imgSize);
}
.chefImgCol img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.chefContent {
  padding: 20px;
}
.chefContent > a {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  display: block;
}
.chefContent > a:hover {
  color: var(--primary);
}
.chefContent > p {
  margin-bottom: 0;
}
.chefSwiper {
  padding-bottom: 100px;
}
.paginationStyle .swiper-pagination-bullet {
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid transparent;
  position: relative;
  opacity: 1;
  margin: 0 !important;
  opacity: 0.6;
}
.paginationStyle .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.paginationStyle .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.chefpagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--white);
}
.chefpagination .swiper-pagination-bullet::before {
  background-color: var(--white);
}

/* Testimonial */
.socialBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  background-color: var(--white);
  color: var(--black);
  min-width: 200px;
  font-size: 20px;
  line-height: 1.2;
  transition: var(--transition);
  font-weight: 800;
}
.socialBtn:hover {
	color: var(--white);
  background-color: var(--darkBg);
}
.btnIcon > img {
  transition: var(--transition);
}
.socialBtn:hover .btnIcon > img {
  filter: brightness(0) invert(1);
}
.testimonialSection {
  position: relative;
  overflow: hidden;
}
.testimonialContent {
  max-width: 600px;
}
.testimonialInner {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 50px;
  margin-top: 100px;
  background-color: var(--white);
  box-shadow: 10px 10px 20px rgba(0,0,0,0.15);
  position: relative;
}
.testimonialInner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--primaryBg);
  z-index: -1;
  transform: skew(-2deg, 2deg);
  border-radius: 10px;
}
.reviewStar {
  margin-bottom: 24px;
}
.reviewerName {
  padding-top: 15px;
}
.reviewerDesignation {
  font-weight: 700;
}
.reviewSwiper {
  padding-bottom: 85px;
}
.reviewPagination {
  text-align: left;
}
.reviewPagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--primaryBg);
}
.reviewPagination .swiper-pagination-bullet::before {
  background-color: var(--primaryBg);
}
.testimonialLeaf {
  position: absolute;
  left: -80px;
  bottom: -50px;
  pointer-events: none;
  z-index: -1;
  transform: rotate(38deg);
  opacity: 0.2;
}


/* Blog */
.blogInner {
  padding-top: 60px;
}
.blogCard {
  border: 1px solid var(--border);
  position: relative;
  transition: var(--transition);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 1px;
  background-color: var(--white);
}
.blogCard.blogCardLg {
  height: 100%;
}
.blogCardLg .blogCardImg > img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.blogCardImg > img {
  border-radius: 15px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.blogCardContent {
  padding-top: 10px;
}
.blogCardContent > h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blogCardmd .blogCardImg {
  --imgWidth: 165px;
  width: var(--imgWidth);
}
.blogCardDesc {
  padding: 15px;
}
.blogRtCard {
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.blogCardImg.imageAnimation {
  z-index: 3;
}
.blogCard:hover .blogCardImg.imageAnimation:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}
.linkStyle {
  font-weight: 600;
}


/* imageAnimation */
.imageAnimation {
	position: relative;
	overflow: hidden;
	margin: 0;
}
.imageAnimation:after{
	content: "";
	position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255,255,255,.3);
  transform: translate(-50%,-50%) rotate(-45deg);
  z-index: 1;
  pointer-events: none;
}
.imageAnimation:hover:after{
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}
/* imageAnimation */

/*** Gallery ***/
.wAuto {
  width: auto !important;
}
.easeLinear {
  transition-timing-function: linear !important;
}
.galleryVariable + .galleryVariable {
  margin-top: 5px;
}
.galleryVariable {
  --gImgSize: 270px;
}
.galleryImg {
  width: var(--gImgSize);
  height: var(--gImgSize);
}
.galleryImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumbCol {
  display: flex;
  flex-direction: column;
}

/** Footer **/
.footerSection {
  padding: 100px 0;
  --space: 60px;
  background-color: #fff;
}
.footerLinks > ul {
  display: flex;
  padding: 20px;
  border-top: 1px solid rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(0,0,0,0.5);
}
.footerLinks > ul > li {
  position: relative;
  flex: 1 1  0;
}
.footerLinks > ul > li+li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: rgba(0,0,0,0.5);
}
.footerLinks > ul > li > a {
  font-weight: 700;
  position: relative;
  display: block;
  font-size: 16px;
  padding: 0 30px;
  transition: var(--transition);
  text-align: center;
  text-transform: capitalize;
  color: var(--black);
}
.footerLinks > ul > li > a:hover,
.footerLinks > ul > li > a.active {
  color: var(--primary);
}
.footerContent {
  padding: var(--space) 0;
}
.footerContent p,
.footerContent ul li {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--text);
}
.footerContent ul li span {
  font-weight: 500;
}
.footerContent a {
  transition: color var(--transition);
}
.footerContent a:hover {
  color: var(--primary);
}
.addressCol {
  border-left: 1px solid rgba(0,0,0,0.5);
  border-right: 1px solid rgba(0,0,0,0.5);
}
.footerLogo {
  position: relative;
}
.footerLogo:before {
  content: "";
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  transform: translate(0,-50%);
  z-index: 1;
}
.footerCopyright {
  margin-top: var(--space);
}
.footerLogo span {
  padding: 0 40px;
  background-color: var(--white);
  display: inline-block;
  position: relative;
  z-index: 2;
}
.footerTitle {
  font-size: 36px;
  font-weight: 800;
}
.copyrightCol {
  font-size: 16px;
}
.socialMenu {
  padding-bottom: var(--space);
}
.socialMenu ul {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
}
.socialMenu a {
  transition: opacity var(--transition);
}
.socialMenu a:hover {
	opacity: 0.5;
}




/*-------------------------------
  MEDIA QAURY START
--------------------------*/

@media (min-width:576px) {
  .chefSwiper .swiper-slide {
    width: auto !important;
  }
}
@media (min-width:768px) {
  .modal-md {
    --bs-modal-width: 600px;
  }
}
@media (min-width:768px) and (max-width:991px) {
  .modal-lg {
    --bs-modal-width: 650px;
  }
}
@media (max-width: 1699px) {
  .chefImgCol {
    --imgSize: 250px;
  }
  .chefSwiper .swiper-slide .chefCard {
    --cardsize: 560px;
  }
}
@media (max-width: 1399px) {
  .navItems {
    column-gap: 30px;
  }
  .lgTitle {
    font-size: 54px;
  }
  .sectionSpace {
    padding: 100px 0;
  }
  .aboutImgCol {
    width: 560px;
  }
  .aboutContent {
    padding: 40px;
  }
  .chefSwiper .swiper-slide .chefCard {
    --cardsize: 500px;
  }
  .chefImgCol {
    --imgSize: 240px;
  }
  .galleryVariable {
    --gImgSize: 250px;
  }
  .blogCardmd .blogCardImg {
    --imgWidth: 135px;
  }
  .blogCardDesc {
    font-size: 14px;
  }
  .footerTitle {
    font-size: 30px;
  }
  .footerContent p, .footerContent ul li {
    font-size: 16px;
  }
}
@media (max-width: 1199px) {
  .headerRightOption {
    column-gap: 15px;
  }
  .headerSection .btn {
    padding: 10px 20px;
  }
  body {
    font-size: 14px;
    line-height: 1.4;;
  }
  .subTitle {
    font-size: 26px;
  }
  .lgTitle {
    font-size: 42px;
  }
  .mdTitle {
    font-size: 32px;
  }
  .pText {
    font-size: 16px;
    line-height: 1.5;
  }
  .titleCol h2 {
    margin: 10px 0;
  }
  .bannerSection {
    padding: 120px 0 180px;
  }
  .bannerContent > p {
    padding-top: 5px;
  }
  .bannerBtns {
    gap: 10px;
    margin-top: 20px;
  }
  .reservationInner {
    padding: 30px;
  }
  .reservationInner .formStyle {
    margin-top: 20px;
  }
  .aboutImgCol {
    width: 470px;
  }
  .aboutContentInner .btnCol {
    padding-top: 10px;
  }
  .chefSliderCol {
    padding: 15px 15px 0;
  }
  .chefSwiper .swiper-slide .chefCard {
    --cardsize: 420px;
  }
  .chefImgCol {
    --imgSize: 185px;
  }
  .chefContent {
    padding: 15px;
  }
  .chefContent > a {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .blogInner {
    padding-top: 30px;
  }
  .blogCard {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  }
  .blogRtCard {
    margin-top: 20px;
    gap: 10px;
  }
  .galleryVariable {
    --gImgSize: 200px;
  }
  .socialBtn {
    padding: 12px 20px;
    min-width: 140px;
    font-size: 16px;
  }
  .selectionCard {
    gap: 12px;
    padding: 14px;
  }
  .dishName, .dishPrice {
    font-size: 16px;
  }
  .selectionContentCol p {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 6px;
  }
  .filterTrigger {
    font-size: 16px;
  }
  .selectionDish {
    --imgSize: 60px;
  }
  .socialBtn .btnIcon > img {
    max-width: 20px;
  }
  .testimonialInner {
    margin-top: 60px;
  }
  .footerSection {
    padding: 80px 0;
    --space: 40px;
  }
  .footerLinks > ul {
    padding: 15px;
  }
  .footerLinks > ul > li > a {
    padding: 0 20px;
  }
  .footerTitle {
    font-size: 26px;
  }
  .footerContent p, .footerContent ul li {
    font-size: 14px;
    margin: 0;
  }
  .ak-preloader .animation-preloader .txt-loading {
    font-size: 50px;
  }
}
@media screen and (max-width: 991px) {
  .ak-scrollup {
    right: 15px;
  }
  .ak-preloader .animation-preloader .txt-loading {
    font-size: 40px;
  }
  .btn {
    padding: 12px 28px;
    font-size: 14px;
  }
  .subTitle {
    font-size: 24px;
  }
  .lgTitle {
    font-size: 36px;
  }
  .mdTitle {
    font-size: 28px;
  }
  .menuColMain {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: 99;
    background-color: var(--white);
    color: var(--black);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition);
    transform: translateX(-200%);
    justify-content: flex-start;
    flex-direction: column;
    padding: 20px;
  }
  .actNav .menuColMain {
    transform: translateX(0);
  }
  .actNav .menuBackDrop {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
  }
  .logo {
    max-width: 160px;
  }
  .navItems {
    flex-direction: column;
  }
  .navItems a {
    display: block;
    padding: 10px 0;
  }
  .navItems > li + li {
    border-top: 1px solid rgba(0,0,0,0.1);
  }
  header.headerSection {
    padding: 12px 0;
  }
  .bannerImg {
    text-align: center;
    margin-bottom: 40px;
  }
  .pText {
    font-size: 14px;
  }
  .lgTitle {
    font-size: 28px;
  }
  .mdTitle {
    font-size: 24px;
  }
  .filterTrigger {
    padding: 8px 13px;
    font-size: 14px;
  }
  .filterTrigger svg.ftIcon {
    max-width: 18px;
  }
  .selectionDish {
    --imgSize: 55px;
  }
  .sectionSpace {
    padding: 60px 0;
  }
  .bannerContent {
    text-align: center;
  }
  .bannerBtns {
    justify-content: center;
  }
  .bannerSection {
    padding: 80px 0 120px;
  }
  .btnSkew {
    padding: 12px 30px;
    font-size: 16px;
  }
  .filterTrigger {
    padding: 10px 15px;
  }
  .filterTrigger svg.ftIcon {
    max-width: 20px;
  }
  .aboutImgCol {
    width: 100%;
    margin-bottom: 30px;
  }
  .aboutContent {
    padding: 30px;
    margin-left: 0;
  }
  .aboutContent::before {
    opacity: 0.1;
  }
  .galleryVariable {
    --gImgSize: 180px;
  }
  .reviewImgCol img {
    border-width: 4px;
  }
  .reviewStar {
    margin-bottom: 15px;
  }
  .reviewerName {
    padding-top: 0;
  }
  .testimonialLeaf {
    left: -60px;
    bottom: -30px;
  }
  .testimonialLeaf > img {
    max-width: 250px;
  }
  .chefSwiper .swiper-slide .chefCard {
    --cardsize: 280px;
    text-align: center;
  }
  .chefImgCol {
    --imgSize: 100%;
    height: 220px;
  }
  .chefSwiper {
    padding-bottom: 80px;
  }
  .testimonialInner {
    margin-top: 50px;
    padding: 30px;
  }
  .testimonialLeftImg {
    padding-bottom: 20px;
  }
  .reviewSwiper {
    padding-bottom: 65px;
  }
  .formStyle .form-select, .formStyle .form-control {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 10px;
    font-size: 14px;
  }
  .footerSection {
    padding: 60px 0;
    --space: 30px;
  }
  .footerContent {
    padding-top: 20px;
  }
  .footerTitle {
    font-size: 20px;
  }
  .addressCol {
    border: 0;
  }
  .footerCol {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .ak-preloader .animation-preloader .txt-loading {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 32px;
  }
  .bannerSection {
    padding: 80px 0 100px;
  }
  .testimonialLeftImg {
    max-width: 180px;
    margin: 0 auto;
  }
  .reviewCard, .reviewPagination {
    text-align: center;
  }
  .blogRtCard {
    margin-top: 15px;
    gap: 15px;
  }
  .blogCardDesc {
    text-align: center;
  }
  .blogInner {
    padding-top: 15px;
  }
  .blogCardDesc {
    padding: 15px;
  }
  .blogCardmd .blogCardImg {
    --imgWidth: 100%;
  }
  .blogCardImg {
    height: 250px;
  }
  .blogRtCard {
    height: auto;
  }
   .modalNewstyle {
    --xSpace: 15px;
    --ySpace: 20px;
  }
  .formStyle .form-control, .formStyle .form-select {
    font-size: 14px;
  }
  .galleryVariable {
    --gImgSize: 140px;
  }
  .footerLinks > ul {
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }
  .footerLinks > ul > li {
    flex: none;
  }
  .footerCopyright {
    margin-top: 0;
  }
  .copyrightCol {
    margin-top: 15px;
  }
  .footerLogo span {
    padding: 0 15px;
  }
  .footerLogo svg {
    max-width: 180px;
  }
  .footerLinks > ul > li > a {
    padding: 0 15px;
    font-size: 14px;
  }
  .footerSection {
    padding: 40px 0;
  }
  .ak-scrollup {
    right: 10px;
    width: 40px;
    height: 40px;
    bottom: 30px;
  }
}
@media (max-width: 575px) {
  .bannerSection {
    padding: 40px 0 100px;
  }
  .reservationInner, .aboutContent {
    padding: 30px 15px;
  }
  .testimonialInner {
    margin-top: 30px;
  }
  .formStyle .form-select, .formStyle .form-control {
    padding-left: 15px;
  }
  .selectionCard {
    flex-direction: column;
    align-items: flex-start;
  }
  .chefSwiper .swiper-slide {
    opacity: 1;
  }
  .chefSliderCol {
    margin-top: 0;
  }
  .chefSwiper .swiper-slide .chefCard {
    --cardsize: 260px;
  }
   .galleryVariable {
    --gImgSize: 120px;
  }
  .footerLinks > ul > li+li::before {
    display: none;
  }
  .footerLinks > ul {
    gap: 10px;
    justify-content: center;
  }
  .footerLinks > ul > li > a {
    padding: 0 5px;
  }
  .footerCol {
    margin-top: 30px;
  }
  .copyrightCol {
    font-size: 14px;
  }
}
@media (max-width:360px) {
  .modalNewstyle .rightIconFld > .inputFieldIcon {
    right: 14px;
  }
  .formStyle .rightIconFld .form-control {
    padding-right: 40px;
  }
  .formStyle .form-control {
    font-size: 14px;
  }
  .inputFieldIcon {
    height: auto;
    width: 20px;
  }
  .modalNewstyle#reservationModal {
    --xSpace: 10px;
  }
  .galleryVariable {
    --gImgSize: 100px;
  }
}

/* custom css for theme 19 */

/* Reset custom logo indent at desktop so the nav has room to breathe */
@media (min-width: 992px) {
  .headerSection .logo {
    margin-left: 0;
  }
}
/* Tighten nav at xl-minus breakpoint (992-1199 px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .navItems {
    column-gap: 18px;
    font-size: 14px;
  }
}


/* Mobile Cart footer section CSS */
.mobile_footer_tape {
  position: relative;
  z-index: 999;
  display: none;
  color: #1B2126;
}
.mobile_footer_tape .pageContent {
  padding: 0;
  position: relative;
}
@media (max-width: 1199px) {
  .mobile_footer_tape {
    display: block;
  }
  .mobile_footer_tape .sidebarright {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    z-index: 11;
    margin: 0;
    overflow-y: inherit;
    transition: all 300ms ease-in-out 0s;
    transform: translateY(200%);
  }
  .mobile_footer_tape .nwCartMain {
    background-color: #FFFFFF;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.14);
    border-radius: 30px 30px 0 0;
    padding: 15px;
  }
  .mobile_footer_tape .nwCartMain .nwCartTitle {
    position: relative;
    padding: 0 0 15px;
    border-bottom: 1px solid #E3E3E3;
  }
  .mobile_footer_tape .nwCartMain .nwCartTitle h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
  }
  .mobile_footer_tape .nwCartMain .nwCartTitle .cartBackIcon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -6px;
  }
  .mobile_footer_tape .nwCartMain .nwCartTitle .cartBackIcon img {
    display: block;
  }
  .mobile_footer_tape .nwCartInner {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 70px;
  }
  .mobile_footer_tape .cartCardImg {
    width: 50px;
  }
  .mobile_footer_tape .cartCardImg img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
  }
}
.mobile_footer_tape .nwaddDetailInner {
  margin-top: 25px;
}
.mobile_footer_tape .nwaddDetail {
  border-bottom: 1px solid #E3E3E3;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.mobile_footer_tape .nwaddDetail h2 {
  font-size: 14px;
  margin: 0;
}
.mobile_footer_tape .nwaddDetail p {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.2;
  color: #130F26;
}
.mobile_footer_tape .textandwordWrap span {
  font-size: 10px;
  display: inline-block;
}
.mobile_footer_tape .sizeCol > p {
  font-size: 12px;
  margin: 0;
}
.mobile_footer_tape .edRMainCol {
  padding-top: 10px;
}
.mobile_footer_tape .rEdCol ul li {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 500;
}
.mobile_footer_tape .rEdCol ul li + li {
  margin-left: 15px;
}
.mobile_footer_tape .rEdCol ul li span {
  display: inline-block;
  vertical-align: middle;
}
.mobile_footer_tape .rEdCol ul li span img {
  display: block;
}
.mobile_footer_tape .cart-inc-dec .quantity {
  border: 1px solid #dddddd;
  width: 84px;
  height: 30px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mobile_footer_tape .cart-inc-dec .quantity .minus {
  border: 0;
  background-color: transparent;
  font-size: 40px;
  line-height: 1;
  font-weight: normal;
  box-shadow: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDExIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTAuNSAxSDEwLjUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 0;
  height: 100%;
  width: 26px;
  flex: 0 0 auto;
  border-radius: 30px 0px 0px 30px;
  box-shadow: none;
}
.mobile_footer_tape .cart-inc-dec .quantity .qty {
  font-size: 14px;
  font-weight: 400;
  width: 25px;
  height: 100%;
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: #000;
  flex: 1 0 0;
  text-align: center;
}
.mobile_footer_tape .cart-inc-dec .quantity .plus {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMVYxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xIDZIMTEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center center;
  font-size: 0;
  height: 100%;
  width: 26px;
  flex: 0 0 auto;
  border-radius: 0px 30px 30px 0px;
  box-shadow: none;
}
.mobile_footer_tape .addchilliSelect {
  position: relative;
  transition: all 300ms ease-in-out 0s;
}
.mobile_footer_tape a.removeStyle {
  color: #d33315;
}
.mobile_footer_tape .nwaddText h3 {
  font-size: 16px;
  color: #130F26;
  font-weight: 700;
  margin: 0;
}
.btn.payBtn {
  font-size: 14px;
  line-height: 1.3;
  display: inline-flex;
  padding: 20px;
}
.btn.payBtn> span {
  padding-left: 5px !important;  
}
@media (max-width: 575px) {
    .btn.payBtn> span {
        padding: 0px !important;
    }
}
@media (max-width: 1199px) {
  .cartSlide .mobile_footer_tape .sidebarright {
    transform: translateY(0%);
  }
  .p2pCol {
    padding: 20px 15px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px 20px 0 0;
    z-index: 9999;
  }
  .priceLgText {
    font-size: 22px;
    font-weight: bold;
  }
  html.cartSlide {
    position: relative;
    overflow: hidden;
  }
  html.cartSlide::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 300ms ease-in-out 0s;
    background-color: rgba(19, 15, 38, 0.8);
    z-index: 100;
  }
}
#custom-links {
  text-decoration: underline;
  text-decoration-color: var(--primary) !important;
  text-underline-offset: 10px;
  color: inherit;
  transition: color 0.3s ease;
}
#custom-links:hover {
  color: var(--primary) !important;
}
@media (max-width: 576px) {
#custom-links{
  color: var(--primary) !important;
}
}
/* ============================================================
 * Floating cart tape — copied from newthemechangeui.css
 * so it loads on inner pages (main.php / index.php) which
 * do NOT register NewHeaderFooterAsset / Main_innerAsset
 * ============================================================ */

/* --- Global rules --- */
.btn.payBtn {
  font-size: 14px;
  line-height: 1.3;
  border: 2px solid var(--primary);
  color: #fff;
  background: var(--primary);
}
.floatingCart {
    padding: 15px 20px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px 30px 0 0;
    z-index: 7;
}
.floatingCart .cartPrice {
    font-size: 18px;
    font-weight: bold;
}
.floatingCart .cartPrice > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.floatingCart .cartPrice > span + span {
    margin-left: 5px;
}
.floatingCart .cartPrice > span > img {
    display: block;
}
.mobile_footer_tape {
    display: none;
}
.floatingCart .cartPrice svg path {
    fill: var(--primary-theme-color) !important;
}
.floatingCartFixBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}
.floatingCartFixBtn .fixBtnCol {
    flex: 0 0 50%;
    border-radius: 10px;
    padding: 10px;
}
.floatingCartFixBtn .fixBtnCol span.cartPrice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.fixBtnCol .cartPrice svg {
    width: 18px;
    display: block;
}
.cartRightText.viewCartItems.btn_primary.btn {
    margin-bottom: 0px;
    padding: 10px;
}
.nwCartTitle.text-center > h2 {
    color: black;
}

/* --- @media (max-width: 1199px) --- */
@media (max-width: 1199px) {
    .sidebarright {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        background-color: transparent;
        z-index: 11;
        margin: 0;
        overflow-y: inherit;
        -moz-transition: all 300ms ease-in-out 0s;
        -o-transition: all 300ms ease-in-out 0s;
        -webkit-transition: all 300ms ease-in-out 0s;
        transition: all 300ms ease-in-out 0s;
        -moz-transform: translateY(200%) !important;
        -o-transform: translateY(200%) !important;
        -ms-transform: translateY(200%) !important;
        -webkit-transform: translateY(200%) !important;
        transform: translateY(200%) !important;
    }
    .cartSlide .sidebarright {
        -moz-transform: translateY(0%) !important;
        -o-transform: translateY(0%) !important;
        -ms-transform: translateY(0%) !important;
        -webkit-transform: translateY(0%) !important;
        transform: translateY(0%) !important;
    }
    .mobile_footer_tape .nwCartInner {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 0 100px;
    }
    .mobile_footer_tape .nwCartMain {
        background-color: #ffffff;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.14);
        border-radius: 30px 30px 0 0;
        padding: 15px;
    }
    .cartBackIcon {
        position: absolute;
        left: 10px;
        top: 50%;
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-top: -6px;
    }
    .cartBackIcon > img {
        display: block;
    }
    html.cartSlide {
        position: relative;
        overflow: hidden;
    }
    html.cartSlide::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        -moz-transition: all 300ms ease-in-out 0s;
        -o-transition: all 300ms ease-in-out 0s;
        -webkit-transition: all 300ms ease-in-out 0s;
        transition: all 300ms ease-in-out 0s;
        background-color: rgba(19, 15, 38, 0.8);
        z-index: 10 !important;
    }
    .mobile_footer_tape {
        display: block;
    }
    .cartSlide .productDetailPage .sidebarright {
        top: auto;
    }
    .sidebarright {
        width: 100% !important;
    }
    .mobile_footer_tape .pageContent.mobilePageContent {
        padding: 0;
    }
}

/* --- @media (max-width: 767px) --- */
@media (max-width: 767px) {
    .floatingCart {
        padding: 10px 15px;
        border-radius: 20px 20px 0 0;
    }
    .floatingCart .cartPrice svg {
        width: 20px;
    }
    .floatingCart {
        padding: 8px 15px;
    }
    .floatingCart .cartPrice {
        font-size: 16px;
    }
    .cartRightText.viewCartItems a {
        font-size: 14px;
    }
}

/* --- @media (max-width: 575px) --- */
@media (max-width: 575px) {
    .cartBackIcon {
        left: 0;
    }
    .cartBackIcon > img {
        max-width: 18px;
    }
    .floatingCart .cartPrice > span + span {
        margin-left: 2px;
    }
}

 /* userLogin Css */
.userLogin {
  position: relative;
}
.userLogin .dropMenu {
	position: absolute;
	top: 100%;
	background: var(--darkBg);
	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.9);
	width: 210px;
	text-align: left;
	right: 0;
	display: none;
	z-index: 9;
	padding: 6px 0;
	border-radius: 8px;
}
.userLogin > a {
	padding: 8px 16px 8px 0;
	display: flex;
	align-items: center;
	column-gap: 6px;
	position: relative;
}
.userLogin > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23121212' d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.userLogin .userName {
  font-size: 16px;
  font-weight: 500;
}
.userLogin .dropMenu a {
	padding: 8px 14px;
	display: block;
	color: var(--white);
	font-size: 14px;
  line-height: 1.2;
	font-weight: normal;
  transition: padding-left var(--transition), background-color var(--transition);
}
.userLogin .dropMenu a:hover {
	background-color: rgba(255, 255, 255, 0.03);
	padding-left: 20px;
}

/* =============================================
   INNER PAGE OVERRIDES (newtheme_inner_page)
   ============================================= */

/* ── topSpace: reset newthemechangeui.css's 50px gap.
   newthemechangeui.css: .topSpace { padding-top: 50px !important; margin-top: 0 !important; }
   On inner pages this creates a 50px white gap between the sticky header and the
   .pageTitle bar (visible as blank white space in the layout).
   The header is position:sticky (in document flow) — no clearance offset is needed.
   body.newtheme_inner_page .topSpace (0,2,1) + !important beats .topSpace (0,1,0) + !important. ── */
body.newtheme_inner_page .topSpace {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Page title bar ──
   IMPORTANT: newthemechangeui.css (loads before this file) has:
     body .pageTitle            { background-color: transparent !important; color: #0B1315 !important; border-bottom: 1px solid rgba(0,0,0,0.2); }
     body .topSpace .pageTitle  { color: #0B1315 !important; }
   These !important rules kill the coloured page-title bar.
   Fix: use body.newtheme_inner_page (specificity 0,2,1) + !important to win. ── */
body.newtheme_inner_page .pageTitle,
body.newtheme_inner_page .topSpace .pageTitle {
  background-color: transparent !important;
  color: var(--black) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  padding: 18px 0 !important;
  font-family: var(--baseFont);
}
body.newtheme_inner_page .pageTitle .oa-page-title,
body.newtheme_inner_page .topSpace .pageTitle .oa-page-title,
body.newtheme_inner_page .pageTitle h1,
body.newtheme_inner_page .topSpace .pageTitle h1,
body.newtheme_inner_page .pageTitle h2,
body.newtheme_inner_page .topSpace .pageTitle h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  margin: 0 !important;
  color: var(--black) !important;
}
.newtheme_inner_page .pageSpace {
  padding: 50px 0 80px;
  background-color: #ffffff;
}

/* ── Form styling on inner pages ── */
.newtheme_inner_page .formStyle .labelStyle {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
  display: block;
}
.newtheme_inner_page .formStyle .form-control,
.newtheme_inner_page .formStyle .form-select {
  border-color: var(--border);
  font-family: var(--baseFont);
}
.newtheme_inner_page .formStyle .form-control:focus,
.newtheme_inner_page .formStyle .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primaryRGB), 0.12);
}

/* ── FAQ/Accordion on inner pages ── */
.newtheme_inner_page .collapse_content {
  background-color: #ffffff;
}
.newtheme_inner_page .collapse_content .faqCollapse {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}
.newtheme_inner_page .collapse_content .faqCollapse .card {
  border: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.newtheme_inner_page .collapse_content .faqCollapse .card_header .btn-link {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 16px 40px 16px 20px;
  display: block;
  width: 100%;
  text-align: left;
  background-color: #f8f8f8;
  color: var(--black);
  text-decoration: none;
  border: 0;
}
.newtheme_inner_page .collapse_content .faqCollapse .card_header .btn-link.collapsed {
  background-color: #f0f0f0;
  color: #575757;
}
.newtheme_inner_page .collapse_content .faqCollapse .card-body {
  padding: 16px 20px 20px;
  background-color: #ffffff;
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
}
.newtheme_inner_page .collapse_content .faqCollapse .listStyle {
  list-style: disc;
  padding-left: 20px;
}

/* ── Table styling on inner pages ── */
.newtheme_inner_page .tableSection .table {
  font-family: var(--baseFont);
}
.newtheme_inner_page .tableSection .table thead th {
  background-color: var(--primary);
  color: #ffffff;
  border-color: transparent;
  font-weight: 600;
  font-size: 14px;
}

/* ── Error page ── */
.newtheme_inner_page .errorPageCol .alert-danger {
  border-radius: 10px;
  font-family: var(--baseFont);
}

/* ── Back to top scrollup position on inner pages ── */
.newtheme_inner_page .ak-scrollup {
  bottom: -50px; /* hidden by default; JS shows it */
}

/* ── Blog section on inner pages ── */
.newtheme_inner_page .blogWrapper .blog-item {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
.newtheme_inner_page .blogWrapper .post-content {
  padding: 20px;
}
.newtheme_inner_page .blogWrapper .blog-item .meta li {
  margin-right: 16px;
  font-size: 13px;
  color: #888;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Address / delivery address page ── */
.newtheme_inner_page .myCategory {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background-color: #fafafa;
}
.newtheme_inner_page .myCategory .addressCol h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 4px;
}

/* ── Order summary on inner pages ── */
.newtheme_inner_page .summaryInfo .summaryCol {
  background-color: #fafafa;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.newtheme_inner_page .order_detailCol ul li {
  padding: 10px 16px;
  border-left: 3px solid var(--border);
  margin-bottom: 8px;
  color: #888;
  font-size: 14px;
}
.newtheme_inner_page .order_detailCol ul li.active {
  border-left-color: var(--primary);
  color: var(--black);
  font-weight: 600;
}

/* ── Back To Menu bar — z-index fix ──────────────────────────────────────────
   newthemechangeui.css sets .backToMenu { z-index: 999 } (position: sticky).
   Mobile nav panel is z-index: 99 and backdrop is z-index: 9.
   999 > 99 → the sticky bar floats ABOVE the mobile nav when it opens.
   Override to z-index: 1 — still above normal document flow content but
   below both the backdrop (9) and the nav panel (99). */
.newtheme_inner_page .backToMenu {
  z-index: 1;
}

/* ── Loyalty points table ── */
.newtheme_inner_page .tableSection {
  overflow-x: auto;
}

/* ── Gallery page grid ── */
.newtheme_inner_page .gallerySection .grid {
  padding: 0;
}
.newtheme_inner_page .gallerySection .grid li {
  display: inline-block;
  width: 280px;
  margin: 8px;
  border-radius: 8px;
  overflow: hidden;
  vertical-align: top;
}
.newtheme_inner_page .gallerySection .grid li img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.newtheme_inner_page .gallerySection .grid li img:hover {
  transform: scale(1.05);
}

/* ── Profile / account page responsive grid ── */
/* topSpace padding handled by newthemechangeui.css (50px !important) — no override needed */

/* ── Bookings page on inner pages ── */
.newtheme_inner_page .bookingspage {
  max-width: 850px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 0 26px rgba(0,0,0,0.08);
  border-radius: 16px;
  border: 1px solid var(--border);
}

/* ── bannerSection used by base privacy-policy & terms-and-conditions ─────
   Structure: section > .bannerSection > .container > .banner_content (title)
                                                    > .collapse_content (accordion)
   ───────────────────────────────────────────────────────────────────────── */
/* bannerSection: header is sticky (in flow) — no padding-top clearance needed.
   Also suppress the dark rgba(0,0,0,0.7) overlay that root style.css adds via
   .bannerSection:before { content:""; background-color: rgba(0,0,0,0.7) }       */
.newtheme_inner_page .bannerSection {
  padding-top: 0;
  background-color: #ffffff;
  background-image: none !important;
}
.newtheme_inner_page .bannerSection::before {
  display: none !important;
  background-color: transparent !important;
}
.newtheme_inner_page .bannerSection .banner_content {
  background-color: transparent;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.newtheme_inner_page .bannerSection .banner_content .titlebanner .oa-page-title,
.newtheme_inner_page .bannerSection .banner_content .titlebanner h1,
.newtheme_inner_page .bannerSection .banner_content .titlebanner h2 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  font-style: italic;
  margin: 0;
  color: var(--black);
  font-family: var(--baseFont);
}
.newtheme_inner_page .bannerSection > .container > .collapse_content,
.newtheme_inner_page .bannerSection > .container.full-container > .collapse_content {
  padding: 40px 0 80px;
  background-color: #ffffff;
}

/* ── section > .pageTitle (no topSpace wrapper) ───────────────────────────
   Used by: cart/payment-success, cart/delivery-address, cart/payment-method,
            orders/favorite-orders (pageTitle directly in section)
   ───────────────────────────────────────────────────────────────────────── */
/* section > .pageTitle (no topSpace wrapper — e.g. cart pages):
   Header is sticky → no top-padding clearance needed.
   Must use body.newtheme_inner_page + !important to beat
   newthemechangeui.css: body .pageTitle { background-color: transparent !important } */
body.newtheme_inner_page section > .pageTitle {
  padding: 18px 0 !important;
  background-color: transparent !important;
  color: var(--black) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  font-family: var(--baseFont);
}
body.newtheme_inner_page section > .pageTitle .oa-page-title,
body.newtheme_inner_page section > .pageTitle h1,
body.newtheme_inner_page section > .pageTitle h2 {
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  margin: 0 !important;
  color: var(--black) !important;
  font-family: var(--baseFont);
}

/* ── pageContent (favorite-orders and other legacy pages using pageContent) */
.newtheme_inner_page .pageContent {
  padding: 40px 0 80px;
  background-color: #ffffff;
}

/* ── successInfo (payment-success, payment-cancel) ── */
.newtheme_inner_page .successInfo {
  text-align: center;
  padding: 30px 20px 20px;
}
.newtheme_inner_page .successInfo h2 {
  font-weight: 700;
  font-family: var(--baseFont);
  margin-bottom: 8px;
}
.newtheme_inner_page .successInfo h3 {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 24px;
  font-family: var(--baseFont);
}
.newtheme_inner_page .successInfo .success_check img {
  max-width: 100px;
  margin: 0 auto 20px;
  display: block;
  opacity: 0.9;
}
/* survey form inside success page */
.newtheme_inner_page .successInfo form {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
  background: #f9f9f9;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

/* ── site-error (base error.php — div.site-error > h1 + div.alert) ── */
/* site-error: header is sticky (in flow) — no top-padding header offset needed */
.newtheme_inner_page .site-error {
  padding: 40px 0 80px;
  min-height: 60vh;
}
.newtheme_inner_page .site-error h1 {
  font-family: var(--baseFont);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  margin-bottom: 20px;
}
.newtheme_inner_page .site-error .alert {
  max-width: 600px;
  margin: 0 auto 24px;
  border-radius: 10px;
  font-family: var(--baseFont);
}

/* ── chooseLocation / delivery-address form spacing ── */
.newtheme_inner_page .chooseLocation {
  max-width: 860px;
  margin: 0 auto;
}



/* ── Scrolled-header state (inner pages only).
   Two mechanisms run simultaneously on scroll:
     1. Base custom.js: adds body.fixed-header when scrollY > 30
        Root style.css: .fixed-header .headerSection { background:#0B1315; padding:20px }
        — specificity (0,2,0) — beats v19's header.headerSection (0,1,1) → dark header.
     2. v19 custom.js: adds .isSticky to the header element itself when scrollY > 0
        — no CSS defined in v19 yet.
   On inner pages (white body) the dark #0B1315 background makes the dark nav text
   invisible. On the homepage (bgTheme dark body) the dark bg blends in.
   Fix: body.newtheme_inner_page.fixed-header .headerSection (specificity 0,3,1) beats
   root's (0,2,0) — keeps the header white with a subtle shadow when scrolled. ── */
body.newtheme_inner_page.fixed-header .headerSection,
body.newtheme_inner_page .headerSection.isSticky {
  background-color: var(--white);
  padding: 20px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-bottom-color: var(--border);
}
@media (max-width: 991px) {
  body.newtheme_inner_page.fixed-header .headerSection,
  body.newtheme_inner_page .headerSection.isSticky {
    padding: 12px 0;
  }
}

/* ── Header nav: neutralise newthemechangeui.css overrides (inner pages only).
   newthemechangeui.css (loads before this file on inner pages) adds:
     .navMain { padding-left: 40px }               — shifts entire nav block right
     .navMain > ul > li + li { margin-left: 40px } — stacks ON TOP of v19 column-gap:40px → 80px gap
     .navMain > ul > li > a { font-size: 18px }    — wider text → Login/Register wrap to 2nd row
   The MainAsset on the homepage does NOT load newthemechangeui.css, so this is
   inner-page specific.
   body.newtheme_inner_page (specificity 0,2,1) beats .navMain (0,1,0) and
   .navMain > ul > li + li (0,1,3) at ALL viewport widths — no media-query copies needed. ── */
body.newtheme_inner_page .navMain {
  padding-left: 0;
}
body.newtheme_inner_page .navMain > ul > li + li {
  margin-left: 0;
}
body.newtheme_inner_page .navMain > ul > li > a {
  font-size: 16px;
  font-weight: 700;
}

/* ── Footer: neutralise newthemechangeui.css padding overrides (inner pages only).
   newthemechangeui.css uses footer .footerSection (specificity 0,1,1) at three breakpoints:
     @media (≤1199px): padding: 40px 0 80px  — vs v19's 80px 0
     @media (≤991px):  padding: 40px 0 75px  — vs v19's 60px 0
     @media (≤767px):  padding: 40px 0 55px  — vs v19's 60px 0
   (0,1,1) beats v19's plain .footerSection (0,1,0).
   Fix: body.newtheme_inner_page .footerSection (0,2,1) restores v19's intended values
   and overrides the dark background-color from the base css/style.css. ── */
body.newtheme_inner_page .footerSection {
  background-color: #fff;
}
@media (max-width: 1199px) {
  body.newtheme_inner_page .footerSection {
    padding: 80px 0;
    --space: 40px;
  }
}
@media (max-width: 991px) {
  body.newtheme_inner_page .footerSection {
    padding: 60px 0;
    --space: 30px;
  }
}
@media (max-width: 767px) {
  body.newtheme_inner_page .footerSection {
    padding: 60px 0;
  }
}

/* ── Modal styling (inner pages only) ─────────────────────────────────────────
   On inner pages, root css/style.css (loaded by BaseAsset) has legacy .modalStyle
   rules that were written for older themes and break v19's clean modal design.

   Root rules that need resetting (all specificity 0,2,0):
     .modalStyle .modal-content  { border-radius:0; border:none; padding:20px }
     .modalStyle .modal-title    { color:primary; font-size:25px; uppercase }
     .modalStyle .mdlCloseBtn    { right:-10px; top:-10px; blue box-shadow }
     .modalStyle .mdlContentWd   { width:472px }
     .signInWith .btn            { padding:20px 60px }
     .formStyle .form-control    { height:50px; font-size:14px }
     .formStyle .btn             { box-shadow: blue glow }

   Also fix v19's own modal label/title colors (designed for dark bg, but modal
   is white in light mode on inner pages):
     #loginModal label / #registerModal label  { color:white !important }
     h4#loginModalLabel / h4#registerModalLabel { color:white }

   Selectors use body.newtheme_inner_page to restrict to inner pages only.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1 — modal-content: restore Bootstrap 5 rounded corners, remove forced padding */
body.newtheme_inner_page .modalStyle .modal-content {
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0;
}

/* 2 — modal-title: reset root's huge uppercase centered style */
body.newtheme_inner_page .modalStyle .modal-title {
  color: var(--black);
  font-size: 1.25rem;
  text-transform: none;
  font-weight: 700;
  text-align: left;   /* root forces text-align: center */
  width: auto;        /* root sets width: 100% */
  line-height: 1.4;
}

/* 3 — close button: reset root's negative position, blue glow, and white circle.
   Root CSS: width:36px; height:36px; right:-10px; top:-10px; background:#fff; box-shadow:blue.
   The button has NO .btn class so Bootstrap padding doesn't apply — must set explicit size.
   The SVG inside (modal-close-icon.svg) is natively 14×13px; we size it explicitly too.
   z-index:10 keeps it above the modal-header content (position:static). */
body.newtheme_inner_page .modalStyle .mdlCloseBtn {
  position: absolute;
  right: 12px;
  top: 12px;
  box-shadow: none;
  background-color: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  opacity: 0.55;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 200ms ease, background-color 200ms ease;
}
body.newtheme_inner_page .modalStyle .mdlCloseBtn:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.06);
}
body.newtheme_inner_page .modalStyle .mdlCloseBtn img {
  width: 14px;
  height: 14px;
  display: block;
}

/* 4 — content wrapper: allow it to fill available width naturally */
body.newtheme_inner_page .modalStyle .mdlContentWd {
  width: auto;
  max-width: 100%;
}

/* 5 — social sign-in buttons: reset root's 20px 60px padding and blue box-shadow.
   The icon inside is position:absolute; left:25px; width:20px — so text starts at
   ~45px from the button's left edge. Left padding must be ≥52px to avoid overlap. */
body.newtheme_inner_page .signInWith .btn {
  padding: 12px 16px 12px 52px;
  text-align: left;
  box-shadow: none;  /* root adds 0 0 10px rgba(192,192,222,0.35) */
}

/* 6 — formStyle form-control: remove root's fixed 50px height, restore font-size */
body.newtheme_inner_page .modalStyle .formStyle .form-control,
body.newtheme_inner_page .modalStyle .formStyle .custom-select {
  height: auto;
  min-height: 48px;
  font-size: 1rem;
}

/* 7 — formStyle btn: remove root's blue box-shadow */
body.newtheme_inner_page .modalStyle .formStyle .btn {
  box-shadow: none;
}

/* 8 — modal labels: override v19's white color (designed for dark bg).
   v19 style.css: #loginModal label { color:var(--white) !important } — specificity (1,0,1).
   Our selector body.newtheme_inner_page #loginModal label → (1,1,2) + !important wins.
   Also explicitly targets .labelStyle with higher specificity (1,2,2) as a belt-and-braces fix. */
body.newtheme_inner_page #loginModal label,
body.newtheme_inner_page #registerModal label {
  color: var(--black) !important;
}
body.newtheme_inner_page #loginModal .labelStyle,
body.newtheme_inner_page #registerModal .labelStyle {
  color: var(--black) !important;
}

/* 9 — modal title h5: override v19's white color rule.
   v19 style.css targets h4#loginModalLabel (1,0,1) but the actual HTML uses <h5> —
   so the v19 white-color rule is already a dead selector and rule #2 handles the
   title colour via .modalStyle .modal-title. This selector matches the real element
   tag (h5) as a safety net. Specificity (1,1,2) beats (1,0,1). */
body.newtheme_inner_page h5#loginModalLabel,
body.newtheme_inner_page h5#registerModalLabel {
  color: var(--black);
}

/* 10 — "First Time? Create your account" text color */
body.newtheme_inner_page #loginModal .text-center.fw-medium,
body.newtheme_inner_page #registerModal .text-center.fw-medium {
  color: var(--black);
}

/* 11 — forgot password link: make it primary colour (root sets #0B1315 dark) */
body.newtheme_inner_page .fPwdLink {
  color: var(--primary);
  text-decoration: none;
}

/* 12 — modal-body top padding (newthemechangeui sets padding:10px 0 0) */
body.newtheme_inner_page .modalStyle .modal-body {
  padding: 1rem 1.5rem 1.5rem;
}
body.newtheme_inner_page .modalStyle .modal-header {
  padding: 1.5rem 1.5rem 0.5rem;
}
.order_detailCol > ul > li:before {
    left: -8px;
}
.newtheme_inner_page .order_detailCol ul li {
    border-left: 0px;
}