/* Delicate Beauty — site-specific additions on top of the template CSS.
   Palette mirrors the template tokens: gold #d2831a, brown #7c5523,
   cream #fffcfb/#faf3ec/#f4ede7, ink #0f0b08, muted #726c68. */

/* One-pager anchors land below the header. */
#za-nas, #uslugi, #zashto-nie, #rezultati, #otzivi, #vaprosi, #kontakti {
  scroll-margin-top: 90px;
}
/* scrollbar-gutter keeps the scrollbar's width reserved, so locking the page
   behind a popup no longer shifts every section sideways by ~15px. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

/* The template's intro-animation CSS hides .contact-top-wrapper/.contact-card-1
   until the Webflow runtime reveals them; the contact section is ours, so it
   must not depend on that reveal. */
#kontakti .contact-top-wrapper,
#kontakti .contact-card-1 { visibility: visible !important; }

/* The template paints the .founder line white (elsewhere it sits on dark
   ground); on the cream about section that renders invisible. */
#za-nas .founder { color: #726c68; }

/* --------------------------------------------------------- contact block */
/* The template sized this column for its own contact page, which carried a
   founder card underneath; ours holds only the two cards, so the 384/305px
   caps left "Работно време:" wrapping onto two lines in a half-empty column. */
/* Desktop only: a phone has no room for a nowrap label column, and forcing one
   pushes the card wider than the screen. Below 768px the template's own stacked
   rows are left alone. */
@media (min-width: 768px) {
  #kontakti .contact-left-block { max-width: 470px; }
  #kontakti .location-card-list { max-width: none; }

  /* One grid for all three rows so the labels line up in a column of their own
     and neither label nor value breaks mid-phrase. */
  #kontakti .location-item-2 {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 10px;
    align-items: baseline;
  }
  #kontakti .location-text-block-2 { display: contents; }
  #kontakti .location-text-block-2 > .body-02 {
    white-space: nowrap;
    color: #0f0b08;
  }
}

/* Google Maps card in the contact section */
#kontakti .contact-card-1 { display: flex; flex-direction: column; gap: 16px; }
.db-map-wrap {
  flex: 1;
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: #f4ede7;
}
.db-map { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }

/* ----------------------------------------------------------- price popups */
/* MUST come before the display rules below. `.db-popup{display:flex}` is a
   class selector and so outranks the UA sheet's `[hidden]{display:none}` —
   without this, un-hiding the wrapper lays out all nine popups at once and the
   last one in the DOM covers the open card, swallowing clicks on its CTA. */
#db-popups[hidden],
.db-popup[hidden] { display: none !important; }

html.db-lock, body.db-lock { overflow: hidden; }
body.db-lock .db-fab { opacity: 0; pointer-events: none; }

#db-popups .db-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(15, 11, 8, 0.58);
  opacity: 0;
  transition: opacity 0.13s linear;
}
#db-popups .db-overlay.is-open { opacity: 1; }

