/* ==========================================================================
   webshop_theme — checkout.css
   Covers the full ERPNext checkout flow:
     1. Order confirmation page  → /orders/<name>  (order.html)
     2. Stripe payment form      → /stripe-checkout (stripe_checkout.html + .css)
     3. Razorpay / GoCardless    → minimal loaders
   Every selector targets existing Frappe/Webshop/Payments classes.
   Depends on design tokens in theme.css.
   ========================================================================== */


/* ==========================================================================
   PART A — ORDER CONFIRMATION PAGE  (#page-order / .order-container)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A-1. Page shell
   -------------------------------------------------------------------------- */
#page-order {
  background-color: var(--bg-base) !important;
}

/* Order number heading (rendered in {% block header %}) */
#page-order h3.m-0 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-3xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
}

/* Breadcrumbs */
#page-order .breadcrumb-container a {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: color var(--transition-base) !important;
}

#page-order .breadcrumb-container a:hover {
  color: var(--accent) !important;
}


/* --------------------------------------------------------------------------
   A-2. Header actions row
        .page-header-actions-block > p > #pay-for-order  (Pay button)
        .btn.btn-sm.btn-secondary.dropdown-toggle        (Actions dropdown)
   -------------------------------------------------------------------------- */
#page-order .page-header-actions-block {
  display: flex;
  align-items: center;
}

/* "Pay AED X" primary CTA */
#pay-for-order {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-6) !important;
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--transition-base),
              box-shadow      var(--transition-base),
              transform       var(--duration-fast) var(--ease-out) !important;
}

#pay-for-order:hover {
  background-color: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-2px);
  color: var(--text-inverse) !important;
}

/* Actions dropdown toggle */
#page-order .btn-secondary {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base),
              color var(--transition-base),
              background-color var(--transition-base) !important;
}

#page-order .btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background-color: var(--accent-muted) !important;
}

#page-order .dropdown-menu {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

#page-order .dropdown-item {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default) !important;
}

#page-order .dropdown-item:hover {
  background-color: var(--accent-muted) !important;
  color: var(--accent) !important;
}


/* --------------------------------------------------------------------------
   A-3. Transaction subheading — date / validity row
   -------------------------------------------------------------------------- */
.transaction-subheading {
  margin-bottom: var(--space-2) !important;
}

.transaction-subheading .text-muted {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
}


/* --------------------------------------------------------------------------
   A-4. Status indicator pill
        .indicator-pill.blue / .darkgrey / .orange / .green / .red etc.
   -------------------------------------------------------------------------- */
.indicator-container {
  margin-bottom: var(--space-4) !important;
}

/* Override the light Frappe indicator backgrounds for dark theme */
.indicator-pill {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-full) !important;
  padding: var(--space-1) var(--space-3) !important;
}

/* Blue — Submitted / Processing */
.indicator-pill.blue {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
}

.indicator-pill.blue::before {
  background-color: #93c5fd !important;
}

/* Dark grey — Draft / Pending */
.indicator-pill.darkgrey,
.indicator-pill.grey,
.indicator-pill.gray {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
}

.indicator-pill.darkgrey::before,
.indicator-pill.grey::before,
.indicator-pill.gray::before {
  background-color: var(--text-muted) !important;
}

/* Green — Completed / Paid */
.indicator-pill.green {
  background-color: rgba(111, 207, 151, 0.12) !important;
  color: #6fcf97 !important;
}

.indicator-pill.green::before {
  background-color: #6fcf97 !important;
}

/* Orange — To Deliver */
.indicator-pill.orange {
  background-color: rgba(201, 168, 76, 0.12) !important;
  color: var(--accent) !important;
}

.indicator-pill.orange::before {
  background-color: var(--accent) !important;
}

/* Red — Cancelled / Overdue */
.indicator-pill.red {
  background-color: rgba(224, 82, 82, 0.1) !important;
  color: #e07f7f !important;
}

.indicator-pill.red::before {
  background-color: #e07f7f !important;
}

/* Yellow */
.indicator-pill.yellow {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #fbbf24 !important;
}

.indicator-pill.yellow::before {
  background-color: #fbbf24 !important;
}


