/* Checkout — Fignoc commerce theme (navy + coral) */
/* Border-box everywhere so full-width fields/cards never overflow with padding */
#figv8root,
#figv8root *,
#figv8root *::before,
#figv8root *::after { box-sizing: border-box; }

#figv8root {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: linear-gradient(180deg, #f0f4ff 0%, #f8fafc 40%, #fff 100%);
  padding: 1.5rem 1rem 2.5rem;
  min-height: 50vh;
  color: var(--commerce-navy, #0A2472);
  overflow-x: clip;
}

/* Media (map, images) must never push the layout wide */
#figv8root img,
#figv8root #checkoutDeliveryMap { max-width: 100%; }

.figv8-steps { display: flex; align-items: center; justify-content: center; margin: 0 auto 1.75rem; max-width: 1160px; gap: 0.3rem; flex-wrap: wrap; }
.figv8-step { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; }
.figv8-step-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
.figv8-step-line { width: 48px; height: 2px; background: #dde6f5; margin: 0 0.25rem; flex-shrink: 0; }

#figv8grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items: start; }

.figv8form-col { min-width: 0; }

.figv8summary-col { min-width: 0; }

.figv8sum-line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  font-size: 0.875rem;
}

.figv8sum-line-left {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.figv8sum-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.figv8sum-totals {
  border-top: 1.5px solid #e8ecf8;
  margin-top: 1rem;
  padding-top: 1rem;
}

.figv8sum-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.figv8sum-row--muted {
  color: #64748b;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.figv8sum-row--grand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--commerce-coral, #E63946);
  margin-bottom: 0;
}

.figv8back-cart {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--commerce-coral, #E63946);
  text-decoration: none;
  font-weight: 600;
}

.figv8summary-actions {
  margin-top: 1rem;
}

.figv8summary-actions .figv8place-btn {
  margin-top: 0;
}

.figv8-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(10, 36, 114, 0.1);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 36, 114, 0.08);
  margin-bottom: 1.25rem;
}

.figv8-card-head {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid #eef2ff;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(180deg, #fff 0%, #f8faff 100%);
}

