/* =========================================================
   VANCE CEYLON — CHECKOUT UI MATCH
   Reference: supplied white / light-grey two-column checkout.
   Loaded last so it replaces the previous checkout appearance.
========================================================= */

html body dialog#vanceCheckout.vance-checkout[open] {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  width: min(1428px, calc(100vw - 32px)) !important;
  max-width: 1428px !important;
  height: min(1014px, calc(100dvh - 16px)) !important;
  max-height: min(1014px, calc(100dvh - 16px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #f1f2f2 !important;
  color: #111 !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.22) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

#vanceCheckout::backdrop {
  background: rgba(228,230,231,.78) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

#vanceCheckout * { box-sizing: border-box !important; }
#vanceCheckout [hidden] { display: none !important; }

/* Neutralize the older 620px checkout wrapper if that legacy patch still exists. */
html body #vanceCheckout > .vc-master-scroll:has(> .vc-ref-shell) {
  display: contents !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

#vanceCheckout .vc-ref-shell {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 52px 24px !important;
  background: linear-gradient(180deg, #f3f4f4 0%, #edefef 100%) !important;
}

#vanceCheckout .vc-ref-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 28px !important;
  flex: 0 0 auto !important;
  padding: 0 2px 18px !important;
}

#vanceCheckout .vc-ref-heading h2 {
  margin: 0 !important;
  color: #0b0b0b !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  letter-spacing: -.04em !important;
}

#vanceCheckout .vc-ref-heading .vc-intro {
  margin: 9px 0 0 !important;
  color: #666 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

#vanceCheckout .vc-ref-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-top: 6px !important;
}

#vanceCheckout .vc-ref-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  color: #777 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

#vanceCheckout .vc-ref-breadcrumb b { color: #8b8b8b !important; font-size: 20px !important; font-weight: 400 !important; }
#vanceCheckout .vc-ref-breadcrumb [data-crumb-checkout],
#vanceCheckout .vc-ref-breadcrumb [data-crumb-review] {
  color: #9a9a9a !important;
  font-weight: 500 !important;
  transition: color .18s ease, font-weight .18s ease !important;
}
#vanceCheckout .vc-ref-breadcrumb .is-active {
  color: #111 !important;
  font-weight: 750 !important;
}

#vanceCheckout .vc-close {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 1px solid #dadada !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

#vanceCheckout .vc-ref-layout {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.695fr) minmax(400px, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#vanceCheckout .vc-ref-main {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 4px 18px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: #c8c8c8 transparent !important;
}

#vanceCheckout .vc-ref-main::-webkit-scrollbar,
#vanceCheckout .vc-ref-summary-card::-webkit-scrollbar { width: 7px !important; }
#vanceCheckout .vc-ref-main::-webkit-scrollbar-track,
#vanceCheckout .vc-ref-summary-card::-webkit-scrollbar-track { background: transparent !important; }
#vanceCheckout .vc-ref-main::-webkit-scrollbar-thumb,
#vanceCheckout .vc-ref-summary-card::-webkit-scrollbar-thumb { background: #c8c8c8 !important; border-radius: 999px !important; }

#vanceCheckout #vanceCheckoutForm {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}

#vanceCheckout #vanceCheckoutForm[hidden] { display: none !important; }

#vanceCheckout .vc-ref-fields-host {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#vanceCheckout .vc-ref-card,
#vanceCheckout #vcReview {
  margin: 0 0 14px !important;
  padding: 18px 20px 20px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.025) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#vanceCheckout .vc-ref-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

#vanceCheckout .vc-ref-step-title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

#vanceCheckout .vc-ref-step {
  width: 38px !important;
  height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  border-radius: 50% !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#vanceCheckout .vc-ref-card h3,
#vanceCheckout #vcReview h3 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
}

#vanceCheckout .vc-ref-required {
  color: #777 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

#vanceCheckout .vc-ref-grid {
  display: grid !important;
  gap: 13px 16px !important;
}
#vanceCheckout .vc-ref-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#vanceCheckout .vc-ref-span-2 { grid-column: 1 / -1 !important; }

