/* Büyülü Dükkan — Checkout, Build 01
 * Sprint 0.3 Step 07. Vanilla CSS, no build step.
 *
 * Imports the frozen homepage stylesheet and adds only what checkout introduces.
 * No frozen rule is overridden and no raw brand colour is declared here — every value
 * is a token from design-system/tokens/ui-tokens.css or a color-mix() of frozen tokens.
 *
 * Namespace: .bd-co* / .bd-steps / .bd-field / .bd-pay / .bd-honest.
 * .bd-cart and .bd-cartpage belong to other screens and are never reused here.
 * The order summary is re-declared as .bd-cosum rather than importing the Cart
 * stylesheet, because cart.css also owns page-level sticky-bar padding that would
 * fight this page's own bar. Promoting OrderSummary to a shared component is
 * logged as OD-CO-2.
 */

@import url("../../homepage/css/prototype.css?v=s05-08");

:root { --bd-cobar-h: 68px; }

/* ------------------------------------------------------------- page head */
.bd-copage__head { padding-block: var(--bd-space-l) 0; }
.bd-copage__title {
  margin: 0; font-size: var(--bd-font-size-h2); line-height: var(--bd-line-height-h2);
  font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); letter-spacing: -0.01em;
}
.bd-copage__sub { margin: 6px 0 0; font-size: var(--bd-font-size-sm); color: var(--bd-text-muted); }

/* --------------------------------------------------------- step context */
.bd-steps { margin-block: var(--bd-space-m) 0; }
.bd-steps__list {
  display: flex; align-items: stretch; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.bd-steps__item {
  flex: 1 1 0; min-inline-size: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; min-block-size: var(--bd-target-min);
  background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-subtle);
  border-radius: var(--bd-radius-sm);
  font-size: var(--bd-font-size-sm); color: var(--bd-text-muted);
}
.bd-steps__link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: var(--bd-target-min); min-inline-size: var(--bd-target-min);
  text-decoration: none; color: inherit;
}
.bd-steps__mark {
  flex: none; inline-size: 24px; block-size: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: var(--bd-font-size-xs); font-weight: var(--bd-font-weight-bold);
  background: var(--bd-surface-raised); color: var(--bd-text-muted);
  border: 1px solid var(--bd-border-subtle);
}
.bd-steps__mark .bd-i { inline-size: 14px; block-size: 14px; }
.bd-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* DONE — check mark + brand fill (structure + glyph, never colour alone) */
.bd-steps__item[data-state="done"] { color: var(--bd-text-strong); }
.bd-steps__item[data-state="done"] .bd-steps__mark {
  background: var(--bd-indigo); color: var(--bd-text-on-brand); border-color: transparent;
}
.bd-steps__item[data-state="done"] .bd-steps__link:hover .bd-steps__label { color: var(--bd-text-link); }

/* CURRENT — turquoise edge + bold label + filled mark */
.bd-steps__item[data-state="current"] {
  color: var(--bd-text-strong); font-weight: var(--bd-font-weight-bold);
  border-color: var(--bd-state-active-color); box-shadow: var(--bd-state-active-ring);
  background: var(--bd-surface-tint-active);
}
.bd-steps__item[data-state="current"] .bd-steps__mark {
  background: var(--bd-midnight); color: var(--bd-pearl); border-color: transparent;
}

/* NEXT — on this page, below */
.bd-steps__item[data-state="next"] { color: var(--bd-text-default); }

/* UPCOMING — reduced emphasis, dashed edge */
.bd-steps__item[data-state="upcoming"] {
  border-style: dashed; opacity: .8;
}

/* ---------------------------------------------------------------- layout */
.bd-copage {
  display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--bd-space-xl); align-items: start;
  padding-block: var(--bd-space-l) var(--bd-section-gap);
}
.bd-coform { display: grid; gap: 12px; min-inline-size: 0; }

/* --------------------------------------------------------------- section */
.bd-cosec {
  padding: var(--bd-space-l); background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-subtle); border-radius: var(--bd-card-radius);
}
.bd-cosec__title {
  margin: 0 0 4px; font-size: var(--bd-font-size-h3); line-height: var(--bd-line-height-h3);
  font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong);
}
.bd-cosec__note { margin: 0 0 var(--bd-space-m); font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }

/* ------------------------------------------------------------ form fields */
.bd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bd-field { display: flex; flex-direction: column; gap: 5px; min-inline-size: 0; }
.bd-field--wide { grid-column: 1 / -1; }
.bd-field__label {
  font-size: var(--bd-font-size-sm); font-weight: var(--bd-font-weight-medium);
  color: var(--bd-text-strong);
}
.bd-field__req { color: var(--bd-text-link); }
.bd-field__input {
  font: inherit; font-size: var(--bd-font-size-sm); color: var(--bd-text-strong);
  min-block-size: var(--bd-target-min); padding: 10px 12px;
  background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-default); border-radius: var(--bd-radius-sm);
  inline-size: 100%; max-inline-size: 100%;
}
.bd-field__input:hover { border-color: var(--bd-border-brand); }
.bd-field__input:focus-visible { box-shadow: var(--bd-focus-ring); border-color: var(--bd-border-brand); }
.bd-field__input--area { min-block-size: 88px; resize: vertical; line-height: var(--bd-line-height-sm); }
select.bd-field__input { appearance: none; padding-inline-end: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-repeat: no-repeat;
}
.bd-field__hint { margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }

/* error: icon + text + border weight — never colour alone */
.bd-field__err {
  margin: 0; display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--bd-font-size-xs); font-weight: var(--bd-font-weight-medium);
  color: var(--bd-text-strong);
}
.bd-field__err .bd-i { inline-size: 15px; block-size: 15px; flex: none; margin-block-start: 1px; color: var(--bd-indigo); }
.bd-field__input[aria-invalid="true"] {
  border-width: 2px; border-color: var(--bd-indigo);
  background: var(--bd-surface-tint-brand);
}

/* ----------------------------------------------------------- payment ---- */
.bd-pay { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.bd-pay__opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; min-block-size: var(--bd-target-min);
  background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-default); border-radius: var(--bd-card-radius);
  cursor: pointer;
}
.bd-pay__opt:has(input:checked) {
  border-color: var(--bd-state-active-color); box-shadow: var(--bd-state-active-ring);
  background: var(--bd-surface-tint-active);
}
.bd-pay__opt:focus-within { box-shadow: var(--bd-focus-ring); }
/* The control itself carries the 44 × 44 target, not just its label. The visual dot stays
   20 px; the extra area is absorbed with equal negative margin so the row keeps its rhythm. */
.bd-pay__opt input {
  appearance: none; -webkit-appearance: none;
  inline-size: var(--bd-target-min); block-size: var(--bd-target-min);
  margin: -10px -12px -10px -10px; flex: none;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer;
}
.bd-pay__opt input::before {
  content: ""; inline-size: 20px; block-size: 20px; border-radius: 999px;
  border: 2px solid var(--bd-border-default); background: var(--bd-surface-card);
}
.bd-pay__opt input:checked::before {
  border-color: var(--bd-indigo);
  background: radial-gradient(circle at 50% 50%, var(--bd-indigo) 0 5px, var(--bd-surface-card) 6px);
}
@media (forced-colors: active) {
  .bd-pay__opt input { appearance: auto; -webkit-appearance: auto; inline-size: 20px; block-size: 20px; margin: 2px 0 0; }
  .bd-pay__opt input::before { content: none; }
}
.bd-pay__icon { flex: none; color: var(--bd-indigo); }
.bd-pay__icon .bd-i { inline-size: 22px; block-size: 22px; }
.bd-pay__body { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.bd-pay__title { font-size: var(--bd-font-size-sm); font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); }
.bd-pay__note { font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }

/* honest prototype statement */
.bd-honest {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--bd-surface-raised);
  border: 1px solid var(--bd-border-subtle); border-radius: var(--bd-radius-sm);
  font-size: var(--bd-font-size-xs); color: var(--bd-text-default);
}
.bd-honest .bd-i { inline-size: 18px; block-size: 18px; flex: none; color: var(--bd-indigo); margin-block-start: 1px; }
.bd-honest b { color: var(--bd-text-strong); }