.figv8-card-head h2 { font-size: 1rem; font-weight: 800; color: var(--commerce-navy, #0A2472); margin: 0; }
.figv8-card-body { padding: 1.25rem; }

.figv8label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--commerce-navy, #0A2472);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.figv8field-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #dde6f5;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 1rem;
}

.figv8field-wrap:focus-within {
  border-color: var(--commerce-navy, #0A2472);
  box-shadow: 0 0 0 4px rgba(10, 36, 114, 0.12);
}

.figv8field-ico {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--commerce-navy, #0A2472);
  border-right: 1px solid #eef2ff;
  background: #eef2ff;
  align-self: stretch;
}

.figv8input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0.78rem 0.9rem; font-size: 0.95rem; height: 48px; color: var(--commerce-navy, #0f172a); caret-color: var(--commerce-coral, #E63946); cursor: text; }
.figv8input::placeholder { color: #94a3b8; }

/* ─── Map address autocomplete dropdown ─── */
.cdm-suggest-host { position: relative; }
.cdm-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1000;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(10, 36, 114, 0.16);
  max-height: 280px;
  overflow-y: auto;
  padding: 0.25rem;
}
.cdm-suggest__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  font: inherit;
  color: #1e293b;
  transition: background 0.12s;
}
.cdm-suggest__item:hover {
  background: #f1f5f9;
}
.cdm-suggest__item:focus-visible {
  background: #f1f5f9;
  outline: 2px solid var(--commerce-navy, #0A2472);
  outline-offset: -2px;
}
.cdm-suggest__item i {
  color: var(--commerce-coral, #E63946);
  margin-top: 0.15rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.cdm-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.cdm-suggest__text strong { font-size: 0.88rem; font-weight: 700; }
.cdm-suggest__text small { font-size: 0.76rem; color: #64748b; }
.cdm-suggest__empty {
  padding: 0.75rem 0.8rem;
  font-size: 0.82rem;
  color: #64748b;
}

.figv8ta-wrap { display: flex; align-items: flex-start; background: #fff; border: 2px solid #dde6f5; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.figv8ta-wrap:focus-within { border-color: var(--commerce-navy, #0A2472); box-shadow: 0 0 0 4px rgba(10, 36, 114, 0.12); }
.figv8textarea { flex: 1; border: none; outline: none; background: transparent; padding: 0.78rem 0.9rem; min-height: 90px; resize: vertical; font-family: inherit; }

.figv8row2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.figv8pay-opt {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 2px solid #e8ecf8;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: all 0.18s;
}

.figv8pay-opt:hover { border-color: var(--commerce-navy, #0A2472); background: #f0f4ff; }
.figv8pay-opt input { accent-color: var(--commerce-coral, #E63946); }
.figv8pay-sel { border-color: var(--commerce-coral, #E63946) !important; background: #fff5f5 !important; }

.figv8fulfil-opt {
  flex: 1;
  min-width: 140px;
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  border: 2px solid #e8ecf8;
  cursor: pointer;
  transition: all 0.15s;
}

.figv8fulfil-opt.selected {
  border-color: var(--commerce-coral, #E63946);
  background: #fff5f5;
}

.figv8fulfil-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

#figv8summary {
  position: sticky;
  top: 1rem;
}

#figv8summary > .figv8-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(10, 36, 114, 0.1);
  box-shadow: 0 14px 40px rgba(10, 36, 114, 0.12);
  overflow: hidden;
  margin-bottom: 0;
}

#figv8summary .figv8-card-head {
  background: var(--commerce-navy, #0A2472);
  border-bottom: none;
}

#figv8summary .figv8-card-head h2 { color: #fff; }

.figv8sum-items { max-height: calc(100vh - 360px); overflow: auto; }

.figv8place-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--commerce-coral, #E63946), var(--commerce-coral-dark, #c72535));
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.2s;
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.35);
}

.figv8place-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(230, 57, 70, 0.45);
}

.figv8place-btn:active {
  transform: translateY(0);
}

.figv8-error { color: var(--commerce-coral, #E63946); font-size: 0.8rem; margin-top: -0.5rem; margin-bottom: 0.75rem; }

/* Logged-in customer: confirmed contact details with Edit */
.figv8-details-fields.is-collapsed { display: none; }
.figv8-confirmed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}
.figv8-confirmed__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.figv8-confirmed__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #15803d;
}
.figv8-confirmed__info strong { font-size: 0.95rem; color: #0f172a; overflow-wrap: anywhere; }
.figv8-confirmed__meta {
  font-size: 0.82rem;
  color: #475569;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.figv8-confirmed__edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid #86efac;
  background: #fff;
  color: #15803d;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.figv8-confirmed__edit:hover { background: #f0fdf4; }
.figv8-details-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
}
.figv8-details-note i { color: #94a3b8; margin-top: 0.1rem; }

.figv8guest-note {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  color: var(--commerce-navy, #0A2472);
}

.figv8guest-note a { color: var(--commerce-coral, #E63946); font-weight: 700; }

.figv8-step--done, .figv8-step--active { color: var(--commerce-navy, #0A2472); }
.figv8-step-dot--done, .figv8-step-dot--active { background: var(--commerce-navy, #0A2472); color: #fff; }
.figv8-step-line--done { background: var(--commerce-navy, #0A2472); }
.figv8-card-head-icon { width: 32px; height: 32px; border-radius: 8px; background: #eef2ff; display: flex; align-items: center; justify-content: center; color: var(--commerce-navy, #0A2472); }
.figv8-card-head-icon--accent { background: #fff0f1; color: var(--commerce-coral, #E63946); }

/* ─── Order summary header / collapsible toggle ─── */
.figv8sum-toggle {
  width: 100%;
  border: none;
  font: inherit;
  text-align: left;
  cursor: default;
  color: #fff;
}
.figv8sum-toggle__title {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.figv8sum-toggle__total {
  display: none;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}
.figv8sum-toggle__chev {
  display: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

/* On phones the summary collapses to "Order Summary · $total" */
@media (max-width: 860px) {
  .figv8sum-toggle { cursor: pointer; }
  .figv8sum-toggle__total,
  .figv8sum-toggle__chev { display: inline-flex; }
  #figv8summary .figv8sum-items { display: none; }
  #figv8summary.is-sum-open .figv8sum-items { display: block; }
  #figv8summary.is-sum-open .figv8sum-toggle__chev { transform: rotate(180deg); }
}

@media (max-width: 860px) {
  #figv8grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    display: flex;
    flex-direction: column;
  }

  .figv8summary-col {
    order: -1;
  }

  .figv8form-col {
    order: 1;
  }

  #figv8summary {
    position: static;
  }

  #figv8summary > .figv8-card {
    box-shadow: 0 8px 24px rgba(10, 36, 114, 0.08);
  }

  .figv8sum-items {
    max-height: none;
    overflow: visible;
  }

  .figv8-card {
    border-radius: 14px;
    margin-bottom: 1rem;
  }

  .figv8-card-body {
    padding: 1rem;
  }

  .figv8guest-note {
    font-size: 0.78rem;
    padding: 0.75rem 0.9rem;
  }

  .figv8-steps {
    margin-bottom: 1.25rem;
  }

  .figv8-step-line {
    width: 28px;
  }
}

@media (max-width: 540px) {
  #figv8root {
    padding: 1rem 0.75rem 2rem;
  }

  .figv8row2col { grid-template-columns: 1fr; }

  .figv8fulfil-opt {
    min-width: calc(50% - 0.5rem);
    flex: 1 1 calc(50% - 0.5rem);
  }

  .figv8pay-opt {
    padding: 0.75rem 0.85rem;
  }

  .figv8input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

/* ── Customer account (register / login / profile) ── */
.customer-auth {
  max-width: 480px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.customer-auth--compact {
  max-width: 400px;
  margin: 1.25rem auto 2rem;
}

.customer-auth--compact .customer-auth-card {
  padding: 1.35rem 1.15rem;
}

.customer-auth--wide {
  max-width: 720px;
}

.customer-auth-card {
  padding: 2rem 1.5rem;
}

.customer-auth-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--commerce-navy, #0A2472);
  margin: 0 0 0.25rem;
}

.customer-auth-sub {
  color: #64748b;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.customer-auth-sub--short {
  margin-bottom: 1rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.customer-auth-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.customer-auth-form .figv8-field {
  margin-bottom: 0.75rem;
}

.customer-auth-submit {
  width: 100%;
  margin-top: 0.35rem !important;
  padding: 0.85rem !important;
  font-size: 0.95rem !important;
}

.customer-auth-footer--muted {
  margin-top: 0.65rem !important;
  font-size: 0.8rem !important;
}

.customer-auth-footer--muted a {
  color: #64748b;
  font-weight: 500;
}

.customer-auth-order-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

.customer-auth-order-banner i {
  color: var(--commerce-navy, #0A2472);
  font-size: 1.1rem;
  margin-top: 0.15rem;
}

.customer-auth-order-banner strong {
  display: block;
  color: var(--commerce-navy, #0A2472);
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.customer-auth-order-banner span {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.customer-auth-owner-note {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: #9a3412;
}

.customer-auth-owner-note a {
  color: #c2410c;
  font-weight: 700;
}

.customer-auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: #64748b;
}

.customer-auth-footer a {
  color: var(--commerce-coral, #E63946);
  font-weight: 600;
}

.customer-auth-back {
  color: #64748b;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.customer-auth-back:hover {
  color: var(--commerce-navy, #0A2472);
}

.figv8-field {
  margin-bottom: 1rem;
}

.figv8-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--commerce-navy, #0A2472);
  margin-bottom: 0.35rem;
}

.figv8-field input,
.figv8-field select,
.figv8-field textarea {
  width: 100%;
  border: 2px solid #dde6f5;
  border-radius: 12px;
  padding: 0.78rem 0.9rem;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.figv8-field input:focus,
.figv8-field select:focus,
.figv8-field textarea:focus {
  outline: none;
  border-color: var(--commerce-navy, #0A2472);
  box-shadow: 0 0 0 4px rgba(10, 36, 114, 0.12);
}

.customer-auth-or {
  text-align: center;
  color: #94a3b8;
  font-size: 0.8rem;
  margin: 0.5rem 0;
}

.customer-auth-messages {
  margin-bottom: 1rem;
}

.customer-auth-msg {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.customer-auth-msg--success {
  background: #dcfce7;
  color: #166534;
}

.customer-auth-msg--error {
  background: #fee2e2;
  color: #991b1b;
}

.customer-auth-msg--info,
.customer-auth-msg--warning {
  background: #eff6ff;
  color: #1e40af;
}

.customer-auth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.customer-auth-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.customer-auth-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  padding: 0.6rem 1rem;
  text-decoration: none;
  font-size: 0.85rem;
  background: #f1f5f9;
  color: var(--commerce-navy, #0A2472);
  border-radius: 10px;
  font-weight: 700;
}

.customer-auth-btn-outline {
  border: 1.5px solid #e2e8f0;
  background: #fff;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: #64748b;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}

.customer-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
}

.customer-order-row:hover {
  background: #f8fafc;
}

.customer-order-row strong {
  color: var(--commerce-navy, #0A2472);
}

.customer-auth-card--verify {
  text-align: center;
}

.customer-verify-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: #eef2ff;
  color: var(--commerce-navy, #0A2472);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.customer-verify-code-input {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 1.25rem !important;
  font-weight: 700;
}

.customer-verify-resend {
  margin-top: 0.5rem;
  border: none;
  background: none;
  color: var(--commerce-coral, #E63946);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.25rem;
}

.customer-verify-resend:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  .customer-auth--compact {
    margin-top: 0.75rem;
    padding: 0 0.75rem;
  }

  .customer-auth--compact .customer-auth-card {
    padding: 1.15rem 1rem;
  }

  .customer-auth-title {
    font-size: 1.2rem;
  }

  .customer-auth-row2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* No-payment-for-fulfilment notice */
.figv8-nopay {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  font-size: 0.85rem;
  color: #9a3412;
  line-height: 1.5;
}
.figv8-nopay i { margin-top: 0.15rem; color: #ea580c; flex-shrink: 0; }

/* ─── Sticky mobile place-order bar (commercial-grade) ─── */
.figv8-sticky-bar { display: none; }

@media (max-width: 860px) {
  /* The sticky bar replaces the in-summary Place Order on mobile; keep
     the "Back to cart" link in the summary. */
  .figv8summary-actions .figv8place-btn { display: none; }

  .figv8-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 24px rgba(10, 36, 114, 0.12);
  }

  .figv8-sticky-bar__info {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  .figv8-sticky-bar__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
  }

  .figv8-sticky-bar__total {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--commerce-coral, #E63946);
  }

  /* Override the block .figv8place-btn layout for the bar */
  .figv8-sticky-bar .figv8-sticky-bar__cta {
    flex: 1;
    width: auto;
    margin-top: 0;
    padding: 0.85rem 1.1rem;
    font-size: 0.92rem;
    border-radius: 12px;
  }

  /* Clearance so the bar never hides the last field/notes */
  #figv8root { padding-bottom: 5.5rem; }

  /* Lift the WhatsApp FAB above the bar (no JS needed) */
  body.ax-storefront:has(.figv8-sticky-bar) .ax-wa-float {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}