/*
 * back-your-own.css — scoped styles for the $10-door module. All tokens fall back to the looptlab-site palette
 * so the module looks right both mounted (inherits the site's :root vars) and standalone (uses the fallbacks).
 * Everything is namespaced under .byo to avoid colliding with host styles.
 */
.byo {
  --byo-ink: var(--ink, #292019);
  --byo-ink-soft: var(--ink-soft, #736354);
  --byo-ink-faint: var(--ink-faint, #7D6C5A);
  --byo-coral: var(--coral, #F26A3C);
  --byo-coral-deep: var(--coral-deep, #D8481D);
  --byo-plum: var(--plum, #5B4657);
  --byo-plum-deep: var(--plum-deep, #45333F);
  --byo-line: var(--line-2, #E7DCCB);
  --byo-panel: var(--panel, #FFFFFF);
  --byo-fd: var(--fd, "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif);
  --byo-fb: var(--fb, "Hanken Grotesk", system-ui, "Segoe UI", Roboto, Arial, sans-serif);
  font-family: var(--byo-fb);
  color: var(--byo-ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.byo-label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--byo-ink-faint);
}

.byo-h {
  font-family: var(--byo-fd);
  font-weight: 800;
  font-size: 1.3rem;
  margin: 2px 0 0;
  letter-spacing: -.01em;
}
.byo-price { color: var(--byo-plum); }

.byo-sub {
  margin: 0;
  color: var(--byo-ink-soft);
  font-size: .92rem;
  line-height: 1.5;
}

.byo-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--byo-fb);
  font-size: .95rem;
  color: var(--byo-ink);
  background: var(--byo-panel);
  border: 1.5px solid var(--byo-line);
  border-radius: 12px;
  padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.byo-input::placeholder { color: var(--byo-ink-faint); opacity: .85; }
.byo-input:focus {
  outline: none;
  border-color: var(--byo-coral);
  box-shadow: 0 0 0 3px rgba(242, 106, 60, .16);
}
.byo-prompt { resize: vertical; min-height: 74px; line-height: 1.5; }

.byo-count {
  margin: -4px 2px 0;
  align-self: flex-end;
  font-size: .72rem;
  color: var(--byo-ink-faint);
  font-variant-numeric: tabular-nums;
}

.byo-btn {
  font-family: var(--byo-fd);
  font-weight: 800;
  font-size: .96rem;
  color: #fff;
  background: var(--byo-plum);
  border: 0;
  border-radius: 12px;
  padding: 13px 18px;
  cursor: pointer;
  box-shadow: 0 8px 18px -9px rgba(69, 51, 63, .75);
  transition: transform .15s ease, background .15s ease;
}
.byo-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--byo-plum-deep); }
.byo-btn:active:not(:disabled) { transform: translateY(0); }
.byo-btn:disabled { opacity: .7; cursor: default; }

.byo-msg {
  min-height: 1.1em;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--byo-ink-soft);
}
.byo-msg-ok { color: var(--byo-coral-deep); }
.byo-msg-err { color: #b4231a; }

@media (prefers-color-scheme: dark) {
  .byo {
    --byo-ink: var(--ink, #F3ECE2);
    --byo-ink-soft: var(--ink-soft, #C6B6A4);
    --byo-ink-faint: var(--ink-faint, #A2917E);
    --byo-line: var(--line-2, #4A3E33);
    --byo-panel: var(--panel, #241C15);
  }
}