/* ============================================================
   N30 | CHECKOUT REDESIGN
   Scoped to EasyOrders checkout markup supplied by the store.
   Preserves the site's original font and all checkout behavior.
   No HTML or JavaScript changes required.
   ============================================================ */

/* 01 — Palette and page canvas */
body:has(.checkout_container) {
  --n30-co-ink: #211c18;
  --n30-co-muted: #72685f;
  --n30-co-gold: #b88a47;
  --n30-co-surface: #ffffff;
  --n30-co-cream: #f7f5f2;
  --n30-co-sand: #eee8e0;
  --n30-co-line: #e5ded5;
  background-color: var(--n30-co-cream) !important;
  color: var(--n30-co-ink);
}

/* Eliminate the original fixed, half-screen grey rectangle. */
body:has(.checkout_container) .checkout_bg_left,
body:has(.checkout_container) .checkout_bg_right {
  display: none !important;
}

/* 02 — Checkout layout */
.checkout_container {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 48px 0 88px !important;
  column-gap: clamp(28px, 4vw, 64px) !important;
  align-items: start !important;
}

.checkout_container,
.checkout_container * {
  box-sizing: border-box;
}

/* 03 — Two refined panels */
.checkout_container #checkout-form {
  min-width: 0;
  margin: 0 !important;
  padding: clamp(26px, 3.2vw, 46px) !important;
  border: 1px solid var(--n30-co-line);
  border-radius: 16px;
  background: var(--n30-co-surface);
  box-shadow: 0 18px 54px rgba(33, 28, 24, 0.045);
}

.checkout_container #checkout-order-summary {
  min-width: 0;
  margin: 0 !important;
  padding: clamp(26px, 3vw, 40px) !important;
  border: 1px solid #e7ded3 !important;
  border-radius: 16px;
  background: var(--n30-co-sand) !important;
  color: var(--n30-co-ink);
  box-shadow: none;
}

.checkout_container #checkout-form > div,
.checkout_container #checkout-order-summary > div {
  max-width: none !important;
  width: 100%;
}

/* 04 — Form heading and field labels */
.checkout_container .contact-info-heading::before {
  content: "N30  /  CHECKOUT";
  display: block;
  margin: 0 0 17px;
  color: var(--n30-co-gold);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.checkout_container #contact-info-heading {
  max-width: 475px;
  margin: 0 0 30px !important;
  color: var(--n30-co-ink) !important;
  font-family: inherit !important;
  font-size: clamp(23px, 2.3vw, 30px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em;
  line-height: 1.3 !important;
}

.checkout_container #checkout-form .contact-info-heading > .mt-3 {
  margin-top: 20px !important;
}

.checkout_container #checkout-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--n30-co-ink) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.55;
}

/* 05 — Text fields and textarea */
.checkout_container #checkout-form .global_input,
.checkout_container #checkout-form .global_textarea {
  display: block !important;
  width: 100% !important;
  padding: 15px 17px !important;
  border: 1px solid #dbd4ca !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--n30-co-ink) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  outline: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.checkout_container #checkout-form .global_input {
  min-height: 54px !important;
}

.checkout_container #checkout-form .global_textarea {
  min-height: 114px !important;
  height: auto;
  resize: vertical;
}

.checkout_container #checkout-form :is(.global_input, .global_textarea):hover {
  border-color: #bcb1a4 !important;
}

.checkout_container #checkout-form :is(.global_input, .global_textarea):focus {
  border-color: var(--n30-co-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 138, 71, 0.14) !important;
}

.checkout_container
  #checkout-form
  :is(.global_input, .global_textarea):is(
    [aria-invalid="true"],
    :invalid:not(:placeholder-shown)
  ) {
  /* Leave validation states to EasyOrders, not a decorative rule. */
  outline-offset: 2px;
}

/* 06 — Governorate React Select: style the control, not its logic */
.checkout_container #checkout-form .gov_select {
  width: 100%;
}

