/* ==============================================================
   Stockton Media — Booking Cart  |  sm_css.css
   sites.stockton.media/shoppingcart
============================================================== */

/* 1. FONT IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* 2. DESIGN TOKENS */
:root {
  --bg:        #06060E;
  --card:      #0A0A18;
  --card-hi:   #0D0D1F;
  --text:      #EFEFFF;
  --muted:     rgba(239, 239, 255, 0.65);
  --sep:       rgba(239, 239, 255, 0.06);
  --violet:    #7B55FF;
  --cyan:      #00D9F5;
  --grad:      linear-gradient(105deg, #7B55FF, #00D9F5);
  --bdr:       rgba(123, 85, 255, 0.14);
  --bdr-hi:    rgba(123, 85, 255, 0.45);
  --font-d:    'Bebas Neue', sans-serif;
  --font-b:    'Manrope', sans-serif;
  --font-m:    'Manrope', sans-serif;
  --max-w:     1100px;
  --pad:       clamp(20px, 4vw, 40px);
  --radiocheckcolor: #7B55FF;
}

/* 3. BASE RESET */
html {
  background: var(--bg) !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(123, 85, 255, 0.30) var(--bg) !important;
}
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}
a { color: var(--cyan) !important; }
body {
  --radiocheckcolor: var(--violet);
  accent-color: var(--violet);
}

/* 4. SECTION LAYOUT */
.cart-products, .cart-location, .cart-filter, .cart-questions, .cart-note,
.cart-gcal, .cart-team, .cart-user, .cart-payment, .cart-order {
  max-width: var(--max-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}
.cartlocation-gmap-wrapper, .gmap-wrapper {
  max-width: 100% !important;
  width: 100% !important;
}
.cart-location
.sm-hidden {
  display: none !important;
}

.pc80504 label.product .prodDesc span.sm-hidden,
.pc80506 label.product .prodDesc span.sm-hidden,
.pc80507 label.product .prodDesc span.sm-hidden {
  display: none !important;
}

/* Hide the Google Map on the location section */
.gmap-wrapper {
  display: none !important;
}

/* Hide Address Line 2 (and its empty spacer caption) so City lines back up flush-left */
.cart-location .inp:has(input[name="search_address2"]) {
  margin: 0px !important;
  display: none !important;
}
/* The empty spacer cap is always the 3rd child in the flex row
   (Address cap, Address inp, [empty cap], Address2 inp, City cap, ...) */
.cart-location .col1 > div > div:nth-child(3) {
  display: none !important;
}

.cart-location .col1 > div > div:nth-child(9) {
  margin-top: 10px !important;
}

/* 5. SECTION CARD SHELLS */
.cart-products, .cart-location, .cart-filter, .cart-questions, .cart-note,
.cart-gcal, .cart-team, .cart-user, .cart-payment {
  background: var(--card) !important;
  border: 1px solid rgba(123, 85, 255, 0.25) !important;
  border-left: 2px solid rgba(123, 85, 255, 0.50) !important;
  border-radius: 2px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}

/* 6. H2 SECTION HEADERS */
h2 {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-family: var(--font-d) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  border: none !important;
}
h2::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--bdr) !important;
  -webkit-text-fill-color: initial !important;
}

/* 7. PRODUCT GRID */
.cart-products .content {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 0 30px !important;
  align-items: stretch !important;
}

