/* ЗаДетето, партньорска повърхност (посока „Печатът").
Един споделен файл, който статичните страници линкват; без build стъпка.
Два слоя: zd-base (токени, основа, компоненти: карта, публичен профил, съветник,
състояния) и zd-editor (перата, катинарите, посивяването, чакащото одобрение).
Родителският изглед никога не носи класа .zd-editor, затова слоят физически не
може да изтече навън (docs/ui-roadmap/07, технически договор).
Отстъпите отвътре идват само от семантичните роли (Layout & Spacing Canon §2);
външните гутери са свободни по преломни прагове (§1). */
@layer zd-base, zd-editor;
@layer zd-base {
/* ------------------------------------------------------------------ */
/* 1. Токени (договорът от _capabilities/design-system/tokens/base-tokens.md) */
/* ------------------------------------------------------------------ */
:root {
/* цвят по роля */
--color-primary: #7c4dff;
--color-primary-ink: #ffffff;
--color-primary-hover: #6034e0;
--color-primary-soft: #f4f0ff;
--color-accent: #f5d76e; /* злато: само знаци за проверка и ниво */
--color-accent-ink: #3d2e00;
--color-gold: #d4af37;
--color-gold-ink: #a8801c; /* същото злато, но четимо върху бяло (3.6:1) */ /* златото на марката; звездата на Google го носи */
--color-gold-border: #d4af37;
--color-bg: #fdfcfb;
--color-surface: #ffffff;
--color-surface-sunken: #f7f5fb;
--color-ink: #1a103c;
--color-ink-muted: #4b4170;
--color-ink-faint: #6f6593;
--color-charcoal: #2f2b3a;
--color-line: #ece8f3;
--color-line-soft: #f1eef7;
--color-line-strong: rgba(47, 43, 58, .22);
--color-line-interactive: #8b82a8;
--color-focus-ring: #3d1f9c;
--color-danger: #b3261e;
--color-danger-bg: #fdecea;
/* състоянията на заявката (STATES в zadeteto-rules.js) */
--state-draft: #6f6593; --state-draft-ink: #5c537f;
--state-submitted: #7c4dff; --state-submitted-ink: #6034e0;
--state-review: #c89a00; --state-review-ink: #8a6800;
--state-approved: #4caf6a; --state-approved-ink: #26704a;
--state-rejected: #e74c6f; --state-rejected-ink: #c0304f;
/* нивата (TIER_LOOK) */
--tier-verified: #12735a; --tier-verified-ink: #0f5f4a; --tier-verified-bg: #e4f1ec; --tier-verified-bd: #c9e3da;
--tier-verified-chip-bg: #edf6f2; --tier-verified-chip-bd: #d5e9e1;
--tier-verified-hero: linear-gradient(135deg, #d9ece4, #f0f7f4);
--tier-trusted: #6034e0; --tier-trusted-ink: #5a2ecf; --tier-trusted-bg: #efe8ff; --tier-trusted-bd: #ded0ff;
--tier-trusted-chip-bg: #f6f1ff; --tier-trusted-chip-bd: #e5daff;
--tier-trusted-hero: linear-gradient(135deg, #e4d8ff, #f5f0ff);
--tier-standard: #2f2b3a; --tier-standard-bg: #f1f0f3; --tier-standard-bd: #e3e1e7;
--tier-standard-chip-bg: #f3f2f5; --tier-standard-chip-fg: #4b4170; --tier-standard-chip-bd: #e6e4ea;
--tier-standard-hero: linear-gradient(135deg, #e6e5ea, #f4f3f6);
--tier-free-fg: #6f6593; --tier-free-bg: #f5f3f7; --tier-free-bd: #ece8f3;
--tier-free-hero: linear-gradient(135deg, #eceaf0, #f7f6f8);
--founder-ground: var(--color-surface); /* картата е бяла; златото е знак, не фон (Руси, 2026-09-09) */
--founder-gradient: linear-gradient(135deg, #d4af37, #ffe98a);
--founder-chip-bg: #fbf3d8; --founder-chip-fg: #8a6800; --founder-chip-bd: #ead78a;
--founder-hero: linear-gradient(135deg, #f7f4ec, #fdfcfa);
/* шрифт: фиксирана rem скала за приложение, не флуидна (rigor: product UI) */
--font-display: 'PT Serif', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--fs-hero: 2rem; /* 32 */
--fs-h1: 1.75rem; /* 28 */
--fs-h2: 1.375rem; /* 22 */
--fs-h3: 1.125rem; /* 18 */
--fs-lg: 1rem; /* 16 */
--fs-body: 0.875rem; /* 14 */
--fs-small: 0.8125rem;/* 13 */
--fs-xs: 0.75rem; /* 12 */
--fs-2xs: 0.6875rem; /* 11 */
--fs-cap: 0.625rem; /* 10, само за етикети с главни букви */
/* трите размера от артборда на картата (12.5 / 11.5 / 9.5 px), именувани, за да не
стоят като голи числа из компонентите */
--fs-card-meta: 0.78125rem;
--fs-card-small: 0.71875rem;
--fs-card-cap: 0.59375rem;
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
--tracking-caps: 0.12em;
--tracking-badge: 0.09em;
/* отстъпи: 4pt мрежа */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
--space-24: 6rem; --space-32: 8rem;
--space-section: clamp(var(--space-12), 8vw, var(--space-24));
--space-stack-1: var(--space-2);
--space-stack-2: var(--space-4);
--space-stack-3: var(--space-8);
--gap-grid: var(--space-6);
--gap-inline: var(--space-3);
--gap-inline-sm: var(--space-2);
--space-inset-sm: var(--space-3);
--space-inset-md: var(--space-4);
--space-inset-lg: var(--space-6);
/* радиуси и сенки */
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.375rem; /* 22: картата */
--radius-full: 999px;
--shadow-1: 0 1px 2px rgba(26, 16, 60, .04), 0 8px 22px rgba(26, 16, 60, .05);
--shadow-2: 0 14px 40px rgba(26, 16, 60, .08);
--shadow-3: 0 30px 80px rgba(23, 16, 51, .3);
--shadow-btn: 0 8px 22px rgba(124, 77, 255, .22);
/* движение: една крива, никога transition: all */
--ease: cubic-bezier(.22, 1, .36, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--duration-flip: 450ms; /* обръщането на картата, от артборда */
/* слоеве */
--z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1300; --z-modal: 1400; --z-toast: 1600;
/* оформление: рамка срещу мярка (Правило 1) */
--container-max: 87.5rem; /* 1400 */
--container-pad: clamp(1rem, 4vw, 2.5rem);
--measure: 80ch; /* детски специалисти: 75–85ch */
--measure-lead: 45ch;
--measure-narrow: 34ch;
--wrap-heading: balance;
--wrap-body: pretty;
/* компоненти (Canon §5) */
--tooltip-max: min(22.5rem, calc(100vw - 1.5rem));
--tooltip-pad: var(--space-3);
--modal-max-sm: 27.5rem;
--modal-max-md: 40rem;
--modal-max-lg: 56.25rem;
--modal-max-h: min(92vh, 48rem);
--tap-min: 2.75rem; /* 44 */
/* Множителят на картата. Извън нея е 1 px, вътре в нея става дял от ширината ѝ,
затова едно и също правило работи и на страницата, и вътре в картата. */
--k: 1px;
--field-h: 3rem; /* 48 */
--cta-h: 3.25rem; /* 52: бутоните на картата и профила */
--focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring);
}
/* ------------------------------------------------------------------ */
/* 2. Основа */
/* ------------------------------------------------------------------ */
.zd, .zd *, .zd *::before, .zd *::after { box-sizing: border-box; }
.zd {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--leading-normal);
color: var(--color-ink);
-webkit-font-smoothing: antialiased;
}
.zd h1, .zd h2, .zd h3, .zd h4 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: var(--wrap-heading); }
.zd h1 { font-size: var(--fs-h1); line-height: var(--leading-tight); }
.zd h2 { font-size: var(--fs-h2); line-height: 1.25; }
.zd h3 { font-size: var(--fs-h3); line-height: 1.25; }
.zd p, .zd li { text-wrap: var(--wrap-body); margin: 0; }
.zd p { max-width: var(--measure); }
.zd .zd-state, .zd .zd-tip, .zd .zd-callout, .zd .zd-note, .zd .zd-toast { text-wrap: var(--wrap-body); }
/* Само голите връзки в текст са лилави; анкер с клас е компонент (бутон, икона, карта)
и носи своя цвят. Иначе .zd a (0,1,1) надделява над .zd-card__cta--primary (0,1,0)
и бутонът става лилав текст върху лилав фон (уловено на 2026-09-07). */
.zd a:not([class]) { color: var(--color-primary-hover); text-decoration: none; }
.zd a:not([class]):hover { text-decoration: underline; }
.zd a[class] { text-decoration: none; }
/* :where() държи нулева специфичност: нулирането важи за всеки контрол, но всяка компонентна
класа (.zd-btn, .zd-side__step, .zd-card__flipword) го надделява със собствения си шрифт. */
:where(.zd) button, :where(.zd) input, :where(.zd) select, :where(.zd) textarea { font: inherit; color: inherit; }
.zd img { max-width: 100%; display: block; }
.zd :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.zd .zd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* връзката „Към съдържанието" се показва, когато получи фокус от клавиатурата */
.zd .zd-sr:focus { position: fixed; top: var(--space-3); left: var(--space-3); width: auto; height: auto; margin: 0; padding: var(--space-2) var(--space-3); overflow: visible; clip: auto; z-index: var(--z-toast); background: var(--color-surface); color: var(--color-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
@media (forced-colors: active) { .zd :focus-visible { outline: 3px solid Highlight; } }
@media (prefers-reduced-motion: reduce) { .zd *, .zd *::before, .zd *::after { animation: none !important; transition-duration: 0.01ms !important; } }
/* етикет с главни букви (секции, чипове в таблото) */
.zd-cap { font: 600 var(--fs-cap)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-faint); }
.zd-note { font-size: var(--fs-xs); line-height: 1.6; color: var(--color-ink-faint); }
.zd-num { font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------------ */
/* 3. Бутони */
/* ------------------------------------------------------------------ */
.zd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline-sm);
min-height: var(--tap-min); padding: 0 var(--space-5);
border: 1px solid transparent; border-radius: var(--radius-md);
font: 600 var(--fs-small)/1 var(--font-body); cursor: pointer; text-decoration: none;
transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.zd-btn--primary { background: var(--color-primary); color: var(--color-primary-ink); }
.zd-btn--primary:hover { background: var(--color-primary-hover); }
.zd-btn--secondary { background: var(--color-surface); color: var(--color-primary-hover); border-color: var(--color-line); }
.zd-btn--secondary:hover { border-color: var(--color-primary); }
.zd-btn--ghost { background: transparent; color: var(--color-charcoal); border-color: var(--color-line-strong); }
.zd-btn--ghost:hover { border-color: var(--color-charcoal); }
.zd-btn--quiet { background: transparent; color: var(--color-ink-faint); border-color: transparent; padding-inline: 0; }
.zd-btn--quiet:hover { color: var(--color-ink); }
.zd-btn--lg { min-height: var(--cta-h); border-radius: 0.875rem; font-size: var(--fs-body); padding: 0 var(--space-4); }
.zd-btn--block { width: 100%; }
.zd-btn[disabled], .zd-btn[aria-disabled="true"] { background: var(--color-surface-sunken); color: var(--color-ink-faint); border-color: var(--color-line); cursor: default; box-shadow: none; }
.zd-btn:focus-visible { box-shadow: var(--focus-ring); }
.zd-btn__ico { flex: none; }
/* натискането се усеща: леко свиване, само transform (Triad polish, 2026-09-07) */
.zd-btn:not([disabled]):active, .zd-card__cta:active, .zd-panel__cta:active, .zd-linkcard:active { transform: scale(.97); }
.zd-btn, .zd-card__cta, .zd-panel__cta, .zd-linkcard, .zd-round { transition: transform var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); }
/* кръгъл бутон-икона (запази, сподели, обърни, пера) */
.zd-round {
position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
width: calc(34 * var(--k)); height: calc(34 * var(--k)); border-radius: var(--radius-full);
border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-charcoal);
padding: 0; cursor: pointer;
}
/* 44 px цел за докосване около всеки кръг, без да расте самият кръг (артбордът е 26 px) */
.zd-round::before { content: ""; position: absolute; inset: calc((var(--tap-min) - 100%) / -2); border-radius: inherit; }
/* В плътен ред икони разширението прехвърля съседа: цел от 46 px при стъпка 32 px значи, че
докосване до „Телефон" копира „Имейл". В реда целта спира до половината разстояние. */
.zd-card__icons .zd-round::before { inset: calc(-8 * var(--k)) calc(-4 * var(--k)); } /* вертикално стига 44 px при пълен размер; хоризонтално спира точно на половината
разстояние до съседа, затова две икони не могат да си вземат натискането */
@media (hover: hover) and (pointer: fine) { .zd-round:not(.zd-round--muted):hover { background: var(--color-surface-sunken); border-color: var(--color-charcoal); } }
.zd-round:not(.zd-round--muted):active { transform: scale(.92); }
.zd-round--sm { width: calc(26 * var(--k)); height: calc(26 * var(--k)); }
.zd-round--muted { color: var(--color-ink-faint); background: #f7f6f8; border-color: rgba(47, 43, 58, .1); cursor: default; }
/* ------------------------------------------------------------------ */
/* 4. Полета */
/* ------------------------------------------------------------------ */
.zd-field { display: flex; flex-direction: column; gap: var(--space-stack-1); min-width: 0; }
.zd-field__label { font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--color-ink); }
.zd-field__label small { font-weight: 400; color: var(--color-ink-faint); }
.zd-input, .zd-select, .zd-textarea {
width: 100%; min-height: var(--field-h); padding: 0 var(--space-4);
border: 1px solid var(--color-line-interactive); border-radius: var(--radius-md); background: var(--color-surface);
color: var(--color-ink); font-size: var(--fs-body); line-height: 1.4;
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.zd-textarea { padding: var(--space-3) var(--space-4); min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.zd-input:focus-visible, .zd-select:focus-visible, .zd-textarea:focus-visible { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.zd-input[aria-invalid="true"], .zd-textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.zd-input:disabled, .zd-select:disabled, .zd-textarea:disabled, .zd-input[readonly] { background: var(--color-surface-sunken); color: var(--color-ink-muted); border-color: var(--color-line); }
.zd-field__help { font-size: var(--fs-xs); line-height: 1.5; color: var(--color-ink-faint); }
.zd-field__error { font-size: var(--fs-xs); line-height: 1.5; color: var(--color-danger); font-weight: 500; }
.zd-field__error:empty { display: none; }
.zd-field__meta { display: flex; justify-content: space-between; gap: var(--gap-inline); font-size: var(--fs-2xs); color: var(--color-ink-faint); }
.zd-field__count { font-variant-numeric: tabular-nums; }
.zd-field__count[data-over="true"] { color: var(--color-danger); font-weight: 600; }
.zd-status-line { font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; }
.zd-status-line[data-tone="ok"] { color: var(--color-primary-hover); }
.zd-status-line[data-tone="bad"] { color: var(--color-danger); }
.zd-status-line[data-tone="muted"] { color: var(--color-ink-faint); }
.zd-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (max-width: 40rem) { .zd-grid-2 { grid-template-columns: 1fr; } }
.zd-check { display: flex; align-items: flex-start; gap: var(--gap-inline); cursor: pointer; font-size: var(--fs-small); line-height: 1.55; color: var(--color-ink-muted); }
.zd-check input { margin: 0.2em 0 0; width: 1rem; height: 1rem; accent-color: var(--color-primary); flex: none; }
.zd-toggle { display: inline-flex; align-items: center; gap: var(--gap-inline-sm); font-size: var(--fs-small); color: var(--color-ink-muted); cursor: pointer; }
.zd-toggle input { width: 1rem; height: 1rem; accent-color: var(--color-primary); margin: 0; }
/* чип за избор (категории, възрасти) */
.zd-pick { display: flex; flex-wrap: wrap; gap: var(--gap-inline-sm); }
.zd-pick__item { display: inline-flex; align-items: center; gap: var(--gap-inline-sm); min-height: var(--tap-min); padding: 0 var(--space-4); border: 1px solid var(--color-line-interactive); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--fs-small); font-weight: 500; color: var(--color-ink-muted); cursor: pointer; }
.zd-pick__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.zd-pick__item[data-on="true"] { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-hover); }
.zd-pick__item:focus-within { box-shadow: var(--focus-ring); }
.zd-pick__item[aria-disabled="true"] { opacity: .55; cursor: default; }
/* подреден списък (градове, категории с ред) */
.zd-ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-stack-1); }
.zd-ranked__row { display: flex; align-items: center; gap: var(--gap-inline); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
.zd-ranked__n { flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary-hover); font: 600 var(--fs-xs)/1.5rem var(--font-body); text-align: center; }
.zd-ranked__label { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: 500; }
.zd-ranked__tools { display: flex; gap: var(--space-1); }
.zd-ranked__tools .zd-round { width: var(--tap-min); height: var(--tap-min); border-color: var(--color-line); }
.zd-ranked__lead { font-size: var(--fs-2xs); color: var(--color-ink-faint); }
/* качване */
.zd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-stack-1); min-height: 8.5rem; padding: var(--space-inset-md); border: 1.5px dashed var(--color-line-interactive); border-radius: var(--radius-md); background: var(--color-surface-sunken); text-align: center; cursor: pointer; color: var(--color-ink-muted); font-size: var(--fs-small); }
.zd-drop:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); } /* скритият file input дава фокуса на зоната */
.zd-drop[data-over="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); }
.zd-drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.zd-drop__hint { font-size: var(--fs-2xs); color: var(--color-ink-faint); }
.zd-progress { height: 0.375rem; border-radius: var(--radius-full); background: var(--color-line); overflow: hidden; }
.zd-progress > span { display: block; height: 100%; background: var(--color-primary); transition: width var(--duration-base) var(--ease); }
.zd-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-sunken); border: 1px solid var(--color-line); }
.zd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zd-thumb--logo { aspect-ratio: 1; }
.zd-thumb__tools { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; gap: var(--space-1); }
.zd-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--gap-inline); }
/* ------------------------------------------------------------------ */
/* 5. Значки, чипове, тагове */
/* ------------------------------------------------------------------ */
.zd-badge { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font: 700 var(--fs-cap)/1 var(--font-body); letter-spacing: var(--tracking-badge); text-transform: uppercase; padding: var(--space-1) var(--space-2); border-radius: calc(6 * var(--k)); border: 1px solid var(--tier-free-bd); background: var(--tier-free-bg); color: var(--tier-free-fg); }
.zd-badge[data-tier="Незаявен"] { font-weight: 500; }
.zd-badge[data-tier="Стандартен"] { background: var(--tier-standard-bg); border-color: var(--tier-standard-bd); color: var(--tier-standard); }
.zd-badge[data-tier="Проверен"] { background: var(--tier-verified-bg); border-color: var(--tier-verified-bd); color: var(--tier-verified-ink); }
.zd-badge[data-tier="Доверен"], .zd-badge[data-tier="Екипна практика"] { background: var(--tier-trusted-bg); border-color: var(--tier-trusted-bd); color: var(--tier-trusted-ink); }
.zd-badge--founder { background: var(--founder-gradient); border-color: transparent; color: var(--color-accent-ink); }
.zd-checked { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font: 500 var(--fs-cap)/1 var(--font-body); color: var(--color-ink-muted); }
.zd-chip { display: inline-flex; align-items: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 var(--fs-2xs)/1 var(--font-body); padding: calc(6 * var(--k)) calc(9 * var(--k)); border-radius: var(--radius-full); border: 1px solid var(--chip-bd, var(--tier-standard-chip-bd)); background: var(--chip-bg, var(--tier-standard-chip-bg)); color: var(--chip-fg, var(--tier-standard-chip-fg)); }
.zd-chip--more { color: var(--color-ink-faint); background: var(--tier-free-bg); border-color: var(--tier-free-bd); font-weight: 600; }
.zd-tag { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 var(--fs-2xs)/1 var(--font-body); color: var(--color-ink-faint); background: var(--tier-free-bg); border: 1px solid var(--tier-free-bd); border-radius: 0.375rem; padding: var(--space-1) var(--space-2); white-space: nowrap; }
.zd-gain { font: 600 var(--fs-cap)/1 var(--font-body); color: var(--color-primary-hover); background: var(--color-primary-soft); padding: var(--space-1) var(--space-2); border-radius: 0.375rem; white-space: nowrap; }
/* ------------------------------------------------------------------ */
/* 6. Състоянията на заявката: банер, чип, системно съобщение */
/* ------------------------------------------------------------------ */
.zd-state, .zd-state-chip, .zd-sysmsg { --state: var(--state-draft); --state-ink: var(--state-draft-ink); }
[data-state="submitted"] { --state: var(--state-submitted); --state-ink: var(--state-submitted-ink); }
[data-state="review"] { --state: var(--state-review); --state-ink: var(--state-review-ink); }
[data-state="approved"] { --state: var(--state-approved); --state-ink: var(--state-approved-ink); }
[data-state="rejected"] { --state: var(--state-rejected); --state-ink: var(--state-rejected-ink); }
.zd-state { display: flex; align-items: flex-start; gap: var(--gap-inline); padding: var(--space-4) var(--space-4); border-radius: 0.875rem; background: color-mix(in srgb, var(--state) 9%, white); border: 1px solid color-mix(in srgb, var(--state) 20%, white); }
.zd-state__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--state) 14%, white); color: var(--state); }
.zd-state__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-stack-1); }
.zd-state__label { font: 600 var(--fs-cap)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--state-ink); }
.zd-state__text { font-size: var(--fs-small); line-height: 1.65; color: var(--color-ink); max-width: none; }
.zd-state__extra { font-size: var(--fs-2xs); font-weight: 500; line-height: 1.5; color: var(--state-ink); }
.zd-state__reason { font-size: var(--fs-small); line-height: 1.6; color: var(--color-ink-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-line); max-width: none; }
.zd-state-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.375rem 0.6875rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--state) 9%, white); border: 1px solid color-mix(in srgb, var(--state) 20%, white); color: var(--state-ink); font: 600 var(--fs-2xs)/1 var(--font-body); white-space: nowrap; }
.zd-state-chip svg { color: var(--state); }
.zd-sysmsg { display: flex; align-items: flex-start; gap: var(--gap-inline); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.zd-sysmsg:first-child { border-top: 0; }
.zd-sysmsg__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--state); margin-top: 0.4rem; }
.zd-sysmsg__text { flex: 1; min-width: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--color-ink); max-width: none; }
.zd-sysmsg__time { flex: none; font-size: var(--fs-2xs); color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------------ */
/* 7. Каталожната карта (хендовър 05, 400×540 / 400×260, радиус 22) */
/* ------------------------------------------------------------------ */
.zd-card {
--card-primary: var(--tier-standard); --card-primary-fg: #fff; --card-primary-bd: var(--tier-standard);
--chip-bg: var(--tier-standard-chip-bg); --chip-fg: var(--tier-standard-chip-fg); --chip-bd: var(--tier-standard-chip-bd);
--card-hero: var(--tier-standard-hero); --card-ground: var(--color-bg);
--card-border: 1px solid var(--color-line-strong); --card-shadow: var(--shadow-2);
--card-w: 25rem; --card-ar: 400 / 640; /* по-висока: заглавие 2 реда, описание до 6 */
/* Картата е контейнер за собствените си мерки: всичко вътре се смята от ширината ѝ,
затова на телефон излиза същата карта, само по-малка. */
container-type: inline-size;
position: relative; width: var(--card-w); max-width: 100%; aspect-ratio: var(--card-ar);
perspective: 1100px; font-family: var(--font-body); color: var(--color-ink);
}
.zd-card[data-tier="Проверен"] { --card-primary: var(--tier-verified); --card-primary-bd: var(--tier-verified); --chip-bg: var(--tier-verified-chip-bg); --chip-fg: var(--tier-verified-ink); --chip-bd: var(--tier-verified-chip-bd); --card-hero: var(--tier-verified-hero); }
.zd-card[data-tier="Доверен"], .zd-card[data-tier="Екипна практика"] { --card-primary: var(--tier-trusted); --card-primary-bd: var(--tier-trusted); --chip-bg: var(--tier-trusted-chip-bg); --chip-fg: var(--tier-trusted-ink); --chip-bd: var(--tier-trusted-chip-bd); --card-hero: var(--tier-trusted-hero); }
.zd-card[data-tier="Безплатен"], .zd-card[data-tier="Незаявен"] { --card-border: 1px solid rgba(47, 43, 58, .16); --card-shadow: none; --card-hero: var(--tier-free-hero); --chip-bg: var(--tier-standard-chip-bg); --chip-fg: var(--tier-standard-chip-fg); --chip-bd: var(--tier-standard-chip-bd); }
.zd-card[data-founder="true"] { --card-ground: var(--founder-ground); --card-border: 1.5px solid var(--color-gold-border); --card-shadow: var(--shadow-2); --chip-bg: var(--founder-chip-bg); --chip-fg: var(--founder-chip-fg); --chip-bd: var(--founder-chip-bd); --card-primary: var(--founder-gradient); --card-primary-fg: var(--color-accent-ink); --card-primary-bd: var(--color-gold-border); --card-hero: var(--founder-hero); }
.zd-card--short { --card-ar: 400 / 260; }
.zd-card__face {
/* 1 px при ширина 400 px; всяка мярка по-долу е кратна на него */
--k: 0.25cqw;
--card-photo: calc(210 * var(--k));
--space-1: calc(4 * var(--k)); --space-2: calc(8 * var(--k)); --space-3: calc(12 * var(--k));
--space-4: calc(16 * var(--k)); --space-5: calc(20 * var(--k));
--gap-inline-sm: calc(8 * var(--k)); --gap-inline: calc(12 * var(--k));
--fs-body: calc(14 * var(--k)); --fs-small: calc(13 * var(--k)); --fs-xs: calc(12 * var(--k));
--fs-card-meta: calc(12.5 * var(--k)); --fs-card-small: calc(11.5 * var(--k)); --fs-card-cap: calc(9.5 * var(--k));
/* заглавията вътре в картата също: иначе `.zd h3` печели и името остава едро */
--fs-h1: calc(26 * var(--k)); --fs-h2: calc(22 * var(--k)); --fs-h3: calc(18 * var(--k)); --fs-h4: calc(16 * var(--k));
--cta-h: calc(52 * var(--k));
--radius-xl: calc(22 * var(--k)); --radius-lg: calc(16 * var(--k));
--radius-md: calc(12 * var(--k)); --radius-sm: calc(8 * var(--k));
--fs-cap: calc(10 * var(--k)); --fs-2xs: calc(11 * var(--k));
/* без свой размер наследеният текст остава на 14 px и не се свива с картата */
font-size: var(--fs-body);
position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
border-radius: var(--radius-xl); background: var(--card-ground); border: var(--card-border); box-shadow: var(--card-shadow);
backface-visibility: hidden; -webkit-backface-visibility: hidden;
transition: transform var(--duration-flip) cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s;
}
.zd-card__face--back { transform: rotateY(180deg); }
.zd-card[data-side="back"] .zd-card__face--front { transform: rotateY(-180deg); }
.zd-card[data-side="back"] .zd-card__face--back { transform: rotateY(0); }
/* обърнатата настрани страна излиза и от реда за табулация, не само от погледа;
скриването се бави до края на завъртането, показването е мигновено */
.zd-card[data-side="front"] .zd-card__face--back, .zd-card[data-side="back"] .zd-card__face--front { visibility: hidden; transition: transform var(--duration-flip) cubic-bezier(.32, .72, 0, 1), visibility 0s linear var(--duration-flip); }
.zd-card__photo { flex: none; position: relative; height: var(--card-photo); background: var(--card-hero); overflow: hidden; }
.zd-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.zd-card__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 12px, rgba(255, 255, 255, .06) 12px 24px); }
.zd-card__photo:has(img)::after { display: none; }
.zd-card__top { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; gap: var(--space-2); z-index: 2; }
.zd-card__top .zd-round { border: 0; background: rgba(253, 252, 251, .92); box-shadow: 0 1px 4px rgba(26, 16, 60, .16); }
.zd-card__top .zd-round[aria-pressed="true"] { color: var(--color-primary); }
.zd-card--short .zd-card__top { top: calc(14 * var(--k)); right: var(--space-4); }
.zd-card--short .zd-card__top .zd-round { width: calc(30 * var(--k)); height: calc(30 * var(--k)); background: var(--color-surface); border: 1px solid rgba(47, 43, 58, .14); box-shadow: none; }
/* Иконите тръгват от същата лява линия като пиловете горе (Руси, 2026-09-09). */
.zd-card__photo-icons { position: absolute; left: var(--space-3); right: var(--space-3); bottom: calc(10 * var(--k)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--k)); z-index: 1; }
/* При пет икони редът излизаше извън снимката и се отрязваше мълчаливо; сега се пренася. */
.zd-card__photo-icons .zd-card__icons { justify-content: flex-start; flex-wrap: wrap; row-gap: calc(6 * var(--k)); }
.zd-card__photo-icons .zd-round { width: calc(28 * var(--k)); height: calc(28 * var(--k)); border-color: rgba(47, 43, 58, .1); box-shadow: 0 2px 5px rgba(20, 18, 40, .22), inset 0 1px 0 #fff; }
.zd-card__field { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) calc(15 * var(--k)) calc(14 * var(--k)); position: relative; }
.zd-card--short .zd-card__field { gap: var(--space-2); padding: calc(14 * var(--k)) var(--space-4); }
.zd-card__strip { flex: none; display: flex; align-items: center; gap: calc(7 * var(--k)); overflow: hidden; white-space: nowrap; }
/* Пиловете стоят горе вляво НАД снимката, на един ред. Върху снимка фонът им става плътен,
а под тях лежи мек градиент, за да се четат и върху светла, и върху тъмна снимка. */
.zd-card__strip--onphoto {
position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
max-width: calc(100% - calc(104 * var(--k))); /* мястото вдясно е за запази и сподели */
flex-wrap: nowrap;
}
/* На тесен екран трите пила не се побират в един ред и СОП се отрязваше мълчаливо. */
/* На телефон снимката е ниска: вторият ред икони се вдига до бутона „още", затова му пазим мястото вдясно. */
.zd-card__photo:has(img):has(.zd-card__strip--onphoto)::before {
content: ""; position: absolute; inset: 0 0 auto; height: calc(72 * var(--k)); pointer-events: none; z-index: 1;
background: linear-gradient(to bottom, rgba(20, 14, 40, .34), rgba(20, 14, 40, 0));
}
.zd-card__strip--onphoto .zd-badge { border-color: transparent; box-shadow: 0 1px 3px rgba(20, 14, 40, .28); }
.zd-card__strip--onphoto .zd-badge[data-tier="Проверен"] { background: var(--tier-verified); color: #fff; }
.zd-card__strip--onphoto .zd-badge[data-tier="Доверен"], .zd-card__strip--onphoto .zd-badge[data-tier="Екипна практика"] { background: var(--tier-trusted); color: #fff; }
.zd-card__strip--onphoto .zd-badge[data-tier="Стандартен"] { background: var(--tier-standard); color: #fff; }
.zd-card__strip--onphoto .zd-checked {
background: rgba(253, 252, 251, .93); color: var(--color-ink); border-radius: calc(6 * var(--k));
padding: var(--space-1) var(--space-2); box-shadow: 0 1px 3px rgba(20, 14, 40, .22);
}
.zd-badge--sop { background: #e8f0fb; border-color: #c3d8f2; color: #1f4d80; }
.zd-card__strip--onphoto .zd-badge--sop { background: #1f4d80; color: #fff; }
/* Обръщането: матово стъкло на левия ръб на снимката, по средата. */
.zd-card__flipedge {
position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 3;
display: inline-flex; align-items: center; gap: calc(6 * var(--k));
padding: calc(8 * var(--k)) calc(10 * var(--k)) calc(8 * var(--k)) calc(12 * var(--k));
border: 1px solid rgba(255, 255, 255, .55); border-right: 0;
border-radius: var(--radius-full) 0 0 var(--radius-full);
background: rgba(255, 255, 255, .62);
-webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
box-shadow: 0 2px 10px rgba(20, 14, 40, .22), inset 0 1px 0 rgba(255, 255, 255, .85);
color: var(--color-ink); font: 600 var(--fs-card-small)/1 var(--font-body); cursor: pointer;
}
.zd-card__flipedge svg { flex: none; }
.zd-card__flipedge::before { content: ""; position: absolute; inset: calc(-6 * var(--k)) 0; }
.zd-card__flipedge { transition: transform var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); transform-origin: right center; }
@media (hover: hover) and (pointer: fine) {
.zd-card__flipedge:hover { background: rgba(255, 255, 255, .88); }
}
.zd-card__flipedge:active { transform: translateY(-50%) scale(.96); }
.zd-card__photo:not(:has(img)) .zd-card__flipedge { background: var(--color-surface); border-color: var(--color-line-strong); }
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
.zd-card__flipedge { background: rgba(255, 255, 255, .92); }
}
.zd-card--short .zd-card__face--front .zd-card__strip, .zd-card--short .zd-card__face--front .zd-card__name { padding-right: calc(76 * var(--k)); }
.zd-card__face .zd-card__name { flex: none; font-weight: 400; font-size: calc(18 * var(--k)); line-height: 1.28; font-family: var(--font-display); color: var(--color-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(46 * var(--k)); text-wrap: pretty; /* заглавие: балансиран пренос, клампът остава предпазител */ }
.zd-card--short .zd-card__face .zd-card__name { font-size: calc(17 * var(--k)); -webkit-line-clamp: 1; min-height: calc(22 * var(--k)); }
.zd-card__city { flex: none; display: flex; align-items: center; gap: calc(6 * var(--k)); font-size: var(--fs-card-meta); line-height: 1.35; color: var(--color-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.zd-card__city svg { flex: none; }
.zd-card__desc { flex: none; font-size: var(--fs-card-meta); line-height: 1.35; color: var(--color-ink-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--desc-lines, 2); overflow: hidden; max-width: none; text-wrap: initial; }
.zd-card__chips { flex: none; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: calc(6 * var(--k)); overflow: hidden; height: calc(24 * var(--k)); }
.zd-card__chips li { flex: none; max-width: calc(178 * var(--k)); }
.zd-card__chips .zd-chip--more { flex: none; margin-left: auto; }
/* Двата източника не са равни, затова не изглеждат еднакво: Google е реалният сигнал днес и
получава голямата звезда и двата реда вляво; нашият стои вдясно, по-тихо, и когато е празен
казва „Скоро" вместо тире (Руси, 2026-09-09). */
.zd-card__metrics {
/* Мрежа, не flex: две наистина равни половини. При flex подложката на дясната половина
се добавя ВЪН от основата и я прави с тринайсет пиксела по-широка. */
flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center; gap: var(--space-3);
border-top: 1px solid rgba(47, 43, 58, .1); border-bottom: 1px solid rgba(47, 43, 58, .1);
padding: var(--space-2) 0;
}
.zd-metric { display: flex; align-items: center; gap: calc(8 * var(--k)); min-width: 0; }
/* Цветът идва оттук, а не от SVG атрибут: атрибутът не приема променлива. */
.zd-metric--google { color: var(--color-gold-ink); }
.zd-metric--zd { color: var(--color-primary); }
.zd-metric__ico { flex: none; }
.zd-metric svg { flex: none; }
.zd-metric__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.zd-metric__body b { font-weight: 700; font-size: calc(17 * var(--k)); line-height: 1.1; font-family: var(--font-body); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.zd-metric__body span { font-size: var(--fs-card-small); color: var(--color-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* равни по място: два източника, еднакво тегло */
.zd-metric--zd { padding-left: var(--space-3); border-left: 1px solid rgba(47, 43, 58, .1); }
.zd-card__metrics:not(:has(.zd-metric--google)) { grid-template-columns: minmax(0, 1fr); }
.zd-card__metrics:not(:has(.zd-metric--google)) .zd-metric--zd { padding-left: 0; border-left: 0; }
.zd-metric--zd .zd-metric__body b { font-size: var(--fs-card-meta); font-weight: 600; color: var(--color-ink-muted); }
.zd-metric--soon .zd-metric__body b { color: var(--color-ink-muted); font-weight: 600; } /* обещание, не акцент */
.zd-card__ind { flex: none; display: flex; align-items: stretch; border-top: 1px solid rgba(47, 43, 58, .1); border-bottom: 1px solid rgba(47, 43, 58, .1); padding: calc(6 * var(--k)) 0; }
.zd-card__ind-item { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--k)); font: 500 var(--fs-card-small)/1.3 var(--font-body); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zd-card__ind-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* елементът е flex контейнер; многоточието работи само върху детето */
.zd-card__ind-item + .zd-card__ind-item { border-left: 1px solid rgba(47, 43, 58, .1); }
.zd-card__ind-item svg { flex: none; }
.zd-card__icons { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--gap-inline-sm); }
.zd-card__icons--field { flex: none; }
.zd-card__icons .zd-round { width: calc(26 * var(--k)); height: calc(26 * var(--k)); }
.zd-card__icons .zd-round--push { margin-left: auto; }
.zd-card__plain { flex: none; font-size: var(--fs-card-small); line-height: 1.5; color: var(--color-ink-muted); max-width: none; }
.zd-card__fliprow { flex: none; margin-top: auto; display: flex; justify-content: flex-end; }
.zd-card__flipword { display: inline-flex; align-items: center; gap: calc(7 * var(--k)); background: transparent; border: 0; padding: 0; cursor: pointer; font: 600 var(--fs-xs)/1 var(--font-body); color: var(--color-ink-muted); }
.zd-card__actions { flex: none; display: flex; align-items: flex-end; gap: var(--space-2); }
.zd-card__actions--push { margin-top: auto; }
.zd-card__btns { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.zd-card__btns--two { grid-template-columns: 1fr 1.15fr; }
.zd-card__cta { position: relative; overflow: hidden; height: var(--cta-h); border-radius: calc(14 * var(--k)); font: 600 var(--fs-body)/1 var(--font-body); white-space: nowrap; text-overflow: ellipsis; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 var(--space-2); }
.zd-card__cta--ghost { background: transparent; border: 1px solid var(--color-line-strong); color: var(--color-charcoal); }
.zd-card__cta--primary { background: var(--card-primary); border: 1px solid var(--card-primary-bd); color: var(--card-primary-fg); }
.zd-card__cta--claim { background: transparent; border: 1px solid rgba(47, 43, 58, .35); color: var(--color-charcoal); }
.zd-card__cta:hover { filter: brightness(.96); }
.zd-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 44%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--shine, rgba(255, 255, 255, .22)), transparent); animation: zd-shine var(--shine-dur, 9s) linear infinite; animation-delay: var(--shine-delay, 0s); }
@keyframes zd-shine { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
/* Гърбът е за четене, не за оглед: повече въздух между блоковете и по-широки редове. */
.zd-card__field--back { gap: var(--space-3); padding: var(--space-4) calc(15 * var(--k)) var(--space-4); }
.zd-card__field--back .zd-card__sec { gap: calc(8 * var(--k)); }
.zd-card__field--back .zd-card__back-desc { line-height: 1.7; }
.zd-card__field--back .zd-card__back-contact { line-height: 1.75; }
/* Миникартата стои най-долу и показва точката, с която практиката е отбелязана при нас. */
.zd-card__minimap { flex: none; margin: auto 0 0; display: flex; flex-direction: column; gap: calc(6 * var(--k)); }
.zd-card__minimap img { width: 100%; height: calc(52 * var(--k)); object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-line); display: block; }
.zd-card__minimap figcaption { display: flex; align-items: center; gap: calc(5 * var(--k)); font-size: var(--fs-card-cap); color: var(--color-ink-faint); }
.zd-card__minimap figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zd-card__minimap[data-failed="true"] img { display: none; }
.zd-card__back-head { flex: none; display: flex; flex-direction: column; gap: var(--space-1); }
.zd-card__sec { flex: none; display: flex; flex-direction: column; gap: calc(7 * var(--k)); }
.zd-card__sec-title { font: 600 var(--fs-card-cap)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-faint); }
.zd-card__back-desc { font-size: var(--fs-card-meta); line-height: 1.6; color: var(--color-ink-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--back-lines, 4); overflow: hidden; max-width: none; }
.zd-card__back-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(6 * var(--k)); }
.zd-card__back-contact { font-size: var(--fs-xs); line-height: 1.7; color: var(--color-ink-muted); max-width: none; }
.zd-card__unclaimed { margin-top: auto; font-size: var(--fs-card-small); line-height: 1.6; color: var(--color-ink-faint); max-width: none; }
.zd-card__backbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(7 * var(--k)); background: transparent; border: 0; padding: 0; cursor: pointer; font: 600 var(--fs-card-small)/1 var(--font-body); color: var(--color-ink-muted); }
.zd-card__proof {
/* Свой тесен контейнер вдясно от бутоните, точно където при късите карти стои
стрелката за обръщане. Изправен на редове, за да заема по-малко ширина. */
flex: none; align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end;
gap: calc(2 * var(--k)); text-align: right; max-width: calc(84 * var(--k));
font: 500 var(--fs-card-small)/1.3 var(--font-body); color: var(--color-ink-faint);
font-variant-numeric: tabular-nums;
}
.zd-card__proof-item { display: inline-flex; align-items: center; gap: calc(4 * var(--k)); white-space: nowrap; }
.zd-card__proof-date { font-weight: 600; color: var(--color-ink-muted); white-space: nowrap; }
.zd-card__proof-item svg { color: var(--color-ink-faint); }
.zd-card__copied { color: var(--tier-verified); }
/* ------------------------------------------------------------------ */
/* 7б. Лентата на телефон: една карта на екран, която щраква на място */
/* ------------------------------------------------------------------ */
/* Мярката е телефонът: картата заема целия екран под търсачката, а превъртането
спира точно върху следващата карта. На компютър лентата не се включва. */
.zd-feed {
--feed-controls: 4.5rem; /* лепкавата лента горе за търсачката */
--feed-pad: var(--space-3);
--feed-h: 100dvh; /* в рамка на телефон се подава 100% */
height: var(--feed-h); overflow-y: auto; overscroll-behavior-y: contain;
scroll-snap-type: y mandatory; scroll-behavior: smooth;
/* търсачката стои залепена горе, затова спирката е под нея, не под ръба */
scroll-padding-top: var(--feed-controls);
scrollbar-width: none;
}
.zd-feed::-webkit-scrollbar { display: none; }
.zd-feed__controls {
position: sticky; top: 0; z-index: 5; min-height: var(--feed-controls);
display: flex; align-items: center; gap: var(--gap-inline-sm);
padding: var(--space-2) var(--feed-pad);
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-line);
}
.zd-feed__item {
height: calc(var(--feed-h) - var(--feed-controls));
scroll-snap-align: start; scroll-snap-stop: always;
display: grid; place-items: center; padding: var(--feed-pad);
}
/* В лентата картата взима цялата ширина и цялата височина на екрана. Вътрешните
мерки идват от ширината, затова горната част стои на същите места като на
компютър, а свободната височина отива между съдържанието и бутоните. */
.zd-feed .zd-card { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; }
/* Клавиатурата също минава по лентата, а не само пръстът. */
.zd-feed__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
.zd-feed { scroll-behavior: auto; }
}
/* ------------------------------------------------------------------ */
/* 8. Публичният профил (mock „MiniSite") */
/* ------------------------------------------------------------------ */
.zd-profile {
--p-accent: var(--tier-standard); --p-accent-fg: var(--tier-standard); --chip-bg: var(--tier-standard-chip-bg); --chip-fg: var(--tier-standard-chip-fg); --chip-bd: var(--tier-standard-chip-bd);
--p-hero: var(--tier-standard-hero); --p-btn-bg: var(--tier-standard); --p-btn-fg: #fff; --p-btn-bd: var(--tier-standard);
width: 100%; background: var(--color-bg); border: 1px solid rgba(47, 43, 58, .16); border-radius: 1.125rem; overflow: hidden; font-family: var(--font-body); color: var(--color-ink);
}
.zd-profile[data-tier="Проверен"] { --p-accent: var(--tier-verified); --p-accent-fg: var(--tier-verified-ink); --chip-bg: var(--tier-verified-chip-bg); --chip-fg: var(--tier-verified-ink); --chip-bd: var(--tier-verified-chip-bd); --p-hero: var(--tier-verified-hero); --p-btn-bg: var(--tier-verified); --p-btn-bd: var(--tier-verified); }
.zd-profile[data-tier="Доверен"], .zd-profile[data-tier="Екипна практика"] { --p-accent: var(--tier-trusted); --p-accent-fg: var(--tier-trusted-ink); --chip-bg: var(--tier-trusted-chip-bg); --chip-fg: var(--tier-trusted-ink); --chip-bd: var(--tier-trusted-chip-bd); --p-hero: var(--tier-trusted-hero); --p-btn-bg: var(--tier-trusted); --p-btn-bd: var(--tier-trusted); }
.zd-profile[data-tier="Безплатен"], .zd-profile[data-tier="Незаявен"] { --p-accent: var(--tier-free-fg); --p-accent-fg: var(--color-ink-muted); --p-hero: var(--tier-free-hero); --p-btn-bg: transparent; --p-btn-fg: var(--color-charcoal); --p-btn-bd: rgba(47, 43, 58, .35); }
.zd-profile[data-founder="true"] { --p-accent: #c39a2c; --p-accent-fg: #8a6800; --chip-bg: var(--founder-chip-bg); --chip-fg: var(--founder-chip-fg); --chip-bd: var(--founder-chip-bd); --p-hero: var(--founder-hero); --p-btn-bg: var(--founder-gradient); --p-btn-fg: var(--color-accent-ink); --p-btn-bd: var(--color-gold-border); }
.zd-profile__hero { position: relative; height: 11.875rem; background: var(--p-hero); overflow: hidden; }
.zd-profile__hero img { width: 100%; height: 100%; object-fit: cover; }
.zd-profile__hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 14px, rgba(255, 255, 255, .06) 14px 28px); }
.zd-profile__hero:has(img)::after, .zd-profile__hero--mark::after { display: none; }
.zd-profile__hero--low { height: 8.125rem; }
.zd-profile__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .5; }
.zd-profile__body { padding: var(--space-6) 1.75rem var(--space-6); }
.zd-profile__head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.zd-profile__logo { position: relative; z-index: 1; flex: none; width: 4rem; height: 4rem; border-radius: 0.875rem; background: var(--chip-bg); color: var(--p-accent-fg); font: 400 1.5625rem/4rem var(--font-display); text-align: center; margin-top: -2.625rem; border: 3px solid var(--color-bg); box-shadow: 0 2px 8px rgba(26, 16, 60, .12); overflow: hidden; }
.zd-profile__logo img { width: 100%; height: 100%; object-fit: cover; }
.zd-profile__headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.zd-profile__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.zd-profile__name { font: 400 1.625rem/1.25 var(--font-display); color: var(--color-ink); }
.zd-profile__addr { font-size: var(--fs-small); line-height: 1.6; color: var(--color-ink-faint); }
.zd-profile__age { font: 500 var(--fs-card-meta)/1.5 var(--font-body); color: var(--color-ink-muted); }
.zd-profile__grid { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: var(--space-8); align-items: start; }
.zd-profile__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.zd-profile__side { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.zd-profile__sec { display: flex; flex-direction: column; gap: var(--space-2); }
.zd-profile__sec > .zd-cap { font-size: var(--fs-card-cap); }
.zd-profile__desc p { font-size: var(--fs-body); line-height: 1.75; color: var(--color-ink-muted); max-width: var(--measure); }
.zd-profile__desc p + p { margin-top: var(--space-stack-2); }
.zd-profile__mission { font: italic 400 0.9375rem/1.7 var(--font-display); color: var(--color-ink-muted); max-width: none; }
.zd-profile__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.zd-profile__chips .zd-chip { font-size: var(--fs-card-small); padding: 0.4375rem 0.6875rem; }
.zd-profile__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.zd-profile__gallery > * { aspect-ratio: 4 / 3; border-radius: 0.625rem; overflow: hidden; border: 1px solid rgba(47, 43, 58, .1); background: var(--color-surface-sunken); }
.zd-profile__gallery img { width: 100%; height: 100%; object-fit: cover; }
.zd-profile__team { display: flex; flex-direction: column; gap: 0.5625rem; }
.zd-profile__member { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3) 0.875rem; }
.zd-profile__initials { flex: none; width: 2.375rem; height: 2.375rem; border-radius: var(--radius-full); background: var(--chip-bg); color: var(--p-accent-fg); font: 600 var(--fs-xs)/2.375rem var(--font-body); text-align: center; }
.zd-profile__member b { display: block; font: 600 var(--fs-card-meta)/1.4 var(--font-body); color: var(--color-ink); }
.zd-profile__member span { display: block; font-size: var(--fs-card-small); line-height: 1.5; color: var(--color-ink-faint); }
.zd-profile__map { border: 1px solid rgba(47, 43, 58, .14); border-radius: var(--radius-md); overflow: hidden; background: #eef1ec; }
.zd-profile__map iframe, .zd-profile__map svg { display: block; width: 100%; height: 9.375rem; border: 0; }
.zd-panel { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 0.875rem; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.zd-panel > .zd-cap { font-size: var(--fs-card-cap); }
.zd-panel__ctas { display: flex; flex-direction: column; gap: 0.625rem; }
.zd-panel__cta { height: var(--cta-h); border-radius: 0.875rem; font: 600 var(--fs-body)/1 var(--font-body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 0.875rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.zd-panel__cta--primary { border: 1px solid var(--p-btn-bd); background: var(--p-btn-bg); color: var(--p-btn-fg); }
.zd-panel__cta--ghost { border: 1px solid var(--color-line-strong); background: transparent; color: var(--color-charcoal); }
.zd-panel__cta--claim { border: 0; background: var(--color-primary); color: var(--color-primary-ink); }
.zd-panel__contact { display: flex; flex-direction: column; gap: 0.5625rem; padding-top: 0.875rem; border-top: 1px solid var(--color-line-soft); }
.zd-panel__contact > span { font-size: var(--fs-card-meta); line-height: 1.5; color: var(--color-ink-muted); }
.zd-panel__contact > span:first-child { font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; }
/* Безплатното ниво ПОКАЗВА контактите, но не ги дава за действие: без връзка, без бутон за
копиране и без маркиране с мишката или с дълго натискане (Руси, 2026-09-10). Това е
стъпалото на стълбицата, не защита: който отвори кода на страницата, ще ги прочете. */
.zd-profile[data-tier="Безплатен"] .zd-panel__contact,
.zd-profile[data-tier="Незаявен"] .zd-panel__contact,
.zd-card[data-tier="Безплатен"] .zd-card__plain,
.zd-card[data-tier="Незаявен"] .zd-card__plain {
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none; /* дългото натискане на iPhone също не предлага „Копирай" */
}
.zd-panel__icons { display: flex; flex-wrap: wrap; gap: 0.4375rem; padding-top: 0.875rem; border-top: 1px solid var(--color-line-soft); }
.zd-panel__icons .zd-round { width: 1.875rem; height: 1.875rem; border-color: rgba(47, 43, 58, .14); box-shadow: 0 1px 3px rgba(20, 18, 40, .1); }
.zd-panel__icons .zd-round--muted { box-shadow: none; }
.zd-hours { display: flex; flex-direction: column; gap: var(--space-2); }
.zd-hours__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-xs); line-height: 1.5; }
.zd-hours__row b { font-weight: 500; color: var(--color-ink); }
.zd-hours__row span { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; text-align: right; }
.zd-ratings { display: flex; flex-direction: column; gap: 0.625rem; }
.zd-ratings__row { display: flex; align-items: center; gap: var(--space-2); font: 500 var(--fs-xs)/1.5 var(--font-body); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.zd-profile__foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line-soft); font-size: var(--fs-xs); line-height: 1.7; color: var(--color-ink-faint); max-width: none; }
@media (max-width: 48rem) {
.zd-profile__hero { height: 7.5rem; }
.zd-profile__body { padding: 1.125rem; }
.zd-profile__grid { grid-template-columns: 1fr; gap: var(--space-6); }
.zd-profile__logo { width: 3.375rem; height: 3.375rem; font-size: 1.3125rem; line-height: 3.375rem; margin-top: -2.125rem; }
.zd-profile__name { font-size: 1.3125rem; }
.zd-profile__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------------ */
/* 9. Съветникът и таблото: обвивка, странична лента, секции */
/* ------------------------------------------------------------------ */
.zd-shell { min-height: 100dvh; background: var(--color-bg); display: flex; align-items: stretch; }
.zd-side { flex: none; width: 15.125rem; background: var(--color-surface); border-right: 1px solid var(--color-line); padding: var(--space-6) 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; }
.zd-side__brand { display: flex; align-items: center; gap: 0.625rem; padding: 0 var(--space-5) var(--space-5); }
.zd-side__brand img { height: 2rem; width: auto; }
.zd-side__ready { display: flex; align-items: center; gap: 0.875rem; padding: 0 var(--space-5) var(--space-5); font: 600 var(--fs-card-small)/1.45 var(--font-body); color: var(--color-ink); }
.zd-side__steps { display: flex; flex-direction: column; gap: 0.125rem; padding: 0 var(--space-3); }
.zd-side__step { display: flex; align-items: center; gap: 0.6875rem; width: 100%; text-align: left; border: 0; background: transparent; padding: 0.6875rem; border-radius: 0.5625rem; cursor: pointer; font: 600 var(--fs-card-meta)/1.35 var(--font-body); color: var(--color-ink-faint); }
.zd-side__step[aria-current="step"] { background: var(--color-primary-soft); color: var(--color-ink); }
.zd-side__step[data-done="true"] { color: var(--color-ink); }
.zd-side__dot { flex: none; width: 0.9375rem; height: 0.9375rem; border-radius: var(--radius-full); border: 2px solid var(--color-line); }
.zd-side__step[aria-current="step"] .zd-side__dot { border-color: var(--color-primary); }
.zd-side__foot { margin-top: auto; padding: 1.125rem var(--space-5) 0; display: flex; flex-direction: column; gap: 0.625rem; }
.zd-side__foot::before { content: ""; display: block; height: 1px; background: var(--color-line); margin-bottom: var(--space-2); }
.zd-tierpill { display: inline-flex; align-items: center; gap: 0.375rem; align-self: flex-start; background: #fdf6e3; border: 1px solid #f0dfae; border-radius: var(--radius-full); padding: 0.3125rem 0.625rem; font: 600 var(--fs-cap)/1 var(--font-body); color: #8a6800; /* 4.6:1 върху #fdf6e3 при 10 px */ }
.zd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zd-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; flex-wrap: wrap; padding: 1.125rem var(--container-pad); background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.zd-topbar__brand { display: flex; align-items: center; gap: 0.6875rem; }
.zd-topbar__brand img { height: 1.75rem; width: auto; }
.zd-topbar__right { display: flex; align-items: center; gap: var(--space-4); flex: 1; justify-content: flex-end; }
.zd-topbar__step { font: 500 var(--fs-xs)/1 var(--font-body); color: var(--color-ink-faint); white-space: nowrap; }
.zd-stepbar { flex: 0 1 18.75rem; height: 0.375rem; border-radius: 0.25rem; background: var(--color-line); overflow: hidden; }
.zd-stepbar > span { display: block; height: 100%; background: var(--color-primary); transition: width var(--duration-base) var(--ease); }
.zd-stepbars { display: flex; align-items: center; gap: var(--space-2); }
.zd-stepbars > button { position: relative; flex: 1; height: 0.3125rem; border: 0; padding: 0; border-radius: 0.1875rem; background: var(--color-line); cursor: pointer; }
/* лентата е 5 px висока; целта за пръст е 45 px, без лентата да расте */
.zd-stepbars > button::before { content: ""; position: absolute; inset: -1.25rem 0; }
.zd-stepbars > button[data-done="true"], .zd-stepbars > button[aria-current="step"] { background: var(--color-primary); }
.zd-content { flex: 1; padding: var(--space-8) var(--container-pad) var(--space-16); }
.zd-content__inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: var(--space-10); align-items: start; }
.zd-content__inner--single { grid-template-columns: minmax(0, 1fr); max-width: 47.5rem; }
.zd-col { min-width: 0; }
.zd-lead { font-size: var(--fs-body); line-height: 1.7; color: var(--color-ink-muted); max-width: var(--measure); }
/* Ролите на вертикалния ритъм в колоната на стъпката (канон §2): заглавие stack-1, блокове и
секции stack-2, границите между зони (глава/действия) stack-3. Една роля = един токен. */
.zd-head { display: flex; flex-direction: column; gap: var(--space-stack-1); margin-bottom: var(--space-stack-3); }
.zd-stack { display: flex; flex-direction: column; gap: var(--space-stack-2); }
.zd-section { background: var(--color-surface); border-radius: 0.875rem; box-shadow: var(--shadow-1); padding: var(--space-inset-lg); display: flex; flex-direction: column; gap: var(--space-stack-2); }
.zd-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); }
.zd-section__head h2 { font-size: var(--fs-h3); } /* второ ниво под h1 на стъпката, с размера на h3 от артборда */
.zd-section__body { display: flex; flex-direction: column; gap: var(--space-stack-2); }
.zd-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); flex-wrap: wrap; margin-top: var(--space-stack-3); padding-top: var(--space-stack-2); border-top: 1px solid var(--color-line); }
.zd-actions__right { display: flex; align-items: center; gap: var(--gap-inline); flex-wrap: wrap; }
.zd-actions__note { max-width: var(--measure-lead); }
.zd-preview { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-stack-2); }
.zd-preview__cap { display: flex; align-items: center; gap: var(--gap-inline-sm); }
.zd-preview__cap::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background: var(--color-primary); }
.zd-preview__ready { display: flex; flex-direction: column; gap: var(--space-stack-1); padding-top: var(--space-stack-2); border-top: 1px solid var(--color-line); }
.zd-preview__ready-row { display: flex; justify-content: space-between; gap: var(--space-3); font: 600 var(--fs-xs)/1.4 var(--font-body); }
.zd-preview__ready-row span:last-child { color: var(--color-primary-hover); }
.zd-linkcard { display: flex; align-items: center; gap: 0.6875rem; width: 100%; text-align: left; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 0.8125rem 0.9375rem; cursor: pointer; text-decoration: none; color: inherit; }
.zd-linkcard b { display: block; font: 600 var(--fs-card-meta)/1.35 var(--font-body); color: var(--color-ink); }
.zd-linkcard span { display: block; font-size: var(--fs-2xs); line-height: 1.5; color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
.zd-linkcard > span:last-child, .zd-linkcard__go { flex: none; font: 600 var(--fs-card-small)/1 var(--font-body); color: var(--color-primary-hover); }
.zd-linkcard__body { flex: 1; min-width: 0; }
.zd-ring { position: relative; flex: none; width: 3.875rem; height: 3.875rem; }
.zd-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.zd-ring__track { fill: none; stroke: #f0edf7; stroke-width: 11; }
.zd-ring__bar { fill: none; stroke: var(--color-primary); stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray var(--duration-slow) var(--ease); }
.zd-ring__val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 var(--fs-body)/1 var(--font-body); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.zd-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.zd-recap__group { background: var(--color-surface); border-radius: 0.875rem; box-shadow: var(--shadow-1); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.zd-recap__group h2 { font-size: var(--fs-lg); }
.zd-recap__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-2); font-size: var(--fs-small); line-height: 1.5; }
.zd-recap__row dt { color: var(--color-ink-faint); }
.zd-recap__row dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.zd-recap__row dd:empty::before { content: "–"; color: var(--color-ink-faint); }
.zd-consent { display: flex; align-items: flex-start; gap: 0.6875rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 0.875rem; padding: var(--space-4) 1.125rem; cursor: pointer; }
.zd-toast { position: fixed; left: 50%; bottom: 1.75rem; transform: translateX(-50%); z-index: var(--z-toast); transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
@starting-style { .zd-toast:not([hidden]) { opacity: 0; transform: translate(-50%, 0.5rem); } }
.zd-toast { background: #171033; color: #fff; border-radius: var(--radius-md); padding: 0.875rem var(--space-5); font: 500 var(--fs-small)/1.4 var(--font-body); box-shadow: 0 12px 32px rgba(23, 16, 51, .34); max-width: min(var(--modal-max-sm), calc(100vw - 2rem)); text-align: center; }
.zd-toast[hidden] { display: none; }
/* Диалогът с подробния профил: голям модален ред (две колони), фон и заключен скрол от JS. */
.zd-dialog { width: min(var(--modal-max-lg), calc(100vw - 2rem)); max-height: var(--modal-max-h); padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; box-shadow: var(--shadow-2); }
.zd-dialog::backdrop { background: rgba(26, 16, 60, .45); }
.zd-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-inline); padding: var(--space-inset-md); background: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.zd-dialog__body { overflow: auto; max-height: calc(var(--modal-max-h) - 3.5rem); }
.zd-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; border-bottom: 1px solid var(--color-line); }
.zd-tabs > button { padding: 0.6875rem 0.875rem; border: 0; background: transparent; cursor: pointer; font: 500 var(--fs-card-meta)/1 var(--font-body); color: var(--color-ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.zd-tabs > button[aria-selected="true"] { font-weight: 600; color: var(--color-ink); border-bottom-color: var(--color-primary); }
.zd-mobile-preview { display: none; }
.zd-callout { display: flex; align-items: flex-start; gap: 0.625rem; padding: var(--space-4) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-line); font-size: var(--fs-xs); line-height: 1.65; color: var(--color-ink-muted); }
.zd-callout--primary { border-color: rgba(124, 77, 255, .28); }
.zd-claimbox { background: var(--color-surface); border: 1px solid rgba(124, 77, 255, .28); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.zd-claimbox__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.125rem; }
.zd-claimbox__text { flex: 1; min-width: 16.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.zd-claimbox__btns { flex: none; display: flex; flex-direction: column; gap: 0.5625rem; min-width: 13.75rem; }
.zd-claimbox__foot { display: flex; align-items: flex-start; gap: 0.625rem; padding-top: var(--space-4); border-top: 1px solid var(--color-line-soft); font: 500 var(--fs-xs)/1.65 var(--font-body); color: var(--color-ink-muted); }
@media (max-width: 64rem) {
.zd-content__inner { grid-template-columns: minmax(0, 1fr); }
.zd-preview { position: static; }
.zd-side { display: none; }
.zd-recap { grid-template-columns: 1fr; }
.zd-content { padding-inline: var(--space-4); }
}
@media (max-width: 40rem) {
.zd-topbar { padding: var(--space-3) var(--space-4); }
.zd-topbar__right { flex-basis: 100%; }
.zd-mobile-preview { display: block; }
.zd-stepbars.zd-mobile-preview { display: flex; } /* лентите на стъпките остават в ред, не в колона */
.zd-preview--side { display: none; }
.zd-preview .zd-card { width: 100%; }
.zd-section { padding: var(--space-4); }
.zd-actions { position: sticky; bottom: 0; background: var(--color-bg); padding-bottom: var(--space-3); z-index: var(--z-sticky); }
.zd-recap__row { grid-template-columns: 1fr; }
}
} /* @layer zd-base */
/* ------------------------------------------------------------------ */
/* 10. Редакторският слой: само под .zd-editor, никога навън */
/* ------------------------------------------------------------------ */
@layer zd-editor {
.zd-editor .zd-editable { position: relative; }
.zd-editor .zd-pen { position: absolute; top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); width: 2rem; height: 2rem; border-radius: var(--radius-full); border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-charcoal); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
.zd-editor .zd-pen::before { content: ""; position: absolute; inset: -0.375rem; } /* 44 px цел */
.zd-editor .zd-editable:hover > .zd-pen, .zd-editor .zd-editable:focus-within > .zd-pen, .zd-editor .zd-pen:focus-visible { opacity: 1; }
.zd-editor .zd-editable:hover { outline: 1px solid var(--color-line-strong); outline-offset: 0.25rem; border-radius: var(--radius-sm); }
.zd-editor .zd-pen--photo { background: rgba(23, 16, 51, .78); color: #fff; border-color: transparent; }
@media (hover: none) { .zd-editor .zd-pen { opacity: 1; } }
.zd-editor .zd-locked { position: relative; filter: saturate(.55); opacity: .62; }
.zd-editor .zd-locked > * { pointer-events: none; user-select: none; }
.zd-editor .zd-lock { position: absolute; top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); width: 2rem; height: 2rem; border-radius: var(--radius-full); border: 1px solid rgba(124, 77, 255, .3); background: var(--color-surface); color: var(--color-primary-hover); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 3; pointer-events: auto; opacity: 1; }
.zd-editor .zd-protected { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-ink-faint); font: 500 var(--fs-2xs)/1 var(--font-body); }
.zd-editor .zd-pending { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 var(--fs-2xs)/1 var(--font-body); color: var(--state-review-ink); background: color-mix(in srgb, var(--state-review) 10%, white); border: 1px solid color-mix(in srgb, var(--state-review) 22%, white); border-radius: var(--radius-full); padding: 0.3125rem 0.5625rem; white-space: nowrap; }
/* „Излиза веднага" носи мента, същия цвят като одобреното състояние: чакането е кехлибар,
живото е зелено, и двете се четат без да се чете текстът („две скорости", 2026-09-08). */
.zd-editor .zd-pending[data-speed="live"] { color: var(--state-approved-ink); background: color-mix(in srgb, var(--state-approved) 10%, white); border-color: color-mix(in srgb, var(--state-approved) 22%, white); }
.zd-editor .zd-tip { position: fixed; z-index: var(--z-dropdown); max-width: var(--tooltip-max); padding: var(--tooltip-pad); border-radius: var(--radius-md); background: #171033; color: #fff; font-size: var(--fs-xs); line-height: 1.55; box-shadow: var(--shadow-2); }
.zd-editor .zd-tip a { color: #d9ccff; }
.zd-editor .zd-tip > span { display: block; }
.zd-editor .zd-tip[hidden] { display: none; }
.zd-editor .zd-unsaved { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 var(--fs-2xs)/1 var(--font-body); color: var(--color-primary-hover); }
}