/* Styled after the Louise Madzia shop "made-to-order" form:
   monochrome, editorial, Greed variable font, dotted-rule order rows,
   uppercase tracked labels, [bracket] buttons. */

@font-face {
  font-family: "Greed";
  src: url("/fonts/GreedCollectionVF.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colors */
  --color-background: #ffffff;
  --color-foreground: #000000;
  --color-surface: #f5f5f5;
  --color-accent: #e63026;

  /* Spacing scale (18px = 1rem) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  --edge-text: 0.7rem;

  /* Typography */
  --font-greed: "Greed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tracking-wide: 0.1em;

  /* Transitions */
  --ease-ui: 0.2s ease;
  --hover-opacity: 0.5;
  --hover-spread: 0.04em;
  --disabled-opacity: 0.25;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  margin: 0;
  font-family: var(--font-greed);
  font-weight: 400;
  background: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Bracket button — text spreads slightly on hover, like the reference */
.bracket {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-foreground);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  transition: letter-spacing var(--ease-ui), opacity var(--ease-ui);
}
.bracket:hover {
  letter-spacing: var(--hover-spread);
}
.bracket:disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

/* Layout shell */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--edge-text) calc(var(--spacing-xl) * 2);
}

.head {
  margin-bottom: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.mark {
  --mark-stroke-width: 3.5px;
  width: 64px;
  height: auto;
  flex-shrink: 0;
  color: var(--color-foreground);
  overflow: visible; /* let stroke caps render outside the viewBox bounds */
}
.mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mark-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.head h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
}
.sub {
  margin: var(--spacing-sm) 0 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.8rem;
}

/* Order form — Item / Qty / Price / Total columns, dotted rules */
.order {
  display: flex;
  flex-direction: column;
}

.orderHeader,
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px dotted var(--color-foreground);
  column-gap: var(--spacing-md);
}
.row {
  align-items: center;
}

.orderHeader {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.8rem;
}
.orderHeaderTitle {
  margin: 0;
  font-size: 0.8rem;
  font-weight: inherit;
  text-transform: uppercase;
}
.orderHeaderQty,
.orderHeaderPrice {
  text-align: center;
}

.label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
  text-transform: uppercase;
}
.labelText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--color-surface);
}
.thumb.placeholder {
  background: none; /* reserve space so names stay aligned, no grey clutter */
}

/* Qty stepper — ◂ [input] ▸ */
.qtyCell {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
}
.qtyArrow {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--color-foreground);
  line-height: 1;
  transition: opacity var(--ease-ui);
}
.qtyArrow:hover {
  opacity: var(--hover-opacity);
}
.qtyArrow:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
.qtyValue {
  min-width: 1.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.price {
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.soldOut {
  text-transform: uppercase;
  text-align: center;
  font-style: italic;
  opacity: var(--hover-opacity);
}

/* Total + submit — fixed to the bottom so it's always reachable */
.bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-md) var(--edge-text);
  background: var(--color-background);
  border-top: 1px solid var(--color-foreground);
}
.total {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.total strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pay {
  font-size: 1rem;
}

.loading {
  padding: var(--spacing-xl) 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.8rem;
  opacity: var(--hover-opacity);
}

/* Result modal — QR + link */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  z-index: 10;
}
.modal[hidden] {
  display: none;
}
.card {
  position: relative;
  background: var(--color-background);
  border: 1px solid var(--color-foreground);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.card h2 {
  margin: 0 0 var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 1rem;
  font-weight: 500;
}
.close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-md);
  background: none;
  border: none;
  color: var(--color-foreground);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.qr {
  display: inline-block;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-foreground);
}
.qr canvas {
  display: block;
}
.resultActions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}
.link {
  display: inline-block;
  font-size: 0.95rem;
}
/* success.html uses .link standalone (no .resultActions wrapper) */
.wrap > .link {
  margin-top: var(--spacing-lg);
}

/* Thank-you / success page — centered column */
.thanks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) var(--edge-text);
}
.thanksTitle {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 1.4rem;
  font-weight: 500;
}
.thanksMsg {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.8rem;
}
.thanksLink {
  font-size: 0.95rem;
}
.thanksMark {
  width: 56px;
  margin-top: var(--spacing-md);
}

/* Bank transfer details */
.bankDetails {
  margin: 0;
  text-align: left;
}
.bankDetails > div {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dotted var(--color-foreground);
}
.bankDetails > div:last-child {
  border-bottom: none;
}
.bankDetails dt {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.7rem;
  opacity: var(--hover-opacity);
  margin-bottom: 0.15em;
}
.bankDetails dd {
  margin: 0;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.hint {
  margin: var(--spacing-md) 0 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.7rem;
  opacity: var(--hover-opacity);
}

/* Mobile: keep everything on one line — just tighten thumbnail + gaps */
@media (max-width: 600px) {
  .wrap {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
  .orderHeader,
  .row {
    column-gap: var(--spacing-sm);
  }
  .thumb {
    width: 40px;
    height: 40px;
  }
}