#vanceCheckout .vc-ref-field {
  display: block !important;
  margin: 0 !important;
  color: #222 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

#vanceCheckout .vc-ref-field input:not([type="checkbox"]),
#vanceCheckout .vc-ref-field select,
#vanceCheckout .vc-ref-field textarea {
  width: 100% !important;
  height: 44px !important;
  margin: 6px 0 0 !important;
  padding: 0 14px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 8px !important;
  outline: 0 !important;
  background: #fff !important;
  color: #1b1b1b !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  opacity: 1 !important;
  appearance: auto !important;
}

#vanceCheckout .vc-ref-field input:focus,
#vanceCheckout .vc-ref-field select:focus,
#vanceCheckout .vc-ref-field textarea:focus {
  border-color: #111 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.06) !important;
}

#vanceCheckout .vc-ref-field select option { background: #fff !important; color: #111 !important; }
#vanceCheckout .vc-ref-area[hidden] { display: none !important; }
#vanceCheckout .vance-area-mode-note { display: block !important; margin-top: 5px !important; color: #777 !important; font-size: 10px !important; font-weight: 450 !important; }

#vanceCheckout .vc-ref-whatsapp {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  color: #666 !important;
  font-size: 10px !important;
  font-weight: 450 !important;
}
#vanceCheckout .vc-ref-whatsapp input { width: 15px !important; height: 15px !important; margin: 1px 0 0 !important; accent-color: #111 !important; }

#vanceCheckout .vc-ref-reload {
  width: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #e1e1e1 !important;
  border-radius: 999px !important;
  background: #f7f7f7 !important;
  color: #333 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

#vanceCheckout .vc-ref-delivery-note,
#vanceCheckout .vc-ref-summary-note {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f5f5f5 !important;
  color: #4d4d4d !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

#vanceCheckout .vc-ref-delivery-note svg,
#vanceCheckout .vc-ref-summary-note svg,
#vanceCheckout .vc-ref-method-icon svg {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#vanceCheckout .vc-ref-payment { padding-bottom: 18px !important; }
#vanceCheckout .vc-ref-method-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#vanceCheckout .vc-method.vc-ref-method {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 18px 30px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 1px solid #dadada !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#vanceCheckout .vc-method.vc-ref-method:hover { border-color: #9b9b9b !important; }
#vanceCheckout .vc-method.vc-ref-method:has(input:checked) { border-color: #111 !important; box-shadow: inset 0 0 0 1px #111 !important; }
#vanceCheckout .vc-method.vc-ref-method input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #111 !important;
}
#vanceCheckout .vc-ref-method-icon { display: grid !important; place-items: center !important; color: #111 !important; }
#vanceCheckout .vc-ref-method strong { display: block !important; color: #111 !important; font-size: 12px !important; font-weight: 750 !important; }
#vanceCheckout .vc-ref-method small { display: block !important; margin-top: 2px !important; color: #777 !important; font-size: 10px !important; line-height: 1.3 !important; }

#vanceCheckout .vc-ref-bank-details,
#vanceCheckout .vance-bank-islandwide-note {
  margin: 12px 0 0 !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f5f5f5 !important;
  color: #3f3f3f !important;
  box-shadow: none !important;
  white-space: pre-wrap !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
}
#vanceCheckout .vance-bank-islandwide-note strong,
#vanceCheckout .vance-bank-islandwide-note span,
#vanceCheckout .vance-bank-islandwide-note small { color: #444 !important; }

#vanceCheckout .vc-ref-source-summary { display: none !important; }

#vanceCheckout .vc-ref-summary-card {
  min-height: 0 !important;
  height: fit-content !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  padding: 18px 20px 18px !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.97) !important;
  color: #111 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.025) !important;
}

#vanceCheckout .vc-ref-summary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-bottom: 10px !important;
}
#vanceCheckout .vc-ref-summary-head h3 { margin: 0 !important; color: #111 !important; font-size: 20px !important; font-weight: 750 !important; letter-spacing: -.025em !important; }
#vanceCheckout .vc-ref-edit-cart {
  margin: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #222 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

