:root{
  --cyan:#35b4dc;
  --cyan-dark:#22a3cd;
  --orange:#f0862b;
  --orange-dark:#e2761b;
  --ink:#1b1b1b;
  --line:#b5b5b5;
  --error:#e5342b;
  --blue:#4a90e2;
}
.bg-color1,
.btn-color1 {
    background: var(--color1);
    border-color: var(--color1);
}

.bg-color2,
.btn-color2 {
    background: var(--color2);
    border-color: var(--color2);
	color:#eee;
}

.bg-color1-light {
    background: linear-gradient(to top, rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) var(--color1);
}

.bg-color2-light {
    background: linear-gradient(to top, rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) var(--color2);
}

.bg-color1-dark {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)) var(--color1);
}
.bg-color1-dark2 {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) var(--color1);
}
.bg-color2-dark {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)) var(--color2);
}
.bg-color4 {
    background: var(--color4);
}

.text-color1 {
    color: var(--color1);
}

.text-color2 {
    color: var(--color2);
}

.text-color3 {
    color: var(--color3);
}

.border-color1 {
    border-color: var(--color1) !important;
}

.border-color2 {
    border-color: var(--color2) !important;
}

.btn-color1:hover {
    background: linear-gradient(to top, rgba(255, 255, 255, .65), rgba(255, 255, 255, .65)) var(--color1);
}
.btn-color2:hover {
    background: linear-gradient(to top, rgba(255, 255, 255, .65), rgba(255, 255, 255, .65)) var(--color2);
}



