/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  background-color: var(--background-beige-01);
  /* Първият ред е за стари браузъри; долните два дават WebP там,
     където се поддържа — снимката пада от ~1.9 MB на ~130 KB. */
  background-image: url("../images/Images/hero-desktop-image.png");
  background-image: -webkit-image-set(url("../images/Images/hero-desktop-image.webp") type("image/webp"),
      url("../images/Images/hero-desktop-image.png") type("image/png"));
  background-image: image-set(url("../images/Images/hero-desktop-image.webp") type("image/webp"),
      url("../images/Images/hero-desktop-image.png") type("image/png"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-balloons {
  position: absolute;
  width: 250px;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero-main-container {
  width: 620px;
  height: 580px;
  background-image: url("../images/Illustrations/balloon-hero.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  position: relative;
  margin-right: 96px;
  z-index: 1;
}

.hero-benefits-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  z-index: 10;
}

.hero-benefit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-yellow);
}

.hero-benefit-dot.blue {
  background-color: var(--accent-blue);
}

.hero-benefit-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--bold);
  color: #666666;
}

.hero-title {
  font-size: 36px;
  line-height: 48px;
  font-weight: var(--extraBold);
  color: var(--text-01);
  text-align: center;
  max-width: 420px;
  margin-top: 4px;
  z-index: 10;
}

/*
 * Надредът в H1 — търсената дума и мястото (08.10.2026). Малък и тих, за да
 * не спори с голямото заглавие под него.
 */
.hero-title-mesto {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--bold);
  color: #666666;
}

/* На телефон на един ред — иначе „София" остава сама на втория. */
@media (max-width: 480px) {
  .hero-title-mesto {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 4px;
  }
}

.hero-btn {
  height: 48px;
}

.hero-capacity-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  z-index: 10;
}

.capacity-text {
  padding: 8px 12px;
  min-width: 132px;
  font-size: 13px;
  font-weight: var(--bold);
  color: var(--text-01);
  border-radius: 100px;
  border: solid 2px var(--accent-yellow);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f1e5;
}

.capacity-text.blue {
  border-color: var(--accent-blue);
}

.capacity-text.green {
  border-color: var(--accent-green);
}

.hero-stars {
  position: absolute;
  width: 80px;
  top: 100px;
  right: 32px;
}

.hero-gift {
  position: absolute;
  width: 108px;
  bottom: 184px;
  left: 0px;
  transform: rotate(-15deg);
  z-index: 1;
}

.hero-gift-mobile {
  display: none;
}

/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.section-about {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 160px 0 80px 0;
}

