/* ==========================================================================
   Компоненти. Значення зняті з дошки «02 · Components & States».
   Button      — 6:50 + спец-таблиця станів 35:18
   Input/Text  — 7:70
   Select      — 37:33
   Chip        — 37:109
   Tabs / FAQ  — 37:140
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button — Style: Primary / Secondary / Ghost / OnDark · Size: L 56 / M 48 / S 40
   -------------------------------------------------------------------------- */
.btn {
  --btn-h: 48px;
  --btn-px: 22px;
  --btn-r: 14px;
  --btn-ring: rgba(58, 154, 97, .55);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--btn-r);
  font: var(--ty-btn);
  letter-spacing: var(--tr-btn);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Focus — кільце 3px із відступом 3px, зовнішній радіус r+3 (35:54) */
.btn:focus-visible {
  outline: 3px solid var(--btn-ring);
  outline-offset: 3px;
  border-radius: var(--btn-r);
}

.btn--l { --btn-h: 56px; --btn-px: 28px; --btn-r: 14px; font: var(--ty-btn-l); letter-spacing: var(--tr-btn-l); }
.btn--m { --btn-h: 48px; --btn-px: 22px; --btn-r: 14px; }
.btn--s { --btn-h: 40px; --btn-px: 16px; --btn-r: 10px; font: 600 14px/1.2 var(--f-body); letter-spacing: 0; }

