/* ====================================================================
   UGCBG — REDESIGN-2026 (мобайл-първо)
   IVO-REDESIGN-20260730

   Зарежда се ПОСЛЕДЕН. Само добавъчен слой — маха се с един <link>.

   Първата половина не е разкрасяване, а поправки на реални дефекти,
   намерени при одита. Втората е дизайн-системата.
   ==================================================================== */

/* ── 1. СИРАЦИ: 17 променливи се ползват 101 пъти в изгледите,
      но НИКЪДЕ не са дефинирани. Досега всяка от тези декларации е
      била невалидна и тихо е пропадала. Тук им даваме стойности,
      съгласувани със съществуващата палитра. ──────────────────────── */
:root{
  --white:#FFFFFF;
  --ink:#2D3436;                /* = --text */
  --text-secondary:#636E72;     /* = --text-light */
  --text-muted:#7A8288;
  --radius-md:12px;             /* между --radius-sm 8 и --radius-lg 16 */
  --bg-light:#FAFBFF;           /* = --bg */
  --bg-secondary:#F4F6FC;
  --bg-soft:#F4F6FC;
  --bg-tertiary:#EDF0F9;
  --danger:#E74C6C;
  /* календарът ползва свои имена */
  --cal-bg:#FFFFFF; --cal-ink:#2D3436; --cal-line:#E8ECF4; --cal-muted:#636E72;
  /* VIP секцията ги ползва като градиентна двойка → брандовите два цвята */
  --vp:#6C63FF; --vp2:#FF6584; --p:#6C63FF;

  /* ── 2. КОНТРАСТ ──
     --text-lighter беше #B2BEC3 → 1.90:1 върху бяло. Това пада под
     всеки праг на WCAG, включително за едър текст, а се ползва 133 пъти.
     Новата стойност дава ~4.6:1 върху бяло.
     ⚠ Ако някъде се ползва върху ТЪМЕН фон, там ще потъмнее — проверѝ
     визуално тъмните секции. */
  --text-lighter:#6E7780;

  /* ── 3. Дизайн-система ── */
  --fs-xs:  clamp(.72rem,.70rem + .10vw,.78rem);
  --fs-sm:  clamp(.84rem,.81rem + .15vw,.92rem);
  --fs-base:clamp(1rem,  .97rem + .18vw,1.06rem);
  --fs-lg:  clamp(1.10rem,1.02rem + .38vw,1.30rem);
  --fs-xl:  clamp(1.35rem,1.15rem + .95vw,1.95rem);
  --fs-2xl: clamp(1.70rem,1.35rem + 1.7vw,2.55rem);
  --fs-3xl: clamp(2.00rem,1.45rem + 2.7vw,3.40rem);

  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --sp-section: clamp(52px,9vw,100px);

  --sh-1:0 1px 2px rgba(20,18,45,.04), 0 1px 3px rgba(20,18,45,.06);
  --sh-2:0 2px 4px rgba(20,18,45,.04), 0 8px 20px -6px rgba(20,18,45,.10);
  --tap:48px;
}

/* ── 4. ЙЕРАРХИЯТА НА ЗАГЛАВИЯТА НА ТЕЛЕФОН ──
   В style.css има:
     h1, h2, .hero h1, .page-hero h1 { font-size:clamp(1.4rem,7vw,2.2rem) !important }
   вътре в @media(max-width:768px). Едно правило с !important изравнява
   ВСЯКО h1 и h2 → на телефон типографската йерархия изчезва напълно.
   Намерението (дълги заглавия да не преливат) е вярно — пренасянето го
   запазваме, само връщаме различните размери. */
@media (max-width:768px){
  h1, .hero h1{ font-size:var(--fs-2xl) !important; line-height:1.14; }
  h2{ font-size:var(--fs-xl) !important; line-height:1.2; }
  h3{ font-size:var(--fs-lg) !important; line-height:1.3; }
  .page-hero h1{ font-size:var(--fs-2xl) !important; }
  /* пренасянето остава — то си беше правилно */
  h1,h2,h3{ word-break:break-word; overflow-wrap:anywhere; }
}

/* ── 5. Ритъм и въздух ───────────────────────────────────────────── */
body{ font-size:var(--fs-base); }
h1,h2,h3{ letter-spacing:-.02em; text-wrap:balance; }
p{ text-wrap:pretty; }
section{ padding-block:var(--sp-section); }

/* ── 6. Тап таргети — най-осезаемото на телефон ──────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-outline, button.btn, a.btn{
  min-height:var(--tap); display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:var(--radius-md);
}
input, select, textarea{
  min-height:var(--tap); font-size:16px;   /* под 16px iOS зумва при фокус */
  border-radius:var(--radius-md);
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(108,99,255,.14);
}

