/* ==========================================================================
   Авто-Изпит · Общи стилове  (/assets/app.css)
   ========================================================================== */

/* -------------------- Root & Base -------------------- */
:root{
  --header-h:64px;
  --wrap-max:1200px;
  --wrap-max-lg:1280px;
  --pad-x:clamp(16px, 3.5vw, 32px);

  --bg:#f7f9fc;
  --card:#fff;
  --ink:#0f172a;
  --muted:#6b7280;
  --border:#e6eaf3;
  --shadow:0 2px 8px rgba(18,38,63,.06);

  --pill:#111827;
  --pill-bg:#fff;
  --pill-border:#e6eaf3;

  --pill-video-bg:#fff6ed;
  --pill-video-border:#fed7aa;
  --pill-video:#c2410c;

  --act-bg:#f8fafc;
  --act-border:#e5e7eb;
  --act-accent:#111827;
  --act-on:#10b981;
  --act-warn:#f59e0b;
  --act-unk:#0ea5e9;
}

:root{
  --wrap-w: 1200px;
  --gutter-min: 16px;           /* мобилен */
  --gutter-fluid: 3.5vw;        /* флуиден */
  --gutter-max: 32px;           /* десктоп */
}
.wrap{
  max-width: var(--wrap-w);
  margin-inline: auto;
  padding-inline: clamp(var(--gutter-min), var(--gutter-fluid), var(--gutter-max));
}
.wrap--wide { --wrap-w: 1280px; }
.wrap--narrow { --wrap-w: 960px; }


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:inherit; text-decoration:none}

/* Универсален контейнер */
.wrap{
  max-width:var(--wrap-max);
  margin:24px auto;
  padding-left:max(env(safe-area-inset-left), var(--pad-x));
  padding-right:max(env(safe-area-inset-right), var(--pad-x));
}

/* Хедър и футър споделят същата ширина/падинг */
.header-inner,
.site-footer .wrap{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding-left:max(env(safe-area-inset-left), var(--pad-x));
  padding-right:max(env(safe-area-inset-right), var(--pad-x));
}
@media (min-width:1400px){
  .wrap, .header-inner, .site-footer .wrap{ max-width:var(--wrap-max-lg); }
}