/* ================= HERO ================= */
.hero{
  /*min-height:100vh;*/
  padding:62px 24px 52px;
  padding: 32px 24px 52px;
  display:flex;flex-direction:column;align-items:center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10,16,30,.25) 0%, rgba(8,13,24,.80) 100%),
    linear-gradient(180deg, rgba(9,14,26,.35), rgba(9,14,26,.40)),
    url('../images/bgbooknow.jpg') bottom/cover no-repeat;
  background-color:#0d1420; /* fallback */
}
.hero h1{
  font-family:'Archivo Black','Arial Black',Arial,sans-serif;
  font-weight:400;
  color:#fff;
  font-size:clamp(30px,4.7vw,67px);
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 4px 22px rgba(0,0,0,.55);
  margin-bottom:46px;
}
/* ================= BOOKING CARD ================= */
.homepg .bookingfrm- {
	position: absolute;
	left: 50%;
	bottom: -27px;
	transform: translateX(-50%);
	width: min(1440px,100%);
	z-index:1;
}
.bookingfrm .card{
  position:relative;
  width:min(1440px,100%);
  background:#fff;
  border-radius:12px;
  /*padding:40px 46px 68px;*/
  padding: 10px 46px 48px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
/* ---- Tabs ---- */
.tabbtns{display:flex;justify-content:center;
/*margin-bottom:38px;*/
}
.tabbtns label span{
  /*padding:14px 36px;*/
  font-size:14px;font-weight:700;letter-spacing:.4px;
  color:#111;background:#fff;
  border:1px solid #ccc;border-right-width:0;
  cursor:pointer;
  transition:background .18s,color .18s;
  width:150px;
  padding: 7px;
  text-transform: uppercase;
}
.tabbtns label:first-child span{border-radius:10px 0 0 10px}
.tabbtns label:last-child span{border-right-width:1px;border-radius:0 10px 10px 0}
.tabbtns label span:hover{background:#eef9fd}
.tabbtns label span:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.tabbtns label span.active{background:var(--cyan);border-color:var(--cyan);color:#fff}
.tabbtns label span.active + .tabbtns label span{border-left-color:var(--cyan)}
/* ---- Form grid ---- */
.form{
  /*display:grid;
  grid-template-columns:.95fr 1.5fr 1.35fr 1fr 1fr;*/
  display:flex;
  gap:34px;
  align-items:start;
}
.field {
	  flex: 1;
}
.field label{
  display:block;
  font-size:20px;
  font-size:16px;
  font-weight:900;letter-spacing:.3px;
  color:#161616;
  margin-bottom:16px;
  text-transform: uppercase;
}
.control{position:relative}
.control input,
.control select{
  width:100%;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;
  font:inherit;font-size:15px;color:#333;
  padding:7px 22px 11px 0;
  outline:none;
  appearance:none;-webkit-appearance:none;
}
.control select{cursor:pointer;}
.control input::placeholder{color:#9a9a9a;}
.control input:hover,.control select:hover{border: 0;border-bottom: 1px solid #7d7d7d;}
.control input:focus,.control select:focus{border-bottom-color:var(--cyan);border: 0;border-bottom: 1px solid #7d7d7d;}
.control .chev{position:absolute;right:2px;top:50%;transform:translateY(-58%);pointer-events:none;}

/* pickup with search icon */
.control.has-search input{padding-left:28px}
.control .search{position:absolute;left:1px;top:11px;pointer-events:none}

.error{display:block;margin-top:9px;color:var(--error);font-size:13px}

/* ---- Custom dropdowns (date / time) ---- */
.dropdown{position:relative}
.pseudo{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  font:inherit;font-size:15px;color:#333;
  padding:8px 2px 11px 0;
  cursor:pointer;text-align:left;
  transition:border-color .15s;
}
.pseudo:hover{border-bottom-color:#7d7d7d}
.pseudo:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.menu{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:#fff;border:1px solid #e4e4e4;border-radius:8px;
  box-shadow:0 18px 38px rgba(0,0,0,.18);
  max-height:216px;overflow:auto;
  list-style:none;z-index:40;display:none;
}
.menu.open{display:block}
.menu li{padding:11px 15px;font-size:14px;cursor:pointer}
.menu li:hover{background:#f0fafd}
.menu li.selected{color:var(--cyan-dark);font-weight:700}

/* ---- Orange CTA overlapping card edge ---- */
.explore{
  position:absolute;left:50%;bottom:-27px;transform:translateX(-50%);
  border:0;cursor:pointer;white-space:nowrap;
  background:var(--orange);color:#fff;
  background: var(--color2);
  color: var(--color1);
  font-size:21px;font-weight:900;letter-spacing:.6px;
  padding:16px 72px !important;border-radius:8px;
  box-shadow:0 14px 30px rgba(240,134,43,.45);
  box-shadow: 0 14px 30px rgba(var(--color1rgb),.45);
  transition:background .18s,box-shadow .18s,transform .12s;
	width: auto;
	height: auto;
  text-transform:uppercase;
}
.explore:hover{
	background:var(--orange-dark);
	box-shadow:0 18px 34px rgba(240,134,43,.55);
	box-shadow: 0 18px 34px rgba(var(--color2rgb),.45);
	background: var(--color1);
	color: var(--color2);
}
.explore:active{
	transform:translateX(-50%) scale(.97);
	background-color: var(--color1) !important;
	color: var(--color2) !important;
}

/* ================= RATING LINE + STORES ================= */
.top-rated{
  display:flex;align-items:center;gap:13px;
  margin:56px 0 36px;
  color:#fff;font-size:17px;font-weight:500;letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.laurel{opacity:.95}
.flip{transform:scaleX(-1)}

.stores{
  display:flex;align-items:center;gap:46px;
  background:#fff;border-radius:999px;
  padding:13px 38px;
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.store{display:flex;align-items:center;gap:12px}
.store .meta{display:flex;flex-direction:column;gap:3px}
.store .name{font-weight:900;font-size:16px;line-height:1;color:#111}
.stars{color:#ffb300;font-size:14px;letter-spacing:2.5px;line-height:1;text-shadow:0 1px 0 rgba(140,80,0,.35)}

/* ================= TOAST ================= */
.toast{
  position:fixed;left:50%;bottom:34px;z-index:100;
  transform:translateX(-50%) translateY(16px);
  background:rgba(15,20,28,.92);color:#fff;
  padding:13px 26px;border-radius:999px;
  font-size:15px;letter-spacing:.2px;
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= RESPONSIVE ================= */
@media (max-width:1150px){
  .form{grid-template-columns:repeat(3,1fr)}
  .tabbtns label span{padding:13px 26px;padding: 9px 10px;}
}
@media (max-width:780px){
  .hero{padding:44px 16px}
  .bookingfrm .card{padding:26px 22px 60px;padding: 16px 12px 30px;}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:26px;gap:16px;}
  .tabbtns{/*flex-wrap:wrap;gap:8px;*/}
  .tabbtns label{width: 100%;}
  .tabbtns label span,.tabbtns label:first-child span,.tabbtns label:last-child span{border:1px solid #ccc;border-right-width:1px;border-radius:0px;width: 100%;font-size: 13px;}
  .tabbtns label:first-child span{border-radius:10px 0 0 10px;}
  .tabbtns label:last-child span{border-radius:0 10px 10px 0;}
  .tabbtns label span.active + .tabbtns label span{border-left-color:#ccc;}
  .stores{flex-direction:column;gap:18px;border-radius:26px;padding:20px 34px;}
  .top-rated{font-size:15px;margin:50px 0 30px;}
  .form .field {
	background: rgba(var(--color2rgb), .08);
    border: 1.5px solid rgba(var(--color2rgb), .3);
	border-radius: 10px;
	padding-top: 3px;
	padding-bottom: 5px;
  }
  .field .control .form-control-input {
	padding: 0px 22px 0px 0;
	border-bottom: 0;
  }
  .control.has-search{
	  padding: 0px 22px 0px 0 !important;
  }
  .control.has-search .form-control-input{
	padding-right: 1rem !important;
	padding-left: 1rem !important;
  }
  .control.has-search .search{
	  left: initial;
	  right: 1px;
	  top: 0px;
  }
  .field label {
	margin-bottom: 0px;
	font-size: 13px;
  }
  .explore {
	position: relative;
	padding: 10px 72px !important;
	left:initial;
	bottom:initial;
	transform:initial;
	top: 18px;
  }
  .homepg .bookingfrm {
	position: relative;
	padding-bottom:30px;
  }
  .homepg .bookingfrm .card{
	box-shadow: none;
  }
  
}
@media (max-width:520px){
  .form{grid-template-columns:1fr}
  .explore{font-size:17px;padding:14px 40px}
}
.sptn2{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0.01;
  pointer-events: none;
}
.form-control-submit-button.btn:disabled {
	background-color: var(--color2);
}
.button-container .btn.booknowbtn:disabled {
	background-color: var(--color1);
}
.homepg {
	position: relative;
}
#booknow {
	scroll-margin-top: 100px;
	scroll-behavior: smooth;
}