/*
Theme Name: Радея
Theme URI: https://radeia.eu
Author: Радея
Description: Топъл, алпийски дизайн за Къща за гости "РАДЕЯ" — с. Говедарци, Рила планина. Нов визуален дизайн САМО за началната страница; навигацията използва съществуващите WordPress менюта и подстраници на сайта без промяна. Включва реален банер за съгласие за бисквитки.
Version: 1.56.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: radeia
*/

/* =========================================================
   0. RESET & BASE
   ========================================================= */
* { box-sizing: border-box; }

:root{
  --accent: #c08a2e;
  --forest: oklch(30% 0.05 155);
  --ink: oklch(24% 0.03 95);
  --paper: oklch(96.5% 0.016 88);
  --paper2: oklch(92.5% 0.02 90);
  --card: oklch(98% 0.01 85);
  --line: oklch(88% 0.02 88);
  --muted: oklch(45% 0.03 90);
}

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: 'Golos Text', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; }
h1, h2, h3{ text-wrap: pretty; font-family: 'Bitter', Georgia, serif; margin: 0; }
ul{ margin: 0; padding: 0; }
button{ font-family: inherit; }

.navlink{ transition: color .15s ease; }
.navlink:hover{ color: var(--accent) !important; }
.btn-accent{ transition: filter .15s ease, transform .15s ease; }
.btn-accent:hover{ filter: brightness(0.92); transform: translateY(-1px); }
.btn-outline{ transition: background .15s ease, color .15s ease; }
.btn-outline:hover{ background: #fff; color: var(--forest) !important; }
.room-card{ transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.room-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px -18px oklch(24% 0.03 95 / 0.35); }
.tile-link{ transition: box-shadow .2s ease, transform .2s ease; }
.tile-link:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -18px oklch(24% 0.03 95 / 0.3); }
.room-card .room-img{ transition: transform .55s ease; }
.room-card:hover .room-img{ transform: scale(1.09); }

/* =========================================================
   1. ANIMATIONS
   ========================================================= */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(22px);} to{ opacity:1; transform: translateY(0);} }
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-9px);} }
@keyframes pulseRing{ 0%{ box-shadow: 0 0 0 0 oklch(70% 0.16 50 / 0.5);} 70%{ box-shadow: 0 0 0 16px oklch(70% 0.16 50 / 0);} 100%{ box-shadow: 0 0 0 0 oklch(70% 0.16 50 / 0);} }
@keyframes drift{ 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-16px);} }
@keyframes gradientPan{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} }
@keyframes badgePulse{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }
@keyframes kenBurns{ 0%{ transform: scale(1);} 100%{ transform: scale(1.13);} }
@keyframes pulseRingLight{ 0%{ box-shadow: 0 0 0 0 oklch(98% 0.01 85 / 0.55);} 70%{ box-shadow: 0 0 0 18px oklch(98% 0.01 85 / 0);} 100%{ box-shadow: 0 0 0 0 oklch(98% 0.01 85 / 0);} }

