/* ==========================================================================
   WRAPPER + BASE TYPOGRAPHY (Shopify-style, with Hebrew support)
   ========================================================================== */

.checkout-spa-wrapper {
  background: #f8f8f8;
  padding: 16px;

  /* Shopify-style system UI stack + Hebrew-capable fonts */
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    "Noto Sans Hebrew",
    "Rubik",
    Arial,
    sans-serif;

  font-size: 15px;
  line-height: 1.5;
  color: #111827;
}

/* Make sure all form controls inside inherit the same font */
.checkout-spa-wrapper,
.checkout-spa-wrapper input,
.checkout-spa-wrapper select,
.checkout-spa-wrapper textarea,
.checkout-spa-wrapper button {
  font-family: inherit;
}

/* Titles a bit bolder, Shopify-ish */
.checkout-card__title {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Step badge number uses same font & weight */
.checkout-step-badge {
  font-family: inherit;
  font-weight: 600;
}

/* ==========================================================================
   3-COL CHECKOUT GRID
   ========================================================================== */

/* Base grid; default behaves as LTR: CUSTOMER | SHIPPING | ORDER */
.checkout-spa-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr 1fr !important;
  gap: 16px;
  align-items: start;
  grid-template-areas: "customer shipping order" !important;
}

/* Semantic columns → named grid areas */
.order-column {
  grid-area: order !important;
}

.shipping-column {
  grid-area: shipping !important;
}

.customer-column {
  grid-area: customer !important;
}

/* RTL OVERRIDE:
 * Wrapper has dir="rtl", so we swap the areas:
 * ORDER | SHIPPING | CUSTOMER
 */
.checkout-spa-wrapper[dir="rtl"] .checkout-spa-grid {
  grid-template-areas: "order shipping customer" !important;
}

/* Each column inherits wrapper direction (so text is RTL for Hebrew, etc.) */
.checkout-spa-col {
  direction: inherit;
  min-width: 0;
}

/* Spacing inside columns */
.checkout-spa-col > * {
  margin-bottom: 16px;
}

/* Responsive: stack on narrow screens (logical order) */
@media (max-width: 1024px) {
  .checkout-spa-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "customer"
      "shipping"
      "order" !important;
  }
}

/* Optional actions row under grid (if used) */
.checkout-spa-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ==========================================================================
   ORDER SUMMARY – Modern 3-column layout
   ========================================================================== */

.checkout-spa-summary-card .checkout-spa-lineitem {
  display: grid !important;
  grid-template-columns: 80px minmax(0, 1fr) 110px !important; /* image | middle | total */
  gap: 12px !important;
  align-items: center !important;
}

