/*
 * Băiatul cu Imprimanta — componente de bază (v1). Necesită tokens.css.
 * Clase cu prefixul `bci-`, ca să poată fi folosite și în configurator fără conflicte.
 * Copie publică: https://baiatulcuimprimanta.ro/staging/components.css · Documentație: docs/design-system.md
 */

/* ---------- Butoane ---------- */
.bci-btn {
  --_bg: var(--bci-ink);
  --_fg: var(--bci-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--bci-control-h);
  padding: 0 22px;
  border: var(--bci-border-strong) solid var(--bci-ink);
  border-radius: var(--bci-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font: 400 1rem/1.1 var(--bci-font-display);
  letter-spacing: var(--bci-tracking-display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--bci-shadow-sm);
  transition:
    transform var(--bci-dur-fast),
    box-shadow var(--bci-dur-fast),
    background var(--bci-dur);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.bci-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--bci-ink);
}
.bci-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--bci-ink);
}
.bci-btn:focus-visible {
  outline: 3px solid var(--bci-focus);
  outline-offset: 3px;
}
.bci-btn[disabled],
.bci-btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}
.bci-btn svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.bci-btn--primary {
  --_bg: var(--bci-orange);
  --_fg: var(--bci-ink);
}
.bci-btn--primary:hover {
  --_bg: var(--bci-orange-hover);
}
.bci-btn--whatsapp {
  --_bg: var(--bci-success);
  --_fg: var(--bci-white);
}
.bci-btn--whatsapp:hover {
  --_bg: var(--bci-success-hover);
}
.bci-btn--ghost {
  --_bg: transparent;
  --_fg: var(--bci-ink);
}
.bci-btn--ghost:hover {
  --_bg: var(--bci-paper);
}
.bci-btn--sm {
  min-height: var(--bci-touch);
  padding: 0 16px;
  font-size: var(--bci-text-sm);
  border-width: var(--bci-border);
}
.bci-btn--lg {
  min-height: 60px;
  padding: 0 28px;
  font-size: 1.125rem;
}
.bci-btn--block {
  width: 100%;
}

/* ---------- Link cu săgeată ---------- */
.bci-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--bci-touch);
  font: 400 1rem/1.2 var(--bci-font-display);
  color: var(--bci-ink);
  text-decoration: underline;
  text-decoration-color: var(--bci-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* ---------- Etichete (eyebrow) și badge-uri ---------- */
.bci-eyebrow {
  display: inline-block;
  margin: 0 0 var(--bci-space-3);
  font: 800 var(--bci-text-xs) / 1.2 var(--bci-font-body);
  letter-spacing: var(--bci-tracking-caps);
  text-transform: uppercase;
  color: var(--bci-orange-text);
}
.bci-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 2px solid var(--bci-ink);
  border-radius: var(--bci-radius-pill);
  background: var(--bci-orange);
  color: var(--bci-ink);
  font: 800 var(--bci-text-xs) / 1.2 var(--bci-font-body);
  white-space: nowrap;
}
.bci-badge--dark {
  background: var(--bci-ink);
  color: var(--bci-cream);
}
.bci-badge--soft {
  background: var(--bci-paper);
}
.bci-badge--success {
  background: var(--bci-success-soft);
  border-color: var(--bci-success);
  color: var(--bci-success);
}

/* ---------- Carduri și panouri ---------- */
.bci-card {
  display: flex;
  flex-direction: column;
  background: var(--bci-paper);
  border: var(--bci-border) solid var(--bci-ink);
  border-radius: var(--bci-radius-lg);
  box-shadow: var(--bci-shadow-md);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
a.bci-card,
.bci-card--interactive {
  transition:
    transform var(--bci-dur-fast),
    box-shadow var(--bci-dur-fast);
}
a.bci-card:hover,
.bci-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--bci-shadow-lg);
}
a.bci-card:focus-visible {
  outline: 3px solid var(--bci-focus);
  outline-offset: 3px;
}
.bci-panel {
  background: var(--bci-paper);
  border: var(--bci-border) solid var(--bci-ink);
  border-radius: var(--bci-radius-lg);
  padding: clamp(18px, 3vw, 28px);
}

