/* ==========================================================================
   Компоненти: Question, Section, ChoiceCard, Chip, Progress, Upload,
   Person, Modal, Summary, Delivery. Същите класове и състояния
   (is-selected, is-invalid, is-over, [hidden], [disabled]).
   Правило: картината е единственото шумно нещо. Всичко друго е хартия и линия.
   ========================================================================== */

/* --- въпрос ----------------------------------------------------------------- */
.question { margin: 0 0 var(--space-6); animation: q-in var(--duration-state) var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
.question__label {
  display: block; margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-l); line-height: 1.35; letter-spacing: -0.005em;
  color: var(--color-ink); max-width: var(--measure); text-wrap: pretty;
}
.opt { font-family: var(--font-body); font-size: var(--text-s); color: var(--color-muted); font-weight: var(--weight-regular); }
.question__help { color: var(--color-muted); font-size: var(--text-s); line-height: 1.6; margin: 0 0 var(--space-4); max-width: 52ch; }
.question__help--after { margin: var(--space-2) 0 0; }
.question__other { margin-top: var(--space-3); animation: q-in var(--duration-state) var(--ease) both; }
.question--info .question__label { font-size: var(--text-l); }
.question--short .input { max-width: 13rem; }
.field__error {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s); background: var(--color-danger-soft);
  color: var(--color-danger); font-size: var(--text-s); line-height: 1.5; font-weight: var(--weight-medium);
}

.section { border: 0; padding: 0; margin: 0 0 var(--space-7); min-width: 0; }
.section__title {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--weight-medium); color: var(--color-muted);
  padding: 0 0 var(--space-3); margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

/* --- ChoiceCard - бяла хартия с косъм; избраното е 2px синьо и отметка ------- */
.choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid > * { min-width: 0; }
.choice-grid--dense { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.choice-grid--cards { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .choice-grid--cards { grid-template-columns: 1fr 1fr; }
  .choice-grid--count { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.choice-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  min-height: var(--tap); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); text-align: left;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-m);
  background: var(--color-surface); color: var(--color-ink); font: inherit; cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.choice-card:hover { border-color: var(--color-line-hover); box-shadow: var(--shadow-s); }
.choice-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.choice-card.is-selected { border-color: var(--color-primary); border-width: 2px; background: var(--color-primary-soft); padding: calc(var(--space-4) - 1px) calc(var(--space-5) - 1px) calc(var(--space-4) - 1px) calc(var(--space-4) - 1px); }
/* нарисувана отметка, не икона - не зависи от библиотека */
.choice-card.is-selected::after {
  content: ""; position: absolute; top: var(--space-4); right: var(--space-4);
  width: 13px; height: 7px; border: 0 solid var(--color-primary); border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg); border-radius: 1px;
}
.choice-card__icon { display: flex; align-items: center; justify-content: flex-start; height: 24px; margin-bottom: var(--space-2); color: var(--color-ink-soft); }
.choice-card__icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.choice-card__label { font-weight: var(--weight-medium); line-height: 1.3; padding-right: 1.5em; overflow-wrap: break-word; hyphens: manual; }
.choice-card__hint { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.choice-card__price { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xl); color: var(--color-ink); margin-top: var(--space-2); }
.choice-card--big { min-height: 116px; padding: var(--space-5); }
.choice-card--big.is-selected { padding: calc(var(--space-5) - 1px); }

