/* Dental House — small additions for the static (non-React) build.
   These are state toggles / hover effects that the original handled with
   inline React state or onMouseEnter/Leave JS; everything else reuses
   index-DH55021style.css unchanged. */

/* Kill the default mobile "tap flash" / browser focus box on buttons and
   links — that's almost always the stray grey shape / asterisk-looking
   mark people see on press. We replace it with one deliberate gold ring
   below, shown only for keyboard navigation. */
a, button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(196,169,106,0.6);
  outline-offset: 2px;
}

.dh-modal-hidden { display: none !important; }

.dh-fade-in,
.dh-reveal,
.dh-reveal-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.dh-fade-in.dh-visible,
.dh-reveal.dh-visible,
.dh-reveal-up.dh-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Inner pages (data-home="0") and the home bar once scrolled share the
   exact same treatment — a light, crisp frosted glass, thin gold divider
   line, soft shadow, and a glossy "mirror" highlight along the top edge. */
.dh-navbar-frosted,
#dh-navbar[data-home="1"].dh-scrolled {
  position: fixed;
  background-color: rgba(250, 247, 242, 0.55);
  backdrop-filter: blur(11px) saturate(1.4);
  -webkit-backdrop-filter: blur(11px) saturate(1.4);
  border-bottom: 1px solid rgba(196, 169, 106, 0.32);
  box-shadow: 0 4px 16px -10px rgba(42, 31, 20, 0.2), inset 0 1px 0 rgba(255,255,255,0.55);
}
.dh-navbar-frosted::before,
#dh-navbar[data-home="1"].dh-scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 35%, transparent 70%);
  pointer-events: none;
}

/* Inner pages only (data-home="0") — the glass bar itself stays exactly
   the same as on the homepage, but text/logo get a contrast boost since
   they sit over a much wider variety of photos there. Home page is
   untouched. */
#dh-navbar[data-home="0"] .dh-nav-link-inactive,
#dh-navbar[data-home="0"] .dh-nav-phone {
  color: #2A1F14;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(250,247,242,0.9);
}
#dh-navbar[data-home="0"] .dh-nav-link-inactive:hover { color: #150F0A; }
#dh-navbar[data-home="0"] #dh-navbar-logo {
  filter: drop-shadow(0 1px 5px rgba(250,247,242,0.9)) drop-shadow(0 1px 2px rgba(42,31,20,0.25));
}

/* Nav links — modern, crisp: gradient-gold text + small dot for the active
   page, a clean color shift + tight underline sweep on hover. No blurred
   pill backgrounds — keeps it sharp against the frosted bar. */
.dh-nav-link {
  letter-spacing: 0;
  transition: letter-spacing 0.3s ease, color 0.3s ease;
}
.dh-nav-link-inactive:hover { letter-spacing: 0.015em; }
.dh-nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C4A96A, #9A7A2E);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dh-nav-link-inactive:hover::after { width: calc(100% - 22px); }
.dh-nav-link-active {
  font-weight: 600;
  color: #B89440;
}
.dh-nav-link-active::after { width: calc(100% - 22px); }
/* Active pill (home + inner pages, inline-styled solid gold background)
   must always render solid, readable dark text — never a transparent
   gradient text-clip treatment, which turns invisible on a solid fill. */
