/* ==========================================================================
   Beboteka — igraonica za bebe, Beograd
   Custom theme layered on top of Bootstrap 5.3
   Design language: bold color blocking, chunky rounded display type,
   hard-offset shadows, angled section dividers, sticker badges.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — sampled directly from the Beboteka logo (assets/logo-beboteka.svg).
     *-soft  = the literal logo colour, used for tints, badges and fills
     *-deep  = a darkened sibling, used where white text or a button edge needs contrast
     *-text  = the darkest sibling, used for small coloured text on cream/white       */
  --bb-pink-soft:   #ef88a4;  /* logo pink      */
  --bb-pink:        #d9466e;  /* buttons — white text 4.2:1 */
  --bb-pink-deep:   #c03760;  /* button edge    */
  --bb-pink-text:   #c93b63;  /* small text on cream 4.7:1 */

  --bb-yellow:      #f9be51;  /* logo yellow — always pairs with ink text */
  --bb-yellow-deep: #f0a02f;

  --bb-mint:        #5ac1b3;  /* logo teal      */
  --bb-mint-deep:   #3da598;
  --bb-mint-ink:    #14544d;

  --bb-blue:        #59bae9;  /* logo sky blue  */
  --bb-blue-deep:   #2f96cc;

  --bb-purple:      #7670b1;  /* logo purple    */
  --bb-purple-soft: #9281b7;

  --bb-coral:       #f6a563;  /* logo orange    */
  --bb-coral-deep:  #e2792c;

  /* Neutrals */
  --bb-ink:         #2e2545;
  --bb-ink-soft:    #574a6b;
  --bb-muted:       #6f6180;
  --bb-cream:       #fff8f2;
  --bb-cream-2:     #fdeef1;
  --bb-white:       #ffffff;

  /* Shape */
  --bb-radius:      28px;
  --bb-radius-sm:   18px;
  --bb-radius-pill: 999px;

  /* Hard offset shadow — the "sticker" look */
  --bb-shadow:      0 10px 0 rgba(46, 37, 69, .12);
  --bb-shadow-lg:   0 18px 40px rgba(46, 37, 69, .18);
  --bb-shadow-card: 0 14px 30px rgba(46, 37, 69, .10);

  /* Bootstrap overrides */
  --bs-primary:     #d9466e;
  --bs-body-color:  #574a6b;
  --bs-body-bg:     #fff8f2;
  --bs-body-font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-border-radius: 18px;
}
/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
  background: var(--bb-cream);
  overflow-x: hidden;
  font-size: 1.0625rem;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, .display-font {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  color: var(--bb-ink);
  line-height: 1.06;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }

a { text-decoration: none; }

::selection { background: var(--bb-yellow); color: var(--bb-ink); }

/* height:auto is what makes the width/height attributes safe to keep.
   Those attributes map to CSS presentational hints, so without this an <img width="900"
   height="1125"> gets a definite height of 1125px — which also cancels any aspect-ratio
   the class sets, because aspect-ratio only applies when one axis is auto.
   The attributes are worth keeping: they reserve the right box before the image loads,
   which is what stops the layout shifting. More specific rules (.card-bb__media img,
   .gallery-grid img) still override this. */
img { max-width: 100%; height: auto; }

/* Utility text colors */
.text-pink   { color: var(--bb-pink-soft) !important; }
.text-mint   { color: var(--bb-mint) !important; }
.text-yellow { color: var(--bb-yellow) !important; }
.text-purple { color: var(--bb-purple) !important; }
.text-ink    { color: var(--bb-ink) !important; }
.text-muted-2{ color: var(--bb-muted) !important; }

.bg-cream    { background: var(--bb-cream) !important; }
.bg-cream-2  { background: var(--bb-cream-2) !important; }
.bg-pink     { background: var(--bb-pink) !important; }
.bg-mint     { background: var(--bb-mint) !important; }
.bg-yellow   { background: var(--bb-yellow) !important; }
.bg-purple   { background: var(--bb-purple) !important; }
.bg-ink      { background: var(--bb-ink) !important; }