.checkout_container #checkout-form .gov_select .select__control {
  min-height: 54px !important;
  padding: 0 5px !important;
  border: 1px solid #dbd4ca !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.checkout_container #checkout-form .gov_select .select__control:hover {
  border-color: #bcb1a4 !important;
}

.checkout_container #checkout-form .gov_select .select__control--is-focused,
.checkout_container #checkout-form .gov_select .select__control:focus-within {
  border-color: var(--n30-co-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 138, 71, 0.14) !important;
}

.checkout_container #checkout-form .gov_select .select__single-value,
.checkout_container #checkout-form .gov_select .select__placeholder {
  color: var(--n30-co-ink) !important;
  font-family: inherit !important;
  font-size: 15px !important;
}

.checkout_container #checkout-form .gov_select .select__indicator-separator {
  display: none !important;
}

.checkout_container #checkout-form .gov_select .select__indicator {
  color: var(--n30-co-muted) !important;
}

.checkout_container #checkout-form .gov_select .select__menu {
  z-index: 60 !important;
  overflow: hidden;
  border: 1px solid var(--n30-co-line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(33, 28, 24, 0.13);
}

.checkout_container #checkout-form .gov_select .select__option--is-focused {
  background: #f7f1e8 !important;
  color: var(--n30-co-ink) !important;
}

.checkout_container #checkout-form .gov_select .select__option--is-selected {
  background: var(--n30-co-ink) !important;
  color: #fff !important;
}

/* 07 — Primary checkout action */
.checkout_container #checkout-button {
  margin-top: 28px !important;
  padding: 0 !important;
}

.checkout_container #checkout-button .checkout_buy_now {
  width: 100% !important;
  min-height: 56px !important;
  padding: 15px 22px !important;
  border: 1px solid var(--n30-co-ink) !important;
  border-radius: 9px !important;
  background: var(--n30-co-ink) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.checkout_container #checkout-button .checkout_buy_now:not(:disabled):hover {
  border-color: var(--n30-co-gold) !important;
  background: var(--n30-co-gold) !important;
  color: #fff !important;
}

.checkout_container #checkout-button .checkout_buy_now:focus-visible {
  outline: 2px solid var(--n30-co-gold) !important;
  outline-offset: 3px !important;
}

/* 08 — Informational links */
.checkout_container .checkout_store_pages {
  justify-content: flex-start;
  gap: 9px 18px !important;
  margin-top: 28px !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid var(--n30-co-line) !important;
}

.checkout_container .checkout_store_pages a {
  color: #7c7269 !important;
  font-size: 12px !important;
  line-height: 1.6;
  text-decoration: none !important;
}

.checkout_container .checkout_store_pages a:hover,
.checkout_container .checkout_store_pages a:focus-visible {
  color: var(--n30-co-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* 09 — Order summary */
.checkout_container #summary-heading {
  margin: 0 !important;
  color: var(--n30-co-ink) !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
}

.checkout_container
  #checkout-order-summary-content
  .checkout_cart_items_container {
  margin: 22px 0 0 !important;
  padding: 0 0 22px;
}

.checkout_container #checkout-order-summary-content .checkout_cart_item {
  gap: 16px !important;
  padding: 0 0 18px !important;
}

.checkout_container #checkout-order-summary-content .checkout_cart_item > a {
  width: 78px !important;
  height: 90px !important;
  flex: 0 0 78px !important;
  overflow: visible;
  border-radius: 9px !important;
  background: #fff;
  box-shadow: none !important;
}

.checkout_container
  #checkout-order-summary-content
  .checkout_cart_item
  > a
  > div {
  border: 1px solid var(--n30-co-line) !important;
  border-radius: 9px !important;
}

.checkout_container #checkout-order-summary-content .checkout_cart_item img {
  object-fit: contain !important;
}