a.dh-nav-link-active[style] {
  background: #C4A96A !important;
  border: 2px solid #F5D48A !important;
  color: #2A1F14 !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #2A1F14 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

#dh-mobile-drawer.dh-open { opacity: 1; pointer-events: auto; }
#dh-mobile-drawer.dh-open #dh-mobile-panel { transform: translateX(0); }

.dh-cta-outline-btn:hover { border-color: rgba(21,43,66,0.45) !important; color: #152B42 !important; }
.dh-cta-solid-btn:hover { background: #1E3852 !important; }
.dh-modal-x:hover { background: rgba(21,43,66,0.14) !important; }
.dh-doctor-pick:hover { border-color: rgba(13,148,136,.85) !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 12px 26px -14px rgba(13,148,136,.35); }

/* ──────────────────────────────────────────────────────────────────────
   Luxury polish — refined motion, gold accents, soft glows throughout.
   ────────────────────────────────────────────────────────────────────── */

::selection { background: rgba(196,169,106,0.3); color: #2A1F14; }

/* Slim gold-on-cream scrollbar */
html { scrollbar-width: thin; scrollbar-color: #C4A96A #FAF7F2; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #FAF7F2; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #C4A96A, #B89440); border-radius: 8px; border: 2px solid #FAF7F2; }
::-webkit-scrollbar-thumb:hover { background: #9A7A2E; }

/* Buttons — every "book now" trigger site-wide plus the shared button
   component classes get the same elegant treatment, regardless of their
   own color/shape utility classes. Crucially: we never override an
   existing background color with !important here — some buttons are gold
   (bg-warm-400) specifically so they stay legible on dark hero sections;
   forcing a dark gradient onto them made them invisible. We only add a
   border, shadow and hover glow, which works on any base color. */
[data-booking-open],
.btn-primary, .btn-outline, .btn-gold,
.dh-cta-solid-btn, .dh-cta-outline-btn,
#dh-booking-next, #dh-booking-back {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(196,169,106,0.4);
  box-shadow: 0 6px 18px -8px rgba(42,31,20,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
[data-booking-open]:hover,
.btn-primary:hover, .btn-outline:hover, .btn-gold:hover,
.dh-cta-solid-btn:hover, .dh-cta-outline-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(184,148,64,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  border-color: rgba(196,169,106,0.75);
}

/* Plain dark-brown buttons (.btn-primary, .dh-cta-solid-btn, or any
   data-booking-open button already styled bg-brown-900) get a subtle
   sheen gradient layered on top of their own color — enriches them
   without ever replacing the actual background. */
.btn-primary, .dh-cta-solid-btn, [data-booking-open].bg-brown-900 {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 55%);
}

/* Outline "call" buttons — soft cream tint + a visible gold-tinted border
   at rest instead of a near-invisible thin line. */
.btn-outline, .dh-cta-outline-btn,
[data-booking-open].btn-outline {
  background-color: rgba(250, 247, 242, 0.7);
  border-color: rgba(196,169,106,0.5);
  box-shadow: 0 2px 10px -6px rgba(42,31,20,0.2);
}
.btn-outline:hover, .dh-cta-outline-btn:hover {
  box-shadow: 0 12px 26px -12px rgba(21,43,66,0.28);
}

/* A single soft, centred gold glow fades in behind the button on hover —
   calm and deliberate, no streak or sweep. */
[data-booking-open]::after,
.btn-primary::after, .btn-gold::after, .dh-cta-solid-btn::after,
.btn-outline::after, .dh-cta-outline-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(60% 100% at 50% 0%, rgba(196,169,106,0.35), transparent 70%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
[data-booking-open]:hover::after,
.btn-primary:hover::after, .btn-gold:hover::after, .dh-cta-solid-btn:hover::after,
.btn-outline:hover::after, .dh-cta-outline-btn:hover::after {
  opacity: 1;
}

/* Press — a clean, confident scale-down, nothing else */
[data-booking-open]:active, .btn-primary:active, .btn-gold:active,
.btn-outline:active, .dh-cta-outline-btn:active, .dh-cta-solid-btn:active {
  transform: scale(0.96);
  transition-duration: 0.12s;
}

/* Section labels — small gold diamond instead of a flat line */
.section-label { position: relative; }
.section-label::before {
  background: none !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 1px;
  background: linear-gradient(135deg, #C4A96A, #9A7A2E) !important;
  transform: rotate(45deg);
}

/* Standalone cards (Why-us, Reviews, Packages, Doctor cards) — smoother
   lift with a warm glow shadow and a gold border that eases in. */
.dh-card-lux {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease !important;
}
.dh-card-lux:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(42,31,20,0.28), 0 0 0 1px rgba(196,169,106,0.18);
}

/* Service list rows (homepage) — gold accent bar slides in from the left */
.dh-row-lux { position: relative; transition: background-color 0.3s ease; }
.dh-row-lux::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #C4A96A, #B89440);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.dh-row-lux:hover::before { transform: scaleY(1); }

/* Services page accordion cards — extra glow on expand/hover */
.dh-svc-card { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease !important; }
.dh-svc-card:hover { box-shadow: 0 20px 40px -18px rgba(42,31,20,0.25); }
.dh-svc-card.border-warm-400 { box-shadow: 0 20px 44px -16px rgba(184,148,64,0.35) !important; }

/* Doctor portrait — fades softly into the surrounding page background on
   every edge (top, sides and bottom), so the photo never reads as a
   pasted-in rectangle — it feels built into the page. No cropping: the
   full image is shown via object-contain. */
.dh-photo-lux {
  position: relative;
  box-shadow: none;
}
.dh-photo-lux img,
.dh-photo-blend img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.dh-photo-lux img {
  -webkit-mask-image: radial-gradient(ellipse 88% 92% at center, black 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 92% at center, black 58%, transparent 100%);
}
.dh-photo-blend { position: relative; }
.dh-photo-blend::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 65%;
  height: 14%;
  background: radial-gradient(ellipse at center, rgba(26,23,23,0.4) 0%, rgba(26,23,23,0) 72%);
  filter: blur(10px);
  transform: translateX(-50%) scaleX(1.6);
  z-index: 0;
  pointer-events: none;
}
.dh-photo-blend img {
  position: relative;
  z-index: 1;
}
.dh-photo-lux:hover img { transform: scale(1.05); }

/* Featured subscription package — slow shimmering gold ring instead of a
   static one, gives the "recommended" card a quiet sense of premium motion */
@keyframes dh-shimmer-ring {
  0%, 100% { box-shadow: 0 0 0 2px rgba(196,169,106,0.55), 0 24px 48px -18px rgba(184,148,64,0.35); }
  50%      { box-shadow: 0 0 0 2px rgba(196,169,106,0.9),  0 28px 56px -16px rgba(184,148,64,0.5); }
}
.dh-card-lux.ring-warm-400 { animation: dh-shimmer-ring 3.2s ease-in-out infinite; }

/* Why-us section — oversized typographic stat number */
.dh-why-stat-wrap { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-why-stat-num { display: inline-block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-why-stat-wrap:hover .dh-why-stat-num { transform: scale(1.05); }

/* Why-us section — borderless divided rows, blended into the page */
.dh-why-row { transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease; }
.dh-why-item:not(:first-child) { border-top: 1px solid rgba(196,169,106,0.18); }
@media (min-width: 640px) {
  .dh-why-item:nth-child(2) { border-top: none; }
}
.dh-why-row:hover { padding-left: 6px; background: rgba(196,169,106,0.05); }
.dh-why-row-bar { transition: background-color 0.4s ease, transform 0.4s ease; }
.dh-why-row:hover .dh-why-row-bar { background: #C4A96A !important; }
.dh-why-row-icon { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-why-row:hover .dh-why-row-icon { transform: scale(1.12) rotate(-6deg); }
.dh-why-row-title { transition: color 0.3s ease; }
.dh-why-row:hover .dh-why-row-title { color: #B89440; }

/* Homepage services — photo cards */
.dh-svc-photo-card { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.4s ease; }
.dh-svc-photo-card:hover { transform: translateY(-7px); box-shadow: 0 26px 50px -22px rgba(42,31,20,0.28); border-color: rgba(196,169,106,0.55); }
.dh-svc-photo-img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-svc-photo-card:hover .dh-svc-photo-img { transform: scale(1.08); }
.dh-svc-photo-overlay { background: linear-gradient(180deg, rgba(42,31,20,0) 35%, rgba(42,31,20,0.78) 100%); opacity: 0.9; transition: opacity 0.4s ease; }
.dh-svc-photo-card:hover .dh-svc-photo-overlay { opacity: 1; }
.dh-svc-photo-num { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease, color 0.4s ease; }
.dh-svc-photo-card:hover .dh-svc-photo-num { transform: scale(1.1) rotate(-6deg); background: #C4A96A !important; color: #2A1F14 !important; }
.dh-svc-photo-arrow { display: inline-flex; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-svc-photo-card:hover .dh-svc-photo-arrow { transform: translateX(4px); }
.dh-svc-photo-link { position: relative; }
.dh-svc-photo-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #B89440; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-svc-photo-card:hover .dh-svc-photo-link::after { width: 100%; }

/* Homepage services — borderless, edge-blended photos (no box, fades into the page) */
.dh-svc-blend-img {
  -webkit-mask-image: radial-gradient(ellipse 90% 92% at center, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 92% at center, black 60%, transparent 100%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.dh-svc-blend:hover .dh-svc-blend-img { transform: scale(1.06); }
.dh-svc-blend:hover h3 { color: #B89440; transition: color 0.3s ease; }
.dh-svc-blend h3 { transition: color 0.3s ease; }
.dh-svc-blend:hover .dh-svc-photo-arrow { transform: translateX(4px); }
.dh-svc-blend .dh-svc-photo-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #B89440; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.dh-svc-blend:hover .dh-svc-photo-link::after { width: 100%; }

/* Homepage services — elegant row dividers between cards, matching the grid's column count per breakpoint */
.dh-svc-item { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.dh-svc-item:nth-child(1) { padding-top: 0; }
@media (max-width: 639px) {
  .dh-svc-item:not(:first-child) { border-top: 1px solid rgba(196,169,106,0.22); }
  .dh-svc-item .dh-svc-photo-frame-wrap { max-width: 280px; margin-left: auto; margin-right: auto; }
  .dh-svc-item .dh-svc-text-wrap { max-width: 280px; margin-left: auto; margin-right: auto; text-align: center; }
  .dh-svc-item .dh-svc-photo-link { justify-content: center; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .dh-svc-item:nth-child(2) { padding-top: 0; }
  .dh-svc-item:nth-child(n+3) { border-top: 1px solid rgba(196,169,106,0.22); }
}
@media (min-width: 1024px) {
  .dh-svc-item:nth-child(2), .dh-svc-item:nth-child(3) { padding-top: 0; }
  .dh-svc-item:nth-child(n+4) { border-top: 1px solid rgba(196,169,106,0.22); }
}

/* Gallery items — slightly slower, more luxurious zoom + warmer overlay */
.break-inside-avoid img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important; }

/* Footer link list — gentle gold underline grows in from the left */
footer a { position: relative; }
footer ul a::after, footer > div a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: rgba(196,169,106,0.7);
  transition: width 0.3s ease;
}
footer ul a:hover::after, footer > div a:hover::after { width: 100%; }

/* Booking modal — a bit wider on larger screens for the bigger doctor photos */
@media (min-width: 640px) {
  .dh-booking-panel { max-width: 36rem; }
}

/* Back-to-top floating button */
.dh-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2A1F14;
  color: #F5EDD5;
  border: 1px solid rgba(196,169,106,0.35);
  box-shadow: 0 14px 28px -12px rgba(42,31,20,0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s, background-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.dh-back-to-top.dh-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.dh-back-to-top:hover {
  background: #C4A96A;
  color: #2A1F14;
  box-shadow: 0 18px 34px -12px rgba(42,31,20,0.5);
  transform: translateY(-3px) scale(1.04);
}
.dh-back-to-top:active { transform: translateY(-1px) scale(0.97); }
@media (min-width: 640px) {
  .dh-back-to-top { right: 28px; bottom: 28px; width: 50px; height: 50px; }
}
@media (max-width: 639px) {
  .dh-back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* Homepage About section — doctor card: give the photo a proportional share instead of a small fixed width */
@media (min-width: 640px) {
  .dh-doc-photo-col { flex-basis: 55%; max-width: 55%; }
}

/* Inner-page hero — NO blur anywhere, crystal clear photo */
.dh-hero-glass {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Keep the hero heading/subtitle readable now that the photo shows through */
section.bg-navy-900 h1,
section.bg-navy-900 > .relative p {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

/* ── Inner-page hero: crystal photo + single wave ─────────────────────────── */
.dh-page-hero { min-height: 340px; display: flex; flex-direction: column; padding-top: 80px; }
@media (min-width: 640px)  { .dh-page-hero { min-height: 400px; } }
@media (min-width: 1024px) { .dh-page-hero { min-height: 460px; } }

.dh-page-hero-content { padding-bottom: 4rem; }
@media (min-width: 768px) { .dh-page-hero-content { padding-bottom: 6rem; } }

.dh-page-hero-bg { filter: none !important; -webkit-filter: none !important; }



/* Premium text: white with strong dark shadow for crystal-clear readability on any photo */
.dh-page-hero h1,
.dh-page-hero h2 {
  color: #fff !important;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.55),
    0 4px 24px rgba(0,0,0,0.35),
    0 0 60px rgba(0,0,0,0.2) !important;
}
.dh-page-hero p,
.dh-page-hero blockquote {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5), 0 2px 14px rgba(0,0,0,0.3) !important;
}
.dh-page-hero .section-label {
  color: #C4A96A !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}
.dh-page-hero .section-label:before { background-color: #C4A96A !important; }

/* Premium text block — light glass card, photo clearly visible through it */
.dh-page-hero-text-block {
  display: inline-block;
  background: rgba(15,15,12,0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 1rem 1.25rem 1.25rem;
  max-width: 680px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
@media (min-width: 640px) {
  .dh-page-hero-text-block { padding: 1.25rem 1.75rem 1.5rem; }
}
.dh-page-hero-text-block h1,
.dh-page-hero-text-block h2 {
  display: block !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  -webkit-box-decoration-break: initial !important;
  box-decoration-break: initial !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  color: #fff !important;
}
.dh-page-hero-text-block p,
.dh-page-hero-text-block blockquote p {
  display: block !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.45) !important;
  color: rgba(255,255,255,0.92) !important;
}
.dh-page-hero-text-block blockquote { margin-top: 1rem; }

/* Single wave */
.dh-page-hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  line-height: 0;
}
.dh-page-hero-wave svg { display: block; width: 100%; height: 55px; }
@media (min-width: 640px)  { .dh-page-hero-wave svg { height: 70px; } }
@media (min-width: 1024px) { .dh-page-hero-wave svg { height: 85px; } }

/* Animated wave — gentle left-right sway */
@keyframes dh-wave-sway {
  0%   { d: path("M0,30 C240,90 480,0 720,40 C960,80 1200,10 1440,45 L1440,90 L0,90 Z"); }
  50%  { d: path("M0,45 C200,5  460,80 720,35 C980,0  1220,75 1440,30 L1440,90 L0,90 Z"); }
  100% { d: path("M0,30 C240,90 480,0 720,40 C960,80 1200,10 1440,45 L1440,90 L0,90 Z"); }
}
.dh-wave-path {
  animation: dh-wave-sway 7s ease-in-out infinite;
}

/* No glass blur on hero */
.dh-hero-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }



/* ── Inner-page navbar: transparent at top, frosted on scroll ─────────────── */
#dh-navbar[data-inner="1"] {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
#dh-navbar[data-inner="1"] .dh-nav-link,
#dh-navbar[data-inner="1"] .dh-nav-phone {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
#dh-navbar[data-inner="1"] .dh-nav-link:hover { color: #C4A96A !important; }
#dh-navbar[data-inner="1"].dh-navbar-frosted {
  background-color: rgba(250,247,242,0.55) !important;
  backdrop-filter: blur(11px) saturate(1.4);
  -webkit-backdrop-filter: blur(11px) saturate(1.4);
  border-bottom: 1px solid rgba(196,169,106,0.32);
  box-shadow: 0 4px 16px -10px rgba(42,31,20,0.2);
}
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-nav-link,
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-nav-phone {
  color: inherit !important;
  text-shadow: none;
}

/* ── Inner-page breadcrumb: styled pill — distinct from navbar ──────────────── */
.dh-hero-breadcrumb {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9) !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin-bottom: 1.25rem;
}
.dh-hero-breadcrumb a {
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.dh-hero-breadcrumb a:hover { color: #C4A96A !important; }
.dh-hero-breadcrumb span { color: #fff !important; font-weight: 500; }

/* Keep navbar logo + hamburger always visible on inner pages */
#dh-navbar[data-inner="1"] #dh-navbar-logo { filter: brightness(0) invert(1); opacity: 0.92; }
#dh-navbar[data-inner="1"].dh-navbar-frosted #dh-navbar-logo { filter: none; opacity: 1; }
#dh-navbar[data-inner="1"] .dh-menu-btn { color: #fff !important; }
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-menu-btn { color: inherit !important; }

/* ── Inner-page navbar links: premium golden glow effect ──────────────────── */
#dh-navbar[data-inner="1"] .dh-nav-link {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  position: relative;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1), text-shadow 0.25s ease !important;
}
#dh-navbar[data-inner="1"] .dh-nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #C4A96A, #F5D48A, #C4A96A);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 8px rgba(196,169,106,0.8);
}
#dh-navbar[data-inner="1"] .dh-nav-link:hover {
  color: #F5D48A !important;
  transform: scale(1.1) translateY(-1px) !important;
  text-shadow: 0 0 12px rgba(196,169,106,0.9), 0 0 24px rgba(196,169,106,0.5) !important;
}
#dh-navbar[data-inner="1"] .dh-nav-link:hover::after { width: 80%; }
#dh-navbar[data-inner="1"] .dh-nav-link-active {
  color: #F5D48A !important;
  text-shadow: 0 0 10px rgba(196,169,106,0.8) !important;
}
#dh-navbar[data-inner="1"] .dh-nav-link-active::after { width: 80%; }

/* Phone number on inner pages */
#dh-navbar[data-inner="1"] .dh-nav-phone {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: color 0.25s, text-shadow 0.25s !important;
}
#dh-navbar[data-inner="1"] .dh-nav-phone:hover {
  color: #F5D48A !important;
  text-shadow: 0 0 10px rgba(196,169,106,0.7) !important;
}

/* After scroll — revert to normal theme colors */
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-nav-link {
  color: inherit !important;
  text-shadow: none;
  transform: none !important;
}
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-nav-link::after {
  background: linear-gradient(90deg, #C4A96A, #B89440);
  box-shadow: none;
}
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-nav-link:hover {
  color: #B89440 !important;
  text-shadow: none !important;
  transform: scale(1.05) translateY(-1px) !important;
}
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-nav-phone {
  color: inherit !important;
  text-shadow: none;
}

/* ── Center the hero text block ───────────────────────────────────────────── */
.dh-page-hero-content {
  padding-bottom: 4rem;
  min-height: calc(100% - 80px);
}
@media (min-width: 768px) { .dh-page-hero-content { padding-bottom: 6rem; } }
.dh-page-hero-text-block { text-align: left; }

/* ── Navbar: fully transparent at top on inner pages ─────────────────────── */
#dh-navbar[data-inner="1"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
#dh-navbar[data-inner="1"].dh-navbar-frosted {
  background-color: rgba(250,247,242,0.55) !important;
  backdrop-filter: blur(11px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(11px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(196,169,106,0.32) !important;
  box-shadow: 0 4px 16px -10px rgba(42,31,20,0.2) !important;
}

/* Individual glass pill around each nav link — only at top */
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) .dh-nav-link {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 5px 16px !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  font-weight: 500;
}
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) .dh-nav-link-active {
  background: rgba(196,169,106,0.4) !important;
  border-color: rgba(196,169,106,0.7);
  color: #fff !important;
  text-shadow: 0 0 10px rgba(196,169,106,0.7);
}
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) .dh-nav-link:hover {
  background: rgba(196,169,106,0.3) !important;
  border-color: rgba(196,169,106,0.6);
  color: #fff !important;
  transform: scale(1.07) translateY(-1px) !important;
  text-shadow: 0 0 12px rgba(196,169,106,0.8) !important;
}
/* After scroll: remove pills */
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-nav-link {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 4px 12px !important;
  color: inherit !important;
  text-shadow: none !important;
}

/* Logo: glass backdrop when navbar is transparent */
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) #dh-navbar-logo {
  filter: none !important;
  opacity: 1 !important;
  padding: 6px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
}
#dh-navbar[data-inner="1"].dh-navbar-frosted #dh-navbar-logo {
  padding: 0;
  background: none;
  border: none;
  backdrop-filter: none;
  filter: none !important;
  opacity: 1 !important;
}

/* Hamburger: clear glass button */
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) .dh-menu-btn {
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 10px;
  color: #fff !important;
  padding: 8px 10px;
}
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-menu-btn {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none;
  color: inherit !important;
}

/* Keep logo coloured (not inverted to white) */
#dh-navbar[data-inner="1"] #dh-navbar-logo {
  filter: none !important;
  opacity: 1 !important;
}

/* Hamburger always dark/visible */
#dh-navbar[data-inner="1"] .dh-menu-btn {
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff !important;
}
#dh-navbar[data-inner="1"].dh-navbar-frosted .dh-menu-btn {
  background: transparent;
  color: inherit !important;
}

/* ── Fix: logo — white drop-shadow for visibility, no awkward glass box ──────── */
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) #dh-navbar-logo {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 2px 8px rgba(0,0,0,0.35)) !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* ── Hero content layout is now handled directly in inc/page-hero.php via
   a 3-column flex (spacer | centered card | spacer) that mirrors the
   navbar's own logo | links | CTA structure — no extra centering override
   needed here, and forcing justify-content:center on the outer row would
   undo that alignment. */
.dh-page-hero-text-block {
  max-width: 680px;
  width: 100%;
}

/* ── Fix: mobile X close button — always dark and visible on its white panel ── */
#dh-mobile-close,
#dh-mobile-close svg,
#dh-mobile-close path {
  color: #2A1F14 !important;
  stroke: #2A1F14 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* ── Active nav link pill — ONE definitive rule, wins in every navbar state
   (transparent-at-top AND frosted-on-scroll). Solid gold pill, dark bold
   text, no gradient/blur/opacity tricks that can wash it out. ─────────────── */
#dh-navbar[data-inner="1"] .dh-nav-link-active,
#dh-navbar[data-inner="1"] a.dh-nav-link-active {
  background: #C4A96A !important;
  border: 2px solid #F5D48A !important;
  color: #2A1F14 !important;
  -webkit-text-fill-color: #2A1F14 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 3px rgba(196,169,106,0.35), 0 4px 16px rgba(0,0,0,0.3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  border-radius: 999px !important;
  padding: 5px 16px !important;
}
#dh-navbar[data-inner="1"] .dh-nav-link-active::after,
#dh-navbar[data-inner="1"] a.dh-nav-link-active::after {
  display: none !important;
}

/* ── About page — "Нашите ценности" section: premium multi-tone navy
   gradient instead of the flat single-color bg-navy-800. Blends a deep
   navy with a warmer indigo tone and a faint gold undertone. A flat
   gradient alone isn't enough for glass to read as glass — blur only
   becomes visible when there's actual detail/edges behind it to distort,
   so we add soft glowing "blob" shapes plus a fine grain texture that
   the cards' backdrop-filter will visibly smear/soften. */
.dh-values-section {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(196,169,106,0.10), transparent 60%),
    radial-gradient(ellipse 70% 70% at 100% 100%, rgba(58,92,128,0.55), transparent 65%),
    linear-gradient(135deg, #1E3852 0%, #16283C 45%, #0F1D2C 100%);
  overflow: hidden;
}
.dh-values-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 320px at 12% 30%, rgba(245,212,138,0.35), transparent 70%),
    radial-gradient(circle 280px at 42% 75%, rgba(120,160,200,0.30), transparent 70%),
    radial-gradient(circle 260px at 68% 20%, rgba(196,169,106,0.28), transparent 70%),
    radial-gradient(circle 300px at 90% 65%, rgba(90,130,180,0.32), transparent 70%);
}
.dh-values-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.dh-values-section .max-w-7xl { position: relative; z-index: 1; }

/* ── Value cards: real glass — visibly transparent, strong blur, so the
   blobs/grain behind visibly soften and blend through the card. ────────── */
.dh-value-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 50%, rgba(196,169,106,0.09) 100%);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 12px 32px -18px rgba(0,0,0,0.55);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease, border-color 0.3s ease;
  overflow: hidden;
  isolation: isolate;
}
.dh-value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(245,212,138,0.6), rgba(255,255,255,0.14) 40%, rgba(196,169,106,0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.dh-value-card::after {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 60%; height: 90%;
  background: radial-gradient(ellipse at center, rgba(245,212,138,0.20), transparent 70%);
  pointer-events: none;
}
.dh-value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 20px 44px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(245,212,138,0.3);
}
.dh-value-icon {
  position: relative;
  background: linear-gradient(135deg, rgba(245,212,138,0.24), rgba(196,169,106,0.08));
  border: 1px solid rgba(245,212,138,0.32);
  box-shadow: 0 4px 14px -6px rgba(196,169,106,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ═══════════ POLISH LAYER · фини общосайтови подобрения ═══════════ */
/* селекция на текст в топлия тон на бранда */
::selection{background:rgba(196,169,106,.35);color:#2A1F14}
/* модерни, достъпни focus états за клавиатура */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #C4A96A;outline-offset:3px;border-radius:6px}
/* тънък, елегантен скролбар в тона на темата */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#F3EDE2}
::-webkit-scrollbar-thumb{background:#C9B58C;border-radius:8px;border:3px solid #F3EDE2}
::-webkit-scrollbar-thumb:hover{background:#B49B66}
/* бутоните дишат: плавен лифт при hover, стегнато при клик */
.btn-primary,button[data-booking-open]{
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,filter .25s ease}
.btn-primary:hover,button[data-booking-open]:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn-primary:active,button[data-booking-open]:active{transform:translateY(0) scale(.97)}
/* изображенията: меко приближаване при hover в линкове (галерия и карти) */
a img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
a:hover img{transform:scale(1.03)}
a{overflow:visible}
a:has(img){overflow:hidden;display:inline-block;border-radius:inherit}
/* плавно появяване на страницата при зареждане */
@keyframes dhPageIn{from{opacity:0}to{opacity:1}}
body{animation:dhPageIn .45s ease both}
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  .btn-primary,button[data-booking-open],a img{transition:none}
}


/* ═══════════════ ЛОГО · окончателно изчистване (всички вътрешни страници, PC + телефон) ═══════════════ */
/* Никаква кутия/фон/рамка/инвертиране в НИКОЕ състояние — само чисто лого с меко сияние. */
#dh-navbar #dh-navbar-logo,
#dh-navbar[data-inner="1"] #dh-navbar-logo,
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) #dh-navbar-logo,
#dh-navbar[data-inner="1"].dh-navbar-frosted #dh-navbar-logo{
  background:none !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}
/* Върху тъмен/прозрачен бар: меко бяло сияние, за да „изплува" зъбът и надписът. */
#dh-navbar[data-inner="1"]:not(.dh-navbar-frosted) #dh-navbar-logo{
  filter:drop-shadow(0 0 7px rgba(255,255,255,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.35)) !important;
}
/* Върху светлия frosted бар при скрол: фина сянка за дефиниция, без сияние. */
#dh-navbar[data-inner="1"].dh-navbar-frosted #dh-navbar-logo{
  filter:drop-shadow(0 2px 6px rgba(42,31,20,.20)) !important;
}
/* Начална страница: лек контур, за да се чете върху снимката. */
#dh-navbar[data-home="0"] #dh-navbar-logo{
  filter:drop-shadow(0 0 6px rgba(255,255,255,.8)) drop-shadow(0 1px 3px rgba(42,31,20,.3)) !important;
}
/* По-едро и ясно лого на PC. */
@media (min-width:768px){
  #dh-navbar #dh-navbar-logo{ height:3.6rem !important; }
}
/* Мобилното лого в хедъра + чекмеджето — също чисто, без кутия. */
#dh-navbar #dh-navbar-logo{ height:3rem; width:auto; }