.rounded-bb   { border-radius: var(--bb-radius) !important; }
.rounded-bb-sm{ border-radius: var(--bb-radius-sm) !important; }

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; position: relative; }
.section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }

/* Eyebrow label above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bb-pink-text);
  background: rgba(239, 136, 164, .14);
  padding: .45rem 1rem;
  border-radius: var(--bb-radius-pill);
  margin-bottom: 1rem;
}
.eyebrow.on-dark { color: var(--bb-yellow); background: rgba(249, 190, 81, .16); }

.lead-2 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--bb-muted);
  max-width: 58ch;
}

/* Highlighter stroke behind a word.
   Painted as a background image rather than a positioned pseudo-element so it
   always sits UNDER the glyphs, in any stacking context (hero, cards, headers). */
.squiggle {
  --squiggle-color: var(--bb-yellow);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .06em;
  background-image: linear-gradient(var(--squiggle-color), var(--squiggle-color));
  background-repeat: no-repeat;
  background-size: 100% .26em;
  background-position: 0 84%;
}
.squiggle--mint { --squiggle-color: var(--bb-mint); }
.squiggle--pink { --squiggle-color: rgba(239, 136, 164, .55); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn-bb {
  --btn-bg: var(--bb-pink);
  --btn-fg: #fff;
  --btn-edge: var(--bb-pink-deep);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  padding: .85rem 2rem;
  border: 0;
  border-radius: var(--bb-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 0 6px 0 var(--btn-edge);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  line-height: 1.3;
}
.btn-bb:hover, .btn-bb:focus-visible {
  color: var(--btn-fg);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--btn-edge);
}
.btn-bb:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--btn-edge); }

