/* ============================================================
   Lanural — Shopify-style one-page / one-step checkout
   Vanilla CSS, no framework. Mirrors Shopify Checkout One layout:
   - 2 columns: form (left, white) + summary (right, gray w/ left rule)
   - floating labels, single accent button, mobile summary collapse
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-summary: #fafafb;
  --ink: #1a1a1a;
  --ink-soft: #545454;
  --ink-faint: #737373;
  --line: #d9d9d9;
  --line-soft: #e6e6e6;
  --field-bg: #ffffff;
  --accent: #1a1a1a;          /* "Pay now" button — swap to brand color anytime */
  --accent-ink: #ffffff;
  --focus: #1773b0;           /* Shopify-blue focus ring */
  --error: #d20f0f;
  --radius: 6px;
  --maxw: 1180px;
  --form-w: 560px;
  --sum-w: 380px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.4;
}

/* ---------- Layout shell ----------
   Two full-height halves like Shopify: white form (left) + gray summary (right),
   each content block hugging the center divider. */
.checkout {
  display: flex;
  min-height: 100vh;
}
.checkout__main {
  flex: 1 1 56%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;              /* push content toward the center divider */
  padding: 28px 44px 64px;
}
.checkout__main > * { width: 100%; max-width: var(--form-w); }
.checkout__summary {
  flex: 1 1 44%;
  background: var(--bg-summary);
  border-left: 1px solid var(--line-soft);
  padding: 44px 44px 64px;
}
.summary__inner { position: sticky; top: 44px; max-width: var(--sum-w); }

/* ---------- Brand header ---------- */
.brand { padding: 8px 0 24px; }
.brand__name { font-size: 26px; font-weight: 700; letter-spacing: .14em; }

/* ---------- Blocks ---------- */
.block { border: 0; margin: 0 0 22px; padding: 0; }
.block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
.block__head h2 { font-size: 18px; font-weight: 600; margin: 0; }
.block__hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-faint);
}
.block__hint svg { color: #6b9e3f; }

/* ---------- Fields w/ floating labels ---------- */
.field { position: relative; margin: 0 0 12px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field-row--3 { flex-wrap: wrap; }
.field-row--3 .field { flex: 1 1 30%; min-width: 90px; }

.field input,
.field select {
  width: 100%;
  height: 52px;
  padding: 18px 12px 4px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  appearance: none;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field select { padding-top: 16px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23737373' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field input:focus,
.field select:focus,
.sp-field.focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus);
}
.field input::placeholder { color: transparent; }

.field label {
  position: absolute; left: 13px; top: 16px;
  font-size: 15px; color: var(--ink-faint);
  pointer-events: none; transition: all .12s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:valid + label,
.field select:focus + label,
.field--filled label,
.sp-label { top: 7px; font-size: 11px; color: var(--ink-faint); }

/* Spreedly managed iframe fields — styled to match native inputs */
.sp-field {
  width: 100%; height: 52px;
  padding: 18px 12px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field-bg);
  transition: border-color .12s, box-shadow .12s;
}
/* Spreedly renders an <input> inside this iframe; force the iframe element itself
   to fill the field (Spreedly only styles the inner input, not the frame). */
.sp-field iframe { width: 100% !important; height: 30px; border: 0; display: block; }
.sp-label { position: absolute; left: 13px; pointer-events: none; }
.field--icon .field__lock,
.field__lock { position: absolute; right: 12px; top: 18px; color: var(--ink-faint); }
.field.invalid input,
.field.invalid select,
.sp-field.invalid { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

/* ---------- Checkboxes ---------- */
.check {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink-soft); margin: 4px 0 2px; cursor: pointer;
}
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Shipping methods ---------- */
.ship-methods { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ship-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.ship-opt:last-child { border-bottom: 0; }
.ship-opt.selected { background: #eaf4fb; box-shadow: inset 0 0 0 1px var(--focus); }
.ship-opt input { width: 18px; height: 18px; accent-color: var(--focus); }
.ship-opt__name { flex: 1; }
.ship-opt__price { font-weight: 600; }

/* ---------- Card block ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card__bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #f7f7f7; border-bottom: 1px solid var(--line-soft);
  padding: 11px 14px; font-size: 13px; color: var(--ink-soft);
}
.card__brands { display: flex; gap: 5px; }
.card__brands i {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 5px; border-radius: 3px; color: #fff; line-height: 1;
}
.brand-visa { background: #1a1f71; } .brand-mc { background: #eb001b; }
.brand-amex { background: #1379bf; } .brand-disc { background: #e26b18; }
.card__body { padding: 14px; }

/* ---------- Errors ---------- */
.errors {
  background: #fdecec; border: 1px solid #f4bcbc; color: var(--error);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin: 0 0 14px;
}
.errors ul { margin: 0; padding-left: 18px; }

/* ---------- Pay button ---------- */
.pay-btn {
  width: 100%; height: 54px; margin-top: 6px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius);
  font-size: 17px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: opacity .12s, transform .02s;
}
.pay-btn:hover:not(:disabled) { opacity: .9; }
.pay-btn:active:not(:disabled) { transform: translateY(1px); }
.pay-btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-btn.loading .pay-btn__label { opacity: .65; }
.pay-btn__spin {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; display: none;
  animation: spin .7s linear infinite;
}
.pay-btn.loading .pay-btn__spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.secure-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--ink-faint); margin: 14px 0 0;
}

/* ---------- Footer ---------- */
.foot {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--focus);
}
.foot span { cursor: pointer; }
.foot span:hover { text-decoration: underline; }