.checkout_container .checkout_cart_item p.text-sm {
  color: var(--n30-co-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: normal !important;
}

.checkout_container .checkout_cart_item p.text-xs {
  color: var(--n30-co-muted) !important;
}

.checkout_container .checkout_cart_item button[aria-label="Increase quantity"],
.checkout_container .checkout_cart_item button[aria-label="Decrease quantity"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px !important;
  border: 1px solid #d6cbbf !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--n30-co-ink) !important;
}

.checkout_container
  .checkout_cart_item
  button:is(
    [aria-label="Increase quantity"],
    [aria-label="Decrease quantity"]
  ):not(:disabled):hover {
  border-color: var(--n30-co-gold) !important;
  color: var(--n30-co-gold) !important;
}

.checkout_container .checkout_cart_item button[aria-label="Remove item"] svg {
  color: #87776b !important;
}

.checkout_container
  .checkout_cart_item
  button[aria-label="Remove item"]:hover
  svg {
  color: #a64b40 !important;
}

.checkout_container [data-invoice="invoice"] {
  padding: 22px 0 0 !important;
  border-top: 1px solid #d9cec2 !important;
  color: var(--n30-co-ink) !important;
  font-size: 14px !important;
}

.checkout_container [data-invoice="invoice"] dt {
  color: #71675e !important;
}

.checkout_container [data-invoice="invoice"] dd {
  color: var(--n30-co-ink) !important;
  font-weight: 600 !important;
}

.checkout_container [data-invoice="invoice-total"] {
  align-items: center;
  padding-top: 5px;
}

.checkout_container [data-invoice="invoice-total"] :is(dt, dd) {
  color: var(--n30-co-ink) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* 10 — Desktop balance and summary position */
@media (min-width: 1024px) {
  .checkout_container {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr) !important;
  }

  .checkout_container #checkout-order-summary {
    position: sticky;
    top: 30px;
    align-self: start;
  }
}

/* 11 — Responsive checkout */
@media (max-width: 1023px) {
  .checkout_container {
    width: min(670px, calc(100% - 32px)) !important;
    padding: 24px 0 54px !important;
    gap: 18px !important;
  }

  .checkout_container #checkout-order-summary {
    padding: 0 22px !important;
    border-radius: 12px !important;
  }

  .checkout_container #checkout-order-summary-toggle {
    min-height: 68px !important;
    color: var(--n30-co-ink) !important;
  }

  .checkout_container #checkout-order-summary-toggle > span:first-child {
    color: var(--n30-co-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .checkout_container #checkout-order-summary-toggle > span:last-child {
    color: var(--n30-co-ink) !important;
    font-size: 17px !important;
  }

  .checkout_container #checkout-order-summary-content {
    padding-bottom: 17px;
  }

  .checkout_container #checkout-form {
    padding: 30px 24px !important;
    border-radius: 12px;
  }

  .checkout_container #contact-info-heading {
    font-size: 24px !important;
  }

  .checkout_container .checkout_mobile_bottom_summary {
    margin-top: 26px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--n30-co-line);
    border-radius: 10px;
    background: #fbf8f4;
  }

  .checkout_container .checkout_mobile_total_toggle {
    color: var(--n30-co-ink) !important;
  }

  /* Retain EasyOrders' sticky mobile Buy Now area. */
  .checkout_container #checkout-button {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin: 16px -12px 0 !important;
    padding: 12px !important;
    border: 1px solid var(--n30-co-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -7px 24px rgba(33, 28, 24, 0.06);
  }
}

@media (max-width: 480px) {
  .checkout_container {
    width: calc(100% - 20px) !important;
    padding-top: 14px !important;
    gap: 12px !important;
  }

  .checkout_container #checkout-order-summary {
    padding-inline: 16px !important;
  }

  .checkout_container #checkout-form {
    padding: 23px 17px !important;
  }

  .checkout_container #contact-info-heading {
    font-size: 22px !important;
  }

  .checkout_container #checkout-form label {
    font-size: 12px !important;
  }

  .checkout_container #checkout-button .checkout_buy_now {
    min-height: 52px !important;
  }

  .checkout_container .checkout_store_pages a {
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout_container
    :is(.global_input, .global_textarea, .select__control, .checkout_buy_now) {
    transition: none !important;
  }
}