.about-main-container {
  width: var(--shirina);
  gap: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.about-text-main-container {
  max-width: 790px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.section-name {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--semiBold);
  border-radius: 100px;
  width: fit-content;
}

.section-name.left {
  transform: rotate(-8deg);
}

.section-name.right {
  transform: rotate(8deg);
}

.section-name.about {
  background-color: var(--accent-orange);
}

.section-name.location {
  background-color: var(--accent-yellow);
}

.section-name.gallery {
  background-color: var(--accent-green);
}

.section-name.contact {
  background-color: var(--accent-blue);
}

.section-name.party,
.section-name.schedule {
  background-color: var(--accent-pink);
}

.section-title {
  font-size: 38px;
  line-height: 48px;
  text-align: center;
  font-weight: var(--extraBold);
}

.about-text {
  margin-top: 24px;
  font-size: 18px;
  font-weight: var(--medium);
  color: var(--text-02);
  text-align: center;
}

.about-sun {
  position: absolute;
  height: 124px;
  width: auto;
  top: 32px;
  left: -100px;
}

.about-butterfly {
  position: absolute;
  height: 50px;
  width: auto;
  top: 24px;
  right: -80px;
  transform: rotate(15deg);
}

.about-benefits-main-container {
  width: 100%;
  height: auto;
  margin-top: 24px;
  position: relative;
}

.about-benefits-card-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.about-benefit-card {
  width: 282px;
  height: 254px;
  border: solid 1px var(--border);
  background-color: #fdfdfc;
  gap: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding: 32px 24px;
  border-radius: 16px;
}

.about-benefit-card.orange:is(:hover, :focus-visible, :focus-within) {
  scale: 1.05;
  border: solid 3px var(--accent-orange);
}

.about-benefit-card.yellow:is(:hover, :focus-visible, :focus-within) {
  scale: 1.05;
  border: solid 3px var(--accent-yellow);
}

.about-benefit-card.green:is(:hover, :focus-visible, :focus-within) {
  scale: 1.05;
  border: solid 3px var(--accent-green);
}

.about-benefit-card.blue:is(:hover, :focus-visible, :focus-within) {
  scale: 1.05;
  border: solid 3px var(--accent-blue);
}

.about-benefit-card.pink:is(:hover, :focus-visible, :focus-within) {
  scale: 1.05;
  border: solid 3px var(--accent-pink);
}

.benefit-title {
  font-size: 18px;
  font-weight: var(--semiBold);
}

.benefit-description {
  font-size: 14px;
  font-weight: var(--medium);
  color: var(--text-03);
}

.about-elephant {
  width: 130px;
  height: auto;
  position: absolute;
  left: -50px;
  top: -114px;
}

.about-bunny {
  width: 115px;
  height: auto;
  position: absolute;
  right: -72px;
  bottom: -24px;
}

/*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/

.celebrations-section {
  background-color: var(--background-beige-01);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 64px;
  position: relative;
  padding: 80px 0 120px 0;
}

.celebrations-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  width: 800px;
  position: relative;
}

.celebrations-description-text {
  margin-top: 24px;
  font-size: 18px;
  line-height: 24px;
  color: var(--text-02);
  text-align: center;
}

.celebrate-butterfly {
  position: absolute;
  width: 68px;
  transform: rotate(-24deg);
  top: 0;
  right: 0;
}

.celebrate-draw-orange {
  position: absolute;
  height: 38px;
  bottom: 36px;
  left: -48px;
}

.celebrate-draw-pink {
  position: absolute;
  bottom: 36px;
  right: -48px;
}

.occasion-container {
  width: 100%;
  --occasion-gap: 16px;
  overflow: hidden;
  padding: 8px 0;
}

.occasion-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: var(--occasion-gap);
  animation: occasion-scroll-right 35s linear infinite;
  will-change: transform;
}

.occasion-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--occasion-gap);
}

/*
 * ⚠️ ПОРАСНАХА НА 10.08.2026 — от 280×136 на 340×168.
 *
 * Лентата минава сама и човек има няколко секунди да прочете какво пише в
 * нея. При 18px надписът „Лични поводи и семейни празници" се събираше на
 * три реда в кутия, висока колкото два — думите оставаха четими, но картата
 * не се набиваше на очи от разстоянието, от което се гледа началната
 * страница.
 *
 * Височината расте заедно с ширината. Само по-широка кутия със същия шрифт
 * би оставила празно отгоре и отдолу.
 */
.single-occasion {
  width: 340px;
  height: 168px;
  background-color: #fdfdfc;
  border: solid 3px var(--accent-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border-radius: 20px;
  font-size: 22px;
  font-weight: var(--semiBold);
  text-align: center;
  flex-shrink: 0;
  padding: 0 18px;
}

.single-occasion.yellow {
  border-color: var(--accent-yellow);
}

.single-occasion.orange {
  border-color: var(--accent-orange);
}

.single-occasion.green {
  border-color: var(--accent-green);
}

.single-occasion.blue {
  border-color: var(--accent-blue);
}

.single-occasion.pink {
  border-color: var(--accent-pink);
}

.occasion-icon {
  width: 40px;
  height: 40px;
}

@keyframes occasion-scroll-right {
  from {
    transform: translateX(calc(-50% - (var(--occasion-gap) / 2)));
  }

  to {
    transform: translateX(0);
  }
}

.occasion-photo {
  border: solid 8px var(--white);
  border-radius: 24px;
  position: absolute;
}

.occasion-photo.left {
  width: 320px;
  height: 320px;
  top: -120px;
  left: -48px;
  transform: rotate(-15deg);
}

.occasion-photo.right {
  width: 300px;
  height: 300px;
  top: -120px;
  right: 30px;
  transform: rotate(15deg);
}

/*-----------------------------------*\
  #PRICING — трите пакета накратко
\*-----------------------------------*/

/*
 * ⚠️ ТУК СА СТИЛОВЕТЕ НА sections/paketi.php, която на 10.08.2026 замени
 * sections/pricing.php. Заедно с онази отпадна и pricing.css — 1532 реда,
 * които се зареждаха САМО заради началната страница.
 *
 * Затова новите правила влизат в index.css, а не в собствен файл: секцията
 * се ползва на едно място и не заслужава втора заявка.
 *
 * Видът е взет от „Трите пакета накратко" в rozhdeni-dni.php. Там си остава
 * както е; ако някой ден двете се разминат, близнакът е в rd.css при
 * `.rd-paket`.
 */
/*
 * ⚠️ ОТСТЪПЪТ ОТСТРАНИ Е НА СЕКЦИЯТА, НЕ ПРЕЗ `--shirina`.
 *
 * Другите секции тук стоят на `width: var(--shirina)`, което е
 * `min(100% - 2 * 80px, 1600px)`. Сложи ли се И странично поле на самата
 * секция, двете се събират: при екран 390px контейнерът излезе 190px широк —
 * карта, по-тясна от половин телефон. Мерено на 10.08.2026.
 *
 * Затова тук полето е едно и е на секцията, а контейнерът само се ограничава
 * с `max-width`.
 */
.paketi-section {
  width: 100%;
  height: auto;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.paketi-main-container {
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 48px;
}

.paketi-title-container {
  max-width: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.paketi-uvod {
  font-size: 18px;
  line-height: 1.6;
  font-weight: var(--medium);
  color: var(--text-02);
  text-align: center;
}

.paketi-mreja {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.paketi-karta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  border-radius: 24px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);

  /* Цветът на пакета е ТЪНКА линия отгоре, не цял фон. Три плътно оцветени
     карти една до друга се бият помежду си и никоя не печели. */
  border-top: 6px solid var(--beige-04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.paketi-karta:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(49, 47, 48, 0.08);
}

.paketi-karta.paketi-jalt {
  border-top-color: var(--accent-yellow);
}

.paketi-karta.paketi-sin {
  border-top-color: var(--accent-blue);
}

.paketi-karta.paketi-rozov {
  border-top-color: var(--accent-pink);
}

.paketi-karta-ime {
  font-size: 22px;
  line-height: 1.2;
  font-weight: var(--extraBold);
}

.paketi-karta-cena {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  color: var(--text-03);
}

.paketi-karta-cena strong {
  font-size: 28px;
  font-weight: var(--extraBold);
  color: var(--text-01);
}

.paketi-karta-vodach {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-03);
}

.paketi-karta-spisak {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}

.paketi-karta-spisak li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.paketi-karta-spisak img {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* „Без торта" при Стандарт. Изписва се, не се премълчава.
   `margin-top: auto` го лепва за дъното — иначе трите карти свършват на
   различна височина и редът увисва по средата на най-високата. */
.paketi-karta-bez {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  color: var(--neutral-13);
  border-top: 1px dashed var(--beige-04);
}

/* Редът за анимацията, фотографа и почасовата игра — тях ги няма вече на
   началната страница и този ред е единственото, което казва, че съществуват. */
.paketi-dopalnitelno {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-03);
  text-align: center;
}

.paketi-dopalnitelno a {
  color: var(--accent-orange-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Полюшването е същото като на другите решетки в сайта — виж `--plavane`
   в style.css. Съседните не бива да плуват в такт. */
.paketi-karta {
  animation: var(--plavane);
}

.paketi-karta:nth-child(3n + 2) {
  animation-duration: 8.1s;
  animation-delay: -2.4s;
}

.paketi-karta:nth-child(3n + 3) {
  animation-duration: 6.6s;
  animation-delay: -4.9s;
}

@media (prefers-reduced-motion: reduce) {
  .paketi-karta:hover {
    transform: none;
  }
}

/*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
.gallery-section {
  width: 100%;
  height: auto;
  padding: 80px 0 160px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--background-beige-01);
}

.gallery-wave {
  width: 100%;
  height: auto;
  position: absolute;
  top: -48px;
}

/*
 * ⚠️ ШИРИНАТА СТОИ ТУК, А НЕ НА `.gallery-images-container` — 07.08.2026.
 *
 * Дотук тази кутия нямаше ширина изобщо: тя е дете на flex секция, тоест се
 * свива по съдържанието си, а съдържанието ѝ беше закованите 1200px на
 * лентата със снимки. Работеше по случайност.
 *
 * Щом лентата стана `var(--shirina)` — тоест ПРОЦЕНТ — сметката се завъртя в
 * кръг: процентът се мери спрямо родител, чиято ширина се мери спрямо детето.
 * Браузърът пада на `auto` и кутията се разпъва по ЦЯЛАТА лента със снимки.
 * Измерено: 21 636px. Цялата страница тръгна настрани.
 *
 * Сега ширината е тук, където е определена, а лентата долу е `width: 100%`.
 * `min-width: 0` пази да не се повтори по друг път — точка О18.
 */
.gallery-main-container {
  width: var(--shirina);
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 64px;
}

.gallery-title-container {
  max-width: 590px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.gallery-location-tab-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 48px;
  margin-top: 24px;
}

.gallery-tab {
  width: 175px;
  height: 100%;
  font-size: 16px;
  font-weight: var(--semiBold);
  color: var(--text-02);
  border: solid 2px #cdcbcc;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.gallery-tab:is(:hover, :focus-visible, :focus-within) {
  cursor: pointer;
}

.gallery-tab.left {
  border-style: solid;
  border-width: 2px 0 2px 2px;
  border-color: #cdcbcc;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.gallery-tab.right {
  border-style: solid;
  border-width: 2px 2px 2px 0;
  border-color: #cdcbcc;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.gallery-tab.left.active {
  border-color: var(--accent-yellow);
  background-color: var(--accent-yellow);
}

.gallery-tab.right.active {
  border-color: var(--accent-pink);
  background-color: var(--accent-pink);
}

.illustration-draw-pink {
  position: absolute;
  width: 40px;
  height: auto;
  bottom: 18px;
  right: -52px;
}

.illustration-draw-orange {
  position: absolute;
  width: 38px;
  height: auto;
  top: 62px;
  left: -52px;
}

/*
 * ⚠️ ТЕЗИ ДВЕ ПРАВИЛА НЕ РИСУВАТ НИЩО. Нито един файл в проекта не слага
 * класовете `gallery-cloud-small` и `gallery-cloud-big` в разметката —
 * проверено с търсене из целия проект и с поглед в самата страница.
 *
 * Оставени са, защото илюстрациите ги има в assets и някой ден може да се
 * върнат. Числото обаче се смени: беше преписано `1200px` — ширината на
 * кутията отстрани, от която се мери остатъкът. Кутията вече не е 1200px,
 * така че литералът щеше да е грешен от деня, в който облачетата се появят.
 */
.gallery-cloud-small {
  width: 100px;
  height: auto;
  position: absolute;
  overflow: hidden;
  top: -30px;
  left: calc((100% - var(--shirina)) / 2);
  z-index: -1;
}

.gallery-cloud-big {
  width: 142px;
  height: auto;
  position: absolute;
  overflow: hidden;
  top: -28px;
  right: calc(((100% - var(--shirina)) / 2) + 140px);
  z-index: -1;
}

/*-----------------------------------*\
  #GALLERY IMAGES
\*-----------------------------------*/

.gallery-images-container {
  /* Ширината е на родителя `.gallery-main-container` — виж бележката там. */
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  position: relative;
  border-radius: 28px;
  padding: 18px;
}

.tedy-bear {
  width: 200px;
  height: 280px;
  position: absolute;
  bottom: -60px;
  right: 0px;
}

.elephant-gallery {
  width: 270px;
  position: absolute;
  bottom: -24px;
  left: 0px;
}

.gallery-images-container .viewport {
  position: relative;
  overflow: hidden;
}

.gallery-images-container .track {
  display: flex;
  gap: 24px;
  padding: 0 204px;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.gallery-images-container .slide {
  flex: 0 0 792px;
  height: 618px;
  border-radius: 24px;
  overflow: hidden;
  background: #eee;
  border: solid 12px var(--white);
}

.gallery-images-container .slide img {
  width: 768px;
  height: 594px;
  object-fit: cover;
  display: block;
}

.gallery-images-container .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  background-color: transparent;
}

.btn-arrow {
  width: 54px;
  height: 24px;
}

/*
 * -40px, а не -88px — 07.08.2026.
 *
 * Стрелките висят НАВЪН от лентата със снимки, тоест живеят в полето отстрани.
 * Осемдесет и осемте пиксела бяха премерени за кутия от 1200px: в прозорец от
 * 1440px полето беше 120px и стрелката оставаше на 32px от ръба.
 *
 * Кутията вече расте с прозореца, а полето е постоянни 80px. Премерено в
 * браузъра: при -88px лявата стрелка излизаше 8px ИЗВЪН екрана — и понеже
 * `overflow-x: clip` на body реже без лента за скрол, просто изчезваше
 * наполовина, без нищо да подскаже защо.
 *
 * -40px е числото, което същият файл вече ползваше на по-тесен екран. Сега е
 * едно за всички ширини и стрелките стоят в средата на полето.
 */
.gallery-images-container .nav-btn.prev {
  left: -40px;
}

.gallery-images-container .nav-btn.next {
  right: -40px;
}

.gallery-images-container .nav-btn:focus-visible {
  outline: 2px solid #65c466;
}

/* Dots */
.gallery-images-container .dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.gallery-images-container .dots button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: #e7daca;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.2s ease;
}

.gallery-images-container .dots button[aria-selected="true"] {
  background: var(--accent-green);
  width: 20px;
  height: 20px;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(26, 26, 26, 0.88);
  padding: 32px;
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-image {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  border: 8px solid var(--background-beige-02);
  background-color: var(--white);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.lightbox-close {
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--accent-orange);
  font-size: 24px;
  line-height: 24px;
}

.lightbox-prev {
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-arrow {
  width: 56px;
  height: auto;
  filter: var(--filter-accent-pink);
}


/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact-section {
  background-color: var(--background-beige-01);
  width: 100%;
  height: auto;
  padding: 80px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 48px;
  position: relative;
}

.boy-illustration {
  position: absolute;
  right: 0;
  top: 156px;
}

.girl-illustration {
  position: absolute;
  left: 0;
  top: 64px;
}

.contact-main-container {
  width: var(--shirina);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 48px;
}

.contact-title-container {
  width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}

.contact-links-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

.party-address-container {
  width: 390px;
  height: 88px;
  padding: 16px 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  background-color: var(--white);
  border: solid 3px var(--accent-yellow);
  border-radius: 16px;
  transform: rotate(4deg);
  transition: 0.5s;
}

.address-icon-green {
  width: 56px;
  height: 56px;
}

.party-address-container.pink {
  border-color: var(--accent-pink);
  margin-left: -16px;
  z-index: 1;
}

.adress-text-cntainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.addtess-party-title {
  font-weight: var(--medium);
  font-size: 18px;
}

.adress-party-link {
  font-size: 18px;
  font-weight: var(--semiBold);
}

.party-address-container:is(:hover, :focus-visible, :focus-within) {
  background-color: var(--accent-yellow);
}

.party-address-container.pink:is(:hover, :focus-visible, :focus-within) {
  background-color: var(--accent-pink);
}

.contact-map-inquiry-main-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}

.contact-map-main-container {
  width: 620px;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 32px;
  padding: 32px 24px;
  background-color: var(--white);
  border-radius: 16px;
  flex-shrink: 0;
}

.contact-map-title-info-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.contact-map-info-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contact-map-title {
  font-size: 24px;
  font-weight: var(--bold);
  color: #1a191a;
  margin-bottom: 4px;
}

.contact-working-time {
  font-size: 18px;
  color: #312f30;
}

/*
 * Бележката под работното време — 11.08.2026.
 *
 * Три изречения под два реда часове. По-дребна и по-светла от тях, за да не се
 * състезава с числата, но не толкова, че да се пропусне: тя носи единственото,
 * което кара родител да се обади за делнична сутрин.
 *
 * `max-width` в знаци, не в пиксели: редът остава четим и когато колоната се
 * разшири на голям екран. Над ~75 знака окото започва да губи началото на
 * следващия ред.
 */
.contact-hours-note {
  font-size: 15px;
  line-height: 1.5;
  color: #565253;
  max-width: 46ch;
  margin-top: 8px;
}

.map {
  width: 100%;
  height: 220px;
  border-radius: 16px;
}

/*
 * ⚠️ ПОЛЕТАТА НА ФОРМАТА ВЕЧЕ НЕ СА ТУК — 15.08.2026.
 *
 * `.contact-form-*`, `.contact-consent-*` и `.contact-field-error` се
 * преместиха в assets/css/form.css. Стояха тук, а формата се показва на пет
 * страници — три от които не зареждат index.css и полетата им излизаха голи.
 * Виж дългата бележка в началото на form.css.
 *
 * Тук остава само `.inquiry-button`: той е външен вид на бутона, не устройство
 * на формата, и важи само за страниците с index.css.
 */

.inquiry-button {
  border: none;
  background-color: var(--accent-orange);
}

.inquiry-button:is(:hover, :focus-visible, :focus-within) {
  background-color: var(--accent-orange);
}

@media (max-width: 1450px) {
  /*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/

  .occasion-photo.left {
    width: 240px;
    height: 240px;
    top: -120px;
    left: -48px;
    transform: rotate(-15deg);
  }

  .occasion-photo.right {
    width: 200px;
    height: 200px;
    top: -120px;
    right: 30px;
    transform: rotate(15deg);
  }
}

/*
 * ТУК СТОЕШЕ `@media (max-width: 1380px)` със стрелките на -40px. Излишен е:
 * -40px вече е основната стойност за всички ширини. Виж бележката при нея.
 */

/*
 * ⚠️ ЧЕТИРИТЕ РЕДА `width: 1000px` В ТОЗИ БЛОК СА МАХНАТИ — 07.08.2026.
 *
 * Бяха на .about-main-container, .gallery-images-container и
 * .contact-main-container. (Четвъртият беше на секцията с менюто — тя си
 * отиде цялата на 08.08.2026, виж menu.php.) Всичко останало в блока си
 * остава — то не е ширина на секция, а подредба в две колони, размери на
 * илюстрации и на кадрите в лентата със снимки.
 *
 * Защо паднаха: ширината горе вече е `var(--shirina)` и мени размера си
 * плавно с прозореца. Стъпало на 1320px би я засякло и секцията щеше да скача
 * от 1240px на 1000px при един пиксел разлика в прозореца.
 *
 * Долната граница остава непокътната: на 1150px секциите взимат padding
 * отстрани и минават на `width: 100%` вътре в него.
 */
@media (max-width: 1320px) {
  /*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

  .about-benefits-main-container {
    width: 100%;
    height: auto;
    margin-top: 24px;
    position: relative;
  }

  .about-benefits-card-container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
  }

  .about-benefit-card {
    width: 100%;
  }

  /*-----------------------------------*\
  #GALLERY IMAGES
\*-----------------------------------*/

  .tedy-bear {
    width: 180px;
    height: 260px;
    position: absolute;
    bottom: 24px;
    right: 80px;
  }

  .gallery-images-container .slide {
    flex: 0 0 642px;
    height: 560px;
  }

  .gallery-images-container .slide img {
    width: 618px;
    height: 536px;
  }

  .btn-arrow {
    width: 54px;
    height: 24px;
  }


  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

  .contact-title-container {
    max-width: 800px;
    width: 100%;
  }

  .contact-map-inquiry-main-container {
    gap: 24px;
  }

  .contact-map-main-container {
    width: 480px;
  }
}

@media (max-width: 1150px) {
  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/

  .hero-balloons {
    width: 200px;
  }

  .hero-main-container {
    width: 560px;
    height: 540px;
    margin-right: 32px;
  }

  .hero-benefits-container {
    gap: 16px;
  }

  .hero-benefit-text {
    font-size: 14px;
  }

  .hero-title {
    font-size: 32px;
    line-height: 40px;
  }

  .capacity-text {
    padding: 8px;
  }

  .hero-stars {
    position: absolute;
    width: 80px;
    top: 100px;
    right: 32px;
  }

  .hero-gift {
    width: 90px;
    bottom: 184px;
  }

  /*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

  .section-about {
    padding: 80px 48px;
  }

  .about-main-container {
    width: 100%;
  }

  .about-text-main-container {
    max-width: 700px;
  }

  .section-title {
    font-size: 32px;
    line-height: 40px;
  }

  .about-bunny {
    width: 100px;
    right: 0px;
    bottom: -120px;
  }

  /*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/

  .celebrations-description-text {
    font-size: 16px;
  }

  .celebrate-butterfly {
    width: 60px;
  }

  .single-occasion {
    width: 310px;
    height: 150px;
    font-size: 20px;
  }

  .occasion-icon {
    width: 36px;
    height: 36px;
  }

  .occasion-photo.right {
    display: none;
  }

  /*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
  .gallery-section {
    padding: 80px 48px 160px 48px;
  }

  .gallery-main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 64px;
    width: 100%;
  }

  .illustration-draw-pink {
    position: absolute;
    width: 40px;
    height: auto;
    bottom: 18px;
    right: 24px;
  }

  .illustration-draw-orange {
    position: absolute;
    width: 38px;
    height: auto;
    top: 62px;
    left: -52px;
  }

  .gallery-cloud-small {
    width: 100px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -30px;
    left: calc((100% - 800px) / 2);
    z-index: -1;
  }

  .gallery-cloud-big {
    width: 142px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -28px;
    right: calc(((100% - 800px) / 2) + 60px);
    z-index: -1;
  }

  /*-----------------------------------*\
  #GALLERY IMAGES
\*-----------------------------------*/

  .gallery-images-container {
    width: 800px;
  }

  .tedy-bear {
    width: 160px;
    height: auto;
    right: 36px;
  }

  .gallery-images-container .slide {
    flex: 0 0 560px;
    height: 560px;
  }

  .gallery-images-container .slide img {
    width: 100%;
    height: 100%;
  }

  .btn-arrow {
    width: 32px;
    height: auto;
  }


  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

  .contact-section {
    padding: 80px 48px;
  }

  .contact-main-container {
    width: 100%;
  }

  .contact-title-container {
    max-width: 800px;
    width: 100%;
  }

  .contact-map-main-container {
    width: 440px;
  }
}

@media (max-width: 970px) {
  /*
   * ⚠️ ТРИТЕ ПАКЕТА МИНАВАТ НАПРАВО НА ЕДНА КОЛОНА, БЕЗ СТЪПКА ПРИ ДВЕ.
   *
   * Пакетите са три. При две колони третият остава сам на втория ред, а до
   * него зее празно. Разпъването му през двете колони пък прави карта, два
   * пъти по-широка от съседите си — при съдържателни карти това чете като
   * „този е по-важният", което не е вярно.
   *
   * Същото решение като при .rd-paketi в rd.css.
   */
  .paketi-mreja {
    grid-template-columns: minmax(0, 1fr);
  }

  .paketi-karta-bez {
    margin-top: 12px;
  }

  .paketi-section {
    padding: 80px 20px;
  }

  /*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

  .section-about {
    padding: 80px 32px;
  }

  .about-main-container {
    width: 100%;
  }

  .about-text-main-container {
    max-width: 560px;
  }

  .section-title {
    font-size: 32px;
    line-height: 40px;
  }

  .about-sun {
    position: absolute;
    height: 100px;
    width: auto;
    top: 48px;
    left: -100px;
  }

  .about-elephant {
    width: 124px;
    height: auto;
    position: absolute;
    left: 0px;
    top: -120px;
  }

  /*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/
  .celebrations-section {
    padding: 80px 32px 120px 32px;
  }

  .celebrations-title-container {
    width: 100%;
  }

  .celebrate-draw-orange {
    position: absolute;
    height: 38px;
    bottom: 64px;
    left: 0px;
  }

  .celebrate-draw-pink {
    position: absolute;
    bottom: -24px;
    right: 0px;
  }

  .occasion-container {
    width: calc(100% + 64px);
    --occasion-gap: 16px;
    overflow: hidden;
    padding: 8px 0;
  }

  .occasion-photo.left {
    width: 200px;
    height: 200px;
    top: -120px;
    left: -48px;
    transform: rotate(-15deg);
  }

  /*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
  .gallery-section {
    padding: 80px 32px 160px 32px;
  }

  .gallery-main-container {
    gap: 48px;
  }

  .gallery-title-container {
    max-width: 560px;
  }

  .illustration-draw-pink {
    position: absolute;
    width: 40px;
    height: auto;
    bottom: 32px;
    right: 0px;
  }

  .illustration-draw-orange {
    position: absolute;
    width: 38px;
    height: auto;
    top: 62px;
    left: -52px;
  }

  .gallery-cloud-small {
    width: 64px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -10px;
    left: calc((100% - 560px) / 2);
    z-index: -1;
  }

  .gallery-cloud-big {
    width: 102px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -28px;
    right: calc(((100% - 560px) / 2) + 20px);
    z-index: -1;
  }

  .elephant-gallery {
    width: 200px;
    position: absolute;
    bottom: -24px;
    left: 0px;
  }

  /*-----------------------------------*\
#GALLERY IMAGES
\*-----------------------------------*/

  .gallery-images-container {
    width: 600px;
  }

  .tedy-bear {
    width: 140px;
    height: auto;
    right: 0px;
  }

  .gallery-images-container .slide {
    flex: 0 0 560px;
    height: 560px;
  }

  .gallery-images-container .slide img {
    width: 100%;
    height: 100%;
  }

  .btn-arrow {
    width: 32px;
    height: auto;
  }


  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

  .contact-section {
    padding: 80px 32px;
  }

  .contact-map-inquiry-main-container {
    flex-direction: column;
  }

  .contact-title-container {
    max-width: unset;
    width: 100%;
  }

  .contact-map-main-container {
    width: 100%;
  }

  .contact-inquiry-form {
    width: 100%;
  }

  .contact-links-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 32px;
  }

  .party-address-container.pink {
    border-color: var(--accent-pink);
    margin-left: -16px;
    z-index: 1;
    transform: rotate(0deg);
  }
}

@media (max-width: 750px) {
  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/

  .hero-section {
    height: 100dvh;
    /* Първият ред е за стари браузъри; долните два дават WebP там,
       където се поддържа — снимката пада от ~1.9 MB на ~130 KB. */
    background-image: url("../images/Images/hero-mobile-image.png");
    background-image: -webkit-image-set(url("../images/Images/hero-mobile-image.webp") type("image/webp"),
        url("../images/Images/hero-mobile-image.png") type("image/png"));
    background-image: image-set(url("../images/Images/hero-mobile-image.webp") type("image/webp"),
        url("../images/Images/hero-mobile-image.png") type("image/png"));

    justify-content: center;
    align-items: flex-end;
  }

  .hero-main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    position: relative;
    max-width: 560px;
    height: 540px;
    margin-right: 0;
    width: 100%;
    margin-bottom: 64px;
    z-index: 8;
  }

  .hero-benefits-container {
    gap: 12px;
  }

  .hero-benefit-text {
    font-size: 12px;
  }

  .hero-balloons {
    width: 200px;
    bottom: -100px;
  }

  .hero-title {
    font-size: 24px;
    line-height: 32px;
    margin-top: -4px;
  }

  .hero-btn {
    height: 48px;
  }

  .hero-capacity-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    z-index: 1;
  }

  .capacity-text {
    padding: 8px;
    min-width: unset;
    font-size: 12px;
  }

  .hero-stars {
    position: absolute;
    width: 80px;
    top: 100px;
    right: 32px;
  }

  .hero-gift {
    display: none;
  }

  .hero-gift-mobile {
    display: block;
    position: absolute;
    width: 124px;
    bottom: 324px;
    left: -64px;
    z-index: 1;
    transform: rotate(-15deg);
    pointer-events: none;
  }

  /*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

  .section-about {
    padding: 80px 20px;
  }

  .about-main-container {
    width: 100%;
  }

  .about-text-main-container {
    max-width: 560px;
    width: 100%;
  }

  .section-title {
    font-size: 24px;
    line-height: 32px;
  }

  .about-text {
    margin-top: 24px;
    font-size: 16px;
  }

  .about-sun {
    position: absolute;
    height: auto;
    width: 60px;
    top: 0px;
    left: 24px;
  }

  .about-butterfly {
    position: absolute;
    height: 36px;
    width: auto;
    top: 100px;
    right: 0px;
  }

  .about-elephant {
    width: 80px;
    height: auto;
    position: absolute;
    left: 0px;
    top: -72px;
  }

  .about-bunny {
    width: 80px;
    right: 0px;
    bottom: -100px;
  }

  /*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/
  .celebrations-section {
    padding: 80px 20px 120px 20px;
  }

  .occasion-container {
    width: calc(100% + 40px);
    --occasion-gap: 16px;
    overflow: hidden;
    padding: 8px 0;
  }

  /*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
  .gallery-section {
    padding: 80px 20px 120px 20px;
  }

  .gallery-main-container {
    gap: 48px;
  }

  .gallery-title-container {
    max-width: 560px;
  }

  /* .illustration-draw-pink {
        position: absolute;
        width: 40px;
        height: auto;
        bottom: 18px;
        right: -34px;
    }

    .illustration-draw-orange {
        position: absolute;
        width: 38px;
        height: auto;
        top: 62px;
        left: -52px;
    } */

  .gallery-cloud-small {
    width: 64px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -10px;
    left: calc(((100% - 360px) / 2));
    z-index: -1;
  }

  .gallery-cloud-big {
    width: 120px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -28px;
    right: calc(((100% - 360px) / 2) + 10px);
    z-index: -1;
  }

  .gallery-images-container .dots button {
    width: 10px;
    height: 10px;
  }

  .gallery-images-container .dots button[aria-selected="true"] {
    background: var(--accent-green);
    width: 16px;
    height: 16px;
  }

  /*-----------------------------------*\
#GALLERY IMAGES
\*-----------------------------------*/

  .gallery-images-container {
    width: 400px;
  }

  .tedy-bear {
    width: 120px;
    height: auto;
  }

  .gallery-images-container .slide {
    flex: 0 0 360px;
    height: 360px;
  }

  .gallery-images-container .slide img {
    width: 100%;
    height: 100%;
  }

  .btn-arrow {
    width: 32px;
    height: auto;
  }


  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

  .contact-section {
    padding: 80px 20px;
  }

  .boy-illustration {
    position: absolute;
    right: 0;
    top: 320px;
  }
}

@media (max-width: 600px) {
  /*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

  .section-about {
    padding: 48px 16px 80px 16px;
  }

  .about-main-container {
    width: 100%;
  }

  .about-text-main-container {
    max-width: 560px;
    width: 100%;
  }

  .section-title {
    font-size: 24px;
    line-height: 32px;
  }

  .about-text {
    margin-top: 24px;
    font-size: 16px;
  }

  .about-benefits-main-container {
    width: 100%;
    height: auto;
    margin-top: 64px;
    position: relative;
  }

  .about-benefits-card-container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .about-benefit-card {
    width: 100%;
    height: auto;
  }

  .about-butterfly {
    top: 128px;
  }

  /*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/
  .celebrations-section {
    padding: 64px 16px 80px 16px;
  }

  /* -------------------------------------------------------------------------
     ЛЕНТАТА С ПОВОДИТЕ ИЗЛИЗАШЕ 4px ИЗВЪН ЕКРАНА — поправено 14.08.2026
     -------------------------------------------------------------------------
     Лентата нарочно е по-широка от родителя си, за да тече от ръб до ръб.
     Добавката трябва да е РОВНО двойният отстъп на `.celebrations-section`,
     иначе излишъкът излиза навън и страницата се плъзга настрани.

     Тройката се разминаваше само тук:

       ≤900px  отстъп 32px → добавка 64px   ✔
       ≤750px  отстъп 20px → добавка 40px   ✔
       ≤600px  отстъп 16px → добавка 40px   ✘ трябва 32px

     Мерено на 390px: съдържанието беше 394px при екран 390. Осем пиксела
     повече от нужното, разделени на двата края.

     ⚠️ Пипне ли се отстъпът горе, се пипа и числото тук. Затова стоят един до
     друг, а не в различни краища на файла.
     ------------------------------------------------------------------------- */
  .occasion-container {
    width: calc(100% + 32px);
    --occasion-gap: 16px;
    overflow: hidden;
    padding: 8px 0;
  }

  .celebrations-description-text {
    font-size: 16px;
    line-height: 22px;
  }

  .celebrate-butterfly {
    width: 50px;
  }

  /*
   * ⚠️ ТУК ШИРИНАТА Е `auto`, НЕ ЧИСЛО. На телефон картата се свива по
   * надписа си, а `max-width` я държи да не изяде екрана. Затова тук расте
   * таванът, а не ширината — 240px при екран 360px оставя двете съседни
   * карти да се подават отстрани и се вижда, че лентата се движи.
   */
  .single-occasion {
    width: auto;
    height: 124px;
    font-size: 17px;
    padding: 0px 20px;
    max-width: 240px;
  }

  .occasion-icon {
    width: 34px;
    height: 34px;
  }

  @keyframes occasion-scroll-right {
    from {
      transform: translateX(calc(-50% - (var(--occasion-gap) / 2)));
    }

    to {
      transform: translateX(0);
    }
  }

  /*-----------------------------------*\
  #GALLERY
\*-----------------------------------*/
  .gallery-section {
    padding: 64px 16px 80px 16px;
    overflow: hidden;
  }

  .illustration-draw-pink {
    position: absolute;
    width: 32px;
    height: auto;
    bottom: 56px;
    right: 16px;
  }

  .illustration-draw-orange {
    position: absolute;
    width: 28px;
    height: auto;
    top: 72px;
    left: 12px;
  }

  .gallery-cloud-small {
    width: 64px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -10px;
    left: calc(((100% - 360px) / 2));
    z-index: -1;
  }

  .gallery-cloud-big {
    width: 120px;
    height: auto;
    position: absolute;
    overflow: hidden;
    top: -28px;
    right: calc(((100% - 360px) / 2) + 10px);
    z-index: -1;
  }

  .elephant-gallery {
    display: none;
  }

  /*-----------------------------------*\
#GALLERY IMAGES
\*-----------------------------------*/

  .gallery-images-container {
    width: 360px;
    padding: 0;
  }

  .tedy-bear {
    width: 120px;
    height: auto;
    right: 0px;
  }

  .gallery-images-container .slide {
    flex: 0 0 360px;
    height: 360px;
  }

  .gallery-images-container .slide img {
    width: 100%;
    height: 100%;
  }

  .gallery-images-container .nav-btn {
    position: absolute;
    top: calc(50% - 24px);
    transform: translateY(-50%);
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;

    /* Точка О15: 44px вместо 32px — това е целта за пръст. Стрелките са точно
       на телефон, където мястото е малко и пропускането е най-лесно. */
    width: 44px;
    height: 44px;

    border-radius: 50%;
    background-color: var(--accent-green);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gallery-images-container .nav-btn.next {
    right: 24px;
  }

  .gallery-images-container .nav-btn.prev {
    left: 24px;
  }

  .btn-arrow {
    width: 20px;
    height: auto;
  }


  /*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

  .contact-section {
    padding: 80px 16px;
  }

  .boy-illustration {
    position: absolute;
    right: 0;
    top: 520px;
  }

  .party-address-container {
    width: 320px;
  }

  .adress-party-link {
    font-size: 14px;
    font-weight: var(--semiBold);
  }

  .contact-map-title-info-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
  }

  .contact-map-icon {
    width: 48px;
    height: 48px;
  }

  .contact-map-title {
    font-size: 20px;
  }

  .contact-working-time {
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/
  .hero-main-container {
    max-width: 420px;
    height: 400px;
  }

  .hero-title {
    max-width: 320px;
  }

  .hero-stars {
    position: absolute;
    width: 60px;
    top: 80px;
    right: 32px;
  }

  .hero-balloons {
    width: 120px;
    bottom: -24px;
  }

  /*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/

  .occasion-photo.left {
    width: 160px;
    height: 160px;
    top: -80px;
    left: -24px;
    transform: rotate(-15deg);
  }


}

@media (max-width: 400px) {
  /*-----------------------------------*\
#GALLERY IMAGES
\*-----------------------------------*/

  .gallery-images-container {
    width: 320px;
    padding: 0;
  }

  .tedy-bear {
    width: 120px;
    height: auto;
    right: 0px;
  }

  .gallery-images-container .slide {
    flex: 0 0 320px;
    height: 320px;
  }

  .gallery-images-container .slide img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 350px) {
  /*-----------------------------------*\
  #HERO
\*-----------------------------------*/

  .hero-capacity-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    z-index: 1;
  }

  .capacity-text {
    padding: 8px;
    min-width: 156px;
    font-size: 12px;
  }

  /*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

  .about-bunny {
    width: 60px;
    right: 0px;
    bottom: -100px;
  }

  .about-butterfly {
    top: 148px;
  }

  /*-----------------------------------*\
  #CELEBRATIONS
\*-----------------------------------*/

  .occasion-photo.left {
    width: 140px;
    height: 140px;
    top: -80px;
    left: -32px;
    transform: rotate(-15deg);
  }

  /*-----------------------------------*\
#GALLERY IMAGES
\*-----------------------------------*/

  .gallery-images-container {
    width: 300px;
    padding: 0;
  }

  .gallery-images-container .slide {
    flex: 0 0 300px;
    height: 300px;
  }
}

/* Поводите с отделна страница са връзки (06.08.2026). Карето изглежда
   същото — само курсорът и лекото потъмняване казват, че се натиска. */
.single-occasion-vruzka {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.single-occasion-vruzka:is(:hover, :focus-visible) {
    background-color: var(--background-beige-01);
}

/* ══ ЛЕКОТО ПОЛЮШВАНЕ ═════════════════════════════════════════════════════
 * Виж `--plavane` в style.css — там е и спирането при „по-малко движение".
 *
 * ⚠️ ТУК СА САМО КАРТИТЕ С ПОЛЗИТЕ, и то заради „За нас".
 *
 * На НАЧАЛНАТА страница те вече се полюшват — animation.js им слага
 * `.anim-reveal-bob` и `.anim-visible`, а animation.css рисува движението.
 * Онова правило е с два класа срещу един тук и се зарежда след този файл,
 * тоест на началната страница печели то и нищо не се променя.
 *
 * „За нас" обаче ползва същата секция БЕЗ animation.js — там картите досега
 * стояха неподвижни. Този ред е за тях.
 *
 * ⚠️ НЕ СЕ ДОБАВЯТ: лентата с поводите и лентата с отзивите вече се движат
 * сами (виж occasion-scroll и reviews-scroll), а картата за запазване на
 * дата и календарът се цъкат — по движеща се цел се уцелва трудно.
 * ═══════════════════════════════════════════════════════════════════════ */

.about-benefit-card {
  animation: var(--plavane);
}

.about-benefit-card:nth-child(3n + 2) {
  animation-duration: 8.1s;
  animation-delay: -2.4s;
}

.about-benefit-card:nth-child(3n + 3) {
  animation-duration: 6.6s;
  animation-delay: -4.9s;
}


/*-----------------------------------*\
  #KAT — детски кът за почасова игра
\*-----------------------------------*/

/* ---------------------------------------------------------------------------
   Добавен на 21.08.2026, след одита по данни от Search Console. Защо изобщо
   съществува разделът — виж голямата бележка в sections/kat.php.

   ⚠️ ФОНЪТ Е БЕЖОВ НАРОЧНО. Отгоре са пакетите на светло, отдолу е галерията.
   Без своя фон разделът се слива с пакетите и се чете като четвърта карта от
   тях — а той е за нещо друго и на друга цена.
   --------------------------------------------------------------------------- */

.kat-section {
  width: 100%;
  height: auto;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-beige-02);
}

.kat-main-container {
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.kat-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/*
 * `.section-title` е центриран по подразбиране — тук блокът е ляво подравнен,
 * затова се пренастройва. Без този ред заглавието виси в средата над ляво
 * подравнен текст.
 */
.kat-tekst .section-title {
  text-align: left;
}

.kat-uvod {
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.6;
  font-weight: var(--medium);
  color: var(--text-02);
}

/* Двата факта, заради които човек изобщо търси „детски кът": колко струва и
   кога е отворено. Стоят рано, не в дъното. */
.kat-fakti {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.kat-fakt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  border-radius: 18px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
}

.kat-fakt b {
  font-size: 19px;
  line-height: 1.3;
  font-weight: var(--bold);
  color: var(--text-01);
}

.kat-fakt span {
  font-size: 13px;
  color: var(--text-03);
  opacity: 0.75;
}

.kat-belezhka {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-03);
  max-width: 58ch;
}

.kat-spisak-obvivka {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 28px;
  border-radius: 24px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  border-top: 6px solid var(--accent-green);
}

.kat-spisak-ime {
  font-size: 22px;
  line-height: 1.3;
  font-weight: var(--bold);
  color: var(--text-01);
}

.kat-spisak {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kat-spisak li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-02);
}

/*
 * Точката пред реда е нарисувана, а не `list-style` — така се оцветява и не
 * подскача при пренасяне на дълъг ред.
 */
.kat-spisak li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-green);
}

