/* =========================================================
   HOUSE OF SVARA — CHECKOUT
   ========================================================= */


/* ---------------------------------------------------------
   CHECKOUT INTRO
   --------------------------------------------------------- */

.checkout-heading {
  padding:
    1.8rem
    max(6vw, 2rem)
    1.8rem;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      #f7efe8 0%,
      #ead8c4 48%,
      #dbc1cf 100%
    );
}


.checkout-heading .eyebrow {
  margin-bottom: 0.45rem;
}


.checkout-heading h1 {
  margin: 0;

  color: var(--purple-950);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(
      2.7rem,
      5vw,
      4.4rem
    );

  font-weight: 500;

  line-height: 1;
}


.checkout-heading > p:last-child {
  max-width: 680px;

  margin:
    0.65rem auto 0;

  color: var(--muted);

  font-size: 0.9rem;

  line-height: 1.5;
}


/* ---------------------------------------------------------
   PAGE LAYOUT
   --------------------------------------------------------- */

.checkout-page {
  width:
    min(
      1200px,
      calc(100% - 2rem)
    );

  margin: 0 auto;

  padding:
    4.5rem 0
    7rem;
}


.checkout-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    390px;

  gap: 2rem;

  align-items: start;
}


/* ---------------------------------------------------------
   MAIN CARDS
   --------------------------------------------------------- */

.checkout-form-card,
.checkout-summary-card {
  border:
    1px solid
    #d8d2dc;

  border-radius: 26px;

  background: var(--white);

  box-shadow:
    0 14px 42px
    rgba(42, 16, 59, 0.07);
}


.checkout-form-card {
  padding:
    clamp(
      1.25rem,
      3vw,
      2rem
    );
}


.checkout-summary-card {
  position: sticky;

  top: 125px;

  padding: 2rem;
}


/* ---------------------------------------------------------
   DELIVERY SECTION HEADING
   --------------------------------------------------------- */

.checkout-section-title {
  margin-bottom: 1rem;
}


.checkout-section-title .eyebrow {
  margin-bottom: 0;
}



/* ---------------------------------------------------------
   FORM
   --------------------------------------------------------- */

.checkout-field {
  display: grid;

  gap: 0.25rem;

  margin-bottom: 0.7rem;
}

.checkout-field-row {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 0.8rem;
}

   /* ---------------------------------------------------------
   POSTAL CODE + VERIFIED ADDRESS
   --------------------------------------------------------- */

.checkout-address-row {
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(0, 2fr);

  align-items: start;
}


/* ---------------------------------------------------------
   UNIT / APARTMENT
   --------------------------------------------------------- */

.unit-apartment-control {
  display: flex;

  align-items: center;

  gap: 0.22rem;

  width: max-content;
  max-width: 100%;

  margin-top: 0.3rem;
}
.unit-part {
  display: block;
}



.unit-fixed-symbol {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 38px;

  color: var(--purple-950);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size: 1rem;

  font-weight: 700;
}
.unit-apartment-control input {
  margin: 0;

  width: 92px;

  padding:
    0.55rem
    0.7rem;

  border-radius: 10px;
}

.checkout-field label {
  color:
    var(--purple-950);

  font-size: 0.79rem;
  font-weight: 700;
}


.checkout-field label span {
  margin-left: 0.25rem;

  color:
    var(--muted);

  font-size: 0.67rem;
  font-weight: 400;
}


.checkout-field input,
.checkout-field textarea {
  width: 100%;

  padding:
    0.58rem
    0.8rem;

  border:
    1px solid
    #d8d2dc;

  border-radius: 10px;

  outline: none;

  background:
    #ffffff;

  color:
    var(--ink);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size: 0.84rem;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.checkout-field textarea {
  min-height: 76px;

  resize: vertical;
}


.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
  color:
    #aaa0aa;
}

.checkout-field input:focus,
.checkout-field textarea:focus {
  border-color:
    #d8d2dc;

  box-shadow:
    0 0 0 2px
    rgba(76, 31, 111, 0.08);
}

.checkout-turnstile {
  display: flex;

  justify-content: center;

  margin:
    0.8rem 0
    1rem;
}