/* карта с картинка: изображението влиза отдясно под диагонал */
.choice-card--media {
  position: relative; overflow: hidden;
  min-height: 122px; padding: var(--space-5) 42% var(--space-5) var(--space-5);
  justify-content: center;
}
.choice-card--media.is-selected { padding: calc(var(--space-5) - 1px) calc(42% - 1px) calc(var(--space-5) - 1px) calc(var(--space-5) - 1px); }
.choice-card--media .choice-card__label, .choice-card--media .choice-card__hint { position: relative; z-index: 1; }
.choice-card__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 0;
  clip-path: polygon(26% 0%, 100% 0%, 100% 100%, 0% 100%);
  background: var(--color-primary-soft); color: var(--color-primary-deep);
  display: flex; align-items: center; justify-content: center;
}
.choice-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.choice-card__media svg { width: 42px; height: 42px; stroke-width: 1.25; margin-left: 16%; opacity: 0.9; }
.choice-card__media--warm { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.choice-grid .choice-card--media:nth-child(2n) .choice-card__media { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.choice-card--media .choice-card__label { padding-right: 0; font-size: var(--text-m); }
.choice-card--media .choice-card__hint { max-width: 22ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.choice-card--media.is-selected::after {
  top: 10px; right: 10px; width: 26px; height: 26px; border-radius: var(--radius-round);
  background: var(--color-surface); border: 1px solid var(--color-primary); transform: none;
  background-image: linear-gradient(45deg, transparent 46%, var(--color-primary) 46% 54%, transparent 54%),
                    linear-gradient(-45deg, transparent 46%, var(--color-primary) 46% 54%, transparent 54%);
  background-size: 9px 9px, 14px 14px;
  background-position: 6px 12px, 10px 6px;
  background-repeat: no-repeat;
}
.choice-card--price { min-height: 132px; }
/* избор на рамка: цветно квадратче, без цена - рамката е в цената на продукта.
   Нови рамки се добавят само с нов запис в products.json, без промяна по CSS. */
.choice-card--frame { min-height: 96px; }
.choice-card__swatch {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-line-strong);
  margin-bottom: var(--space-3); flex: none; box-shadow: inset 0 0 0 4px rgba(252, 251, 247, 0.9);
}

.badge {
  display: inline-block; margin-top: var(--space-2); padding: 4px var(--space-3);
  border-radius: var(--radius-pill); background: var(--color-accent-soft);
  color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: var(--weight-medium);
}

/* --- Chip -------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-ink); font: inherit; cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.chip:hover { border-color: var(--color-line-hover); }
.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chip.is-selected {
  border-color: var(--color-primary); border-width: 1.5px; padding: 0 calc(var(--space-4) - 0.5px);
  background: var(--color-primary-soft); color: var(--color-primary-deep); font-weight: var(--weight-medium);
}
.chip.is-selected::before {
  content: ""; width: 11px; height: 6px; border: 0 solid var(--color-primary); border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg) translateY(-1px); border-radius: 1px;
}
.chip .choice-card__hint { display: none; }

/* --- Progress - тънка линия, четири сегмента ---------------------------------- */
.progress { display: flex; align-items: center; gap: var(--space-4); }
.progress__text { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.02em; }
.progress__bar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--color-line); overflow: hidden; }
.progress__bar > span { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--color-primary); transition: width var(--duration-state) var(--ease); }

/* --- Upload - единствената пунктирана линия в системата ---------------------- */
.upload { display: grid; gap: var(--space-3); }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload__zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 112px; padding: var(--space-5); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--color-line-strong); border-radius: var(--radius-l); background: var(--color-surface);
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.upload__zone:hover { border-color: var(--color-line-hover); }
.upload__zone.is-over { border-color: var(--color-primary); border-style: dashed; background: var(--color-primary-soft); }
.upload:focus-within .upload__zone { box-shadow: var(--focus-ring); }
.upload__icon { color: var(--color-muted); margin-bottom: var(--space-1); }
.upload__icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.upload__text { font-weight: var(--weight-medium); }
.upload__hint { font-size: var(--text-xs); color: var(--color-muted); }
.upload__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-3); }
.upload__grid:empty { display: none; }
.upload__item {
  position: relative; margin: 0; border-radius: var(--radius-m); overflow: hidden;
  background: var(--color-surface-2); border: 1px solid var(--color-line); aspect-ratio: 1;
  animation: q-in var(--duration-state) var(--ease) both;
}
.upload__item img { width: 100%; height: 100%; object-fit: cover; }
.upload__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: var(--text-xs); }
.upload__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0;
  background: rgba(43, 42, 40, 0.72); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload__remove {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: var(--radius-round);
  background: rgba(43, 42, 40, 0.72); color: #fff; font: inherit; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.upload__remove:hover { background: var(--color-ink); }
.upload__remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.upload__item--busy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); }
.upload__item--busy .upload__name { position: static; background: none; color: var(--color-muted); padding: 0; }
.upload__progress { height: 2px; background: var(--color-line); overflow: hidden; }
.upload__progress > span { display: block; height: 100%; background: var(--color-primary); transition: width 120ms linear; }

/* --- Person - бяла хартия с косъм, без сянка --------------------------------- */
.person {
  padding: var(--space-5); margin: 0 0 var(--space-5);
  border: 1px solid var(--color-line); border-radius: var(--radius-l); background: var(--color-surface);
  box-shadow: var(--shadow-s);
}
.person__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
.person__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-l); }
.person__role {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted);
  font-family: var(--font-body); font-weight: var(--weight-medium);
}
.person__more { border-top: 1px solid var(--color-line); padding-top: var(--space-2); margin-top: var(--space-4); }
.person__more > summary {
  cursor: pointer; font-size: var(--text-s); color: var(--color-primary-deep); min-height: var(--tap);
  display: flex; align-items: center; gap: var(--space-2); list-style: none;
}
.person__more > summary::-webkit-details-marker { display: none; }
.person__more > summary::before {
  content: ""; width: 7px; height: 7px; border: 0 solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform var(--duration) var(--ease-in-out);
}
.person__more[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.person__more[open] > summary { margin-bottom: var(--space-3); }

/* --- Modal ------------------------------------------------------------------- */
.modal {
  border: 0; padding: 0; border-radius: var(--radius-xl); max-width: min(94vw, 520px); width: 100%;
  background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-m);
}
.modal::backdrop { background: rgba(43, 42, 40, 0.42); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.modal__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-l); }
.modal__close {
  border: 0; background: none; padding: 0; width: 32px; height: 32px; cursor: pointer; color: var(--color-muted);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1;
}
.modal__close:hover { color: var(--color-ink); }
.modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.modal__body { padding: var(--space-4) var(--space-5) var(--space-6); }
.modal__body ul { padding-left: 1.1em; margin: 0 0 var(--space-4); }
.modal__body li { margin: 0 0 var(--space-2); }
.modal__body li::marker { color: var(--color-muted); }