.btn-bb--yellow { --btn-bg: var(--bb-yellow); --btn-fg: var(--bb-ink); --btn-edge: var(--bb-yellow-deep); }
.btn-bb--mint   { --btn-bg: var(--bb-mint);   --btn-fg: #14544d;      --btn-edge: #3da598; }
.btn-bb--ink    { --btn-bg: var(--bb-ink);    --btn-fg: #fff;         --btn-edge: #1b1529; }
.btn-bb--white  { --btn-bg: #fff;             --btn-fg: var(--bb-ink);--btn-edge: rgba(46,37,69,.22); }

.btn-bb--ghost {
  background: transparent;
  color: var(--bb-ink);
  box-shadow: inset 0 0 0 3px rgba(46, 37, 69, .16);
}
.btn-bb--ghost:hover { color: var(--bb-ink); box-shadow: inset 0 0 0 3px var(--bb-ink); transform: translateY(-3px); }

.btn-bb--ghost-light {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}
.btn-bb--ghost-light:hover { color: var(--bb-ink); background: #fff; box-shadow: inset 0 0 0 3px #fff; transform: translateY(-3px); }

.btn-bb--lg { font-size: 1.2rem; padding: 1.05rem 2.5rem; }
.btn-bb--sm { font-size: .95rem; padding: .6rem 1.4rem; }

/* --------------------------------------------------------------------------
   4. Top bar + navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--bb-ink);
  color: rgba(255, 255, 255, .82);
  font-size: .875rem;
  font-weight: 600;
  padding: .55rem 0;
}
.topbar a { color: rgba(255, 255, 255, .82); transition: color .15s; }
.topbar a:hover { color: var(--bb-yellow); }
.topbar .sep { color: rgba(255, 255, 255, .28); }

.navbar-bb {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .7rem 0;
  transition: box-shadow .25s ease, padding .25s ease, background .25s ease;
  border-bottom: 1px solid rgba(46, 37, 69, .06);
}
.navbar-bb.is-stuck {
  box-shadow: 0 10px 30px rgba(46, 37, 69, .10);
  padding: .4rem 0;
  background: rgba(255, 255, 255, .97);
}

.navbar-bb .navbar-brand { display: flex; align-items: center; gap: .65rem; padding: 0; }

/* The logo is the real artwork extracted from the brand PDF.
   Two cuts exist: the plain one for light surfaces, and an identical cut with a
   white keyline (…-outline.svg) that keeps the pastel letters legible on dark. */
.brand-logo {
  display: block;
  width: auto;
  height: 54px;
  flex: 0 0 auto;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
.navbar-brand:hover .brand-logo { transform: scale(1.04) rotate(-1.5deg); }
.navbar-bb.is-stuck .brand-logo { height: 46px; }
.footer .brand-logo { height: 66px; }

@media (max-width: 575.98px) {
  .brand-logo { height: 42px; }
  .navbar-bb.is-stuck .brand-logo { height: 38px; }

  /* Below the first breakpoint the container is fluid with 12px of padding, while a
     .g-5 row pulls its margins out by 24px — so every wide-gutter row hung 12px past
     each edge and dragged the page into a horizontal scroll. Matching the padding to
     the widest gutter in use removes the overflow at source. */
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.navbar-bb .nav-link {
  font-weight: 800;
  color: var(--bb-ink);
  padding: .5rem 1rem !important;
  border-radius: var(--bb-radius-pill);
  position: relative;
  transition: color .15s, background .15s;
}
.navbar-bb .nav-link:hover { color: var(--bb-pink-text); background: rgba(239, 136, 164, .14); }
.navbar-bb .nav-link.active { color: var(--bb-pink-text); }
.navbar-bb .nav-link.active::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem; bottom: .18rem;
  height: 3px;
  border-radius: 3px;
  background: var(--bb-yellow);
}

/* On mobile the language switcher moves out of the collapsed menu and sits next to
   the burger, so changing language never costs an extra tap. */
.nav-lang-mobile { display: flex; align-items: center; margin-left: auto; margin-right: .25rem; }
.nav-lang-mobile .lang-toggle { padding: .4rem .6rem !important; font-size: .95rem; }
.nav-lang-mobile .dropdown-menu { min-width: 9rem; }

.navbar-toggler { border: 0; padding: .35rem .5rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { font-size: 1.9rem; color: var(--bb-ink); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--bb-ink);
  color: #fff;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(7rem, 12vw, 10rem);
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 38%;
  opacity: .34;
  transform: scale(1.06);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 10% 6%, rgba(217, 70, 110, .62), transparent 60%),
    radial-gradient(85% 75% at 82% 10%, rgba(118, 112, 177, .52), transparent 64%),
    radial-gradient(105% 95% at 92% 92%, rgba(89, 186, 233, .44), transparent 62%),
    linear-gradient(180deg, rgba(46, 37, 69, .68), rgba(46, 37, 69, .93));
  z-index: 1;
}
.hero > .container { position: relative; z-index: 3; }

.hero h1 { color: #fff; text-shadow: 0 6px 28px rgba(0, 0, 0, .35); }
.hero p.hero-sub {
  font-size: clamp(1.08rem, 1.9vw, 1.4rem);
  color: rgba(255, 255, 255, .90);
  font-weight: 600;
  max-width: 54ch;
}

.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  padding: .45rem 1rem;
  border-radius: var(--bb-radius-pill);
}
.hero-badge i { color: var(--bb-yellow); }

/* Rotated sticker */
.sticker {
  display: inline-block;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  background: var(--bb-yellow);
  color: var(--bb-ink);
  padding: .55rem 1.15rem;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transform: rotate(-5deg);
  line-height: 1.2;
}
.sticker--mint { background: var(--bb-mint); color: #14544d; }
.sticker--pink { background: var(--bb-pink); color: #fff; }

/* Floating hero photo cluster */
.hero-photo {
  border-radius: var(--bb-radius);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .40);
  border: 6px solid #fff;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  display: block;
}
.hero-photo--tilt   { transform: rotate(3deg); }
.hero-photo--tilt-2 { transform: rotate(-4deg); }

.float-slow { animation: bbFloat 7s ease-in-out infinite; }
.float-slow.delay { animation-delay: -3.5s; }
@keyframes bbFloat {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-16px) rotate(3deg); }
}

/* Angled bottom edge (Urban Air style diagonal divider) */
.edge-bottom::after {
  content: '';
  position: absolute;
  left: -5%; right: -5%; bottom: -1px;
  height: clamp(48px, 7vw, 110px);
  background: var(--bb-cream);
  clip-path: polygon(0 100%, 100% 0, 100% 101%, 0 101%);
  z-index: 2;
}
.edge-bottom--cream2::after { background: var(--bb-cream-2); }
.edge-bottom--white::after  { background: #fff; }

.edge-top::before {
  content: '';
  position: absolute;
  left: -5%; right: -5%; top: -1px;
  height: clamp(48px, 7vw, 110px);
  background: var(--bb-cream);
  clip-path: polygon(0 -1%, 100% -1%, 100% 0, 0 100%);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   6. Marquee strip
   -------------------------------------------------------------------------- */
/* The tilt needs the bar slightly wider than the viewport so no white corners show.
   That extra width counts toward the page's scrollable area, so it is clipped by a
   wrapper rather than left to body{overflow-x}, which mobile browsers do not always
   honour once transforms are involved. */
.marquee-wrap { overflow: hidden; }

.marquee {
  background: var(--bb-pink);
  color: #fff;
  padding: .85rem 0;
  overflow: hidden;
  position: relative;
  transform: rotate(-1.2deg) scale(1.03);
  box-shadow: 0 10px 30px rgba(239, 136, 164, .25);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: bbMarquee 32s linear infinite;
  will-change: transform;
}
.marquee__item {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  white-space: nowrap;
}
.marquee__item i { color: var(--bb-yellow); font-size: .8rem; }
@keyframes bbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .float-slow { animation: none; }
}

/* AOS starts fade-left/fade-right elements 100px off to the side and slides them in.
   On a narrow screen that parked position sticks out past the viewport, and because
   these sections are not clipped the page can be swiped sideways for as long as the
   animation lasts. Below the desktop breakpoint they animate vertically instead, which
   looks the same on a phone and never leaves the viewport. Specificity is doubled to
   beat AOS's own [data-aos][data-aos] rules. */
@media (max-width: 991.98px) {
  [data-aos="fade-left"][data-aos],
  [data-aos="fade-right"][data-aos],
  [data-aos="fade-up-left"][data-aos],
  [data-aos="fade-up-right"][data-aos],
  [data-aos="fade-down-left"][data-aos],
  [data-aos="fade-down-right"][data-aos] {
    transform: translate3d(0, 40px, 0);
  }
  [data-aos="fade-left"][data-aos].aos-animate,
  [data-aos="fade-right"][data-aos].aos-animate,
  [data-aos="fade-up-left"][data-aos].aos-animate,
  [data-aos="fade-up-right"][data-aos].aos-animate,
  [data-aos="fade-down-left"][data-aos].aos-animate,
  [data-aos="fade-down-right"][data-aos].aos-animate {
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   7. Feature / attraction cards
   -------------------------------------------------------------------------- */
.card-bb {
  background: #fff;
  border: 0;
  border-radius: var(--bb-radius);
  overflow: hidden;
  box-shadow: var(--bb-shadow-card);
  height: 100%;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease;
  position: relative;
}
.card-bb:hover { transform: translateY(-10px); box-shadow: 0 26px 50px rgba(46, 37, 69, .18); }

.card-bb__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.card-bb__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.card-bb:hover .card-bb__media img { transform: scale(1.08); }

.card-bb__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--bb-yellow);
  color: var(--bb-ink);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  padding: .3rem .85rem;
  border-radius: var(--bb-radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.card-bb__body { padding: 1.6rem 1.6rem 1.9rem; }
.card-bb__body h3 { margin-bottom: .5rem; }
.card-bb__body p { color: var(--bb-muted); margin-bottom: 0; font-size: .98rem; }

/* Icon-led feature tile */
.tile {
  background: #fff;
  border-radius: var(--bb-radius);
  padding: 2.1rem 1.7rem;
  height: 100%;
  box-shadow: var(--bb-shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
  border-top: 6px solid var(--bb-pink);
}
.tile:hover { transform: translateY(-8px); box-shadow: 0 24px 44px rgba(46, 37, 69, .16); }
.tile--mint   { border-top-color: var(--bb-mint); }
.tile--yellow { border-top-color: var(--bb-yellow); }
.tile--purple { border-top-color: var(--bb-purple); }
.tile--blue   { border-top-color: var(--bb-blue); }
.tile--coral  { border-top-color: var(--bb-coral); }

.tile__icon {
  width: 66px; height: 66px;
  border-radius: 20px;
  display: grid; place-items: center;
  font-size: 1.9rem;
  margin-bottom: 1.15rem;
  background: rgba(239, 136, 164, .12);
  color: var(--bb-pink);
}
.tile--mint   .tile__icon { background: rgba(90, 193, 179, .16);  color: #2b7f76; }
.tile--yellow .tile__icon { background: rgba(249, 190, 81, .20);  color: #9a6510; }
.tile--purple .tile__icon { background: rgba(118, 112, 177, .14);  color: var(--bb-purple); }
.tile--blue   .tile__icon { background: rgba(89, 186, 233, .14);  color: #2f96cc; }
.tile--coral  .tile__icon { background: rgba(246, 165, 99, .14);  color: #c9691f; }
.tile h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.tile p { color: var(--bb-muted); margin-bottom: 0; font-size: .98rem; }

/* --------------------------------------------------------------------------
   8. Stat band
   -------------------------------------------------------------------------- */
.stat { text-align: center; }
.stat__num {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--bb-yellow);
}
.stat__label {
  font-weight: 700;
  color: rgba(255, 255, 255, .78);
  font-size: .95rem;
  margin-top: .35rem;
}

/* --------------------------------------------------------------------------
   9. Pricing cards
   -------------------------------------------------------------------------- */
.price-card {
  background: #fff;
  border-radius: var(--bb-radius);
  padding: 2.2rem 1.9rem;
  height: 100%;
  box-shadow: var(--bb-shadow-card);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 3px solid transparent;
}
.price-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(46, 37, 69, .16); }

.price-card--featured {
  border-color: var(--bb-pink);
  box-shadow: 0 22px 46px rgba(239, 136, 164, .25);
}
.price-card__ribbon {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  background: var(--bb-pink);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem 1.2rem;
  border-radius: var(--bb-radius-pill);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(239, 136, 164, .35);
}
.price-card__name {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--bb-ink);
}
.price-card__desc { color: var(--bb-muted); font-size: .95rem; min-height: 3rem; }
.price-card__amount {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  color: var(--bb-pink);
  line-height: 1;
  margin: .4rem 0 .1rem;
}
.price-card__amount span { font-size: 1rem; color: var(--bb-muted); font-weight: 700; }
.price-card__list { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; }
.price-card__list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .42rem 0;
  font-size: .97rem;
  border-bottom: 1px dashed rgba(46, 37, 69, .10);
}
.price-card__list li:last-child { border-bottom: 0; }
.price-card__list i { color: var(--bb-mint); font-size: 1.1rem; flex: 0 0 auto; margin-top: .12rem; }
.price-card__list li.is-off { color: #a99fb8; }
.price-card__list li.is-off i { color: #d6d0de; }

/* --------------------------------------------------------------------------
   10. Split / showcase block
   -------------------------------------------------------------------------- */
.showcase-img {
  border-radius: var(--bb-radius);
  overflow: hidden;
  box-shadow: var(--bb-shadow-lg);
  aspect-ratio: 5 / 4;
  object-fit: cover;
  width: 100%;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .55rem 0;
  font-weight: 600;
}
.check-list i {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bb-mint);
  color: #fff;
  display: grid; place-items: center;
  font-size: .9rem;
  margin-top: .15rem;
}

/* --------------------------------------------------------------------------
   11. Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.gallery-grid figure {
  margin: 0;
  border-radius: var(--bb-radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: var(--bb-shadow-card);
}
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
.gallery-grid figure:hover img { transform: scale(1.07); }
.gallery-grid .g-tall { grid-row: span 2; }
.gallery-grid figure { aspect-ratio: 1 / 1; }
.gallery-grid .g-tall { aspect-ratio: 1 / 2.07; }
@media (max-width: 767.98px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .g-tall { grid-row: span 1; aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.quote-card {
  background: #fff;
  border-radius: var(--bb-radius);
  padding: 2rem 1.9rem;
  box-shadow: var(--bb-shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.quote-card__stars { color: var(--bb-yellow); font-size: 1.05rem; letter-spacing: .1em; margin-bottom: .85rem; }
.quote-card p { font-size: 1.02rem; color: var(--bb-ink-soft); flex: 1 1 auto; }
.quote-card__who { display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; }
.quote-card__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  color: #fff;
  background: var(--bb-purple);
  flex: 0 0 auto;
}
.quote-card__who strong { display: block; color: var(--bb-ink); line-height: 1.2; }
.quote-card__who small { color: var(--bb-muted); }

/* --------------------------------------------------------------------------
   13. FAQ accordion
   -------------------------------------------------------------------------- */
.accordion-bb .accordion-item {
  border: 0;
  background: #fff;
  border-radius: var(--bb-radius-sm) !important;
  margin-bottom: .9rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(46, 37, 69, .07);
}
.accordion-bb .accordion-button {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--bb-ink);
  background: #fff;
  padding: 1.15rem 1.4rem;
  box-shadow: none;
}
.accordion-bb .accordion-button:not(.collapsed) { color: var(--bb-pink-text); background: #fff; }
.accordion-bb .accordion-button:focus { box-shadow: none; }
.accordion-bb .accordion-button::after {
  background-image: none;
  content: '\F64D'; /* bootstrap-icons plus-lg */
  font-family: 'bootstrap-icons';
  font-size: 1rem;
  width: auto; height: auto;
  color: var(--bb-pink-text);
  transition: transform .25s ease;
}
.accordion-bb .accordion-button:not(.collapsed)::after { transform: rotate(135deg); }
.accordion-bb .accordion-body { padding: 0 1.4rem 1.4rem; color: var(--bb-muted); }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--bb-purple), var(--bb-pink) 62%, var(--bb-coral));
  color: #fff;
  overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .92); }
.cta-band__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .28) 2px, transparent 2px);
  background-size: 26px 26px;
  opacity: .5;
}

/* --------------------------------------------------------------------------
   15. Contact / info cards
   -------------------------------------------------------------------------- */
.info-card {
  background: #fff;
  border-radius: var(--bb-radius);
  padding: 1.9rem 1.7rem;
  height: 100%;
  box-shadow: var(--bb-shadow-card);
  transition: transform .25s ease;
}
.info-card:hover { transform: translateY(-6px); }
.info-card__icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  background: rgba(239, 136, 164, .12);
  color: var(--bb-pink);
  margin-bottom: 1rem;
}
.info-card h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.info-card a { color: var(--bb-pink-text); font-weight: 700; }
.info-card a:hover { text-decoration: underline; }

