/* OMV карта на Черноморието — стилове на сцената.
   Всички селектори са под .cmap, за да не текат в останалата част на сайта.
   Шрифтове: Unbounded (заглавия) + Onest (текст) — зареждат се от страницата. */

.cmap {
  --cmap-orange: #ff7a1a;
  --cmap-orange-lt: #ffb347;
  --cmap-navy: #052759;
  --cmap-green: #1fff5a;
  --cmap-ink: #0d2235;
  --cmap-ink-soft: #52687d;
  --cmap-panel: rgba(255, 255, 255, 0.94);
  --cmap-shadow: 0 10px 34px rgba(5, 39, 89, 0.26);
  --cmap-radius: 14px;

  position: relative;
  width: 100%;
  /* Вграден в лендинга секцията няма оразмерен родител, затова height:100%
     пада до auto и важи min-height. 420 px при широк контейнер (1440) даваше
     твърде нисък кадър — виждаше се само средата на брега. */
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  background: linear-gradient(180deg, #8dc6e8 0%, #c9e3f0 45%, #e6f1f6 100%);
  font-family: "Onest", "Segoe UI", system-ui, sans-serif;
  color: var(--cmap-ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.cmap *,
.cmap *::before,
.cmap *::after {
  box-sizing: border-box;
}

.cmap canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  /* J (Кирил): ЕДИН пръст мести картата. Родителят .cmap е `pan-y` (за да
     не заяжда страницата върху легендата и етикетите), но САМОТО ПЛАТНО
     трябва да получи вертикалния жест — иначе браузърът го взима за скрол
     и камерата не помръдва (измерено: целта не се променяше при влачене).
     Скрол капанът се решава с тавана 72svh и с хапчето „↓ Хотелите". */
  touch-action: none;
}

.cmap__webgl,
.cmap__labels {
  position: absolute;
  inset: 0;
}

.cmap__labels {
  pointer-events: none;
  overflow: hidden;
}

.cmap__labels > * {
  pointer-events: auto;
}

/* ---------------- Зареждане ---------------- */

.cmap__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(180deg, #06345f 0%, #0b4f7d 60%, #1b7fa6 100%);
  color: #fff;
  z-index: 40;
  transition: opacity 0.6s ease;
}

.cmap__loader[hidden] {
  display: none;
}

.cmap__loader--out {
  opacity: 0;
  pointer-events: none;
}

.cmap__loader-title {
  font-family: "Unbounded", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 24px);
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0 18px;
}

.cmap__loader-bar {
  width: min(260px, 60%);
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.cmap__loader-fill {
  height: 100%;
  width: 10%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cmap-orange), var(--cmap-orange-lt));
  transition: width 0.35s ease;
}

/* ---------------- Етикети на хотели / курорти ---------------- */

.cmap__label {
  --cmap-lift: 0px;
  position: relative;
  transform: translate(-50%, -100%);
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  will-change: opacity, transform;
  transition: opacity 0.22s ease;
}

/* `--cmap-lift` се задава от declutter-а: вдига етикета над зает съсед,
   вместо да го скрива (северните курорти падат на 10–15 px един от друг).
   Стои на вътрешна обвивка, защото CSS2DRenderer пише inline transform
   върху корена при всеки кадър и би го изтрил. */
.cmap__lift {
  display: block;
  position: relative;
  transform: translateY(var(--cmap-lift));
}

/* когато етикетът е повдигнат, тънка линия-водач го свързва с точката */
.cmap__lift::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: calc(-1 * var(--cmap-lift));
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.35));
  border-radius: 1px;
  pointer-events: none;
}

/* Появата/скриването в declutter-а е ПЛАВНО: само прозрачност изглежда като
   мигане при сливане на съседни балони, затова се свива и мащабът. */
.cmap__label--hidden {
  opacity: 0;
  pointer-events: none;
}

.cmap__label--hidden .cmap__card {
  transform: scale(0.88);
}

.cmap__card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 112px;
  max-width: 215px;
  padding: 8px 12px 9px;
  border-radius: 18px;
  background: var(--cmap-panel);
  box-shadow: 0 8px 0 rgba(5, 39, 89, 0.1), 0 12px 28px rgba(5, 39, 89, 0.2);
  border: 2px solid #fff;
  /* ръстът тръгва от опашката, която сочи точката на картата */
  transform-origin: 50% 100%;
  animation: cmap-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
}

.cmap__label:hover .cmap__card,
.cmap__label:focus-visible .cmap__card {
  transform: translateY(-3px) scale(1.045);
}