/* --------------------------------------------------------- order summary */
.bd-cosum {
  position: sticky; inset-block-start: calc(72px + var(--bd-space-m));
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--bd-space-l); background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-subtle); border-radius: var(--bd-card-radius);
}
.bd-cosum__title { margin: 0; font-size: var(--bd-font-size-h3); font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); }
.bd-cosum__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bd-coline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.bd-coline__media { inline-size: 56px; border-radius: var(--bd-radius-xs); overflow: hidden; background: var(--bd-surface-raised); }
.bd-coline__media img { aspect-ratio: 4 / 3; block-size: auto; inline-size: 100%; object-fit: cover; }
.bd-coline__body { min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-coline__title { margin: 0; font-size: var(--bd-font-size-sm); font-weight: var(--bd-font-weight-medium); color: var(--bd-text-strong); line-height: 1.3; }
.bd-coline__seller { margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }
.bd-coline__qty { margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); font-variant-numeric: tabular-nums; }
.bd-coline__price { margin: 0; font-size: var(--bd-font-size-sm); font-weight: var(--bd-font-weight-bold);
  color: var(--bd-text-price); font-variant-numeric: tabular-nums; text-align: end; }
.bd-cosum__edit { margin: 0; font-size: var(--bd-font-size-xs); }
.bd-cosum__edit a { display: inline-flex; align-items: center; min-block-size: var(--bd-target-min); }
.bd-cosum__rows { display: grid; gap: 8px; margin: 0; padding-block-start: 12px; border-block-start: 1px solid var(--bd-border-subtle); }
.bd-cosum__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bd-space-m); font-size: var(--bd-font-size-sm); }
.bd-cosum__row dt { color: var(--bd-text-muted); margin: 0; }
.bd-cosum__row dd { margin: 0; color: var(--bd-text-strong); font-variant-numeric: tabular-nums; }
.bd-cosum__note { margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }
.bd-cosum__note:empty { display: none; }
.bd-cosum__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bd-space-m);
  margin: 0; padding-block-start: 12px; border-block-start: 1px solid var(--bd-border-subtle);
}
.bd-cosum__total dt { margin: 0; font-size: var(--bd-font-size-body); font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong); }
.bd-cosum__total dd { margin: 0; font-size: 24px; font-weight: var(--bd-font-weight-bold);
  color: var(--bd-text-price); font-variant-numeric: tabular-nums; }
.bd-cosum__msg { margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-strong); }
.bd-cosum__msg:empty { display: none; }
.bd-cosum__safe { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }
.bd-cosum__safe .bd-i { inline-size: 16px; block-size: 16px; color: var(--bd-indigo); flex: none; }

[hidden] { display: none !important; }

/* mobile sticky completion bar — hidden by default, shown below 768 */
.bd-cobar { display: none; }

/* ==================================================== BREAKPOINTS ==== */

@media (max-width: 1023px) {
  .bd-copage { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: var(--bd-space-l); }
  .bd-cosum { inset-block-start: calc(64px + var(--bd-space-s)); }
  .bd-steps__list { gap: 6px; }
  .bd-steps__item { padding: 10px; }
}

@media (max-width: 899px) {
  .bd-copage { grid-template-columns: minmax(0, 1fr); }
  .bd-cosum { position: static; }
}