.hours-table { width: 100%; }
.hours-table tr { border-bottom: 1px dashed rgba(46, 37, 69, .12); }
.hours-table tr:last-child { border-bottom: 0; }
.hours-table td { padding: .72rem 0; font-weight: 700; color: var(--bb-ink); }
.hours-table td:last-child { text-align: right; color: var(--bb-pink-text); font-variant-numeric: tabular-nums; }
.hours-table tr.is-today { background: rgba(249, 190, 81, .16); }
.hours-table tr.is-today td:first-child { padding-left: .6rem; border-radius: 10px 0 0 10px; }
.hours-table tr.is-today td:last-child { padding-right: .6rem; border-radius: 0 10px 10px 0; }

.map-embed {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-card);
  display: block;
  filter: saturate(1.05);
}

/* Open / closed pill driven by js/main.js */
.open-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: .85rem;
  padding: .3rem .85rem;
  border-radius: var(--bb-radius-pill);
  background: rgba(90, 193, 179, .16);
  color: #14544d;
}
.open-pill.is-closed { background: rgba(246, 165, 99, .16); color: #b4531c; }
.open-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: bbPulse 2s infinite;
}
@keyframes bbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(20, 84, 77, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(20, 84, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 84, 77, 0); }
}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form-bb .form-control,
.form-bb .form-select {
  border: 2px solid rgba(46, 37, 69, .12);
  border-radius: 16px;
  padding: .85rem 1.1rem;
  font-weight: 600;
  background: #fff;
}
.form-bb .form-control:focus,
.form-bb .form-select:focus {
  border-color: var(--bb-pink);
  box-shadow: 0 0 0 4px rgba(239, 136, 164, .14);
}
.form-bb .form-label { font-weight: 800; color: var(--bb-ink); margin-bottom: .4rem; font-size: .95rem; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bb-ink);
  color: rgba(255, 255, 255, .68);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  position: relative;
}
.footer h4 {
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
}
.footer a { color: rgba(255, 255, 255, .68); transition: color .15s, transform .15s; }
.footer a:hover { color: var(--bb-yellow); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { padding: .3rem 0; }
/* Day on the left, time on the right. The time must never wrap — "10:00–20:30"
   split over two lines was the single ugliest thing on the phone layout. */
.footer-hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 24ch;
}
.footer-hours li strong { white-space: nowrap; }
@media (max-width: 575.98px) {
  .footer-hours li { max-width: 20rem; }
}