/* ── мобилният хамбургер/X: винаги видим — на светло И на тъмно, над менюто ── */
#dh-mobile-toggle{
  color:#2A1F14 !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(168,134,60,.45) !important;
  border-radius:12px !important;
  box-shadow:0 3px 10px rgba(30,20,8,.18);
  position:relative;
  z-index:60; /* над панела на менюто, за да служи X-ът за затваряне */
}
#dh-mobile-toggle svg{ stroke:#2A1F14 !important; }

/* ════════════════════════════════════════════════════════════════════
   Страница „За мен" — красив уводен текст (включва се от админа)
   ════════════════════════════════════════════════════════════════════ */
.dh-freetext-frame{
  position:relative;
  max-width:46rem;
  background:linear-gradient(180deg,#FFFDF8 0%,#FBF6EC 100%);
  border:1px solid rgba(196,169,106,.45);
  box-shadow:0 0 0 5px #FFFDF8, 0 0 0 6px rgba(196,169,106,.35), 0 24px 48px -22px rgba(60,40,15,.25);
  border-radius:2px;
  padding:3rem 2.25rem 2.5rem;
  text-align:center;
}
@media (min-width:640px){ .dh-freetext-frame{ padding:3.5rem 3.5rem 3rem; } }
.dh-freetext-corner{
  position:absolute; width:26px; height:26px; pointer-events:none;
  border-color:rgba(184,148,64,.75); border-style:solid; border-width:0;
}
.dh-freetext-corner.tl{ top:12px; left:12px; border-top-width:2px; border-left-width:2px; }
.dh-freetext-corner.tr{ top:12px; right:12px; border-top-width:2px; border-right-width:2px; }
.dh-freetext-corner.bl{ bottom:12px; left:12px; border-bottom-width:2px; border-left-width:2px; }
.dh-freetext-corner.br{ bottom:12px; right:12px; border-bottom-width:2px; border-right-width:2px; }
.dh-freetext-flourish{
  display:block; color:rgba(184,148,64,.8); font-size:.95rem;
  letter-spacing:.5em; text-indent:.5em; margin-bottom:1rem;
}
.dh-freetext-flourish.bottom{ margin-bottom:0; margin-top:1.25rem; font-size:.8rem; }
.dh-freetext-title{
  color:#3E2C18; font-size:1.65rem; line-height:1.25; font-weight:600; margin:0 0 .9rem;
}
@media (min-width:640px){ .dh-freetext-title{ font-size:1.9rem; } }
.dh-freetext-rule{
  display:block; width:64px; height:2px; margin:0 auto 1.4rem;
  background:linear-gradient(90deg, transparent, rgba(184,148,64,.8), transparent);
}
.dh-freetext-body p{
  font-family:'Playfair Display', Georgia, serif; font-style:italic;
  color:#5A4630; font-size:1.06rem;
  line-height:var(--dh-ft-lh, 1.85);
  margin:0 0 var(--dh-ft-gap, 1.1rem);
}
.dh-freetext-body p:last-child{ margin-bottom:0; }
.dh-freetext-body .dh-ft-h{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-style:normal;
  color:#3E2C18; font-size:1.4rem; line-height:1.3; margin:1.3rem 0 .6rem;
}

/* Разстояние между редовете — избира се от админ →
   Настройки → Страница „За мен" → „разстояние между редовете" */
.dh-ft-compact{ --dh-ft-lh:1.5;  --dh-ft-gap:.45rem; padding-top:2.2rem; padding-bottom:1.9rem; }
.dh-ft-normal { --dh-ft-lh:1.85; --dh-ft-gap:1.1rem; }
.dh-ft-airy   { --dh-ft-lh:2.35; --dh-ft-gap:1.5rem; }
.dh-ft-compact .dh-freetext-flourish{ margin-bottom:.7rem; }
.dh-ft-compact .dh-freetext-flourish.bottom{ margin-top:.9rem; }
.dh-ft-compact .dh-freetext-rule{ margin-bottom:1rem; }

/* „С линия" — фина мастилена линия под всеки ред, като тетрадка.
   Линията следва междуредието, затова работи и при пренесени редове. */
.dh-ft-lines .dh-freetext-body p{
  background-image:linear-gradient(to top, rgba(184,148,64,.38) 1px, transparent 1px);
  background-size:100% calc(1em * var(--dh-ft-lh, 1.85));
  background-position:0 .18em;
  background-repeat:repeat-y;
  padding-bottom:.18em;
}

/* ════════════════════════════════════════════════════════════════════
   „За мен" — 3D тетрадка с разлистване (уводният текст) · v2 премиум
   Опциите от админа важат и тук:
   · разстояние между редовете → височина на реда в тетрадката
   · „с линия / без линия"     → линиите на листа
   · подравняване и отстъпи    → пренасят се ред по ред
   ════════════════════════════════════════════════════════════════════ */
.dh-nb-root{ --dh-nb-row:2em; --dh-nb-page-h:460px; }
.dh-nb-root[data-spacing="compact"]{ --dh-nb-row:1.6em; }
.dh-nb-root[data-spacing="airy"]{ --dh-nb-row:2.5em; }

.dh-nb-wrap{
  max-width:66rem; margin:0 auto;
  padding:2.2rem 0 0;
  perspective:2400px;
}
/* мек тъмен ореол зад тетрадката — отлепя я от фона на сайта */
.dh-nb-wrap{ position:relative; }
.dh-nb-wrap::before{
  content:''; position:absolute; left:50%; top:52%;
  width:118%; height:130%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(72,52,24,.10), rgba(72,52,24,.045) 45%, transparent 70%);
  pointer-events:none;
}
/* на мобилно нищо не бива да стърчи хоризонтално извън екрана */
.dh-nb-wrap.dh-nb-mobile::before{ width:100%; }
.dh-nb-mobile .dh-nb-cover{ inset:-10px -8px -14px; }