/* --------------------------------------------------------------------------
   A-5. Order container — main card
   -------------------------------------------------------------------------- */
.order-container {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  box-shadow: var(--shadow-md) !important;
}


/* --------------------------------------------------------------------------
   A-6. Order items table
        .order-items.order-item-header — column header row
        .order-items                   — each item row
        .order-item-name, .order-rate, .order-image-col, .order-qty
   -------------------------------------------------------------------------- */

/* Column header row */
.order-items.order-item-header {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: var(--space-3) !important;
  margin-bottom: 0 !important;
}

/* Item rows */
.order-items:not(.order-item-header) {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-5) 0 !important;
  color: var(--text-primary) !important;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.order-items:not(.order-item-header):last-child {
  border-bottom: none !important;
}

.order-items:not(.order-item-header):hover {
  background-color: var(--bg-elevated) !important;
  border-radius: var(--radius-md);
}

/* Item name column */
.order-item-name {
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* Item code inside macro */
.item_name_and_description .col-xs-8 > *:first-child {
  font-family: var(--font-heading) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-primary) !important;
}

/* Item description */
.item-description {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-muted) !important;
  line-height: var(--leading-normal) !important;
  margin-top: var(--space-1) !important;
}

/* Qty label on mobile */
.order-qty {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-muted) !important;
  margin-top: var(--space-2) !important;
  display: block;
}

/* Rate column */
.order-rate {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
}

/* Order image wrapper */
.order-image {
  background-color: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

/* No-image in order */
.order-image .no-image-cart-item {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-md) !important;
  min-height: 80px !important;
  font-size: var(--text-xl) !important;
}


/* --------------------------------------------------------------------------
   A-7. Order taxes / totals block
        .order-taxes > .col-4.d-flex > .item-grand-total (label + value)
        .border-btm — separator line
   -------------------------------------------------------------------------- */
.order-taxes {
  color: var(--text-primary) !important;
}

.order-taxes .item-grand-total {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  padding: var(--space-2) 0 !important;
}

/* Grand Total row — font-weight-bold applied by template */
.order-taxes.font-weight-bold .item-grand-total {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  padding-top: var(--space-4) !important;
}

.border-btm {
  border-bottom: 1px solid var(--border-subtle) !important;
}


/* --------------------------------------------------------------------------
   A-8. Loyalty points panel
        Bootstrap .panel.panel-default > .panel-heading / .panel-body
        #loyalty-point-to-redeem (input), #loyalty-points-status (text)
   -------------------------------------------------------------------------- */
#page-order .panel.panel-default {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  margin-top: var(--space-6) !important;
}

#page-order .panel-heading {
  background-color: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: var(--space-4) var(--space-5) !important;
}

#page-order .panel-heading .address-title,
#page-order .panel-heading strong {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
}

#page-order .panel-body,
#page-order .panel-collapse .panel-body {
  background-color: var(--bg-surface) !important;
  padding: var(--space-5) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  color: var(--text-secondary) !important;
}

/* "Enter Loyalty Points" section heading */
#page-order .form-group .h6 {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: var(--space-2) !important;
}

/* Loyalty points input */
#loyalty-point-to-redeem {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-3) var(--space-4) !important;
  max-width: 200px;
  transition: border-color var(--transition-base),
              box-shadow   var(--transition-base) !important;
}

#loyalty-point-to-redeem:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  outline: none !important;
}

/* "Available Points: X" help text */
#page-order .help-box {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  margin-top: var(--space-2) !important;
}

/* Loyalty status feedback text (JS-injected) */
#loyalty-points-status {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: #6fcf97 !important;
  margin-top: var(--space-3) !important;
}


/* --------------------------------------------------------------------------
   A-9. Attachments section
   -------------------------------------------------------------------------- */
#page-order .order-item-table {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
  margin-top: var(--space-6) !important;
}

#page-order .order-item-table .h6.text-uppercase {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--text-muted) !important;
}

#page-order .order-item-table a {
  color: var(--accent) !important;
  font-size: var(--text-sm) !important;
  transition: color var(--transition-base) !important;
}

#page-order .order-item-table a:hover {
  color: var(--accent-light) !important;
}


/* --------------------------------------------------------------------------
   A-10. Terms & Conditions
   -------------------------------------------------------------------------- */