/* Same guarantee for the table on the contact page, where Russian weekday names
   are long enough to squeeze the time column. */
.hours-table td:last-child { white-space: nowrap; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  margin-top: 3rem;
  padding: 1.5rem 0;
  font-size: .875rem;
}
.social-btn {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #fff !important;
  font-size: 1.2rem;
  transition: background .2s ease, transform .2s ease;
}
.social-btn:hover { background: var(--bb-pink); transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   18. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  background: var(--bb-ink);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(5rem, 9vw, 7rem);
  overflow: hidden;
  text-align: center;
}
.page-head::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(95% 95% at 18% 0%, rgba(217, 70, 110, .58), transparent 62%),
    radial-gradient(85% 90% at 88% 100%, rgba(89, 186, 233, .42), transparent 62%),
    radial-gradient(70% 80% at 62% 8%, rgba(118, 112, 177, .38), transparent 66%);
}
.page-head > .container { position: relative; z-index: 3; }
.page-head h1 { color: #fff; }
.page-head p { color: rgba(255, 255, 255, .88); font-size: 1.1rem; max-width: 60ch; margin-inline: auto; }
.breadcrumb-bb { justify-content: center; font-weight: 700; font-size: .9rem; }
.breadcrumb-bb a { color: var(--bb-yellow); }
.breadcrumb-bb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .45); }
.breadcrumb-bb .breadcrumb-item.active { color: rgba(255, 255, 255, .75); }