/* -------------------- Header & Navigation -------------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  height:var(--header-h); background:#fff; border-bottom:1px solid var(--border);
}
.header-inner{
  height:100%; display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px}
.brand svg{width:28px; height:28px}

.nav{margin-left:auto; display:flex; gap:18px}
.nav a{padding:8px 12px; border-radius:10px; border:1px solid transparent}
.nav a.active{background:#eef2ff; border-color:#e0e7ff}

/* Mobile drawer */
.menu-btn{
  display:none; margin-left:auto; width:40px; height:40px;
  border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer;
  align-items:center; justify-content:center; font-size:20px; line-height:1;
}
#drawer{transform:translateX(-110%); opacity:0; pointer-events:none}
@media (max-width:860px){
  .nav{display:none}
  .menu-btn{display:flex}
  #drawer-backdrop{
    position:fixed; inset:0; background:rgba(15,23,42,.35);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index:1100;
  }
  #drawer{
    position:fixed; top:0; left:0; height:100dvh; width:min(86vw,320px);
    background:#fff; border-right:1px solid var(--border); z-index:1200;
    transform:translateX(-110%); transition:transform .25s, opacity .2s;
    display:flex; flex-direction:column; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  #drawer .close{
    align-self:flex-end; width:40px; height:40px; border:1px solid var(--border);
    border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  #drawer .navm{display:flex; flex-direction:column; gap:8px; margin-top:8px}
  #drawer .navm a{padding:12px 14px; border-radius:12px; border:1px solid transparent}
  #drawer .navm a.active{background:#eef2ff; border-color:#e0e7ff}
  #drawer.is-open{transform:none; opacity:1; pointer-events:auto}
  #drawer.is-open + #drawer-backdrop{opacity:1; pointer-events:auto}
}
@media (min-width:861px){ #drawer, #drawer-backdrop{ display:none !important } }

/* -------------------- UI Controls -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#fff;
  font:15px/1.2 inherit; color:#111827; cursor:pointer;
  transition:border-color .15s ease, transform .1s ease;
}
.btn:hover{ border-color:#cbd5e1; transform:translateY(-1px) }
.badge{
  display:inline-block; margin-left:6px; background:#eef2ff; color:#3730a3;
  border:1px solid #e0e7ff; padding:2px 8px; border-radius:8px; font-size:14px;
}
select{
  font:15px/1.2 inherit; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#fff;
}
.muted{color:var(--muted)}
.pager{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 16px}
.pager .btn.current{background:#eef2ff; border-color:#e0e7ff}

/* -------------------- Questions page -------------------- */
.questions-page header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.questions-page header h1{margin:0; font-size:23px}
.questions-page header h2{margin:0; font-size:16px; font-weight:400}
.questions-page .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.questions-page .card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; margin:24px 0; border-bottom:3px solid #e5e7eb;
}
.questions-page article.card + article.card{border-top:4px solid #f3f4f6; padding-top:20px}

.questions-page .card-head{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:16px; padding:10px 14px; border-bottom:1px solid var(--border); background:#fafcff;
}
.questions-page .pills{display:flex; flex-wrap:wrap; gap:8px}
.questions-page .pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px; border:1px solid var(--pill-border);
  border-radius:999px; font-size:14px; color:var(--pill); background:var(--pill-bg);
}
.questions-page .okdots{display:inline-flex; gap:6px; margin-left:4px}
.questions-page .okdots i{width:8px; height:8px; border-radius:999px; background:#22c55e; display:inline-block}
.questions-page .pill-video{ color:var(--pill-video); background:var(--pill-video-bg); border-color:var(--pill-video-border); font-weight:600; display:flex; align-items:center; gap:4px }

.questions-page .q-actions{display:flex; gap:8px; align-items:center}
.questions-page .iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--act-bg); border:1px solid var(--act-border); color:var(--act-accent);
  cursor:pointer; user-select:none; transition:.15s transform, .15s border-color; font-size:18px; line-height:1;
}
.questions-page .iconbtn:hover{transform:translateY(-1px); border-color:#cbd5e1}
.questions-page .iconbtn[data-state="on"]{box-shadow:inset 0 0 0 2px var(--act-on)}
.questions-page .iconbtn.warn[data-state="on"]{box-shadow:inset 0 0 0 2px var(--act-warn)}
.questions-page .iconbtn.unk[data-state="on"]{box-shadow:inset 0 0 0 2px var(--act-unk)}

.questions-page .qtitle{padding:16px; font-size:24px; font-weight:700}
.questions-page .content{display:grid; grid-template-columns:minmax(280px,520px) 1fr; gap:16px; padding:0 16px 16px}
.questions-page .content.noimg{grid-template-columns:1fr}

.questions-page .media{
  background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:260px;
}
.questions-page .media img{display:block; max-width:100%; height:auto; object-fit:contain; margin:auto}

.questions-page .grid-answers{display:flex; flex-wrap:wrap; gap:16px; width:100%}
.questions-page .answers{display:flex; flex-direction:column; gap:14px; width:100%}
.questions-page .ans{
  display:flex; align-items:center; justify-content:center;
  min-height:90px; padding:16px; background:#fff;
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  font-size:18px; transition:all .2s ease; text-align:center;
}
.questions-page .ans:hover{border-color:#cbd5e1; transform:translateY(-2px)}
.questions-page .ans img{max-height:140px; width:auto; display:block; margin:auto}
.questions-page .ans .txt{flex:1; text-align:left}

.questions-page .answers.images-only{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:16px; overflow-x:auto; padding-bottom:8px }
.questions-page .answers.images-only .ans{flex:0 0 auto; min-width:160px; padding:12px}

.questions-page .ans.selected{
  border-color:#6366f1;
  box-shadow:0 0 0 2px rgba(99,102,241,.25), var(--shadow);
  background:#f8fafc;
}

/* Questions responsive */
@media (max-width:860px){
  .questions-page .qtitle{font-size:20px; padding:12px}
  .questions-page .card{border-radius:12px; margin:14px 0}
  .questions-page .card-head{grid-template-columns:1fr; gap:8px}
  .questions-page .pills{overflow:auto; -webkit-overflow-scrolling:touch; gap:8px; padding-bottom:4px}
  .questions-page .pills .pill{font-size:13px; padding:6px 10px; white-space:nowrap}
  .questions-page .toolbar{
    position:sticky; top:calc(var(--header-h, 60px) + 6px); z-index:5;
    background:rgba(247,249,252,.85); backdrop-filter:saturate(180%) blur(8px);
    padding:8px 10px; border:1px solid var(--border); border-radius:10px
  }
  .questions-page .content{grid-template-columns:1fr; gap:12px; padding:0 12px 12px}
  .questions-page .media{min-height:200px}
  .questions-page .media img{width:100%; height:auto}
  .questions-page .answers{gap:10px}
  .questions-page .ans{min-height:72px; padding:12px; border-radius:12px; font-size:16px}
  .questions-page .answers.images-only{flex-wrap:wrap; overflow:visible}
  .questions-page .answers.images-only .ans{flex:0 0 calc(50% - 6px); min-width:auto}
}
@media (max-width:420px){
  .questions-page .answers.images-only .ans{flex:0 0 100%}
}

/* -------------------- Groups page (пътни знаци) -------------------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
  margin-top:12px;
}
.card{
  display:block; color:inherit;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:16px; box-shadow:0 2px 10px rgba(18,38,63,.06);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-2px); border-color:#d6dde8; box-shadow:0 6px 16px rgba(16,24,40,.08) }
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px }
.card .title{ font-weight:800; font-size:18px }

.icon-circle{
  width:44px; height:44px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Цветови теми за иконите (единствен блок) */
.gtheme-1  { background:#fff7ed; color:#c2410c }  /* А */
.gtheme-2  { background:#eff6ff; color:#1d4ed8 }  /* Б */
.gtheme-3  { background:#fef2f2; color:#b91c1c }  /* В */
.gtheme-4  { background:#ecfeff; color:#0891b2 }  /* Г */
.gtheme-5  { background:#eef2ff; color:#4f46e5 }  /* Д */
.gtheme-6  { background:#f0fdf4; color:#15803d }  /* Е */
.gtheme-7  { background:#f5f3ff; color:#6d28d9 }  /* Ж */
.gtheme-8  { background:#fdf4ff; color:#a21caf }  /* Т */
.gtheme-9  { background:#fff7ed; color:#b45309 }  /* Средства */
.gtheme-10 { background:#ecfdf5; color:#047857 }  /* Светофари */
.gtheme-11 { background:#eff6ff; color:#0ea5e9 }  /* Регулировчик */
.gtheme-default{ background:#f1f5f9; color:#334155 }

/* -------------------- Footer -------------------- */
.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
  margin-top:32px;
  position:relative; z-index:1;
}
.site-footer .foot-left{ flex:1 1 260px }
.site-footer .foot-right{ display:flex; gap:14px }
.site-footer .foot-right a{ color:#0f172a; border-bottom:1px dashed #cbd5e1 }
.site-footer .foot-right a:hover{ border-bottom-color:#94a3b8 }

/* -------------------- Cookie Bar -------------------- */
#cookieBar{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  max-width:980px; width:calc(100% - 32px);
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 8px 24px rgba(18,38,63,.12); padding:16px;
  z-index:2147483647; pointer-events:auto;
}
#cookieBar * { pointer-events:auto }
.cookie-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#f8fafc; cursor:pointer; font-weight:600;
}
.cookie-btn.primary{ background:#0ea5e9; color:#fff; border-color:#0ea5e9 }
.cookie-btn.primary:hover{ filter:brightness(0.95) }

/* -------------------- Utilities -------------------- */
.hidden{display:none !important}
.center{display:flex; align-items:center; justify-content:center}


/* ===== Pretty toolbar for questions ===== */
.pretty-toolbar{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "btns   filters"
    "share  share";
  gap:12px 16px;
  align-items:center;
  margin-top:8px;
}
.pretty-toolbar .btn-row{ grid-area: btns; display:flex; gap:8px; flex-wrap:wrap }
.pretty-toolbar .filters-row{
  grid-area: filters;
  display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
}
.pretty-toolbar .share-row{ grid-area: share }
.pretty-toolbar .share-input{
  width: min(680px, 100%);
  padding:10px 12px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  font:14px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:#0f172a;
  box-shadow: inset 0 1px 0 rgba(16,24,40,.04);
}
.pretty-toolbar .share-input:focus{
  outline:none;
  border-color:#c7d2fe;
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}

/* компактни бейджове над заглавието остават както са */

/* pager pills – малко по-меки */
.pager .btn{
  padding:6px 10px;
  border-radius:10px;
}
.pager .btn.current{
  background:#eef2ff; border-color:#dbe3ff; color:#1e2a5e;
}

/* мобилно: всичко една колона */
@media (max-width: 860px){
  .pretty-toolbar{
    grid-template-columns: 1fr;
    grid-template-areas:
      "btns"
      "filters"
      "share";
    gap:10px;
  }
  .pretty-toolbar .filters-row{ justify-content:flex-start }
}


/* === Home: големи плочки за категории === */
.cat-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:20px;
  margin-top:14px;
}

.cat-chip{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:120px;
  padding:18px 18px;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
  color:#111827;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(18,38,63,.06);
  transition:transform .12s ease, box-shadow .18s ease, border-color .12s ease, background .12s ease;
}

.cat-chip:hover{
  transform:translateY(-2px);
  border-color:#d6dde8;
  box-shadow:0 10px 24px rgba(18,38,63,.10);
  background:#f9fbff;
}

.cat-chip.active{
  border-color:#2563eb;
  box-shadow:0 10px 24px rgba(37,99,235,.18);
  background:#eef3ff;
}

.cat-chip.disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  background:#f7f9fc;
}

.cat-chip .icon{
  flex:0 0 auto;
  width:56px; height:56px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  background:#eef2ff; color:#334155;
}

.cat-chip .txt{ line-height:1.2 }
.cat-chip .txt .title{
  display:block; font-weight:800; font-size:20px; margin-bottom:4px;
}
.cat-chip .txt .sub{
  display:block; color:var(--muted); font-size:14px;
}

/* малки екрани – по-ниска плочка */
@media (max-width:560px){
  .cat-chip{ min-height:100px; padding:16px }
  .cat-chip .icon{ width:50px; height:50px; font-size:24px }
  .cat-chip .txt .title{ font-size:18px }
}