#vanceCheckout .vc-ref-items { border-bottom: 1px solid #e9e9e9 !important; }
#vanceCheckout .vc-ref-item {
  display: grid !important;
  grid-template-columns: 74px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-top: 1px solid #ededed !important;
}
#vanceCheckout .vc-ref-item:first-child { border-top: 0 !important; }
#vanceCheckout .vc-ref-item-image {
  width: 74px !important;
  height: 74px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #f2f2f2 !important;
  color: #aaa !important;
  font-weight: 800 !important;
}
#vanceCheckout .vc-ref-item-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; }
#vanceCheckout .vc-ref-item-info { min-width: 0 !important; }
#vanceCheckout .vc-ref-item-info strong { display: block !important; color: #181818 !important; font-size: 12px !important; font-weight: 650 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#vanceCheckout .vc-ref-item-info small { display: block !important; margin-top: 3px !important; color: #858585 !important; font-size: 10px !important; line-height: 1.25 !important; }
#vanceCheckout .vc-ref-item > b { color: #222 !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; }
#vanceCheckout .vc-ref-empty { padding: 18px 0 !important; color: #777 !important; font-size: 12px !important; }

#vanceCheckout .vc-ref-totals { padding: 10px 0 0 !important; }
#vanceCheckout .vc-ref-totals > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 6px 0 !important;
  color: #333 !important;
  font-size: 11px !important;
}
#vanceCheckout .vc-ref-totals strong { color: #222 !important; font-size: 11px !important; font-weight: 650 !important; }
#vanceCheckout .vc-ref-totals .vc-ref-total { margin-top: 4px !important; padding: 12px 0 10px !important; border-top: 1px solid #e9e9e9 !important; }
#vanceCheckout .vc-ref-total span { display: flex !important; flex-direction: column !important; gap: 2px !important; }
#vanceCheckout .vc-ref-total span b { font-size: 16px !important; color: #111 !important; }
#vanceCheckout .vc-ref-total span small { color: #8a8a8a !important; font-size: 9px !important; }
#vanceCheckout .vc-ref-total > strong { color: #111 !important; font-size: 18px !important; font-weight: 800 !important; }

#vanceCheckout .vc-ref-promo {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 88px !important;
  gap: 10px !important;
  padding-top: 11px !important;
  border-top: 1px solid #ededed !important;
}
#vanceCheckout .vc-ref-promo input {
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  font-size: 11px !important;
}
#vanceCheckout .vc-ref-promo button {
  height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ededed !important;
  color: #222 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#vanceCheckout .vc-ref-totals .vc-ref-discount-row {
  color: #202020 !important;
}
#vanceCheckout .vc-ref-discount-row span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
#vanceCheckout .vc-ref-discount-row span b {
  max-width: 145px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  letter-spacing: .02em !important;
}
#vanceCheckout .vc-ref-discount-row > strong {
  color: #111 !important;
}
#vanceCheckout .vc-ref-promo-status {
  grid-column: 1 / -1 !important;
  display: block !important;
  min-height: 14px !important;
  margin: -2px 2px 0 !important;
  color: #777 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}
#vanceCheckout .vc-ref-promo-status:empty {
  display: none !important;
}
#vanceCheckout .vc-ref-promo-status.is-success {
  color: #166534 !important;
}
#vanceCheckout .vc-ref-promo-status.is-error {
  color: #b42318 !important;
}
#vanceCheckout .vc-ref-promo button.is-applied {
  background: #111 !important;
  color: #fff !important;
}
#vanceCheckout .vc-ref-promo button:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}

#vanceCheckout .vc-ref-actions { display: grid !important; gap: 9px !important; margin-top: 12px !important; }
#vanceCheckout .vc-ref-review-button,
#vanceCheckout .vc-ref-back-button {
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
#vanceCheckout .vc-ref-review-button { border: 1px solid #111 !important; background: #111 !important; color: #fff !important; }
#vanceCheckout .vc-ref-review-button:hover { background: #222 !important; }
#vanceCheckout .vc-ref-back-button { border: 1px solid #e5e5e5 !important; background: #f2f2f2 !important; color: #222 !important; }