@keyframes cmap-pop {
  from { transform: translateY(8px) scale(0.72); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.cmap__card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 3px;
  background: var(--cmap-panel);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.cmap__name {
  font-family: "Unbounded", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.005em;
  color: var(--cmap-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmap__price {
  font-weight: 700;
  font-size: 15px;
  color: var(--cmap-orange);
  letter-spacing: -0.01em;
}

/* G3 (Кирил, рунд G): БЕЗ nowrap. Тъкмо той изкарваше дългата бележка
   („2-ма/13.06 - 5 нощ. ULTRA ALL INCL" при МПМ АРСЕНА) извън бялото поле
   на картичката. В балона на курорта редът е къс и пренасянето не личи. */
.cmap__meta {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--cmap-ink-soft);
  overflow-wrap: anywhere;
}

.cmap__badges {
  display: flex;
  flex-wrap: wrap;      /* G3: значките се пренасят, не разпъват картичката */
  gap: 4px;
  align-items: center;
  margin-top: 2px;
  flex-wrap: wrap;
}

.cmap__omv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 4px;
  border-radius: 999px;
  background: var(--cmap-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* Логото е бял текст + зелен символ — рисувано за ТЪМЕН фон. Затова стои
   директно върху тъмносиньото на значката, без бяло квадратче отзад
   (на бял фон „OMV" изчезва). Съотношение ~3.5:1 → ширината е auto. */
.cmap__omv img {
  display: block;
  height: 15px;
  width: auto;
  flex: 0 0 auto;
}

.cmap__omv b {
  color: var(--cmap-green);
  font-weight: 700;
}

/* в панела има повече място — значката е малко по-едра и четима */
.cmap__panel-body .cmap__omv {
  font-size: 11px;
  padding: 3px 8px 3px 6px;
  gap: 5px;
}

.cmap__panel-body .cmap__omv img {
  height: 17px;
}

.cmap__bf {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: #11161c;
  color: #fff;
  font-family: "Unbounded", sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
}

.cmap__stars {
  color: var(--cmap-orange-lt);
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* --- балонът на мястото: звездата на картата --- */

.cmap__card--resort {
  min-width: 142px;
  max-width: 220px;
  gap: 4px;
  padding: 9px 12px 10px;
  background: linear-gradient(165deg, #0a4a9c 0%, var(--cmap-navy) 100%);
  border-color: #fff;
  box-shadow: 0 8px 0 rgba(3, 18, 41, 0.22), 0 14px 32px rgba(3, 18, 41, 0.4);
}

.cmap__card--resort::after {
  background: var(--cmap-navy);
  border-color: #fff;
}

.cmap__card--resort .cmap__name {
  color: #fff;
  font-size: 12.5px;
}

.cmap__card--resort .cmap__meta {
  color: rgba(255, 255, 255, 0.66);
}

/* ОТСТЪПКАТА: най-силният елемент след името — тя продава. */
.cmap__disc {
  align-self: flex-start;
  padding: 3px 9px 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff7a1a 0%, #ffc93c 100%);
  color: #2a1402;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(3, 18, 41, 0.28);
}

/* редът с логото на OMV + броя хотели */
.cmap__omvrow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cmap__count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

/* „от 540 €" в балона */
.cmap__rprice {
  font-weight: 700;
  font-size: 14px;
  color: var(--cmap-orange-lt);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* прагът за ваучера — вторичен, тих ред */
.cmap__vmin {
  font-size: 9.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.cmap__fcard .cmap__vmin,
.cmap__item .cmap__vmin {
  color: var(--cmap-ink-soft);
  white-space: normal;
}

/* чипът с отстъпката в картичките и в списъка */
.cmap__discchip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff7a1a 0%, #ffc93c 100%);
  color: #2a1402;
  font-family: "Unbounded", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* застъпени кръгли снимки — покана да се разгледа */
.cmap__thumbs {
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.cmap__thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: #dbe6ee;
  margin-right: -7px;
  box-shadow: 0 2px 5px rgba(3, 18, 41, 0.35);
}

.cmap__thumb:last-child {
  margin-right: 0;
}

/* подсказката „Виж хотелите" — само при посочване */
.cmap__hinttext {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--cmap-orange-lt);
  white-space: nowrap;
  transition: max-height 0.18s ease, opacity 0.18s ease;
}

.cmap__label:hover .cmap__hinttext,
.cmap__label:focus-visible .cmap__hinttext,
.cmap__label--open .cmap__hinttext {
  max-height: 16px;
  opacity: 1;
}

/* посочване: балонът се вдига и сянката става по-плътна */
.cmap__label:hover .cmap__card--resort,
.cmap__label:focus-visible .cmap__card--resort {
  box-shadow: 0 10px 0 rgba(3, 18, 41, 0.26), 0 18px 40px rgba(3, 18, 41, 0.5);
}

/* отвореното място е подчертано, останалите леко избледняват */
.cmap__label--open .cmap__card--resort {
  border-color: var(--cmap-orange-lt);
  box-shadow: 0 10px 0 rgba(3, 18, 41, 0.26), 0 16px 38px rgba(255, 122, 26, 0.45);
}

/* Докато един курорт е отворен, ВСИЧКИ останали балони и щитове изчезват
   (Кирил, рунд 3): при простото избледняване те лежаха върху картичките и
   се четеше каша. */
.cmap__label--away {
  opacity: 0;
  pointer-events: none;
}

/* Отвореният балон се свива до лента: име + отстъпка + затваряне. Останалото
   съдържание остава в DOM-а, само се скрива — връщането е мигновено. */
.cmap__card--header {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 300px;
  padding: 6px 34px 7px 12px;
  border-radius: 14px;
}

.cmap__card--header .cmap__omvrow,
.cmap__card--header .cmap__rprice,
.cmap__card--header .cmap__meta,
.cmap__card--header .cmap__vmin,
.cmap__card--header .cmap__thumbs,
.cmap__card--header .cmap__badges,
.cmap__card--header .cmap__hinttext {
  display: none !important;
}

.cmap__card--header .cmap__name {
  font-size: 12.5px;
  max-width: 180px;
}

.cmap__card--header .cmap__disc {
  font-size: 11.5px;
  padding: 2px 7px 3px;
}

.cmap__card-close {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.cmap__card-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* СБИТ вид (общ изглед): балоните са много и се четат от един поглед —
   само име, отстъпка, OMV ред. Снимките и прагът отпадат в JS. */
.cmap__card--compact {
  min-width: 0;
  max-width: 190px;
  gap: 3px;
  padding: 7px 10px 8px;
}

.cmap__card--compact .cmap__name { font-size: 11.5px; }
.cmap__card--compact .cmap__disc { font-size: 11.5px; padding: 2px 7px 3px; }
.cmap__card--compact .cmap__omv { font-size: 9px; padding: 1px 5px 1px 3px; }
.cmap__card--compact .cmap__omv img { height: 12px; }
.cmap__card--compact .cmap__count { font-size: 10px; }

/* слят балон на няколко съседни курорта („Албена · Балчик · Кранево") */
.cmap__card--cluster {
  max-width: 250px;
}

.cmap__card--cluster .cmap__name {
  white-space: normal;
  line-height: 1.3;
}

/* Място БЕЗ хотели с ваучер: малка, спокойна кремава таблетка само с името.
   Чете се като география, не като оферта (Кирил). */
.cmap__card--quiet {
  min-width: 0;
  max-width: 180px;
  padding: 4px 10px 5px;
  border-radius: 12px;
  background: rgba(252, 248, 238, 0.94);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 0 rgba(3, 18, 41, 0.12), 0 7px 16px rgba(3, 18, 41, 0.22);
}

.cmap__card--quiet .cmap__name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cmap-navy);
}

.cmap__card--quiet::after {
  background: rgba(252, 248, 238, 0.94);
  border-color: rgba(255, 255, 255, 0.95);
}

/* На телефона балонът е по-тесен — екранът е 360-490 px широк. */
@media (max-width: 768px) {
  .cmap__card--resort { max-width: 170px; }
  .cmap__disc { font-size: 12px; }
  .cmap__thumb { width: 19px; height: 19px; }
}

/* ---------------- Щитове на пътищата ---------------- */

.cmap__shield {
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffb347;
  border: 2px solid #fff;
  color: #3b2300;
  font-family: "Unbounded", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(5, 39, 89, 0.25);
}

.cmap__label--road {
  cursor: default;
}

/* ---------------- Ветрило с картички на хотелите ---------------- */

/* Слоят лежи върху платното; само картичките хващат мишката, за да може
   картата да се влачи между тях. */
.cmap__fan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.cmap__fan-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.cmap__fan-line {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(5, 39, 89, 0.35));
}

/* G4 (Кирил, рунд G): снимката е ГОЛЯМА — отгоре, през цялата ширина, 16:10.
   Картичката е колона: снимка → текст. G3: нищо не излиза извън нея. */
.cmap__fcard {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 208px;
  overflow: hidden;           /* G3: пазачът срещу всяко преливане */
  border-radius: 14px;
  background: var(--cmap-panel);
  border: 2px solid #fff;
  box-shadow: 0 6px 0 rgba(5, 39, 89, 0.1), 0 12px 26px rgba(5, 39, 89, 0.24);
  pointer-events: auto;
  cursor: pointer;
  /* влизането е със стъпало (--cmap-delay), общо под 300 ms */
  animation: cmap-fan-in 0.24s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: var(--cmap-delay, 0ms);
  transition: box-shadow 0.18s ease;
}

.cmap__fcard:hover,
.cmap__fcard:focus-visible {
  box-shadow: 0 8px 0 rgba(5, 39, 89, 0.12), 0 16px 32px rgba(5, 39, 89, 0.3);
  outline: none;
}

@keyframes cmap-fan-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.74); }
  to   { opacity: 1; }
}

/* снимката: цялата ширина, 16:10; значките лежат в ъглите ѝ */
.cmap__fcard-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #dbe6ee;   /* неутралното поле при липсваща/счупена снимка */
}

.cmap__fcard-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* чипът с отстъпката — горе вляво върху снимката */
.cmap__fcard-media .cmap__discchip {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  max-width: calc(100% - 62px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* печатът BLACK 26 — горе вдясно върху снимката */
.cmap__fcard-media .cmap__bf {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

.cmap__fcard-body {
  min-width: 0;            /* G3: иначе дългият текст разпъва колоната */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px 8px;
}

/* G3: всеки текстов ред се пренася ВЪТРЕ в картичката. Дългите думи и
   адреси се чупят, вместо да излизат (видяно: „2-ма/13.06 - 5 нощ. ULTRA
   ALL INCL" излизаше извън бялото поле на МПМ АРСЕНА). */
.cmap__fcard-body > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cmap__fcard-name {
  font-family: "Unbounded", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.22;
  color: var(--cmap-navy);
  /* името може да е дълго: до два реда, после многоточие */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cmap__fcard-price {
  font-weight: 700;
  font-size: 14px;
  color: var(--cmap-orange);
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .cmap__fcard { animation: none; }
}

/* ---------------- Лента с хотелите (F11) ---------------- */

/* Кирил (рунд 4): вертикалната колона вдясно отпадна — покриваше сушата и
   побираше ~3 картички. Хотелите на отворения курорт сега са в ХОРИЗОНТАЛНА
   ЛЕНТА най-долу в картата, над морето (морето е долу в изгледа по
   подразбиране). Картичките се превъртат настрани: колело, влачене,
   стрелки ‹ › и scroll-snap. Фонът е като на легендата — полупрозрачно
   тъмносиньо с размиване, закръглено само горе. */
.cmap__side {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  border-radius: var(--cmap-radius) var(--cmap-radius) 0 0;
  background: linear-gradient(180deg, rgba(6, 32, 70, 0.78) 0%, rgba(4, 24, 54, 0.9) 100%);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 -10px 34px rgba(3, 18, 41, 0.38);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: auto;
  overflow: hidden;
}

.cmap__side--on {
  display: flex;
  animation: cmap-side-in 0.24s ease both;
}

@keyframes cmap-side-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; }
}

/* тънкият ред със заглавието и × — над картичките, подравнен вляво */
.cmap__side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px 0 14px;
  background: none;
}

.cmap__side-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(3, 18, 41, 0.6);
}

.cmap__side-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.cmap__side-close:hover { background: rgba(255, 255, 255, 0.32); }

/* стрелките стоят ОТСТРАНИ на лентата, върху нея */
.cmap__side-body {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
}

.cmap__side-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 2px 12px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  cursor: grab;
}

.cmap__side-list--drag {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.cmap__side-list::-webkit-scrollbar { height: 6px; }
.cmap__side-list::-webkit-scrollbar-track { background: transparent; }
.cmap__side-list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
}

.cmap__side-arr {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 26px;
  height: 26px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 39, 89, 0.78);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.cmap__side-arr:hover { background: var(--cmap-navy); }
.cmap__side-arr--prev { left: 4px; }
.cmap__side-arr--next { right: 4px; }

.cmap__side-arr--off {
  opacity: 0;
  pointer-events: none;
}

/* В ЛЕНТАТА картичката е по-широка, отколкото висока, за да стои лентата
   ниско (~130-150 px на компютър) и да не покрива картата. */
/* G4: в лентата картичката е със същата голяма снимка — само малко
   по-широка, за да остане текстът под нея на два-три реда. */
.cmap__fcard--inpanel {
  position: relative;
  flex: 0 0 auto;
  width: 212px;
  padding: 0;
  transform: none !important;
  animation-duration: 0.18s;
  scroll-snap-align: start;
}

/* В ЛЕНТАТА снимката е малко по-ниска (16:9) и текстът по-плътен, за да
   остане лентата в 230-260 px на компютър — иначе изяждаше половината карта. */
.cmap__side-list .cmap__fcard-media {
  aspect-ratio: 16 / 9;
}

.cmap__side-list .cmap__fcard-body {
  gap: 0;
  padding: 5px 8px 6px;
}

.cmap__side-list .cmap__fcard-name {
  -webkit-line-clamp: 1;
  font-size: 11px;
}

.cmap__side-list .cmap__fcard-price {
  font-size: 13px;
}

.cmap__side-list .cmap__stars {
  font-size: 8.5px;
  line-height: 1.1;
}

.cmap__side-list .cmap__meta,
.cmap__side-list .cmap__vmin {
  font-size: 9.5px;
  line-height: 1.2;
}

.cmap__side-list .cmap__badges {
  gap: 3px;
}

/* Последната картичка не бива да се „залепва" за ръба — иначе изглежда
   срязана и не се разбира, че лентата продължава. */
.cmap__side-list::after {
  content: "";
  flex: 0 0 4px;
}

/* ---------------- Панел на хотела (десктоп) ---------------- */

.cmap__panel {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 310px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  border-radius: var(--cmap-radius);
  background: var(--cmap-panel);
  box-shadow: var(--cmap-shadow);
  border: 1px solid rgba(5, 39, 89, 0.08);
  z-index: 25;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.cmap__panel--open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cmap__panel-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: #cfe0ea;
  border-radius: var(--cmap-radius) var(--cmap-radius) 0 0;
  display: block;
}

.cmap__panel-body {
  padding: 13px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cmap__panel-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--cmap-navy);
}

