/**
 * tool.css - общите променливи и банерът за бисквитки за страниците в /tool/.
 *
 * Страниците тук НЕ зареждат assets/style.css - имат собствено оформление.
 * Заради това банерът, който идва от helpers.php, оставаше без стилове и
 * падаше в края на документа. Случи се три пъти на три страници, затова
 * общата част живее тук, а не се копира.
 *
 * Специфичното за всяка страница остава вградено в нея.
 */

:root{
  --bg:#020618; --surface:#0f172b; --surface-2:#141f3a; --line:#1e2a47;
  --ink:#fff; --body:#cad5e2; --muted:#7e8fae;
  --accent:#625fff; --accent-2:#8d54ff; --good:#00d294; --warn:#fcbb00; --bad:#ff2357;
  --font-h:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-b:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-m:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:dark;
}

/* ── банер за бисквитки ────────────────────────────────────────── */
/* Маркъпът идва от helpers.php, но тази страница не зарежда общия
   assets/style.css - има собствени вградени стилове. Без това банерът
   излизаше прозрачен и залепен в самия край на документа. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -10px 40px rgba(0,0,0,.5);
  transform:translateY(100%);transition:transform .3s ease}
.cookie-banner.visible{transform:translateY(0)}
.cookie-banner-inner{max-width:900px;margin:0 auto;padding:18px 20px;
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cookie-banner p{margin:0;font-size:.86rem;color:var(--muted);flex:1;min-width:260px;line-height:1.55}
.cookie-banner a{color:var(--accent-2)}
.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-banner .btn-sm{font-family:var(--font-b);font-weight:600;font-size:.84rem;
  padding:9px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;border:1px solid var(--line)}
.cookie-banner .btn-outline{background:var(--bg);color:var(--body)}
.cookie-banner .btn-outline:hover{border-color:var(--accent);color:var(--ink)}
.cookie-banner .btn-primary{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.cookie-banner .btn-primary:hover{filter:brightness(1.12)}
@media (max-width:640px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .cookie-banner-actions{justify-content:stretch}
  .cookie-banner .btn-sm{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){.cookie-banner{transition:none}}

/* ── марка на инструмента ──────────────────────────────────────── */
/* Името стои над всичко останало на страницата и се повтаря на всяка
   вътрешна. Продуктът има име; личното име е подписът отдолу. */
.brandmark{display:flex;flex-direction:column;align-items:center;gap:10px}
.bm-row{display:flex;align-items:center;gap:10px}
.bm-name{font-family:var(--font-h);font-weight:800;font-size:1.05rem;color:var(--ink);
  letter-spacing:-.01em;display:inline-flex;align-items:center;gap:9px}
.bm-name::before{content:"";width:20px;height:20px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

/* Лента за вътрешните страници - същото име, но дискретно най-горе. */
.toolbar-brand{border-bottom:1px solid var(--line);background:var(--surface);
  padding:12px 20px;margin-bottom:0}
.toolbar-brand .in{max-width:900px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.toolbar-brand a{text-decoration:none}
.toolbar-brand .tag{font-family:var(--font-m);font-size:.72rem;color:var(--muted);
  letter-spacing:.06em}
@media (max-width:520px){.toolbar-brand .tag{display:none}}

/* ── формата "Следващи стъпки" ──────────────────────────────────────
   Същата форма стои и в репорта, и на страницата с потвърждението, но
   репортът е самостоятелен файл със свои стилове, а страниците в tool/
   зареждат само този. Без правилата тук формата излиза гола - точно
   както се случи с банера за бисквитките.

   Тези правила са огледало на секцията "следващи стъпки" в
   audit/report-html.php. Промяна на едното иска промяна и на другото. */
.steps{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:14px;
  padding:30px 32px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));
  display:flex;flex-direction:column;gap:18px;text-align:left}
.steps h2{font-family:var(--font-h);color:var(--ink);font-size:1.25rem;font-weight:700;margin:0}
.steps form{display:flex;flex-direction:column;gap:16px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:var(--surface-2,var(--surface))}
.opt input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);flex-shrink:0;cursor:pointer}
.opt strong{display:block;font-family:var(--font-h);font-size:.93rem;color:var(--ink);font-weight:600;line-height:1.35}
.opt em{display:block;font-style:normal;font-size:.82rem;color:var(--muted);margin-top:3px}
.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.steps input[type=text],.steps input[type=email],.steps input[type=tel],.steps textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  font-family:var(--font-b);font-size:.92rem;padding:11px 13px;outline:0;resize:vertical}
.steps input:focus,.steps textarea:focus{border-color:var(--accent)}
.steps ::placeholder{color:var(--muted)}
.submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.steps .hint{font-size:.8rem;color:var(--muted)}
.steps .trust{margin:0;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.steps .err{color:var(--warn,#fcbb00);font-size:.85rem;margin:0}
.steps .pending{display:none;padding:12px 15px;border:1px dashed var(--line);border-radius:10px;
  background:var(--bg);font-size:.86rem;color:var(--muted)}
.steps .pending.on{display:block}
.steps .btn{font-family:var(--font-b);font-weight:600;font-size:.9rem;padding:11px 20px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--body);
  cursor:pointer}
.steps .btn-primary{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.steps .btn:disabled{opacity:.6;cursor:default}
@media (max-width:560px){.steps{padding:22px 18px}}

/* ── долен колонтитул ───────────────────────────────────────────────
   Правните връзки трябва да ги има на всяка страница, която събира
   данни - включително тази с потвърждението. */
.foot{border-top:1px solid var(--line);padding-top:20px;margin-top:8px;
  color:var(--muted);font-size:.82rem;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;text-align:left}
.foot a{color:var(--accent-2);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-links{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ── версия до името на инструмента ─────────────────────────────────
   Малка и кликаема. Смисълът ѝ е човек, който е ползвал инструмента
   преди месеци, да види какво се е променило оттогава - затова води
   към дневника, вместо да стои като украса. */
.tag-v{font-family:var(--font-m);font-size:.68rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;
  text-decoration:none;flex-shrink:0;line-height:1.5}
a.tag-v:hover{color:var(--ink);border-color:var(--accent)}

/* ── Социални мрежи във футъра (render_footer_socials в helpers.php) ─────
   Инструментът ползва собствен CSS, а не assets/style.css, затова блокът се
   повтаря тук в компактен вид, съобразен с по-тесния футър на страницата. */
.footer-socials {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem .9rem; margin-top: 1.25rem; width: 100%;
}
.footer-socials-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.footer-socials ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.footer-socials a {
  width: 2.1rem; height: 2.1rem; border-radius: 8px;
  display: grid; place-items: center; color: var(--body);
  border: 1px solid var(--line); background: var(--surface);
  transition: color .2s, border-color .2s, transform .2s;
}
.footer-socials a:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }
.footer-socials a svg { width: 1rem; height: 1rem; }