#vanceCheckout .vc-ref-secure { margin-top: 13px !important; color: #888 !important; font-size: 9px !important; text-align: center !important; }

#vanceCheckout #vcMessage {
  margin: 0 0 12px !important;
  padding: 11px 13px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}
#vanceCheckout #vcMessage:empty { display: none !important; }

#vanceCheckout #vcReview:not([hidden]) {
  display: block !important;
  min-height: 280px !important;
  padding: 22px !important;
}
#vanceCheckout #vcReviewDetails,
#vanceCheckout #vcPaymentInstructions { color: #333 !important; font-size: 12px !important; line-height: 1.65 !important; white-space: pre-wrap !important; }
#vanceCheckout #vcPlaceOrder,
#vanceCheckout #vcEdit {
  width: 100% !important;
  min-height: 46px !important;
  margin: 10px 0 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
#vanceCheckout #vcPlaceOrder { border: 1px solid #111 !important; background: #111 !important; color: #fff !important; }
#vanceCheckout #vcEdit { border: 1px solid #ddd !important; background: #f2f2f2 !important; color: #222 !important; }

@media (max-width: 980px) {
  #vanceCheckout[open] {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
  }
  #vanceCheckout .vc-ref-shell { padding: 18px !important; overflow-y: auto !important; }
  #vanceCheckout .vc-ref-header { padding-bottom: 14px !important; }
  #vanceCheckout .vc-ref-breadcrumb { display: none !important; }
  #vanceCheckout .vc-ref-layout { display: block !important; overflow: visible !important; }
  #vanceCheckout .vc-ref-main { overflow: visible !important; padding: 0 !important; }
  #vanceCheckout .vc-ref-summary-card { max-height: none !important; overflow: visible !important; margin-top: 4px !important; }
}

@media (max-width: 620px) {
  #vanceCheckout[open] {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #vanceCheckout .vc-ref-shell { padding: 15px 12px 18px !important; }
  #vanceCheckout .vc-ref-heading h2 { font-size: 30px !important; }
  #vanceCheckout .vc-ref-heading .vc-intro { font-size: 12px !important; }
  #vanceCheckout .vc-ref-grid-2 { grid-template-columns: 1fr !important; }

  /* Payment must NOT inherit the old one-column mobile layout.
     Keep COD + Bank Deposit side-by-side on every mobile build. */
  #vanceCheckout .vc-ref-method-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #vanceCheckout .vc-ref-span-2 { grid-column: auto !important; }
  #vanceCheckout .vc-ref-card,
  #vanceCheckout #vcReview,
  #vanceCheckout .vc-ref-summary-card { padding: 15px !important; border-radius: 14px !important; }
  #vanceCheckout .vc-ref-card-head { align-items: flex-start !important; }
  #vanceCheckout .vc-ref-required { display: none !important; }
  #vanceCheckout .vc-ref-item { grid-template-columns: 62px minmax(0,1fr) !important; }
  #vanceCheckout .vc-ref-item-image { width: 62px !important; height: 62px !important; }
  #vanceCheckout .vc-ref-item > b { grid-column: 2 !important; justify-self: start !important; }
}

/* Exact reference proportions on normal desktop/laptop widths. */
@media (min-width: 901px) and (max-width: 1499px) {
  html body dialog#vanceCheckout.vance-checkout[open] {
    width: calc(100vw - 32px) !important;
    max-width: 1428px !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  #vanceCheckout .vc-ref-shell {
    padding-left: clamp(34px, 3.65vw, 52px) !important;
    padding-right: clamp(34px, 3.65vw, 52px) !important;
  }
}


/* =========================================================
   VANCE CEYLON — REFERENCE CHECKOUT V3
   NO SCROLLBAR / EQUAL COLUMN HEIGHT / REFERENCE PROPORTIONS
   Desktop uses the supplied 1428 × 1014 reference canvas and
   scales the whole checkout to the browser viewport.
========================================================= */

/* Hide the two extra rows that were making the left column taller
   than the supplied reference image. Their values remain in the form. */
