/* -------------------------------------------------------------
   1️⃣ Utility helpers
   ------------------------------------------------------------- */
.u-hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; /* added line */
  border: 0;
}

/* -------------------------------------------------------------
   2️⃣ Base variables (customize to fit your brand)
   ------------------------------------------------------------- */
:root {
  --color-primary: #0069d9;
  --color-primary-dark: #0053a6;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-bg-overlay: rgba(0,0,0,.5);
  --color-bg-modal: #fff;
  --radius: .4rem;
  --spacing: 1rem;
  --transition: .2s ease;
  /* Futuristic enhancements */
  --glow-primary: rgba(214,178,94,0.3);
  --glow-accent: rgba(59,130,246,0.2);
  --blur-strength: 12px;
  --animation-speed: 0.3s;
  --animation-speed-mobile: 0.15s;
}

/* -------------------------------------------------------------
   3️⃣ Modal overlay & container
   ------------------------------------------------------------- */
.checkout-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--animation-speed) ease, visibility var(--animation-speed) ease;
  z-index: 2000;
  /* Futuristic backdrop blur - disabled on mobile for performance */
}
.checkout-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Enable backdrop blur only on desktop for performance */
@media (min-width: 769px) {
  .checkout-modal {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* -----------------------------------------------------------------
   The dialog itself – centered, scrollable if needed.
   ----------------------------------------------------------------- */
.checkout-modal__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.checkout-modal__dialog {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 540px;
  width: 95%;
  max-height: 84vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  position: relative;
  z-index: 1;
  padding: var(--spacing);
  border: 1px solid var(--border-soft);
}

/* -----------------------------------------------------------------
   Close button
   ----------------------------------------------------------------- */
.checkout-modal__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: none;
  border: none;
  font-size: 0;
  cursor: pointer;
  color: var(--muted);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition-fast);
}
.checkout-modal__close::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

/* -----------------------------------------------------------------
   Typography
   ----------------------------------------------------------------- */
.checkout-modal__title {
  margin: 0 0 .75rem;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
}

/* -----------------------------------------------------------------
   Form layout – using CSS Grid for the whole form.
   ----------------------------------------------------------------- */
.checkout-form {
  display: grid;
  gap: var(--spacing);
}

/* -----------------------------------------------------------------
   Section (fieldsets) styling
   ----------------------------------------------------------------- */
.checkout-section {
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

/* Enable backdrop blur only on desktop for performance */
@media (min-width: 769px) {
  .checkout-section {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

.checkout-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--glow-primary), var(--glow-accent));
  opacity: 0;
  transition: opacity var(--animation-speed) ease;
}

.checkout-section:hover::before {
  opacity: 1;
}

.checkout-section__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  padding: 0 .5rem;
  margin-left: .5rem;
  color: var(--color-primary);
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

.checkout-section__options {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------
   Radio label – make the clickable area larger.
   ----------------------------------------------------------------- */
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.radio-label input {
  margin-right: 0;
}

/* -----------------------------------------------------------------
   Form groups for address fields
   ----------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group label {
  margin-bottom: .25rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-control {
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--bg-surface);
  color: var(--primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  box-sizing: border-box;
}
.form-control:focus {
  outline: none;
  border-color: var(--blue-light);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* -----------------------------------------------------------------
   Required star – red colour for visual cue.
   ----------------------------------------------------------------- */
.required {
  color: var(--color-danger);
}

/* -----------------------------------------------------------------
   Payment instruction area – subtle visual cue.
   ----------------------------------------------------------------- */
.payment-instructions {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--bg-surface, #f8f9fa);
  border-left: 4px solid var(--color-success, #28a745);
  padding: .75rem;
  font-size: .95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* -----------------------------------------------------------------
   Action buttons – primary & secondary styles
   ----------------------------------------------------------------- */
.checkout-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn {
  cursor: pointer;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 4px 15px rgba(0,105,217,0.3);
}

.btn--primary:hover,
.btn--primary:focus {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 8px 25px rgba(0,105,217,0.4);
  transform: translateY(-2px);
}

.btn--secondary {
  background: rgba(108,117,125,0.1);
  color: var(--color-secondary);
  border: 1px solid rgba(108,117,125,0.3);
}

.btn--secondary:hover,
.btn--secondary:focus {
  background: rgba(108,117,125,0.2);
  border-color: var(--color-secondary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108,117,125,0.2);
}

/* -----------------------------------------------------------------
   Icon Styles – SVG mask icons for checkout modal
   ----------------------------------------------------------------- */
.checkout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
  flex-shrink: 0;
}

/* Close icon (X) */
.icon-close {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
}

/* Delivery/Truck icon */
.icon-delivery {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>');
}

/* Pickup/Store icon */
.icon-pickup {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>');
}

/* Address/Map pin icon */
.icon-address {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>');
}

/* Payment/Credit card icon */
.icon-payment {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>');
}

/* Cash/Money icon */
.icon-cash {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"></rect><circle cx="12" cy="12" r="2"></circle><path d="M6 12h.01M18 12h.01"></path></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="12" rx="2"></rect><circle cx="12" cy="12" r="2"></circle><path d="M6 12h.01M18 12h.01"></path></svg>');
}

/* Bank/Building icon */
.icon-bank {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18M5 21V7l8-4 8 4v14M8 21V11a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v10"></path></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18M5 21V7l8-4 8 4v14M8 21V11a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v10"></path></svg>');
}

/* Mobile/Phone icon */
.icon-mobile {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>');
}

/* Checkmark/Success icon */
.icon-check {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
}

/* Receipt/Proof icon */
.icon-receipt {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
}

/* Icon sizing variants */
.checkout-icon--sm { width: 16px; height: 16px; }
.checkout-icon--md { width: 20px; height: 20px; }
.checkout-icon--lg { width: 24px; height: 24px; }

/* Icon with text alignment */
.icon-with-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Button icons */
.btn .checkout-icon {
  width: 18px;
  height: 18px;
}

/* Cart icon for floating cart button */
.cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>');
}

/* Menu/Hamburger icon */
.menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>');
}

/* Dark mode adjustments for icons */
[data-theme="dark"] .checkout-icon {
  background-color: var(--primary, #fff);
}

[data-theme="dark"] .checkout-modal__close::before {
  background-color: var(--muted, #9ca3af);
}

[data-theme="dark"] .payment-instructions {
  background: rgba(255,255,255,0.05);
  border-left-color: var(--color-success, #28a745);
}


/* -----------------------------------------------------------------
   Responsive tweaks – make the modal full‑width on very small screens
   ----------------------------------------------------------------- */
@media (max-width: 480px) {
  .checkout-modal__dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
  }
  
  .checkout-icon {
    width: 18px;
    height: 18px;
  }
  
  .checkout-icon--lg {
    width: 20px;
    height: 20px;
  }
}