@media (width < 900px) {
  .kat-main-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (width < 700px) {
  .kat-section {
    padding: 72px 20px;
  }

  .kat-uvod {
    font-size: 16px;
  }

  .kat-spisak-obvivka {
    padding: 24px 22px;
  }
}

/* ===========================================================================
   КРЪГОВАТА ГАЛЕРИЯ — 06.09.2026

   Сцената лежи ВЪРХУ въртележката, в същия .viewport. Старата разметка
   остава на място и работи: падне ли GSAP, .gk-scena изобщо не се създава
   и отдолу се вижда тя. Виж assets/js/gallery-krug.js.

   ⚠️ ВКЛЮЧВА СЕ САМО С .gk-vklyuchena, който слага скриптът. Клас в PHP би
   скрил въртележката и при спрян CDN — тоест празно място вместо галерия.
   =========================================================================== */

.gallery-images-container.gk-vklyuchena .track {
  /* Въртележката остава в документа заради лайтбокса и адресите на
     снимките, но не се вижда и не се пипа. */
  visibility: hidden;
  pointer-events: none;
}

/*
 * ⚠️ ТОЧКИТЕ ОТПАДАТ ПРИ ВКЛЮЧЕН ЕФЕКТ.
 *
 * Те броят слайдовете на въртележката, която вече не се вижда — тоест
 * показват движение, което не се случва. Мястото им го взима броячът
 * „12 / 24" в ъгъла. При 24 снимки двайсет и четири точки и без това са
 * ивица, в която пръст не улучва нищо.
 */
.gallery-images-container.gk-vklyuchena .dots {
  display: none;
}

.gk-scena {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  border: solid 12px var(--white);
  background: #eee;
  /* Над скритата въртележка, под стрелките (те са .nav-btn, position:absolute
     по-късно в документа). */
  z-index: 1;
}

.gk-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.gk-broyach {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  /* Броячът е украса — стрелките отдолу трябва да се стигат. */
  pointer-events: none;
}

/*
 * ⚠️ ВИСОЧИНАТА ИДВА ОТ .viewport, А ТОЙ Я ВЗИМА ОТ СЛАЙДА.
 *
 * Сцената е `inset: 0`, тоест няма своя височина. Скрие ли се въртележката
 * с `display:none`, .viewport се свива до нула и сцената изчезва — затова
 * горе е `visibility`, не `display`.
 */