/* --------------------------------------------------------------------------
   19. Misc
   -------------------------------------------------------------------------- */
.step-num {
  width: 54px; height: 54px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  background: var(--bb-pink);
  flex: 0 0 auto;
  box-shadow: 0 8px 20px rgba(239, 136, 164, .30);
}
.step-num--2 { background: var(--bb-purple); box-shadow: 0 8px 20px rgba(118, 112, 177, .30); }
.step-num--3 { background: var(--bb-mint);   box-shadow: 0 8px 20px rgba(90, 193, 179, .30); }
.step-num--4 { background: var(--bb-yellow); color: var(--bb-ink); box-shadow: 0 8px 20px rgba(249, 190, 81, .35); }

.back-to-top {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 0;
  background: var(--bb-ink);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.2rem;
  box-shadow: 0 10px 26px rgba(46, 37, 69, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
  z-index: 1030;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--bb-pink); }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, .btn-bb:focus-visible {
  outline: 3px solid var(--bb-purple);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .navbar-bb .navbar-collapse {
    background: #fff;
    border-radius: var(--bb-radius);
    padding: 1rem;
    margin-top: .8rem;
    box-shadow: var(--bb-shadow-lg);
  }
  .navbar-bb .nav-link.active::after { display: none; }
  .hero-photo--tilt, .hero-photo--tilt-2 { transform: none; }
}

