/* ==========================================================================
   База: reset, типографіка, іконки, утиліти
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0; /* П4: вертикальні відступи задає лише батько через gap */
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: var(--lh);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss03";
  overflow-x: hidden;
}

/* iOS Safari збільшує сторінку при фокусі в поле з шрифтом < 16px — на телефоні всі поля вводу 16px */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea {
    font-size: 16px !important;
  }

  /* Цифра в степері на телефоні — звичайний дрібний шрифт. Поле не приймає дотик (кількість змінюють «−» / «+»),
     тож фокусу немає і iPhone не збільшує сторінку */
  .stepper input.stepper__value:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    font-size: var(--fs-13) !important;
    pointer-events: none;
  }
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

::selection {
  background: var(--c-accent-soft);
  color: var(--c-text);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

/* Смуги прокрутки невидимі скрізь (сторінка, панелі, модалки, списки) — прокрутка працює
   колесом, тачпадом, свайпом і клавішами. Бонус: немає «доріжки» під скролбар,
   тож сторінка не зсувається при відкритті модалок (П7) */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* --------------------------------------------------------------------------
   Іконки (П1, П2)
   -------------------------------------------------------------------------- */
svg.lucide {
  width: var(--icon);
  height: var(--icon);
  flex: none;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

svg.lucide.i-sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

svg.lucide.i-lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}


.ico-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Утиліти
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--s-4));
  min-width: 0;
}

.stack-4 { --stack-gap: var(--s-1); }
.stack-8 { --stack-gap: var(--s-2); }
.stack-12 { --stack-gap: var(--s-3); }
.stack-16 { --stack-gap: var(--s-4); }
.stack-20 { --stack-gap: var(--s-5); }
.stack-24 { --stack-gap: var(--s-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--row-gap, var(--s-2));
  min-width: 0;
}

.grow {
  flex: 1 1 auto;
  min-width: 0;
}

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.muted {
  color: var(--c-text-3);
}

.text-2 {
  color: var(--c-text-2);
}

.fs-12 { font-size: var(--fs-12); }
.fs-13 { font-size: var(--fs-13); }

.nums {
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.divider {
  height: 1px;
  margin: 0 16px;
  background: var(--c-line);
  flex: none;
}

/* --------------------------------------------------------------------------
   Скелетони: .sk-line займає рівно один рядок тексту батька (1lh) —
   розміри збігаються з реальним контентом (П7)
   -------------------------------------------------------------------------- */
.sk,
.sk-line::after {
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, #e9ecf1 0%, #f4f6f9 40%, #e9ecf1 80%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

.sk {
  display: block;
}

.sk-line {
  position: relative;
  display: block;
  height: 1lh;
  width: var(--w, 100%);
  max-width: 100%;
}

.sk-line::after {
  content: "";
  position: absolute;
  inset: 22% 0;
}

/* --------------------------------------------------------------------------
   Анімації (П13)
   -------------------------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes pop {
  0% { transform: scale(0.92); opacity: 0.4; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes heart {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.anim-pop { animation: pop var(--t) var(--ease); }
.anim-heart { animation: heart 420ms var(--ease); }
.anim-bump { animation: bump 360ms var(--ease-spring); }

[hidden] {
  display: none !important;
}