/* ---------- Order summary ---------- */
.summary__lines { list-style: none; margin: 0 0 18px; padding: 0; }
.summary__skeleton { color: var(--ink-faint); font-size: 14px; }
.line { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.line__media { position: relative; flex: 0 0 64px; }
.line__img {
  width: 64px; height: 64px; object-fit: cover;
  border: 1px solid var(--line-soft); border-radius: 8px; background: #fff;
}
.line__qty {
  position: absolute; top: -8px; right: -8px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: #5c5f62; color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.line__info { flex: 1; }
.line__name { font-size: 14px; font-weight: 500; }
.line__variant { font-size: 12px; color: var(--ink-faint); }
.line__price { font-size: 14px; font-weight: 500; white-space: nowrap; }
.line__price s { color: var(--ink-faint); font-weight: 400; margin-right: 6px; }

.discount { display: flex; gap: 8px; margin: 0 0 8px; }
.discount input {
  flex: 1; height: 44px; padding: 0 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; outline: none;
}
.discount input:focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.discount button {
  padding: 0 16px; height: 44px; border: 0; border-radius: var(--radius);
  background: #e3e3e3; color: #6b6b6b; font-weight: 600; font-size: 14px; cursor: pointer;
}
.discount button.active { background: #c4c4c4; color: #1a1a1a; }
.discount__msg { font-size: 12.5px; margin: 0 0 12px; }
.discount__msg.ok { color: #1e7a34; }
.discount__msg.bad { color: var(--error); }

.summary__totals { margin: 16px 0 0; }
.summary__totals .row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 10px; font-size: 14px; color: var(--ink-soft);
}
.summary__totals .row--total {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  color: var(--ink); align-items: baseline;
}
.row--total dt { font-size: 16px; font-weight: 600; }
.row--total dd { font-size: 22px; font-weight: 700; }
.row--total .cur { font-size: 12px; color: var(--ink-faint); font-weight: 500; margin-right: 4px; }
.summary__totals dt, .summary__totals dd { margin: 0; }

/* ---------- Mobile summary toggle ---------- */
.summary-toggle {
  display: none;
  width: 100%; padding: 16px 20px;
  background: var(--bg-summary);
  border: 0; border-bottom: 1px solid var(--line-soft);
  align-items: center; justify-content: space-between;
  font-size: 15px; color: var(--focus); cursor: pointer;
}
.summary-toggle__label { display: inline-flex; align-items: center; gap: 8px; }
.summary-toggle__chev { transition: transform .18s; }
.summary-toggle[aria-expanded="true"] .summary-toggle__chev { transform: rotate(180deg); }
.summary-toggle__total { color: var(--ink); font-weight: 700; font-size: 17px; }

.express { margin: 0 0 18px; }

/* ============================ Responsive ============================ */
@media (max-width: 920px) {
  .checkout { flex-direction: column; }
  .checkout__main {
    align-items: stretch;            /* stop hugging the divider once stacked */
    padding-left: 20px; padding-right: 20px;
  }
  .checkout__main > * { max-width: 100%; }
  .checkout__summary {
    max-width: 100%; width: 100%; padding-left: 20px; padding-right: 20px;
  }
  .checkout__summary {
    order: -1; border-left: 0; border-bottom: 1px solid var(--line-soft);
    display: none; padding-top: 20px; padding-bottom: 20px;
  }
  .checkout__summary.open { display: block; }
  .summary__inner { position: static; max-width: 100%; }
  .summary-toggle { display: flex; }
  .checkout__main { padding-top: 20px; }
  .brand { text-align: left; }
}

@media (max-width: 480px) {
  .field-row { flex-direction: column; gap: 0; }
  .field-row--3 { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .checkout__main { padding-bottom: 48px; }
}

/* ============================ Confirmation page ============================ */
.confirm { padding: 8px 0 0; }
.confirm__loading { color: var(--ink-faint); font-size: 15px; padding: 24px 0; }
.confirm__head { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.confirm__badge {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: #1e7a34; display: flex; align-items: center; justify-content: center;
}
.confirm__badge--bad { background: var(--error); }
.confirm__order { font-size: 13px; color: var(--ink-faint); }
.confirm__title { font-size: 24px; font-weight: 600; margin: 2px 0 0; }
.confirm__lede { font-size: 15px; color: var(--ink-soft); margin: 0 0 20px; }
.confirm__card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 16px; margin: 0 0 20px;
}
.confirm__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.confirm__row:last-child { border-bottom: 0; }
.confirm__row--block { flex-direction: column; gap: 6px; }
.confirm__k { color: var(--ink-faint); }
.confirm__card address { font-style: normal; line-height: 1.6; }
.confirm__next { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 22px; }
.confirm__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.confirm__btn:hover { opacity: .9; }