/* Страниците, строени без рендера: Цени, Промоции, Пакети и Блог.
 *
 * Херото повтаря херото на страниците с процедури: кремаво поле, златното
 * сияние по диагоналите, заглавие с Cormorant и злато в курсива. Снимка
 * няма и е по-ниско, защото веднага под него е самото съдържание.
 * Менюто е в menu.css и navigacia.css, долният ред в podval.css.
 */
.dd-obvivka {
  padding-left: max(clamp(1.4rem, 4vw, 3.6rem), calc((100% - 1200px) / 2));
  padding-right: max(clamp(1.4rem, 4vw, 3.6rem), calc((100% - 1200px) / 2));
}
main { padding-bottom: clamp(3rem, 8vh, 5rem); }

/* ── Херо ── */
.dd-hero {
  position: relative; overflow: hidden; background: #ECDFCC;
  padding: clamp(4rem, 11vh, 7rem) max(clamp(1.4rem, 4vw, 3.6rem), calc((100% - 1200px) / 2)) clamp(3.4rem, 9vh, 5.6rem);
  border-bottom: 1px solid rgba(184,147,79,0.45);
}
.dd-hero::before {
  content: ""; position: absolute; inset: -8%; pointer-events: none;
  background: linear-gradient(128deg, rgba(184,147,79,0.34), transparent 42%, transparent 58%, rgba(184,147,79,0.34));
  clip-path: polygon(0% 0%, 100% 0%, 46% 50%, 100% 100%, 0% 100%, 54% 50%);
  filter: blur(26px);
}
.dd-hero-vatre {
  position: relative; max-width: 44rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2.4vh, 1.5rem);
}
.dd-kiker {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #8A6B3F;
}
.dd-kiker > span { display: block; width: 2.6rem; height: 2px; background: linear-gradient(90deg, #B8934F, rgba(184,147,79,0)); }
.dd-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(2.7rem, min(5.4vw, 9.5vh), 3.7rem); line-height: 1.18; letter-spacing: -0.025em; color: #262320;
}
.dd-hero h1 em, .dd-h2 em { font-style: italic; color: #8A6B3F; }
.dd-hero p { max-width: 38rem; font-size: 1.08rem; line-height: 1.72; color: rgba(38,35,32,0.78); }

/* Херо със снимка: текстът вляво, снимката вдясно, както херото на
   страниците с процедури; на по-тесен екран снимката слиза под текста. */
.dd-hero-mreja {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.dd-hero-snimka {
  margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 5px;
  background: #DCCBB4; box-shadow: 0 20px 48px rgba(160,140,125,0.3);
}
.dd-hero-snimka img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (max-width: 900px) {
  .dd-hero-mreja { grid-template-columns: minmax(0, 1fr); }
  .dd-hero-snimka { aspect-ratio: 16 / 11; max-width: 34rem; }
}

/* ── Бутони ── */
.dd-butoni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 0.4rem; }
.dd-buton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  padding: 1rem 1.9rem; border-radius: 5px;
  background: linear-gradient(135deg, #E4C98F 0%, #B8934F 52%, #8A6B3F 100%);
  color: #241A12; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.dd-buton:hover, .dd-buton:focus-visible {
  color: #241A12; filter: brightness(1.18) saturate(1.08);
  box-shadow: 0 14px 30px rgba(138,107,63,0.45), inset 0 0 0 2px rgba(59,44,33,0.9);
  transform: translateY(-2px) scale(1.06);
}
.dd-buton--svetal { background: #FFFFFF; border: 1px solid #B8934F; color: #3B2C21; }
.dd-buton--svetal:hover { color: #3B2C21; }
.dd-telefon { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.6rem; color: #3B2C21; }
.dd-telefon:hover { color: #8A6B3F; }
/* Двата бутона в херото: същите като на страниците с процедури (sait.css,
   [data-hero-cta]): два еднакви златни, телефонът е само номерът,
   компактни, и при посочване двата реагират еднакво и ясно: изсветляват,
   получават тъмна рамка отвътре, повдигат се и леко растат. */
.dd-hero .dd-butoni { column-gap: 1rem; }
.dd-hero .dd-butoni > a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.5rem; border: 0; border-radius: 5px;
  background: linear-gradient(135deg, #E4C98F 0%, #B8934F 52%, #8A6B3F 100%);
  font-family: "Manrope", "Segoe UI", sans-serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #241A12; white-space: nowrap;
  transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.dd-hero .dd-butoni > a:hover, .dd-hero .dd-butoni > a:focus-visible {
  color: #241A12; filter: brightness(1.18) saturate(1.08);
  box-shadow: 0 14px 30px rgba(138,107,63,0.45), inset 0 0 0 2px rgba(59,44,33,0.9);
  transform: translateY(-2px) scale(1.06);
}
/* на телефон двете действия са в лентата долу, както на другите страници */
@media (max-width: 760px) { .dd-hero .dd-butoni { display: none; } }

/* ── Цените: категории, групи, процедури ──
   В началото всичко е затворено и се виждат петте категории, всяка с
   описание, брой процедури и най-ниската цена. Категорията разгъва групите
   си, групата разгъва процедурите. На едно ниво е отворено едно, а
   натиснатото заглавие остава на мястото си (razgavane.js), както при
   разгъващите се части на страниците с процедури. */
.dd-kategorii { margin-top: clamp(2.2rem, 6vh, 3.4rem); border-top: 1px solid rgba(184,147,79,0.5); }
details.dd-ck { border-bottom: 1px solid rgba(184,147,79,0.5); scroll-margin-top: 6rem; }
details.dd-ck > summary, details.dd-cg > summary {
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
details.dd-ck > summary::-webkit-details-marker,
details.dd-cg > summary::-webkit-details-marker { display: none; }
details.dd-ck > summary:focus, details.dd-cg > summary:focus { outline: none; }
details.dd-ck > summary:focus-visible, details.dd-cg > summary:focus-visible { outline: 2px solid #B8934F; outline-offset: 3px; }

details.dd-ck > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 0.5rem 1.6rem; padding: clamp(1.2rem, 2.6vw, 1.7rem) 0;
}
.dd-ck-ime {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; color: #262320; transition: color 0.25s ease;
}
.dd-ck-opis { display: block; margin-top: 0.25rem; font-size: 0.98rem; line-height: 1.5; color: rgba(38,35,32,0.72); }
.dd-ck-meta { text-align: right; font-size: 0.9rem; line-height: 1.45; color: rgba(38,35,32,0.72); white-space: nowrap; }
.dd-ck-meta b {
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem; font-weight: 600; color: #8A6B3F;
}
details.dd-ck > summary:hover .dd-ck-ime, details.dd-ck[open] > summary .dd-ck-ime { color: #8A6B3F; }

/* кръгчето със стрелка, същото като при разгъващите се карти на началната */
.dd-krag {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border: 1px solid rgba(184,147,79,0.6); border-radius: 50%;
  transition: background-color 0.25s ease;
}
.dd-krag::before {
  content: ""; display: block; width: 8px; height: 8px;
  border-right: 1.5px solid #B8934F; border-bottom: 1.5px solid #B8934F;
  transform: translateY(-2.8px) rotate(45deg); transition: transform 0.35s ease;
}
details[open] > summary > .dd-krag::before { transform: translateY(2.8px) rotate(225deg); }
summary:hover > .dd-krag { background: rgba(184,147,79,0.12); }

.dd-ck-vatre { padding: 0 0 1.4rem clamp(0rem, 2vw, 1.4rem); }
details.dd-cg { border-top: 1px solid rgba(184,147,79,0.28); }
details.dd-cg > summary { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 0; }
.dd-cg-ime {
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.4; color: #3B2C21; transition: color 0.25s ease;
}
.dd-cg-broi { margin-left: auto; font-size: 0.88rem; color: rgba(38,35,32,0.62); white-space: nowrap; }
details.dd-cg > summary > .dd-krag { width: 28px; height: 28px; }
details.dd-cg > summary:hover .dd-cg-ime, details.dd-cg[open] > summary .dd-cg-ime { color: #8A6B3F; }
.dd-ck-vsichko {
  display: inline-block; margin-top: 1rem; font-size: 0.95rem; color: #8A6B3F;
  text-decoration: underline; text-underline-offset: 4px;
}
@media (max-width: 760px) {
  details.dd-ck > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .dd-ck-meta { grid-column: 1; grid-row: 2; text-align: left; white-space: normal; }
  .dd-ck-meta b { display: inline; margin-left: 0.4rem; font-size: 1.15rem; }
  details.dd-ck > summary > .dd-krag { grid-column: 2; grid-row: 1 / span 2; }
  .dd-ck-vatre { padding-left: 0; }
}

/* Всеки ред е връзка към процедурата: името, точки, цената, а отдолу
   бележката и „Прочетете повече“. */
.dd-ceni { list-style: none; margin: 0; padding: 0 0 0.9rem; }
.dd-ceni a {
  display: grid; grid-template-columns: auto minmax(1.2rem, 1fr) auto; align-items: baseline;
  column-gap: 0.7rem; row-gap: 0.2rem;
  margin: 0 -0.55rem; padding: 0.75rem 0.55rem;
  border-bottom: 1px solid rgba(184,147,79,0.2); border-radius: 4px;
  color: #262320; transition: background-color 0.25s ease;
}
.dd-ceni li:last-child a { border-bottom: 0; }
.dd-ceni a:hover, .dd-ceni a:focus-visible { background: #ECDFCC; color: #262320; }
.dd-cena-ime { font-size: 1.02rem; font-weight: 600; line-height: 1.4; transition: color 0.25s ease; }
.dd-ceni a:hover .dd-cena-ime, .dd-ceni a:focus-visible .dd-cena-ime { color: #8A6B3F; }
.dd-cena-tochki { align-self: end; margin-bottom: 0.42em; border-bottom: 1px dotted rgba(138,107,63,0.6); }
.dd-cena-suma {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; font-weight: 600; line-height: 1.2;
  color: #262320; white-space: nowrap; text-align: right;
}
.dd-cena-suma--kons { font-family: 'Manrope', 'Segoe UI', sans-serif; font-size: 0.9rem; color: #8A6B3F; }
.dd-cena-dolu {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.2rem 1rem;
}
.dd-cena-belezhka { font-size: 0.86rem; line-height: 1.45; color: rgba(38,35,32,0.66); }
.dd-cena-oshte {
  margin-left: auto; font-size: 0.84rem; font-weight: 600; color: #8A6B3F;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(184,147,79,0.5);
}
.dd-ceni a:hover .dd-cena-oshte, .dd-ceni a:focus-visible .dd-cena-oshte { text-decoration-color: #8A6B3F; }

/* ── Кутия с текст и бутони (празни страници и краят на „Цени“) ── */
/* Кутията е широка колкото съдържанието на страницата (беше 46rem и стоеше
   тясна вляво). На десктоп текстът е вляво, а бутоните вдясно, един под друг, за да
   не остава празно (Атанас). */
.dd-kutiq {
  margin-top: clamp(2.6rem, 7vh, 4.4rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: #FFFFFF; border-top: 2px solid #B8934F; border-radius: 5px;
}
.dd-h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; }
.dd-kutiq .dd-h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.dd-kutiq p { margin-top: 0.8rem; font-size: 1.04rem; line-height: 1.65; color: rgba(38,35,32,0.8); }
.dd-kutiq .dd-butoni { margin-top: 1.4rem; }
@media (min-width: 900px) {
  .dd-kutiq {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 4rem); align-items: center;
  }
  .dd-kutiq > .dd-h2, .dd-kutiq > p { grid-column: 1; }
  /* бутоните един под друг, еднакво широки, до текста */
  .dd-kutiq > .dd-butoni {
    grid-column: 2; grid-row: 1 / span 2; margin-top: 0;
    flex-direction: column; align-items: stretch; gap: 0.8rem;
  }
}
@media (max-width: 760px) {
  .dd-kutiq .dd-butoni { flex-direction: column; align-items: stretch; }
  .dd-kutiq .dd-buton { width: 100%; }
}