#vanceCheckout .vc-ref-whatsapp,
#vanceCheckout .vance-bank-islandwide-note,
#vanceCheckout .vance-area-mode-note {
  display: none !important;
}

#vanceCheckout .vc-ref-mode-hidden {
  display: none !important;
}

/* Absolutely no visible checkout scrollbar. */
#vanceCheckout,
#vanceCheckout .vc-ref-shell,
#vanceCheckout .vc-ref-main,
#vanceCheckout .vc-ref-summary-card {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#vanceCheckout::-webkit-scrollbar,
#vanceCheckout .vc-ref-shell::-webkit-scrollbar,
#vanceCheckout .vc-ref-main::-webkit-scrollbar,
#vanceCheckout .vc-ref-summary-card::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@media (min-width: 981px) {
  html body dialog#vanceCheckout.vance-checkout[open] {
    width: 1428px !important;
    max-width: 1428px !important;
    min-width: 1428px !important;
    height: 1014px !important;
    max-height: 1014px !important;
    min-height: 1014px !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) scale(var(--vc-ref-scale, 1)) !important;
    transform-origin: 50% 50% !important;
  }

  #vanceCheckout .vc-ref-shell {
    width: 1428px !important;
    height: 1014px !important;
    min-height: 1014px !important;
    padding: 20px 52px 24px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #f3f4f4 0%, #edefef 100%) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.22) !important;
  }

  #vanceCheckout .vc-ref-header {
    min-height: 59px !important;
    padding: 0 2px 18px !important;
  }

  #vanceCheckout .vc-ref-layout {
    height: calc(100% - 77px) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.695fr) minmax(400px, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  #vanceCheckout .vc-ref-main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #vanceCheckout #vanceCheckoutForm {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 244px 310px minmax(0, 1fr) !important;
    gap: 14px !important;
    overflow: hidden !important;
  }

  #vanceCheckout .vc-ref-fields-host {
    display: contents !important;
  }

  #vanceCheckout .vc-ref-card,
  #vanceCheckout #vcReview {
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Customer information: same compact height as the supplied design. */
  #vanceCheckout .vc-ref-customer {
    height: 244px !important;
    padding: 18px 20px 20px !important;
  }

  /* Delivery: address + city/area + postal only, then delivery note. */
  #vanceCheckout .vc-ref-delivery {
    height: 310px !important;
    padding: 18px 20px 18px !important;
  }

  #vanceCheckout .vc-ref-delivery .vc-ref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px 16px !important;
  }

  #vanceCheckout .vc-ref-delivery .vc-ref-address { order: 1 !important; grid-column: 1 / -1 !important; }
  #vanceCheckout .vc-ref-delivery .vc-ref-city { order: 2 !important; }
  #vanceCheckout .vc-ref-delivery .vc-ref-area { order: 2 !important; grid-column: auto !important; }
  #vanceCheckout .vc-ref-delivery .vc-ref-postal { order: 3 !important; }

  #vanceCheckout .vc-ref-delivery-note {
    margin-top: 13px !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
  }

  /* Payment card fills only the remaining height of the left column. */
  #vanceCheckout .vc-ref-payment {
    height: 100% !important;
    min-height: 0 !important;
    padding: 16px 20px 16px !important;
  }

  #vanceCheckout .vc-ref-payment .vc-ref-card-head {
    margin-bottom: 11px !important;
  }

  #vanceCheckout .vc-method.vc-ref-method {
    min-height: 58px !important;
    padding: 9px 13px !important;
  }

  #vanceCheckout .vc-ref-bank-details {
    max-height: 126px !important;
    margin-top: 11px !important;
    padding: 10px 13px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  /* Right card is exactly the same height as the complete left stack. */
  #vanceCheckout .vc-ref-summary-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 18px 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #vanceCheckout .vc-ref-items {
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  #vanceCheckout .vc-ref-totals,
  #vanceCheckout .vc-ref-promo,
  #vanceCheckout .vc-ref-summary-note,
  #vanceCheckout .vc-ref-actions,
  #vanceCheckout .vc-ref-secure {
    flex: 0 0 auto !important;
  }

  #vanceCheckout .vc-ref-secure {
    margin-top: 12px !important;
  }

  /* Keep review step inside the exact same frame. */
  #vanceCheckout #vcReview:not([hidden]) {
    height: 100% !important;
    overflow: hidden !important;
  }
}