/* --- Summary / totals / gift -------------------------------------------------- */
.summary { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); }
.summary__block {
  padding: var(--space-4) var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
}
.summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.summary__title { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); font-weight: var(--weight-medium); }
.summary__list { margin: var(--space-2) 0 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); font-size: var(--text-s); }
.summary__list dt { color: var(--color-muted); }
.summary__list dd { margin: 0; }
.totals { border-top: 1px solid var(--color-line-strong); padding-top: var(--space-4); margin: 0 0 var(--space-6); }
.totals__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; }
.totals__row b { font-weight: var(--weight-medium); }
.totals__row--gift b { color: var(--color-accent-ink); font-weight: var(--weight-medium); }
.totals__row--muted { color: var(--color-muted); font-size: var(--text-s); }
.totals__row--sum { border-top: 1px solid var(--color-line); margin-top: var(--space-2); padding-top: var(--space-3); }
.totals__row--sum b { font-family: var(--font-display); font-size: var(--text-l); }
.gift {
  display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6); border-radius: var(--radius-m);
  background: var(--color-accent-soft); color: var(--color-ink);
}
.gift__icon { flex: none; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--color-accent); transform: translateY(-2px); }
.gift b { font-weight: var(--weight-medium); }

/* --- Доставка ---------------------------------------------------------------- */
.dost { position: relative; }
.dost__methods { margin: 0 0 var(--space-5); }
.dost__city { position: relative; }
.dost__ac {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: var(--space-2) 0; list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius-m);
  box-shadow: var(--shadow-m); max-height: 268px; overflow: auto;
}
.dost__ac-item { padding: var(--space-3) var(--space-4); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.dost__ac-item:last-child { border-bottom: 0; }
.dost__ac-item:hover, .dost__ac-item.is-active { background: var(--color-primary-soft); }
.dost__ac-item em { font-style: normal; font-size: var(--text-xs); color: var(--color-muted); }
.dost__ac-item--none { color: var(--color-muted); cursor: default; }
.dost__receiver { margin: 0 0 var(--space-4); border-top: 1px solid var(--color-line); padding-top: var(--space-2); }
.dost__receiver > summary {
  cursor: pointer; font-size: var(--text-s); color: var(--color-primary-deep); min-height: var(--tap);
  display: flex; align-items: center; gap: var(--space-2); list-style: none;
}
.dost__receiver > summary::-webkit-details-marker { display: none; }
.dost__receiver > summary::before {
  content: ""; width: 7px; height: 7px; border: 0 solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform var(--duration) var(--ease-in-out);
}
.dost__receiver[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.dost__price { min-height: 1.6em; font-size: var(--text-s); color: var(--color-ink-soft); }
.dost__price b { font-weight: var(--weight-medium); color: var(--color-ink); }
.dost__price--soft { color: var(--color-muted); }

/* --- дребни --------------------------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--color-muted); font-size: var(--text-s); margin: 0 0 var(--space-5); }
.crumbs b { color: var(--color-ink); font-weight: var(--weight-medium); }
.steps-list { padding: 0; margin: 0 0 var(--space-6); list-style: none; counter-reset: s; }
.steps-list li {
  counter-increment: s; position: relative; padding: 0 0 var(--space-4) var(--space-6);
  color: var(--color-ink-soft); max-width: var(--measure);
}
.steps-list li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted);
}
.order-number { font-family: var(--font-mono); font-size: var(--text-xl); letter-spacing: 0.02em; color: var(--color-ink); font-weight: var(--weight-medium); }

/* на тесен екран картите губят малко въздух, за да не се чупят думите по средата */
@media (max-width: 480px) {
  .choice-card:not(.choice-card--media) { padding: var(--space-4); }
  .choice-card:not(.choice-card--media).is-selected { padding: calc(var(--space-4) - 1px); }
  .choice-card:not(.choice-card--media) .choice-card__label { padding-right: 1.1em; font-size: var(--text-s); }
  .choice-card:not(.choice-card--media).is-selected::after { right: var(--space-3); }
}

/* --- Stepper - брояч за допълнения (още магнити) ------------------------- */
.stepper { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.stepper__btn {
  width: var(--tap); height: var(--tap); border-radius: var(--radius-round); cursor: pointer;
  border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.stepper__btn:hover { background: var(--color-surface-2); border-color: var(--color-line-hover); }
.stepper__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.stepper__btn[disabled] { opacity: 0.35; cursor: default; background: var(--color-surface); }
.stepper__value { min-width: 2.2ch; text-align: center; font-family: var(--font-mono); font-size: var(--text-l); font-variant-numeric: tabular-nums; }
.stepper__line { margin: 0 0 0 var(--space-2); font-size: var(--text-s); color: var(--color-ink-soft); }