.dh-nb-book{
  position:relative;
  height:var(--dh-nb-page-h);
  transform:rotateX(4deg);
  transform-style:preserve-3d;
  cursor:pointer;
}

/* ── кожена корица под листовете ─────────────────────────────────── */
.dh-nb-cover{
  position:absolute; inset:-16px -14px -20px;
  transform:translateZ(-22px);
  border-radius:18px;
  background:
    radial-gradient(140% 120% at 30% 0%, rgba(255,225,170,.10), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.016) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #4A3520 0%, #3A2814 35%, #2A1B0C 75%, #1F1408 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,230,180,.14),
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 -14px 30px rgba(0,0,0,.35),
    0 22px 34px -14px rgba(35,22,8,.55),
    0 44px 80px -26px rgba(35,22,8,.45);
  pointer-events:none;
}
/* златен кант + шев по корицата */
.dh-nb-cover::before{
  content:''; position:absolute; inset:7px; border-radius:12px;
  border:1px solid rgba(212,175,110,.42);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
  pointer-events:none;
}
.dh-nb-cover::after{
  content:''; position:absolute; inset:11px; border-radius:9px;
  border:1px dashed rgba(212,175,110,.22);
  pointer-events:none;
}

.dh-nb-pages{ position:absolute; inset:0; transform-style:preserve-3d; }