.terms-and-condition {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
  margin-top: var(--space-6) !important;
}

.terms-and-condition p {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-muted) !important;
  line-height: var(--leading-normal) !important;
}


/* ==========================================================================
   PART B — STRIPE PAYMENT FORM  (.stripe / #payment-section)
   ========================================================================== */

/* --------------------------------------------------------------------------
   B-1. Centering wrapper
   -------------------------------------------------------------------------- */
#payment-section {
  background-color: var(--bg-base) !important;
  min-height: 70vh !important;
  padding: var(--space-16) var(--space-8) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.stripe h4.text-center {
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--space-8) !important;
}

.stripe img {
  max-height: 60px;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-6);
}


/* --------------------------------------------------------------------------
   B-2. Form
   -------------------------------------------------------------------------- */
#payment-form {
  width: 100%;
  max-width: 480px;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-8) !important;
  box-shadow: var(--shadow-lg) !important;
  margin-top: var(--space-6) !important;
}


/* --------------------------------------------------------------------------
   B-3. Input groups (.group + label + .field)
   -------------------------------------------------------------------------- */
.stripe .group {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-4) !important;
  overflow: hidden;
  transition: border-color var(--transition-base) !important;
}

.stripe .group:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
}

.stripe .group label:not(:last-child) {
  border-bottom: 1px solid var(--border-subtle) !important;
}

.stripe label {
  color: var(--text-muted) !important;
  height: auto !important;
  line-height: 1 !important;
  margin-left: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-4) !important;
}

/* Label text — "Name", "Email", "Card Details" */
.stripe label > span {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  float: none !important;
  width: auto !important;
  min-width: 90px;
  flex-shrink: 0;
}

/* Text inputs (name, email) */
.stripe .field {
  background-color: transparent !important;
  background-clip: padding-box !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  border: none !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: var(--space-1) 0 !important;
  width: 100% !important;
  float: none !important;
  flex: 1;
  outline: none !important;
  box-shadow: none !important;
}

.stripe .field::-webkit-input-placeholder { color: var(--text-muted) !important; }
.stripe .field::-moz-placeholder          { color: var(--text-muted) !important; }
.stripe .field:-ms-input-placeholder      { color: var(--text-muted) !important; }


/* --------------------------------------------------------------------------
   B-4. Stripe card element
        Stripe injects an iframe; we style the container div
   -------------------------------------------------------------------------- */
.StripeElement {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  height: 44px !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base),
              box-shadow   var(--transition-base) !important;
}

.StripeElement--focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
}

.StripeElement--invalid {
  border-color: #e05252 !important;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.15) !important;
}

.StripeElement--webkit-autofill {
  background-color: var(--bg-elevated) !important;
}

/* Card errors message */
#card-errors {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: #e05252 !important;
  margin-top: var(--space-3) !important;
  clear: both;
}


/* --------------------------------------------------------------------------
   B-5. Submit / Pay button
        button.submit#submit inside #payment-form
   -------------------------------------------------------------------------- */
.stripe button[type="submit"],
.stripe button.submit,
#submit {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-4) var(--space-8) !important;
  height: auto !important;
  line-height: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin-top: var(--space-6) !important;
  cursor: pointer;
  transition: background-color var(--transition-base),
              box-shadow      var(--transition-base),
              transform       var(--duration-fast) var(--ease-out) !important;
}

.stripe button[type="submit"]:hover,
.stripe button.submit:hover,
#submit:hover {
  background-color: var(--accent-light) !important;
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.4) !important;
  transform: translateY(-2px);
}

.stripe button[type="submit"]:active,
#submit:active {
  background-color: var(--accent-dark) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.stripe button[type="submit"]:disabled,
#submit:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  transform: none !important;
}


/* --------------------------------------------------------------------------
   B-6. Outcome messages (success / error)
   -------------------------------------------------------------------------- */
.stripe .outcome {
  text-align: center;
  margin-top: var(--space-5) !important;
}

.stripe .outcome .error {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: #e05252 !important;
  background-color: rgba(224, 82, 82, 0.08) !important;
  border: 1px solid rgba(224, 82, 82, 0.25) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
}