/* Divider rows (PACKAGES, À LA CARTE, EXTRAS) */
.product-category[hd-divider="true"] {
  flex: 0 0 100% !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 52px 0 4px !important;
  overflow: visible !important;
}
.product-category[hd-divider="true"] > div { padding: 0 !important; }
.product-category[hd-divider="true"] .catname {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.product-category[hd-divider="true"] .catname::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(123, 85, 255, 0.35), transparent) !important;
  margin-bottom: 14px !important;
}
.product-category[hd-divider="true"] .catname::after { display: none !important; }
.product-category[hd-divider="true"] .catname span {
  font-family: var(--font-m) !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Package cards */
.product-category[hd-divider="false"] {
  flex: 1 1 0% !important;
  min-width: min(200px, 100%) !important;
  margin: 0 !important;
  margin-top: 18px !important;
}
.product-category[hd-divider="false"] > div {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-category[hd-divider="false"] .catname {
  font-size: 30px !important;
  letter-spacing: 0.03em !important;
  padding: 36px 36px 12px !important;
}

/* Extras card — full width */
.product-category.pc80517 {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* Stack Photos/Video (à la carte) cards full-width — same permanent
   single-column behavior as the Property Info section, not a breakpoint */
.product-category.pc80508,
.product-category.pc80511 {
  flex: 0 0 100% !important;
  width: 100% !important;
}


/* 8. PRODUCT CARDS */
.product-category {
  background: var(--card) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s, background 0.25s !important;
}
.product-category:hover {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.07) !important;
  box-shadow: 0 4px 32px rgba(123, 85, 255, 0.10) !important;
}
.product-category:has(input:checked) { border-color: var(--bdr-hi) !important; }
.product-category > div { padding: 0px 0px 15px !important; }

/* Kill stray focus-ring outlines (from JS-simulated .click() on package labels) */
label.product,
label.product *,
.product-category {
  outline: none !important;
}

/* Category name (non-divider) */
.catname {
  font-family: var(--font-d) !important;
  font-size: 22px !important;
  letter-spacing: 0.03em !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
  padding: 20px 24px 14px !important;
  border-bottom: none !important;
  display: block !important;
}

/* Most Popular card */
.product-category.pc80504 {
  background: var(--card-hi) !important;
  border-color: var(--bdr-hi) !important;
  box-shadow: 0 0 0 1px rgba(123, 85, 255, 0.18), 0 8px 40px rgba(123, 85, 255, 0.14) !important;
}
.product-category.pc80504::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: var(--grad) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.product-category.pc80504::before {
  content: "Most Popular" !important;
  position: absolute !important;
  top: -1px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  font-family: var(--font-m) !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--grad) !important;
  padding: 4px 16px !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  border: none !important;
  box-shadow: none !important;
}
.product-category.pc80504:hover {
  background: rgba(123, 85, 255, 0.16) !important;
  border-color: rgba(123, 85, 255, 0.80) !important;
  box-shadow: 0 0 0 1px rgba(123, 85, 255, 0.50), 0 16px 56px rgba(123, 85, 255, 0.30) !important;
  transform: translateY(-4px) !important;
}

/* Package card hover lift */
.product-category.pc80506,
.product-category.pc80504,
.product-category.pc80507 {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}
.product-category.pc80506:hover,
.product-category.pc80507:hover {
  transform: translateY(-4px) !important;
}

/* Disabled package overlay — always visible, dims and blocks clicks on disabled cards */
.pkgdis,
.unidis {
  position: relative !important;
  cursor: not-allowed !important;
  opacity: 0.4 !important;
  pointer-events: none !important;
}
.pkgdis::after,
.unidis::after {
  content: "\2298" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 40px !important;
  color: rgba(239, 239, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(239, 239, 255, 0.85) !important;
  background: none !important;
  z-index: 10 !important;
  font-family: sans-serif !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}


/* 9. PRODUCT ROWS */
label.product {
  display: block !important;
  cursor: pointer !important;
  border-bottom: none !important;
  background: transparent !important;
  transition: background 0.15s !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
label.product:last-child { border-bottom: none !important; }
label.product:hover { background: rgba(123, 85, 255, 0.04) !important; }
.pc80504 label.product:hover,
.pc80506 label.product:hover,
.pc80507 label.product:hover { background: transparent !important; }
label.product:has(input:checked) { background: rgba(123, 85, 255, 0.08) !important; border-left: 2px solid var(--violet) !important; }

label.product table {
  width: 100% !important;
  display: block !important;
  background: transparent !important;
  box-sizing: border-box !important;
  border: none !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}
label.product tbody { display: block !important; width: 100% !important; box-sizing: border-box !important; }

/* Row padding — vertical padding removed (0px), horizontal 36px kept */
label.product tr {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 36px !important;
  min-height: 50px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  margin-top: 0 !important;
  margin: 0 !important;
}
label.product td {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}
label.product td:first-child {
  width: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
  padding-top: 0 !important;
}

/* Checkbox */
label.product input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 14px !important; height: 14px !important; border-radius: 2px !important; border: 1px solid rgba(123, 85, 255, 0.35) !important; background: transparent !important; cursor: pointer !important; display: block !important; position: relative !important; flex-shrink: 0 !important; transition: background 0.18s, border-color 0.18s !important; margin: 0 !important; padding: 0 !important; }
label.product input[type="checkbox"]::after { content: '' !important; position: absolute !important; left: 3px !important; top: 7px !important; width: 5px !important; height: 3px !important; border-left: 1.5px solid rgba(255,255,255,0) !important; border-bottom: 1.5px solid rgba(255,255,255,0) !important; transform: rotate(-45deg) translateY(-2px) !important; display: block !important; transition: border-color 0.15s !important; }
label.product input[type="checkbox"]:checked { background: linear-gradient(135deg, #7B55FF, #00D9F5) !important; border-color: transparent !important; }
label.product input[type="checkbox"]:checked::after { border-left-color: #fff !important; border-bottom-color: #fff !important; }

/* Description */
label.product .prodDesc, label.product td.prodDesc {
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  font-family: var(--font-b) !important;
  font-size: 20px !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
label.product .prodDesc span, label.product td.prodDesc span {    font-family: var(--font-b) !important;
    font-size: 15px !important;
    font-weight: 400 !important; color: var(--muted) !important; line-height: 1.4 !important; }

label.product:has(input:checked) .prodDesc,
label.product:has(input:checked) td.prodDesc,
label.product:has(input:checked) .prodDesc span,
label.product:has(input:checked) td.prodDesc span { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }
label.product .prodDesc > div, label.product td.prodDesc > div { font-size: 18px !important; color: var(--text) !important; margin-top: 3px !important; line-height: 1.45 !important; }

/* Price */
label.product td.price {
  flex-shrink: 0 !important;
  width: auto !important;
  min-width: 44px !important;
  font-family: var(--font-d) !important;
  font-size: 20px !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  white-space: nowrap !important;
  text-align: right !important;
  padding-top: 2px !important;
}
label.product:has(input:checked) td.price { background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }

/* Strikethrough reg price */
.regprice { font-family: var(--font-m) !important; font-size: 12px !important; letter-spacing: 0.06em !important; color: rgba(239, 239, 255, 0.45) !important; text-decoration: line-through !important; -webkit-text-fill-color: rgba(239, 239, 255, 0.45) !important; background: none !important; display: block !important; margin-top: 2px !important; white-space: nowrap !important; }

/* "Get Quote" price override */
.price142315 { visibility: hidden !important; }
.price142315::after { content: 'Get Quote' !important; visibility: visible !important; font-family: var(--font-m) !important; font-size: 13px !important; letter-spacing: 0.1em !important; color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; }

/* Hide platform visibility classes */
label.product.sqfthide, label.product.dephide, label.product.pkghide, label.product.pkghidepart, label.product.filtered { display: none !important; }

/* Package card rows — vertical stacked layout */
.pc80504 label.product,
.pc80506 label.product,
.pc80507 label.product { position: relative !important; }

.pc80504 label.product tr,
.pc80506 label.product tr,
.pc80507 label.product tr {
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 20px 28px !important;
  gap: 6px !important;
}

/* Package checkbox — visible, positioned top-right */
.pc80504 label.product td:first-child,
.pc80506 label.product td:first-child,
.pc80507 label.product td:first-child {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
  padding-top: 0 !important;
  width: 16px !important;
  min-width: 16px !important;
  display: block !important;
}
.pc80504 label.product input[type="checkbox"],
.pc80506 label.product input[type="checkbox"],
.pc80507 label.product input[type="checkbox"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Package price — large, left-aligned, stacked above description */
.pc80504 label.product td.price,
.pc80506 label.product td.price,
.pc80507 label.product td.price {
  order: -1 !important;
  font-size: 54px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: left !important;
  padding: 0 !important;
  padding-right: 28px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* Package reg price */
.pc80504 label.product .regprice,
.pc80506 label.product .regprice,
.pc80507 label.product .regprice {
  font-size: 12px !important;
  margin-top: 3px !important;
  display: block !important;
}

/* Package prodDesc span — "INCLUDES" style */
.pc80504 label.product .prodDesc span,
.pc80506 label.product .prodDesc span,
.pc80507 label.product .prodDesc span {
  font-family: var(--font-m) !important;
  font-size: 16px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  display: block !important;
  margin-top: 14px !important;
}

/* Package selected state */
.pc80504 label.product:has(input:checked),
.pc80506 label.product:has(input:checked),
.pc80507 label.product:has(input:checked) {
  border-left: 3px solid var(--violet) !important;
  background: rgba(123, 85, 255, 0.08) !important;
}
.pc80504 label.product:has(input:checked) td.price,
.pc80506 label.product:has(input:checked) td.price,
.pc80507 label.product:has(input:checked) td.price {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Package catname bottom padding */
.pc80506 .catname,
.pc80504 .catname,
.pc80507 .catname { padding-bottom: 12px !important; }




/* 10. FIELD LABELS */
.cap, .cart-questions .question, .cart-location label, .cart-user label, .cart-payment label {
  font-family: var(--font-m) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  font-weight: 400 !important;
  margin-bottom: 4px !important;
  cursor: default !important;
}
label[for*="radio"], .cart-questions label, .cart-payment .payopt label {
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.cart-payment .payopt > div[style*="inline-block"] {
  vertical-align: middle !important;
}

/* 11. INPUTS, SELECTS, TEXTAREAS */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea {
  background: var(--card2, #111128) !important;
  border: 1px solid rgba(123, 85, 255, 0.35) !important;
  border-radius: 2px !important;
  color: var(--text) !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 10px 12px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus, textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 217, 245, 0.10) !important;
}
input:disabled, select:disabled { opacity: 0.35 !important; }
input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: 1 !important; }
textarea { min-height: 90px !important; resize: vertical !important; }

/* Normalize spacing for every field in the location section — overrides the
   platform's competing .cap/.inp/input margin sources so every field pair
   (Address, City, State, Zip) uses the exact same gap. */
.cart-location .cap {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  width: 100% !important;
}
.cart-location .inp {
  margin: 0 0 20px 0 !important;
  width: 100% !important;
}
.cart-location .inp input,
.cart-location .inp select {
  margin-bottom: 0 !important;
}

/* Zip Code caption — nudged down slightly to match rhythm */
.cart-location .cap:has(+ .inp:has(input[name="search_zipcode"])) {
  margin-top: 12px !important;
}

/* 12. CALENDAR */
.cart-gcal table.calendar,
.cart-gcal table.calendar thead,
.cart-gcal table.calendar thead tr {
  background: transparent !important;
  border: none !important;
}
.cart-gcal table.calendar {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-b) !important;
}
.cart-gcal table.calendar thead td.calheader {
  background: var(--card-hi) !important;
  border: none !important;
  border-bottom: 1px solid var(--sep) !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  padding: 12px 16px !important;
  white-space: normal !important;
  text-align: center !important;
}
.cart-gcal table.calendar thead td.calheader > div {
  justify-content: center !important;
  padding: 0 !important;
}
.cart-gcal tr.bestappts td {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
}
.cart-gcal .timeslot.timeslot-pick {
  background: rgba(123, 85, 255, 0.07) !important;
  border: 1px solid rgba(123, 85, 255, 0.35) !important;
  border-radius: 2px !important;
  color: var(--text) !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: border-color 0.25s, background 0.25s !important;
}

.cart-gcal .timeslot.timeslot-pick:hover:not(.selected):not(.active) {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.06) !important;
}

.cart-gcal .timeslot.timeslot-pick.selected {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.06) !important;
}

.cart-gcal .timeslot.timeslot-pick:hover > div:last-child,
.cart-gcal .timeslot.timeslot-pick.selected > div:last-child {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.06) !important;
}

.cart-gcal .timeslot.timeslot-pick:hover .weeksout,
.cart-gcal .timeslot.timeslot-pick.selected .weeksout {
  background: var(--grad) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;

}

/* Center each fixed-width time-row (.daywidth) within the day column —
   the platform's JS sets a fixed pixel width on .daywidth via inline style,
   but leaves it flush against the left edge of the (wider) .daygraph column. */
.cart-gcal .daywidth {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* "Checking availability..." loading row — injected by the platform's JS
   while it fetches more weeks ("I need something further out"). It has no
   background of its own, so it flashes the browser's default white until
   the new weeks replace it. */
.cart-gcal tr.checking td {
  background: var(--card) !important;
  color: var(--muted) !important;
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  border: none;
}
.cart-gcal tr.checking img {
  filter: brightness(0) invert(1) opacity(0.6);
}

.cart-gcal .timeslot .weeksout {
  background: var(--card2, #111128) !important;
  border-right: 1px solid rgba(123, 85, 255, 0.35) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
}
.cart-gcal .timeslot.timeslot-pick:active .weeksout,
.cart-gcal .timeslot.timeslot-pick.active .weeksout {
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.cart-gcal .timeslot .arrow { display: none !important; }
.cart-gcal .timeslot:not(.timeslot-pick) {
  background: var(--card2, #111128) !important;
  border: 1px solid rgba(123, 85, 255, 0.35) !important;
  border-radius: 2px !important;
  color: var(--muted) !important;
  font-family: var(--font-m) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: border-color 0.25s, background 0.25s, color 0.25s !important;
}
.cart-gcal .timeslot:not(.timeslot-pick):hover {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.06) !important;
  color: var(--text) !important;
}
.cart-gcal tr.weekdays th {
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  padding: 8px 4px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
}
.cart-gcal td.dow {
  vertical-align: top !important;
  padding: 4px 2px !important;
  background: transparent !important;
  border: 1px solid var(--sep) !important;
  border-color: var(--sep) !important;
}
.cart-gcal div.day {
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  padding: 4px !important;
  text-align: center !important;
}
.cart-gcal div.day.past { opacity: 0.25 !important; }
.cart-gcal div.today {
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--cyan) !important;
}
.cart-gcal .loadmore a {
  font-family: var(--font-m) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.cart-gcal .loadmore a:hover { color: var(--cyan) !important; }
.cart-gcal label {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.cart-gcal .timeslot.timeslot-pick > div:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
}

/* Explicit .ffit hover/selected match — higher specificity (4 classes) than the
   base .timeslot.timeslot-pick hover rule so it can never be shadowed, whatever
   the ffit variant's internal DOM/rendering path turns out to be. */
.cart-gcal .timeslot.timeslot-pick.ffit:hover:not(.selected):not(.active),
.cart-gcal .timeslot.timeslot-pick.ffit.selected {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.30) !important;
}

/* 13. PAYMENT */

/* Reset Section 11's dark input background inside payment */
.cart-payment input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.cart-payment select,
.cart-payment textarea {
  background: transparent !important;
  border-color: rgba(123, 85, 255, 0.25) !important;
}

/* Order summary — label rows */
.cart-payment .subtotal,
.cart-payment .salestax {
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  line-height: 1.8 !important;
  padding-top: 2px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Travel Time and Mileage — platform always renders this label even when blank
   (no fee applies). Keep it small/dim so an empty row doesn't stand out. */
.cart-payment .travel1,
.cart-payment .travel2 {
  font-family: var(--font-m) !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(239, 239, 255, 0.20) !important;
  -webkit-text-fill-color: rgba(239, 239, 255, 0.20) !important;
  line-height: 1.4 !important;
  margin-bottom: 2px !important;
}
.cart-payment .travel1amount,
.cart-payment .travel2amount {
  font-family: var(--font-m) !important;
  font-size: 9px !important;
  color: rgba(239, 239, 255, 0.20) !important;
  -webkit-text-fill-color: rgba(239, 239, 255, 0.20) !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
  min-height: 0 !important;
}

/* Sub-total and tax amounts — same size (real class is .taxamount, not .taxamount0) */
.cart-payment .subtotalamount,
.cart-payment .taxamount {
  font-family: var(--font-d) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  display: block !important;
}

/* Order Total amount — matches package price style */
.cart-payment .total {
  font-family: var(--font-d) !important;
  font-size: 54px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  background: var(--grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  display: block !important;
}

/* You Saved */
.cart-payment .savings {
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan) !important;
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  line-height: 1.8 !important;
  padding-top: 2px !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.cart-payment .savingsamount {
  font-family: var(--font-d) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--cyan) !important;
  -webkit-text-fill-color: var(--cyan) !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
  display: block !important;
}

/* Waive Fee button (Travel Time and Mileage) — kept at its original
   compact size, re-skinned to match the site's dark/violet theme */
.cart-payment .travel1amount button,
.cart-payment .travel2amount button {
  background: transparent !important;
  border: 1px solid rgba(123, 85, 255, 0.35) !important;
  border-radius: 2px !important;
  color: rgba(239, 239, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(239, 239, 255, 0.45) !important;
  cursor: pointer !important;
  font-family: var(--font-m) !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.cart-payment .travel1amount button:hover,
.cart-payment .travel2amount button:hover {
  border-color: var(--bdr-hi) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Due Today / deposit */
.cart-payment .deposit {
  color: #ff4466 !important;
  -webkit-text-fill-color: #ff4466 !important;
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}
.cart-payment .depositamount,
.cart-payment .allowamount,
.cart-payment .payamount {
  font-family: var(--font-d) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ff4466 !important;
  -webkit-text-fill-color: #ff4466 !important;
  line-height: 1.2 !important;
}

/* "All amounts are in USD" */
.cart-payment .content > div:first-child > div:last-of-type {
  font-family: var(--font-m) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(239, 239, 255, 0.20) !important;
  -webkit-text-fill-color: rgba(239, 239, 255, 0.20) !important;
  white-space: nowrap !important;
  margin-top: 12px !important;
}

/* Billing Information header */
.cart-payment .billing-address {
  font-family: var(--font-m) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  margin: 0 0 12px !important;
}

/* Payment options — card style */
.cart-payment .payopt {
  background: var(--card-hi) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 2px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: border-color 0.25s, background 0.25s !important;
}
.cart-payment .payopt:hover {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.06) !important;
}
.cart-payment .payopt.selected {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.08) !important;
  border-left: 2px solid var(--violet) !important;
}

/* Name field — wrapper keeps its natural .CardElement padding (10px 12px, same
   class the working Card Number field uses); input is stripped to bare text
   so the two fields render identically. */
.cart-payment .StripeElement.CardElement.nameoncard {
  background: var(--card2, #111128) !important;
  border: 1px solid rgba(123, 85, 255, 0.35) !important;
  border-radius: 2px !important;
  margin-bottom: 8px !important;
}
.cart-payment .StripeElement.CardElement.nameoncard input[name="sNameOnCard"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
}
.cart-payment .StripeElement.CardElement.nameoncard input[name="sNameOnCard"]:focus {
  box-shadow: none !important;
}
.cart-payment .StripeElement.CardElement.nameoncard input[name="sNameOnCard"]::placeholder {
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  opacity: 1 !important;
}

/* Stripe card element */
#card-element {
  background: var(--card2, #111128) !important;
  border: 1px solid rgba(123, 85, 255, 0.35) !important;
  border-radius: 2px !important;
  transition: border-color 0.2s !important;
}
#card-element.StripeElement--focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 217, 245, 0.10) !important;
}

/* Titus "$0 due today" badge — lightened text color */
.cart-payment .titus > div[style*="float: right"] {
  border-color: var(--bdr) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  border-radius: 2px !important;
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

/* Hidden / Extra Products — made to look and behave exactly like a .product-category card */

/* Un-dim the collapsed state (platform forces opacity:0.25 on .closed) */
.cart-products .allproducts.closed,
.cart-products .allproducts.closed.closed {
  opacity: 1 !important;
}

/* Card shell — identical to .product-category */
.cart-products .allproducts,
.cart-products .allproducts.closed {
  background: var(--card) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s, background 0.25s !important;
  margin: 18px 0 0 !important;
  width: 100% !important;
}
.cart-products .allproducts:hover,
.cart-products .allproducts.closed:hover {
  border-color: var(--bdr-hi) !important;
  background: rgba(123, 85, 255, 0.07) !important;
  box-shadow: 0 4px 32px rgba(123, 85, 255, 0.10) !important;
}

/* Titlebar — matches .catname exactly. Extra .closed.closed bumps specificity
   to (0,5,0) to beat the platform's (0,4,0) #f8f8f8 override on the closed state. */
.cart-products .allproducts .titlebar,
.cart-products .allproducts.closed.closed .titlebar {
  background: var(--card) !important;
  border: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  font-family: var(--font-d) !important;
  font-size: 22px !important;
  letter-spacing: 0.03em !important;
  padding: 20px 24px 14px !important;
  display: block !important;
  cursor: pointer !important;
}
.cart-products .allproducts .titlebar span,
.cart-products .allproducts.closed.closed .titlebar span {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  display: block !important;
  margin-top: 4px !important;
}

/* Content — real rows here are <tr class="hoverline product">, not label.product,
   so they need their own styling to actually behave like the other product cards. */
.cart-products .allproducts-content {
  padding: 0 !important;
  background: none !important;
}
.cart-products .allproducts-content table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.cart-products .allproducts-content tr.pcat td {
  font-family: var(--font-m) !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  padding: 16px 24px 8px !important;
  font-weight: 400 !important;
}
.cart-products .allproducts-content tr.hoverline.product {
  transition: background 0.15s !important;
  cursor: pointer !important;
}
.cart-products .allproducts-content tr.hoverline.product:hover,
.cart-products .hoverline:hover {
  background: rgba(123, 85, 255, 0.06) !important;
}
.cart-products .allproducts-content tr.hoverline.product td {
  padding: 10px 24px !important;
  border: none !important;
}
.cart-products .allproducts-content tr.hoverline.product label {
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  cursor: pointer !important;
}
.cart-products .allproducts-content tr.hoverline.product input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(123, 85, 255, 0.35) !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  margin: 0 !important;
  transition: background 0.18s, border-color 0.18s !important;
}
.cart-products .allproducts-content tr.hoverline.product input[type="checkbox"]::after {
  content: '' !important;
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  width: 5px !important;
  height: 3px !important;
  border-left: 1.5px solid rgba(255,255,255,0) !important;
  border-bottom: 1.5px solid rgba(255,255,255,0) !important;
  transform: rotate(-45deg) translateY(-2px) !important;
  transition: border-color 0.15s !important;
}
.cart-products .allproducts-content tr.hoverline.product input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #7B55FF, #00D9F5) !important;
  border-color: transparent !important;
}
.cart-products .allproducts-content tr.hoverline.product input[type="checkbox"]:checked::after {
  border-left-color: #fff !important;
  border-bottom-color: #fff !important;
}

/* Admin-only "team member" notes — prevent overflow, don't affect customer view */
.teammemberinvoice {
  box-sizing: border-box !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  font-family: var(--font-m) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  margin-top: 4px !important;
  margin-left: 0 !important;
}


/* 14. BUTTONS */
.placeorder,
button[type="submit"],
.cart-order button {
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  background: var(--grad) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 16px 36px !important;
  cursor: pointer !important;
  transition: opacity 0.2s, transform 0.15s !important;
}
.placeorder:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}
.placeorder:disabled,
button:disabled,
.cart-order button:disabled {
  background: var(--card2, #111128) !important;
  color: var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.sm-hidden{display: none !important;}

#hdph-cb{display: none !important;}

/* ============================================================
   THANK YOU / ORDER COMPLETE — match "LET'S SHOOT." homepage CTA
   ============================================================ */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bebasneue/v16/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bebasneue/v16/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cart-complete {
  position: relative;
  overflow: hidden;
  background: #0A0A18 !important;
  border-top: 1px solid rgba(123,85,255,0.14);
}

.cart-complete::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(123,85,255,0.09) 0%, transparent 65%);
}

.cart-complete > div {
  position: relative;
  z-index: 1;
  color: #EFEFFF !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* "Thank you!" headline — gradient text, Bebas Neue, like "LET'S SHOOT." */
/* "Thank you!" headline — replaces the old gradient-on-whole-line rule */
.cart-complete > div > div:first-child {
  font-family: 'Bebas Neue', Arial, Helvetica, sans-serif !important;
  font-size: clamp(48px, 9vw, 108px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 0.3em !important;
  color: #EFEFFF;
}

/* Any links/buttons in the confirmation section — match site's pulse-gradient buttons */
.cart-complete a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 36px;
  margin: 8px;
  border-radius: 2px !important;
  background: linear-gradient(105deg, #7B55FF, #00D9F5);
  color: #fff !important;
  text-decoration: none !important;
  transition: opacity 0.25s;
}
.cart-complete a:hover {
  opacity: 0.88;
}

html, body {
  height: auto !important;
  min-height: 0 !important;
}