/* Entripy design system — Blue #0048A5, Yellow #FFE710 (CTAs, square corners,
   ALL-CAPS labels, never as text colour), Ink #1D1E29, Steel-Lite surfaces. */
@font-face { font-family: "TT Hoves Pro"; font-weight: 400; src: url("../fonts/TT_Hoves_Pro_Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "TT Hoves Pro"; font-weight: 500; src: url("../fonts/TT_Hoves_Pro_Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "TT Hoves Pro"; font-weight: 600; src: url("../fonts/TT_Hoves_Pro_DemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "TT Hoves Pro"; font-weight: 700; src: url("../fonts/TT_Hoves_Pro_Bold.ttf") format("truetype"); font-display: swap; }

:root {
  --blue: #0048A5;
  --yellow: #FFE710;
  --yellow-hover: #F5DD00;
  --ink: #1D1E29;
  --muted: #666666;
  --grey: #7C7D84;
  --line: #E1E3E2;
  --surface: #F4F5F4;
  --surface-2: #EFF1F0;
  --tint: #EFF4FB;
  --tint-line: #B8CDE9;
  --note: #FDF5A8;
  --danger: #FC5100;
  --danger-bg: #FDECEA;
  --danger-ink: #B23000;
  --ok-bg: #CBE7D5;
  --ok-ink: #00706E;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  font-family: "TT Hoves Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
input, select, button, textarea { font-family: inherit; }

/* ── Chrome ─────────────────────────────────────────────────────────────── */
.site-header {
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.site-header img { height: 44px; display: block; }
.site-header .divider { width: 1px; height: 32px; background: var(--line); }
.site-header .title { font-weight: 700; font-size: 16px; letter-spacing: 0.08em; color: var(--blue); }
.spacer { flex: 1; }

.hero { background: var(--blue); padding: 28px 24px; }
.hero h1 { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.05; margin: 0; }
.hero p { color: #B8CDE9; font-size: 15px; margin: 6px 0 0; }

.shell { max-width: 1120px; margin: 0 auto; padding: 20px 24px 64px; width: 100%; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.shell main { flex: 1 1 600px; min-width: 0; }
.card { background: #fff; box-shadow: var(--shadow); padding: 28px; }
.card h2 { font-size: 22px; font-weight: 700; color: var(--blue); margin: 0; }
.card .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }

.site-footer { background: var(--surface-2); padding: 18px 24px; text-align: center; font-size: 12px; color: var(--grey); }

/* ── Stepper ────────────────────────────────────────────────────────────── */
.stepper { max-width: 1120px; margin: 0 auto; padding: 20px 24px 0; width: 100%; display: flex; gap: 4px; flex-wrap: wrap; }
.stepper button {
  flex: 1 1 120px; border: none; cursor: pointer; padding: 10px 8px; text-align: left;
  background: var(--surface-2); border-top: 3px solid var(--line);
}
.stepper button .n { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--grey); }
.stepper button .l { font-size: 13px; font-weight: 600; color: var(--grey); margin-top: 2px; }
.stepper button.done { background: #fff; border-top-color: var(--blue); }
.stepper button.done .n, .stepper button.done .l { color: var(--blue); }
.stepper button.active { background: #fff; border-top-color: var(--yellow); }
.stepper button.active .n { color: var(--blue); }
.stepper button.active .l { color: var(--ink); }
.stepper button[disabled] { cursor: default; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--yellow); color: var(--ink); border: none; padding: 16px 32px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer;
}
.btn-primary:hover { background: var(--yellow-hover); }
.btn-primary[disabled] { background: #E7E9E8; color: var(--grey); cursor: not-allowed; }
.btn-secondary {
  background: #fff; border: 1.5px solid var(--blue); color: var(--blue);
  padding: 14px 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer;
}
.btn-secondary:hover { background: var(--tint); }
.btn-small { padding: 10px 18px; font-size: 12px; }
.btn-link { background: none; border: none; color: var(--danger); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.icon-btn { width: 30px; height: 30px; border: none; background: none; cursor: pointer; color: var(--grey); font-size: 16px; }
.icon-btn:hover { color: var(--danger); }

/* ── Choice grids ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 10px; margin-top: 20px; }
.grid.divisions { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grid.colours { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid.designs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.grid.products { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid.bundles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.choice { cursor: pointer; text-align: left; padding: 14px; background: #fff; border: 1.5px solid var(--line); }
.choice:hover { border-color: var(--blue); }
.choice.selected { background: var(--tint); border-color: var(--blue); }
.choice .big { font-size: 20px; font-weight: 700; color: var(--blue); }
.choice .small { font-size: 12px; color: var(--muted); margin-top: 2px; }

.swatch-row { display: flex; align-items: center; gap: 12px; }
.dot { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); flex-shrink: 0; }
.dot.sm { width: 16px; height: 16px; }

.note-box { margin-top: 8px; background: var(--note); padding: 10px 14px; font-size: 13px; display: inline-block; }

/* ── Design cards ───────────────────────────────────────────────────────── */
.design-card { cursor: pointer; text-align: center; padding: 18px 12px 14px; background: #fff; border: 1.5px solid var(--line); position: relative; }
.design-card:hover { border-color: var(--blue); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.design-card.selected { background: var(--tint); border-color: var(--blue); }
.design-card .badge-tag { position: absolute; top: 8px; right: 8px; background: var(--yellow); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 3px 7px; }
.badge { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; border: 1px solid rgba(0,0,0,0.1); object-fit: cover; }
.badge.sm { width: 32px; height: 32px; font-size: 12px; margin: 0; }
.badge.md { width: 44px; height: 44px; font-size: 16px; margin: 0; }
.design-card .name { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; }

.design-row { cursor: pointer; text-align: left; padding: 10px 14px; background: #fff; border: 1.5px solid var(--line); display: flex; align-items: center; gap: 12px; }
.design-row:hover { border-color: var(--blue); }
.design-row.previewing { background: var(--tint); border-color: var(--blue); }
.design-row .name { font-size: 14px; font-weight: 700; }

.variant-toggle { display: flex; border: 1.5px solid var(--blue); }
.variant-toggle button { border: none; cursor: pointer; padding: 8px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; background: #fff; color: var(--blue); }
.variant-toggle button.on { background: var(--blue); color: #fff; }

.preview-pane { border: 1.5px solid var(--line); padding: 20px; position: sticky; top: 16px; z-index: 10; background: #fff; }
.empty-pane { border: 1.5px dashed var(--line); padding: 40px 20px; text-align: center; color: var(--grey); font-size: 14px; }

/* Image frames: uploads always fit inside, never crop. */
.frame { background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.frame img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.frame.placeholder { border: 1.5px dashed var(--line); background: #F7F8F7; color: var(--grey); font-size: 12px; text-align: center; padding: 8px; }

/* Hover zoom: fixed + anchored high so it never covers the strip it came from
   and can't be clipped by a scroll container. */
.zoomwrap { position: relative; }
.zoomwrap .zoombig {
  display: none; position: fixed; left: 50%; top: max(64px, 9vh); transform: translateX(-50%);
  width: min(380px, 80vw); height: min(380px, 46vh); background: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35); padding: 10px; z-index: 90; pointer-events: none;
}
.zoomwrap:hover .zoombig { display: flex; flex-direction: column; gap: 6px; }
.zoombig .cap { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--grey); text-align: center; }
.zoombig .frame { flex: 1; min-height: 0; }

/* ── Product tiles ──────────────────────────────────────────────────────── */
.product-tile { background: var(--surface-2); padding: 10px; display: flex; flex-direction: column; position: relative; }
.product-tile > button { border: none; background: none; padding: 0; cursor: pointer; text-align: center; }
.product-tile .label { margin-top: 6px; font-size: 13px; font-weight: 600; }
.product-tile .note { font-size: 11px; color: var(--grey); }
.tag { display: inline-block; background: #fff; border: 1px solid var(--line); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--blue); padding: 3px 8px; }
.colour-picks { margin-top: 8px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.colour-picks button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); cursor: pointer; padding: 0; }
.colour-picks button.on { border: 2.5px solid var(--blue); }
.chosen { margin-top: 5px; font-size: 11px; color: #4A4B54; text-align: center; }

/* ── Roster + tables ────────────────────────────────────────────────────── */
.row-head { display: flex; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--grey); padding: 0 4px; }
.roster-row { display: flex; gap: 8px; align-items: center; padding: 6px 4px; }
.roster-row:nth-child(even) { background: #F8F9F8; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select {
  padding: 10px 12px; border: 1.5px solid var(--line); font-size: 14px; outline: none; background: #fff;
}
input:focus, select:focus { border-color: var(--blue); }
input.invalid, select.invalid { border-color: var(--danger); }
label.field { display: block; }
label.field > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--grey); margin-bottom: 6px; }
label.field input { width: 100%; }

.counter { background: var(--tint); border: 1px solid var(--tint-line); padding: 10px 16px; font-size: 13px; }

/* ── Sponsor add-on ─────────────────────────────────────────────────────── */
.addon { margin-top: 24px; border: 1.5px solid var(--line); background: #fff; padding: 18px; }
.addon.on { border-color: var(--blue); background: var(--tint); }
.addon h3 { font-size: 16px; font-weight: 700; margin: 0; }
.addon .lede { font-size: 13px; color: #4A4B54; margin-top: 3px; line-height: 1.5; }
.sponsor-item { cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #F8F9F8; border: 1.5px solid var(--line); width: 100%; }
.sponsor-item.on { background: #fff; border-color: var(--blue); }
.sponsor-item .box { width: 16px; height: 16px; border: 1.5px solid #B9BBBA; background: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sponsor-item.on .box { border-color: var(--blue); background: var(--yellow); }
.sponsor-item .name { flex: 1; font-size: 13px; font-weight: 600; }
.sponsor-item .method { font-size: 11px; color: var(--grey); }
.sponsor-item .price { font-size: 13px; font-weight: 700; color: var(--blue); }
.dropzone { cursor: pointer; display: block; width: 200px; text-align: center; border: 1.5px dashed #B9BBBA; padding: 18px 10px; font-size: 12px; font-weight: 600; color: var(--blue); }
.dropzone:hover { border-color: var(--blue); }
.dropzone.invalid { border-color: var(--danger); }

/* ── Association bar ────────────────────────────────────────────────────── */
.assoc-bar { margin-top: 12px; background: var(--tint); border: 1px solid var(--tint-line); padding: 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.assoc-bar img { width: 96px; height: 76px; object-fit: contain; background: #fff; border: 1px solid #D5E2F2; padding: 6px; flex-shrink: 0; }
.assoc-bar .text { flex: 1; min-width: 200px; font-size: 14px; line-height: 1.5; }
.assoc-bar .fine { font-size: 12px; color: var(--grey); margin-top: 3px; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
aside.summary { flex: 1 1 260px; max-width: 340px; background: #fff; box-shadow: var(--shadow); padding: 22px; position: sticky; top: 16px; }
aside.summary h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--grey); border-bottom: 1px solid #EEE; padding-bottom: 10px; margin: 0; }
aside.summary dl { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
aside.summary .line { display: flex; gap: 8px; align-items: center; }
aside.summary .line dt { color: var(--grey); width: 80px; flex-shrink: 0; }
aside.summary .line dd { margin: 0; font-weight: 600; }
.total-box { margin-top: 16px; background: var(--surface-2); padding: 12px 14px; display: flex; align-items: baseline; gap: 8px; }
.total-box .k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--grey); }
.total-box .v { font-size: 20px; font-weight: 700; color: var(--blue); margin-left: auto; }
.fine-print { margin-top: 10px; font-size: 11px; color: var(--grey); line-height: 1.5; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(29,30,41,0.55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; max-width: 680px; width: 100%; max-height: 90vh; overflow: auto; padding: 28px; box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.modal-head { display: flex; align-items: center; gap: 14px; }
.modal-head h2 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; }
.modal-head .sub { font-size: 13px; color: var(--grey); }
.modal-head .close { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--grey); margin-left: auto; }
.modal-head .close:hover { color: var(--ink); }
.pane-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pane-grid .frame { height: 200px; }
.info-bar { margin-top: 14px; background: var(--surface-2); padding: 12px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }

/* ── Messages ───────────────────────────────────────────────────────────── */
.alert { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-ink); font-size: 13px; font-weight: 600; padding: 10px 12px; }
.saved { background: var(--ok-bg); color: var(--ok-ink); font-size: 12px; font-weight: 600; padding: 7px 12px; display: inline-block; }
.blocked { font-size: 12px; color: var(--danger); }
.nav { margin-top: 16px; display: flex; gap: 10px; align-items: center; }

.review-block { border: 1px solid #EEE; padding: 16px 18px; }
.review-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--grey); }
.total-banner { background: var(--note); padding: 14px 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.confirm { max-width: 760px; margin: 48px auto; padding: 0 24px; }
.confirm .card { padding: 48px 40px; text-align: center; }
.confirm .tick { width: 72px; height: 72px; margin: 0 auto 20px; background: var(--ok-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--ok-ink); }

.loading { padding: 48px 24px; text-align: center; color: var(--grey); }