.db-popup {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.db-popup-card {
  position: relative;
  width: 100%; max-width: 620px; max-height: min(85vh, 760px);
  display: flex; flex-direction: column;
  background: #fffcfb;
  border-radius: 24px;
  /* A tighter shadow than the template's: an 80px blur repaints the whole
     halo on every frame of the open transform. */
  box-shadow: 0 16px 40px rgba(15, 11, 8, 0.26);
  padding: 36px 36px 28px;
  opacity: 0; transform: translateY(10px) scale(0.99);
  transition: opacity 0.14s ease-out, transform 0.14s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
  contain: layout;
}
.db-popup.is-open .db-popup-card { opacity: 1; transform: none; }

.db-close {
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: #faf3ec; color: #0f0b08;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.db-close:hover { background: #f4ede7; transform: rotate(90deg); }

.db-popup-head { padding-right: 48px; }
.db-popup-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #d2831a;
  margin-bottom: 10px;
}
.db-popup-head h3 { margin: 0 0 8px; }
.db-popup-head p { margin: 0 0 18px; color: #726c68; font-size: 15px; line-height: 1.5; }

.db-price-list {
  list-style: none; margin: 0 0 22px; padding: 4px 2px 0;
  overflow-y: auto; flex: 1; min-height: 0;
  /* keeps a flick at the end of the list from scrolling the page behind */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.db-price-list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #f4ede7;
}
.db-price-list li:last-child { border-bottom: 0; }
.db-price-list span { font-size: 15px; line-height: 1.45; color: #0f0b08; }
.db-price-list em {
  font-style: normal; font-family: Lora, Georgia, serif;
  font-size: 16px; font-weight: 600; color: #7c5523;
  white-space: nowrap;
}

.db-book {
  display: block; text-align: center; text-decoration: none;
  background: #d2831a; color: #fff;
  font-weight: 600; font-size: 15px;
  padding: 15px 24px; border-radius: 10px;
  transition: background 0.15s ease;
}
.db-book:hover { background: #7c5523; color: #fff; }

/* ------------------------------------------------------- floating call FAB */
.db-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9000;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #d2831a; color: #fff;
  box-shadow: 0 10px 28px rgba(210, 131, 26, 0.45);
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.db-fab:hover { transform: scale(1.07); background: #7c5523; }
.db-fab::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(210, 131, 26, 0.55);
  animation: db-ring 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes db-ring {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 767px) {
  #za-nas, #uslugi, #zashto-nie, #rezultati, #otzivi, #vaprosi, #kontakti {
    scroll-margin-top: 76px;
  }
  /* The map does not need half the screen on a phone. */
  .db-map-wrap, .db-map { min-height: 260px; }
  #kontakti .contact-left-block { max-width: none; }

  /* The template's card grid uses `1fr`, whose auto minimum refuses to shrink
     below the widest card's content, so at 360px the cards hung ~50px past the
     screen edge. minmax(0,...) plus min-width:0 lets them shrink; the long
     email then needs an explicit break opportunity. */
  #kontakti .location-card-list { grid-template-columns: minmax(0, 1fr); }
  #kontakti .location-card,
  #kontakti .location-text-block,
  #kontakti .location-item-2,
  #kontakti .location-text-block-2 { min-width: 0; }
  #kontakti .location-text { overflow-wrap: break-word; }

  /* Side-by-side label and value leave the phone number too little room and it
     breaks mid-number; the label goes on its own line instead. */
  #kontakti .location-text-block-2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  #kontakti .location-card { padding: 18px 18px; }
  .db-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

@media (max-width: 575px) {
  .db-popup { padding: 14px 10px; }
  .db-popup-card {
    padding: 24px 18px 18px;
    border-radius: 20px;
    /* dvh tracks the collapsing browser chrome; vh is the fallback */
    max-height: 88vh;
    max-height: 88dvh;
  }
  .db-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .db-popup-head { padding-right: 42px; }
  .db-popup-head p { margin-bottom: 14px; font-size: 14px; }
  .db-price-list { margin-bottom: 16px; }
  /* Long service names need the full width, so the price drops to its own line. */
  .db-price-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 11px 0;
  }
  .db-price-list span { font-size: 14px; }
  .db-price-list em { font-size: 15px; }
  .db-book { padding: 14px 18px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .db-fab::after { animation: none; }
  html { scroll-behavior: auto; }
  .db-popup-card, #db-popups .db-overlay { transition-duration: 0.01ms; }
}

/* The dialog takes focus when it opens; that container should never draw a
   ring, while the controls inside keep one for keyboard users. */
.db-popup:focus { outline: none; }
.db-close:focus { outline: none; }
.db-close:focus-visible,
.db-book:focus-visible { outline: 2px solid #d2831a; outline-offset: 2px; }

/* ------------------------------------------------- Bulgarian capitalisation */
/* The template capitalises every word of its navigation and footer links,
   which is English style; Bulgarian capitalises only the first word, so the
   links read "За Нас" / "Често Задавани Въпроси". The markup already carries
   the correct casing — just stop transforming it. */
.nav-link,
.footer-widget-link,
.copyright-text,
.nav-dropdown-link,
.megamenu-nav-link,
.menu-dropdown-text { text-transform: none; }

/* ------------------------------------------------------------ tap targets */
@media (max-width: 991px) {
  /* The burger is drawn as three 25x2px lines, giving a 25x10 hit area. Grow
     the hit area with a pseudo-element so the drawing and the layout both stay
     exactly where the template puts them; the right edge is left alone so the
     overlay cannot widen the page. */
  .menu-button { position: relative; }
  .menu-button::after {
    content: "";
    position: absolute;
    inset: -17px 0 -17px -20px;
  }
  /* Menu sheet links sit 25px tall with 5px between them. */
  .nav-menu-2 .nav-link { padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 767px) {
  .footer-widget-link { padding: 6px 0; }
  .footer-widget-link-block { gap: 2px; }
  .db-close { width: 42px; height: 42px; }
}