.stripe .outcome .success {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: #6fcf97 !important;
  background-color: rgba(111, 207, 151, 0.08) !important;
  border: 1px solid rgba(111, 207, 151, 0.25) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
}


/* ==========================================================================
   PART C — RAZORPAY / GOCARDLESS LOADING SCREENS
   ========================================================================== */
.razorpay-loading,
.razorpay-confirming,
.gocardless-loading {
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.01em !important;
}

/* Animated loading dot */
.razorpay-loading::after,
.gocardless-loading::after {
  content: '…';
  animation: loading-dots 1.4s infinite;
}

@keyframes loading-dots {
  0%, 20%  { opacity: 0; }
  40%      { opacity: 1; }
  100%     { opacity: 0; }
}

/* Lead paragraph centering */
p.lead.text-center.centered,
p.lead.text-center {
  margin: var(--space-16) auto !important;
  display: flex;
  justify-content: center;
}


/* ==========================================================================
   PART D — SHARED FORM OVERRIDES (apply across all checkout pages)
   ========================================================================== */

/* --------------------------------------------------------------------------
   D-1. Generic form-control inputs on checkout pages
   -------------------------------------------------------------------------- */
#page-order .form-control,
#page-stripe-checkout .form-control {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  transition: border-color var(--transition-base),
              box-shadow   var(--transition-base) !important;
}

#page-order .form-control:focus,
#page-stripe-checkout .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  outline: none !important;
  background-color: var(--bg-elevated) !important;
}

#page-order .form-control::placeholder {
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   D-2. Address cards on the order page (same pattern as cart)
   -------------------------------------------------------------------------- */
#page-order .address-card {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
}

#page-order .address-card.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-accent) !important;
}

#page-order .address-card .card-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

#page-order .address-card .card-text {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: var(--text-secondary) !important;
  line-height: var(--leading-normal) !important;
}

#page-order .address-card .card-link {
  color: var(--accent) !important;
  font-size: var(--text-xs) !important;
  transition: color var(--transition-base) !important;
}

#page-order .address-card .card-link:hover {
  color: var(--accent-light) !important;
}

/* --------------------------------------------------------------------------
   D-3. Frappe dialog overrides (new address dialog from order page)
   -------------------------------------------------------------------------- */
.modal-content {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--text-primary) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-5) var(--space-6) !important;
}

.modal-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.modal-body {
  background-color: var(--bg-surface) !important;
  padding: var(--space-6) !important;
}

.modal-footer {
  border-top: 1px solid var(--border-subtle) !important;
  background-color: var(--bg-surface) !important;
  padding: var(--space-4) var(--space-6) !important;
}

/* Modal form inputs */
.modal .form-control {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  transition: border-color var(--transition-base),
              box-shadow   var(--transition-base) !important;
}

.modal .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  outline: none !important;
}

.modal .form-control::placeholder {
  color: var(--text-muted) !important;
}

.modal label,
.modal .control-label {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: var(--space-2) !important;
}

/* Modal primary action button */
.modal .btn-primary {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-6) !important;
  box-shadow: none !important;
  transition: background-color var(--transition-base),
              box-shadow      var(--transition-base) !important;
}

.modal .btn-primary:hover {
  background-color: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.35) !important;
}

/* Modal secondary / close button */
.modal .btn-default,
.modal .btn-secondary {
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-default) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-base),
              color var(--transition-base) !important;
}

.modal .btn-default:hover,
.modal .btn-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Modal close × */
.modal .close {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transition: color var(--transition-base) !important;
}

.modal .close:hover {
  color: var(--text-primary) !important;
}

/* Modal backdrop */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75) !important;
}


/* --------------------------------------------------------------------------
   D-4. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .order-container {
    padding: var(--space-5) !important;
  }

  #payment-section {
    padding: var(--space-8) var(--space-4) !important;
  }

  #payment-form {
    padding: var(--space-6) !important;
  }

  .stripe label {
    flex-direction: column !important;
    height: auto !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
  }

  .stripe label > span {
    min-width: unset !important;
  }

  .stripe .field {
    width: 100% !important;
  }

  .order-taxes .col-4 {
    width: 90% !important;
    max-width: 100% !important;
  }
}