/* ============================================================
   OPUS TRAVEL — Design System
   Palette: Бордо #5E1620 (header/footer) · Злато #D3B587 (лого/цени)
            Пепелива роза #A97D7A (бутони) · Тъмна роза #7A4F4C (badge текст)
            Бяло — тяло на страницата · Розово-бежово #F3E4E0 — карти с оферти
   Type: Display — 'Lora' | Body — 'Inter'
   Шрифтовете са self-hosted (public/fonts/) — НЕ Google CDN. Причина: EU/GDPR (зареждане от
   fonts.googleapis.com изпраща IP адреса на посетителя към Google без съгласие — реален правен
   риск, потвърден със съдебна практика в Германия). Всяко тегло е свалено ОТДЕЛНО (не комбинирана
   заявка) — Google връща споделен variable-font файл при комбинирани тегла в едно извикване,
   което би направило bold текста на кирилица визуално еднакъв с regular (проверено с MD5).
   ============================================================ */

@font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/lora/lora-400-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/lora/lora-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/lora/lora-600-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/lora/lora-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/lora/lora-700-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/lora/lora-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/lora/lora-400i-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/lora/lora-400i-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Lora'; font-style:italic; font-weight:600; font-display:swap; src:url('../fonts/lora/lora-600i-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Lora'; font-style:italic; font-weight:600; font-display:swap; src:url('../fonts/lora/lora-600i-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/inter/inter-300-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('../fonts/inter/inter-300-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter/inter-400-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter/inter-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter/inter-500-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter/inter-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter/inter-600-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter/inter-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter/inter-700-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter/inter-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/caveat/caveat-700-cyrillic.woff2') format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/caveat/caveat-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }

:root {
  --bordeaux:   #5E1620;  /* бордо (Оксфорд червено) — header / footer */
  --sky:    #D3B587;  /* злато (50% към крийм кашмир) — лого, цени, акценти */
  --sky-dk: #A9916C;  /* тъмно злато (пропорционално по-тъмно от новото --sky) — hover */
  --rose:    #A97D7A; /* пепелива роза — бутони */
  --rose-dk: #7A4F4C; /* тъмна роза — badge текст */
  --sand:   #F3E4E0;  /* топло розово-бежово — само карти с оферти */
  --white:  #FFFFFF;
  --coal:   #2B1E1A;
  --grey:   #8A7A76;
  --light:  #F7F1EE;
  --red:    #C0392B;
  --green:  #4C7A5E;

  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(61,20,32,.08);
  --shadow-lg: 0 12px 48px rgba(61,20,32,.16);

  --transition: .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--coal); background: var(--white); line-height: 1.7; font-weight: 300; letter-spacing: .1px; }
img  { max-width: 100%; display: block; }
a    { color: var(--sky); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--sky-dk); }

/* ============================================================
   Typography
   ============================================================ */
h1,h2,h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.3px; color: var(--bordeaux); }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.875rem, 4vw, 2.875rem); }
h3 { font-size: 1.375rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 600; }

/* ============================================================
   Layout utilities
   ============================================================ */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Като .grid-3, но за списъци с непредвидим (често малък) брой резултати - напр. таг страници
   (/interest|holiday|offer/{slug}), където някои категории имат само 1-2 елемента. auto-fit
   свива неизползваните колонни "релси" до 0 (за разлика от repeat(3,1fr), който винаги пази 3
   равни колони дори с 1 елемент - оставяйки огромно празно пространство отдясно и създавайки
   грешното впечатление "тук няма нищо друго", докато реално има повече секции под видимата
   зона). max-width на картата пази естествения ѝ размер вместо да я разпъва до 1/3 контейнера. */
.grid-3-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); gap: 24px; }

/* ============================================================
   ПРАЗНИЧНИ ЕФЕКТИ — секция "Коледа и Нова Година" на началната страница (2026-09-23).
   Скопено само за .holiday-header/.holiday-grid — не пипа section-header/card-media никъде
   другаде на сайта.
   ============================================================ */