.kenburns-img{ animation: kenBurns 15s ease-in-out infinite alternate; }
.cta-btn-pulse{ animation: pulseRingLight 2.5s ease-out infinite; }
.btn-accent-pulse{ animation: pulseRing 2.2s ease-out infinite; }
.hero-logo-wrap, .hero-eyebrow, .hero-title, .hero-sub, .hero-ctas, .hero-photo{ opacity: 0; animation: fadeUp .85s ease forwards; }
.hero-eyebrow{ animation-delay: .05s; }
.hero-title{ animation-delay: .18s; }
.hero-sub{ animation-delay: .32s; }
.hero-ctas{ animation-delay: .46s; }
.hero-photo{ animation-delay: .58s; }
.mountain-back{ animation: drift 24s ease-in-out infinite; }
.mountain-front{ animation: drift 17s ease-in-out infinite reverse; }
.float-cta{ animation: floatY 3.2s ease-in-out infinite, pulseRing 2.6s ease-out infinite; }
.offer-badge{ display: inline-block; animation: badgePulse 2.1s ease-in-out infinite; }
.offer-banner{ background-size: 220% 220% !important; animation: gradientPan 9s ease infinite; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   2. CAROUSEL (shared)
   ========================================================= */
.carousel{ position: relative; width: 100%; height: 100%; }
.carousel-slide{ position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.carousel-slide.active{ opacity: 1; }
.carousel-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: oklch(15% 0.02 95 / 0.42); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: background .15s ease; border: 0; }
.carousel-arrow:hover{ background: oklch(15% 0.02 95 / 0.65); }
.carousel-arrow.prev{ left: 12px; }
.carousel-arrow.next{ right: 12px; }
.carousel-dots{ position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; z-index: 3; }
.carousel-dot{ width: 6px; height: 6px; border-radius: 50%; background: oklch(98% 0.01 85 / 0.55); cursor: pointer; transition: background .15s ease, transform .15s ease; padding: 0; border: 0; }
.carousel-dot.active{ background: oklch(98% 0.01 85); transform: scale(1.3); }
.carousel[data-count="1"] .carousel-arrow, .carousel[data-count="1"] .carousel-dots{ display: none; }

/* =========================================================
   3. SITE HEADER / NAV
   ========================================================= */
.site-header{ position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0 56px; height: 84px; background: oklch(96.5% 0.016 88 / 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-logo{ display: flex; align-items: center; gap: 12px; }
.site-logo img{ width: 46px; height: 46px; border-radius: 10px; display: block; object-fit: cover; }
.site-logo-text{ display: flex; flex-direction: column; gap: 1px; }
.site-logo-text .name{ font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 22px; letter-spacing: 0.06em; color: var(--ink); line-height: 1; }
.site-logo-text .tag{ font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.main-nav{ display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.main-nav li{ list-style: none; margin: 0; }
.main-nav a{ font-size: 15px; font-weight: 500; color: var(--ink); }
.main-nav a.is-accent, .main-nav .current-menu-item > a{ font-weight: 700; color: var(--accent); }
.header-cta{ background: var(--accent); color: oklch(98% 0.01 85); font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.nav-toggle{ display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav-toggle svg{ display: block; }
.mobile-drawer{ display: none; }
/* touch-action: manipulation премахва забавянето/двойния тап, което на
някои телефони кара бърз тап да бъде объркан с жест за избиране на текст —
допълнителна защита към кръг 21 фикса по-долу. */
.mobile-drawer a{ touch-action: manipulation; }
.mobile-drawer ul{ list-style: none; margin: 0; padding: 0; width: 100%; }
.mobile-drawer li{ list-style: none; margin: 0; }

.promo-bar{ position: sticky; top: 84px; z-index: 39; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; background: linear-gradient(120deg, var(--accent), oklch(40% 0.07 145)); color: oklch(98% 0.01 85); font-size: 13.5px; font-weight: 700; text-align: center; flex-wrap: wrap; }

/* =========================================================
   4. HERO
   ========================================================= */
.hero{ position: relative; height: 780px; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(160deg, oklch(30% 0.05 155) 0%, oklch(22% 0.04 150) 55%, oklch(18% 0.03 100) 100%); }
.hero-bg-svg{ position: absolute; inset: 0; opacity: 0.5; width: 100%; height: 100%; }
.hero-overlay{ position: absolute; inset: 0; background: linear-gradient(0deg, oklch(15% 0.03 100 / 0.85) 0%, oklch(15% 0.03 100 / 0.15) 55%, transparent 75%); }
.hero-inner{ position: relative; width: 100%; padding: 0 56px 72px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.hero-copy{ max-width: 700px; }
/* Логото центрирано над надписа "с. Говедарци · подножието на Рила" — по
   молба на клиента (кръг 14), пробна добавка. */
.hero-logo-wrap{ text-align: center; margin-bottom: 20px; }
.hero-logo{ width: 64px; height: 64px; border-radius: 14px; object-fit: cover; box-shadow: 0 10px 24px -10px oklch(10% 0.03 100 / 0.5); }
.hero-eyebrow{ font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(85% 0.04 90); margin-bottom: 18px; }
.hero-title{ font-weight: 700; font-size: 58px; line-height: 1.05; color: oklch(98% 0.01 85); margin: 0 0 22px; }
.hero-sub{ font-size: 18px; line-height: 1.6; color: oklch(90% 0.02 90); max-width: 540px; margin: 0 0 30px; }
.hero-ctas{ display: flex; gap: 14px; flex-wrap: wrap; }
.hero-photo{ width: 230px; height: 165px; border-radius: 16px; overflow: hidden; border: 1px solid oklch(96% 0.02 88 / 0.35); box-shadow: 0 18px 40px -14px oklch(10% 0.03 100 / 0.5); flex-shrink: 0; }
.hero-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   5. BOOKING BAR
   ========================================================= */
.booking-bar-wrap{ padding: 0 56px; margin-top: -46px; position: relative; z-index: 10; }
.booking-bar{ background: var(--card); border-radius: 20px; box-shadow: 0 24px 50px -20px oklch(20% 0.03 95 / 0.4); padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.booking-bar-title{ font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.booking-bar-sub{ font-size: 14px; color: var(--muted); }

/* =========================================================
   6. FACTS STRIP
   ========================================================= */
.facts-strip{ background: var(--forest); padding: 26px 56px; display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; }
.facts-strip .fact{ display: flex; align-items: center; gap: 12px; }
.facts-strip .fact span{ color: oklch(96% 0.02 88); font-size: 15px; }
.facts-strip .divider{ width: 1px; height: 18px; background: oklch(96% 0.02 88 / 0.25); }

/* =========================================================
   7. OFFERS
   ========================================================= */
.offers-section{ padding: 56px; background: var(--paper2); }
.offers-note{ text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 16px; }

/* =========================================================
   8. ABOUT
   ========================================================= */
.about-section{ padding: 110px 56px; display: flex; gap: 70px; align-items: center; }
/* Кръг 15: секцията вече е само текст (снимката е изнесена в отделна
   .photo-break карта под нея) — max-width пази текста четим на широк
   екран вместо да се разтяга на цялата ширина. */
.about-section--text-only .about-copy{ max-width: 720px; margin: 0 auto; }
.about-copy{ flex: 1; min-width: 380px; }
.eyebrow{ font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.about-copy h2{ font-weight: 700; font-size: 36px; line-height: 1.2; margin: 0 0 20px; color: var(--ink); }
.about-copy p{ font-size: 16.5px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }

/* Самостоятелна карта само със снимка и Ken Burns анимация, БЕЗ текст —
   по молба на клиента (кръг 15), извън .carousel машинката (чист CSS,
   без JS зависимост). */
.photo-break{ margin: 0 56px 90px; height: 440px; border-radius: 22px; overflow: hidden; }
.photo-break img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   9. AMENITIES
   ========================================================= */
.amenities-section{ padding: 90px 56px; background: var(--paper); }
.section-head{ text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head h2{ font-weight: 700; font-size: 32px; margin: 0; color: var(--ink); }
.amenities-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; }
.amenity-card{ background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 14px; text-align: center; }
.amenity-icon{ width: 42px; height: 42px; border-radius: 50%; background: oklch(93% 0.025 90); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.amenity-card .label{ font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.amenity-card .note{ font-size: 10.5px; color: oklch(52% 0.03 90); margin-top: 3px; line-height: 1.3; }

/* =========================================================
   10. LIVING SPACES
   ========================================================= */
.spaces-section{ background: var(--paper2); padding: 100px 56px; }
.link-arrow{ font-size: 14px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.spaces-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.spaces-tile{ background: var(--card); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.spaces-tile-img{ height: 190px; }
.spaces-tile-body{ padding: 22px 24px; }
.spaces-tile-body h3{ font-size: 19px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.spaces-tile-body p{ font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }

/* =========================================================
   11. ROOMS
   ========================================================= */
.rooms-section{ padding: 20px 56px 110px; }
.rooms-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.room-card{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.room-photo{ height: 220px; position: relative; }
.room-tag{ position: absolute; top: 12px; left: 12px; z-index: 2; background: oklch(15% 0.02 95 / 0.68); backdrop-filter: blur(4px); color: oklch(98% 0.01 85); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.room-body{ padding: 24px; }
.room-body h3{ font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.room-body p{ font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.room-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.room-tags span{ font-size: 12px; font-weight: 600; color: oklch(35% 0.03 90); background: oklch(93% 0.02 90); padding: 5px 12px; border-radius: 999px; }

/* =========================================================
   12. SURROUNDINGS
   ========================================================= */
.around-section{ padding: 110px 56px; }
.around-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.around-card{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.around-photo{ height: 140px; }
.around-body{ padding: 18px 20px 22px; }
.around-body .t{ font-weight: 700; font-size: 16.5px; color: var(--ink); margin: 0 0 6px; font-family: 'Bitter', Georgia, serif; }
.around-body .d{ font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* =========================================================
   13. LOCATION
   ========================================================= */
.location-section{ padding: 0 56px 110px; display: flex; gap: 40px; align-items: stretch; flex-wrap: wrap; }
.location-info{ flex: 1.2; min-width: 380px; background: var(--paper2); border-radius: 22px; padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.location-info h2{ font-weight: 700; font-size: 26px; line-height: 1.25; margin: 0 0 16px; color: var(--ink); }
.location-info p{ font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 22px; }
.location-facts{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* По молба на клиента (кръг 19): min-width:0 задължително на самата карта —
без него дълга неразделима дума (напр. "Мальовица") я кара да прелее извън
рамката на картата, вместо да се пренесе на нов ред вътре в тесния grid. */
.location-facts .fact-box{ background: var(--card); border-radius: 14px; padding: 14px 10px; text-align: center; min-width: 0; }
.location-facts .fact-box .num{ font-weight: 700; font-size: 20px; color: var(--ink); font-family: 'Bitter', Georgia, serif; overflow-wrap: break-word; }
.location-facts .fact-box .lbl{ font-size: 11.5px; color: var(--muted); margin-top: 4px; overflow-wrap: break-word; }
.location-map{ position: relative; flex: 1; min-width: 320px; border-radius: 22px; background: linear-gradient(155deg, oklch(88% 0.02 100), oklch(80% 0.03 90)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; }
.location-map iframe{ width: 100%; height: 100%; border: 0; min-height: 320px; }
.location-map-open{ position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 7px; background: oklch(20% 0.03 95 / 0.88); color: oklch(98% 0.01 85); font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 24px -10px oklch(15% 0.02 95 / 0.5); }

/* =========================================================
   14. REVIEWS
   ========================================================= */
.reviews-section{ padding: 0 56px 110px; }
.reviews-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.review-card{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; }
.review-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.review-card .src{ font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
/* Кръг 26: Trustindex уиджетът е премахнат по молба на клиента (изискваше
платен акаунт за оформление и чупеше визията на мобилни устройства) —
вместо него, прости статични данни с реалните числа на клиента, вижте
коментара във front-page.php над секцията REVIEWS. */
.review-badge{ font-size: 11px; font-weight: 700; color: var(--forest); background: oklch(95% 0.04 85); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.review-score-row{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.review-score{ font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 38px; color: var(--ink); line-height: 1; }
.review-scale{ font-size: 14px; font-weight: 600; color: var(--muted); }
.review-stars{ color: var(--accent); font-size: 17px; letter-spacing: 2px; }
.review-sub{ font-size: 13.5px; color: var(--muted); margin: 2px 0 0; }
/* По молба на клиента (кръг 18): видим текст/CTA в картата, за да е ясно
че води към всички отзиви на платформата. */
.review-card-cta{ display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--accent); margin-top: auto; padding-top: 16px; text-decoration: none; }
.review-card-cta:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   15. CTA
   ========================================================= */
.cta-section{ background: linear-gradient(120deg, var(--accent), oklch(36% 0.06 145)); padding: 70px 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-section h2{ font-weight: 700; font-size: 30px; color: oklch(98% 0.01 85); margin: 0 0 8px; }
.cta-section p{ font-size: 15.5px; color: oklch(96% 0.02 88 / 0.9); margin: 0; }
.cta-btn{ background: oklch(98% 0.01 85); color: var(--ink); font-size: 15px; font-weight: 700; padding: 16px 34px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }

/* =========================================================
   16. FOOTER
   ========================================================= */
.site-footer{ background: var(--forest); padding: 70px 56px 36px; display: flex; gap: 60px; justify-content: space-between; flex-wrap: wrap; }
.footer-about{ max-width: 320px; }
.footer-about .brand{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-about .brand img{ width: 42px; height: 42px; border-radius: 9px; display: block; object-fit: cover; }
.footer-about .brand .name{ font-weight: 700; font-size: 22px; color: oklch(98% 0.01 85); letter-spacing: 0.05em; font-family: 'Bitter', Georgia, serif; }
.footer-about p{ font-size: 14px; line-height: 1.7; color: oklch(85% 0.02 88 / 0.85); margin: 0; }
.footer-cols{ display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col .head{ font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(85% 0.02 88 / 0.6); margin-bottom: 14px; }
.footer-col .links, .footer-col .footer-menu{ display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.footer-col .links a, .footer-col .links span, .footer-col .footer-menu a{ font-size: 14.5px; color: oklch(94% 0.02 88); line-height: 1.5; }
.footer-col .footer-menu li{ list-style: none; margin: 0; }
.footer-bottom{ background: var(--forest); border-top: 1px solid oklch(96% 0.02 88 / 0.12); padding: 18px 56px; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.footer-bottom span.copy{ font-size: 12.5px; color: oklch(85% 0.02 88 / 0.55); }
.footer-bottom .divider{ width: 1px; height: 12px; background: oklch(85% 0.02 88 / 0.25); }
.footer-bottom a{ font-size: 12.5px; color: oklch(85% 0.02 88 / 0.75); }

/* =========================================================
   17. COOKIE CONSENT BANNER (real, JS-driven)
   ========================================================= */
.cookie-banner{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: oklch(20% 0.03 95 / 0.97); backdrop-filter: blur(6px); padding: 18px 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; box-shadow: 0 -10px 30px -12px oklch(15% 0.02 95 / 0.4); }
/* На страници без mobile-bottom-bar (всичко освен началната) банерът стои долу-долу, за да не остави празна лента. has-bottom-bar (само на началната страница) го вдига над лентата с бутони. */
.cookie-banner[hidden]{ display: none !important; }
.cookie-banner p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: oklch(92% 0.01 85 / 0.9); max-width: 620px; }
.cookie-banner p a{ color: oklch(98% 0.01 85); font-weight: 700; text-decoration: underline; }
.cookie-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-actions button{ cursor: pointer; font-family: inherit; white-space: nowrap; }
.btn-cookie-reject{ border: 1.5px solid oklch(85% 0.02 88 / 0.5); background: transparent; color: oklch(92% 0.01 85); font-size: 13.5px; font-weight: 600; padding: 11px 20px; border-radius: 999px; }
.btn-cookie-accept{ border: 0; background: var(--accent); color: oklch(98% 0.01 85); font-size: 13.5px; font-weight: 700; padding: 11px 22px; border-radius: 999px; }

/* =========================================================
   18. CONNECT — "Свържи се с нас" (кръг 14)
   Заменя предишната плаваща лента "quick-contact" — по молба на клиента
   бутоните за WhatsApp/Viber/имейл/обаждане вече са самостоятелна карта
   в потока на страницата (front-page.php, #connect), не плаващи върху
   съдържанието.
   ========================================================= */
.connect-section{ padding: 70px 56px; }
/* Кръг 38: клиентът поиска иконите за връзка да са центрирани (досега
   стояха подравнени наляво, докато заглавието над тях е центрирано). */
.connect-buttons{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 28px; }
.connect-btn{ display: flex; align-items: center; gap: 12px; background: var(--card); padding: 12px 22px 12px 12px; border-radius: 999px; box-shadow: 0 12px 26px -10px oklch(20% 0.03 95 / 0.25); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.connect-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -10px oklch(20% 0.03 95 / 0.35); }
.connect-btn .ico{ width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.connect-btn .lbl{ font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Кръг 35: кратко потвърждение "Имейлът е копиран" — резервен вариант,
   когато натискането на "Имейл"/mailto: линк не отваря видимо нищо (напр.
   няма настроена по подразбиране имейл програма на компютъра). Виж
   main.js, initMailtoCopyFallback(). */
.radeia-mail-toast{
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 12px);
	z-index: 10000;
	background: oklch(20% 0.03 95 / 0.95);
	color: oklch(98% 0.01 85);
	font-size: 13.5px;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 999px;
	box-shadow: 0 12px 26px -10px oklch(15% 0.02 95 / 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	max-width: calc(100% - 32px);
	text-align: center;
}
.radeia-mail-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }

/* Кръг 46: линк "← Промени датите" на страницата "Потвърждаване на
   резервация" — вижда се веднага под заглавието, ясно кликаем, в тон с
   акцентния цвят на сайта. */
.radeia-change-dates-link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 18px;
	color: var(--accent);
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color .15s ease;
}
.radeia-change-dates-link:hover{ border-color: var(--accent); }

/* =========================================================
   19. MOBILE BOTTOM BAR (hidden on desktop)
   ========================================================= */
.mobile-bottom-bar{ display: none; }

/* =========================================================
   19.1 ПРЕВКЛЮЧВАТЕЛ НА ЕЗИК (плъгин, не част от темата)
   Ако сайтът има плъгин за превод/езици (TranslatePress, WPML, Polylang,
   GTranslate и др.), той често показва плаващо флагче долу-дясно — точно
   където сме сложили важни бутони (резервация, долна лента). Темата не
   генерира този елемент и не знае гарантирано точния му клас, затова тук
   опитваме да го изместим по-нагоре за най-разпространените плъгини. Ако
   след инсталация флагчето продължава да застъпва бутон, кажете ни името
   на плъгина за превод, за да го прицелим точно.
   ========================================================= */
.trp-floater-ls,
.trp-language-switcher-container,
#trp-floater-ls,
.wpml-ls-legacy-list-horizontal.wpml-ls-fixed,
#wpml-language-switcher-floating,
.gtranslate_wrapper,
#gt_float_wrapper,
.pll-switcher-fixed{
	bottom: 84px !important;
	right: 14px !important;
	z-index: 30 !important;
}
@media (max-width: 768px){
	.trp-floater-ls,
	.trp-language-switcher-container,
	#trp-floater-ls,
	.wpml-ls-legacy-list-horizontal.wpml-ls-fixed,
	#wpml-language-switcher-floating,
	.gtranslate_wrapper,
	#gt_float_wrapper,
	.pll-switcher-fixed{
		bottom: 128px !important;
	}
}

/* =========================================================
   19.2 ИКОНКА НА CookieYes (плъгин за бисквитки, потвърден в кръг 23)
   CookieYes показва плаваща кръгла иконка "отвори настройки на
   бисквитките" по подразбиране долу-ляво — точно където застъпва долната
   мобилна лента с бутони и/или новата форма за резервация. Тук я местим
   по-нагоре, по същия начин както езиковото флагче по-горе. Целим както
   новата (CookieYes) марка на класовете, така и по-старата ("Cookie Law
   Info", от която CookieYes произлиза), за по-сигурно покритие.
   ========================================================= */
.cky-btn-revisit-wrapper,
#cookie-law-info-again{
	bottom: 84px !important;
	left: 14px !important;
	z-index: 30 !important;
}
@media (max-width: 768px){
	.cky-btn-revisit-wrapper,
	#cookie-law-info-again{
		bottom: 128px !important;
	}
}

/* =========================================================
   20. GENERIC PAGE (всяка подстраница без собствен шаблон — page.php)
   Съдържанието идва изцяло от WordPress (the_content), темата само
   дава основно, читаемо форматиране около текста, което вече имате.
   ========================================================= */
.page-content-wrap{ padding: 56px; max-width: 860px; margin: 0 auto; }
.page-content-wrap .entry-content h2{ font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 22px; color: var(--forest); margin: 36px 0 14px; }
.page-content-wrap .entry-content p{ font-size: 15.5px; line-height: 1.75; color: var(--ink); margin: 0 0 14px; }
.page-content-wrap .entry-content ul{ margin: 0 0 14px; padding-left: 22px; }
.page-content-wrap .entry-content li{ font-size: 15.5px; line-height: 1.75; color: var(--ink); margin-bottom: 6px; }
.page-content-wrap .entry-content a{ color: var(--accent); font-weight: 600; }
.page-content-wrap .entry-content th{ text-align: left; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); }
.page-content-wrap .entry-content td{ padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.page-content-wrap img{ max-width: 100%; height: auto; }
/*
 Плъгини като системата за резервации понякога извеждат широки таблици
 (напр. календар с много колони), които тази тема не контролира. Важно е
 ЦЯЛОТО съдържание (.entry-content) да НЕ става скролиращ контейнер — това
 чупи стъпките/навигацията на плъгина (напр. преминаването към следваща
 стъпка след избор на дати). Затова хоризонталното скролиране е сложено
 само на самата таблица (display:block превръща таблицата в собствен тесен
 "прозорец"), а не на цялото съдържание около нея.
*/
.entry-content{ max-width: 100%; }
.page-content-wrap .entry-content table{
	display: block;
	width: auto;
	min-width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	margin: 0 0 18px;
	font-size: 14px;
}

/* =========================================================
   20.1 РЕЗЕРВАЦИОННА ФОРМА (MotoPress Hotel Booking, потвърден в кръг 23)
   Плъгинът рисува собствения си формуляр (полета "Възрастни/Деца",
   допълнителни услуги и т.н.) вътре в .entry-content на страницата
   "Резервация" — темата НЕ променя логиката/имената на полетата му, само
   облича видимите HTML елементи (select/input/checkbox), по същия начин,
   както вече правим за календара му (виж бележката от кръг 13 по-долу).
   Визията е вдъхновена от одобрения дизайн-еталон (booking-confirmation
   .html), доколкото реалните полета на плъгина го позволяват.

   Заглавия като "Детайли резервация"/"Настаняване №1" — не знаем на 100%
   дали плъгинът ги извежда като h3 или h4, затова стилизираме и двете
   защитно; ако плъгинът използва друг таг, кажете ни и ще прицелим точно.

   ВАЖНО (кръг 29): клиентът потвърди, че реалната страница "Резервация",
   която посетителите виждат, е построена с Elementor ("Резервация —
   Elementor" в списъка със страници), а НЕ през обичайния шаблон на
   темата (page.php → .page-content-wrap .entry-content). Затова всички
   правила в тази секция вече хващат и `.elementor` — стабилният, винаги
   присъстващ "коренов" клас, с който Elementor обвива ВСЯКО свое
   съдържание на страницата (документирана, постоянна конвенция на самия
   Elementor, не предположение за MotoPress). Двата селектора се пазят
   заедно, за да продължат да работят и обикновените WordPress страници
   (напр. "Потвърждаване на резервация", ако не е Elementor), и Elementor
   страниците едновременно. */
.page-content-wrap .entry-content h3,
.page-content-wrap .entry-content h4,
.elementor h3,
.elementor h4{ font-family: 'Bitter', Georgia, serif; font-weight: 700; color: var(--forest); margin: 28px 0 14px; }
.page-content-wrap .entry-content h3,
.elementor h3{ font-size: 19px; }
.page-content-wrap .entry-content h4,
.elementor h4{ font-size: 16px; }

.page-content-wrap .entry-content select,
.elementor select{
	appearance: none !important;
	-webkit-appearance: none !important;
	max-width: 100% !important;
	min-width: 140px;
	padding: 12px 38px 12px 14px !important;
	margin: 4px 8px 10px 0 !important;
	border: 1.5px solid var(--line) !important;
	border-radius: 10px !important;
	background: var(--card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23241f0e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center !important;
	font-size: 14.5px !important;
	font-family: inherit !important;
	color: var(--ink) !important;
	cursor: pointer;
}
.page-content-wrap .entry-content select:focus,
.elementor select:focus{ outline: none; border-color: var(--accent) !important; }
/* Кръг 26: разширено покритие на текстовите полета — освен явните
type="text"/"tel"/"email", плъгинът за резервации (датите на настаняване/
освобождаване, полето за ваучер) извежда някои полета БЕЗ изричен type
атрибут в HTML-а (по подразбиране е текстово поле, но CSS селекторът
[type="text"] не го хваща, ако атрибутът липсва буквално) — затова вече
хващаме и тях изрично, плюс type="date"/"search"/"number". Кръг 29:
добавен и `.elementor` еквивалент на всеки ред — виж бележката по-горе. */
.page-content-wrap .entry-content input:not([type]),
.page-content-wrap .entry-content input[type="text"],
.page-content-wrap .entry-content input[type="tel"],
.page-content-wrap .entry-content input[type="email"],
.page-content-wrap .entry-content input[type="date"],
.page-content-wrap .entry-content input[type="search"],
.page-content-wrap .entry-content input[type="number"],
.page-content-wrap .entry-content textarea,
.elementor input:not([type]),
.elementor input[type="text"],
.elementor input[type="tel"],
.elementor input[type="email"],
.elementor input[type="date"],
.elementor input[type="search"],
.elementor input[type="number"],
.elementor textarea{
	display: block !important;
	width: 100% !important;
	max-width: 420px;
	padding: 12px 14px !important;
	margin: 4px 0 14px !important;
	border: 1.5px solid var(--line) !important;
	border-radius: 10px !important;
	background: var(--card) !important;
	font-size: 14.5px !important;
	font-family: inherit !important;
	color: var(--ink) !important;
	box-sizing: border-box !important;
}
.page-content-wrap .entry-content textarea,
.elementor textarea{ max-width: 100%; min-height: 90px; resize: vertical; }
.page-content-wrap .entry-content input:not([type]):focus,
.page-content-wrap .entry-content input[type="text"]:focus,
.page-content-wrap .entry-content input[type="tel"]:focus,
.page-content-wrap .entry-content input[type="email"]:focus,
.page-content-wrap .entry-content input[type="date"]:focus,
.page-content-wrap .entry-content input[type="search"]:focus,
.page-content-wrap .entry-content input[type="number"]:focus,
.page-content-wrap .entry-content textarea:focus,
.elementor input:not([type]):focus,
.elementor input[type="text"]:focus,
.elementor input[type="tel"]:focus,
.elementor input[type="email"]:focus,
.elementor input[type="date"]:focus,
.elementor input[type="search"]:focus,
.elementor input[type="number"]:focus,
.elementor textarea:focus{ outline: none; border-color: var(--accent) !important; }

/* Кръг 26/29: самостоятелни чекбоксове извън картите с услуги (напр.
"Прочетох и съм съгласен с Условията за ползване"). */
.page-content-wrap .entry-content input[type="checkbox"],
.page-content-wrap .entry-content input[type="radio"],
.elementor input[type="checkbox"],
.elementor input[type="radio"]{
	width: 19px;
	height: 19px;
	accent-color: var(--accent);
	cursor: pointer;
	vertical-align: middle;
	margin-right: 6px;
}

/* Кръг 26: главните бутони на формата (напр. "Запази Сега", "Проверка
свободни дати", "Приложи" на ваучера) — по подразбиране идват като голи
браузърни бутони; тук получават същия визуален език като бутоните на
останалата част от сайта (плътен цвят на акцента, изцяло заоблени ъгли).
Забележка: не сме сигурни на 100% дали малките стрелки за месец напред/
назад в календара на плъгина ("<назад"/"напред>") също са <button>
елементи някъде на същата страница — ако след тази промяна те изглеждат
разместени/уголемени, кажете ни веднага и ще стесним селектора до
конкретния клас, вместо да гадаем предварително. Кръг 29: добавен и
`.elementor` еквивалент. */
.page-content-wrap .entry-content input[type="submit"],
.page-content-wrap .entry-content input[type="button"],
.page-content-wrap .entry-content button,
.elementor input[type="submit"],
.elementor input[type="button"],
.elementor button{
	display: inline-block !important;
	background: var(--accent) !important;
	color: oklch(98% 0.01 85) !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 13px 28px !important;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.page-content-wrap .entry-content input[type="submit"]:hover,
.page-content-wrap .entry-content input[type="button"]:hover,
.page-content-wrap .entry-content button:hover,
.elementor input[type="submit"]:hover,
.elementor input[type="button"]:hover,
.elementor button:hover{ filter: brightness(0.94); }

/* "Карта" около всеки чекбокс за допълнителна услуга — обвивката (div.mphb-
   extra-card) се добавя от assets/js/main.js около реалния ред на плъгина
   (без да пипа самите input/checkbox елементи — те си остават същите за
   логиката на плъгина). is-checked се превключва живо при (де)маркиране. */
.mphb-extra-card{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 10px; transition: border-color .15s ease, background .15s ease; }
.mphb-extra-card:hover{ border-color: oklch(75% 0.05 90); }
.mphb-extra-card.is-checked{ border-color: var(--accent); background: oklch(95% 0.04 85); }
.mphb-extra-card label{ font-size: 14.5px; color: var(--ink); line-height: 1.5; cursor: pointer; }
.mphb-extra-card input[type="checkbox"]{ width: 19px; height: 19px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.mphb-extra-card select{ margin: 4px 6px; }

/* Кръг 51: напомняне върху картите "Столче за хранене"/"Бебешка кошарка",
   когато гостът избере поне 1 "Бебе" — JS слага/маха класа (виж секция 12
   в main.js). Кратка пулсираща рамка (3 повторения, после спира), плюс
   траен акцентен цвят на рамката, докато класът стои — така напомнянето
   не е само мигновено, а остава забележимо, докато гостът не провери
   услугите. Тествано на живо (temporary CSS инжекция) преди да влезе в
   кода. */
@keyframes radeiaExtraRemindPulse{
	0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
	50%{ box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.mphb-extra-card.radeia-extra-remind{
	border-color: var(--accent) !important;
	animation: radeiaExtraRemindPulse 1.1s ease-in-out 3;
}

/* Карти "Възрастни"/"Деца"/"Бебе" на резервационната форма (кръг 40,
   разширени в кръг 47 с "Бебе") — добавени от assets/js/main.js
   (symmetrizeGuestCountFields, addBabyGuestField), визуално еднакви с
   картите на допълнителните услуги отгоре (.mphb-extra-card).

   ВАЖНО, поправено в кръг 49: първоначално (кръг 40-47) добавяхме класа
   директно на СПОДЕЛЕНИЯ родител на плъгина (.mphb-reserve-rooms-details),
   който обаче на десктоп е ЕДИН flex ред, споделен и от заглавието
   "Настаняване #1"/"Вид настаняване ..." (отляво) и от ЦЯЛАТА секция
   "Изберете Допълнителни услуги" (отдясно) — докато имаше само 2 карти
   (Възрастни/Деца), те се събираха в останалото свободно място на този
   ред; добавянето на трета карта "Бебе" в кръг 47 вече не се събираше на
   същия ред и "падаше" на съвсем друго, крехко място (потвърдено от
   клиентска екранна снимка). Затова сега JS-ът слага трите карти в
   СОБСТВЕН пълен-ширина ред (.radeia-guest-fields-row), който винаги стои
   на отделен ред от заглавието/услугите, а вътре в него трите карти се
   делят РАВНОМЕРНО (flex:1 1 0) — гарантирано еднакъв размер и трите
   винаги едно до друго на десктоп. */
.radeia-guest-fields-row{
	flex: 1 1 100%;
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}
.radeia-guest-field-card{
	flex: 1 1 0;
	min-width: 0;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: border-color .15s ease;
}
.radeia-guest-field-card:hover{ border-color: oklch(75% 0.05 90); }
.radeia-guest-field-card label{ font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0 !important; }
.radeia-guest-field-card select{ width: 100%; margin: 0 !important; }
.radeia-age-note{ display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }

/*
 ВАЖНО (кръг 13): в кръг 12 тук имаше правила, които "връщаха" резервационния
 календар към суровия вид по подразбиране на плъгина (бял фон, черна лента,
 сини линкове). Клиентът изрично поправи това — той иска резервационната
 страница да изглежда точно както изглежда СЕГА, тоест със стиловете на
 темата отгоре (кремав фон, серифни заглавия на месеците, акцентния цвят на
 избраните дати) — не в суровия вид на плъгина. Затова тези правила по-долу
 (h2/p/ul/li/a/th/td в .entry-content) остават активни и за резервационната
 страница, каквито си бяха преди кръг 12 — не са пипани повторно.
*/

/* =========================================================
   20.2 КАЛЕНДАР ЗА НАЛИЧНОСТ (MotoPress Hotel Booking)

   ВАЖНО (кръг 30): клиентът поиска календарът с датите/цените да изглежда
   "красив", в стила на останалата част от сайта. Проблемът досега беше, че
   реалната HTML структура на календара НЕ съществува в суровия код на
   страницата — плъгинът използва JavaScript библиотека (jQuery datepick),
   която изгражда таблицата с дни/цени динамично, В БРАУЗЪРА, след
   зареждане на страницата. Затова "view-source" (използван за диагнозата
   по-горе в 20.1) не помогна тук — той показва само суровия код ПРЕДИ
   JavaScript-а. Вместо да гадаем структурата, отворихме реалната страница
   в браузър и прочетохме РЕАЛНО изградения календар в паметта — всички
   класове по-долу са видени директно там, не са предположени.

   ПОПРАВКА (кръг 32): първият опит (кръг 30) беше тестван само с изцяло
   свободен месец, без реални резервации — затова пропусна 3 реални бъга,
   които клиентският скрийншот разкри веднага щом в календара имаше и
   заети дати: (1) само датите с истински <a> (кликаеми) получаваха
   златистия фон — датите, които технически са "налични", но не могат да
   се изберат В МОМЕНТА (плъгинът ги рисува като <span>, не <a>, напр. ден
   на "смяна" между два престоя) оставаха в суровия зелен цвят по
   подразбиране на плъгина; (2) истински ЗАЕТИ дати (реални резервации,
   клас .mphb-booked-date) изобщо нямаха собствен стил и също оставаха в
   суровия зелен/сив разграфен вид на плъгина; (3) черните/сивите ленти на
   навигацията и заглавието на месеца никога не са получавали собствен фон
   в кръг 30 — стилизирахме само текста върху тях, затова тъмният фон на
   плъгина продължаваше да прозира отдолу. Отворихме отново живия календар
   (вече с реални резервации в него) и прочетохме всички истински класове
   директно от браузъра, за да коригираме и трите проблема наведнъж, без
   да гадаем.

   Структура (опростено):
   .mphb-calendar > .datepick > .datepick-nav (стрелки назад/напред/днес)
                              > .datepick-month-row > .datepick-month
                                  > .datepick-month-header (селектори месец/година)
                                  > table > thead (дни от седмицата)
                                          > tbody > td > span/a.mphb-date-cell
                                              (past / available / booked / selected...)
                                              > .mphb-date-cell__price > .mphb-price
*/
/* Кръг 33: клиентът прати реална мостра (снимка от истински хотелски
   календар) — без рамка/карта около календара, без "клетки" с граници,
   плосък изглед директно върху фона на страницата. Затова тук махаме
   рамката/картата от кръг 30-31 и оставяме само вътрешните отстъпи. */
.mphb-calendar{
	background: transparent;
	max-width: 100%;
	padding: 4px 0 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* Кръг 32/34: плъгинът рисува собствен бял фон И собствена тъмна рамка
   (1px solid #444) на корена си (.datepick) И на всеки месец (.datepick-
   month) поотделно — точно затова продължаваше да се вижда рамка дори
   след като премахнахме картата на .mphb-calendar в кръг 33 (потвърдено
   директно от браузъра: и .datepick, и .datepick-month носят border:1px
   solid rgb(68,68,68), не просто фон). Нулираме и двете тук. */
.mphb-calendar .datepick,
.mphb-calendar .datepick-month{
	background: transparent !important;
	border: 0 !important;
	font-family: inherit;
}
/* Кръг 45: клиентът потвърди (и на живия сайт в инкогнито, не само в
   Customize preview), че кръг 44 не промени НИЩО видимо — все още само 5
   от 7-те дни се събират на екрана. Това означава, че проблемът никога не
   е бил само в делението на колоните ВЪТРЕ в самата `<table>` (което кръг
   44 коректно поправи), а в това, че някой РОДИТЕЛСКИ контейнер на самата
   таблица (`.datepick`, редът с месеците `.datepick-month-row`, или самия
   `.datepick-month`) вероятно носи собствена, зададена от JavaScript-а на
   плъгина ширина в пиксели (обичайна практика при по-стари jQuery UI-
   стилни календарни библиотеки, за да не се "срутва" подредбата на много
   месеци едновременно) — а `.mphb-calendar` носи `overflow-x: auto` от
   кръг 33, което точно затова позволява на по-широкия родител да се
   превърта настрани, вместо да се свие до ширината на екрана. Колкото и
   прецизно да разпределяме 100%-товата ширина на самата таблица на 7
   равни колони (кръг 43-44), ако РОДИТЕЛЯТ на таблицата вече е по-широк
   от екрана, 100% от него си остава по-широко от екрана. Тук затваряме
   тази възможност на ВСЯКО ниво от веригата контейнери едновременно. */
.mphb-calendar .datepick,
.mphb-calendar .datepick-month-row,
.mphb-calendar .datepick-month{
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.mphb-calendar .datepick-nav{
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	background: transparent !important;
	margin: 0 0 14px !important;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.mphb-calendar .datepick-cmd{
	color: var(--accent) !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	padding: 6px 10px;
	border-radius: 8px;
	transition: background .15s ease;
}
.mphb-calendar .datepick-cmd:hover{ background: var(--paper); }
.mphb-calendar .datepick-cmd-today{ color: var(--muted) !important; }
.mphb-calendar .datepick-cmd.datepick-disabled{ color: var(--line) !important; pointer-events: none; }

.mphb-calendar .datepick-month-row{ display: flex !important; gap: 28px; flex-wrap: wrap; }
.mphb-calendar .datepick-month{ flex: 1 1 220px; min-width: 220px; }

/* Кръг 52: кратък текст, докато гостът чака да се заредят датите на новия
   месец (виж initCalendarLoadingHint в main.js) — скрит по подразбиране
   (JS-ът го показва/скрива), затова НЕ добавяме display:none тук, за да не
   влиза в конфликт с hint.hidden. ЗАБЕЛЕЖКА: разположението не е проверено
   на живо в тази сесия (браузърният достъп в момента е недостъпен) —
   очаквано изглежда добре под навигацията "назад"/"напред", но може да се
   наложи фина корекция на разстоянието след жива проверка. */
.radeia-calendar-loading-hint{
	margin: -8px 0 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
}

/* Кръг 36: клиентът забеляза, че заглавието на ВТОРИЯ месец изглежда с
   различен шрифт/размер от първия. Причината, потвърдена на живо в
   браузъра: плъгинът показва ПЪРВИЯ месец с два падащи списъка
   (select.datepick-month-year — стилизирани от нас по-долу), но ВСЕКИ
   следващ месец е просто ГОЛ ТЕКСТ директно в .datepick-month-header, без
   select — затова наследяваше собствения дребен бял шрифт на плъгина
   (нечетим на светлия фон), вместо нашия стил. Тук слагаме същия шрифт/
   размер/цвят директно на контейнера, за да изглеждат еднакво и двата. */
.mphb-calendar .datepick-month-header{
	background: transparent !important;
	text-align: center;
	margin-bottom: 10px;
	font-family: 'Bitter', Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	color: var(--forest) !important;
}
/* Кръг 33: по мострата — по-едро заглавие на месеца, с малка стрелка до
   всеки избор (месец / година), както изглежда истински падащ списък. */
.mphb-calendar .datepick-month-header select.datepick-month-year{
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23244032" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 2px center !important;
	font-family: 'Bitter', Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	color: var(--forest) !important;
	padding: 2px 22px 2px 4px !important;
	margin: 0 2px !important;
	cursor: pointer;
	width: auto !important;
	min-width: 0 !important;
}

/* Кръг 32: `table-layout: fixed` е ключово тук — без него браузърът
   опитва да смести 7 колони по естествената им "предпочитана" ширина,
   която (заради нашите по-широки клетки-бутони отдолу) може да стане
   по-широка от фиксираната ширина, зададена от JavaScript-а на плъгина
   — резултатът беше, че последната колона (неделя) излизаше извън
   видимата рамка на календара. С `fixed` всяка от 7-те колони винаги
   получава точно 1/7 от наличната ширина, гарантирано без препълване. */
/* Кръг 42: клиентът съобщи, че на телефон календарът вече не запълва
   пълната ширина на екрана, а се налага странично превъртане. Причината:
   генерично правило по-горе (".page-content-wrap .entry-content table",
   писано за ДРУГИ, обикновени широки таблици на плъгини) слага
   `display: block` + `overflow-x: auto` на ВСЯКА таблица в съдържанието,
   включително тази на календара — а `display: block` кара таблицата да
   се държи като собствен тесен "прозорец" с вътрешно превъртане, вместо
   да разпредели 7-те колони по `table-layout: fixed` в пълната ширина.
   Тук изрично връщаме нормалното таблично поведение САМО за календара
   (другите таблици на сайта продължават да могат да превъртат странично,
   ако някога станат по-широки от екрана — това правило не се пипа). */
/* Кръг 43: клиентът съобщи, че кръг 42 не само не оправи напълно
   превъртането (все още леко се налагаше), а и влоши нещата — застъпване с
   бутона "изчисти" и сив "екселски" вид с бели решетки между клетките.
   Причината, най-вероятно: `border-collapse: separate` + `border-spacing`
   не се брои сигурно в 100%-товата ширина на таблицата във всички браузъри
   — с `table-layout: fixed` разстоянието между клетките понякога се
   добавя ОТГОРЕ върху зададените 100%, вместо да се съдържа в тях, което
   обяснява защо продължаваше леко превъртане; преляло съдържание с
   `overflow-x: visible` вместо `auto`/`hidden` пък просто се рисува върху
   следващия елемент (бутона "изчисти"), вместо да се скролва прегледно.
   Освен това връщането на нормално `display: table` разкри собствения фон
   на плъгина на самата `<table>`/`<tr>` (никога досега неутрализиран, тъй
   като преди беше скрит зад `display: block`) — оттам "сивият екселски"
   вид. Тук минаваме на `border-collapse: collapse` (без border-spacing,
   така разстоянието между клетките е чрез `padding` на самите `td`, което
   ГАРАНТИРАНО се съдържа в зададената ширина от 100%, не се добавя отгоре)
   и изрично неутрализираме фона на table/tbody/tr, за да не прозира нищо
   сиво в процепите. */
.mphb-calendar table{
	display: table !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	table-layout: fixed !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	background: transparent !important;
}
/* Кръг 44: клиентът съобщи, че от 7-те дни в реда се виждат само 5, а
   останалите 2 излизат извън екрана (налага се странично превъртане,
   въпреки че бутонът "изчисти" вече не се застъпва). Причина: `table-layout:
   fixed` само казва на браузъра "не пресмятай колоните според съдържанието
   им", но НЕ пречи на явен `min-width`, зададен от собствения стил на
   MotoPress върху всяка клетка (th/td), да остане "твърд под" за ширината
   ѝ — а такъв под-минимум е точно типът правило, което плъгин за календар
   обичайно слага, за да не станат клетките твърде тесни на десктоп. Затова
   таблицата продължаваше да "напира" по-широко от 100% и се появяваше
   странично превъртане, макар самата `<table>` да имаше `width:100%`.
   Тук изрично нулираме `min-width` на всяка клетка и ѝ задаваме точна
   ширина 1/7 (14.2857%) с `!important`, което гарантирано печели пред
   вградения минимум на плъгина и не позволява никоя колона да поиска
   повече място от полагащото ѝ се. */
.mphb-calendar th,
.mphb-calendar td{
	width: 14.2857% !important;
	max-width: 14.2857% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
.mphb-calendar tbody,
.mphb-calendar tr{ background: transparent !important; }
/* Кръг 33: клиентът правилно забеляза, че календарът заприлича на
   Excel таблица с рамки около всяка клетка. Причината: генерично правило
   по-горе в този файл (".page-content-wrap .entry-content th/td"),
   писано за ОБИКНОВЕНИ текстови таблици в съдържанието на страница (за
   да имат чист долен борд под всеки ред) — но понеже календарът също
   живее вътре в същия .entry-content, това правило слагаше border-bottom
   и на неговите th/td клетки. Комбинирано с разстоянието между клетките
   (border-spacing), това създаваше грид ефект. Тук изрично нулираме тези
   рамки само за календара, без да пипаме правилото за обикновените
   таблици другаде на сайта. */
.mphb-calendar td,
.mphb-calendar th{ border: 0 !important; }
/* Кръг 34: истинската причина клетките да изглеждат тесни/малки — същото
   генерично правило от кръг 33 (".entry-content td") слага и
   `padding: 12px` на всяка клетка, не само рамка. Заради по-високата му
   специфичност печелеше пред нашия ред тук, без `!important`, и изяждаше
   почти половината от ширината на всяка клетка. Потвърдено директно от
   браузъра: TD 54px широк, но видимата клетка вътре само 30px заради тези
   невидими 12px отстъпи от всяка страна. */
/* Кръг 43: разстоянието между клетките вече е чрез `padding` тук (вместо
   border-spacing на таблицата, виж бележката по-горе) — гарантирано се
   съдържа в 100%-товата ширина, не може да я надвиши. */
.mphb-calendar td{ padding: 3px !important; background: transparent !important; }
/* Кръг 46: клиентът забеляза, че някои от полетата с дати се "издължават"
   (изглеждат по-високи от съседните) — вижда се в скрийншот при клетка,
   маркирана като избран диапазон/днешна дата. Причина: `<td>` тук няма
   собствена фиксирана височина — само вътрешната `.mphb-date-cell` има
   такава (56px). Ако плъгинът добави какъвто и да е допълнителен елемент
   вътре в клетката за специално състояние (избран диапазон, "днес" и
   т.н.), който не се събира в тези 56px, самият ред на таблицата се
   разтяга да го събере — и точно затова само НЯКОИ клетки изглеждат по-
   високи, а не всички. Тук фиксираме и височината на самия `<td>` (56px
   клетка + 3px padding отгоре/отдолу = 62px), с `overflow:hidden` като
   гаранция — никоя клетка вече не може да наложи по-висок ред от
   съседните ѝ, каквото и състояние да показва. */
.mphb-calendar td{ height: 62px !important; max-height: 62px !important; overflow: hidden !important; }
.mphb-calendar thead th{ background: transparent !important; padding: 4px 0; text-align: center !important; }
/* Кръг 33: по мострата — дните от седмицата са прост, четлив текст, БЕЗ
   главни букви и БЕЗ удебелен "етикетен" вид (какъвто имаше преди). */
.mphb-calendar thead span{
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}

/* Кръг 35: реда под мрежата на календара — проверено на живо в браузъра,
   реалната структура е:
   .datepick-ctrl > .mphb-calendar__selected-dates ("Select dates", непреве-
                     ден текст на самия плъгин, не наш) + a.datepick-cmd-clear
                     ("изчисти", вече на български от плъгина)
   Клиентът поиска: (1) "Select dates" изобщо да не се вижда като текст, и
   (2) "изчисти" да изглежда като истински бутон, в тон с останалите бутони
   на сайта — не като обикновен текстов линк. Плюс премахваме и светло-
   сивата собствена лента на плъгина (background:#eee), за да остане плоско,
   без рамки, както при останалата част от календара (кръг 33). */
.mphb-calendar .datepick-ctrl{
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center;
	background: transparent !important;
	padding: 10px 0 0 !important;
	margin: 4px 0 0 !important;
}
.mphb-calendar .mphb-calendar__selected-dates{ display: none !important; }
.mphb-calendar .datepick-cmd-clear{
	background: var(--accent) !important;
	color: oklch(98% 0.01 85) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	padding: 9px 20px !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	transition: filter .15s ease, transform .15s ease;
}
.mphb-calendar .datepick-cmd-clear:hover{ filter: brightness(0.92); transform: translateY(-1px); background: var(--accent) !important; }

/* Базов вид на всяка клетка-ден — важи еднакво за <span> (недостъпни за
   клик) и <a> (кликаеми) елементи, затова НЕ пипаме широчината/фона тук с
   селектор, специфичен за тага. `background-image: none` маха "разцепения"
   зелено/сиво зрелищен градиент, който плъгинът рисува сам за някои
   "гранични" дати (виж .mphb-booked-date по-долу). */
/* Кръг 50: `height` тук ТРЯБВА да е с !important. Плъгинът има собствено
   правило `.mphb-calendar .datepick-month td > span{ height: 100%; }`
   (в mphb.min.css), което е по-специфично от нашия единствен клас
   `.mphb-date-cell` (специфичност 0,2,2 срещу нашата 0,2,0) — затова
   печели то, а не ние, но САМО за <span> елементи (недостъпни дни: минали,
   заети, "полу-заети" check-in/check-out), докато <a> елементите
   (свободни, кликаеми дни) НЯМАТ такова конкуриращо правило и си остават
   правилните 56px. Резултатът се вижда точно като на клиентската екранна
   снимка: в един и същ ред заетите/минали дати (span, изпънати на 100% от
   височината на td, ≈65px) стърчат видимо по-високи от свободните дати
   (a, коректните 56px) — грозен "разкривен" ред. С !important нашите
   56px печелят и за двата типа елементи. */
.mphb-calendar .mphb-date-cell{
	display: flex !important;
	width: 100% !important;
	height: 56px !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink) !important;
	text-decoration: none !important;
	background: transparent;
	background-image: none !important;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.mphb-calendar .mphb-date-cell__price{ display: block; line-height: 1; }
.mphb-calendar .mphb-price{ font-size: 11.5px; font-weight: 600; opacity: .8; }
.mphb-calendar .mphb-currency{ font-size: 9px; }

/* Празни клетки от съседния месец — невидими, но пазят подредбата на мрежата. */
.mphb-calendar .mphb-extra-date{ visibility: hidden; }

.mphb-calendar .mphb-past-date{
	background: oklch(93% 0.01 88) !important;
	color: var(--line) !important;
	cursor: not-allowed;
}
.mphb-calendar .mphb-past-date .mphb-price{ visibility: hidden; }

/* Кръг 32: НАЛИЧНИ дати — важи за ВСИЧКИ налични дни, независимо дали
   плъгинът ги е нарисувал като кликаем <a> или само като информативен
   <span> (напр. ден, в който може да се настаните, но не и да си
   тръгнете същия ден заради друга резервация) — и двата случая трябва да
   изглеждат еднакво "налични" визуално. */
.mphb-calendar .mphb-available-date{
	background: oklch(95% 0.04 85) !important;
	color: var(--ink) !important;
}
.mphb-calendar a.mphb-available-date{ cursor: pointer; }
.mphb-calendar a.mphb-available-date:hover{
	background: var(--accent) !important;
	color: oklch(98% 0.01 85) !important;
	transform: translateY(-1px);
}

/* Кръг 32: РЕАЛНО ЗАЕТИ дати (истинска резервация в системата, клас
   .mphb-booked-date, потвърден директно от живия календар) — приглушен
   тон в топлата палитра на сайта вместо суровия зелено-сив "разцепен"
   градиент на плъгина по подразбиране. */
.mphb-calendar .mphb-booked-date{
	background: oklch(88% 0.03 40) !important;
	color: oklch(52% 0.04 40) !important;
	cursor: not-allowed;
}
.mphb-calendar .mphb-booked-date .mphb-price{ visibility: hidden; }

/* Кръг 33: клиентът обясни, че "разполовената" клетка е НАРОЧНА функция
   на плъгина, не бъг — показва деня, в който текущият гост напуска (или
   пристига), докато другата половина от същия ден реално остава
   бронируема за нов гост (стандартна хотелска практика: чекаут сутрин,
   чекин следобед същия ден). Затова тук НЕ заличаваме тази информация с
   плътен цвят — пресъздаваме същия "разполовен" ефект на плъгина
   (.mphb-mark-as-unavailable--check-in/--check-out), но с цветовете на
   сайта вместо суровия зелено-сив градиент по подразбиране. Идва СЛЕД
   правилата за .mphb-available-date/.mphb-booked-date по-горе, за да ги
   "презапише" именно за тези гранични дни. */
.mphb-calendar .mphb-mark-as-unavailable--check-in,
.mphb-calendar .mphb-mark-as-unavailable--check-out{
	background: linear-gradient(to right bottom, oklch(95% 0.04 85) 0 50%, oklch(88% 0.03 40) 50% 100%) !important;
	color: var(--ink) !important;
	cursor: not-allowed;
}
.mphb-calendar a.mphb-mark-as-unavailable--check-in,
.mphb-calendar a.mphb-mark-as-unavailable--check-out{ cursor: pointer; }
.mphb-calendar .mphb-mark-as-unavailable--check-in .mphb-price,
.mphb-calendar .mphb-mark-as-unavailable--check-out .mphb-price{ visibility: visible !important; opacity: .9; }

/* Днешна дата — тънка рамка в цвета на акцента, за да се откроява без да
   изглежда като избрана. */
.mphb-calendar .datepick-today{ box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Избрана дата на настаняване/освобождаване + всички дни между тях —
   идва СЛЕД правилата по-горе, за да "печели" пред тях, ако клиентът
   избере налична дата. */
.mphb-calendar .datepick-selected,
.mphb-calendar .mphb-selected-date,
.mphb-calendar .mphb-selected-date--check-in,
.mphb-calendar .mphb-selected-date--check-out{
	background: var(--accent) !important;
	color: oklch(98% 0.01 85) !important;
}
.mphb-calendar .datepick-selected .mphb-price,
.mphb-calendar .mphb-selected-date .mphb-price,
.mphb-calendar .mphb-selected-date--check-in .mphb-price,
.mphb-calendar .mphb-selected-date--check-out .mphb-price{ visibility: visible; opacity: 1; }

/* =========================================================
   21. RESPONSIVE — MOBILE (<=768px)
   Values ported from the dedicated mobile design concept.
   ========================================================= */
@media (max-width: 768px){

  .site-header{ padding: 0 20px; height: 64px; }
  .site-logo img{ width: 36px; height: 36px; }
  .site-logo-text .name{ font-size: 17px; }
  .site-logo-text .tag{ display: none; }
  .main-nav, .header-cta{ display: none !important; }
  .nav-toggle{ display: flex !important; }

  .mobile-drawer{ position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); padding: 24px 20px; display: none; flex-direction: column; gap: 4px; overflow-y: auto; }
  .mobile-drawer.is-open{ display: flex; }
  /* Кръг 21 — реален бъг, потвърден от клиента на живия сайт (2 различни
  браузъра): <a> е "inline" по подразбиране, затова кликаемата зона беше
  само около самите букви на думата, докато редът (<li>) визуално изглежда
  разтеглен на цялата ширина (заради border-bottom). Тап извън буквите
  падаше върху обикновен текстов контейнер (не линк) → телефонът
  превключваше на избиране на текст, вместо да отвори страницата. Сега
  целият ред е кликаем. -->
  .mobile-drawer li{ width: 100%; }
  .mobile-drawer a{ display: block; width: 100%; box-sizing: border-box; font-size: 16px; font-weight: 600; color: var(--ink); padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .mobile-drawer a.is-accent{ color: var(--accent); }
  .mobile-drawer .drawer-cta{ margin-top: 16px; background: var(--accent); color: oklch(98% 0.01 85); text-align: center; padding: 14px; border-radius: 12px; font-weight: 700; border-bottom: 0; }

  .promo-bar{ top: 64px; padding: 9px 16px; font-size: 12px; flex-wrap: wrap; gap: 6px; }

  .hero{ height: 520px; }
  .hero-bg-svg{ opacity: 0.5; }
  .hero-inner{ padding: 0 20px 40px; flex-direction: column; align-items: flex-start; gap: 0; }
  /* Кръг 28: КЛЮЧОВ бъг, открит от реален скрийншот — .hero-inner е flex
  контейнер с align-items:flex-start (не stretch). В такъв flex ред/колона,
  дете БЕЗ изрична ширина се смалява до собствения си съдържателен размер
  ("shrink-to-fit"), а не до пълната ширина на родителя — затова заглавието
  и текстът вътре в .hero-copy НЕ се пренасяха на нов ред на телефон, а се
  опитваха да заемат пълната си "естествена" ширина в една линия и се
  отрязваха на ръба на екрана. max-width:100% САМО ограничава горна
  граница, но не кара елемента да ЗАЕМЕ пълната налична ширина — затова
  добавяме изрично width:100%, което решава проблема категорично. */
  .hero-copy{ max-width: 100%; width: 100%; }
  .hero-eyebrow{ font-size: 11.5px; margin-bottom: 14px; }
  .hero-title{ font-size: 34px; line-height: 1.1; margin: 0 0 16px; }
  .hero-sub{ font-size: 15px; max-width: 100%; margin: 0 0 22px; }
  .hero-ctas{ width: 100%; }
  .hero-ctas a{ flex: 1; text-align: center; }
  .hero-photo{ display: none; }

  .booking-bar-wrap{ padding: 0 16px; margin-top: -34px; }
  .booking-bar{ border-radius: 18px; padding: 20px; gap: 16px; flex-direction: column; align-items: stretch; text-align: center; }
  .booking-bar > a.btn-accent{ width: 100%; text-align: center; }

  .facts-strip{ padding: 22px 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .facts-strip .divider{ display: none; }
  .facts-strip .fact span{ font-size: 14px; }

  .offers-section{ padding: 24px 20px; }
  .offers-section .carousel[data-count]{ height: 220px !important; }

  .about-section{ padding: 48px 20px; flex-direction: column; gap: 24px; }
  .about-copy{ min-width: 0; width: 100%; }
  .about-copy h2{ font-size: 26px; }
  .about-copy p{ font-size: 15px; }
  .photo-break{ margin: 0 20px 40px; height: 220px; }

  .amenities-section{ padding: 48px 20px; }
  .section-head h2{ font-size: 22px; }
  .amenities-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px; max-width: 100%; }
  .amenity-card{ padding: 18px 12px; }
  .amenity-icon{ width: 36px; height: 36px; }
  .amenity-card .label{ font-size: 12px; }

  .spaces-section{ padding: 48px 20px; }
  .spaces-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .spaces-tile-img{ height: 140px; }

  .rooms-section{ padding: 0 20px 48px; }
  .rooms-grid{ grid-template-columns: 1fr; gap: 20px; }
  .room-photo{ height: 160px; }
  .room-body{ padding: 18px 20px; }
  .room-body h3{ font-size: 18px; }
  .room-body p{ font-size: 14px; }

  .around-section{ padding: 48px 20px; }
  .around-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
  .around-photo{ height: 120px; }
  .around-body{ padding: 16px 18px; }
  .around-body .t{ font-size: 15.5px; }
  .around-body .d{ font-size: 13px; }

  .location-section{ padding: 0 20px 48px; gap: 16px; flex-direction: column; }
  .location-info, .location-map{ min-width: 0; width: 100%; }
  .location-info{ padding: 28px 24px; }
  .location-info h2{ font-size: 22px; }
  /* По молба на клиента (кръг 19): на телефон 4-те карти в 1 ред бяха
  твърде тесни (причина за преливащия текст) — вече са 2 реда по 2 карти,
  всяка почти двойно по-широка. */
  .location-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .location-map{ aspect-ratio: 16 / 9; min-height: 0; }

  .reviews-section{ padding: 0 20px 48px; }
  .reviews-grid{ grid-template-columns: 1fr; gap: 14px; }

  .cta-section{ padding: 40px 20px; text-align: center; flex-direction: column; }
  .cta-section h2{ font-size: 22px; }

  .site-footer{ padding: 40px 20px 28px; flex-direction: column; gap: 26px; }
  .footer-cols{ gap: 30px; }
  .footer-bottom{ padding: 16px 20px 80px; flex-direction: column; gap: 10px; }

  .cookie-banner{ left: 0; right: 0; bottom: 0; padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .cookie-banner.has-bottom-bar{ bottom: 64px; }
  .cookie-banner p{ max-width: 100%; font-size: 12.5px; }
  .cookie-actions{ width: 100%; }
  .cookie-actions button{ flex: 1; text-align: center; }

  /* Кръг 50, ПОПРАВЯ кръг 49: клиентски скрийншот на мобилен показа, че
     `flex-wrap:wrap` с `flex:1 1 130px` не решава проблема, а само го
     мести — на 375px ширина "Възрастни" и "Деца" се събират по 2 на ред
     (по ~половин ширина всяка), а "Бебе" остава сама на следващия ред и
     `flex-grow:1` я разтяга на ЦЯЛАТА ширина — трите карти пак излизат с
     различен размер (сега двете горе са по-тесни от самотната долу).
     Единственият начин трите да имат ГАРАНТИРАНО еднакъв размер на тесен
     екран, независимо от точната ширина на телефона, е да не разчитаме на
     "пренасяне" изобщо — редят се В КОЛОНА, всяка по 100% ширина, една под
     друга. Тествано на живо на 375px (temporary CSS инжекция) преди да
     влезе в кода — потвърдено: и трите карти вече излизат с абсолютно
     еднаква ширина. */
  .radeia-guest-fields-row{ flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  .radeia-guest-field-card{ flex: none; width: 100%; min-width: 0; padding: 12px 14px; }

  .connect-section{ padding: 40px 20px; }
  .connect-buttons{ gap: 12px; }
  .connect-btn{ flex: 1 1 calc(50% - 12px); justify-content: center; padding: 14px 10px; }
  .connect-btn .lbl{ font-size: 13.5px; }

  .mobile-bottom-bar{ display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 8px; padding: 10px 14px; background: oklch(98% 0.01 85 / 0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -8px oklch(20% 0.03 95 / 0.25); }
  .mobile-bottom-bar a{ flex: 1; text-align: center; padding: 10px; border-radius: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
  .mobile-bottom-bar a.outline{ border: 1px solid var(--line); color: var(--ink); }
  .mobile-bottom-bar a.solid{ flex: 1.2; background: var(--accent); color: oklch(98% 0.01 85); }

  .page-content-wrap{ padding: 32px 20px; }

  /* Кръг 30/32/33/34: календарът за наличност на телефон — двата месеца
  един под друг (вече се случва естествено заради flex-wrap в 20.2),
  клетките остават достатъчно големи за удобен допир с пръст. */
  .mphb-calendar{ padding: 4px 0 6px; }
  .mphb-calendar .datepick-month-row{ gap: 18px; }
  /* Същата !important поправка от кръг 50 — виж коментара при десктоп
     правилото по-горе — важи и на мобилен изглед. */
  .mphb-calendar .mphb-date-cell{ height: 46px !important; font-size: 13.5px; border-radius: 8px; }
  .mphb-calendar .mphb-price{ font-size: 10px; }
  /* Кръг 46: мобилният вариант на td височината, в синхрон с по-малката
     .mphb-date-cell (46px клетка + 3px padding отгоре/отдолу = 52px). */
  .mphb-calendar td{ height: 52px !important; max-height: 52px !important; }
}