/* ---------------------------------------------------------------
   CUSTOM BOARD PAGE (/custom-board/, /th/custom-board/)
   Desktop: form left, sticky preview + send on the right.
   Phone: compact sticky preview on top, form, then summary + send.
--------------------------------------------------------------- */
.cb-hero { background: var(--off-white); padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.75rem); }
.cb-hero .breadcrumbs { margin-bottom: 1.5rem; }
.cb-kicker { display: inline-block; margin-bottom: 1rem; padding: 0.3rem 0.8rem; border: 2px solid var(--black); border-radius: 999px; background: var(--lime); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
html[lang="th"] .cb-kicker { letter-spacing: 0; }
.cb-hero h1 { font-size: clamp(2.3rem, 6vw, 4.25rem); max-width: 16ch; }
.cb-lead { max-width: 60ch; margin-top: 1rem; }

.cb-builder-section { background: var(--off-white); padding-bottom: var(--section-pad); }
.cb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }

/* form */
.cb-form { background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(1.15rem, 3vw, 2rem); min-width: 0; }
.cb-step { border: 0; margin: 0; padding: 1.35rem 0; border-bottom: 2px dashed rgba(17,17,17,0.14); min-width: 0; }
.cb-step:first-child { padding-top: 0.25rem; }
.cb-step:last-child { border-bottom: 0; padding-bottom: 0.25rem; }
.cb-legend { float: left; width: 100%; padding: 0; margin: 0 0 0.85rem; display: flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; }
.cb-legend + * { clear: both; }
.cb-num { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--black); border-radius: 50%; background: var(--lime); font-size: 0.8rem; }
.cb-hint { margin: 0 0 0.8rem; font-size: 0.88rem; color: #55554f; }
.cb-hint a { color: var(--black); font-weight: 700; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cb-step.is-flash { animation: cbFlash 1.1s ease; border-radius: 12px; }
@keyframes cbFlash { 0%, 60% { background: rgba(215,242,56,0.45); } 100% { background: transparent; } }

.cb-opts { display: grid; gap: 0.6rem; }
.cb-opts--tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cb-opts--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-step="concave"] .cb-opts--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cb-opts--chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cb-opt { position: relative; display: block; cursor: pointer; min-width: 0; }
.cb-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cb-opt-box { display: flex; flex-direction: column; gap: 0.2rem; height: 100%; padding: 0.8rem 0.9rem; border: 2px solid var(--black); border-radius: 12px; background: var(--white); transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; }
.cb-opt:hover .cb-opt-box { transform: translate(-1px, -1px); box-shadow: var(--shadow-sm); }
.cb-opt input:checked + .cb-opt-box { background: var(--lime); box-shadow: var(--shadow-sm); }
.cb-opt input:focus-visible + .cb-opt-box { outline: 3px solid var(--black); outline-offset: 3px; }
.cb-opt-label { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.cb-opt-sub { font-size: 0.8rem; line-height: 1.35; color: #5d5d57; }
.cb-opt input:checked + .cb-opt-box .cb-opt-sub { color: #2b2c22; }
.cb-opt--tiles .cb-opt-box { align-items: center; text-align: center; padding: 0.75rem 0.45rem 0.8rem; }
.cb-opt--tiles .cb-opt-label { font-size: 0.9rem; }
.cb-shape-ic { width: 100%; max-width: 92px; height: auto; margin-bottom: 0.35rem; fill: var(--off-white); stroke: var(--black); stroke-width: 2; overflow: visible; }
.cb-opt input:checked + .cb-opt-box .cb-shape-ic { fill: var(--white); }
.cb-opt--chips .cb-opt-box { flex-direction: row; padding: 0.55rem 0.95rem; border-radius: 999px; }
.cb-opt--chips .cb-opt-label { font-variant-numeric: tabular-nums; }

.cb-input { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 0.75rem 0.9rem; border: 2px solid var(--black); border-radius: 12px; background: var(--white); color: var(--black); }
.cb-input:focus { outline: 3px solid var(--lime); outline-offset: 1px; }
.cb-other, .cb-date { margin-top: 0.7rem; }
.cb-date { max-width: 240px; }
.cb-stains { margin-top: 0.9rem; }
.cb-mini-h { margin: 0 0 0.55rem; font-size: 0.85rem; font-weight: 700; }
.cb-stain-name { font-weight: 400; color: #55554f; }
.cb-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cb-swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--black); cursor: pointer; }
.cb-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--black); }
.cb-swatch:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.cb-qty { display: inline-flex; align-items: stretch; gap: 0.5rem; }
.cb-qty-btn { width: 46px; min-height: 46px; border: 2px solid var(--black); border-radius: 12px; background: var(--white); font: inherit; font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.cb-qty-btn:hover { background: var(--lime); }
.cb-qty-input { width: 84px; text-align: center; font-weight: 700; }
.cb-you { display: grid; gap: 0.7rem; }

/* preview + send */
.cb-aside { position: sticky; top: 124px; display: grid; gap: 1rem; min-width: 0; }
.cb-preview { background: var(--black); color: #f3f2ed; border: var(--border); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--lime); padding: 1.15rem; }
.cb-preview-h { margin: 0 0 0.7rem; color: var(--lime); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
html[lang="th"] .cb-preview-h { letter-spacing: 0; }
.cb-board-wrap { border-radius: 12px; background: radial-gradient(ellipse 70% 70% at 50% 50%, #2a2a27 0%, #171715 70%); padding: 0.4rem 0.6rem; }
.cb-board { display: block; width: 100%; height: auto; }
.cb-wlabel { fill: #f3f2ed; font-size: 13px; font-weight: 700; font-family: var(--font-sans); }
.cb-found { margin: 0.7rem 0 0; color: var(--lime); font-size: 0.82rem; line-height: 1.4; }
.cb-ticket { margin: 0.85rem 0 0; }
.cb-ticket div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.86rem; }
.cb-ticket dt { color: #a3a29b; }
.cb-ticket dd { margin: 0; color: #f3f2ed; font-weight: 600; overflow-wrap: anywhere; }
.cb-empty { color: #73726c; font-weight: 400; }
.cb-send { background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem; }
.cb-send .cb-ticket { display: none; }
.cb-send-btn { width: 100%; }
.cb-send-btn.is-disabled { opacity: 0.55; }
.cb-need { margin: 0.65rem 0 0; font-size: 0.85rem; font-weight: 600; }
.cb-or { margin: 0.75rem 0 0; font-size: 0.88rem; }
.cb-or a { color: var(--black); font-weight: 700; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cb-note { margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.45; color: #5d5d57; }
.cb-toast { margin: 0.5rem 0 0; font-size: 0.82rem; font-weight: 700; }
.cb-toast:empty { display: none; }

/* how it works + faq */
.cb-how-section { padding-block: var(--section-pad); }
.cb-how-section h2, .cb-faq h2 { text-align: center; margin-bottom: 2rem; }
.cb-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cb-how li { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem; border: var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.cb-how-n { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--black); border-radius: 50%; background: var(--lime); font-weight: 700; margin-bottom: 0.3rem; }
.cb-how b { text-transform: uppercase; font-size: 0.98rem; }
.cb-how span:last-child { color: #55554f; font-size: 0.92rem; line-height: 1.5; }
.cb-faq { background: var(--off-white); }
.cb-more { max-width: 760px; margin: 2rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border: 2px dashed var(--black); border-radius: var(--radius); }
.cb-more p { margin: 0; max-width: 46ch; }

@media (max-width: 900px) {
  .cb-layout { grid-template-columns: minmax(0, 1fr); }
  .cb-aside { display: contents; }
  /* compact preview stays in view while picking options */
  .cb-preview { order: -1; position: sticky; top: calc(var(--cb-header, 86px) + 8px); z-index: 5; padding: 0.6rem 0.75rem; box-shadow: 4px 4px 0 var(--lime); }
  .cb-preview .cb-preview-h, .cb-preview .cb-ticket, .cb-preview .cb-found { display: none; }
  .cb-board-wrap { padding: 0.15rem 0.4rem; }
  .cb-board { max-height: 92px; margin: 0 auto; }
  .cb-send .cb-ticket { display: block; margin: 0 0 1rem; background: var(--black); border-radius: 12px; padding: 0.4rem 0.9rem; }
  .cb-send .cb-ticket div:first-child { border-top: 0; }
  .cb-how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) and (min-width: 901px), (max-width: 700px) {
  [data-step="concave"] .cb-opts--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (min-width: 901px), (max-width: 640px) {
  .cb-opts--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cb-opt-box { padding: 0.7rem 0.75rem; }
  .cb-opt--tiles .cb-opt-sub { display: none; }
  .cb-more { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cb-opt-box { transition: none; } .cb-step.is-flash { animation: none; } }
.cb-form [hidden], .cb-aside [hidden] { display: none !important; }