:root{--ck-bg:#ffffff;--ck-tx:#1a2330;--ck-mu:#5b6b7c;--ck-ln:#e2e8f0;--ck-a:#0d6efd;--ck-a2:#0a58ca}
/* ==========================================================================
   Известие за бисквитки и запис в браузъра

   Цветовете идват от --ck-* променливи, които всеки сайт задава за себе си.
   Стойностите тук са резервни, за да не остане нещо невидимо, ако някой
   сайт забрави да ги зададе.
   ========================================================================== */
:root{
  --ck-bg:#ffffff; --ck-tx:#1f2937; --ck-mu:#64748b; --ck-ln:#e2e8f0;
  --ck-a:#0d6efd; --ck-a2:#0a58ca; --ck-btn-tx:#ffffff;
  --ck-shadow:0 -10px 40px rgba(15,30,50,.18);
}

.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--ck-bg);color:var(--ck-tx);
  border-top:1px solid var(--ck-ln);
  box-shadow:var(--ck-shadow);
  font:14px/1.55 'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  /* Влиза отдолу, не изскача върху съдържанието. */
  transform:translateY(110%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ck.in{transform:none}

.ck-in{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.ck-ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;color:var(--ck-a);
  background:color-mix(in srgb, var(--ck-a) 12%, transparent);
}
.ck-ic svg{width:20px;height:20px}
.ck-tx{flex:1 1 340px;min-width:0}
.ck-tx b{display:block;font-size:14.5px;margin-bottom:2px}
.ck-tx p{margin:0;color:var(--ck-mu);font-size:13.5px}
.ck-tx a{color:var(--ck-a)}

.ck-btns{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto}
.ck-b{
  padding:10px 18px;border-radius:9px;border:1px solid var(--ck-ln);
  background:none;color:var(--ck-tx);cursor:pointer;
  font:600 13.5px/1 inherit;font-family:inherit;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:background .2s,border-color .2s;
}
.ck-b:hover{background:color-mix(in srgb, var(--ck-tx) 6%, transparent)}
.ck-b.pri{
  background:var(--ck-a);border-color:var(--ck-a);color:var(--ck-btn-tx);
}
.ck-b.pri:hover{background:var(--ck-a2);border-color:var(--ck-a2)}

/* ---- подробностите ---- */
.ck-more{
  display:none;max-width:1080px;margin:14px auto 0;
  border-top:1px solid var(--ck-ln);padding-top:14px;
}
.ck.open .ck-more{display:block}
.ck-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--ck-ln);
}
.ck-row:last-child{border-bottom:0}
.ck-row .n{flex:1 1 auto;min-width:0}
.ck-row .n b{display:block;font-size:13.5px}
.ck-row .n span{color:var(--ck-mu);font-size:12.5px}
.ck-tag{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:20px;white-space:nowrap;
}
.ck-tag.on{background:color-mix(in srgb, var(--ck-a) 14%, transparent);
           color:var(--ck-a)}
.ck-tag.off{background:color-mix(in srgb, var(--ck-mu) 14%, transparent);
            color:var(--ck-mu)}

@media (max-width:700px){
  .ck{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .ck-in{gap:12px}
  .ck-ic{display:none}
  .ck-btns{margin-left:0;width:100%}
  .ck-b{flex:1 1 auto;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .ck{transition:none}
}

/* ==========================================================================
   Прозорче „в процес на изграждане“

   Беше лента през цялата ширина най-горе - тя изтласкваше съдържанието и
   първото, което човек виждаше, беше извинение. Сега е малка карта отстрани
   вляво: забелязва се, но не заема мястото на сайта.

   Може да се скрие. Изборът се пази в браузъра на посетителя, така че
   следващият пак я вижда - означението за състоянието на сайта не се маха
   за всички заради един щракнал.
   ========================================================================== */
.build-note{
  position:fixed;left:14px;top:50%;transform:translateY(-50%);
  z-index:40;width:214px;
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 14px;border-radius:12px;
  background:var(--ck-bg);
  border:1px solid color-mix(in srgb, var(--ck-a) 34%, var(--ck-ln));
  box-shadow:0 10px 34px rgba(10,25,45,.16);
  color:var(--ck-tx);
  font:13px/1.5 'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* Влиза отляво, след като страницата се е показала. */
  animation:bn-in .6s cubic-bezier(.16,1,.3,1) .8s both;
}
@keyframes bn-in{
  from{opacity:0;transform:translateY(-50%) translateX(-18px)}
  to  {opacity:1;transform:translateY(-50%) translateX(0)}
}

.build-note > svg{
  width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--ck-a);
}
.build-note .bn-t{min-width:0;padding-right:14px}
.build-note b{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px}
.build-note span{display:block;color:var(--ck-mu);font-size:11.5px;line-height:1.45}

.build-note .bn-x{
  position:absolute;top:6px;right:6px;
  width:22px;height:22px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--ck-mu);cursor:pointer;
  font:400 17px/1 inherit;
  display:grid;place-items:center;
  transition:background .2s,color .2s;
}
.build-note .bn-x:hover{
  background:color-mix(in srgb, var(--ck-tx) 8%, transparent);
  color:var(--ck-tx);
}

/* Скритото прозорче не се показва повече в тази сесия на браузъра. */
.build-note.gone{display:none}

@media (max-width:900px){
  /* На тесен екран отстрани няма място - слиза долу вляво, над известието
     за бисквитки, и става по-тясно. */
  .build-note{
    left:10px;right:auto;top:auto;bottom:96px;transform:none;
    width:190px;padding:11px 12px;
  }
  @keyframes bn-in{
    from{opacity:0;transform:translateX(-16px)}
    to  {opacity:1;transform:translateX(0)}
  }
  .build-note span{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .build-note{animation:none}
}

/* Редът с правните връзки, добавен най-долу на всяка страница. */
.legal-links{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  font:13px/1.5 'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--ck-bg);border-top:1px solid var(--ck-ln);
}
.legal-links a{color:var(--ck-mu);text-decoration:none}
.legal-links a:hover{color:var(--ck-a);text-decoration:underline}