/* ── страница: топла хартия с фино влакно ────────────────────────── */
.dh-nb-page{
  position:absolute; top:0; bottom:0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.5), transparent 55%),
    repeating-linear-gradient(0deg, rgba(120,90,40,.017) 0 2px, transparent 2px 5px),
    linear-gradient(180deg,#FFFDF7 0%,#FBF6EA 62%,#F6EFDD 100%);
  overflow:hidden;
  box-shadow:inset 0 0 30px rgba(120,90,40,.07);
}
.dh-nb-base-left,
.dh-nb-sheet .dh-nb-back{ border-radius:12px 3px 3px 12px; }
.dh-nb-base-right,
.dh-nb-sheet .dh-nb-front{ border-radius:3px 12px 12px 3px; }
.dh-nb-base-left{
  left:0; width:50%;
  box-shadow:
    inset 0 0 30px rgba(120,90,40,.07),
    -2px 2px 0 #F1E8D4, -4px 3px 0 #E9DEC6, -6px 5px 0 #E0D3B6,
    -8px 9px 18px rgba(50,32,10,.28);
}
.dh-nb-base-right{
  right:0; width:50%;
  box-shadow:
    inset 0 0 30px rgba(120,90,40,.07),
    2px 2px 0 #F1E8D4, 4px 3px 0 #E9DEC6, 6px 5px 0 #E0D3B6,
    8px 9px 18px rgba(50,32,10,.28);
}
.dh-nb-mobile .dh-nb-base{
  left:0; right:0; border-radius:3px 12px 12px 3px;
  box-shadow:
    inset 0 0 30px rgba(120,90,40,.07),
    2px 2px 0 #F1E8D4, 4px 3px 0 #E9DEC6, 6px 5px 0 #E0D3B6,
    8px 9px 18px rgba(50,32,10,.28);
}

/* ── съдържание: шапка (заглавие НАД линиите) + тяло върху линиите ── */
.dh-nb-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:1.5rem 2.3rem 1.15rem 2.8rem;
  font-size:1.12rem;
}
.dh-nb-head{ flex:0 0 auto; padding:.15rem 0 1.05rem; }
.dh-nb-title{
  font-family:'Playfair Display',Georgia,serif;
  color:#31230F; font-weight:700; font-size:1.95rem; line-height:1.2;
  letter-spacing:.01em; margin:0;
}
/* златна черта-орнамент ПОД заглавието, преди да започнат линиите */
.dh-nb-title::after{
  content:''; display:block; width:4.5rem; height:2px; margin-top:.55rem;
  background:linear-gradient(90deg, rgba(184,148,64,.85), rgba(184,148,64,.15));
  border-radius:2px;
}
.dh-nb-body{ flex:1 1 auto; min-height:0; position:relative; }
.dh-nb-body p{
  font-family:'Playfair Display',Georgia,serif; font-style:italic;
  color:#4A3722; margin:0 !important;
  line-height:var(--dh-nb-row) !important;
  background:none !important; padding-bottom:0 !important;
  position:relative; z-index:1;
}
/* вътрешна заглавна част (ред започващ с # в админа) — за втора/трета история */
.dh-nb-body h3{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-style:normal;
  color:#31230F; font-size:1.5rem; line-height:1.3;
  margin:.85em -.5rem .4em; padding:.18em .5rem .42em;
  background:linear-gradient(180deg,#FEFCF6,#FAF4E6);
  border-radius:5px;
  position:relative; z-index:1;
}
.dh-nb-body h3::after{
  content:''; display:block; width:3.6rem; height:2px; margin:.5rem auto 0;
  background:linear-gradient(90deg, rgba(184,148,64,.15), rgba(184,148,64,.85), rgba(184,148,64,.15));
  border-radius:2px;
}
.dh-nb-body h3[style*="text-align:left"]::after{ margin-left:0; background:linear-gradient(90deg, rgba(184,148,64,.85), rgba(184,148,64,.15)); }
.dh-nb-body h3[style*="text-align:right"]::after{ margin-right:0; background:linear-gradient(90deg, rgba(184,148,64,.15), rgba(184,148,64,.85)); }
/* единични линии — една тънка черта на ред, чак до края на листа */
.dh-nb-root[data-lines="on"] .dh-nb-body{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--dh-nb-row) - 1px),
    rgba(158,128,70,.30) calc(var(--dh-nb-row) - 1px),
    rgba(158,128,70,.30) var(--dh-nb-row)
  );
}
/* червено вертикално поле като в истинска тетрадка */
.dh-nb-root[data-lines="on"] .dh-nb-page::before{
  content:''; position:absolute; top:0; bottom:0; left:2.05rem; width:1px;
  background:rgba(199,92,74,.38);
  box-shadow:3px 0 0 rgba(199,92,74,.14);
  pointer-events:none; z-index:2;
}

/* декоративна финална страница */
.dh-nb-decor{ display:flex; align-items:center; justify-content:center; }
.dh-nb-decor span{ color:rgba(184,148,64,.65); font-size:1.5rem; letter-spacing:.45em; text-indent:.45em; }