@media (max-width: 767px) {
  .bd-copage__head { padding-block: var(--bd-space-m) 0; }
  .bd-copage__title { font-size: var(--bd-font-size-h3); }
  .bd-copage { gap: var(--bd-space-m); padding-block: var(--bd-space-s) var(--bd-section-gap); }
  .bd-cosec { padding: var(--bd-space-m); }
  .bd-fields { grid-template-columns: minmax(0, 1fr); }

  /* steps stay one line: the label is dropped for non-current steps, the number
     and the visually hidden status keep the meaning */
  .bd-steps__list { gap: 4px; }
  .bd-steps__item { flex: 0 0 auto; padding: 8px 10px; gap: 6px; }
  .bd-steps__item[data-state="current"] { flex: 1 1 auto; min-inline-size: 0; }
  .bd-steps__item:not([data-state="current"]) .bd-steps__label {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* the desktop summary CTA is replaced by the sticky bar on mobile */
  .bd-cosum__cta { display: none; }
  .bd-cobar {
    display: flex; align-items: center; gap: var(--bd-space-m);
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
    min-block-size: var(--bd-cobar-h);
    padding: 10px var(--bd-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bd-surface-card); border-block-start: 1px solid var(--bd-border-subtle);
    box-shadow: 0 -2px 12px color-mix(in srgb, var(--bd-midnight) 8%, transparent);
  }
  .bd-cobar__total { display: flex; flex-direction: column; flex: none; }
  .bd-cobar__label { font-size: 11px; color: var(--bd-text-muted); }
  .bd-cobar__value {
    font-size: var(--bd-font-size-body); font-weight: var(--bd-font-weight-bold);
    color: var(--bd-text-price); font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .bd-cobar .bd-btn { flex: 1; }
  /* the page — not <main> — reserves the space, because the footer sits outside <main> */
  main { padding-block-end: 0; }
  body { padding-block-end: calc(var(--bd-cobar-h) + var(--bd-space-m) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 359px) {
  .bd-steps__item { padding: 8px; }
  .bd-cobar { gap: var(--bd-space-s); }
}

/* -------------------------------------------------------- empty cart state
   Sprint 0.5 Step 05. Built from the existing tokens and the existing button component —
   no new visual language. Shown instead of the order form when there is nothing to order. */
.bd-coempty {
  display: grid; justify-items: center; text-align: center; gap: 8px;
  margin-block: var(--bd-space-xl); padding: var(--bd-space-xl) var(--bd-space-l);
  background: var(--bd-surface-card);
  border: 1px solid var(--bd-border-subtle); border-radius: var(--bd-card-radius);
}
.bd-coempty__icon { inline-size: 28px; block-size: 28px; color: var(--bd-indigo); }
.bd-coempty__title {
  margin: 0; font-size: var(--bd-font-size-h3); line-height: var(--bd-line-height-h3);
  font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong);
}
.bd-coempty__body { margin: 0; max-inline-size: 44ch; color: var(--bd-text-muted); }
.bd-coempty__actions {
  display: flex; flex-wrap: wrap; gap: var(--bd-space-s); justify-content: center;
  margin-block-start: var(--bd-space-s);
}
.bd-coempty__actions .bd-btn { min-block-size: var(--bd-target-min); }

/* ------------------------------------------------------ order confirmation
   Sprint 0.5 Step 07. Same construction as the empty state: existing tokens, existing
   button component, no new visual language. */
.bd-codone {
  display: grid; justify-items: center; text-align: center; gap: 10px;
  margin-block: var(--bd-space-xl); padding: var(--bd-space-xl) var(--bd-space-l);
  background: var(--bd-surface-card);
  border: 1px solid var(--bd-state-active-color); border-radius: var(--bd-card-radius);
}
.bd-codone__icon { inline-size: 30px; block-size: 30px; color: var(--bd-turquoise); }
.bd-codone__title {
  margin: 0; font-size: var(--bd-font-size-h2); line-height: var(--bd-line-height-h2);
  font-weight: var(--bd-font-weight-bold); color: var(--bd-text-strong);
}
.bd-codone__body { margin: 0; max-inline-size: 46ch; color: var(--bd-text-muted); }
.bd-codone__id {
  margin: 0; display: grid; gap: 2px; padding: 12px 18px;
  background: var(--bd-surface-raised); border-radius: var(--bd-radius-sm);
}
.bd-codone__idlabel { font-size: var(--bd-font-size-xs); color: var(--bd-text-muted); }
.bd-codone__id strong {
  font-size: var(--bd-font-size-h3); color: var(--bd-text-strong);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.bd-codone__totals { display: grid; gap: 6px; margin: 0; min-inline-size: min(320px, 100%); }
.bd-codone__totals > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bd-space-m);
  font-size: var(--bd-font-size-sm);
}
.bd-codone__totals dt { margin: 0; color: var(--bd-text-muted); }
.bd-codone__totals dd { margin: 0; color: var(--bd-text-strong); font-variant-numeric: tabular-nums; }
.bd-codone__totals > div:last-child dt,
.bd-codone__totals > div:last-child dd {
  font-weight: var(--bd-font-weight-bold); color: var(--bd-text-price);
}
.bd-codone__lines {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 4px;
  font-size: var(--bd-font-size-sm); color: var(--bd-text-default);
  min-inline-size: min(320px, 100%);
}
.bd-codone__lines li { display: flex; justify-content: space-between; gap: var(--bd-space-m); }
.bd-codone__actions {
  display: flex; flex-wrap: wrap; gap: var(--bd-space-s); justify-content: center;
  margin-block-start: var(--bd-space-s);
}
.bd-codone__actions .bd-btn { min-block-size: var(--bd-target-min); }