/* --------------------------------------------------------------------------
   20. Additions for the ASP.NET Core build
   -------------------------------------------------------------------------- */

/* Keyboard users get a visible jump-to-content link before the navigation. */
.skip-link {
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 1080;
  background: var(--bb-ink);
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: var(--bb-radius-pill);
  font-weight: 800;
}

/* Honeypot: invisible to people, still in the DOM for bots to find. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-panel { box-shadow: var(--bb-shadow-card); }

/* Server-side validation messages rendered by asp-validation-for. */
.invalid-note,
.field-validation-error {
  display: block;
  color: var(--bb-pink-text);
  font-size: .85rem;
  font-weight: 700;
  margin-top: .3rem;
}
.input-validation-error {
  border-color: var(--bb-pink) !important;
  box-shadow: 0 0 0 4px rgba(217, 70, 110, .12) !important;
}
.validation-summary-valid { display: none; }

/* Language switcher sits in the navbar but is a button, not a link. */
.lang-toggle {
  background: none;
  border: 0;
  font-weight: 800;
  color: var(--bb-ink);
  padding: .5rem 1rem !important;
  border-radius: var(--bb-radius-pill);
}
.lang-toggle:hover { color: var(--bb-pink-text); background: rgba(239, 136, 164, .14); }
.navbar-bb .dropdown-menu {
  border: 0;
  border-radius: var(--bb-radius-sm);
  box-shadow: var(--bb-shadow-lg);
  padding: .4rem;
}
.navbar-bb .dropdown-item { border-radius: 10px; font-weight: 700; padding: .5rem .9rem; }
.navbar-bb .dropdown-item.active { background: var(--bb-pink); color: #fff; }

/* Testimonial avatar colours, driven by the record's accent value. */
.avatar--pink   { background: var(--bb-pink); color: #fff; }
.avatar--mint   { background: var(--bb-mint); color: var(--bb-mint-ink); }
.avatar--yellow { background: var(--bb-yellow); color: var(--bb-ink); }
.avatar--purple { background: var(--bb-purple); color: #fff; }
.avatar--blue   { background: var(--bb-blue); color: #fff; }
.avatar--coral  { background: var(--bb-coral); color: var(--bb-ink); }

.info-card__icon--purple { background: rgba(118, 112, 177, .16); color: var(--bb-purple); }
.info-card__icon--mint   { background: rgba(90, 193, 179, .18); color: #2b7f76; }

/* blockquote/figure reset inside quote cards */
.quote-card blockquote { margin: 0; }
.quote-card figcaption { display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; }

/* <picture> only exists to offer the WebP source; it must never affect layout, or the
   img inside it sizes against an inline box instead of the real container. */
picture { display: contents; }