/* ============================================================
   СТРАНИЦА „ДЕТСКИ РОЖДЕН ДЕН" — rozhdeni-dni.php
   ============================================================
   Написана на 06.08.2026 при преработката на страницата от
   текстова в снимкова.

   ⚠️ ВСИЧКО ТУК Е С ПРЕДСТАВКА `rd-`. Файлът се зарежда САМО от
   rozhdeni-dni.php, но представката пази и от бъдещето: същият
   лист някой ден може да влезе и другаде.

   ⚠️ НИЩО ТУК НЕ ПИПА `.bk-*` (календарчето). То си носи своя
   booking.css, в който `hidden` пази скритите месеци. Правило от
   05.08.2026: авторско `display:` побеждава атрибута `hidden` и
   тогава страницата се чупи мълчаливо. Затова календарът тук е
   само сложен в кутия — `.rd-kalendar` — и кутията се стилизира,
   не съдържанието ѝ.

   Цветовете, шрифтовете, бутоните и заглавните класове идват от
   style.css и index.css. Тук няма нито един нов цвят.
*/

/* ------------------------------------------------------------
   ОБЩИ ЧАСТИ
   ------------------------------------------------------------ */

.rd-sekciya {
  width: 100%;
  padding: clamp(52px, 7vw, 104px) 20px;
  display: flex;
  justify-content: center;
}

.rd-sekciya.rd-bezh {
  background-color: var(--background-beige-01);
}

.rd-sekciya.rd-rozova {
  background-color: var(--background-pink);
}

/* Ширината е тази на секцията с отзиви — за да не се получи
   страница с друг ритъм от останалите. */
.rd-sredishte {
  width: 100%;
  max-width: var(--shirina-v-sekciya);

  /* Мрежите вътре носят minmax(0, …), но и контейнерът се пази:
     точка О18 — един разлят наследник разпъва цялата страница. */
  min-width: 0;
}

/* Заглавен блок на секция: етикет, заглавие, увод. */
.rd-glava {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 48px);
  text-align: center;
}

/* Същата ширина като заглавните блокове на началната страница
   (.about-text-main-container, .celebrations-title-container). */
.rd-glava .section-title {
  max-width: 790px;
}

.rd-glava-uvod {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  max-width: 62ch;
  color: var(--text-03);
}

/* Акцентната дума в заглавие. Четимият вариант, не фоновият —
   виж бележката за съотношенията в style.css. */
.rd-akcent {
  color: var(--accent-pink-text);
}