/* номер на страницата в кръгче */
.dh-nb-num{
  position:absolute; bottom:12px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(184,148,64,.6); border-radius:50%;
  font-family:'Playfair Display',Georgia,serif; font-style:italic;
  font-size:.82rem; color:#7A5E2E;
  background:
    radial-gradient(circle at 32% 28%, #FFFEF9, #F4EBD5);
  box-shadow:0 1px 3px rgba(60,40,15,.18), inset 0 1px 0 rgba(255,255,255,.8);
  z-index:3;
}
.dh-nb-base-left .dh-nb-num, .dh-nb-back .dh-nb-num{ left:16px; }
.dh-nb-base-right .dh-nb-num, .dh-nb-front .dh-nb-num{ right:16px; }
.dh-nb-mobile .dh-nb-num{ right:16px; left:auto; }

/* ── листът, който се прелиства ── */
.dh-nb-sheet{
  position:absolute; top:0; bottom:0; right:0; width:50%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.36,.03,.2,.99);
  will-change:transform;
}
.dh-nb-mobile .dh-nb-sheet{ width:100%; }
.dh-nb-flipped{ transform:rotateY(-180deg); }
.dh-nb-face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.dh-nb-back{ transform:rotateY(180deg); }
/* сянка/извивка на хартията при прелистване */
.dh-nb-front::after, .dh-nb-back::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(80,52,16,.20), rgba(80,52,16,.05) 18%, transparent 34%);
  opacity:0; transition:opacity .55s ease;
}
.dh-nb-flipped .dh-nb-front::after{ opacity:1; }
.dh-nb-sheet:not(.dh-nb-flipped) .dh-nb-back::after{ opacity:1; }
/* засенчване до гръбнака — вдлъбнатината на разтвора */
.dh-nb-base-left::after, .dh-nb-back::before{
  content:''; position:absolute; top:0; bottom:0; right:0; width:16%;
  background:linear-gradient(to right, transparent, rgba(80,52,16,.13)); pointer-events:none;
}
.dh-nb-base-right::after, .dh-nb-front::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:16%;
  background:linear-gradient(to left, transparent, rgba(80,52,16,.13)); pointer-events:none;
}

/* ── гръбнак на подвързан бележник (реалистична вдлъбнатина) ─────── */
.dh-nb-spine{
  position:absolute; top:0; bottom:0; left:50%; width:88px;
  transform:translateX(-50%) translateZ(2px);
  z-index:300; pointer-events:none;
  /* дълбока сянка в средата + светъл ръб на извитата хартия от двете страни */
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(70,45,15,.05) 22%,
    rgba(60,38,12,.16) 38%,
    rgba(38,23,8,.34) 47%,
    rgba(24,14,5,.46) 50%,
    rgba(38,23,8,.34) 53%,
    rgba(60,38,12,.16) 62%,
    rgba(70,45,15,.05) 78%,
    transparent 100%);
}
/* тънката ивица от кожената подвързия, която се вижда в дъното на разтвора */
.dh-nb-spine::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:3px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #241708, #3A2814 50%, #241708);
  box-shadow:0 0 6px 1px rgba(15,9,3,.55);
}
/* мек отблясък по извивката на листа до гръбнака */
.dh-nb-spine::after{
  content:''; position:absolute; top:0; bottom:0; left:0; right:0;
  background:
    linear-gradient(90deg, transparent 26%, rgba(255,250,235,.35) 33%, transparent 40%),
    linear-gradient(90deg, transparent 60%, rgba(255,250,235,.35) 67%, transparent 74%);
}
/* на мобилно гръбнакът е отляво — страницата извира от подвързията */
.dh-nb-mobile .dh-nb-spine{
  left:0; width:34px; transform:translateZ(2px);
  background:linear-gradient(90deg,
    rgba(24,14,5,.42) 0%,
    rgba(38,23,8,.30) 22%,
    rgba(60,38,12,.14) 55%,
    rgba(70,45,15,.05) 80%,
    transparent 100%);
}
.dh-nb-mobile .dh-nb-spine::before{
  left:0; width:3px; transform:none;
}
.dh-nb-mobile .dh-nb-spine::after{
  background:linear-gradient(90deg, transparent 34%, rgba(255,250,235,.35) 48%, transparent 62%);
}
.dh-nb-mobile .dh-nb-content{ padding-left:2.7rem; padding-right:1.5rem; }
.dh-nb-mobile .dh-nb-page::before{ left:2.15rem !important; }

/* ── навигация ── */
.dh-nb-nav{
  display:flex; align-items:center; justify-content:center; gap:1.15rem;
  margin-top:2.9rem;
}
.dh-nb-btn{
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(184,148,64,.6);
  background:
    radial-gradient(circle at 32% 26%, #FFFEF8, #F1E6CC 68%, #E4D4AF);
  color:#7A5A22; font-size:1.05rem; cursor:pointer;
  box-shadow:
    0 4px 10px rgba(50,32,10,.22),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(150,115,50,.18);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.dh-nb-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(50,32,10,.3), inset 0 1px 0 rgba(255,255,255,.9);
}
.dh-nb-btn:active:not(:disabled){ transform:translateY(0); }
.dh-nb-btn:disabled{ opacity:.32; cursor:default; }
.dh-nb-count{
  font-family:'Playfair Display',Georgia,serif; font-style:italic;
  color:rgba(90,70,40,.72); font-size:.95rem; min-width:8rem; text-align:center;
  letter-spacing:.03em;
}

/* измервателна страница — невидима, но с реални размери */
.dh-nb-measure{ visibility:hidden; left:0; width:50%; }
.dh-nb-mobile .dh-nb-measure{ width:100%; }

/* ════════════════════════════════════════════════════════════════════
   Корица на книгата „Пътят на усмивката" · v2
   Десктоп: затворена книга вдясно + покана (зъбче и текст) вляво.
   Мобилно: корица на цял екран, както преди.
   Без нито една безкрайна анимация — всичко е статично и леко.
   ════════════════════════════════════════════════════════════════════ */
.dh-nb-frontcover{
  position:absolute; inset:-8px; z-index:500;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.3,.05,.22,1),
             visibility 0s linear .46s;
  cursor:pointer;
}
/* десктоп: корицата е само дясната половина — портретна затворена книга */
.dh-nbc-desk{ inset:-10px -10px -14px calc(50% - 1px); }
.dh-nbc-open{ transform:rotateY(-180deg); }