/* ---------------------------------------------------------
   PRIVACY NOTE
   --------------------------------------------------------- */

.checkout-privacy-note {
  margin:
    0.35rem 0
    1rem;

  padding:
    0.8rem
    0.9rem;

  border:
    1px solid
    #d4d8bd;

  border-radius: 12px;

  background:
    #e8ead9;

  color:
    #4f562f;

  font-size: 0.7rem;

  line-height: 1.5;
}

.checkout-privacy-note a {
  color: inherit;

  font-weight: 700;

  text-decoration: underline;

  text-underline-offset: 2px;
}


/* ---------------------------------------------------------
   FORM ERRORS / STATUS
   --------------------------------------------------------- */

.checkout-error {
  margin:
    0.5rem 0
    1.1rem;

  padding:
    0.85rem
    1rem;

  border:
    1px solid
    rgba(154, 59, 51, 0.2);

  border-radius: 13px;

  background:
    #fff4f1;

  color:
    #8a332c;

  font-size: 0.75rem;
  font-weight: 600;

  line-height: 1.5;
}


.checkout-submit {
  width: 100%;
}


.checkout-submit:disabled {
  opacity: 0.5;

  cursor: not-allowed;

  transform: none;
}


.checkout-payment-note {
  margin:
    0.8rem 0 0;

  text-align: center;

  color:
    var(--muted);

  font-size: 0.69rem;
}


/* ---------------------------------------------------------
   ORDER SUMMARY
   --------------------------------------------------------- */

.checkout-summary-card > .eyebrow {
  margin-bottom: 0.35rem;
}


.checkout-summary-card > h2 {
  margin: 0;

  color:
    var(--purple-950);

  font-size:
    2.4rem;

  font-weight: 500;
}


.checkout-items {
  margin:
    1.4rem 0
    0.5rem;
}


.checkout-summary-item {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  align-items: flex-start;

  padding:
    1rem 0;

  border-bottom:
    1px solid
    #d8d2dc;
}


.checkout-summary-item > div {
  min-width: 0;
}


.checkout-summary-item > div > strong {
  display: block;

  color:
    var(--purple-950);

  font-size: 0.8rem;

  line-height: 1.35;
}


.checkout-summary-item span,
.checkout-summary-item small {
  display: block;

  margin-top: 0.18rem;

  color:
    var(--muted);

  font-size: 0.67rem;

  line-height: 1.35;
}


.checkout-summary-item > strong {
  flex:
    0 0 auto;

  color:
    var(--purple-900);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size: 0.82rem;

  font-variant-numeric:
    tabular-nums;
}


/* ---------------------------------------------------------
   COUPON
   --------------------------------------------------------- */

.checkout-coupon {
  margin: 0.9rem 0 0.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid #d8d2dc;
}

.checkout-coupon > label {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  color: var(--purple-950);
  font-size: 0.76rem;
  font-weight: 700;
}

.checkout-coupon > label span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 400;
}

.checkout-coupon-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.checkout-coupon-control input {
  width: 100%;
  min-width: 0;
  padding: 0.62rem 0.75rem;
  border: 1px solid #d8d2dc;
  border-radius: 10px;
  outline: none;
  background: #ffffff;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.checkout-coupon-control input:focus {
  box-shadow: 0 0 0 2px rgba(76, 31, 111, 0.08);
}

.checkout-coupon-apply {
  min-width: 76px;
  padding: 0.62rem 0.9rem;
  border: 1px solid var(--purple-800);
  border-radius: 10px;
  background: var(--purple-800);
  color: #ffffff;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.checkout-coupon-apply:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.checkout-coupon-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.45rem;
}

.coupon-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