/* ------------------------------------------------------------
   ДВИЖЕНИЕ
   ------------------------------------------------------------
   ⚠️ ПРАВИЛОТО: съдържанието е ВИДИМО по подразбиране.

   Скриването се включва само когато `rd-js` стои на <html>, а
   той се слага от скрипт. Без скрипт — няма скриване и няма
   празна страница. Същият похват като при отзивите.

   Предпазителят срещу „скриптът се сложи, но rd.js не се зареди"
   е в самия rozhdeni-dni.php, при вградения скрипт.
*/
.rd-js .rd-anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.rd-js .rd-anim.rd-vidim {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rd-js .rd-anim,
  .rd-js .rd-anim.rd-vidim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   ЗАГЛАВЕН ЕКРАН
   ------------------------------------------------------------ */

.rd-hero {
  width: 100%;
  /* 140px отгоре прескачат фиксираната лента (80px), както прави
     .page-intro в pages.css. Махне ли се, заглавието влиза под нея. */
  padding: 140px 20px clamp(48px, 6vw, 88px);
  background-color: var(--background-beige-01);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.rd-hero-inner {
  width: 100%;
  max-width: var(--shirina-v-sekciya);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.rd-hero-tekst {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;

  animation: rd-vlizane 0.7s ease-out both;
}

.rd-etiket {
  padding: 8px 16px;
  border-radius: 100px;
  background-color: var(--accent-yellow);
  font-size: 14px;
  font-weight: var(--semiBold);
  width: fit-content;
  transform: rotate(-3deg);
}

.rd-h1 {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.15;
  font-weight: var(--extraBold);
  margin: 0;
}

.rd-lead {
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.6;
  max-width: 46ch;
  color: var(--text-03);
}

.rd-fakti {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.rd-fakt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background-color: var(--white);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.25;
}

.rd-fakt img {
  width: 18px;
  height: 18px;
  flex: none;
}

.rd-butoni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

/* Вторият бутон е контурен нарочно — правилото „един тежък бутон
   на екран" от style.css. Тук не се ползва .secondary-button,
   защото той е дребен и заоблен за подпис под главния, а този
   стои РЕДОМ с него и трябва да е със същата височина. */
.rd-buton-vtori {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid var(--text-01);
  background-color: var(--white);
  color: var(--text-02);
  font-size: 16px;
  font-weight: var(--semiBold);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rd-buton-vtori:is(:hover, :focus-visible) {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
}

/* Тънката връзка под бутоните — телефон и Viber, без да се борят
   с главния бутон. */
.rd-vruzka-red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
  color: var(--text-03);
}

.rd-vruzka-red a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--accent-orange-text);
  font-weight: var(--semiBold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rd-vruzka-red img {
  width: 18px;
  height: 18px;
}

/* --- снимковата половина --- */

.rd-hero-foto {
  position: relative;
  min-width: 0;
  animation: rd-vlizane 0.7s ease-out 0.12s both;
}

.rd-foto-glavna {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(49, 47, 48, 0.14);
}

.rd-foto-glavna picture,
.rd-foto-malka picture {
  display: block;
}

.rd-foto-glavna img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Малката снимка отгоре. Излиза извън голямата нарочно — така
   двете се четат като композиция, а не като две картинки. */
.rd-foto-malka {
  position: absolute;
  left: -24px;
  bottom: -28px;
  width: 42%;
  max-width: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: 0 12px 28px rgba(49, 47, 48, 0.16);
}

.rd-foto-malka img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Оценката от Google. Истинските числа, от data/business.php. */
.rd-znak-google {
  position: absolute;
  right: -12px;
  top: -18px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 18px;
  background-color: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(49, 47, 48, 0.12);
  text-decoration: none;
  text-align: center;
}

.rd-znak-google:is(:hover, :focus-visible) {
  border-color: var(--accent-orange);
}

.rd-znak-chislo {
  font-size: 22px;
  font-weight: var(--bold);
  line-height: 1;
}

.rd-znak-zvezdi {
  color: var(--accent-yellow-star);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.rd-znak-tekst {
  font-size: 12px;
  color: var(--text-03);
  line-height: 1.2;
}

@keyframes rd-vlizane {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-hero-tekst,
  .rd-hero-foto {
    animation: none;
  }
}

/* ------------------------------------------------------------
   ЗАЩО РОДИТЕЛИТЕ ИЗБИРАТ
   ------------------------------------------------------------ */

.rd-polzi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.rd-polza {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  border-radius: 24px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

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

/* Височина, не ширина. „Балончетата" са с различни съотношения
   (61×72, 66×72, 72×74) — фиксираш ли ширината, редът им излиза с
   три различни височини. */
.rd-polza img {
  height: 58px;
  width: auto;
}

.rd-polza-ime {
  font-size: 18px;
  line-height: 1.3;
  font-weight: var(--bold);
  margin: 4px 0 0;
}

.rd-polza-tekst {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-03);
}

/* ------------------------------------------------------------
   КАК ПРОТИЧА ПРАЗНИКЪТ
   ------------------------------------------------------------ */

.rd-hod-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.rd-stapki {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.rd-stapka {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 26px;
}

/* Линията между стъпките. Последната няма — иначе виси в нищото. */
.rd-stapka:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 56px;
  bottom: 4px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--beige-05) 0 6px,
    transparent 6px 12px
  );
}

.rd-stapka-nomer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: var(--extraBold);
  background-color: var(--white);
  border: 2px solid var(--beige-04);
}

.rd-stapka.rd-jalt .rd-stapka-nomer {
  border-color: var(--accent-yellow);
}
.rd-stapka.rd-sin .rd-stapka-nomer {
  border-color: var(--accent-blue);
}
.rd-stapka.rd-zelen .rd-stapka-nomer {
  border-color: var(--accent-green);
}
.rd-stapka.rd-rozov .rd-stapka-nomer {
  border-color: var(--accent-pink);
}

.rd-stapka-ime {
  font-size: 19px;
  line-height: 1.3;
  font-weight: var(--bold);
  margin-bottom: 6px;
}

.rd-stapka-tekst {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-03);
  max-width: 46ch;
}

