/* ==========================================================================
   Компонентна система — споделена между landing и продукта.
   Всеки компонент = един клас + модификатори. Без дублиране.
   ========================================================================== */

/* --------------------------------------------------------------- Бутони -- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-line: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .78rem 1.35rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 550;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: 60ms; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Основното действие е единственото място, където градиентът е плътен. */
.btn--primary {
  --btn-fg: var(--text-on-brand);
  --btn-line: transparent;
  background-image: var(--gradient);
  background-size: 140% 100%;
  background-position: 0% 50%;
  font-weight: 600;
  box-shadow: var(--glow-brand);
  transition: background-position var(--t-slow) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 28px -8px rgb(var(--brand-rgb) / 55%);
}

.btn--secondary { --btn-bg: rgb(var(--ink-rgb) / 0.045); }
.btn--secondary:hover { --btn-bg: rgb(var(--ink-rgb) / 0.09); --btn-line: var(--line-brand); }

.btn--ghost { --btn-line: transparent; color: var(--text-muted); }
.btn--ghost:hover { --btn-bg: rgb(var(--ink-rgb) / 0.06); color: var(--text); }

.btn--danger { --btn-line: rgba(255,107,107,.35); color: var(--err-500); }
.btn--danger:hover { --btn-bg: var(--err-bg); }

.btn--lg { padding: 1.02rem 1.9rem; font-size: 1.02rem; }
.btn--sm { padding: .48rem .9rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn--icon { padding: .55rem; aspect-ratio: 1; border-radius: var(--r-sm); }

.btn__arrow { transition: transform var(--t-base) var(--ease-spring); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Зареждащо състояние — бутонът пази размера си, за да не „скача“ UI-ът */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 1.05em; height: 1.05em;
  border: 2px solid var(--btn-fg);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Чипове -- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.35;
}
.chip--brand { border-color: var(--line-brand); background: rgb(var(--brand-rgb) / 0.09); color: var(--brand-700); }
.chip--ok    { border-color: rgba(63,185,132,.3); background: var(--ok-bg); color: var(--ok-500); }
.chip--warn  { border-color: rgba(242,193,78,.3); background: var(--warn-bg); color: var(--warn-500); }
.chip--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brand-600);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-500));
}
.eyebrow--center::after {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(270deg, transparent, var(--brand-500));
}

/* ----------------------------------------------------------------- Карти -- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.card--interactive { cursor: pointer; text-align: left; width: 100%; }
.card--interactive:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
}
.card--interactive:hover .card__title { color: var(--brand-700); }
.card__title {
  font-size: var(--fs-h4);
  transition: color var(--t-base) var(--ease-out);
}

/* Тънка светеща линия отгоре — единственият „ефект“, използван пестеливо */
.card--lit::after {
  content: "";
  position: absolute; inset-inline: 18%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--brand-rgb) / 0.6), transparent);
  opacity: 0; transition: opacity var(--t-slow) var(--ease-out);
}
.card--lit:hover::after { opacity: 1; }

/* -------------------------------------------------------------- Формуляри -- */
.field { display: flex; flex-direction: column; gap: .42rem; min-width: 0; }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }
.field__error {
  font-size: var(--fs-xs); color: var(--err-500);
  display: flex; align-items: center; gap: .35rem;
}
.field__optional { color: var(--text-faint); font-weight: 400; }

.input, .select, .textarea {
  width: 100%;
  padding: .74rem .9rem;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-500);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.14);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--err-500);
  box-shadow: 0 0 0 3px rgba(255,107,107,.12);
}
.textarea { min-height: 116px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b6779' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  cursor: pointer;
}
.select option { background: #ffffff; color: #171523; }

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 2.6rem; }
.input-group__icon {
  position: absolute; left: .9rem;
  color: var(--text-faint); pointer-events: none;
  display: flex;
}