/* ---------- Note / alerte ---------- */
.bci-note {
  display: flex;
  gap: var(--bci-space-3);
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bci-orange-soft);
  border: 2px solid var(--bci-ink);
  border-radius: var(--bci-radius-md);
  font-size: var(--bci-text-sm);
  line-height: 1.5;
}
.bci-note svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
}
.bci-note--error {
  background: var(--bci-error-soft);
  border-color: var(--bci-error);
  color: #8c1d18;
}
.bci-note--success {
  background: var(--bci-success-soft);
  border-color: var(--bci-success);
}

/* ---------- Formular ---------- */
.bci-field {
  display: grid;
  gap: 6px;
  margin-bottom: var(--bci-space-4);
}
.bci-label {
  font: 800 var(--bci-text-sm) / 1.3 var(--bci-font-body);
  color: var(--bci-ink);
}
.bci-input {
  width: 100%;
  min-height: var(--bci-control-h);
  padding: 12px 14px;
  border: var(--bci-border) solid var(--bci-ink);
  border-radius: var(--bci-radius-sm);
  background: var(--bci-white);
  color: var(--bci-ink);
  font: 400 1rem/1.4 var(--bci-font-body); /* 16 px: iOS nu mai face zoom la focus */
  -webkit-appearance: none;
  appearance: none;
}
select.bci-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2522' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}
textarea.bci-input {
  min-height: 96px;
  resize: vertical;
}
.bci-input::placeholder {
  color: var(--bci-text-muted);
}
.bci-input:focus-visible {
  outline: 3px solid var(--bci-focus);
  outline-offset: 2px;
}
.bci-input[aria-invalid='true'] {
  border-color: var(--bci-error);
  background: #fff7f6;
}
.bci-hint {
  font-size: var(--bci-text-sm);
  color: var(--bci-text-muted);
}
.bci-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: var(--bci-touch);
  font-size: var(--bci-text-sm);
}
.bci-check input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--bci-orange);
}

/* ---------- Opțiuni (pastile radio): variante, culori, lumină ---------- */
.bci-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bci-space-2);
}
.bci-chip {
  position: relative;
}
.bci-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bci-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--bci-touch);
  padding: 8px 16px;
  border: 2px solid var(--bci-ink);
  border-radius: var(--bci-radius-pill);
  background: var(--bci-paper);
  font: 700 var(--bci-text-sm) / 1.2 var(--bci-font-body);
  cursor: pointer;
  transition: background var(--bci-dur-fast);
}
.bci-chip em {
  font-style: normal;
  font-size: var(--bci-text-xs);
  color: var(--bci-text-muted);
}
.bci-chip input:checked + span {
  background: var(--bci-ink);
  color: var(--bci-cream);
}
.bci-chip input:checked + span em {
  color: var(--bci-orange);
}
.bci-chip input:focus-visible + span {
  outline: 3px solid var(--bci-focus);
  outline-offset: 2px;
}
.bci-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--c, var(--bci-line));
  border: 2px solid var(--bci-ink);
}
.bci-swatch--translucent {
  background: linear-gradient(135deg, var(--c) 0 45%, color-mix(in srgb, var(--c) 45%, white) 55% 100%);
}
.bci-chip input:checked + span .bci-swatch {
  border-color: var(--bci-cream);
}

/* ---------- Iconițe ---------- */
/* SVG inline, grilă 24 × 24, contur 2,2 px, capete rotunjite; iconițele de brand (WhatsApp, TikTok) sunt pline. */
.bci-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .bci-btn,
  a.bci-card,
  .bci-card--interactive,
  .bci-chip span {
    transition: none;
  }
}