.rd-stapka-vreme {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 100px;
  background-color: var(--white);
  border: 1px solid var(--border);
  font-size: 13px;
}

/* --- снимковата композиция до стъпките --- */

.rd-hod-foti {
  position: relative;
  min-width: 0;
}

.rd-hod-golyama {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(49, 47, 48, 0.12);
}

.rd-hod-golyama picture,
.rd-hod-malka picture {
  display: block;
}

.rd-hod-golyama img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.rd-hod-malka {
  position: absolute;
  right: -18px;
  bottom: -34px;
  width: 40%;
  max-width: 200px;
  border-radius: 20px;
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: 0 12px 28px rgba(49, 47, 48, 0.16);
}

.rd-hod-malka img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ------------------------------------------------------------
   КАКВО ВЛИЗА В ЦЕНАТА
   ------------------------------------------------------------ */

.rd-vklyuchva-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.rd-kutiya {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 24px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  height: 100%;
}

.rd-kutiya.rd-bezh-kutiya {
  background-color: var(--background-beige-01);
}

.rd-kutiya-ime {
  font-size: 21px;
  line-height: 1.3;
  font-weight: var(--bold);
  margin-bottom: 18px;
}

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

.rd-spisak li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.55;
}

.rd-spisak li img {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.rd-belejka {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--accent-green);
  border-radius: 0 12px 12px 0;
  background-color: var(--background-beige-01);
  font-size: 14px;
  line-height: 1.6;
}

.rd-kutiya.rd-bezh-kutiya .rd-belejka {
  background-color: var(--white);
}

/* ------------------------------------------------------------
   ЗА РОДИТЕЛИТЕ — редуващи се снимка и текст
   ------------------------------------------------------------ */

.rd-redove {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
}

.rd-red {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* Обръщането е САМО визуално: в разметката текстът винаги е след
   снимката, за да се чете в един и същ ред на телефон. */
.rd-red.rd-obratno .rd-red-foto {
  order: 2;
}

.rd-red-foto {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(49, 47, 48, 0.12);
  min-width: 0;
}

.rd-red-foto picture {
  display: block;
}

.rd-red-foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.rd-red-foto:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .rd-red-foto:hover img {
    transform: none;
  }
}

.rd-red-tekst {
  min-width: 0;
}

.rd-red-ime {
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.25;
  font-weight: var(--extraBold);
  margin-bottom: 12px;
}

.rd-red-tekst p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 12px;
  max-width: 52ch;
  color: var(--text-03);
}

/* Лентата за стаята за преповиване — без снимка, нарочно.
   Такава снимка няма, а измислена е по-лоша от липсваща. */
.rd-lenta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
}

.rd-lenta img {
  height: 72px;
  width: auto;
}

.rd-lenta-ime {
  font-size: 20px;
  font-weight: var(--bold);
  margin-bottom: 6px;
}

.rd-lenta p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-03);
  max-width: 62ch;
}

/* ------------------------------------------------------------
   ГАЛЕРИЯ
   ------------------------------------------------------------ */