/* --- Primary ------------------------------------------------------------- */
.btn--primary            { background: var(--c-green-600); color: #fff; }
.btn--primary:hover      { background: var(--c-green-700); }
.btn--primary:active     { background: var(--c-green-800); }
.btn--primary[disabled],
.btn--primary.is-disabled { background: var(--sem-disabled-bg); color: var(--sem-disabled-text); cursor: not-allowed; }

/* --- Secondary ----------------------------------------------------------- */
.btn--secondary            { background: transparent; color: var(--t-primary); box-shadow: inset 0 0 0 1.5px var(--c-green-800); }
.btn--secondary:hover      { background: #E9E3D6; }
.btn--secondary:active     { background: #DED6C5; }
.btn--secondary[disabled],
.btn--secondary.is-disabled { box-shadow: inset 0 0 0 1.5px var(--b-light-strong); color: var(--sem-disabled-text); cursor: not-allowed; }

/* --- Ghost --------------------------------------------------------------- */
.btn--ghost            { --btn-px: 0px; background: none; color: var(--c-green-700); }
.btn--ghost:hover      { color: var(--c-green-800); text-decoration: underline; text-decoration-thickness: from-font; }
.btn--ghost:active     { color: var(--t-primary); text-decoration: underline; text-decoration-thickness: from-font; }
.btn--ghost[disabled],
.btn--ghost.is-disabled { color: var(--sem-disabled-text); text-decoration: none; cursor: not-allowed; }
.btn--ghost .icon { width: 18px; height: 18px; }

/* --- OnDark -------------------------------------------------------------- */
.btn--ondark            { --btn-ring: rgba(124, 196, 150, .55); background: rgba(255, 255, 255, .1); color: var(--t-on-dark); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.btn--ondark:hover      { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.btn--ondark:active     { background: rgba(255, 255, 255, .24); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.btn--ondark[disabled],
.btn--ondark.is-disabled { background: rgba(255, 255, 255, .05); color: #6E8375; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); cursor: not-allowed; }

/* --- Loading (cell / Loading) -------------------------------------------- */
.btn.is-loading { pointer-events: none; }
.btn__spinner {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Field — Input / Textarea / Select (7:70, 37:33)
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  display: inline-flex; gap: 3px;
  font: var(--ty-label); letter-spacing: var(--tr-label);
  color: var(--t-primary);
}
.field__req { color: var(--sem-error); }

.field__control {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 56px;
  padding-inline: 18px;
  background: var(--s-card);
  border: 1px solid var(--b-light-strong);
  border-radius: 12px;
  font: var(--ty-body-m); letter-spacing: var(--tr-body-m);
  color: var(--t-primary);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}
textarea.field__control { height: auto; min-height: 120px; padding-block: 15px; align-items: flex-start; resize: vertical; }

.field__control::placeholder { color: var(--t-muted); opacity: 1; }
.field__control:hover:not(:disabled) { border-color: #A99B80; }
.field__control:focus,
.field__control:focus-visible {
  outline: none;
  border: 1.5px solid var(--c-green-600);
  box-shadow: 0 0 0 3px rgba(42, 122, 75, .14);
}
.field__control:disabled { background: var(--sem-disabled-bg); border-color: var(--b-light); color: var(--sem-disabled-text); cursor: not-allowed; }

.field.is-error .field__control { border: 1.5px solid var(--sem-error); }
.field.is-filled .field__control { border-color: var(--b-light-strong); }

.field__helper { font: var(--ty-caption); letter-spacing: var(--tr-caption); color: var(--t-secondary); }
.field.is-error .field__helper { color: var(--sem-error); }

.field__icon { width: 20px; height: 20px; flex: none; }
.field.is-error .field__icon { color: var(--sem-error); }
.field.is-filled .field__icon { color: var(--c-green-600); }

/* Обгортка для іконки всередині поля */
.field__wrap { position: relative; display: flex; align-items: center; }
.field__wrap .field__icon { position: absolute; right: 18px; pointer-events: none; }
.field__wrap:has(.field__icon) .field__control { padding-right: 48px; }

/* --------------------------------------------------------------------------
   Select — нативний <select> у вигляді поля + кастомний listbox (37:33, 37:89)
   -------------------------------------------------------------------------- */
.select { position: relative; }
.select__control {
  padding-right: 46px;
  cursor: pointer;
  background-image: none;
}
.select__chevron {
  position: absolute; right: 16px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--c-green-600);
  pointer-events: none;
  transition: transform var(--dur) var(--ease);
}
.select.is-open .select__control { border: 1.5px solid var(--c-green-600); }
.select.is-open .select__chevron { transform: translateY(-50%) rotate(180deg); }

.select__menu {
  position: absolute; z-index: 40;
  top: calc(100% + 8px); left: 0; right: 0;
  display: none;
  padding-block: 8px;
  background: var(--s-card);
  border: 1px solid var(--b-light);
  border-radius: var(--r-md);
  box-shadow: var(--e-03);
  max-height: 288px; overflow-y: auto;
}
.select.is-open .select__menu { display: block; }

.select__option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 48px;
  padding-inline: 18px;
  font: var(--ty-body-m); letter-spacing: var(--tr-body-m);
  color: var(--t-secondary);
  text-align: left;
  cursor: pointer;
}
.select__option:hover,
.select__option.is-active { background: var(--s-card-alt); }
.select__option[aria-selected="true"] { background: var(--s-light-alt); color: var(--t-primary); }
.select__option .icon { width: 18px; height: 18px; color: var(--c-green-600); }
.select__option:not([aria-selected="true"]) .icon { visibility: hidden; }

/* --------------------------------------------------------------------------
   Chip / Segmented (37:109) — h52, r12
   -------------------------------------------------------------------------- */
.chips { display: flex; gap: 12px; }
.chips--grow > .chip { flex: 1 0 0; }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px;
  padding-inline: 20px;
  background: var(--s-card);
  border: 1px solid var(--b-light-strong);
  border-radius: 12px;
  font: var(--ty-btn); letter-spacing: var(--tr-btn);
  color: var(--t-primary);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { background: var(--s-light-alt); border-color: #A99B80; }
.chip[aria-pressed="true"], .chip.is-selected,
.chip input:checked + span { background: var(--c-green-800); border-color: var(--c-green-800); color: var(--t-on-dark); }
.chip:focus-visible { outline: 3px solid rgba(58, 154, 97, .5); outline-offset: 3px; border: 1.5px solid var(--c-green-600); }
.chip[disabled], .chip.is-disabled { background: var(--sem-disabled-bg); border-color: var(--b-light); color: var(--sem-disabled-text); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Tabs (37:140) — обгортка r18 p6, таб h60 r13
   -------------------------------------------------------------------------- */
.tabs__list {
  display: flex;
  padding: 6px;
  background: var(--s-card);
  border: 1px solid var(--b-light);
  border-radius: 18px;
}
.tabs__list:focus-within { outline: 3px solid rgba(58, 154, 97, .5); outline-offset: 3px; border-radius: 18px; }

.tabs__tab {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex: 1 0 0; min-width: 0;
  height: 60px;
  padding-inline: 16px;
  border-radius: 13px;
  font: var(--ty-h5); letter-spacing: var(--tr-h5);
  color: var(--t-secondary);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs__tab:focus-visible { outline: none; }
.tabs__tab:hover { background: var(--s-light-alt); color: var(--t-primary); }
.tabs__tab[aria-selected="true"] { background: var(--c-green-800); color: var(--t-on-dark); }

.tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Accordion / FAQ (37:140) — item r16, pl28 pr24 py22, toggle 40 pill
   -------------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 14px; }

.accordion__item {
  background: var(--s-light);
  border: 1px solid var(--b-light);
  border-radius: 16px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.accordion__item:hover { background: var(--s-card); border-color: var(--b-light-strong); }
.accordion__item.is-open { background: var(--s-card); border-color: var(--b-light-strong); }

.accordion__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%;
  padding: 22px 24px 22px 28px;
  font: var(--ty-h5); letter-spacing: var(--tr-h5);
  color: var(--t-primary);
  text-align: left;
  cursor: pointer;
}
.accordion__q:focus-visible { outline: 3px solid rgba(58, 154, 97, .5); outline-offset: -1px; border-radius: 16px; }

.accordion__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-pill);
  background: #EFE8DA;
  color: var(--c-green-700);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.accordion__toggle .icon { width: 20px; height: 20px; }
.accordion__item:hover .accordion__toggle { background: var(--c-green-100); }
.accordion__item.is-open .accordion__toggle { background: var(--c-green-800); color: var(--t-on-dark); }

.accordion__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.accordion__item.is-open .accordion__a { grid-template-rows: 1fr; }
.accordion__a > div { overflow: hidden; }
.accordion__a p {
  padding: 0 24px 22px 28px;
  font: var(--ty-body-m); letter-spacing: var(--tr-body-m);
  color: var(--t-secondary);
}

/* Плюс → мінус: у розгорнутому стані показуємо тільки горизонтальну риску */
.accordion__item.is-open .accordion__toggle .icon-plus-v { opacity: 0; }
.accordion__toggle .icon-plus-v { transition: opacity var(--dur) var(--ease); }

@media (max-width: 767px) {
  .accordion__q { padding: 18px 16px 18px 18px; gap: 14px; }
  .accordion__a p { padding: 0 18px 18px; }
  .accordion__toggle { width: 34px; height: 34px; }
  .accordion__toggle .icon { width: 18px; height: 18px; }
  .tabs__list { flex-direction: column; border-radius: 16px; }
  .tabs__tab { height: 52px; }
  .chips { flex-direction: column; }
}