.coupon-status:empty { display: none; }
.coupon-success { color: #4f562f; font-weight: 600; }
.coupon-error { color: #8a332c; font-weight: 600; }
.coupon-notice { color: var(--muted); }

.checkout-coupon-remove {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--purple-800);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.checkout-discount-row strong { color: #4f562f; }


/* ---------------------------------------------------------
   TOTALS
   --------------------------------------------------------- */

.checkout-summary-row {
  display: flex;

  justify-content: space-between;

  gap: 1rem;

  align-items: center;

  padding:
    1rem 0;

  border-bottom:
    1px solid
    #d8d2dc;
   
  color:
    var(--ink);

  font-size: 0.82rem;
}


.checkout-summary-row strong {
  color:
    var(--purple-900);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-variant-numeric:
    tabular-nums;
}


.checkout-total {
  margin-top: 0.35rem;

  padding:
    1.2rem 0;

  border-bottom: 0;

  font-weight: 700;
}


.checkout-total span {
  color:
    var(--purple-950);

  font-size: 0.95rem;
}


.checkout-total strong {
  color:
    var(--purple-900);

  font-size: 1.3rem;
}


/* ---------------------------------------------------------
   QUOTE STATUS
   --------------------------------------------------------- */

.quote-status {
  margin:
    1rem 0;

  padding:
    0.8rem
    0.9rem;

  border-radius: 12px;

  background:
    var(--beige-100);

  color:
    var(--olive-700);

  font-size: 0.7rem;
  font-weight: 600;

  line-height: 1.5;
}


.checkout-summary-note {
  margin:
    1rem 0;

  color:
    var(--muted);

  font-size: 0.7rem;

  line-height: 1.55;
}


.checkout-edit-cart {
  display: block;

  margin-top: 1.3rem;

  text-align: center;

  color:
    var(--purple-800);

  font-size: 0.77rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
   EMPTY CART
   --------------------------------------------------------- */

.checkout-empty {
  max-width: 620px;

  margin: 0 auto;

  padding:
    4rem 2rem;

  text-align: center;

  border:
    1px solid
    #d8d2dc;

  border-radius: 28px;

  background:
    var(--white);

  box-shadow:
    0 14px 42px
    rgba(42, 16, 59, 0.07);
}


.checkout-empty h2 {
  margin-bottom: 0.8rem;

  color:
    var(--purple-950);

  font-size: 2.8rem;

  font-weight: 500;
}


.checkout-empty p {
  margin:
    0 auto
    1.7rem;

  color:
    var(--muted);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .checkout-layout {
    grid-template-columns:
      1fr;
  }


  .checkout-summary-card {
    position: static;

    order: -1;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

  .checkout-heading {
  padding:
    2rem
    1.25rem;
}

  .checkout-heading h1 {
    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      );
  }


  .checkout-page {
    width:
      calc(
        100% - 24px
      );

    padding:
      2.5rem 0
      5rem;
  }


  .checkout-form-card,
  .checkout-summary-card {
    padding:
      1.3rem;

    border-radius:
      20px;
  }


 
  .checkout-field-row {
    grid-template-columns:
      1fr;

    gap: 0;
  }
  .checkout-address-row {
    grid-template-columns:
      1fr;

    gap: 0;
  }


  .unit-apartment-control {
    width: max-content;
    max-width: 100%;
    gap: 0.22rem;
  }

  .unit-apartment-control input {
    width: 86px;
  }
   
  .checkout-field input,
  .checkout-field textarea {
    font-size:
      16px;
  }


  .checkout-summary-card > h2 {
    font-size:
      2rem;
  }


  .checkout-summary-item {
    gap:
      0.6rem;
  }

}
/* ---------------------------------------------------------
   POSTAL CODE VERIFICATION
   --------------------------------------------------------- */

.postal-lookup-status {
  margin:
    0.15rem 0
    0.2rem;

  padding:
    0.7rem
    0.85rem;

  border-radius:
    10px;

  font-size:
    0.7rem;

  line-height:
    1.5;
}


.postal-checking {
  background:
    var(--beige-100);

  color:
    var(--purple-800);
}


.postal-success {
  border:
    1px solid
    #d4d8bd;

  background:
    #e8ead9;

  color:
    #4f562f;

  font-weight:
    600;
}


.postal-error {
  border:
    1px solid
    rgba(154, 59, 51, 0.2);

  background:
    #fff4f1;

  color:
    #8a332c;

  font-weight:
    600;
}


#address-line1[readonly] {
  background:
    #f8f5f1;

  cursor:
    default;
}

@media (max-width: 420px) {
  .checkout-coupon-control { grid-template-columns: 1fr; }
  .checkout-coupon-apply { width: 100%; }
}


/* ---------------------------------------------------------
   FULFILMENT CHOICE (PICKUP VS DELIVERY)
   --------------------------------------------------------- */

.checkout-fulfilment,
.checkout-pickup {
  margin: 0 0 1.1rem;

  padding:
    0.95rem
    1rem
    1rem;

  border:
    1px solid
    #e2dbe6;

  border-radius: 18px;

  background: #fcfaf8;
}


.checkout-pickup {
  background: #f7f1ea;
}


.checkout-fulfilment legend,
.checkout-pickup legend {
  padding: 0 0.3rem;

  color: var(--purple-950);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  font-size: 0.82rem;

  font-weight: 700;
}


.fulfilment-option {
  display: flex;

  align-items: flex-start;

  gap: 0.65rem;

  margin-top: 0.6rem;

  padding:
    0.7rem
    0.85rem;

  border:
    1px solid
    #ded5e2;

  border-radius: 14px;

  background: #ffffff;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}


.fulfilment-option:hover {
  border-color: #c8a24a;
}


.fulfilment-option input[type="radio"] {
  width: 18px;
  height: 18px;

  margin-top: 0.15rem;

  accent-color: #4c1f6f;

  flex: 0 0 auto;
}


.fulfilment-option:has(input:checked) {
  border-color: #4c1f6f;

  box-shadow:
    0 0 0 2px
    rgba(76, 31, 111, 0.12);
}


.fulfilment-option-body {
  display: grid;

  gap: 0.15rem;
}


.fulfilment-option-body strong {
  color: var(--purple-950);

  font-size: 0.92rem;

  font-weight: 700;
}


.fulfilment-option-body small {
  color: var(--muted);

  font-size: 0.78rem;

  line-height: 1.45;
}


.checkout-pickup-note {
  margin:
    0.75rem 0 0;

  color: var(--muted);

  font-size: 0.78rem;

  line-height: 1.5;
}


#delivery-address-section[hidden] {
  display: none;
}
/* =========================================================
   COMPACT FULFILMENT / PICKUP SECTION
   ========================================================= */

.checkout-fulfilment,
.checkout-pickup {
  padding: 20px 24px;
  margin: 0 0 22px;
  border-radius: 22px;
}

.checkout-fulfilment legend,
.checkout-pickup legend {
  padding: 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
}

.fulfilment-option {
  min-height: auto;
  padding: 16px 20px;
  margin-bottom: 12px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.fulfilment-option:last-of-type {
  margin-bottom: 0;
}

.fulfilment-option input[type="radio"] {
  flex: 0 0 auto;
  margin: 0;
}

.fulfilment-option-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fulfilment-option-body strong {
  font-size: 1rem;
  line-height: 1.25;
}

.fulfilment-option-body small {
  font-size: 0.88rem;
  line-height: 1.35;
}

.checkout-pickup-note {
  margin: 14px 4px 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

/* =========================================================
   COMPACT CHECKOUT FULFILMENT
   ========================================================= */

.checkout-fulfilment,
.checkout-pickup {
  padding: 12px 14px 14px !important;
  margin: 0 0 16px !important;
  border-radius: 16px !important;
}

.checkout-fulfilment legend,
.checkout-pickup legend {
  padding: 0 6px !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
}

/* Pickup / Delivery cards */
.checkout-fulfilment .fulfilment-option {
  min-height: 0 !important;
  padding: 10px 14px !important;
  margin: 0 0 8px !important;
  border-radius: 13px !important;
  gap: 12px !important;
}

.checkout-fulfilment .fulfilment-option:last-child {
  margin-bottom: 0 !important;
}

.fulfilment-option-body {
  gap: 1px !important;
}

.fulfilment-option-body strong {
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
}

.fulfilment-option-body small {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
}

/* Pickup locations in one row on desktop */
.pickup-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pickup-options-row .fulfilment-option {
  min-height: 0 !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 13px !important;
}

.checkout-pickup-note {
  margin: 9px 2px 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

/* Keep radio buttons compact */
.fulfilment-option input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
}

/* Mobile: pickup locations stack */
@media (max-width: 640px) {
  .pickup-options-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .checkout-fulfilment,
  .checkout-pickup {
    padding: 10px 12px 12px !important;
  }
}