.rd-mreja {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 14px;
}

.rd-snimka {
  border-radius: 20px;
  overflow: hidden;
  min-width: 0;
}

.rd-snimka picture {
  display: block;
  width: 100%;
  height: 100%;
}

.rd-snimka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.rd-snimka:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .rd-snimka:hover img {
    transform: none;
  }
}

.rd-snimka.rd-golyama {
  grid-column: span 2;
  grid-row: span 2;
}

.rd-pod-mrejata {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ------------------------------------------------------------
   ТРИТЕ ПАКЕТА — само преглед, цените са в paketi-i-ceni.php
   ------------------------------------------------------------ */

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

.rd-paket {
  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;
}

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

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

.rd-paket.rd-jalt {
  border-top-color: var(--accent-yellow);
}
.rd-paket.rd-sin {
  border-top-color: var(--accent-blue);
}
.rd-paket.rd-rozov {
  border-top-color: var(--accent-pink);
}

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

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

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

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

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

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

.rd-paket-spisak img {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

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

/* ------------------------------------------------------------
   СВОБОДНИ ДАТИ
   ------------------------------------------------------------ */

.rd-data-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.rd-data-tekst {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.rd-data-ime {
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.2;
  font-weight: var(--extraBold);
  max-width: 18ch;
}

.rd-data-uvod {
  font-size: 16px;
  line-height: 1.7;
  max-width: 46ch;
  color: var(--text-03);
}

/*
 * ⚠️ САМО КУТИЯТА. Вътре живее sections/booking-calendar.php със
 * своя booking.css. Нито едно правило тук не влиза в `.bk-*` —
 * там `hidden` крие трите неактивни месеца и панела с часовете.
 *
 * И ГРАНИЦАТА ПО ШИРИНА НЕ Е ТУК — проверено в booking.css, ред 121:
 * `.bk { max-width: 560px; margin-inline: auto }` не е закачено за
 * никакъв .schedule- родител, тоест важи и в тази кутия. Затова тук
 * няма max-width: втора граница само би се разминала с онази при
 * бъдеща промяна. Клетките не могат да се раздуят.
 */
.rd-kalendar {
  min-width: 0;
}

/* ------------------------------------------------------------
   ЧЕСТИ ВЪПРОСИ
   ------------------------------------------------------------ */

.rd-faq {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rd-faq-red {
  border-radius: 18px;
  background-color: var(--white);
  border: 1px solid var(--beige-03);
  overflow: hidden;
}

.rd-faq-vupros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  min-height: 44px;
  font-size: 16px;
  font-weight: var(--semiBold);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

/* Стандартният триъгълник на браузъра се маха, за да остане
   само нашата стрелка. Webkit иска отделно правило. */
.rd-faq-vupros::-webkit-details-marker {
  display: none;
}

.rd-faq-vupros::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent-orange-text);
  border-bottom: 2px solid var(--accent-orange-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease;
}

.rd-faq-red[open] .rd-faq-vupros::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.rd-faq-vupros:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: -2px;
}

.rd-faq-otgovor {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-03);
  max-width: 70ch;
}

.rd-faq-otgovor a {
  color: var(--accent-orange-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   ПОСЛЕДЕН ПРИЗИВ
   ------------------------------------------------------------ */

.rd-krai-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.rd-krai-ime {
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.2;
  font-weight: var(--extraBold);
  max-width: 22ch;
}

.rd-krai-uvod {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  max-width: 54ch;
  color: var(--text-03);
}

.rd-krai .rd-butoni {
  justify-content: center;
}

.rd-krai .rd-vruzka-red {
  justify-content: center;
}

/* Връзките към другите страници идват от pages.css. Тук само се
   центрират и им се дава въздух — блокът наоколо е центриран. */
.rd-krai .page-links {
  justify-content: center;
  width: 100%;
  margin-top: 24px;
  border-top-color: rgba(49, 47, 48, 0.12);
}

/* ============================================================
   ТАБЛЕТ
   ============================================================ */

@media (max-width: 1024px) {
  .rd-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Снимката слиза под бутоните — на тесен екран първо трябва да
     се види какво предлагаме и как се проверява дата. */
  .rd-hero-foto {
    order: 2;
    max-width: 620px;
    width: 100%;
    /* На една колона снимката е ограничена по ширина и без това би
       залепнала вляво, вместо да стои под текста. */
    margin-inline: auto;
  }

  .rd-foto-glavna img {
    aspect-ratio: 16 / 10;
  }

  .rd-polzi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rd-hod-inner,
  .rd-vklyuchva-inner,
  .rd-data-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .rd-hod-foti {
    order: 2;
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
  }

  .rd-red {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Обръщането отпада — на една колона няма ляво и дясно, а
     `order: 2` би пратил снимката под текста само на всеки втори
     ред. Еднакво е по-добре от почти еднакво. */
  .rd-red.rd-obratno .rd-red-foto {
    order: 0;
  }

  .rd-mreja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 168px;
  }

  .rd-paketi {
    grid-template-columns: minmax(0, 1fr);
  }

  .rd-paket-bez {
    margin-top: 12px;
  }
}

/* ============================================================
   ТЕЛЕФОН
   ============================================================ */

@media (max-width: 767px) {
  .rd-hero {
    padding-top: 110px; /* лентата е по-ниска — както в pages.css */
  }

  .rd-hero-tekst {
    gap: 14px;
  }

  /* Малката снимка и знакът на Google се махат: на тесен екран
     трите заедно стават каша, а голямата снимка казва същото. */
  .rd-foto-malka,
  .rd-hod-malka {
    display: none;
  }

  .rd-znak-google {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    box-shadow: none;
    width: fit-content;
  }

  .rd-butoni {
    width: 100%;
  }

  .rd-butoni .main-button,
  .rd-butoni .rd-buton-vtori {
    flex: 1 1 100%;
  }

  .rd-polzi {
    gap: 12px;
  }

  .rd-polza {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .rd-polza img {
    height: 46px;
  }

  .rd-polza-ime {
    font-size: 16px;
  }

  .rd-polza-tekst {
    font-size: 14px;
  }

  .rd-stapka {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 20px;
  }

  .rd-stapka-nomer {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .rd-stapka:not(:last-child)::before {
    left: 20px;
    top: 46px;
  }

  .rd-lenta {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .rd-mreja {
    grid-auto-rows: 132px;
    gap: 10px;
  }

  .rd-faq-vupros {
    padding: 16px 18px;
    font-size: 15px;
  }

  .rd-faq-otgovor {
    padding: 0 18px 18px;
  }
}

@media (max-width: 460px) {
  /* Под 460px две колони карти стават по 150px — заглавието се
     чупи на пет реда. Една колона е по-четимо от две тесни. */
  .rd-polzi {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ ЛЕКОТО ПОЛЮШВАНЕ ═════════════════════════════════════════════════════
 * Движението и спирането му при „по-малко движение" стоят на едно място —
 * `--plavane` в style.css. Тук се казва само КОИ карти го правят.
 *
 * Съседните не бива да плуват в такт, иначе цялата решетка се люлее като
 * един блок. Отрицателното забавяне ги пуска вече започнали, вместо да
 * чакат реда си.
 * ═══════════════════════════════════════════════════════════════════════ */

.rd-polza,
.rd-paket {
  animation: var(--plavane);
}

.rd-polza:nth-child(3n + 2),
.rd-paket:nth-child(3n + 2) {
  animation-duration: 8.1s;
  animation-delay: -2.4s;
}

.rd-polza:nth-child(3n + 3),
.rd-paket:nth-child(3n + 3) {
  animation-duration: 6.6s;
  animation-delay: -4.9s;
}