/* Tablet/mobile may still scroll because the two columns stack, but the bar
   itself stays invisible. Desktop never scrolls. */
@media (max-width: 980px) {
  #vanceCheckout .vc-ref-shell {
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }
  #vanceCheckout .vc-ref-shell::-webkit-scrollbar { display: none !important; }
}

/* =========================================================
   VANCE CEYLON — REFERENCE CHECKOUT V4
   PAYMENT BUTTON + POSTAL-CODE FINAL ALIGNMENT
   - compact horizontal COD / Bank Deposit controls
   - icon vertically centered beside two straight text lines
   - selected method remains white with a black outline
   - delivery row is always City + Postal Code
========================================================= */

@media (min-width: 981px) {
  /* DELIVERY — lock the reference two-row structure.
     Row 1: Address full width
     Row 2: City + Postal Code */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-delivery .vc-ref-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 66px 66px !important;
    grid-auto-rows: 66px !important;
    grid-auto-flow: row !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-delivery .vc-ref-address {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    min-width: 0 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-delivery .vc-ref-postal {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    order: 3 !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* BANK: show normal City field, hide delivery-area selector. */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout #vanceCheckoutForm:has(input[name="payment"][value="bank"]:checked) label:has(input[name="city"]) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout #vanceCheckoutForm:has(input[name="payment"][value="bank"]:checked) label:has(input[name="city"])::before {
    content: "City *" !important;
    display: block !important;
    color: #222 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout #vanceCheckoutForm:has(input[name="payment"][value="bank"]:checked) label:has(select[name="area"]) {
    display: none !important;
  }

  /* COD: use Colombo 01–15 selector as the City control. */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout #vanceCheckoutForm:has(input[name="payment"][value="cod"]:checked) label:has(input[name="city"]) {
    display: none !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout #vanceCheckoutForm:has(input[name="payment"][value="cod"]:checked) label:has(select[name="area"]) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout #vanceCheckoutForm:has(input[name="payment"][value="cod"]:checked) label:has(select[name="area"])::before {
    content: "City *" !important;
    display: block !important;
    color: #222 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-delivery .vc-ref-field > input:not([type="checkbox"]),
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-delivery .vc-ref-field > select {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-delivery-note {
    margin-top: 13px !important;
  }

  /* PAYMENT — exact compact two-button row. */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment .vc-ref-method-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 18px 34px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 10px !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: hidden !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    text-align: left !important;
    transform: none !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method:hover {
    transform: none !important;
    border-color: #9d9d9d !important;
    background: #fff !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method:has(input[type="radio"]:checked) {
    border: 1.5px solid #111 !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: inset 0 0 0 1px #111 !important;
  }

  /* Native radio stays small and visible. */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > input[type="radio"] {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    accent-color: #111 !important;
    appearance: auto !important;
    -webkit-appearance: radio !important;
  }

  /* Truck / bank icon sits in the middle of the two text lines. */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > .vc-ref-method-icon {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111 !important;
    opacity: 1 !important;
    text-align: center !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > .vc-ref-method-icon svg {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
  }

  /* Only the original text wrapper occupies the final grid column. */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111 !important;
    text-align: left !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > strong,
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > small,
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method:has(input:checked) > span:not(.vc-ref-method-icon) > strong,
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method:has(input:checked) > span:not(.vc-ref-method-icon) > small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > small {
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 450 !important;
    opacity: 1 !important;
    color: #777 !important;
  }

  /* Keep the bank information directly under the compact buttons. */
  html[data-vance-template="daylight"][data-shop-theme="day"] body #vanceCheckout .vc-ref-payment #vcBankDetails.vc-ref-bank-details {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 124px !important;
    margin: 11px 0 0 !important;
    padding: 10px 13px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f5f5f5 !important;
    color: #3f3f3f !important;
    box-shadow: none !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    text-align: left !important;
    white-space: pre-wrap !important;
  }
}


/* =========================================================
   VANCE CEYLON — ROOT MOBILE PAYMENT FIX
   This is intentionally inside checkout-reference-ui.css itself.
   It prevents the old one-column fallback from ever returning on
   Cloudflare Pages / PWA / standalone / normal mobile browser.
========================================================= */
@media (max-width:700px){

  html body #vanceCheckout .vc-ref-payment{
    padding:14px !important;
    overflow:visible !important;
  }

  html body #vanceCheckout .vc-ref-payment .vc-ref-card-head{
    margin-bottom:12px !important;
  }

  html body #vanceCheckout .vc-ref-payment .vc-ref-method-row{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:60px !important;
    align-items:stretch !important;
    gap:8px !important;
    width:100% !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    margin:0 !important;
    padding:0 !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"]
  body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method,
  html body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method{
    position:relative !important;
    display:grid !important;
    grid-template-columns:15px 22px minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
    justify-content:stretch !important;
    column-gap:7px !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;

    margin:0 !important;
    padding:0 9px !important;

    overflow:hidden !important;
    box-sizing:border-box !important;

    border:1px solid #d6d6d6 !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#111 !important;
    box-shadow:none !important;

    text-align:left !important;
    transform:none !important;
  }

  html[data-vance-template="daylight"][data-shop-theme="day"]
  body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method:has(input[type="radio"]:checked),
  html body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method:has(input[type="radio"]:checked){
    border:1.5px solid #111 !important;
    background:#fff !important;
    color:#111 !important;
    box-shadow:inset 0 0 0 1px #111 !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > input[type="radio"]{
    position:static !important;
    grid-column:1 !important;
    grid-row:1 !important;
    display:block !important;

    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    min-height:15px !important;
    max-width:15px !important;
    max-height:15px !important;

    margin:0 !important;
    padding:0 !important;

    opacity:1 !important;
    visibility:visible !important;
    appearance:auto !important;
    -webkit-appearance:radio !important;
    accent-color:#111 !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > .vc-ref-method-icon{
    grid-column:2 !important;
    grid-row:1 !important;
    display:grid !important;
    place-items:center !important;

    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    max-width:22px !important;
    max-height:22px !important;

    margin:0 !important;
    padding:0 !important;
    color:#111 !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > .vc-ref-method-icon svg{
    display:block !important;
    width:20px !important;
    height:20px !important;
    margin:0 !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon){
    grid-column:3 !important;
    grid-row:1 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:2px !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#111 !important;
    text-align:left !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > strong{
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#111 !important;
    font-size:10.5px !important;
    line-height:1.16 !important;
    font-weight:800 !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    text-align:left !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > small{
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#6d6d6d !important;
    font-size:8.5px !important;
    line-height:1.18 !important;
    font-weight:550 !important;

    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    text-align:left !important;
  }

  html body #vanceCheckout .vc-ref-payment #vcBankDetails,
  html body #vanceCheckout .vc-ref-payment #vcBankInfo{
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    min-height:0 !important;
    max-height:none !important;

    margin:10px 0 0 !important;
    padding:11px 12px !important;

    overflow:visible !important;
    box-sizing:border-box !important;

    border:1px solid #e4e4e4 !important;
    border-radius:10px !important;
    background:#f6f6f6 !important;
    color:#222 !important;
    box-shadow:none !important;

    font-size:11.5px !important;
    line-height:1.5 !important;
    font-weight:550 !important;

    text-align:left !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:370px){
  html body #vanceCheckout .vc-ref-payment .vc-ref-method-row{
    gap:6px !important;
  }

  html body #vanceCheckout .vc-ref-payment label.vc-method.vc-ref-method{
    grid-template-columns:14px 18px minmax(0,1fr) !important;
    column-gap:5px !important;
    padding:0 6px !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > strong{
    font-size:9.8px !important;
  }

  html body #vanceCheckout .vc-ref-payment
  label.vc-method.vc-ref-method > span:not(.vc-ref-method-icon) > small{
    font-size:7.9px !important;
  }
}