.cmap__panel-city {
  font-size: 12.5px;
  color: var(--cmap-ink-soft);
}

.cmap__panel-price {
  font-weight: 700;
  font-size: 25px;
  color: var(--cmap-orange);
  letter-spacing: -0.015em;
}

.cmap__panel-terms {
  font-size: 12px;
  color: var(--cmap-ink-soft);
  margin-top: -4px;
}

.cmap__cta {
  display: block;
  margin-top: 6px;
  padding: 11px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cmap-orange), #ff9838);
  color: #fff;
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(255, 122, 26, 0.38);
}

.cmap__cta:hover {
  filter: brightness(1.06);
}

.cmap__close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 30, 50, 0.55);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.cmap__close:hover {
  background: rgba(10, 30, 50, 0.78);
}

/* ---------------- Подсказки / легенда ---------------- */

.cmap__hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(5, 39, 89, 0.82);
  color: #fff;
  font-size: 12.5px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cmap__hint--show {
  opacity: 1;
}

.cmap__legend {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 10px 13px;
  border-radius: var(--cmap-radius);
  background: rgba(5, 39, 89, 0.82);
  color: #fff;
  box-shadow: var(--cmap-shadow);
  z-index: 20;
  max-width: 250px;
}

.cmap__legend-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 3px;
}