/* Сегментиран избор — по-бърз от dropdown при 2–6 опции */
.segmented {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .3rem;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.segmented__item {
  flex: 1 1 auto;
  padding: .5rem .8rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--text-muted);
  text-align: center;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.segmented__item:hover { color: var(--text); background: rgb(var(--ink-rgb) / 0.05); }
.segmented__item[aria-pressed="true"] {
  background: var(--brand-500);
  color: var(--text-on-brand);
  box-shadow: var(--sh-sm);
}

/* Избираеми плочки (тип ресурс, метод) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
}
.tile {
  display: flex; flex-direction: column; gap: .28rem;
  padding: .85rem .9rem;
  text-align: left;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.tile:hover { border-color: var(--line-strong); background: rgb(var(--ink-rgb) / 0.055); transform: translateY(-1px); }
.tile[aria-pressed="true"] {
  border-color: var(--brand-500);
  background: rgb(var(--brand-rgb) / 0.1);
}
.tile__name { font-size: var(--fs-sm); font-weight: 550; color: var(--text); }
.tile__meta { font-size: var(--fs-micro); color: var(--text-faint); line-height: 1.35; }
.tile[aria-pressed="true"] .tile__name { color: var(--brand-700); }


/* -------------------------------------------------------------- Известия -- */
.toast-host {
  position: fixed;
  bottom: var(--sp-5); right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: .6rem;
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: toast-in 340ms var(--ease-spring);
}
.toast.is-leaving { animation: toast-out 200ms var(--ease-out) forwards; }
.toast__icon { flex: none; margin-top: .12rem; }
.toast--ok   .toast__icon { color: var(--ok-500); }
.toast--err  .toast__icon { color: var(--err-500); }
.toast--info .toast__icon { color: var(--brand-600); }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: 600; }
.toast__text { color: var(--text-muted); font-size: var(--fs-xs); margin-top: .1rem; }
.toast__close { color: var(--text-faint); flex: none; padding: 2px; border-radius: var(--r-xs); }
.toast__close:hover { color: var(--text); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(20px); } }

@media (max-width: 560px) {
  .toast-host { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); max-width: none; }
}

/* ----------------------------------------------------------------- Модал -- */
.overlay {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--gutter);
  background: rgb(var(--ink-rgb) / 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 200ms var(--ease-out);
  overflow-y: auto;
}
@keyframes fade-in { from { opacity: 0; } }

.modal {
  width: 100%; max-width: 520px;
  max-height: min(88vh, 820px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  animation: modal-in 320ms var(--ease-spring);
}
.modal--wide { max-width: 760px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.97); } }

.modal__head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.modal__title { font-size: var(--fs-h3); flex: 1; }
.modal__body { padding: 0 var(--sp-5) var(--sp-5); overflow-y: auto; }
.modal__foot {
  display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--surface-inset);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
@media (max-width: 560px) {
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; }
}

/* ------------------------------------------------------- Празни състояния -- */
.empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
}
.empty__art { color: var(--ink-300); }
.empty__title { font-size: var(--fs-h3); }
.empty__text { color: var(--text-muted); max-width: 44ch; font-size: var(--fs-sm); }

/* ------------------------------------------------------------- Skeleton --- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-xs);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton--line { height: .85rem; }
.skeleton--title { height: 1.4rem; width: 55%; }

/* --------------------------------------------------------------- Прогрес -- */
.meter {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  width: 0;
  background-image: var(--gradient);
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease-out);
}
.meter--warn .meter__fill { background: linear-gradient(90deg, #d99a00, var(--warn-500)); }
.meter--full .meter__fill { background: linear-gradient(90deg, #c94a4a, var(--err-500)); }

/* -------------------------------------------------------------- Разделител */
.divider-text {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--text-faint); font-size: var(--fs-xs);
}
.divider-text::before, .divider-text::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ------------------------------------------------------------------ Аватар */
.avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background-image: var(--gradient);
  color: var(--text-on-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  user-select: none;
}
.avatar--lg { width: 54px; height: 54px; font-size: var(--fs-body); }

/* ------------------------------------------------------------------- Лого */
.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: 1.12rem;
  color: var(--text);
}
.logo__mark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background-image: var(--gradient);
  box-shadow: 0 3px 10px -3px rgb(var(--brand-rgb) / 45%);
}
.logo__mark svg { color: var(--text-on-brand); }

/* --------------------------------------------------------- Плейсхолдъри -- */
/* Контейнери за бъдещи реални изображения. Съотношението се пази, така че
   подмяната със снимка няма да разпадне оформлението. */
.img-slot {
  position: relative;
  display: grid; place-items: center;
  width: 100%;
  aspect-ratio: var(--slot-ratio, 16 / 10);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(var(--brand-rgb) / 0.07), transparent 60%),
    var(--surface-2);
}
.img-slot > img { width: 100%; height: 100%; object-fit: cover; }
.img-slot__note {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-4);
}
.img-slot__note code {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  background: var(--surface-inset);
  padding: .18rem .45rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
}
.img-slot::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(var(--ink-rgb) / 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--ink-rgb) / 0.028) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* ============================================================================
   Споделени между landing и продукта: планове, състояние на работа и
   подканата за надграждане. Стоят тук, защото се използват и на двете места.
   ============================================================================ */