.checkout-spa-summary-card .checkout-spa-lineitem-image {
  width: 80px !important;
  height: 80px !important;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-spa-summary-card .checkout-spa-lineitem-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.checkout-spa-summary-card .checkout-spa-lineitem-middle {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.4;
}

.checkout-spa-summary-card .checkout-spa-lineitem-total {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  text-align: end !important;
  white-space: nowrap;
}

/* RTL tweak: numbers align nicely with Hebrew text */
.checkout-spa-wrapper[dir="rtl"] .checkout-spa-summary-card .checkout-spa-lineitem-total {
  text-align: left !important;
}

/* Optional: small screens collapse to 2 columns */
@media (max-width: 640px) {
  .checkout-spa-lineitem {
    grid-template-columns: 64px 1fr; /* image | middle; total drops under middle */
  }
  .checkout-spa-lineitem-total {
    grid-column: 2 / 3;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

/* Optional: tighten gaps between stacked elements in the middle column */
.checkout-spa-lineitem-middle .li-parent {
  margin-bottom: 2px;
}
.checkout-spa-lineitem-middle .li-variation {
  margin-bottom: 6px;
}

/* ==========================================================================
   SHIPPING PANE CLEANUP
   ========================================================================== */

.martis-shipping-pane input.address-book-edit-button,
.martis-shipping-pane .address-book-edit-button {
  display: none !important;
}

.checkout-card--shipping-address .address-book-edit-button,
.checkout-card--shipping-address a.address-book-edit-button,
.checkout-card--shipping-address input.address-book-edit-button {
  display: none !important;
}


/* ==========================================================================
   FULL-SCREEN LOADING OVERLAY (address change)
   ========================================================================== */

#myyarn-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
  display: none; /* JS switches to flex when active */
  align-items: center;
  justify-content: center;
}

.myyarn-checkout-overlay-inner {
  text-align: center;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.myyarn-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #e0e0e0;
  border-top-color: #444;
  margin: 0 auto 0.75rem;
  animation: myyarn-spin 0.8s linear infinite;
}

.myyarn-checkout-overlay-text {
  font-size: 0.95rem;
  color: #333;
}

@keyframes myyarn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   GENERIC SPA CHECKOUT CARD
   ========================================================================== */

.checkout-card {
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.checkout-card--active {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* Card titles (for non-custom panes) */
.checkout-card h2,
.checkout-card h3,
.checkout-card .pane-title,
.checkout-card .fieldset-legend,
.checkout-card legend {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Order summary uses same card shell */
.checkout-spa-summary-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

/* ==========================================================================
   ACCOUNT CARD (martis_user_login / Account details)
   ========================================================================== */

.checkout-card--account {
  position: relative;
}

/* Header layout: badge + titles + status */
.checkout-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Shared "input" style for email + saved addresses */
.checkout-card--account input[type="email"],
.checkout-card--shipping-address select.myyarn-saved-shipping-select {
  width: 100%;
  border-radius: 6px;              /* slight rounded edges */
  border: 1px solid #d1d5db;
  background-color: #f3f4f6;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: none;
}

/* Make the select look more like a custom control */
.checkout-card--shipping-address select.myyarn-saved-shipping-select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-position: calc(100% - 0.85rem) 50%;
  background-repeat: no-repeat;
  /* you can add a custom SVG arrow later if you want */
}

.checkout-card--shipping-address .form-item-myyarn-saved-addresses > label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.checkout-step-badge {
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  background: #2ba9e0;
  color: #ffffff;
}

.checkout-card__titles {
  flex: 1 1 auto;
}

.checkout-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* Subtitle removed from markup; keep class harmless */
.checkout-card__subtitle {
  display: none;
}

/* Status (checkmark + label) */
.checkout-card__status {
  margin-inline-start: auto;
}

.checkout-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.checkout-status--success {
  color: #16a34a;
}

.checkout-status__icon {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Pure CSS checkmark inside the circle */
.checkout-status__icon::after {
  content: "";
  width: 0.45rem;
  height: 0.25rem;
  border: 2px solid currentColor;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

/* Body container */
.checkout-card__body {
  margin-top: 0.25rem;
}

/* Welcome line + email field */
.checkout-welcome {
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

.checkout-card__body .form-item {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.checkout-card__body .form-email,
.checkout-card__body .form-text {
  width: 100%;
}

/* Error messages inside the card */
.checkout-card__body .form-item--error-message {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

/* ==========================================================================
   RTL / LTR HANDLING FOR ACCOUNT HEADER + WELCOME
   ========================================================================== */

/* LTR: [badge] [titles] [status] */
.checkout-spa-wrapper[dir="ltr"] .checkout-card--account .checkout-card__header,
.checkout-spa-wrapper[dir="ltr"] .checkout-card--shipping-address .checkout-card__header {
  flex-direction: row;
}

.checkout-spa-wrapper[dir="ltr"] .checkout-card--account .checkout-step-badge,
.checkout-spa-wrapper[dir="ltr"] .checkout-card--shipping-address .checkout-step-badge {
  order: 1;
  margin-right: 0.25rem;
  margin-left: 0;
}

.checkout-spa-wrapper[dir="ltr"] .checkout-card--account .checkout-card__titles,
.checkout-spa-wrapper[dir="ltr"] .checkout-card--shipping-address .checkout-card__titles {
  order: 2;
  text-align: left;
}

.checkout-spa-wrapper[dir="ltr"] .checkout-card--account .checkout-card__status,
.checkout-spa-wrapper[dir="ltr"] .checkout-card--shipping-address .checkout-card__status {
  order: 3;
  margin-left: auto;
  margin-right: 0;
}

/* RTL: [titles] [badge] [status] → number sits to the RIGHT of the title */
.checkout-spa-wrapper[dir="rtl"] .checkout-card--account .checkout-card__header,
.checkout-spa-wrapper[dir="rtl"] .checkout-card--shipping-address .checkout-card__header {
  flex-direction: row-reverse;
}

.checkout-spa-wrapper[dir="rtl"] .checkout-card--account .checkout-card__titles,
.checkout-spa-wrapper[dir="rtl"] .checkout-card--shipping-address .checkout-card__titles {
  order: 1;
  text-align: right;
}

.checkout-spa-wrapper[dir="rtl"] .checkout-card--account .checkout-step-badge,
.checkout-spa-wrapper[dir="rtl"] .checkout-card--shipping-address .checkout-step-badge {
  order: 2;
  margin-left: 0;
  margin-right: 0.25rem;
}

.checkout-spa-wrapper[dir="rtl"] .checkout-card--account .checkout-card__status,
.checkout-spa-wrapper[dir="rtl"] .checkout-card--shipping-address .checkout-card__status {
  order: 3;
  margin-right: auto;
  margin-left: 0;
}


/* Welcome text alignment in RTL */
.checkout-spa-wrapper[dir="rtl"] .checkout-card--account .checkout-welcome {
  text-align: right;
  direction: rtl;
}

/* ==========================================================================
   RESPONSIVE BEHAVIOUR FOR CARDS
   ========================================================================== */

@media (max-width: 640px) {
  .checkout-card {
    padding: 1rem 1.1rem;
  }

  .checkout-card__header {
    align-items: flex-start;
  }

  .checkout-card__status {
    margin-top: 0.2rem;
  }
}

/* ========================================================================== */
/* Saved shipping dropdown – match account email box                          */
/* ========================================================================== */

.checkout-card--shipping-address .nice-select.myyarn-saved-shipping-select {
  display: block;
  width: 100% !important;

  border-radius: 6px !important;         /* slight rounded edges */
  border: 1px solid #d1d5db !important;

  padding: 0.6rem 0.75rem !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 0.9rem !important;
  font-weight: 400;

  box-shadow: none !important;
}

/* Text inside the control */
.checkout-card--shipping-address .nice-select.myyarn-saved-shipping-select .current {
  font-size: 0.9rem;
  color: #111827;
}

/* Arrow icon – subtle, similar to basic input with caret */
.checkout-card--shipping-address .nice-select.myyarn-saved-shipping-select:after {
  border-color: #6b7280 transparent transparent transparent; /* grey arrow */
  right: 0.85rem;
}

/* Dropdown list: full width under the control */
.checkout-card--shipping-address .nice-select.myyarn-saved-shipping-select .list {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* ========================================================================== */
/* Shipping address summary box (under saved-address dropdown)                */
/* ========================================================================== */

/* Wrapper around the dropdown + summary box */
.checkout-card--shipping-address .checkout-shipping-address-wrapper {
  width: 100%;
}

/* Saved-address dropdown (nice-select) – already styled previously */
.checkout-card--shipping-address .nice-select.myyarn-saved-shipping-select {
  display: block;
  width: 100% !important;
}

/* SHIPPING SUMMARY BOX */
.checkout-card--shipping-address .myyarn-shipping-address-summary {
  width: 100%;                    /* match dropdown width */
  box-sizing: border-box;         /* prevent overflow from padding */
  
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;          /* MATCH dropdown internal padding */
  
  border-radius: 12px;
  border: 1px solid #dbeafe;
  background-color: #eff6ff;
  
  position: relative;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #111827;

  padding-inline-end: 2.5rem;     /* room for the icon */
}

/* Pin icon */
.checkout-card--shipping-address .myyarn-shipping-address-summary::before {
  content: "";
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;

  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230059cc' d='M12 2.5a6.25 6.25 0 0 0-6.25 6.25c0 3.88 3.47 7.38 5.41 9.2.46.44 1.22.44 1.68 0 1.94-1.82 5.41-5.32 5.41-9.2A6.25 6.25 0 0 0 12 2.5Zm0 3a3.25 3.25 0 1 1 0 6.5 3.25 3.25 0 0 1 0-6.5Z'/%3E%3C/svg%3E");
}

/* ============================================================
 * RTL-ONLY COLUMN LAYOUT FIX
 * LTR stays exactly as Martis defines it.
 * In RTL we want: LEFT = customer, MIDDLE = shipping/payment,
 * RIGHT = order summary.
 * ============================================================ */

.checkout-spa-wrapper[dir="rtl"] .checkout-spa-grid {
  display: grid !important;
  /* Force physical left→right layout for the grid */
  direction: ltr !important;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas: "customer shipping order";
  column-gap: 24px;
  align-items: flex-start;
}

/* Make sure Martis floats don’t fight the grid in RTL */
.checkout-spa-wrapper[dir="rtl"] .checkout-spa-col {
  float: none !important;
  width: auto !important;
  clear: none !important;
  position: static !important;

  /* But keep content RTL inside each card */
  direction: rtl;
}

/* Map each logical column to its grid area in RTL */
.checkout-spa-wrapper[dir="rtl"] .customer-column { grid-area: customer; }
.checkout-spa-wrapper[dir="rtl"] .shipping-column { grid-area: shipping; }
.checkout-spa-wrapper[dir="rtl"] .order-column    { grid-area: order; }

/* Mobile: stack nicely in RTL too */
@media (max-width: 1024px) {
  .checkout-spa-wrapper[dir="rtl"] .checkout-spa-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "customer"
      "shipping"
      "order";
    row-gap: 16px;
  }
}

/* ============================================================
 * SHIPPING PANE – force dropdown + address card full width
 * ============================================================ */

/* 1) Saved-addresses select: full width like email input */
.checkout-card.checkout-card--shipping-address
  .form-item-shipping-information-myyarn-saved-addresses,
.checkout-card.checkout-card--shipping-address
  .form-item-shipping-information-myyarn-saved-addresses .select-wrapper,
.checkout-card.checkout-card--shipping-address
  .form-item-shipping-information-myyarn-saved-addresses
  .nice-select.myyarn-saved-shipping-select {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box;
}

/* 2) Wrapper that contains the rendered profile (blue card) */
.checkout-card.checkout-card--shipping-address
  [data-drupal-selector="edit-shipping-information-shipping-profile"] {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* 3) The blue address card itself */
.checkout-card.checkout-card--shipping-address
  .myyarn-shipping-address-summary {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;

  margin: 0.75rem 0 0 !important;  /* space under dropdown */
  padding: 1rem 1.25rem !important;

  border-radius: 16px;
  border: 1px solid #dbeafe;
  background-color: #eff6ff;

  position: relative;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #111827;

  padding-inline-end: 2.75rem;     /* room for pin icon */
}

/* 4) Pin icon inside the blue card */
.checkout-card.checkout-card--shipping-address
  .myyarn-shipping-address-summary::before {
  content: "";
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230059cc' d='M12 2.5a6.25 6.25 0 0 0-6.25 6.25c0 3.88 3.47 7.38 5.41 9.2.46.44 1.22.44 1.68 0 1.94-1.82 5.41-5.32 5.41-9.2A6.25 6.25 0 0 0 12 2.5Zm0 3a3.25 3.25 0 1 1 0 6.5 3.25 3.25 0 0 1 0-6.5Z'/%3E%3C/svg%3E");
}

/* Shipping options – hide the visual required asterisk */
.checkout-card--shipping-options .form-required::after,
.checkout-card--shipping-options .js-form-required::after {
  content: '' !important;
}

/* Make sure the label text itself is not red */
.checkout-card--shipping-options .form-required,
.checkout-card--shipping-options .js-form-required {
  color: inherit !important;
}

.checkout-card--shipping-options fieldset > legend {
  display: none;
}

/* =====================================================================
 * Shipping options – custom HTML from ShippingMethodsController
 * Goal: visually match Martis default radios.
 * =================================================================== */

/* The wrapper: keep Martis center alignment */
.checkout-card--shipping-options .myyarn-shipping-methods-list {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  text-align: center; /* same as original card */
}

/* One “row” per option: radio + text as a compact inline-flex block */
.checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option {
  display: inline-flex;          /* so width = content, not full card */
  align-items: center;
  justify-content: flex-start;
  margin: 12px 0;                /* vertical spacing between options */
}

/* RTL: text on the right, radio just to its left */
.checkout-spa-wrapper[dir="rtl"]
  .checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option {
  flex-direction: row-reverse;
}

/* LTR: text on the left, radio on the right */
.checkout-spa-wrapper[dir="ltr"]
  .checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option {
  flex-direction: row;
}

/* Radio: small gap from the text, no edge-hugging */
.checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option
  input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* RTL spacing: radio to the left of text */
.checkout-spa-wrapper[dir="rtl"]
  .checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option
  input[type="radio"] {
  margin-inline-start: 0;
  margin-inline-end: 8px;
}

/* LTR spacing: radio to the right of text */
.checkout-spa-wrapper[dir="ltr"]
  .checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option
  input[type="radio"] {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

/* Label uses the card’s default font and stacks title + price */
.checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option
  label {
  cursor: pointer;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.4;
  text-align: right; /* looks correct for Hebrew */
}

/* LTR alignment */
.checkout-spa-wrapper[dir="ltr"]
  .checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option
  label {
  text-align: left;
}

/* Title + price lines */
.checkout-card--shipping-options .myyarn-shipping-methods-list .method-label,
.checkout-card--shipping-options .myyarn-shipping-methods-list .method-price {
  display: block;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.checkout-card--shipping-options .myyarn-shipping-methods-list .method-price {
  margin-top: 2px;
}

/* Subtle hover */
.checkout-card--shipping-options
  .myyarn-shipping-methods-list
  .shipping-method-option:hover
  label {
  opacity: 0.9;
}

/* ========================================================================== */
/* Pane 1 (martis_user_login) – normalize header markup                       */
/* Make it look like the other checkout-card__header blocks                   */
/* ========================================================================== */

/* Strip Drupal's form-wrapper styling from the header container */
.checkout-spa-wrapper [data-drupal-selector="edit-martis-user-login-header"] {
  padding: 0;
  margin: 0 0 1rem 0; /* same bottom spacing as other headers */
  border: 0;
  background: transparent;
}

/* Ensure it still behaves like our flex header */
.checkout-spa-wrapper [data-drupal-selector="edit-martis-user-login-header"] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Strip Drupal form-wrapper styling from the inner titles container */
.checkout-spa-wrapper [data-drupal-selector="edit-martis-user-login-header-titles"] {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

/* Optional: if Drupal adds display:block that causes weird spacing,
   force it to behave like the other .checkout-card__titles */
.checkout-spa-wrapper [data-drupal-selector="edit-martis-user-login-header-titles"] {
  flex: 1 1 auto;
}

/* ========================================================================== */
/* Pane 1 (martis_user_login) – remove fieldset's default top space          */
/* ========================================================================== */

.checkout-spa-wrapper fieldset.martis-user-login-pane.checkout-card {
  /* Kill the browser fieldset border and margin so it behaves like a <div> card */
  border: 0;
  margin: 0 0 1rem 0;  /* same bottom space as .checkout-card */
  padding: 1.25rem 1.5rem; /* keep the normal card padding (already used elsewhere) */
}

/* Ensure the inner wrapper doesn't reintroduce top spacing */
.checkout-spa-wrapper fieldset.martis-user-login-pane.checkout-card > .fieldset-wrapper {
  margin: 0;
  padding: 0;
}

/* ========================================================================== */
/* Pane 1 (martis_user_login) – remove visual space from the legend          */
/* ========================================================================== */

.checkout-spa-wrapper fieldset.martis-user-login-pane.checkout-card > legend {
  padding: 0;
  margin: 0;
  border: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
/* Anonymous pane 1: remove legend visual space inside account card */
.checkout-card--account fieldset.checkout-pane-contact-information > legend {
  margin: 0;
  padding: 0;
  border: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
/* =============================================================================
   Anonymous pane 1 – email input should NOT have background fill
   ============================================================================= */

.checkout-card--account fieldset.checkout-pane-contact-information input[type="email"] {
  background-color: #ffffff !important;   /* plain white */
  border-color: #d1d5db;                  /* keep consistent border */
  color: #111827;
}
/* ============================================================================
   Shipping + Billing Address Inputs
   Unified Shopify-style input fields
   Works for both anonymous and logged-in users
   ============================================================================ */

.checkout-card--shipping-address input.form-text,
.checkout-card--shipping-address input.form-tel,
.checkout-card--shipping-address input.form-email,
.checkout-card--shipping-address select.form-select,
.checkout-card--billing-address input.form-text,
.checkout-card--billing-address input.form-tel,
.checkout-card--billing-address input.form-email,
.checkout-card--billing-address select.form-select {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 0.6rem 0.75rem !important;
  width: 100% !important;
  box-shadow: none !important;
  line-height: 1.4;
  font-size: 0.9rem;
  color: #111827;
}

/* Avoid styling shipping rates, radios, checkboxes, etc. */
.checkout-card--shipping-address input[type="radio"],
.checkout-card--shipping-address input[type="checkbox"],
.checkout-card--billing-address input[type="radio"],
.checkout-card--billing-address input[type="checkbox"] {
  background: initial !important;
  border: initial !important;
  padding: initial !important;
}

/* Fix select height consistency */
.checkout-card--shipping-address select.form-select,
.checkout-card--billing-address select.form-select {
  height: auto !important;
  min-height: 38px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* ============================================================================
   Shipping + Billing – country dropdown = same as text inputs
   ============================================================================ */

/* Native <select> element */
.checkout-card--shipping-address select.country,
.checkout-card--billing-address select.country {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 0.6rem 0.75rem !important;
  width: 100% !important;
  box-shadow: none !important;
  line-height: 1.4;
  font-size: 0.9rem;
  color: #111827;

  height: auto !important;
  min-height: 38px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* nice-select wrapper for the country select (the rounded pill you see) */
.checkout-card--shipping-address .nice-select.country,
.checkout-card--billing-address .nice-select.country {
  border-radius: 6px !important;         /* slight rounded edges */
  border: 1px solid #d1d5db !important;

}

/* Text inside the nice-select country control */
.checkout-card--shipping-address .nice-select.country .current,
.checkout-card--billing-address .nice-select.country .current {
  font-size: 0.9rem;
  color: #111827;
}

/* -------------------------------------------------------
 * Fix address inline rows (city + postal code) in RTL
 * ------------------------------------------------------- */

/* Make the container itself RTL */
[dir="rtl"] .commerce-checkout-flow .address-container-inline {
  direction: rtl !important;
  text-align: right;
}

/* Flip the children so they sit on the right side */
[dir="rtl"] .commerce-checkout-flow .address-container-inline > .form-item {
  float: right !important;      /* instead of float:left from theme */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Optional: keep them as two equal columns */
[dir="rtl"] .commerce-checkout-flow .address-container-inline > .form-item {
  width: 50% !important;
  box-sizing: border-box;
}
/* -------------------------------------------------------
 * Add spacing between the two inline address fields (RTL)
 * ------------------------------------------------------- */
[dir="rtl"] .commerce-checkout-flow .address-container-inline {
  gap: 12px !important;        /* modern browsers: easiest clean solution */
}

/* Fallback for older browsers without flex-gap support */
[dir="rtl"] .commerce-checkout-flow .address-container-inline > .form-item:not(:last-child) {
  margin-left: 12px !important;
}

.myyarn-order-summary .myyarn-summary-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  font-size: 14px;
}

.myyarn-summary-row--grand {
  font-weight: 700;
  font-size: 16px;
}

.myyarn-summary-row--hidden {
  display: none;
}

.myyarn-summary-row--discount .myyarn-summary-value {
  color: #0a0; /* or keep default and prefix with "-" in JS */
}

/* ----------------------------------------------------------
   COUPON BLOCK WRAPPER
---------------------------------------------------------- */
.myyarn-order-summary__coupon {
  margin-top: 12px;
  text-align: right;
}

.checkout-spa-wrapper[dir="rtl"] .myyarn-order-summary__coupon {
  text-align: left;
}

/* ----------------------------------------------------------
   "Have a coupon?" toggle link
---------------------------------------------------------- */
.myyarn-coupon-toggle-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: #0052cc;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
  text-decoration: underline;
  display: inline-block;
  width: 100%;
  pointer-events: auto;   /* <-- ensure clickable */
  position: relative;     /* <-- prevents overlap issues */
  z-index: 10;
}


.checkout-spa-wrapper[dir="rtl"] .myyarn-coupon-toggle-link {
  text-align: right;
  direction: rtl;
  flex-direction: row;
  justify-content: flex-start;
}

.checkout-spa-wrapper[dir="ltr"] .myyarn-coupon-toggle-link {
  text-align: left;
  direction: ltr;
  flex-direction: row;
  justify-content: flex-start;
}

/* Small coupon icon */
.myyarn-coupon-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

/* Remove underline from the icon only */
.myyarn-coupon-toggle-link .myyarn-coupon-toggle-icon {
  text-decoration: none !important;
  display: inline-block;
}


/* ----------------------------------------------------------
   Coupon form container
---------------------------------------------------------- */
.myyarn-coupon-form {
  margin-top: 8px;
}

.myyarn-coupon-form--hidden {
  display: none;
}

/* ----------------------------------------------------------
   ROW: Input + Apply (same row)
---------------------------------------------------------- */
.myyarn-coupon-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.myyarn-coupon-code {
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  min-width: 120px;
}

/* Apply button */
.myyarn-coupon-apply {
  min-width: 90px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #aaa;
  background: #333;
  color: #fff;
  cursor: not-allowed;
  white-space: nowrap;
}

.myyarn-coupon-apply:not(:disabled) {
  background: #333;
  border-color: #333;
  cursor: pointer;
}

/* ----------------------------------------------------------
   CANCEL BUTTON ON ITS OWN ROW
---------------------------------------------------------- */

/* Wrapper row for cancel */
.myyarn-coupon-cancel-row {
  margin-top: 4px;
}

/* Basic cancel style */
.myyarn-coupon-cancel {
  background: none;
  border: 0;
  color: #666;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

/* RTL: Cancel aligns LEFT */
.checkout-spa-wrapper[dir="rtl"] .myyarn-coupon-cancel-row {
  text-align: left;
}

/* LTR: Cancel aligns RIGHT */
.checkout-spa-wrapper[dir="ltr"] .myyarn-coupon-cancel-row {
  text-align: right;
}

/* ----------------------------------------------------------
   ERROR MESSAGE
---------------------------------------------------------- */
.myyarn-coupon-error {
  margin-top: 4px;
  font-size: 0.9em;
  color: #c0392b;
  min-height: 16px;
}
/* ----------------------------------------------------------
   ERROR MESSAGE – RTL/LTR aware
---------------------------------------------------------- */
.myyarn-coupon-error {
  margin-top: 4px;
  font-size: 0.9em;
  color: #c0392b;
  min-height: 16px;
  line-height: 1.3;
  direction: inherit;      /* MATCH THE PAGE DIR */
  text-align: start;       /* auto: left for LTR, right for RTL */
  display: block;
  width: 100%;
}

/* Explicit RTL correction */
.checkout-spa-wrapper[dir="rtl"] .myyarn-coupon-error {
  text-align: right;
}

/* Explicit LTR correction */
.checkout-spa-wrapper[dir="ltr"] .myyarn-coupon-error {
  text-align: left;
}

/* ================================
   Payment pane: remove extra gap
   between title and radio options
   ================================ */

/* Kill outer payment fieldset spacing/border */
.checkout-card--payment .checkout-card__body > fieldset.checkout-pane-payment-information.form-wrapper {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Remove top padding / divider inside the outer fieldset wrapper */
.checkout-card--payment .checkout-pane-payment-information > .fieldset-wrapper {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Inner fieldset that wraps the radios (edit-payment-information-payment-method--wrapper) */
.checkout-card--payment #edit-payment-information-payment-method--wrapper {
  margin: 0;
  padding: 0;
  border: 0;
}

.checkout-card--payment #edit-payment-information-payment-method--wrapper > .fieldset-wrapper {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Payment card: remove space from hidden legends */
.checkout-card--payment fieldset > legend {
  display: none;
  margin: 0;
  padding: 0;
  height: 0;
}

/* (Optional) tighten first radio a bit more */
.checkout-card--payment .radios {
  margin-top: 0;
}

/* Order comments placeholder color */
.checkout-card--order-comments textarea::placeholder {
  color: #9aa0a6;
  opacity: 1;       /* ensure full visibility in Firefox */
}

/* For RTL support (not required but recommended) */
[dir="rtl"] .checkout-card--order-comments textarea::placeholder {
  text-align: right;
}

/* Summary card tweaks */
.checkout-card--summary .checkout-card__body {
  padding-top: 0.25rem;
}

/* Space + top border between line items and the mini summary */
.checkout-card--summary .myyarn-order-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

/* Label/value emphasis */
.myyarn-order-summary .myyarn-summary-label {
  color: #4b5563;
}

.myyarn-order-summary .myyarn-summary-value {
  font-weight: 500;
}

.myyarn-summary-row--grand .myyarn-summary-label,
.myyarn-summary-row--grand .myyarn-summary-value {
  font-size: 1rem;
  font-weight: 700;
}

/* Divider between rows (optional, subtle) */
.myyarn-summary-divider {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 8px 0;
}

/* ==========================================================================
   ORDER SUMMARY – Shopify-style 3-column line items
   ========================================================================== */

/* One row per line item:
 * col 1: image
 * col 2: title / variant / qty / unit price
 * col 3: line total
 */
.checkout-card--summary .checkout-spa-lineitem {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) 90px !important;
  gap: 12px !important;
  align-items: center !important;
  padding-block: 8px;
}

/* Image column */
.checkout-card--summary .checkout-spa-lineitem-image {
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-card--summary .checkout-spa-lineitem-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Middle column: stack text nicely */
.checkout-card--summary .checkout-spa-lineitem-middle {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  line-height: 1.35;
}

/* 1) Product name + variation on the same line */
.checkout-card--summary .checkout-spa-lineitem-middle .li-parent,
.checkout-card--summary .checkout-spa-lineitem-middle .li-variation {
  display: inline;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
}

/* Add " - " between name and variation */
.checkout-card--summary .checkout-spa-lineitem-middle .li-variation::before {
  content: " - ";
}

/* Make sure they sit as the first row */
.checkout-card--summary .checkout-spa-lineitem-middle .li-parent { order: 1; }
.checkout-card--summary .checkout-spa-lineitem-middle .li-variation { order: 2; }

/* 2) Qty row (second line) */
.checkout-card--summary .checkout-spa-lineitem-middle .li-qty {
  order: 3;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 2px;
}

/* 3) Unit price row (third line) */
.checkout-card--summary .checkout-spa-lineitem-middle .li-unit {
  order: 4;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 2px;
}

/* Right column: line total */
.checkout-card--summary .checkout-spa-lineitem-total {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.95rem;
  color: #111827;
  text-align: end;
}

/* RTL tweak: still keep total visually at the outer edge,
 * but number + currency follow the locale formatting.
 */
.checkout-spa-wrapper[dir="rtl"]
  .checkout-card--summary .checkout-spa-lineitem-total {
  justify-content: flex-start;
  text-align: start;
}

/* Subtle separator between items */
.checkout-card--summary .checkout-spa-lineitem:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
}

/* Responsive: compact layout on narrow screens */
@media (max-width: 640px) {
  .checkout-card--summary .checkout-spa-lineitem {
    grid-template-columns: 60px minmax(0, 1fr) 72px !important;
    gap: 8px !important;
  }

  .checkout-card--summary .checkout-spa-lineitem-image {
    width: 60px !important;
    height: 60px !important;
  }

  .checkout-card--summary .checkout-spa-lineitem-total {
    font-size: 0.9rem;
  }
}
/* Make the inner fieldset behave like a plain div */
.checkout-card--summary fieldset.checkout-pane.commerce-checkout-pane {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Completely remove the legend so no extra vertical space */
.checkout-card--summary fieldset.checkout-pane.commerce-checkout-pane > legend {
  display: none;
  margin: 0;
  padding: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

/* Also neutralize Martis' .fieldset-legend styling inside the summary card */
.checkout-card--summary .fieldset-legend {
  display: none;
  margin: 0;
  padding: 0;
}

.myyarn-summary-value {
  direction: ltr;        /* treat the amount itself as LTR text */
  unicode-bidi: embed;   /* isolate from surrounding RTL */
}

.checkout-card--actions {
  padding: 32px 24px 40px;
  text-align: center;
}

.checkout-card--actions .checkout-actions-primary {
  margin-bottom: 12px;
}

/* Big blue full-width button */
.checkout-card--actions .myyarn-pay-now-btn {
  display: block;
  width: 100%;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
  cursor: pointer;

  background-color: #005bbb; /* adjust to your brand blue */
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* ===== Actions Card (Pay Now) ===== */
.checkout-card--actions {
  padding: 26px 22px 30px;
  text-align: center;
}

/* Ensure the wrapper doesn't constrain the button */
.checkout-actions-primary {
  width: 100%;
}

/* The Pay Now button itself */
.checkout-card--actions .myyarn-pay-now-btn,
.checkout-card--actions input.myyarn-pay-now-btn,
.checkout-card--actions button.myyarn-pay-now-btn {
  display: block;
  width: 100%;
  max-width: 980px;              /* gives the “big bar” look */
  margin: 0 auto;
  padding: 20px 26px;

  border: 0;
  border-radius: 18px;           /* pill-ish like screenshot */
  cursor: pointer;

  font-size: 16px;               /* match screenshot */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.5px;
  background: #2ba9ee;           /* your blue (adjust if needed) */
  color: #fff;

  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

.checkout-card--actions .myyarn-pay-now-btn:hover {
  filter: brightness(1.02);
  box-shadow: 0 12px 22px rgba(0,0,0,.20);
}

.checkout-card--actions .myyarn-pay-now-btn:active {
  transform: translateY(1px);
  box-shadow: 0 8px 14px rgba(0,0,0,.16);
}

.checkout-card--actions .myyarn-pay-now-btn:focus {
  outline: none;
}

.checkout-card--actions .myyarn-pay-now-btn:focus-visible {
  outline: 3px solid rgba(31,79,214,.35);
  outline-offset: 3px;
}

/* “SECURE CHECKOUT” note under the button */
.checkout-actions-note {
  margin-top: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(0,0,0,.35);
}

/* Responsive: keep it nice on smaller screens */
@media (max-width: 768px) {
  .checkout-card--actions {
    padding: 18px 14px 22px;
  }

  .checkout-card--actions .myyarn-pay-now-btn {
    font-size: 28px;
    padding: 16px 18px;
    border-radius: 16px;
  }

  .checkout-actions-note {
    margin-top: 18px;
    font-size: 16px;
    letter-spacing: 3px;
  }
}

/* Use the same font as the rest of the page */
.checkout-card--actions .myyarn-pay-now-btn {
  font-family: inherit;
}

/* Disabled (shown but not clickable) */
.checkout-card--actions .myyarn-pay-now-btn:disabled,
.checkout-card--actions .myyarn-pay-now-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
  filter: grayscale(0.1);
}

/* Hide duplicate total line in checkout */
#edit-review-martis-order-summary-pane-totals {
  display: none !important;
}

/* ==========================================
   CHECKOUT COMPLETION PAGE (Shopify-style)
   ========================================== */

.checkout-completion-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.completion-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Success Icon */
.completion-success-icon {
  text-align: center;
  margin-bottom: 20px;
}

/* Order Number */
.completion-order-number {
  text-align: center;
  font-size: 14px;
  color: #6B7280;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Heading */
.completion-heading {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px 0;
}

.completion-subheading {
  text-align: center;
  font-size: 18px;
  color: #374151;
}

/* Progress Tracker */
.completion-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.progress-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
}

.progress-step--active .progress-icon {
  background: #2563EB;
  color: white;
}

.progress-label {
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
}

.progress-step--active .progress-label {
  color: #111827;
  font-weight: 600;
}

.progress-line {
  flex: 1;
  height: 2px;
  background: #E5E7EB;
  margin: 0 12px;
  max-width: 120px;
}

/* Content Grid – single column (full width) */
.completion-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}


@media (max-width: 768px) {
  .completion-content-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.completion-card {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}

.completion-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px 0;
}

.completion-card-value {
  font-size: 15px;
  color: #374151;
  margin-bottom: 16px;
}

.completion-address {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}

.completion-address div {
  margin-bottom: 4px;
}

/* Info Box */
.completion-info-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: #EFF6FF;
  border-radius: 6px;
  margin-top: 16px;
}

.completion-info-box svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.completion-info-box span {
  font-size: 14px;
  color: #1E40AF;
  line-height: 1.5;
}

/* Summary Card */
.completion-summary-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Next steps card (matches screenshot light blue-gray surface) */
.completion-card--next-steps {
  background: #f3f7ff;        /* light blue-gray */
  border-color: #e6eefc;
}

/* Header: icon + title */
.completion-card--next-steps .next-steps-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.completion-card--next-steps .next-steps-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eaf2ff;
  color: #2563eb;
}

.completion-card--next-steps .next-steps-header__title {
  margin: 0;
}

/* 3 columns */
.completion-card--next-steps .next-steps-grid {
  display: flex;
  gap: 28px;
}

/* Each item */
.completion-card--next-steps .next-step {
  flex: 1 1 0;
}

/* Icon tile (white rounded square with shadow) */
.completion-card--next-steps .next-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  color: #2563eb;
  margin-bottom: 14px;
}

/* Text */
.completion-card--next-steps .next-step__title {
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 8px 0;
  text-align: start; /* RTL/LTR safe */
}

.completion-card--next-steps .next-step__text {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  text-align: start; /* RTL/LTR safe */
}

/* RTL: reverse the 3 columns so it reads naturally right-to-left */
[dir="rtl"] .completion-card--next-steps .next-steps-grid {
  flex-direction: row-reverse;
}

/* Responsive: stack */
@media (max-width: 900px) {
  .completion-card--next-steps .next-steps-grid {
    flex-direction: column;
    gap: 18px;
  }
  [dir="rtl"] .completion-card--next-steps .next-steps-grid {
    flex-direction: column;
  }
}


/* RTL Support */
[dir="rtl"] .completion-info-box {
  flex-direction: row-reverse;
}

[dir="rtl"] .rewards-link svg {
  transform: rotate(180deg);
}

/* Make order number visually identical to confirmation line */
.completion-order-number,
.completion-order-number p {
  font-size: 1.125rem;
  font-weight: 400;
  color: #374151; 
  line-height: 1.6;
  margin-top: 0.25rem;
  text-align: center;
}

/* Ensure "What's next" card uses the same typography as the rest of the page */
.completion-card--next-steps,
.completion-card--next-steps * {
  font-family: inherit;
}

/* Make "What's next" typography use the same font system as the Thank You header */
.completion-card--next-steps {
  font-family: inherit; /* already inherited, but explicit */
  color: #111827;
}

/* Section title: same font + weight logic as hero, scaled down */
.completion-card--next-steps .completion-card-title {
  font-size: 24px;     /* scaled-down hero */
  font-weight: 700;    /* SAME as .completion-heading */
  letter-spacing: 0;  /* match hero */
}

/* Step titles: same weight family, smaller */
.completion-card--next-steps .next-step__title {
  font-size: 18px;
  font-weight: 700;    /* same weight system */
  color: #111827;
}

/* Step text: same body font as rest of page */
.completion-card--next-steps .next-step__text {
  font-size: 15px;
  font-weight: 400;
  color: #374151;
}

/* ==========================================================================
   PICKUP POINT SELECTOR PANE
   ========================================================================== */

/* Hide by default - show when pickup is selected */
.checkout-card--pickup-point {
  display: none;
  background: #ffffff !important;
}

.checkout-card--pickup-point.show-pane {
  display: block;
}

/* Remove default fieldset styling */
.checkout-card--pickup-point fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.checkout-card--pickup-point fieldset > legend {
  display: none;
}

/* Vertical layout container */
.checkout-card--pickup-point .pickup-selector-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff !important;
}

/* Selectors section */
.checkout-card--pickup-point .pickup-selectors {
  order: 1;
  width: 100%;
}

.checkout-card--pickup-point .pickup-selectors .form-item {
  width: 100%;
}

.checkout-card--pickup-point .form-item label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  display: block;
}

.checkout-card--pickup-point #pickup-locations-wrapper {
  width: 100%;
}

/* Native select elements (hidden by nice-select) */
.checkout-card--pickup-point .pickup-city-select,
.checkout-card--pickup-point .pickup-location-select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #111827;
}

/* Nice-select styling (matches saved address dropdown) */
.checkout-card--pickup-point .nice-select.pickup-city-select,
.checkout-card--pickup-point .nice-select.pickup-location-select {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  border-radius: 6px !important;
  border: 1px solid #d1d5db !important;
  padding: 0.6rem 0.75rem !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 0.9rem !important;
  font-weight: 400;
  box-shadow: none !important;
  background: white;
}

.checkout-card--pickup-point .nice-select.pickup-city-select .current,
.checkout-card--pickup-point .nice-select.pickup-location-select .current {
  font-size: 0.9rem;
  color: #111827;
}

.checkout-card--pickup-point .nice-select.pickup-city-select:after,
.checkout-card--pickup-point .nice-select.pickup-location-select:after {
  border-color: #6b7280 transparent transparent transparent;
  right: 0.85rem;
}

.checkout-card--pickup-point .nice-select.pickup-city-select .list,
.checkout-card--pickup-point .nice-select.pickup-location-select .list {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* Details box (blue card - matches shipping address summary) */
.checkout-card--pickup-point .pickup-details-box {
  order: 2;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  background-color: #eff6ff;
  min-height: 150px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #111827;
}

.checkout-card--pickup-point .pickup-details-box > div:only-child {
  text-align: center;
  color: #111827;
}

/* Point details inside the blue box */
.checkout-card--pickup-point .pickup-details-box .pickup-point-details {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
}

.checkout-card--pickup-point .pickup-point-details .pickup-detail-row {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.checkout-card--pickup-point .pickup-point-details .pickup-detail-hours {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #6b7280;
}

/* RTL support */
[dir="rtl"] .checkout-card--pickup-point .pickup-point-details {
  text-align: right;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .checkout-card--pickup-point .pickup-selector-container {
    gap: 12px;
  }
}

/* Hide step indicators on payment step */
.checkout-step--payment .checkout-progress {
  display: none;
}

/* Make payment step feel like same page */
.checkout-step--payment {
  padding-top: 0;
  margin-top: -20px;
}

/* Center Smart Buttons */
.checkout-step--payment .paypal-buttons {
  max-width: 500px;
  margin: 20px auto;
}

/* Hide step 2 header/progress - make it feel like same page */
.checkout-step-id--payment .checkout-progress {
  display: none !important;
}

.checkout-step-id--payment {
  padding-top: 0;
  margin-top: -20px;
}

/* Make payment process appear inline */
.checkout-step-id--payment .checkout-pane-payment-process {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Hide PayPal by default */
[data-myyarn-paypal-process],
#edit-payment-information-paypal-smart-payment-buttons {
  display: none;
}

/* Active state when PayPal selected (JS adds this class) */
[data-myyarn-paypal-process].myyarn-paypal-active,
#edit-payment-information-paypal-smart-payment-buttons.myyarn-paypal-active {
  display: block;
  position: relative;
  left: 0;
  visibility: visible;
  pointer-events: auto;
}

/* Disabled state - must come AFTER active state */
.myyarn-paypal-disabled,
.myyarn-paypal-active .myyarn-paypal-disabled,
#paypal-buttons-container.myyarn-paypal-disabled {
  pointer-events: none !important;
  opacity: 0.5;
  cursor: not-allowed;
}

/* When PayPal is active, bring it back on-screen */
[data-myyarn-paypal-process].myyarn-paypal-active {
  position: static;
  left: auto;
  visibility: visible;
  pointer-events: auto;
}

/* Hide native submit when PayPal active */
[data-myyarn-native-actions].myyarn-hide-native {
  display: none;
}

/* Force hide PayPal on step 1 by default */
.checkout-step-id--order-information [data-myyarn-paypal-process],
.checkout-step-id--order-information .paypal-buttons-container {
  display: none !important;
}

.paypal-buttons-container.myyarn-paypal-disabled::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  z-index: 10;
}

.payment-method-instructions {
  margin: 10px 0 10px 25px;
  padding: 10px 15px;
  background: #f8f9fa;
  font-size: 14px;
}

/* ----------------------------------------------------------
   GIFT CARD BLOCK WRAPPER
---------------------------------------------------------- */
.myyarn-order-summary__giftcard {
  margin-top: 12px;
  text-align: right;
}

.checkout-spa-wrapper[dir="rtl"] .myyarn-order-summary__giftcard {
  text-align: left;
}

/* ----------------------------------------------------------
   "Have a gift card?" toggle link
---------------------------------------------------------- */
.myyarn-giftcard-toggle-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: #0052cc;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
  text-decoration: underline;
  display: inline-block;
  width: 100%;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.checkout-spa-wrapper[dir="rtl"] .myyarn-giftcard-toggle-link {
  text-align: right;
  direction: rtl;
  flex-direction: row;
  justify-content: flex-start;
}

.checkout-spa-wrapper[dir="ltr"] .myyarn-giftcard-toggle-link {
  text-align: left;
  direction: ltr;
  flex-direction: row;
  justify-content: flex-start;
}

/* Small gift card icon */
.myyarn-giftcard-toggle-icon {
  font-size: 14px;
  line-height: 1;
}

/* Remove underline from the icon only */
.myyarn-giftcard-toggle-link .myyarn-giftcard-toggle-icon {
  text-decoration: none !important;
  display: inline-block;
}

/* ----------------------------------------------------------
   Gift card form container
---------------------------------------------------------- */
.myyarn-giftcard-form {
  margin-top: 8px;
}

.myyarn-giftcard-form--hidden {
  display: none;
}

/* ----------------------------------------------------------
   ROW: Input + Apply (same row)
---------------------------------------------------------- */
.myyarn-giftcard-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.myyarn-giftcard-code {
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  min-width: 120px;
}

/* Apply button */
.myyarn-giftcard-apply {
  min-width: 90px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #aaa;
  background: #333;
  color: #fff;
  cursor: not-allowed;
  white-space: nowrap;
}

.myyarn-giftcard-apply:not(:disabled) {
  background: #333;
  border-color: #333;
  cursor: pointer;
}

/* ----------------------------------------------------------
   CANCEL BUTTON ON ITS OWN ROW
---------------------------------------------------------- */

/* Wrapper row for cancel */
.myyarn-giftcard-cancel-row {
  margin-top: 4px;
}

/* Basic cancel style */
.myyarn-giftcard-cancel {
  background: none;
  border: 0;
  color: #666;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

/* RTL: Cancel aligns LEFT */
.checkout-spa-wrapper[dir="rtl"] .myyarn-giftcard-cancel-row {
  text-align: left;
}

/* LTR: Cancel aligns RIGHT */
.checkout-spa-wrapper[dir="ltr"] .myyarn-giftcard-cancel-row {
  text-align: right;
}

/* ----------------------------------------------------------
   ERROR MESSAGE
---------------------------------------------------------- */
.myyarn-giftcard-error {
  margin-top: 4px;
  font-size: 0.9em;
  color: #c0392b;
  min-height: 16px;
  line-height: 1.3;
  direction: inherit;
  text-align: start;
  display: block;
  width: 100%;
}

/* Explicit RTL correction */
.checkout-spa-wrapper[dir="rtl"] .myyarn-giftcard-error {
  text-align: right;
}

/* Explicit LTR correction */
.checkout-spa-wrapper[dir="ltr"] .myyarn-giftcard-error {
  text-align: left;
}

/* ----------------------------------------------------------
   SUCCESS MESSAGE
---------------------------------------------------------- */
.myyarn-giftcard-success {
  margin-top: 4px;
  font-size: 0.9em;
  color: #10B981;
  min-height: 16px;
  line-height: 1.3;
  direction: inherit;
  text-align: start;
  display: block;
  width: 100%;
}

/* Explicit RTL correction */
.checkout-spa-wrapper[dir="rtl"] .myyarn-giftcard-success {
  text-align: right;
}

/* Explicit LTR correction */
.checkout-spa-wrapper[dir="ltr"] .myyarn-giftcard-success {
  text-align: left;
}

/* ----------------------------------------------------------
   REDEMPTION WRAPPER (contains both coupon & gift card)
---------------------------------------------------------- */
.myyarn-order-summary__redemption {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.myyarn-summary-row--giftcard .myyarn-summary-value {
  color: #10B981; /* green like discount */
}

/* Applied gift cards list */
.myyarn-giftcard-applied-list {
  margin-top: 8px;
  display: none;
}

.myyarn-giftcard-applied-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 13px;
}

.myyarn-giftcard-applied-code {
  font-weight: 500;
  color: #166534;
}

.myyarn-giftcard-applied-amount {
  color: #15803d;
  margin: 0 8px;
}

.myyarn-giftcard-remove {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}

.myyarn-giftcard-remove:hover {
  color: #b91c1c;
}

/* RTL support */
.checkout-spa-wrapper[dir="rtl"] .myyarn-giftcard-applied-item {
  flex-direction: row-reverse;
}

/* ==========================================================================
   MOBILE CHECKOUT - SINGLE COLUMN STACK
   Applies to screens 768px and below
   Add this at the END of checkout-spa.css (or as separate file)
   ========================================================================== */

@media (max-width: 768px) {
  
  /* ==========================================================================
     GRID: Force single column on mobile
     ========================================================================== */
  
  .checkout-spa-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  /* Reset grid areas - not needed in flex column */
  .checkout-spa-wrapper[dir="rtl"] .checkout-spa-grid {
    display: flex !important;
    flex-direction: column !important;
    direction: rtl !important; /* Keep RTL for content */
  }
  
  /* All columns become full-width blocks - override Martis .left/.right classes */
  .checkout-spa-col,
  .checkout-spa-col.left,
  .checkout-spa-col.right,
  .checkout-spa-col.center,
  .customer-column,
  .shipping-column,
  .order-column,
  section.checkout-spa-col,
  section.order-column,
  section.customer-column,
  section.shipping-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    float: none !important;
    grid-area: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure ALL cards inside columns are full width */
  .checkout-spa-col > .checkout-card,
  .checkout-spa-col > .checkout-spa-summary-card,
  .customer-column > *,
  .shipping-column > *,
  .order-column > *,
  .order-column > .checkout-card,
  .order-column > .checkout-card--summary,
  .order-column > .checkout-card--actions {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Target the specific summary card structure */
  .checkout-card.checkout-card--summary,
  .checkout-card.checkout-card--summary.checkout-spa-summary-card,
  .checkout-card.checkout-card--actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Inner containers in order summary */
  .checkout-card--summary .checkout-card__body,
  .checkout-card--summary .checkout-spa-summary-card,
  .checkout-card--summary .checkout-pane,
  .checkout-card--summary .fieldset-wrapper,
  .checkout-card--summary .myyarn-order-summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* ==========================================================================
     COLUMN ORDER: Logical flow for mobile
     1. Account (פרטי חשבון)
     2. Shipping address (פרטי משלוח)
     3. Shipping options (אפשרויות משלוח)
     4. Pickup point (if shown)
     5. Payment (תשלום)
     6. Order summary (סיכום הזמנה)
     7. Pay button
     ========================================================================== */
  
  .customer-column {
    order: 1 !important;
  }
  
  .shipping-column {
    order: 2 !important;
  }
  
  .order-column {
    order: 3 !important;
  }
  
  /* ==========================================================================
     CARD SPACING: Tighter on mobile
     ========================================================================== */
  
  .checkout-spa-wrapper {
    padding: 12px !important;
  }
  
  .checkout-card {
    margin-bottom: 12px !important;
    padding: 1rem !important;
    border-radius: 10px !important;
  }
  
  /* Remove bottom margin from last card in each column */
  .checkout-spa-col > *:last-child {
    margin-bottom: 12px !important;
  }
  
  /* ==========================================================================
     CARD HEADERS: Compact on mobile
     ========================================================================== */
  
  .checkout-card__header {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .checkout-step-badge {
    min-width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.8rem !important;
  }
  
  .checkout-card__title {
    font-size: 0.95rem !important;
  }
  
  /* ==========================================================================
     ORDER SUMMARY: Optimized for mobile - FULL WIDTH
     ========================================================================== */
  
  /* Force order summary card full width */
  .checkout-card--summary,
  .checkout-card--order-comments,
  .order-column .checkout-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Line items: 2-column layout (image + details) */
  .checkout-card--summary .checkout-spa-lineitem {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-block: 10px !important;
  }
  
  /* Image smaller on mobile */
  .checkout-card--summary .checkout-spa-lineitem-image {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
  }
  
  /* Stack middle content + total vertically */
  .checkout-card--summary .checkout-spa-lineitem-middle {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Total moves under the product details */
  .checkout-card--summary .checkout-spa-lineitem-total {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    text-align: start !important;
    margin-top: 4px !important;
    font-size: 0.9rem !important;
  }
  
  /* RTL: keep total aligned to start */
  .checkout-spa-wrapper[dir="rtl"] .checkout-card--summary .checkout-spa-lineitem-total {
    justify-content: flex-start !important;
    text-align: start !important;
  }
  
  /* Product name + variation */
  .checkout-card--summary .checkout-spa-lineitem-middle .li-parent,
  .checkout-card--summary .checkout-spa-lineitem-middle .li-variation {
    font-size: 0.875rem !important;
  }
  
  /* Qty and unit price */
  .checkout-card--summary .checkout-spa-lineitem-middle .li-qty,
  .checkout-card--summary .checkout-spa-lineitem-middle .li-unit {
    font-size: 0.75rem !important;
  }
  
  /* Summary totals section */
  .myyarn-order-summary {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  
  .myyarn-order-summary .myyarn-summary-row {
    font-size: 0.875rem !important;
  }
  
  .myyarn-summary-row--grand .myyarn-summary-label,
  .myyarn-summary-row--grand .myyarn-summary-value {
    font-size: 0.95rem !important;
  }
  
  /* ==========================================================================
     SHIPPING OPTIONS: Full width radios
     ========================================================================== */
  
  .checkout-card--shipping-options .myyarn-shipping-methods-list {
    text-align: start !important;
  }
  
  .checkout-card--shipping-options .myyarn-shipping-methods-list .shipping-method-option {
    display: flex !important;
    width: 100% !important;
    margin: 8px 0 !important;
    padding: 10px 12px !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .checkout-card--shipping-options .myyarn-shipping-methods-list .shipping-method-option:has(input:checked) {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
  }
  
  .checkout-card--shipping-options .myyarn-shipping-methods-list .shipping-method-option label {
    flex: 1 !important;
    font-size: 0.875rem !important;
  }
  
  /* ==========================================================================
     SHIPPING ADDRESS: Compact summary box
     ========================================================================== */
  
  .checkout-card--shipping-address .myyarn-shipping-address-summary {
    padding: 0.875rem 1rem !important;
    padding-inline-end: 2.25rem !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
  }
  
  /* Pin icon */
  .checkout-card--shipping-address .myyarn-shipping-address-summary::before {
    width: 18px !important;
    height: 18px !important;
    top: 0.875rem !important;
  }
  
  /* ==========================================================================
     PICKUP POINT: Mobile optimized
     ========================================================================== */
  
  .checkout-card--pickup-point .pickup-selector-container {
    gap: 12px !important;
  }
  
  .checkout-card--pickup-point .pickup-details-box {
    min-height: 120px !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.85rem !important;
  }
  
  /* ==========================================================================
     PAYMENT METHODS: Full width options
     ========================================================================== */
  
  .checkout-card--payment .form-type-radio {
    padding: 10px 12px !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    margin-bottom: 8px !important;
  }
  
  .checkout-card--payment .form-type-radio:has(input:checked) {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
  }
  
  /* ==========================================================================
     PAY NOW BUTTON: Sticky on mobile - FULL WIDTH
     ========================================================================== */
  
  .checkout-card--actions,
  .checkout-card.checkout-card--actions,
  .order-column .checkout-card--actions {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
  }
  
  /* Make the actions card extend to edges of wrapper */
  .checkout-spa-wrapper .checkout-card--actions {
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
    max-width: calc(100% + 24px) !important;
  }
  
  .checkout-card--actions .myyarn-pay-now-btn {
    font-size: 15px !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
  }
  
  .checkout-actions-note {
    margin-top: 12px !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }
  
  /* ==========================================================================
     COUPON & GIFT CARD: Mobile layout
     ========================================================================== */
  
  .myyarn-coupon-input-row,
  .myyarn-giftcard-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .myyarn-coupon-code,
  .myyarn-giftcard-code {
    width: 100% !important;
  }
  
  .myyarn-coupon-apply,
  .myyarn-giftcard-apply {
    width: 100% !important;
  }
  
  /* ==========================================================================
     NICE-SELECT: Full width on mobile
     ========================================================================== */
  
  .checkout-spa-wrapper .nice-select {
    width: 100% !important;
  }
  
  .checkout-spa-wrapper .nice-select .list {
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
  }
  
  /* ==========================================================================
     ADDRESS FIELDS: Stack inline fields
     ========================================================================== */
  
  .commerce-checkout-flow .address-container-inline {
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  .commerce-checkout-flow .address-container-inline > .form-item {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  [dir="rtl"] .commerce-checkout-flow .address-container-inline > .form-item {
    float: none !important;
    margin-left: 0 !important;
  }
  
  /* ==========================================================================
     ACCOUNT EMAIL: Full width
     ========================================================================== */
  
  .checkout-card--account input[type="email"] {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  
  /* ==========================================================================
     LOADING OVERLAY: Mobile friendly
     ========================================================================== */
  
  .myyarn-checkout-overlay-inner {
    padding: 1.25rem !important;
    margin: 0 20px !important;
    max-width: calc(100% - 40px) !important;
  }
  
  .myyarn-spinner {
    width: 32px !important;
    height: 32px !important;
  }
  
  /* ==========================================================================
     MARTIS THEME OVERRIDES - Force full width on all checkout elements
     ========================================================================== */
  
  /* Override any Martis float/width on .left, .right, .center column classes */
  .checkout-spa-wrapper .left,
  .checkout-spa-wrapper .right,
  .checkout-spa-wrapper .center,
  .checkout-spa-wrapper section.left,
  .checkout-spa-wrapper section.right,
  .checkout-spa-wrapper section.center {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Override Martis grid if it's using CSS columns or other layout */
  .checkout-spa-wrapper .checkout-spa-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    columns: unset !important;
    column-count: unset !important;
  }
  
  /* Ensure wrapper doesn't constrain children */
  .checkout-spa-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Force all direct children of order-column to be full width */
  .order-column > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
  }

}

/* ==========================================================================
   EXTRA SMALL SCREENS (under 400px)
   ========================================================================== */

@media (max-width: 400px) {
  
  .checkout-spa-wrapper {
    padding: 8px !important;
  }
  
  .checkout-card {
    padding: 0.875rem !important;
    border-radius: 8px !important;
  }
  
  .checkout-card--actions {
    margin: 0 -8px !important;
    padding: 12px !important;
  }
  
  .checkout-card--actions .myyarn-pay-now-btn {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }
  
  /* Even smaller line item images */
  .checkout-card--summary .checkout-spa-lineitem-image {
    width: 48px !important;
    height: 48px !important;
  }
  
  .checkout-card--summary .checkout-spa-lineitem {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
  
  /* Extra small: Martis overrides */
  .checkout-spa-wrapper .left,
  .checkout-spa-wrapper .right,
  .checkout-spa-wrapper section.left {
    width: 100% !important;
  }
}

#edit-shipping-information-shipping-profile-field-phone-wrapper,
#edit-shipping-information-shipping-profile-field-mobile-wrapper {
  display: none !important;
}

/* Coupon & Gift card toggle buttons */
.myyarn-coupon-toggle-link,
.myyarn-giftcard-toggle-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: none !important;
  border: none !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  color: #2ea3d1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: opacity 0.2s ease !important;
}

.myyarn-coupon-toggle-link:hover,
.myyarn-giftcard-toggle-link:hover {
  opacity: 0.75 !important;
  text-decoration: none !important;
}

.myyarn-toggle-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #2ea3d1 !important;
}

.myyarn-coupon-toggle-icon,
.myyarn-giftcard-toggle-icon {
  display: none !important;
}