.cmap__legend-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
}

/* ---------------- Долен панел (телефон) ---------------- */

.cmap__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76%;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(5, 39, 89, 0.26);
  z-index: 28;
  transform: translateY(calc(100% - 108px));
  transition: transform 0.3s cubic-bezier(0.22, 0.75, 0.3, 1);
  touch-action: none;
}

.cmap__sheet--half {
  transform: translateY(45%);
}

.cmap__sheet--full {
  transform: translateY(0);
}

.cmap__sheet-grip {
  flex: 0 0 auto;
  padding: 9px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: grab;
}

.cmap__sheet-grip::before {
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: #ccd6df;
}

.cmap__sheet-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--cmap-navy);
}

.cmap__sheet-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 2px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmap__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #f4f7f9;
  border: 1px solid transparent;
  text-align: left;
  width: 100%;
  max-width: 100%;
  /* редът не се свива по височина (иначе текстът се реже) и не се разтяга
     по ширина от дълго име — цената трябва да остане в екрана при 390 px */
  flex: 0 0 auto;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.cmap__item--active {
  border-color: var(--cmap-orange);
  background: #fff6ee;
}

.cmap__item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmap__item-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--cmap-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmap__item-city {
  font-size: 11px;
  color: var(--cmap-ink-soft);
}

.cmap__item-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  white-space: nowrap;
}

.cmap__item-price {
  font-weight: 700;
  font-size: 15px;
  color: var(--cmap-orange);
}

/* какво значи цената („на човек / нощ" или „5 нощ. · 2 възр.") */
.cmap__item-note {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--cmap-ink-soft);
  white-space: nowrap;
}

/* ---------------- Резервен изглед ---------------- */

.cmap--fallback {
  min-height: 0;
  background: #f4f7f9;
}

.cmap__fallback {
  display: flex;
  flex-direction: column;
}

.cmap__poster {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
  background: linear-gradient(180deg, #8dc6e8, #1b7fa6);
}

.cmap__fallback-head {
  padding: 16px 16px 4px;
}

.cmap__fallback-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--cmap-navy);
}

.cmap__fallback-sub {
  font-size: 13px;
  color: var(--cmap-ink-soft);
  margin-top: 4px;
}

.cmap__list {
  list-style: none;
  margin: 0;
  padding: 12px 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.cmap__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(5, 39, 89, 0.1);
  text-decoration: none;
  color: inherit;
}

.cmap__list a:hover {
  box-shadow: 0 6px 20px rgba(5, 39, 89, 0.18);
}

/* ---------------- Debug overlay ---------------- */

.cmap__debug {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: 44%;
  max-height: 44%;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(8, 16, 26, 0.84);
  color: #9fe6b0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  z-index: 50;
}

.cmap__debug--err {
  color: #ff9d9d;
}

@media (max-width: 768px) {
  /* На телефон кадърът е портретен, но под него трябва да остане място за
     долния панел със списъка — затова не целият екран. */
  .cmap {
    min-height: 60vh;
  }

  .cmap__panel {
    display: none;
  }

  .cmap__legend {
    left: 10px;
    top: 10px;
    padding: 8px 11px;
    max-width: 64%;
  }

  .cmap__legend-title {
    font-size: 12px;
  }

  .cmap__legend-sub {
    font-size: 10.5px;
  }

  .cmap__hint {
    bottom: auto;
    top: 10px;
    right: 10px;
    left: auto;
    transform: none;
    font-size: 11px;
    padding: 6px 11px;
  }

  .cmap__card {
    min-width: 92px;
    max-width: 165px;
    padding: 5px 8px 6px;
  }

  .cmap__name {
    font-size: 10.5px;
  }

  .cmap__price {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cmap__label,
  .cmap__panel,
  .cmap__sheet {
    transition: none;
  }
}

/* бутонът за затваряне на долния панел (телефон) */
.cmap__sheet-grip {
  position: relative;
}

.cmap__sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 39, 89, 0.1);
  color: var(--cmap-navy);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------- Тематичен фон под картата (кубовете) ----------------
   „Лятно пътуване до морето с гориво": много светъл градиент пясък→небе,
   мека вълна долу и пунктирен път с дребни иконки (капка, слънце, палма,
   кола). Всичко е inline SVG в CSS — без външни картинки.

   ВАЖНО: обхватът е САМО страницата с картата (.cmap-page). Черният петък
   и другите кампании не го виждат. Контрастът е нисък: кубовете и текстът
   остават напълно четими. */