/* ------------------------------------------------- Състояние на работа --- */
.working {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}
.working__ring {
  position: relative;
  width: 62px; height: 62px;
}
.working__ring::before, .working__ring::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}
.working__ring::before { border-top-color: var(--brand-500); animation: spin 1.05s linear infinite; }
.working__ring::after {
  inset: 9px;
  border-bottom-color: var(--brand-700);
  animation: spin 1.5s linear infinite reverse;
}
.working__title { font-size: var(--fs-h4); }
.working__steps {
  display: flex; flex-direction: column; gap: .55rem;
  width: 100%; max-width: 420px;
  text-align: left;
}
.working__step {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  transition: color var(--t-base) var(--ease-out);
}
.working__step-dot {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  display: grid; place-items: center;
}
.working__step.is-done { color: var(--text-muted); }
.working__step.is-done .working__step-dot { border-color: var(--ok-500); background: var(--ok-bg); }
.working__step.is-active { color: var(--text); font-weight: 550; }
.working__step.is-active .working__step-dot {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.14);
}

/* ------------------------------------------------------ Резултат ---------- */
.result-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: .7rem 0;
  margin-bottom: var(--sp-5);
  background: linear-gradient(var(--bg) 70%, transparent);
}
.result-bar__actions { display: flex; gap: .45rem; flex-wrap: wrap; }

@media (max-width: 700px) {
  .result-bar { position: static; }
  .result-bar__actions { width: 100%; }
  .result-bar__actions .btn { flex: 1 1 auto; }
}


/* ============================== Планове ================================== */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.plan {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  position: relative;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.plan:hover { border-color: var(--line-strong); }
.plan--featured {
  border-color: var(--brand-500);
  background:
    radial-gradient(110% 80% at 50% 0%, rgb(var(--brand-rgb) / 0.13), transparent 62%),
    var(--surface);
  box-shadow: 0 24px 60px -30px rgb(var(--brand-rgb) / 0.5);
}
.plan__flag {
  position: absolute;
  top: -11px; left: 50%; transform: translateX(-50%);
  padding: .22rem .8rem;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  color: var(--text-on-brand);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.plan__name { font-size: var(--fs-h4); font-weight: 650; }
.plan__pitch { font-size: var(--fs-xs); color: var(--text-muted); min-height: 2.6em; }
.plan__price { display: flex; align-items: baseline; gap: .4rem; }
.plan__amount { font-size: 2.6rem; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.plan__unit { font-size: var(--fs-xs); color: var(--text-faint); }
.plan__features { display: flex; flex-direction: column; gap: .5rem; }
.plan__feature {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.plan__feature svg { flex: none; margin-top: .18rem; }
.plan__feature--on { color: var(--text); }
.plan__feature--on svg { color: var(--ok-500); }
.plan__feature--off { color: var(--text-faint); }
.plan__feature--off svg { color: var(--ink-300); }
.plan__cta { margin-top: auto; }

.billing-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem;
  background: var(--surface-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.billing-toggle__opt {
  padding: .42rem .95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--text-muted);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.billing-toggle__opt[aria-pressed="true"] { background: var(--brand-500); color: var(--text-on-brand); }


/* ============================== Заключено съдържание ===================== */

.locked-note {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: var(--sp-4);
  border: 1px solid var(--line-brand);
  border-radius: var(--r-md);
  background: rgb(var(--brand-rgb) / 0.07);
  font-size: var(--fs-sm);
}
.locked-note svg { color: var(--brand-600); flex: none; margin-top: .15rem; }
.locked-note__title { font-weight: 600; }
.locked-note__text { color: var(--text-muted); font-size: var(--fs-xs); margin-top: .2rem; }


/* ------------------------------------------------------------- Отметка --- */
.checkbox {
  display: flex; align-items: flex-start; gap: .65rem;
  cursor: pointer;
  padding: .2rem 0;
}
.checkbox input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: .12rem;
  accent-color: var(--brand-500);
  cursor: pointer;
}
.checkbox__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.checkbox__label { font-size: var(--fs-sm); line-height: 1.45; }
.checkbox__hint { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }
.checkbox:hover .checkbox__label { color: var(--text); }