.dh-nbc-face{
  position:absolute; inset:0; border-radius:16px; overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.dh-nbc-desk .dh-nbc-face{ border-radius:9px 18px 18px 9px; }
/* лицева страна: кожа */
.dh-nbc-front{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(130% 110% at 30% -5%, rgba(255,225,170,.13), transparent 46%),
    radial-gradient(120% 100% at 78% 108%, rgba(0,0,0,.35), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 3px, transparent 3px 7px),
    linear-gradient(158deg, #4C3722 0%, #3B2915 38%, #2B1C0C 74%, #201409 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,230,180,.16),
    inset 0 0 0 1px rgba(0,0,0,.4),
    inset 0 -18px 34px rgba(0,0,0,.36),
    0 20px 34px -12px rgba(30,18,6,.55);
}
/* гръб на корицата (вижда се при отваряне): вътрешна кожа */
.dh-nbc-back{
  transform:rotateY(180deg);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,225,170,.05), transparent 50%),
    linear-gradient(160deg, #33230F, #241708 70%);
  box-shadow:inset 0 0 0 1px rgba(212,175,110,.18), inset 0 0 40px rgba(0,0,0,.5);
}
/* златна рамка + шев */
.dh-nbc-frame{
  position:absolute; inset:13px; border-radius:11px;
  border:1px solid rgba(212,175,110,.5);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 22px rgba(212,175,110,.06);
  pointer-events:none;
}
.dh-nbc-stitch{
  position:absolute; inset:18px; border-radius:8px;
  border:1px dashed rgba(212,175,110,.26);
  pointer-events:none;
}
/* гръбнак по левия ръб на затворената книга (само десктоп) */
.dh-nbc-spineedge{
  position:absolute; top:0; bottom:0; left:0; width:20px;
  background:linear-gradient(90deg,
    rgba(0,0,0,.42) 0, rgba(0,0,0,.22) 5px,
    rgba(255,230,180,.10) 8px, transparent 14px);
  pointer-events:none;
}

/* ── съдържание на корицата ── */
.dh-nbc-inner{
  position:relative; text-align:center;
  padding:2.2rem 2.2rem; max-width:30rem;
}
.dh-nbc-toothwrap{
  position:relative; display:inline-block; margin-bottom:1.1rem;
}
.dh-nbc-tooth{ width:70px; height:70px; display:block; }
.dh-nbc-halo{
  position:absolute; left:50%; top:50%;
  width:126px; height:126px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(226,190,120,.18), rgba(226,190,120,.06) 45%, transparent 68%);
  border-radius:50%;
  pointer-events:none;
}
.dh-nbc-spark{ position:absolute; color:#EFD79E; pointer-events:none; }
.dh-nbc-spark1{ top:-4px; right:-14px; font-size:.85rem; opacity:.9; }
.dh-nbc-spark2{ bottom:6px; left:-16px; font-size:.62rem; opacity:.6; }

.dh-nbc-title{
  margin:0; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:2.2rem; line-height:1.18; letter-spacing:.015em;
  background:linear-gradient(178deg, #F5E3B0 8%, #D8B266 46%, #A9822F 82%, #E9CF92 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#D8B266;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.dh-nbc-rule{
  display:block; margin:.9rem 0 1rem;
  color:rgba(212,175,110,.7); font-size:.85rem;
  letter-spacing:.55em; text-indent:.55em;
}
.dh-nbc-sub{
  margin:0; font-family:'Playfair Display',Georgia,serif; font-style:italic;
  color:rgba(238,222,190,.85); font-size:1.05rem; line-height:1.55;
}
.dh-nbc-hint{
  margin:1.9rem 0 0;
  color:rgba(226,190,120,.8);
  font-size:.72rem; letter-spacing:.28em; text-indent:.28em; text-transform:uppercase;
}

/* ── поканата вляво от затворената книга (само десктоп) ── */
.dh-nb-invite{
  position:absolute; top:0; bottom:0; left:0; width:47%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem; padding:1rem; text-align:center;
  cursor:pointer; z-index:510;
  transition:opacity .4s ease;
}
.dh-nb-book:not(.dh-nb-closed) .dh-nb-invite{ opacity:0; pointer-events:none; }
.dh-nb-invite-lead{
  margin:0 0 .4rem;
  font-family:'Playfair Display',Georgia,serif; font-style:italic;
  color:#54402A; font-size:1.16rem; line-height:1.95;
  max-width:23rem; text-align:center;
}
.dh-nb-invite-lead::after{
  content:''; display:block; width:56px; height:2px; margin:1.3rem auto 0;
  background:linear-gradient(90deg, transparent, rgba(184,148,64,.75), transparent);
  border-radius:2px;
}
.dh-nb-invite-tooth{ position:relative; margin-top:1.6rem; }
.dh-nb-invite .dh-nbc-tooth{ width:88px; height:88px; }
.dh-nb-invite .dh-nbc-halo{
  width:158px; height:158px;
  background:radial-gradient(circle, rgba(196,160,90,.30), rgba(196,160,90,.09) 45%, transparent 68%);
}
.dh-nb-invite-text{
  margin:0; color:#8A6A2E;
  font-size:.8rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  font-weight:500; line-height:2.1; max-width:17rem;
}

/* ── докато книгата е затворена ── */
/* скриваме отворените елементи под/около корицата */
.dh-nb-cover, .dh-nb-base-left, .dh-nb-spine{ transition:opacity .3s ease .12s; }
.dh-nb-closed .dh-nb-cover,
.dh-nb-closed .dh-nb-base-left,
.dh-nb-closed .dh-nb-spine{ opacity:0; transition:none; }
/* и навигацията се появява чак след отварянето */
.dh-nb-nav{ transition:opacity .45s ease .25s; }
.dh-nb-closed + .dh-nb-nav{ opacity:0; pointer-events:none; }
.dh-nb-frontcover:hover .dh-nbc-frame{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 26px rgba(212,175,110,.12);
}

/* мобилни размери */
.dh-nb-mobile .dh-nb-frontcover{ inset:-6px; }
.dh-nb-mobile .dh-nbc-title{ font-size:1.85rem; }
.dh-nb-mobile .dh-nbc-sub{ font-size:.98rem; }
.dh-nb-mobile .dh-nbc-tooth{ width:58px; height:58px; }
.dh-nb-mobile .dh-nbc-halo{ width:104px; height:104px; }
.dh-nb-mobile .dh-nbc-inner{ padding:1.6rem 1.4rem; }


/* ════════════════════════════════════════════════════════════════════
   Услуги — свежи пастелни карти (само боксовете, темата не се пипа)
   Палитра от 6 редуващи се цвята: мента, праскова, люляк, небе, роза, пясък
   ════════════════════════════════════════════════════════════════════ */
#dh-services-accordion .dh-svc-card:nth-child(6n+1){ --svc-a:#DFF5EA; --svc-b:#2E9E74; --svc-brd:rgba(46,158,116,.4);  --svc-glow:rgba(46,158,116,.28); --svc-glow2:rgba(46,158,116,.5); --svc-brd2:rgba(46,158,116,.7); }
#dh-services-accordion .dh-svc-card:nth-child(6n+2){ --svc-a:#FFE9DC; --svc-b:#E97F42; --svc-brd:rgba(233,127,66,.4);  --svc-glow:rgba(233,127,66,.28); --svc-glow2:rgba(233,127,66,.5); --svc-brd2:rgba(233,127,66,.7); }
#dh-services-accordion .dh-svc-card:nth-child(6n+3){ --svc-a:#EBE7FB; --svc-b:#7568D6; --svc-brd:rgba(117,104,214,.4);  --svc-glow:rgba(117,104,214,.28); --svc-glow2:rgba(117,104,214,.5); --svc-brd2:rgba(117,104,214,.7); }
#dh-services-accordion .dh-svc-card:nth-child(6n+4){ --svc-a:#DDF0FC; --svc-b:#3690C9; --svc-brd:rgba(54,144,201,.4);  --svc-glow:rgba(54,144,201,.28); --svc-glow2:rgba(54,144,201,.5); --svc-brd2:rgba(54,144,201,.7); }
#dh-services-accordion .dh-svc-card:nth-child(6n+5){ --svc-a:#FDE3EC; --svc-b:#D95C8C; --svc-brd:rgba(217,92,140,.4);  --svc-glow:rgba(217,92,140,.28); --svc-glow2:rgba(217,92,140,.5); --svc-brd2:rgba(217,92,140,.7); }
#dh-services-accordion .dh-svc-card:nth-child(6n){   --svc-a:#FFF1D2; --svc-b:#CF9A22; --svc-brd:rgba(207,154,34,.4);  --svc-glow:rgba(207,154,34,.28); --svc-glow2:rgba(207,154,34,.5); --svc-brd2:rgba(207,154,34,.7); }

#dh-services-accordion .dh-svc-card{
  background:#FFFFFF !important;
  border-color:var(--svc-brd) !important;
  border-radius:20px !important;
  /* постоянно меко светене в цвета на картата */
  box-shadow:
    0 0 22px -2px var(--svc-glow),
    0 10px 26px -16px rgba(70,55,30,.12);
}
#dh-services-accordion .dh-svc-card:hover,
#dh-services-accordion .dh-svc-card.border-warm-400{
  border-color:var(--svc-brd2) !important;
  /* при посочване/отваряне светенето става една идея по-силно */
  box-shadow:
    0 0 32px 0 var(--svc-glow2),
    0 22px 44px -20px rgba(70,55,30,.2) !important;
}
/* цветното петно в ъгъла */
#dh-services-accordion .dh-svc-card::before{
  content:''; position:absolute; top:-52px; right:-52px;
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle at 32% 32%, var(--svc-a), transparent 68%);
  opacity:.85; pointer-events:none;
  transition:transform .5s ease, opacity .4s ease;
}
#dh-services-accordion .dh-svc-card:hover::before{ transform:scale(1.18); opacity:1; }
/* номер, стрелка, икона и долна лента в цвета на картата */
#dh-services-accordion .dh-svc-card span.tracking-wider{ color:var(--svc-b) !important; }
#dh-services-accordion .dh-svc-card .dh-svc-arrow{ color:var(--svc-b) !important; opacity:.75; }
#dh-services-accordion .dh-svc-card .w-12.h-12{
  background:var(--svc-a) !important; border-radius:14px !important;
  box-shadow:0 8px 16px -9px var(--svc-brd);
}
#dh-services-accordion .dh-svc-card .dh-svc-bar{
  background:linear-gradient(90deg, var(--svc-b), var(--svc-a)) !important;
}