.cmap-page .cmap-cubes-bg {
  position: relative;
  isolation: isolate;
  padding: 28px 0 36px;
  background:
    /* вълна долу */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='90' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 54c90-20 180-20 270 0s180 20 270 0 180-20 270 0 180 20 270 0 120-14 120-14V90H0z' fill='%23bfe3f2' fill-opacity='.30'/%3E%3Cpath d='M0 68c100-18 200-18 300 0s200 18 300 0 200-18 300 0 200 18 300 0V90H0z' fill='%23a9d9ee' fill-opacity='.26'/%3E%3C/svg%3E")
      bottom center / 100% 90px no-repeat,
    /* пунктирен път с иконки */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='260' viewBox='0 0 1100 260'%3E%3Cg fill='none' stroke='%23f0a768' stroke-opacity='.34' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M-20 196C140 196 170 92 330 92s190 104 350 104 190-104 350-104h90' stroke-dasharray='14 16'/%3E%3C/g%3E%3Cg fill='%23e8a06a' fill-opacity='.30'%3E%3Cpath d='M190 150c0 0-13 15-13 24a13 13 0 0 0 26 0c0-9-13-24-13-24z'/%3E%3Ccircle cx='520' cy='54' r='13'/%3E%3Cg stroke='%23e8a06a' stroke-opacity='.30' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M520 28v-9M520 89v9M494 54h-9M555 54h9M502 36l-7-7M538 72l7 7M538 36l7-7M502 72l-7 7'/%3E%3C/g%3E%3Cpath d='M846 160c-10-22 4-40 22-40s30 16 24 34c-6-14-16-20-24-20s-16 8-22 26z'/%3E%3Crect x='864' y='150' width='5' height='44' rx='2'/%3E%3Cpath d='M300 206h40l10-14h26l8 14h18a7 7 0 0 1 7 7v10h-9a11 11 0 0 0-22 0h-34a11 11 0 0 0-22 0h-22z'/%3E%3C/g%3E%3C/svg%3E")
      center 26px / 1100px 260px no-repeat,
    /* градиент пясък → небе */
    linear-gradient(180deg, #fdfaf3 0%, #f6f9fb 46%, #eef6fb 100%);
}

/* Фонът НИКОГА не минава над съдържанието. */
.cmap-page .cmap-cubes-bg > * {
  position: relative;
  z-index: 1;
}

/* На телефон пътят с иконките е излишен шум — остават градиентът и вълната. */
@media (max-width: 768px) {
  .cmap-page .cmap-cubes-bg {
    padding: 18px 0 24px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='70' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40c100-16 200-16 300 0s200 16 300 0 200-16 300 0 200 16 300 0V70H0z' fill='%23b3dcee' fill-opacity='.26'/%3E%3C/svg%3E")
        bottom center / 100% 70px no-repeat,
      linear-gradient(180deg, #fdfaf3 0%, #eef6fb 100%);
  }
}

/* ================ F5: имената на местата при отворен курорт ===============
   Кирил (рунд 4): докато един курорт е отворен, изчезваха ВСИЧКИ етикети —
   и обикновените имена (Варна, Балчик, Албена). Те са географската
   ориентация и трябва да се четат винаги.
     --away  = балон С хотели, който не е отвореният → скрива се (както досега)
     --mute  = обикновено име на място → остава, само притъмнява
     --faded = --mute, който се застъпва с картичките → ~0.35, но НЕ изчезва */
.cmap__label--mute .cmap__card {
  opacity: 0.78;
  filter: saturate(0.9);
}

/* Свит до името: всичко освен заглавието се скрива. Таблетката става малка
   и спокойна — като място без хотели, но запазва тъмния си фон, за да се
   чете над терена. */
.cmap__card--nameonly {
  min-width: 0;
  padding: 5px 10px 6px;
  gap: 0;
}

.cmap__card--nameonly > *:not(.cmap__name) {
  display: none !important;
}

.cmap__card--nameonly .cmap__name {
  font-size: 11px;
}

.cmap__label--faded {
  opacity: 0.35;
}

.cmap__label--faded .cmap__card {
  opacity: 1;
}

/* ================ F1: синята лента и преходът към картата =================
   Лентата с категориите е скрита на страниците на кампаниите
   (css/campaign.css: .head-nav-wrap{display:none}). На страницата с картата
   тя ТРЯБВА да се вижда: от нейното синьо тръгва градиентът, който слиза
   до мъглата на върха на картата и прави прехода безшевен.
   Обхватът е САМО .cmap-page — другите кампании не се променят. */
.cmap-page .head-nav-wrap {
  display: block;
  /* G8: падащите менюта трябва да се ОТВАРЯТ НАД картата. Лентата е по-рано
     в документа, а .cmap е position:relative — без свой слой картата се
     рисува отгоре. Вдигаме цялата лента над всичко в картата
     (най-високото там е 50: .cmap__cube-* и подобни). */
  position: relative;
  z-index: 60;
}

/* Самото падащо меню е z-index:6 в css/header_new.css — вътре в новия слой
   това стига, но го вдигаме и вътрешно, за да е над картичките на хотелите. */
.cmap-page .head-nav-wrap .dropdown-content,
.cmap-page .head-nav-wrap .dropdown-content-r {
  z-index: 61;
}

/* Заглавието, подзаглавието и въздухът над картата лежат на градиента.
   Начало: ТОЧНО синьото на лентата (#2871b7, css/header_new.css:265).
   Край:   цветът на мъглата на върха на платното — измерен от снимка на
   платното (rgb(143,205,240) = #8fcdf0; в campaign_map.js фонът е #8dc6e8,
   но тонмапингът го изсветлява). Затова няма шев нито горе, нито долу.

   .cmap-hero е обвивката в демото; на живата страница заглавието и
   подзаглавието са направо в тялото (h1.campaign-page-head +
   .campaign-intro от form_campaign_landing.php), затова градиентът се
   слага и на обвивката, която CampaignMapAssets() им добавя. */
.cmap-page .cmap-hero {
  /* G7: заглавната зона стои НАД картата — балончето на цистерната и
     подсказката ѝ излизат надолу и иначе ги режеше платното. */
  position: relative;
  z-index: 30;
  background: linear-gradient(180deg,
    #2871b7 0%,
    #3f8cc9 26%,
    #63aedd 55%,
    #8fcdf0 88%,
    #8fcdf0 100%);
  padding-bottom: 14px;
}

/* F10: цистерната е float:right — без това заглавната зона не я
   „съдържа" и тя пада върху картата. clearfix, а не overflow:hidden,
   защото балончето и подсказката излизат извън нея. */
.cmap-page .cmap-hero::after {
  content: "";
  display: table;
  clear: both;
}

/* Текстът вече е върху тъмносиньо горе и светла мъгла долу — бял, с мека
   сянка, за да се чете и на двата края. Това решава и тъмната схема:
   заглавието беше тъмносиньо на тъмно. */
.cmap-page .cmap-hero .page__title,
.cmap-page .cmap-hero h1,
.cmap-page .cmap-hero .campaign-page-head,
.cmap-page .cmap-hero .rlanding-page-head {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(3, 24, 56, 0.55), 0 1px 2px rgba(3, 24, 56, 0.45);
}

.cmap-page .cmap-hero .page__sub,
.cmap-page .cmap-hero .campaign-intro,
.cmap-page .cmap-hero .campaign-intro *,
.cmap-page .cmap-hero .page__kicker {
  color: #eaf5fd;
  text-shadow: 0 1px 6px rgba(3, 24, 56, 0.5);
}

.cmap-page .cmap-hero .page__kicker {
  color: #ffd2a8;
}

/* Тъмна схема: браузърът обръща цветовете на сайта, но градиентът е наш —
   текстът остава светъл, затова само подсилваме сянката. */
@media (prefers-color-scheme: dark) {
  .cmap-page .cmap-hero .page__title,
  .cmap-page .cmap-hero h1,
  .cmap-page .cmap-hero .campaign-page-head,
  .cmap-page .cmap-hero .rlanding-page-head,
  .cmap-page .cmap-hero .page__sub,
  .cmap-page .cmap-hero .campaign-intro,
  .cmap-page .cmap-hero .campaign-intro *,
  .cmap-page .cmap-hero .page__kicker {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
  }
}

/* Картата започва ТОЧНО там, където свършва градиентът: без бял ръб между
   двете. Закръглението остава, но горният фон минава под него. */
.cmap-page .cmap-hero + #cmap,
.cmap-page .cmap-hero + .cmap {
  margin-top: 0;
}

/* ================ F8: решетката с кубовете в средата =====================
   На живата страница на Черния петък решетката е в <center><div
   class="wrapper-centered">, което я центрира (text-align:-webkit-center).
   Страницата с картата няма такъв родител и .citems-wrapper{max-width:80%}
   лепнеше вляво. Центрираме я изрично, без да пипаме другите кампании. */
.cmap-page .citems-wrapper,
.cmap-page .banners-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: min(80%, 1320px);
}

@media (max-width: 768px) {
  .cmap-page .citems-wrapper,
  .cmap-page .banners-wrapper {
    max-width: 98%;
  }
}

/* ================ F6: кубът светва след превъртането ====================
   Кликът по картичка на хотел превърта страницата до неговия куб (виж
   scrollToCube в campaign_map.js). Класът стои ~1.5 s и сам пада.
   Правилото е ГЛОБАЛНО (не под .cmap), защото решетката е извън картата;
   обхватът пази .cmap-cube-hit, който слага само картата. */
.cc-card.cmap-cube-hit {
  animation: cmap-cube-hit 1.5s ease-out 1;
}

@keyframes cmap-cube-hit {
  0%   { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.75), 0 0 0 0 rgba(255, 179, 71, 0); }
  35%  { box-shadow: 0 0 0 7px rgba(255, 122, 26, 0.45), 0 10px 34px rgba(255, 122, 26, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0), 0 0 0 0 rgba(255, 179, 71, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-card.cmap-cube-hit {
    animation: none;
    box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.6);
  }
}

/* ================ F10: цистерната с раздаденото гориво ===================
   Стои вдясно в заглавната зона, ВЪРХУ градиента — не покрива картата.
   На телефон се преобръща в тънка хоризонтална лента под подзаглавието. */
/* G7: автоцистерната е ХОРИЗОНТАЛНА — камионът стои над текста, а числата
   лежат на плътна тъмносиня плоча (на светлия край на градиента бялото
   върху стъкло не се четеше). */
.cmap-fuel {
  position: relative;
  float: right;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 234px;
  margin: 0 20px 8px 16px;
  padding: 7px 9px 9px;
  border-radius: 16px;
  background: rgba(4, 28, 62, 0.42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: "Onest", system-ui, sans-serif;
}

.cmap-fuel__tank {
  flex: 0 0 auto;
  width: 100%;
  height: 62px;
  overflow: visible;
  filter: drop-shadow(0 5px 12px rgba(3, 24, 56, 0.45));
}

/* камионът „пристига" отстрани при първо виждане */
.cmap-fuel--drive .cmap-fuel__tank {
  animation: cmap-truck-in 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes cmap-truck-in {
  from { transform: translateX(-130%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* колелата се въртят, докато камионът влиза */
.cmap-fuel--drive .cmap-fuel__wheels {
  animation: cmap-wheels 0.9s linear both;
  transform-origin: center;
}

@keyframes cmap-wheels {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Течността се вдига с transform (без преоформяне). Вълната ѝ се люлее
   бавно настрани — живо, но тихо. */
.cmap-fuel__liquid {
  transition: transform 0.2s linear;
}

.cmap-fuel__wave {
  animation: cmap-fuel-wave 3.6s ease-in-out infinite alternate;
}

@keyframes cmap-fuel-wave {
  from { transform: translate(6px, 0); }
  to   { transform: translate(26px, 0); }
}

/* ПЛОЧАТА с числата: плътно тъмносиньо, за да се чете и върху светлата
   част на градиента (Кирил: „по-контрастно, по-бяло, по-едро"). */
.cmap-fuel__info {
  min-width: 0;
  flex: 1 1 auto;
  padding: 7px 10px 8px;
  border-radius: 12px;
  background: rgba(3, 24, 56, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cmap-fuel__head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.cmap-fuel__cap {
  flex: 1 1 auto;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: none;      /* вече е на плътен фон */
}

.cmap-fuel__num {
  margin: 3px 0 2px;
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.05;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-shadow: none;
}

.cmap-fuel__goal {
  font-size: 11px;
  font-weight: 600;
  color: #ffc48a;
  text-shadow: none;
}

.cmap-fuel__help {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  color: #06284f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.cmap-fuel__help:hover { background: #fff; }

/* Подсказката — дълга, затова е широка и излиза наляво от цистерната. */
.cmap-fuel__tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 6;
  display: none;
  width: min(340px, 86vw);
  padding: 11px 13px;
  border-radius: 12px;
  background: #ffffff;
  color: #0d2235;
  box-shadow: 0 14px 34px rgba(5, 39, 89, 0.35);
  font-size: 11.5px;
  line-height: 1.45;
  text-shadow: none;
}

.cmap-fuel--tip .cmap-fuel__tip { display: block; }

.cmap-fuel__tip-h {
  display: block;
  margin-bottom: 4px;
  font-family: "Unbounded", sans-serif;
  font-size: 12px;
  color: var(--cmap-navy, #052759);
}

.cmap-fuel__tip p { margin: 0 0 6px; }
.cmap-fuel__tip p:last-child { margin-bottom: 0; color: #52687d; font-size: 10.5px; }

/* Минат етап: цистерната за миг прелива и се разклаща. */
.cmap-fuel--overflow .cmap-fuel__liquid {
  transform: translateY(0) !important;
}

.cmap-fuel--overflow .cmap-fuel__tank {
  animation: cmap-fuel-wobble 0.6s ease-in-out;
}

@keyframes cmap-fuel-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-4deg); }
  60%      { transform: rotate(3deg); }
}

/* Балончето „Напълнихме цистерната!" — показва се ~5 s. */
.cmap-fuel__bubble {
  position: absolute;
  top: calc(100% + 8px);
  right: 6px;
  /* G7: над картата — иначе платното го режеше на ръба на заглавната зона */
  z-index: 45;
  display: none;
  max-width: 262px;
  padding: 9px 26px 9px 12px;
  border-radius: 4px 14px 14px 14px;
  background: #fff;
  color: #0d2235;
  box-shadow: 0 12px 28px rgba(5, 39, 89, 0.34);
  font-size: 12px;
  line-height: 1.35;
  text-shadow: none;
}

.cmap-fuel__bubble--on {
  display: block;
  animation: cmap-fuel-pop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cmap-fuel-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.86); }
  to   { opacity: 1; }
}

.cmap-fuel__bubble-sub {
  display: block;
  margin-top: 2px;
  color: #52687d;
  font-size: 10.5px;
}

.cmap-fuel__bubble-x {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 39, 89, 0.1);
  color: #52687d;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .cmap-fuel__wave,
  .cmap-fuel__bubble--on,
  .cmap-fuel--overflow .cmap-fuel__tank {
    animation: none;
  }
  .cmap-fuel__liquid { transition: none; }
}

/* ТЕЛЕФОН: тънка хоризонтална мерилка под подзаглавието. */
@media (max-width: 768px) {
  .cmap-fuel {
    float: none;
    width: auto;
    margin: 2px 14px 12px;
    padding: 8px 10px;
    gap: 10px;
  }

  .cmap-fuel__tank {
    width: 100%;
    height: 46px;
  }

  .cmap-fuel__num { font-size: 21px; }
  .cmap-fuel__cap { font-size: 10.5px; }
  .cmap-fuel__info { padding: 6px 9px 7px; }

  .cmap-fuel__tip {
    left: 0;
    right: 0;
    width: auto;
  }

  .cmap-fuel__bubble {
    right: 0;
    left: 0;
    max-width: none;
  }
}

/* ================ G1: картата е през ЦЯЛАТА ширина =======================
   Кирил (рунд G): лявата страна на картата спираше на няколко сантиметра от
   ръба и там се виждаше шев между градиента и платното (измерено: фон
   rgb(131,191,227) до платно rgb(145,200,233)). Пълната ширина маха и
   двете — няма ръб, няма какво да се разминава.

   НЕ се ползва 100vw: при видима вертикална лента 100vw е по-широко от
   документа и се появява хоризонтална лента. Вместо това разтягаме със
   симетрични отрицателни полета спрямо родителя (calc(-50vw + 50%)), което
   се съобразява с ширината на СЪДЪРЖАНИЕТО, не на екрана.
   Заглавието си остава в нормалната колона. */
.cmap-page .cmap,
.cmap-page #cmap {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* при пълна ширина закръглените ъгли нямат смисъл */
  border-radius: 0;
}

/* Сянката под картата би хвърлила тъмна ивица в краищата при пълна ширина. */
.cmap-page #cmap {
  box-shadow: 0 18px 44px rgba(5, 39, 89, 0.18);
}

/* Хоризонталната лента се появява, ако нещо надвишава документа — пазим се
   на нивото на страницата, не само на картата. */
.cmap-page,
html.cmap-page {
  overflow-x: hidden;
}

/* ================ H2: вертикален екран ==================================
   Кирил (рунд H): на телефон камионът стоеше като голяма карта НАД кикера
   (~150 px) и легендата изяждаше половината карта. Сега:
     - мерилката е ТЪНКА ЛЕНТА (≤64 px) ПОД подзаглавието;
     - легендата е свита до един ред и се разгъва при докосване. */

/* --- тънката мерилка --- */
.cmap-fuel--slim {
  float: none;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: auto;
  max-height: 64px;
  margin: 2px 14px 14px;
  padding: 7px 10px;
}

.cmap-fuel--slim .cmap-fuel__tank {
  flex: 0 0 auto;
  width: 74px;
  height: 38px;
}

.cmap-fuel--slim .cmap-fuel__info {
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: none;    /* самата лента вече е тъмна */
}

.cmap-fuel--slim .cmap-fuel__head {
  gap: 6px;
}

.cmap-fuel--slim .cmap-fuel__cap {
  font-size: 10px;
  line-height: 1.2;
}

.cmap-fuel--slim .cmap-fuel__num {
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
}

.cmap-fuel--slim .cmap-fuel__goal {
  font-size: 10px;
}

/* подсказката и балончето излизат НАДОЛУ и заемат цялата ширина */
.cmap-fuel--slim .cmap-fuel__tip,
.cmap-fuel--slim .cmap-fuel__bubble {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
}

/* --- свитата легенда --- */
.cmap__legend--mini {
  max-width: calc(100% - 32px);
  padding: 7px 11px;
}

.cmap__legend--mini .cmap__legend-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
  font-size: 12px;
  white-space: nowrap;
}

/* свита: редът с обяснението е скрит; разгъната — се показва */
.cmap__legend--mini .cmap__legend-sub {
  display: none;
}

.cmap__legend--mini.cmap__legend--open .cmap__legend-sub {
  display: block;
  margin-top: 5px;
}

.cmap__legend--mini.cmap__legend--open .cmap__legend-title {
  margin-bottom: 0;
  white-space: normal;
}

.cmap__legend-i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.cmap__legend-i:hover { background: rgba(255, 255, 255, 0.36); }

/* ================ Рунд I: вертикален екран ==============================
   Кирил: на телефон, отдалечено, се побираше само ЕДИН балон — бяха твърде
   големи. На тесен екран балонът е само име + отстъпка, с малък шрифт и
   таван на ширината, за да минават повече през declutter-а. */
.cmap--portrait .cmap__card--resort {
  min-width: 0;
  max-width: 150px;
  padding: 5px 9px 6px;
  gap: 2px;
  border-width: 1.5px;
}

.cmap--portrait .cmap__card--resort .cmap__name {
  font-size: 12.5px;
  line-height: 1.2;
}

/* сбитият вид крие всичко освен името и отстъпката */
.cmap--portrait .cmap__card--compact .cmap__omvrow,
.cmap--portrait .cmap__card--compact .cmap__rprice,
.cmap--portrait .cmap__card--compact .cmap__meta,
.cmap--portrait .cmap__card--compact .cmap__vmin,
.cmap--portrait .cmap__card--compact .cmap__thumbs,
.cmap--portrait .cmap__card--compact .cmap__badges,
.cmap--portrait .cmap__card--compact .cmap__hinttext {
  display: none !important;
}

.cmap--portrait .cmap__card--compact .cmap__disc {
  padding: 2px 7px 3px;
  font-size: 11px;
}

/* отвореният балон пак е пълен — там подробностите трябват */
.cmap--portrait .cmap__label--open .cmap__card--resort {
  max-width: 200px;
}

/* I12: малка снимка най-вляво на всеки ред в мобилния списък. */
.cmap__item-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #dbe6ee;   /* неутрално поле при липсваща снимка */
}

.cmap__item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 400px) {
  .cmap__item-thumb { width: 56px; height: 56px; }
}

/* ================ I9: лентата със заглавието над решетката ===============
   Кирил: „Хотели с ваучер за гориво OMV" се губеше — бяла плоча на почти
   бял фон (css/campaign.css:207 .category-name{background:#fff}). Сега е
   плътно синьо с бял текст, през ЦЯЛАТА ширина на решетката.
   Обхватът е само .cmap-page — другите кампании остават както са. */
.cmap-page .hotel-grid-wrapper .category-name {
  display: block;
  width: 100%;
  margin: 18px 0 14px;
  padding: 13px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2871b7 0%, #184f86 100%);
  color: #ffffff;
  font-family: "Unbounded", "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 22px rgba(5, 39, 89, 0.26);
}

@media (max-width: 768px) {
  .cmap-page .hotel-grid-wrapper .category-name {
    padding: 11px 14px;
    font-size: 16px;
  }
}

/* ================ I11: плавен преход към секцията с кубовете =============
   Кирил: между картата (през цялата ширина) и фона на кубовете личеше рязък
   ръб. Секцията започва със същия цвят, какъвто е под картата, и чак след
   ~120 px минава към пясъчното си начало. */
.cmap-page .cmap-cubes-bg {
  background:
    /* прехвърлящият слой — най-отгоре, избледнява надолу */
    linear-gradient(180deg,
      #e6f1f6 0%,
      rgba(230, 241, 246, 0.72) 48px,
      rgba(230, 241, 246, 0) 150px),
    /* вълна долу */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='90' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 54c90-20 180-20 270 0s180 20 270 0 180-20 270 0 180 20 270 0 120-14 120-14V90H0z' fill='%23bfe3f2' fill-opacity='.30'/%3E%3Cpath d='M0 68c100-18 200-18 300 0s200 18 300 0 200-18 300 0 200 18 300 0V90H0z' fill='%23a9d9ee' fill-opacity='.26'/%3E%3C/svg%3E")
      bottom center / 100% 90px no-repeat,
    /* градиент пясък → небе, но тръгващ от цвета ПОД картата */
    linear-gradient(180deg, #eef6fb 0%, #fdfaf3 190px, #f6f9fb 54%, #eef6fb 100%);
}

@media (max-width: 768px) {
  .cmap-page .cmap-cubes-bg {
    background:
      linear-gradient(180deg,
        #e6f1f6 0%,
        rgba(230, 241, 246, 0.7) 36px,
        rgba(230, 241, 246, 0) 110px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='70' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40c100-16 200-16 300 0s200 16 300 0 200-16 300 0 200 16 300 0V70H0z' fill='%23b3dcee' fill-opacity='.26'/%3E%3C/svg%3E")
        bottom center / 100% 70px no-repeat,
      linear-gradient(180deg, #eef6fb 0%, #fdfaf3 150px, #eef6fb 100%);
  }
}

/* ================ I14: акцент върху ваучера за гориво ====================
   Кирил: ваучерът се четеше като дребния сив ред с условието. Сега е
   ЗАБЕЛЕЖИМ чип (тъмносиньо OMV + ярко зелена сума), малко по-едър от
   съседните чипове, а условието остава тих ред ПОД него — но четим. */
.cmap__omv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 9px;
  background: #0b2a5b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(3, 18, 41, 0.3);
}

.cmap__omv img {
  display: block;
  height: 13px;
  width: auto;
}

/* сумата е в ярко зелено — тя е наградата */
.cmap__omv b {
  color: #3fe08a;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Условието: по-тъмно сиво-синьо (контраст ≥ 4.5:1 на бяло), не бледо сиво. */
.cmap__fcard .cmap__vmin,
.cmap__item .cmap__vmin {
  color: #3d5468;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
}

/* В мобилния списък чипът стои в ЛЯВАТА колона, под името — така цената
   отдясно не се избутва извън екрана при 360 px. */
.cmap__item .cmap__omv {
  margin-top: 3px;
}

.cmap__item-main {
  min-width: 0;
}

@media (max-width: 400px) {
  .cmap__omv {
    padding: 3px 7px 3px 6px;
    font-size: 11px;
  }
  .cmap__omv img { height: 11px; }
}

/* I12/I14: редът в мобилния списък има ТРИ колони — снимка, текст, цена.
   Дясната не бива да нараства от дългата бележка („2-ма/13.06 - 5 нощ.
   ULTRA ALL INCL"): с nowrap тя изяждаше лявата и името оставаше „АСТЕ…".
   Затова бележката се пренася, а дясната колона има таван на ширината. */
.cmap__item-right {
  flex: 0 1 auto;
  max-width: 38%;
  white-space: normal;
}

.cmap__item-price {
  white-space: nowrap;
}

.cmap__item-note {
  white-space: normal;
  text-align: right;
  line-height: 1.25;
}

/* името има място за два реда, вместо да се реже след 4 букви */
.cmap__item-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.22;
}

.cmap__item-city {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* чипът и условието — под името, в лявата колона */
.cmap__item .cmap__omv {
  align-self: flex-start;
}

/* ================ I15/J: скрол капанът на телефон ======================
   Кирил: имаше позиция, в която картата запълваше екрана и страницата не
   можеше да се превърти до кубовете.
   I15 пробва кооперативни жестове (един пръст = страницата) — Кирил ги
   намери за много неудобни. J ги маха: ЕДИН пръст пак мести картата, а
   капанът се решава с ТАВАНА на височината (72svh) и с хапчето
   „↓ Хотелите", което води до решетката. */

/* Картата заема най-много ~72svh, за да се вижда ивица страница и да е
   ясно, че има накъде да се скролира. svh (без лентата на браузъра) с
   резерва vh за по-старите. */
@media (max-width: 768px) {
  .cmap-page #cmap,
  .cmap-page .cmap {
    max-height: 72vh;
    max-height: 72svh;
  }
}


/* хапчето „↓ Хотелите" — долу в средата на картата, само на телефон */
.cmap__tocubes {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 33;
  transform: translateX(-50%);
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(5, 39, 89, 0.9);
  color: #fff;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(3, 18, 41, 0.4);
  cursor: pointer;
}

.cmap__tocubes:hover { background: var(--cmap-navy); }

/* при отворен долен панел хапчето би останало под него — крием го */
.cmap__sheet ~ .cmap__tocubes { display: none !important; }

/* J: подсказката „два пръста" отпадна заедно с кооперативните жестове. */

/* ================ К11: заглавната зона от PHP (CampaignMapHero) ==========
   Кирил/Сашо 05.11.2026: .cmap-hero идва от сървъра (form_campaign_map.php).
   Градиентът е през ЦЯЛАТА ширина - със същата техника като #cmap (G1, без
   100vw); текстът е в колоната от 1320 px. <center> на сайта центрира текста
   по наследство - връщаме го вляво. */
.cmap-page .cmap-hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  text-align: left;
}

.cmap-page .cmap-hero__in {
  max-width: 1320px;
  margin: 0 auto;
}

.cmap-page .cmap-hero .page__head {
  padding: 26px 20px 20px;
}

.cmap-page .cmap-hero .page__kicker {
  font-family: "Onest", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.cmap-page .cmap-hero .page__title {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 3.4vw, 38px);
  line-height: 1.16;
  margin: 6px 0 8px;
  padding: 0;
  overflow-wrap: break-word;
}

.cmap-page .cmap-hero .page__sub {
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.5;
  max-width: 720px;
  margin: 0;
}

/* Между синята лента и градиента не бива да има ивица с фона на страницата:
   отстъпът на .wrapper-centered и бутонът „към сайта" отпадат САМО тук. */
.cmap-page .wrapper-centered {
  padding-top: 0;
}

.cmap-page .banners-wrapper {
  display: none;
}

@media (max-width: 768px) {
  .cmap-page .cmap-hero .page__head {
    padding: 16px 14px 12px;
  }
}