.holiday-fireworks { display: flex; justify-content: center; align-items: center; gap: 28px; height: 46px; margin-bottom: 6px; }
.firework { position: relative; width: 40px; height: 40px; }
.firework span {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px;
  border-radius: 50%; background: currentColor;
  transform: rotate(var(--a)) translateY(0) scale(1);
  animation: fireworkBurst 2.2s ease-out infinite;
}
.firework span:nth-child(1) { --a: 0deg; }
.firework span:nth-child(2) { --a: 45deg; }
.firework span:nth-child(3) { --a: 90deg; }
.firework span:nth-child(4) { --a: 135deg; }
.firework span:nth-child(5) { --a: 180deg; }
.firework span:nth-child(6) { --a: 225deg; }
.firework span:nth-child(7) { --a: 270deg; }
.firework span:nth-child(8) { --a: 315deg; }
@keyframes fireworkBurst {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(1.4); }
  15%  { opacity: 1; }
  70%  { opacity: .7; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-20px) scale(.3); }
}
.fw-1 { color: #D3B587; }
.fw-2 { color: #C0555A; }
.fw-3 { color: #6E8F6B; }
.fw-4 { color: #5B8FB5; }
.fw-1 span { animation-delay: 0s; }
.fw-2 span { animation-delay: .55s; }
.fw-3 span { animation-delay: 1.1s; }
.fw-4 span { animation-delay: 1.65s; }

.holiday-header .section-eyebrow, .holiday-header h2 { animation: holidayGlow 2.4s ease-in-out infinite; }
@keyframes holidayGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(211,181,135,0); }
  50%      { text-shadow: 0 0 14px rgba(211,181,135,.55); }
}

.holiday-section { position: relative; overflow: hidden; }
.holiday-snow { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.snowflake {
  position: absolute; top: -5%; color: #fff; opacity: .95; pointer-events: none;
  /* Тъмен контур (фалшив stroke през text-shadow) — без него бялата снежинка е невидима върху
     белия фон на секцията; контурът е достатъчно тънък, за да не пречи и върху снимките. */
  text-shadow:
    -1px -1px 1px rgba(0,0,0,.4),  1px -1px 1px rgba(0,0,0,.4),
    -1px  1px 1px rgba(0,0,0,.4),  1px  1px 1px rgba(0,0,0,.4),
    0 0 6px rgba(0,0,0,.25);
  animation-name: snowfall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes snowfall {
  0%   { transform: translateY(0) translateX(0); opacity: .9; }
  100% { transform: translateY(var(--fall, 700px)) translateX(24px); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .firework span, .holiday-header .section-eyebrow, .holiday-header h2, .snowflake { animation: none; }
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flex    { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1  { gap: 8px; }
.gap-2  { gap: 16px; }
.gap-3  { gap: 24px; }
.mt-1   { margin-top: 8px; }
.mt-2   { margin-top: 16px; }
.mt-3   { margin-top: 24px; }
.mt-4   { margin-top: 40px; }
.mt-5   { margin-top: 56px; }
.mb-1   { margin-bottom: 8px; }
.mb-2   { margin-bottom: 16px; }
/* mb-3/mt-5 добавени 2026-09-19 — липсваха от скàлата, но се ползваха на 44 места из целия
   проект (напр. <h3 class="mb-3">) — класът тихо не правеше нищо (0 margin), затова заглавия
   излизаха залепени за съдържанието под тях. Стойностите огледално довършват mt-1..mt-4/mb-2/4. */
.mb-3   { margin-bottom: 24px; }
.mb-4   { margin-bottom: 40px; }
/* mb-5 добавен 2026-09-19 (продължение на бележката по-горе) — ползван на 4 места
   (search/destinations.php, search/month.php, tours/list.php, tags/results.php), но също
   липсваше от скàлата — същия "тих 0 margin" бъг. */
.mb-5   { margin-bottom: 56px; }
.py-section { padding: 128px 0; }
.py-section.py-tight { padding: 88px 0; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-grey   { color: var(--grey); }
.text-bordeaux { color: var(--bordeaux); }
.text-sky    { color: var(--sky); }
.text-sm     { font-size: .875rem; }
.text-lg     { font-size: 1.125rem; }
.font-600    { font-weight: 600; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .9375rem; font-weight: 600;
  border: 2px solid transparent; cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary   { background: var(--rose);   color: #fff; border-color: var(--rose); }
.btn-primary:hover { background: var(--rose-dk); border-color: var(--rose-dk); color: #fff; }
/* Поленцето "регистрирайте се" (клик на сърчице без профил) — бутонът "Регистрация" в бордо,
   по изрична заявка на бизнеса, скопено само тук (не пипа .btn-primary навсякъде другаде). */
.fav-auth-modal .btn-primary { background: var(--bordeaux); border-color: var(--bordeaux); }
.fav-auth-modal .btn-primary:hover { background: #4A1119; border-color: #4A1119; }
.btn-gold      { background: var(--sky); color: var(--bordeaux); border-color: var(--sky); }
.btn-gold:hover { background: var(--sky-dk); border-color: var(--sky-dk); color: #fff; }
.btn-outline   { background: transparent; color: var(--bordeaux); border-color: var(--bordeaux); }
.btn-outline:hover { background: var(--bordeaux); color: #fff; }
.btn-white     { background: #fff; color: var(--bordeaux); }
.btn-white:hover { background: var(--sand); }
.btn-sm        { padding: 8px 18px; font-size: .875rem; }
.btn-danger    { background: var(--red); color: #fff; border-color: var(--red); }
.btn-success   { background: var(--green); color: #fff; border-color: var(--green); }
.btn-icon-remove { padding: 2px 9px; font-size: .75rem; line-height: 1.6; }

/* ============================================================
   HEADER — top utility bar + brand row + category (mega-menu) bar
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 200; }

/* Top utility bar: За нас · любими/резервации/профил · контакти.
   ТЕСТОВ ВАРИАНТ "всичко в бордо" (2026-09-30) — .nav-top/.nav-logo-row/.nav-cats и трите бордо,
   текстът бял навсякъде. ЗА ВРЪЩАНЕ НА БЯЛАТА ВЕРСИЯ (предишния вариант, показан на бизнеса
   преди този тест): background тук var(--white), border-bottom #f0ebe7, и върни .nav-about-link/
   .nav-icon-link/.nav-contacts a/.nav-contacts-hours на var(--bordeaux); .nav-logo-row на
   var(--white); .nav-cats на var(--white) с .nav-cat > a/button цвят var(--bordeaux) и hover
   rgba(61,20,32,.1). */
.nav-top {
  background: var(--bordeaux); border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-top-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  /* Grid вместо flex+space-between — space-between само изравнява разстоянията, не центрира
     реално средния елемент (.nav-icons), когато лявото ("За нас") и дясното (контакти) групи
     имат различна ширина (реален сигнал от бизнеса: "Любими и т.н. е по-вляво"). 1fr/auto/1fr
     гарантира .nav-icons да е винаги точно в центъра на реда, независимо от ширината встрани.
     position:relative — референтна точка за абсолютно позиционираното лого по-долу. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 76px; gap: 24px; position: relative;
}
/* Лого вляво, преди "За нас" (2026-09-30) — абсолютно позиционирано, за да може да "виси" под
   долния край на .nav-top (76px) и в горната половина на .nav-logo-row (42px) отдолу, без да
   разбутва вертикалното центриране на "За нас"/иконките в самата 76px лента. padding-left на
   .nav-brand-group резервира мястото му (ширина ~284px при височина 118px, аспектно съотношение
   на векторното лого ~2.41). При промяна на .nav-logo-inline-link svg височината, преизчисли и
   padding-left тук (нова_височина × 2.41 + ~12px разстояние). */
.nav-brand-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; justify-self: start; padding-left: 233px; }
.nav-logo-inline-link { position: absolute; left: 16px; top: 0; display: block; z-index: 5; }
.nav-logo-inline-link svg { height: 84px; width: auto; display: block; }
.nav-about-link {
  color: var(--sky); font-size: .875rem; font-weight: 500; letter-spacing: .5px;
  transition: color var(--transition);
}
.nav-about-link:hover { color: var(--sky); }

/* Остатък от бордо лентата с логото — долната половина е премахната (2026-09-30), логото вече
   виси от .nav-top над нея (виж .nav-logo-inline-link по-горе); тази е само декоративна бордо
   лента, точно колкото е нужно за долната половина на лого-то (76+42=118px, съвпада точно). */
.nav-logo-row { background: var(--bordeaux); height: 16px; }

.nav-icons { display: flex; align-items: center; gap: 28px; justify-self: center; margin-left: 9px; }
.nav-icon-link {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  color: rgba(255,255,255,.82); font-size: .875rem; font-weight: 500;
  position: relative; transition: color var(--transition);
}
.nav-icon-link:hover, .nav-icon-link.active { color: var(--sky); }
.nav-icon-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.nav-icon-badge {
  position: absolute; top: -4px; right: -10px;
  background: var(--rose); color: #fff; font-size: .625rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.nav-contacts { display: flex; align-items: center; gap: 22px; flex-shrink: 0; justify-self: end; }
.nav-contacts a {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  color: rgba(255,255,255,.85); font-size: .875rem; font-weight: 500;
  transition: color var(--transition);
}
.nav-contacts a:hover { color: var(--sky); }
.nav-contacts svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
.nav-contacts-phone-wrap { position: relative; }
.nav-contacts-hours {
  position: absolute; top: 100%; left: 0; margin-top: 2px; white-space: nowrap;
  color: var(--sky); font-size: .75rem; font-weight: 500;
}

/* Category / mega-menu bar — бяла лента (контактите и логото над нея остават бордо). */
.nav-cats { background: var(--white); border-bottom: 1px solid #e5ddd8; }
.nav-cats-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px;
}
.nav-cat {
  position: relative; display: flex; align-items: center;
}
.nav-cat > a, .nav-cat > button.nav-cat-trigger {
  display: flex; align-items: center; height: 52px; padding: 0 14px;
  color: var(--bordeaux); font-size: .875rem; font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  transition: background var(--transition);
}
.nav-cat > a:hover, .nav-cat > button.nav-cat-trigger:hover, .nav-cat.open > button.nav-cat-trigger {
  background: rgba(61,20,32,.1);
}

/* Mega menu dropdown: continents -> countries (vertical, alphabetical) */
.mega-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50;
  background: #fff; box-shadow: var(--shadow-lg); border: 1px solid #e5ddd8; border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 28px 32px; min-width: 720px;
  grid-template-columns: repeat(4, 1fr); gap: 24px 32px;
}
.nav-cat.open .mega-menu { display: grid; }
.mega-col h5 {
  color: var(--rose-dk); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--sand);
}
.mega-col a {
  display: block; padding: 5px 0; color: var(--coal); font-size: .875rem;
  transition: color var(--transition), padding-left var(--transition);
}
.mega-col a:hover { color: var(--rose); padding-left: 4px; }

/* Simple dropdown for single-column menus (e.g. Специални оферти on mobile fallback) */
.nav-cat-simple-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50;
  background: #fff; box-shadow: var(--shadow-lg); border: 1px solid #e5ddd8; border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  min-width: 240px; padding: 10px 0;
}
.nav-cat.open .nav-cat-simple-menu { display: block; }
.nav-cat-simple-menu a { display: block; padding: 10px 20px; color: var(--coal); font-size: .875rem; }
.nav-cat-simple-menu a:hover { background: var(--light); color: var(--rose); }
/* Собствени тънки outline SVG иконки (2026-09-22, "По интереси") — стил, наподобяващ дизайн-
   мокъпа на бизнеса (златен outline ред икони под hero-търсачката), приложен тук пред всяка
   категория вместо на самата начална страница. */
/* Само "По интереси"/"Специални оферти" (единствените 2 менюта с тази класа) — текстът на
   категориите с главни букви, по изрична заявка на бизнеса; шрифтът остава непроменен
   (text-transform не пипа font-family/font-size). 2026-09-26. */
.nav-cat-simple-menu-icons a { display: flex; align-items: center; gap: 12px; text-transform: uppercase; }
.nav-cat-simple-menu-icons svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: var(--sky-dk); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.nav-cat-simple-menu-icons a:hover svg { stroke: var(--rose); }
.nav-cat-simple-menu-icons a .promo-red { color: #E4213A; }
.nav-cat-simple-menu-icons a:hover .promo-red { color: #E4213A; }
/* Иконата пред "Оферти до 999 евро" в същия червен нюанс като текста (2026-09-30). */
.nav-cat-simple-menu-icons a.nav-offer-999 svg,
.nav-cat-simple-menu-icons a.nav-offer-999:hover svg { stroke: #E4213A; }

.nav-mobile-toggle {
  display: none; align-items: center; gap: 10px;
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 14px 24px; background: none; border: none; cursor: pointer;
  color: var(--bordeaux); font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.nav-mobile-toggle-icon { display: flex; flex-direction: column; gap: 4px; width: 22px; flex-shrink: 0; }
.nav-mobile-toggle-icon span { display: block; height: 2px; width: 100%; background: var(--bordeaux); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav-cats.mobile-open .nav-mobile-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-cats.mobile-open .nav-mobile-toggle-icon span:nth-child(2) { opacity: 0; }
.nav-cats.mobile-open .nav-mobile-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  background: linear-gradient(160deg, var(--bordeaux) 0%, #4a1c2c 55%, #2b0f18 100%);
  display: flex; align-items: center; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/travel-agency/public/images/hero-bg.jpg') center/cover no-repeat;
  opacity: .16;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(201,162,91,.14), transparent 60%);
}
.hero-content { position: relative; z-index: 2; max-width: 760px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--sky); font-size: .8125rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--sky); display: inline-block; }
.hero h1 { color: #fff; margin-bottom: 28px; font-weight: 600; }
.hero h1 em { font-style: italic; color: var(--sky); font-weight: 400; }
.hero-sub {
  color: rgba(255,255,255,.72); font-size: 1.25rem; font-weight: 300; line-height: 1.7;
  max-width: 560px; margin-bottom: 44px; font-family: var(--font-display); font-style: italic;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.scroll-cue {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: scrollBounce 2.2s ease-in-out infinite;
}
.scroll-cue svg { width: 16px; height: 16px; stroke: var(--sky); fill: none; }
@keyframes scrollBounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ============================================================
/* ============================================================
   SPLIT HERO — плочка (1 екскурзия/почивка/хотел), стил преизползван от карусела по-долу
   ============================================================ */
.split-hero-tile {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  color: #fff; min-height: 320px; height: 100%;
}
.split-hero-tile .tile-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.split-hero-tile:hover .tile-bg { transform: scale(1.05); }
.split-hero-tile.tile-a .tile-bg { background: linear-gradient(150deg, #2b4d5e 0%, #3d1420 100%); }
.split-hero-tile.tile-b .tile-bg { background: linear-gradient(150deg, #3d1420 0%, #5a3a2b 100%); }
.split-hero-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.25) 100%);
}
.split-hero-badge {
  position: absolute; top: 28px; left: 0; z-index: 3;
  background: var(--rose); color: #fff; padding: 9px 20px 9px 24px; border-radius: 0 20px 20px 0;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
}
.split-hero-content { position: relative; z-index: 2; padding: 44px; max-width: 460px; }
.split-hero-eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
.split-hero-title { font-family: var(--font-display); font-size: clamp(1.625rem, 2.6vw, 2.5rem); font-weight: 700; line-height: 1.2; margin-bottom: 12px; color: #fff; }
.split-hero-sub { color: rgba(255,255,255,.8); font-size: .9375rem; }
.split-hero-price { margin-top: 16px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--sky); }

/* ============================================================
   HERO CAROUSEL — плъзгащ прозорец от по 1 плочка, 2 видими наведнъж
   (1-2, 2-3, 3-4 ... 6-1, безшевно зацикляне чрез 2 клонинга в края на лентата)
   ============================================================ */
.hero-carousel { position: relative; overflow: hidden; background: var(--bordeaux); height: 76vh; }
.hero-carousel-track { display: flex; gap: 3px; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.hero-carousel-slide { flex: 0 0 calc(50% - 1.5px); min-width: calc(50% - 1.5px); height: 100%; }
.hero-carousel-single .hero-carousel-slide { flex-basis: 100%; min-width: 100%; }
.hero-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.15); color: #fff; font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(4px); transition: background .15s;
}
.hero-carousel-arrow:hover { background: rgba(255,255,255,.3); }
.hero-carousel-prev { left: 20px; }
.hero-carousel-next { right: 20px; }
@media (max-width: 900px) {
  .hero-carousel { height: auto; }
  .hero-carousel-slide { flex-basis: 100%; min-width: 100%; height: auto; } /* на мобилни — 1 плочка наведнъж, плъзгаемо */
  .split-hero-tile { min-height: 320px; height: auto; }
  .hero-carousel-arrow { width: 38px; height: 38px; font-size: 1.4rem; }
}

/* ============================================================
   HERO WRAP — search картата "плава" върху долния ръб на 2-те снимки
   ============================================================ */
.hero-wrap { position: relative; margin-bottom: 96px; }
.hero-search-float {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 60%);
  width: min(980px, 82%); background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px 24px; z-index: 20;
}
.hero-search-float.is-dragging { transition: none; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.search-drag-handle {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%);
  width: 64px; height: 22px; background: #fff; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  cursor: grab; user-select: none; box-shadow: 0 -2px 6px rgba(0,0,0,.06);
}
.search-drag-handle:active { cursor: grabbing; }
.search-drag-handle span {
  width: 4px; height: 4px; border-radius: 50%; background: var(--grey, #9aa5b1);
}
@media (max-width: 900px) {
  .hero-wrap { margin-bottom: 24px; }
  .hero-search-float { position: static; transform: none; width: 100%; margin-top: -1px; border-radius: 0 0 var(--radius) var(--radius); }
  .search-drag-handle { display: none; }
}
.hero-search-float .search-form { grid-template-columns: 1.3fr 1fr minmax(0,1.2fr) minmax(0,1.2fr); align-items: end; gap: 10px; }
.hero-search-float .search-form .form-control { height: 48px; }
.hero-search-float .search-form button[type="submit"] { width: 100%; height: 48px; justify-content: center; padding: 0 30px; align-self: end; }
@media (max-width: 900px) {
  .hero-search-float .search-form { grid-template-columns: repeat(2, 1fr); }
  .hero-search-float .search-form button[type="submit"] { grid-column: 1 / -1; justify-content: center; padding: 12px; }
}
/* Календарът на началната търсачка се отваря НАГОРЕ (компактната лента е близо до долния ръб на екрана) */
.hero-search-float .date-picker-popover { top: auto; bottom: calc(100% + 8px); }

.search-form { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.search-field label { display: block; font-size: .8125rem; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.search-field input, .search-field select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #E2E8F0; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .9375rem; color: var(--coal);
  transition: border-color var(--transition);
}
.search-field input:focus, .search-field select:focus { outline: none; border-color: var(--sky); }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header { text-align: center; margin-bottom: 64px; }
.section-eyebrow { color: var(--rose); font-size: .8125rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; }
/* Видим breadcrumb ред ("Начало / Екскурзии / Австрия") — засега само на тъмни (бордо) hero секции. */
.breadcrumbs { font-size: .8125rem; margin-bottom: 14px; }
.breadcrumbs a { color: rgba(255,255,255,.65); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--sky); }
.breadcrumbs-sep { color: rgba(255,255,255,.4); margin: 0 8px; }
.breadcrumbs--light a { color: var(--grey); }
.breadcrumbs--light a:hover { color: var(--bordeaux); }
.breadcrumbs--light span[aria-current] { color: var(--coal); }
.breadcrumbs--light .breadcrumbs-sep { color: var(--grey); opacity: .5; }
.section-header h2 { max-width: 640px; margin: 0 auto; }
.section-header p { color: var(--grey); max-width: 560px; margin: 18px auto 0; font-size: 1.0625rem; }
.divider-line { width: 56px; height: 1px; background: var(--sky); margin: 22px auto 0; }

/* ============================================================
   EDITORIAL — lede statement, pull quote, magazine rhythm
   ============================================================ */
.lede-section { text-align: center; padding: 96px 0 40px; }
.lede-text {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.55; color: var(--bordeaux);
  max-width: 780px; margin: 0 auto;
}
.lede-text em { color: var(--rose); font-style: normal; font-weight: 600; }

.quote-block {
  text-align: center; max-width: 720px; margin: 0 auto; padding: 24px 0;
}
.quote-block .quote-mark { font-family: var(--font-display); font-size: 4rem; color: var(--sky); line-height: 1; margin-bottom: 8px; }
.quote-block p { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--bordeaux); line-height: 1.6; margin-bottom: 20px; }
.quote-block .quote-author { font-size: .8125rem; text-transform: uppercase; letter-spacing: 2px; color: var(--grey); font-weight: 600; }

/* By-interest cards */
.interest-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.interest-card {
  display: block; text-align: center; padding: 40px 16px; border-radius: var(--radius);
  background: var(--sand); color: var(--bordeaux); transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid rgba(169,125,122,.15);
}
.interest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.interest-card .interest-icon { font-size: 2rem; margin-bottom: 14px; display: block; }
.interest-card .interest-label { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }

/* About teaser */
.about-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-teaser-media {
  height: 420px; border-radius: var(--radius); background: linear-gradient(150deg, var(--bordeaux), #5a2434);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.25); font-size: 3rem;
}
.about-teaser h2 { margin-bottom: 20px; }
.about-teaser p { color: var(--grey); font-size: 1.0625rem; line-height: 1.8; margin-bottom: 16px; }
.stat-row { display: flex; gap: 40px; margin-top: 32px; }
.stat-row .stat-num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--rose); }
.stat-row .stat-label { font-size: .8125rem; color: var(--grey); text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  transition: box-shadow .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.card-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--light); display: flex; align-items: center; justify-content: center; color: var(--grey); font-size: 3rem; }
.card-body { padding: 28px 24px; }
.card-eyebrow { font-size: .75rem; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--bordeaux); margin-bottom: 10px; line-height: 1.3; }
.card-meta  { color: var(--grey); font-size: .875rem; margin-bottom: 14px; }
.card-price { font-size: 1.5rem; font-weight: 700; color: var(--bordeaux); font-family: var(--font-display); }
.card-price span { font-size: .8125rem; color: var(--grey); font-weight: 400; font-family: var(--font-body); }
.card-footer { padding: 16px 20px; border-top: 1px solid var(--light); display: flex; align-items: center; justify-content: space-between; }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
}
.badge-sky   { background: var(--sand); color: var(--rose-dk); }
.badge-green { background: #ECF4EF; color: var(--green); }
.badge-red   { background: #FBEAE7; color: var(--red); }
.badge-grey  { background: var(--light); color: var(--grey); }
.badge-bordeaux  { background: var(--bordeaux); color: #fff; }
.badge-gold  { background: var(--sky); color: var(--bordeaux); }
button.badge-toggle {
  border: none; font-family: inherit; cursor: pointer;
  transition: filter var(--transition);
}
button.badge-toggle:hover:not(:disabled) { filter: brightness(0.92); }
button.badge-toggle:disabled { cursor: wait; opacity: .7; }
.stars { color: #F59E0B; letter-spacing: 1px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: .875rem; font-weight: 600; color: var(--coal); margin-bottom: 6px; }
.form-control {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #E2E8F0; border-radius: var(--radius-sm);
  /* Изричен бял фон (2026-09-19) — реален истински <input> получава бял фон автоматично от
     браузъра, но .form-control се ползва и върху <div> (напр. .date-picker-display), които
     нямат такъв фон по подразбиране — над оцветен родителски панел (напр. var(--sand)) празният
     div се сливаше визуално с фона зад него. */
  background: #fff;
  font-family: var(--font-body); font-size: .9375rem; color: var(--coal);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(58,134,255,.12); }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-row { display: grid; gap: 16px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.form-hint  { font-size: .8125rem; color: var(--grey); margin-top: 4px; }
.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: .9375rem; }
.alert-error   { background: #FEF2F2; color: var(--red); border: 1px solid #FECACA; }
.alert-success { background: #ECFDF5; color: var(--green); border: 1px solid #A7F3D0; }
.alert-info    { background: #EFF6FF; color: var(--sky-dk); border: 1px solid #BFDBFE; }

/* ============================================================
   ЗАГЛАВНА СТРАНИЦА (admin) — визуален wireframe на 11-те секции + форма
   ============================================================ */
.hp-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.hp-wireframe {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 3px;
  border: 1.5px solid #e5ddd8; border-radius: var(--radius-sm); overflow: hidden; min-height: 640px;
}
.hp-wireframe-label { font-size: .75rem; color: var(--grey); padding: 8px 10px 2px; }
.hp-block {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 10px; background: var(--light); color: var(--grey); text-decoration: none;
  border-left: 3px solid transparent; font-size: .6875rem; line-height: 1.25; transition: background .15s;
}
.hp-block:hover { background: #efe8e3; }
.hp-block.active { background: var(--rose); color: #fff; border-left-color: var(--rose-dk); font-weight: 600; }
.hp-block-num { font-weight: 700; opacity: .7; }
.hp-form-panel { min-width: 0; }
.hp-card-group {
  border: 1.5px dashed #ddd3cc; border-radius: var(--radius-sm); padding: 12px; margin-bottom: 12px; background: var(--light);
}
.hp-card-group-num { font-size: .75rem; font-weight: 700; color: var(--grey); margin-bottom: 6px; }
@media (max-width: 900px) {
  .hp-layout { grid-template-columns: 1fr; }
  .hp-wireframe { position: static; min-height: auto; flex-direction: row; flex-wrap: wrap; }
  .hp-block { flex: 1 1 30%; }
}

/* ============================================================
   TABLE
   ============================================================ */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
thead th { background: var(--light); padding: 12px 16px; text-align: left; font-size: .8125rem; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .5px; }
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--light); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #FAFBFC; }

/* ============================================================
   SIDEBAR FILTER
   ============================================================ */
.filter-sidebar { background: var(--sand); border-radius: var(--radius); padding: 24px; }
.filter-sidebar h4 { color: var(--bordeaux); margin-bottom: 20px; font-size: 1rem; }
.filter-group { margin-bottom: 20px; }
.filter-group label { display: block; font-size: .8125rem; font-weight: 600; color: var(--grey); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }

/* ============================================================
   SMART COMBO — падащо меню (клик) + автодовършване (писане, толерантно към грешки)
   ============================================================ */
.smart-combo { position: relative; }
.smart-combo-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--light); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto;
}
.smart-combo-dropdown.is-open { display: block; }
.smart-combo-item { padding: 10px 14px; font-size: .9375rem; cursor: pointer; }
.smart-combo-item:hover, .smart-combo-item.is-active { background: var(--light); }
.smart-combo-empty { padding: 10px 14px; font-size: .875rem; color: var(--grey); }

/* ============================================================
   ПЛАВАЩИ ИКОНКИ ЗА ВРЪЗКА (WhatsApp/Viber) — фиксирани долу-дясно на екрана (2026-09-25)
   ============================================================ */
.chat-float {
  position: fixed; bottom: 24px; z-index: 9999;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
  animation: chatFloatBreathe 3.2s ease-in-out infinite;
}
.chat-float:hover { transform: scale(1.1); animation-play-state: paused; }
.chat-float svg { width: 27px; height: 27px; fill: #fff; position: relative; z-index: 2; }
.chat-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  opacity: .35; z-index: 1;
  animation: chatFloatRing 3.2s ease-out infinite;
}
.whatsapp-float {
  right: 24px;
  background: linear-gradient(135deg, #2CE873, #1DAA53);
  box-shadow: 0 4px 16px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.2);
}
.whatsapp-float::before { background: #25D366; }
.viber-float {
  right: 88px;
  background: linear-gradient(135deg, #9B72F5, #7360F2);
  box-shadow: 0 4px 16px rgba(115,96,242,.4), 0 2px 6px rgba(0,0,0,.2);
}
.viber-float::before { background: #7360F2; }
@keyframes chatFloatBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes chatFloatRing {
  0% { transform: scale(1); opacity: .3; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-float, .chat-float::before { animation: none; }
}
/* Бисквитният банер (`.cookie-banner`, вижда се само до първи избор на посетителя) стои под
   иконките (z-index по-нисък), но на тесни екрани с пренесени бутони застъпва точно долния десен
   ъгъл — скрити временно, докато банерът е отворен, вместо да се застъпват. */
.cookie-banner.is-open ~ .whatsapp-float, .cookie-banner.is-open ~ .viber-float { display: none; }
@media (max-width: 700px) {
  .chat-float { bottom: 14px; width: 46px; height: 46px; }
  .chat-float svg { width: 23px; height: 23px; }
  .whatsapp-float { right: 14px; }
  .viber-float { right: 68px; }
}

/* ============================================================
   COOKIE CONSENT — банер + панел с настройки
   ============================================================ */
.cookie-banner {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: #fff; border-top: 1px solid var(--light);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  padding: 20px 24px;
}
.cookie-banner.is-open { display: block; }
.cookie-banner-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cookie-banner-text { flex: 1; min-width: 260px; font-size: .875rem; color: var(--grey); }
.cookie-banner-text a { color: var(--rose); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-settings-panel {
  display: none;
  max-width: 1100px; margin: 16px auto 0; padding-top: 16px; border-top: 1px solid var(--light);
}
.cookie-settings-panel.is-open { display: block; }
.cookie-settings-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--light); gap: 16px; }
.cookie-settings-row:last-child { border-bottom: none; }
.cookie-settings-row strong { display: block; }
.cookie-settings-row p { margin: 2px 0 0; font-size: .8125rem; color: var(--grey); }
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; }
}
.search-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
/* Съдържание отляво + тясно панелче (цена/резервация) отдясно — обратен ред спрямо
   .search-layout по-горе, затова отделен клас, не вариант на него. Широчината на дясната
   колона се задава през CSS променлива (--detail-side-width), НЕ през grid-template-columns
   directно в inline style — иначе inline стилът би бил над медия заявката по-долу на мобилен
   (inline стил винаги печели пред външен CSS, включително @media, освен ако той самият не
   зададе grid-template-columns директно). Виж tours/detail.php, packages/detail.php,
   booking/form.php, allinclusive/hotel-detail.php (2026-09-20, мобилен одит). */
.detail-layout { display: grid; grid-template-columns: 1fr var(--detail-side-width, 360px); gap: 28px; }
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   ADMIN / CRM PANEL
   ============================================================ */
.admin-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bordeaux); padding: 0;
  position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto;
}
.sidebar-logo { padding: 28px 24px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-logo span { font-family: var(--font-display); color: #fff; font-size: 1.25rem; }
.sidebar-logo span em { color: var(--sky); font-style: normal; }
.sidebar-section { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar-label { padding: 6px 24px; font-size: .6875rem; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: 1.5px; }
.sidebar a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 24px; color: rgba(255,255,255,.72); font-size: .9375rem;
  transition: background var(--transition), color var(--transition);
}
.sidebar a:hover, .sidebar a.active { background: rgba(255,255,255,.06); color: #fff; }
.sidebar a .icon { width: 18px; opacity: .7; }
.sidebar-expand-toggle {
  display: flex; width: 100%; align-items: center; gap: 10px;
  padding: 11px 24px; color: rgba(255,255,255,.72); font-size: .9375rem;
  background: none; border: none; text-align: left; cursor: pointer; font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.sidebar-expand-toggle::after { content: '›'; margin-left: auto; transition: transform var(--transition); }
.sidebar-expand.open > .sidebar-expand-toggle::after { transform: rotate(90deg); }
.sidebar-expand-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-expand-panel { display: none; }
.sidebar-expand.open > .sidebar-expand-panel { display: block; }
.sidebar-expand-panel a { padding-left: 44px; font-size: .875rem; }
.sidebar-expand-panel .sidebar-expand-toggle { padding-left: 44px; font-size: .875rem; }
.sidebar-expand-panel .sidebar-expand-panel a { padding-left: 64px; font-size: .8125rem; }
.sidebar-expand-panel .sidebar-expand-panel .sidebar-expand-toggle { padding-left: 64px; font-size: .8125rem; }
.sidebar-expand-panel .sidebar-expand-panel .sidebar-expand-panel a { padding-left: 84px; font-size: .75rem; }
.sidebar-sub-divider {
  padding: 10px 84px 4px; font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,.35);
}
.admin-main { flex: 1; padding: 32px 40px; background: var(--light); }
.page-title { margin-bottom: 28px; }
.page-title h1 { font-size: 1.625rem; color: var(--bordeaux); }
.page-title p  { color: var(--grey); font-size: .9375rem; margin-top: 4px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.stat-card { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.stat-card .label { font-size: .8125rem; color: var(--grey); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.stat-card .value { font-size: 2rem; font-weight: 700; color: var(--bordeaux); font-family: var(--font-display); }
.stat-card .delta { font-size: .8125rem; color: var(--green); margin-top: 4px; }

.panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 24px; }
.panel-title { font-size: 1.0625rem; font-weight: 700; color: var(--bordeaux); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--light); }
/* Когато .panel-title е <summary> вътре в <details> (виж tours/detail.php, тестов флаг
   $testAccordion, 2026-09-20) — маркерът на браузъра вече показва, че е кликаемо falling-back. */
summary.panel-title { cursor: pointer; list-style-position: outside; }
summary.panel-title::marker { color: var(--bordeaux); }
summary.font-600 { cursor: pointer; }

/* CRM */
.crm-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pipeline-col { background: var(--light); border-radius: var(--radius); padding: 16px; }
.pipeline-col h4 { font-size: .875rem; color: var(--grey); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
.activity-feed { list-style: none; }
.activity-item { padding: 14px 0; border-bottom: 1px solid var(--light); display: flex; gap: 12px; }
.activity-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.activity-body .time { font-size: .8125rem; color: var(--grey); }

/* ============================================================
   BOOKING STEPS
   ============================================================ */
.booking-steps { display: flex; gap: 0; margin-bottom: 36px; }
.booking-step { flex: 1; text-align: center; padding: 14px; border-bottom: 3px solid var(--light); color: var(--grey); font-size: .9375rem; font-weight: 500; }
.booking-step.active { border-bottom-color: var(--sky); color: var(--sky); }
.booking-step.done { border-bottom-color: var(--green); color: var(--green); }
.booking-summary { background: var(--sand); border-radius: var(--radius); padding: 24px; }
.booking-total { font-size: 1.75rem; font-weight: 700; color: var(--bordeaux); font-family: var(--font-display); }

/* "Бързо запитване" — collapsible lead-capture до основния CTA (виж partials/quick-inquiry.php) */
.quick-inquiry summary { list-style: none; }
.quick-inquiry summary::-webkit-details-marker { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bordeaux); color: rgba(255,255,255,.72); padding: 44px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand .logo svg { height: 46px; width: auto; flex-shrink: 0; }
.footer-brand p { font-size: .9375rem; line-height: 1.7; }
.footer h5 { color: #fff; font-size: .9375rem; margin-bottom: 16px; }
/* "Документи"/"Банкова сметка" — заглавието изглежда точно като другите footer h5 (Услуги/Акаунт/
   Контакти), само с курсор-показалец; съдържанието се показва при hover, без клик/JS. */
.footer-hover h5 { cursor: pointer; margin-bottom: 0; }
.footer-hover-panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.footer-hover:hover .footer-hover-panel { max-height: 200px; }
.footer-hover-panel ul { padding-top: 16px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: rgba(255,255,255,.6); font-size: .9375rem; transition: color var(--transition); }
.footer ul a:hover { color: #fff; }
.footer-legal-notice { color: rgba(255,255,255,.45); font-size: .8125rem; line-height: 1.6; margin: -12px 0 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: .875rem; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-banner { position: relative; }
.footer-banner-text {
  position: absolute;
  left: max(6px, calc((100vw - 1240px) / 2 + 6px)); /* малко въздух отляво, започва малко преди "© 2026..." над него */
  top: 34%;
  transform: rotate(-1deg);
  transform-origin: left center;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--bordeaux);
  font-size: clamp(1.5rem, 4.1vw, 2.6rem);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(255,255,255,.55), 0 0 10px rgba(255,255,255,.35);
}
@media (max-width: 700px) { .footer-banner-text { display: none; } }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.page-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1.5px solid #E2E8F0;
  color: var(--coal); font-weight: 500; font-size: .9375rem;
  transition: all var(--transition);
}
.page-btn:hover, .page-btn.active { background: var(--sky); border-color: var(--sky); color: #fff; }

/* ============================================================
   CARD IMAGE + FAVORITE HEART
   ============================================================ */
/* position:relative без z-index НЕ изолира stacking context-а на децата - сърцето (z-index:5)
   можеше да "изплува" над съдържание извън картата (напр. над календара отдолу). z-index:0 тук
   затваря heart-а вътре в собствения stacking context на картата, завинаги в нейните граници. */
.card-media { position: relative; z-index: 0; }
.fav-heart {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform var(--transition);
}
.fav-heart:hover { transform: scale(1.1); }
.fav-heart svg { width: 18px; height: 18px; stroke: var(--rose); fill: none; transition: fill var(--transition); }
.fav-heart.is-fav svg { fill: var(--rose); }

/* Поленце "регистрирайте се" при клик на сърчицето от гост (2026-09-23) — виж main.php. */
/* Реален бъг, поправен 2026-09-23: display:flex тук бие браузърния default за [hidden]
   (author stylesheet печели пред UA stylesheet дори при равна специфичност) - поленцето се
   показваше на ВСЯКА страница веднага, независимо от hidden атрибута. [hidden] селекторът тук
   е ЗАДЪЛЖИТЕЛЕН, не козметичен. */
.fav-auth-modal { position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 20px; }
.fav-auth-modal:not([hidden]) { display: flex; }
.fav-auth-modal-backdrop { position: absolute; inset: 0; background: rgba(24,10,12,.55); }
.fav-auth-modal-box {
  position: relative; background: #fff; border-radius: var(--radius); padding: 36px 32px 28px;
  max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow-lg);
}
.fav-auth-modal-close {
  position: absolute; top: 10px; right: 14px; border: none; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--grey);
}
.fav-auth-modal-close:hover { color: var(--bordeaux); }

/* Малка икона за вид транспорт (самолет/автобус), под заглавието, ляво подравнена — фиксирано
   място за нея независимо от дължината на заглавието (за разлика от inline до текста). */
.transport-icon { display: block; text-align: left; margin: 2px 0 8px; }
.transport-icon svg {
  width: 20px; height: 20px; fill: none; stroke: var(--grey);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.transport-icon-emoji { font-size: 1.15rem; line-height: 1; }

/* ============================================================
   HOME HERO DESTINATION TILES  (per brief: 2 photos -> tour / vacation offer)
   ============================================================ */
.dest-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dest-tile {
  position: relative; height: 320px; border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: flex-end; color: #fff; background: var(--light);
}
.dest-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dest-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(61,20,32,0) 40%, rgba(61,20,32,.75) 100%);
}
.dest-tile-label { position: relative; z-index: 2; padding: 24px; }
.dest-tile-eyebrow { font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--sky); font-weight: 700; margin-bottom: 6px; }
.dest-tile-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }

/* ============================================================
   CALENDAR (departure date picker with month/whole-month view)
   ============================================================ */
.date-picker-wrap { position: relative; }
.date-picker-popover {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 28px; width: 380px;
}
.date-picker-popover.open { display: block; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-header button { background: var(--sand); border: none; cursor: pointer; color: var(--bordeaux); font-size: 1.25rem; width: 38px; height: 38px; border-radius: 50%; transition: background var(--transition), color var(--transition); }
.cal-header button:hover { background: var(--rose); color: #fff; }
.cal-month-name { font-family: var(--font-display); font-weight: 700; color: var(--bordeaux); font-size: 1.25rem; }
.cal-view-month-btn {
  display: block; width: 100%; text-align: center; margin: 10px 0 16px;
  background: var(--rose); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 11px; font-size: .9375rem; font-weight: 700; cursor: pointer; letter-spacing: .3px;
}
.cal-view-month-btn:hover { background: var(--rose-dk); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal-dow { font-size: .8125rem; color: var(--grey); font-weight: 700; padding: 4px 0 8px; }
.cal-day {
  padding: 12px 0; font-size: 1rem; border-radius: 8px; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cal-day:hover { background: var(--sand); }
.cal-day.selected { background: var(--rose); color: #fff; font-weight: 700; }
.cal-day.disabled { color: #D8CFCB; cursor: default; pointer-events: none; }
@media (max-width: 420px) {
  .date-picker-popover { width: 300px; padding: 20px; }
}
.cal-day.empty { visibility: hidden; }

/* ============================================================
   AVAILABILITY CALENDAR (начална страница) — маркира ВСИЧКИ дни
   с реални тръгвания (екскурзии+почивки), клик показва списък
   ============================================================ */
.avail-calendar { max-width: 340px; margin: 0 auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px 20px; }
.avail-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.avail-cal-header button { background: var(--sand); border: none; cursor: pointer; color: var(--bordeaux); font-size: 1rem; width: 28px; height: 28px; border-radius: 50%; transition: background var(--transition), color var(--transition); }
.avail-cal-header button:hover { background: var(--rose); color: #fff; }
.avail-cal-month-name { font-family: var(--font-display); font-weight: 700; color: var(--bordeaux); font-size: 1.0625rem; }
.avail-cal-legend { display: flex; align-items: center; gap: 6px; justify-content: center; margin-bottom: 10px; font-size: .75rem; color: var(--grey); }
.avail-cal-legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 3px rgba(169,125,122,.22); flex-shrink: 0; }
.avail-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.avail-cal-dow { font-size: .6875rem; color: var(--grey); font-weight: 700; padding: 2px 0 6px; letter-spacing: .3px; }
.avail-cal-day {
  position: relative; padding: 8px 0; font-size: .8125rem; border-radius: 6px;
  color: #D8CFCB; transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.avail-cal-day.empty { visibility: hidden; }
/* Дните БЕЗ тръгвания остават леко приглушени числа - контрастът идва от плътния цветен
   маркер на дните СЪС тръгвания, за да се ориентира окото веднага, без да чете всяко число. */
.avail-cal-day:not(.has-departures):not(.empty) { color: var(--bordeaux); opacity: .35; }
.avail-cal-day.has-departures {
  background: var(--rose); color: #fff; cursor: pointer; font-weight: 700;
  box-shadow: 0 4px 10px rgba(169,125,122,.4);
}
.avail-cal-day.has-departures:hover { background: var(--rose-dk); transform: scale(1.08); }
.avail-cal-day.selected.has-departures { background: var(--bordeaux); box-shadow: 0 4px 10px rgba(61,20,32,.4); }
.avail-cal-loading { text-align: center; color: var(--grey); padding: 32px 0; font-size: 1rem; }
.avail-cal-results { margin-top: 28px; border-top: 1px solid var(--sand); padding-top: 22px; }
.avail-cal-results h4 { font-size: 1.1875rem; font-family: var(--font-display); font-weight: 700; margin-bottom: 16px; color: var(--bordeaux); }
.avail-result-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  background: var(--sand); margin-bottom: 10px; transition: background var(--transition);
}
.avail-result-item:hover { background: #EFE6DF; }
/* Информативен ред без линк (детайлна страница на конкретна оферта — виж бележката в app.js
   selectDate()) — не е кликаем, затова без hover фон/pointer курсор, за да не изглежда като бутон. */
.avail-result-item.avail-result-static { cursor: default; }
.avail-result-item.avail-result-static:hover { background: var(--sand); }
.avail-result-item .avail-result-name { font-weight: 700; font-size: 1.0625rem; color: var(--bordeaux); }
.avail-result-item .avail-result-dest { font-size: .9375rem; color: var(--grey); }
.avail-result-item .avail-result-price { font-weight: 700; font-size: 1.0625rem; color: var(--rose); white-space: nowrap; }
.avail-cal-empty { text-align: center; color: var(--grey); font-size: 1rem; padding: 16px 0; }
@media (max-width: 640px) {
  .avail-calendar { padding: 14px 14px; }
  .avail-cal-day { padding: 6px 0; font-size: .75rem; }
  .avail-cal-month-name { font-size: 1rem; }
}

/* Началната страница — по-малък, по-заоблен календар с розово фонче зад него, следващо формата
   му (не пълна лента) — само за тази инстанция (`.avail-calendar-home`), не пипа сподeления
   компонент навсякъде другаде на сайта (детайлни страници на тур/почивка, списъци). */
/* `width: fit-content` — кутията (и розовото фонче зад нея) се свива точно до реалното
   съдържание: само календарчето, докато няма избрана дата (центрирано, красиво само по себе
   си), и естествено се разширява само когато `.avail-cal-results` спре да е `hidden` (JS вече
   само маха/слага `hidden`, няма нужда от допълнителен JS клас за това). */
.avail-calendar-wrap { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.avail-calendar-wrap::before {
  content: ''; position: absolute; inset: -16px;
  background: #CF8D99; opacity: .28; border-radius: 38px; z-index: 0; /* тон на сакурата от снимката на Япония в "Топ предложения" */
}
.avail-calendar-home {
  position: relative; z-index: 1; max-width: none; margin: 0;
  padding: 28px 32px; border-radius: 22px;
  display: flex; align-items: flex-start; gap: 28px;
}
.avail-calendar-home .avail-cal-main { flex: 0 0 auto; width: 380px; }
.avail-calendar-home .avail-cal-day { border-radius: 14px; padding: 11px 0; }
/* Компресирани вертикални разстояния (само тук) + разширена ширина — за да е кутията на
   календара визуално квадратна, вместо издължен правоъгълник (искане на бизнеса, 2026-09-25). */
.avail-calendar-home .avail-cal-header { margin-bottom: 16px; }
.avail-calendar-home .avail-cal-legend { margin-bottom: 12px; font-size: .875rem; }
.avail-calendar-home .avail-cal-grid { gap: 6px; }
/* Резултатите за избраната дата излизат ОТДЯСНО на календара, не отдолу — иначе при клик на
   дата потребителят губи календара от поглед и трябва да скролва нагоре-надолу, за да смени
   датата (реален проблем, докладван от бизнеса, 2026-09-25). */
.avail-calendar-home .avail-cal-results {
  flex: 0 0 auto; width: 540px; margin-top: 0; border-top: none; padding-top: 0;
  padding-left: 24px; border-left: 1px solid var(--sand);
  max-height: 420px; overflow-y: auto;
}
/* По-широко (за да не пренася имената на 2-3 реда) и по-ниско (за да не изисква скрол за
   само 2-3 резултата) — по изрична заявка на бизнеса, 2026-09-25. Фонче на резултатите в
   "розово сакура" вместо пясъчно, само тук. */
.avail-calendar-home .avail-result-item { background: rgba(207,141,153,.22); }
.avail-calendar-home .avail-result-item:hover { background: rgba(207,141,153,.4); }
/* Датите с тръгвания в нашето бордо, вместо опушена роза — само тук, по изрична заявка. */
.avail-calendar-home .avail-cal-day.has-departures { background: var(--bordeaux); box-shadow: 0 4px 10px rgba(94,22,32,.4); }
.avail-calendar-home .avail-cal-day.has-departures:hover { background: #7A1E2B; }
.avail-calendar-home .avail-cal-day.selected.has-departures { background: #3D0F17; box-shadow: 0 4px 10px rgba(61,15,23,.4); }
.avail-calendar-home .avail-cal-legend-dot { background: var(--bordeaux); box-shadow: 0 0 0 4px rgba(94,22,32,.22); }
/* Стрелките ‹ › в тон "розово сакура" (виж CLAUDE.md) — СЪЩАТА rgba/28% плътност като
   .avail-calendar-wrap::before по-долу, за да съвпадат визуално с бледата рамка зад календара
   (плътен #CF8D99 изглеждаше видимо по-тъмен/наситен от избледнялата рамка). Пълноцветно само
   на hover, за контраст при взаимодействие. */
.avail-calendar-home .avail-cal-header button { background: rgba(207,141,153,.28); }
.avail-calendar-home .avail-cal-header button:hover { background: #CF8D99; color: #fff; }
@media (max-width: 780px) {
  .avail-calendar-wrap { width: 100%; }
  .avail-calendar-home { flex-direction: column; }
  .avail-calendar-home .avail-cal-main { width: 100%; }
  .avail-calendar-home .avail-cal-results {
    border-left: none; padding-left: 0; border-top: 1px solid var(--sand);
    padding-top: 22px; margin-top: 4px; width: 100%;
  }
}
@media (max-width: 640px) {
  .avail-calendar-wrap::before { inset: -12px; border-radius: 30px; }
  .avail-calendar-home { padding: 22px 18px; border-radius: 18px; }
}

/* ============================================================
   /hotels/country/{slug} ТЪРСАЧКА — Град/Курорт + дати + гости
   ============================================================ */
.hotel-country-search { position: relative; z-index: 5; box-shadow: var(--shadow-lg); }
.guest-picker-wrap { position: relative; }
.guest-picker-display { display: flex; align-items: center; }
.guest-picker-popover {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 16px; width: 240px;
}
.guest-picker-popover.open { display: block; }
.guest-picker-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: .9375rem; }
.guest-picker-stepper { display: flex; align-items: center; gap: 12px; }
.gp-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sand);
  background: var(--sand); color: var(--bordeaux); font-size: 1rem; font-weight: 700;
  cursor: pointer; line-height: 1; transition: background var(--transition);
}
.gp-btn:hover { background: var(--rose); color: #fff; }
.gp-value { min-width: 20px; text-align: center; font-weight: 700; }
.guest-picker-done { margin-top: 8px; }
@media (max-width: 900px) { .hotel-country-search { margin-top: 16px; } }

/* ============================================================
   SIDEBAR WIDGET (стил "Календар" от референцията) + listing layout
   ============================================================ */
.listing-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
/* max-height/overflow-y добавени 2026-09-19 — предпазна мрежа: ако sidebar-ът (двата widget-а
   заедно) все пак стане по-висок от видимата зона на по-нисък екран, вътрешно се скролва самият
   sidebar, вместо долната му част да остане невидима, докато sticky- efekta не се "освободи" в
   края на страницата (реален репортиран проблем с "Категория" widget-а). */
.listing-sidebar { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; }
.sidebar-widget { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 24px; }
.sidebar-widget-header {
  background: var(--rose); color: #fff; padding: 16px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.sidebar-widget-list { padding: 6px 0; }
/* За дълги списъци (напр. градове/курорти по държава) - всички линкове си остават в HTML-а
   (crawlable за Google/AI), само визуално се скролва вместо да разтяга страницата безкрайно. */
/* Намалено от 480px на 320px (2026-09-19) — sidebar-ът е position:sticky (виж .listing-sidebar),
   комбинираната височина с новия sidebar-widget "Категория" под него надвишаваше типична видима
   височина на екрана, затова "Категория" оставаше невидим, докато sticky-ефектът не се "освободи"
   чак в края на страницата. */
.sidebar-widget-list.scrollable { max-height: 320px; overflow-y: auto; }
.sidebar-widget-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; color: var(--coal); font-size: 1rem; font-weight: 500;
  border-bottom: 1px solid var(--light); transition: color var(--transition), padding-left var(--transition);
}
.sidebar-widget-list a:last-child { border-bottom: none; }
.sidebar-widget-list a:hover { color: var(--rose); padding-left: 24px; }
.sidebar-widget-list a::after { content: '›'; color: var(--rose); font-weight: 700; font-size: 1.125rem; }
@media (max-width: 900px) {
  .listing-layout { grid-template-columns: 1fr; }
  .listing-sidebar { position: static; }
}
.filter-hover-list { position: relative; }
.filter-hover-trigger {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 600; color: var(--bordeaux); font-size: .9375rem;
  padding: 4px 0;
}
.filter-hover-panel {
  display: none; margin-top: 8px; padding-left: 4px;
}
.filter-hover-list:hover .filter-hover-panel,
.filter-hover-list.open .filter-hover-panel { display: block; }
.filter-hover-panel a {
  display: block; padding: 6px 0; font-size: .875rem; color: var(--coal);
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.filter-hover-panel a:hover { color: var(--rose); }
.filter-tag-list a { display: block; padding: 6px 0; font-size: .875rem; color: var(--coal); }
.filter-tag-list a:hover { color: var(--rose); }

/* ============================================================
   GIFT VOUCHER AMOUNT PICKER
   ============================================================ */
.voucher-amount-box { background: var(--sand); border-radius: var(--radius); padding: 28px; text-align: center; }
.voucher-amount-display { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--bordeaux); margin: 10px 0; }
.voucher-amount-box input[type="range"] { width: 100%; accent-color: var(--rose); }
.voucher-chip-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.voucher-chip {
  padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--rose);
  background: #fff; color: var(--rose); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.voucher-chip.active, .voucher-chip:hover { background: var(--rose); color: #fff; }

/* ============================================================
   NO-RESULTS INQUIRY (никога "няма резултат")
   ============================================================ */
.inquiry-fallback {
  background: var(--light); border: 1px dashed var(--rose); border-radius: var(--radius);
  padding: 28px; text-align: center; margin-top: 24px;
}

/* ============================================================
   RICH TEXT EDITOR (олекотен WYSIWYG за полетата "Описание" в админ панела)
   ============================================================ */
.rte-wrap {
  border: 1.5px solid #ddd; border-radius: var(--radius-sm);
  background: #fff; transition: border-color var(--transition), box-shadow var(--transition);
}
.rte-wrap:focus-within { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(201,162,91,.15); }

.rte-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--light); border-bottom: 1.5px solid #e5ddd8; padding: 10px 12px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  /* Полепва под горната admin лента (sticky top:68px, виж .sidebar) при скрол надолу в дълъг
     текст, за да остават бутоните за форматиране винаги достъпни без връщане нагоре.
     .rte-wrap НЕ бива да носи overflow:hidden — ancestor с overflow:hidden превръща се в
     скрол контейнер, който никога реално не се скролва (цялото съдържание му е видимо), и
     spec-ът кара position:sticky да "лепне" спрямо него, а не спрямо страницата — на практика
     лентата изобщо не залепва. Затова заоблянето на ъглите вече е директно върху toolbar/editor. */
  position: sticky; top: 68px; z-index: 5;
}
.rte-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rte-divider { width: 1px; align-self: stretch; background: #ddd; margin: 2px 2px; }

.rte-btn {
  min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px;
  background: #fff; color: var(--coal); font-size: .9375rem; cursor: pointer; line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: background var(--transition), border-color var(--transition);
}
.rte-btn:hover { background: var(--sand); border-color: var(--rose); }
.rte-btn:active { background: var(--rose); color: #fff; }
/* Трайно "включено" състояние (напр. курсорът в момента е в удебелен текст) — за разлика от
   :active по-горе (само докато трае самият клик), показва какви настройки има текущата позиция,
   виж updateToolbarState() в rich-editor.js. */
.rte-btn.active { background: var(--rose); color: #fff; border-color: var(--rose-dk); }

.rte-select {
  height: 34px; border: 1px solid #ddd; border-radius: 5px; background: #fff;
  font-size: .8125rem; padding: 0 8px; max-width: 160px; color: var(--coal); cursor: pointer;
}
.rte-select:hover { border-color: var(--rose); }

/* Изричен, недвусмислен текстов ред с настройките на текущата позиция на курсора — виж
   updateToolbarState() в rich-editor.js. Отделен от .rte-toolbar нарочно, за да не се бърка с
   контрола за форматиране (не е бутон/меню, само показва информация). */
.rte-status {
  padding: 7px 14px; background: var(--light); border-bottom: 1.5px solid #e5ddd8;
  font-size: .8125rem; color: var(--grey); font-style: italic;
}

.rte-editor {
  min-height: 420px; max-height: 800px; overflow-y: auto; padding: 20px 22px;
  background: #fff; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.85; color: var(--coal);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.rte-editor:focus { outline: none; }
.rte-editor:empty:before {
  content: attr(data-placeholder); color: var(--grey); pointer-events: none; font-style: italic;
}
.rte-editor h1, .rte-editor h2, .rte-editor h3 { margin: .9em 0 .4em; line-height: 1.25; }
.rte-editor h1:first-child, .rte-editor h2:first-child, .rte-editor h3:first-child, .rte-editor p:first-child { margin-top: 0; }
.rte-editor p { margin: 0 0 1em; }
.rte-editor ul, .rte-editor ol { margin: 0 0 1em 1.6em; }
.rte-editor li { margin-bottom: .35em; }
.rte-editor blockquote { margin: 0 0 1em; padding: 4px 0 4px 18px; border-left: 3px solid var(--rose); color: var(--grey); }
.rte-editor a { text-decoration: underline; }
.rte-source { display: none; }

/* Изобразяване на съдържание, редактирано през rich-editor — на фронтенда */
.rich-text-content { font-size: 1.0625rem; line-height: 1.85; }
/* Партньорско съдържание (напр. AllInclusive описания) идва с вграден style="font-size:14px;
   font-family:Calibri,sans-serif" на почти всеки <span> - inline стилът бие всяко правило тук по
   специфичност, затова "прегазваше" избрания шрифт/размер на сайта. !important принудително
   връща нашата типография, независимо какво носи суровият HTML на партньора. */
.rich-text-content, .rich-text-content * {
  font-family: var(--font-body) !important;
  font-size: 1.0625rem !important;
  line-height: 1.85 !important;
  color: inherit !important;
  background-color: transparent !important;
}
.rich-text-content strong, .rich-text-content b { font-weight: 700 !important; }
/* Линкове (напр. източници, цитирани в блог статия) иначе стават невидими — печелят цвета
   на обикновения текст от .rich-text-content * { color:inherit !important } отгоре, без
   подчертаване, значи изглеждат неразличими от плоския текст (2026-09-19). */
.rich-text-content a { color: var(--sky) !important; text-decoration: underline !important; }
.rich-text-content a:hover { color: var(--sky-dk) !important; }
/* Обяснителния текст под картите на таг страниците (/interest|holiday|offer/{slug}, засега само
   Michelin Гид) — двустранно подравнено на десктоп, първият параграф с отстъп като начало на
   печатен текст. На тесен екран justify-ът разтяга думите неприятно (по-малко думи на ред) —
   връща се на ляво подравняване под 700px. 2026-09-26. */
.tag-description { text-align: justify; }
.tag-description p:first-of-type { text-indent: 2em; }
/* Линкове към собствените ни хотелски страници (не външни) — в бордо, не стандартния линк-цвят
   на .rich-text-content a по-горе, за да се различават визуално от външния цитат към Michelin. */
.tag-description a.hotel-ref { color: var(--bordeaux) !important; font-weight: 700 !important; }
.tag-description a.hotel-ref:hover { color: #3D0F17 !important; }
@media (max-width: 700px) {
  .tag-description { text-align: left; }
}
.rich-text-content h1, .rich-text-content h2, .rich-text-content h3 {
  margin: 1.2em 0 .5em; line-height: 1.25 !important; font-family: var(--font-display) !important;
}
.rich-text-content h1, .rich-text-content h1 * { font-size: 1.625rem !important; }
.rich-text-content h2, .rich-text-content h2 * { font-size: 1.375rem !important; }
.rich-text-content h3, .rich-text-content h3 * { font-size: 1.1875rem !important; }
.rich-text-content h1:first-child, .rich-text-content h2:first-child, .rich-text-content h3:first-child, .rich-text-content p:first-child { margin-top: 0; }
.rich-text-content p { margin: 0 0 1.1em; }
.rich-text-content ul, .rich-text-content ol { margin: 0 0 1.1em 1.6em; }
.rich-text-content li { margin-bottom: .45em; }
.rich-text-content blockquote { margin: 0 0 1.1em; padding: 4px 0 4px 18px; border-left: 3px solid var(--rose); color: var(--grey); }

/* Само текстовете в Дестинации (destinations/country.php, destinations/empty.php) - в
   опушена роза, по изрично искане на бизнеса (2026-09-08). Отделен клас, НЕ промяна на
   общото .rich-text-content правило по-горе, за да не засегне описанията на хотели/екскурзии/
   почивки/блог, които също ползват .rich-text-content. По-високата специфичност (двоен
   клас) печели пред .rich-text-content * { color:inherit !important } отгоре. */
.destination-description, .destination-description * { color: var(--rose) !important; font-size: 1.1875rem !important; }
.destination-description h1, .destination-description h1 *,
.destination-description h2, .destination-description h2 *,
.destination-description h3, .destination-description h3 * { color: var(--bordeaux) !important; }
.destination-description h1, .destination-description h1 * { font-size: 2rem !important; }
.destination-description h2, .destination-description h2 * { font-size: 1.5rem !important; }

/* Круизи (cruises/river.php, cruises/sea.php) — интро изречението "Попътен вятър с Opus
   Travel!" в бордо, останалият текст в опушена роза (2026-09-19). Същия модел като
   .destination-description по-горе — трябва собствен клас с !important, обикновен inline
   style="color:..." губи срещу .rich-text-content * { color:inherit !important } отгоре.
   Първият параграф = интрото (структурно, не по inline стил — оцелява редакция през
   rich-editor-а занапред). */
.cruise-intro-text p:first-child, .cruise-intro-text p:first-child * { color: var(--bordeaux) !important; font-weight: 600 !important; }
.cruise-intro-text p:not(:first-child), .cruise-intro-text p:not(:first-child) * { color: var(--rose) !important; }

/* "Лийд" стил за category-content (виж $categoryContentLead в partials/category-content.php) —
   пробвано първо на /inspiration (2026-09-20). Същият модел/причина като по-горе — обикновен
   inline style губи срещу .rich-text-content * { color:inherit !important } отгоре, трябва
   собствен клас. Inter (сайтовия body шрифт), но по-плътно тегло (500) + опушена роза, вместо
   сериф (Lora) — избрано изрично след дискусия, за да не изглежда прекалено "тежко" на цял
   абзац текст (за разлика от bold заглавията, които ползват Lora успешно). */
.rich-text-content.category-lead-text, .rich-text-content.category-lead-text * {
  font-weight: 300 !important;
  color: var(--bordeaux) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
/* Центрирането НЕ е част от този клас (само цвят/размер/тегло) — на 2026-09-20 центриран текст
   се оказа четим само за кратко изречение (/inspiration, виж $categoryContentLead в
   partials/category-content.php, слага text-align:center отделно на контейнера), но "разлят" и
   трудночетим за по-дългите описания на круизите. Кръизите ползват само .category-lead-text
   (цвят/размер + лентата зад секцията, виж $categoryContentBand) — остават ляво/двустранно
   подравнени, каквито си бяха преди тази промяна. */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .rte-editor { min-height: 280px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .search-form { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid   { grid-template-columns: 1fr 1fr; }
  .search-layout { grid-template-columns: 1fr; }
  .admin-main { padding: 20px; }
  .mega-menu { grid-template-columns: repeat(2, 1fr); min-width: 480px; }
  .dest-tiles { grid-template-columns: 1fr; }
  .interest-grid { grid-template-columns: repeat(3, 1fr); }
  .about-teaser { grid-template-columns: 1fr; gap: 32px; }
  .about-teaser-media { height: 280px; }
}
@media (max-width: 700px) {
  .nav-contacts { display: none; }
  .nav-mobile-toggle { display: flex; }
  /* По-малко лого на мобилно — пълния 118px размер не се събира на тесен екран. */
  .nav-logo-inline-link svg { height: 56px; }
  .nav-brand-group { padding-left: 140px; }
  .nav-cats { position: relative; }
  .nav-cats-inner {
    display: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: var(--white); box-shadow: var(--shadow-lg); border-top: 1px solid #e5ddd8;
    max-height: calc(100vh - 76px); overflow-y: auto; padding: 0 0 8px;
  }
  .nav-cats.mobile-open .nav-cats-inner { display: flex; }
  .nav-cat { width: 100%; flex-direction: column; align-items: stretch; }
  /* .nav-cats-inner е бял dropdown, независим от бордо фона на затворения .nav-cats ред —
     категориите тук трябва да си останат бордо (не бяло-на-бяло, невидимо). */
  .nav-cat > a, .nav-cat > button.nav-cat-trigger { width: 100%; height: auto; padding: 14px 24px; color: var(--bordeaux); }
  .nav-cat > a:hover, .nav-cat > button.nav-cat-trigger:hover, .nav-cat.open > button.nav-cat-trigger { background: rgba(61,20,32,.1); }
  .mega-menu, .nav-cat-simple-menu {
    position: static; box-shadow: none; border: none; border-top: 1px solid #e5ddd8;
    border-radius: 0; min-width: 0; max-height: none; overflow-y: visible;
  }
  .mega-menu { grid-template-columns: 1fr 1fr; padding: 20px 24px; }
  .nav-cat-simple-menu a, .mega-col a { padding: 10px 24px; }
  .split-hero { grid-template-columns: 1fr; min-height: auto; }
  .split-hero-tile { min-height: 320px; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .interest-grid { grid-template-columns: 1fr 1fr; }
  .nav-icons span.nav-icon-label { display: none; }
  .hero { min-height: 70vh; }
  .sidebar { width: 100%; height: auto; position: static; }
  .admin-layout { flex-direction: column; }
  .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.cursor-pointer { cursor: pointer; }