/* ── текстът при отваряне: чисти абзаци + заглавия само където сложите # ── */
.dh-svc-detail{ position:relative; text-align:left; }
.dh-svc-detail.has-price{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid #F0EAE0; }
.dh-svc-detail p{
  font-size:.92rem; color:#5E5140; font-weight:400;
  line-height:var(--svc-lh, 1.85);
  margin:0 0 var(--svc-gap, .8rem);
}
.dh-svc-detail p:last-child{ margin-bottom:0; }
.dh-svc-detail strong{ font-weight:700; color:#463A28; }
/* разредката се избира от админа за всяка услуга */
.dh-svc-detail.dh-sp-compact{ --svc-lh:1.55; --svc-gap:.45rem; }
.dh-svc-detail.dh-sp-airy{ --svc-lh:2.05; --svc-gap:1.15rem; }
/* заглавна част: абзац, започнат с # в админа → уголемена първа буква */
.dh-svc-lead::first-letter{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.9em; line-height:1; font-weight:600;
  color:var(--svc-b, #9B7A2E);
  padding-right:.05em;
}

/* ════════════════════════════════════════════════════════════════════
   „Разгледайте отблизо" — компактни свежи карти (същата палитра)
   ════════════════════════════════════════════════════════════════════ */
.dh-fp-grid .dh-fp-card:nth-child(6n+1){ --svc-a:#DFF5EA; --svc-b:#2E9E74; --svc-brd:rgba(46,158,116,.4); }
.dh-fp-grid .dh-fp-card:nth-child(6n+2){ --svc-a:#FFE9DC; --svc-b:#E97F42; --svc-brd:rgba(233,127,66,.4); }
.dh-fp-grid .dh-fp-card:nth-child(6n+3){ --svc-a:#EBE7FB; --svc-b:#7568D6; --svc-brd:rgba(117,104,214,.4); }
.dh-fp-grid .dh-fp-card:nth-child(6n+4){ --svc-a:#DDF0FC; --svc-b:#3690C9; --svc-brd:rgba(54,144,201,.4); }
.dh-fp-grid .dh-fp-card:nth-child(6n+5){ --svc-a:#FDE3EC; --svc-b:#D95C8C; --svc-brd:rgba(217,92,140,.4); }
.dh-fp-grid .dh-fp-card:nth-child(6n){   --svc-a:#FFF1D2; --svc-b:#CF9A22; --svc-brd:rgba(207,154,34,.4); }

.dh-fp-card{
  position:relative; display:block; overflow:hidden;
  background:#fff; border:1px solid #F2EDE4; border-radius:18px;
  padding:1.5rem 1.35rem 1.4rem; text-align:center;
  box-shadow:0 10px 24px -16px rgba(70,55,30,.13);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.dh-fp-card:hover{
  transform:translateY(-4px);
  border-color:var(--svc-brd);
  box-shadow:0 22px 42px -20px rgba(70,55,30,.22);
}
.dh-fp-blob{
  position:absolute; top:-46px; right:-46px; width:150px; height:150px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 32% 32%, var(--svc-a), transparent 68%);
  opacity:.85; transition:transform .5s ease;
}
.dh-fp-card:hover .dh-fp-blob{ transform:scale(1.2); }
.dh-fp-icon{
  position:relative; width:48px; height:48px; margin:0 auto .8rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; border-radius:14px; background:var(--svc-a);
  box-shadow:0 8px 16px -9px var(--svc-brd);
}
.dh-fp-badge{
  display:block; font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--svc-b); margin-bottom:.3rem;
}
.dh-fp-title{
  font-size:1.12rem; font-weight:600; color:#2F2415;
  line-height:1.35; margin:0 0 .45rem;
}
.dh-fp-text{
  font-size:.83rem; color:#6E6250; line-height:1.65; margin:0 0 .8rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.dh-fp-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.84rem; font-weight:600; color:var(--svc-b);
  transition:gap .25s ease;
}
.dh-fp-card:hover .dh-fp-link{ gap:.65rem; }

/* ════════════════════════════════════════════════════════════════════
   „Запазете час" — свеж премиум фрост дизайн · v2
   Собствена палитра (без цветовете на темата): чисто бяло стъкло,
   графитен текст (#0F172A) и тюркоазен акцент (#0D9488).
   Само визия — структурата, стъпките и логиката са същите.
   ════════════════════════════════════════════════════════════════════ */
#dh-booking-modal > .absolute.inset-0[data-booking-close]{
  background:rgba(7,16,28,.55) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
}
/* панелът: кристално бяло матирано стъкло */
.dh-booking-panel{
  background:linear-gradient(168deg, rgba(255,255,255,.94) 0%, rgba(244,250,252,.84) 100%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 12px 28px -16px rgba(15,23,42,.28),
    0 48px 100px -32px rgba(15,23,42,.4);
}
@media (min-width:640px){ .dh-booking-panel{ border-radius:28px !important; } }
/* лека „аврора": тюркоаз горе, хладен индиго полъх долу */
.dh-booking-panel::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(56% 38% at 10% -8%, rgba(13,148,136,.12), transparent 62%),
    radial-gradient(46% 34% at 106% 110%, rgba(99,102,241,.08), transparent 60%),
    linear-gradient(115deg, transparent 45%, rgba(255,255,255,.22) 50%, transparent 55%);
}
.dh-booking-panel > *{ position:relative; z-index:1; }
/* заглавие и подзаглавие: графит, отличен контраст */
#dh-booking-title{ color:#0F172A !important; }
#dh-booking-subtitle{ color:#64748B !important; }
/* шапка и футър: чисти светли ленти с хладни разделители */
.dh-booking-panel .bg-white{
  background:rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.dh-booking-panel .border-cream-100{
  border-color:rgba(15,23,42,.08) !important;
}
/* Х: бяло стъклено кръгче */
.dh-booking-panel .dh-modal-x{
  background:#FFFFFF !important;
  border:1px solid #E2E8F0;
  box-shadow:0 3px 8px rgba(15,23,42,.1);
}
.dh-booking-panel .dh-modal-x:hover{ background:#F1F5F9 !important; }
/* „Назад": плътно бяло, тъмни четими букви, ясен кант */
#dh-booking-back{
  background:#FFFFFF !important;
  border:1px solid #D6DEE8;
  color:#0F172A !important;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
}
#dh-booking-back:hover{ background:#F1F5F9 !important; border-color:#B9C5D4; }
#dh-booking-back svg{ color:#0F172A; }
/* „Продължи": тюркоазено стъкло със сияние */
#dh-booking-next{
  background:linear-gradient(180deg,#12A594 0%, #0B8578 100%) !important;
  color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 12px 24px -10px rgba(13,148,136,.6);
}
#dh-booking-next:hover{
  background:linear-gradient(180deg,#15B5A2 0%, #0C9184 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 16px 30px -10px rgba(13,148,136,.7);
}
/* картите вътре (лекари, услуги, часове): въздушно бяло с хладна сянка */
#dh-booking-body .border-2{
  box-shadow:0 4px 14px -8px rgba(15,23,42,.14);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
/* полетата: бели, при фокус — тюркоазен пръстен */
.dh-booking-panel .field-input{
  background:rgba(255,255,255,.85) !important;
  border-color:#DDE5EC !important;
  color:#0F172A !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
}
.dh-booking-panel .field-input:focus{
  background:#FFFFFF !important;
  border-color:#0D9488 !important;
  box-shadow:0 0 0 3px rgba(13,148,136,.16);
}


/* ── „Запазете час" — новата форма за данни (стъпка 4) ── */
.dh-bk-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:420px){ .dh-bk-grid2{ grid-template-columns:1fr; } }
.dh-bk-phone{ display:flex; gap:.5rem; align-items:stretch; }
.dh-bk-prefix{
  flex:0 0 auto; display:flex; align-items:center; gap:.35rem;
  padding:0 .9rem; border-radius:.75rem;
  background:#FFFFFF; border:2px solid #DDE5EC;
  font-size:.875rem; font-weight:600; color:#0F172A; white-space:nowrap;
}
.dh-bk-phone .field-input{ flex:1 1 auto; min-width:0; }
.dh-bk-emailrow{ display:flex; gap:.5rem; align-items:stretch; }
.dh-bk-emailrow .field-input{ flex:1 1 auto; min-width:0; }
.dh-bk-send{
  flex:0 0 auto; padding:0 1.1rem; border-radius:.75rem; cursor:pointer;
  border:2px solid rgba(13,148,136,.5); background:#FFFFFF;
  color:#0B7C72; font-size:.82rem; font-weight:600; white-space:nowrap;
  transition:all .2s ease;
}
.dh-bk-send:hover:not(:disabled){ background:#E7F6F3; border-color:#0D9488; }
.dh-bk-send:disabled{ opacity:.55; cursor:default; }
.dh-bk-info{
  display:flex; align-items:center; gap:.45rem;
  margin:-0.4rem 0 0; font-size:.78rem; color:#3E97C9;
}
.dh-bk-info svg{ flex-shrink:0; color:#3E97C9; }
.dh-bk-code{ letter-spacing:.45em; font-weight:600; text-align:center; }
.dh-bk-check{
  display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
  font-size:.86rem; color:#334155; line-height:1.5;
}
.dh-bk-check input[type="checkbox"]{
  width:18px; height:18px; margin-top:2px; flex-shrink:0;
  accent-color:#0D9488; cursor:pointer;
}
.dh-bk-check strong{ display:block; color:#0F172A; font-weight:600; }
.dh-bk-check em{ display:block; font-style:normal; color:#64748B; font-size:.8rem; margin-top:.1rem; }
.dh-bk-check a{ color:#0D9488; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.dh-bk-call{
  margin:1.2rem 0 0; text-align:center;
  font-size:.82rem; color:#64748B;
}
.dh-bk-call a{ color:#0D9488; font-weight:600; }