/* ── 7. По-спокоен цвят: дъгата отстъпва на един уверен акцент ───── */
/* градиентният текст в заглавията се чете зле на телефон и на слаби
   екрани — плътен цвят е и по-модерен, и по-четим */
.gradient-text, .text-gradient, h1 .gradient, h1 span.gradient{
  background:none !important; -webkit-text-fill-color:currentColor !important;
  color:var(--primary) !important;
}

/* ── 8. Карти ────────────────────────────────────────────────────── */
.card, .campaign-card, .creator-card, .feature-card{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--sh-1);
  transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s, border-color .22s;
}
.card:hover, .campaign-card:hover, .creator-card:hover, .feature-card:hover{
  transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#dcd9f5;
}

/* ── 9. Мобилни дреболии ─────────────────────────────────────────── */
@media (max-width:768px){
  html,body{ overflow-x:hidden; }
  img,video,iframe{ max-width:100%; height:auto; }
  .container{ padding-inline:var(--sp-5); }
}

/* ── 10. Достъпност ──────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid #b7b2ff; outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .card:hover,.campaign-card:hover,.creator-card:hover,.feature-card:hover{ transform:none; }
}

/* ====================================================================
   УНИВЕРСАЛЕН СЛОЙ — важи за ВСЯКА страница, не само за началната.
   IVO-REDESIGN-20260730b
   ==================================================================== */

/* ── Таблици: най-честият мобилен провал ──
   Широка таблица разпъва цялата страница и прави хоризонтален скрол на
   ЦЕЛИЯ сайт. Правилното е таблицата да скролва В СЕБЕ СИ. */
@media (max-width:768px){
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table thead th{ white-space:nowrap; }
  table td, table th{ padding:10px 12px; }
}

/* ── Дълъг текст: ширината на реда решава четимостта ──
   Над ~75 знака на ред окото губи началото на следващия. */
.article-body, .article-content, .post-content, .prose,
.forum-post-content, .topic-content, .page-content{
  max-width:72ch;
  line-height:1.72;
  font-size:var(--fs-base);
}
.article-body p, .article-content p, .post-content p, .page-content p{ margin-bottom:1.1em; }
.article-body h2, .article-content h2, .post-content h2{ margin-top:1.8em; margin-bottom:.5em; }
.article-body h3, .article-content h3, .post-content h3{ margin-top:1.5em; margin-bottom:.4em; }
.article-body img, .article-content img, .post-content img{ border-radius:var(--radius-md,12px); }
.article-body ul, .article-body ol, .article-content ul, .article-content ol{ padding-left:1.3em; }
.article-body li, .article-content li{ margin-bottom:.45em; }

blockquote{
  border-left:3px solid var(--primary,#6366f1);
  padding:.2em 0 .2em 1.1em; margin:1.4em 0;
  color:var(--text-light,#4a4d68); font-style:normal;
}

/* ── Пагинация: пръстът иска място ── */
.pagination a, .pagination span, .pager a, .pager span{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md,12px);
}

/* ── Значки/тагове: еднакъв вид навсякъде ── */
.badge, .tag, .chip, .pill{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px; padding:5px 12px;
  font-size:var(--fs-xs); font-weight:600; line-height:1.4;
}

/* ── Празни състояния: обикновено са забравени и изглеждат като грешка ── */
.empty-state, .no-results, .empty{
  text-align:center; padding:var(--sp-7,48px) var(--sp-5,24px);
  color:var(--text-light,#4a4d68);
}

/* ── Дребни неща, които се усещат ── */
::selection{ background:rgba(99,102,241,.20); }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* никога хоризонтален скрол на цялата страница */
html, body{ max-width:100%; overflow-x:hidden; }
/* дълги думи/URL-и да не разпъват контейнера */
p, li, td, dd, h1, h2, h3, h4{ overflow-wrap:break-word; }

/* изображения без зададено съотношение подскачат при зареждане */
img{ height:auto; }

/* ── Печат: правните страници и договорите реално се печатат ── */
@media print{
  header, footer, nav, .header, .footer, .sticky-buy, .cookie-bar,
  .breadcrumbs, aside, .sidebar{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; padding-top:0; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .container{ max-width:100%; padding:0; }
}

/* същият капан като на FreelanceBG: правилата в inline <style> на изгледите
   идват след този файл, затова тук е нужна по-висока специфичност */
body .btn, body a.btn, body button.btn,
body .cookie-bar button, body .cookie-banner button{
  min-height:48px; display:inline-flex; align-items:center; justify-content:center;
}
body input, body select, body textarea{ font-size:16px; min-height:48px; }

/* --accent (#00D4AA) като ТЕКСТ дава 1.33–1.91:1. Като фон е чудесен,
   като текст върху светло е нечетим. Тъмният му вариант пази тона. */
body .tag-accent, body span.tag-accent,
body .text-accent, body .accent-text{ color:#00705a !important; }
body .tag{ color:#3f3f46; }