/* ─── DESIGN DECISIONS ─────────────────────────
   Business type : Frizerski salon
   Color palette : Deep charcoal (#1a1a1a) base + deep forest-emerald (#2F5D3D) primary
                   Emerald evokes heritage, precision, quiet confidence — classic barbershop credibility.
                   Accent cream (#F5EDD6) for light backgrounds.
   Primary font  : "Inter" — 300, 400, 600 weights — clean, modern readability
   Display font  : "Playfair Display" — 700, 900 — editorial serif for section titles
   Hero mood     : Dark + warm overlay — moody barbershop atmosphere, editorial feel
   Aesthetic ref : "Premium barbershop, editorial dark, emerald accents, timeless luxury"
   Cursor shape  : Open scissors — two blades crossing at center
   Pattern symbol: Scissors silhouette — recognizable barbershop icon
─────────────────────────────────────────────── */

/* ─── CSS CUSTOM PROPERTIES ─────────────────── */
:root {
  --color-primary:        #2F5D3D;
  --color-primary-rgb:    47, 93, 61;
  --color-primary-dark:   #1E3F28;
  --color-primary-light:  #81BB92;
  --color-primary-glow:   #A9D1B5;
  --color-bg-dark:        #111111;
  --color-bg-card:        #1C1C1C;
  --color-bg-section:     #181818;
  --color-surface:        #242424;
  --color-nav:            #0E0E0E;
  --color-text-white:     #FFFFFF;
  --color-text-light:     #D4C5A0;
  --color-text-muted:     #888888;
  --color-cream:          #F5EDD6;
  --color-cream-tint:     rgba(17, 17, 17, 0.04);
  --color-overlay:        rgba(14, 10, 4, 0.72);
  --color-hero-overlay:   rgba(10, 8, 4, 0.62);
  --color-brass:          #B8915C;
  --color-brass-rgb:      184, 145, 92;
  --color-brass-light:    #D4AF7A;
  --color-surface-warm:   #16201C;

  /* Hero photo palette — sampled directly from images/hero.jpg, not picked by eye */
  --hero-img-base:        #090A0E;  /* 42.5% — dominant near-black */
  --hero-img-warm:        #6D6355;  /* muted brass-brown (skin / wood) */
  --hero-img-warm-rgb:    109, 99, 85;
  --hero-img-warm2-rgb:   74, 53, 48;   /* deep warm brown */
  --hero-img-taupe-rgb:   86, 83, 77;   /* neutral taupe */
  --hero-img-cool-rgb:    25, 28, 36;   /* cool dark blue-grey shadow */

  --font-body:    'Inter', sans-serif;
  --font-display: 'Playfair Display', serif;

  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-pill:  999px;

  --shadow-sm:    0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.4);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.55);
  --shadow-gold:  0 4px 20px rgba(17, 17, 17, 0.3);
  --shadow-gold-deep: 0 8px 40px rgba(17, 17, 17, 0.45);

  --nav-height:   72px;
  --transition:   0.35s ease;
}

/* ─── RESET & BASE ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: auto;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-dark);
  color: var(--color-text-white);
  line-height: 1.6;
  cursor: auto;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { border: none; cursor: pointer; font-family: inherit; }

/* ─── NAVIGATION ────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}

#nav.scrolled {
  background-color: var(--color-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-text-white);
  cursor: pointer;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.nav-logo-text {
  transition: text-shadow 0.3s ease;
}

/* Intentional hover sheen instead of an endless pulse */
.nav-logo:hover .nav-logo-img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
}

.nav-logo:hover .nav-logo-text {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo-img, .nav-logo-text { transition: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;   /* push the link cluster to the right of the logo */
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-white);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1.5px;
  background-color: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.nav-links a[href="#zakazi"] {
  background-color: var(--color-brass);
  color: var(--color-bg-dark);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.nav-links a[href="#zakazi"]::after { display: none; }

.nav-links a[href="#zakazi"]:hover {
  background-color: var(--color-brass-light);
}

#nav.scrolled .nav-links a[href="#zakazi"] {
  color: var(--color-bg-dark);
}

.nav-links a:hover::after { transform: scaleX(1); }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 6px;
  z-index: 1100;
}

.nav-hamburger span {
  display: block;
  width: 24px; height: 2px;
  background-color: var(--color-text-white);
  transition: var(--transition);
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: 0; right: -100%;
  width: min(320px, 85vw);
  height: 100vh;   /* fallback for old WebKit without dvh */
  height: 100dvh;
  overscroll-behavior: contain;
  background-color: var(--color-nav);
  border-left: 1px solid rgba(var(--color-primary-rgb), 0.3);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 40px;
  gap: 32px;
  transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.nav-drawer.open { right: 0; }

/* Body scroll stays locked while the drawer is open (class set in main.js). */
body.drawer-open { overflow: hidden; }

.nav-drawer a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
  transition: color var(--transition);
}

.nav-drawer a:hover { color: var(--color-primary-light); }
.nav-drawer a:active { transform: translateY(1px) scale(0.98); }
.nav-drawer a:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: none; }
  .nav-drawer a:active { transform: none; }
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav-overlay.open { opacity: 1; pointer-events: all; }

/* ─── HERO ──────────────────────────────────── */
#pocetna {
  --sy: 0px;
  min-height: 100vh;
  padding-top: var(--nav-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 7%;
  padding-right: 7%;
  background-color: var(--color-bg-dark);
  background-image:
    linear-gradient(to top, var(--color-bg-dark) 0%, transparent 42px),
    radial-gradient(circle at 88% 14%, rgba(var(--color-brass-rgb), 0.22), transparent 50%);
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  overflow: hidden;
}

#pocetna::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  filter: saturate(1.18) contrast(1.1);
  /* var(--sy) (scroll parallax, set by JS) is read live inside the keyframes
     below, so the slow Ken-Burns zoom and the scroll parallax both apply at
     once without fighting over the transform property. */
  transform: translate3d(0, var(--sy), 0) scale(1.12);
  animation: heroZoom 24s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0;
}

@keyframes heroZoom {
  0%   { transform: translate3d(0, var(--sy), 0) scale(1.12); }
  100% { transform: translate3d(0, var(--sy), 0) scale(1.22); }
}

#pocetna::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 8, 0.66) 0%,
    rgba(8, 8, 8, 0.66) calc(100% - 90px),
    var(--color-bg-dark) 100%
  );
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  #pocetna::before { transform: scale(1.12); animation: none; }
}

@media (max-width: 768px) {
  #pocetna {
    padding-top: calc(var(--nav-height) + 24px);
    padding-bottom: 48px;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
}

/* ─── O MENI PHOTO COLLAGE — GLASS FRAME, LIGHT-AURORA MAT ── */
/* Sharp black outline + glassy diagonal sheen, like the earlier glass-pane
   frame, with the light-aurora gradient now running through the mat itself. */
.hero-photo-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  max-width: 660px;
  margin: 0 auto;
  padding: 8px;             /* gutter between photos only — no frame, no shadow */
  border-radius: 18px;
}

@keyframes auroraBorderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-wrap { animation: none; }
  .hero-photo-wrap::before { animation: none; }
}

/* Brass halo behind the collage — a slow breathing glow that feels alive */
.hero-photo-wrap::before {
  content: '';
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 22px;
  background: radial-gradient(closest-side, rgba(var(--color-brass-rgb), 0.72), transparent);
  filter: blur(44px);
  opacity: 0.35;
  animation: framePulse 5.5s ease-in-out infinite;
}

@keyframes framePulse {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.45; }
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.06) saturate(1.08);
  transition: transform 0.6s ease;
}

.hero-photo-frame:hover .hero-photo {
  transform: scale(1.06);
}

.hero-photo-frame {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 14px;
  will-change: transform;
  box-shadow:
    0 0 16px rgba(214, 64, 69, 0.65),
    0 0 34px rgba(214, 64, 69, 0.35);
}

.hero-photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0) 38%,
    rgba(0, 0, 0, 0.18) 100%);
}

.hero-frame-main   { grid-column: 1; grid-row: 1 / 3; }
.hero-frame-top    { grid-column: 2; grid-row: 1; }
.hero-frame-bottom { grid-column: 2; grid-row: 2; }

@media (max-width: 768px) {
  /* Keep the SAME collage layout as desktop (one tall photo on the left,
     two stacked on the right) — just scaled down. The mobile-only stacked
     column version used to push every photo to its own full-width box,
     which let them spill past the card's rounded edge. The grid needs an
     explicit aspect-ratio here since, on mobile, .o-nama-layout collapses to
     a single column so there's no sibling column height to stretch against. */
  /* deliberately narrower than the card's available inner width (~300-320px
     after .o-nama-frame's own padding) so there's visible aurora background
     showing on every side — the collage should never butt up against the
     card's black border ring. */
  .hero-photo-wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 4 / 4.4;
    height: auto;
    align-self: auto;
    gap: 10px;
    padding: 14px;
    max-width: 280px;
    margin: 0 auto 28px;
    overflow: hidden;
  }

  .hero-frame-main,
  .hero-frame-top,
  .hero-frame-bottom {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    align-self: stretch;
    margin: 0;
    transform: none;
  }
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(
    to bottom,
    var(--color-brass-light) 0%,
    var(--color-brass) 35%,
    #8A6B3F 70%,
    var(--color-brass) 100%
  );
  color: var(--color-bg-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.3);
  transition: box-shadow var(--transition), transform 0.3s ease;
  cursor: pointer;
}

.btn-primary:hover {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.32),
    0 0 0 3px rgba(var(--color-brass-rgb), 0.18);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ─── HERO CTA — WHITE TEXT, INTENTIONAL HOVER ─────────────── */
.hero-content .btn-primary {
  background-color: var(--color-brass);
  color: var(--color-text-white);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), 0 0 18px rgba(var(--color-brass-rgb), 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-content .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.18),
    0 0 30px rgba(255, 255, 255, 0.45);
}

.hero-content .btn-primary:active { transform: translateY(0); }

.hero-content .btn-primary:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content .btn-primary { transition: none; }
  .hero-content .btn-primary:hover { transform: none; }
}

/* ─── HERO WHITE BG — TEXT OVERRIDES ──────────── */
.hero-label {
  color: var(--color-brass);
  margin-bottom: 16px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-text-white);
  margin-bottom: 28px;
}

/* Barber-tape colours (red / white / blue) flowing through the hero text */
.hero-title span {
  background: linear-gradient(100deg,
    #C41E3A 0%,
    #F7F7F7 25%,
    #1B3A8F 50%,
    #F7F7F7 75%,
    #C41E3A 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: heroSheen 9s ease-in-out infinite;
}

@keyframes heroSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-tagline {
  font-size: 1.05rem;
  font-weight: 300;
  margin-bottom: 44px;
  letter-spacing: 0.04em;
  background: linear-gradient(100deg,
    #C41E3A 0%,
    #F7F7F7 25%,
    #1B3A8F 50%,
    #F7F7F7 75%,
    #C41E3A 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: heroSheen 11s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-title span,
  .hero-tagline {
    animation: none;
    background: none;
    color: var(--color-text-white);
    -webkit-text-fill-color: var(--color-text-white);
  }
}


/* ─── SECTION SHARED ────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 18px;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
}

.section-title.light { color: var(--color-text-white); }
.section-title.dark  { color: var(--color-bg-dark); }

/* ─── BARBER-POLE TRANSITION DIVIDER ────────────
   The barber pole IS the divider: red/white/blue diagonal stripes that scroll
   straight down, so the pole appears to spin downward in place (the bar itself
   never moves). Its top and bottom edges fade out and it overlaps the neighbouring
   sections, so the pole dips smoothly into each page — no hard border. A black ink
   line still separates each stripe for the cartoon-decal look. Only the stripe
   scroll animates, so it stays cheap. */
.seam-tape {
  position: relative;
  width: 100%;
  height: 30px;
  margin: -10px 0;            /* overlap neighbours so the faded ends melt into them */
  z-index: 950;
  pointer-events: none;
  overflow: hidden;
  /* soft fade at top & bottom — the pole dips smoothly into the pages, no hard border */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 32%, #000 68%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, #000 32%, #000 68%, transparent 100%);
}

/* the stripes — fine barber stripes that scroll straight down.
   The tile is locked to exactly one stripe period in both directions
   (28.2843px = 20px ÷ cos45°), and the animation travels exactly that distance,
   so the pattern lines up perfectly every loop — it scrolls forever with no jump. */
.seam-tape::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg,
    #E0303F 0, #E0303F 9px,             /* barber red   */
    #14161C 9px, #14161C 10px,          /* ink outline  */
    #FBFBF6 10px, #FBFBF6 19px,         /* paper white  */
    #14161C 19px, #14161C 20px,         /* ink outline  */
    #234E9E 20px, #234E9E 29px,         /* barber blue  */
    #14161C 29px, #14161C 30px,         /* ink outline  */
    #FBFBF6 30px, #FBFBF6 39px,         /* paper white  */
    #14161C 39px, #14161C 40px);        /* ink outline  */
  background-size: 56.5685px 56.5685px;
  animation: barberPole 4s linear infinite;
}

/* glassy cylinder sheen — a soft body highlight plus a crisp specular streak, so
   the thin band reads as a round, polished pole */
.seam-tape::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      transparent 38%, rgba(255, 255, 255, 0.55) 45%, transparent 52%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0) 36%,
      rgba(255, 255, 255, 0.26) 52%,
      rgba(0, 0, 0, 0) 64%,
      rgba(0, 0, 0, 0.28) 100%);
}

@keyframes barberPole {
  to { background-position: 0 56.5685px; }   /* exactly one tile down → seamless, never resets */
}

@media (prefers-reduced-motion: reduce) {
  .seam-tape::after { animation: none; }
}

/* ─── PAGE VIGNETTE ─────────────────────────────
   A fixed rectangular ("square") vignette: every page is framed with darkened
   edges + corners, so sections blend into the dark at their seams and the bright
   barber tape (which sits above this layer) shines against it. Below the nav. */
.page-vignette {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  box-shadow: inset 0 0 130px 22px rgba(0, 0, 0, 0.5);
  background:
    radial-gradient(120px 120px at top left,     rgba(0, 0, 0, 0.46), transparent),
    radial-gradient(120px 120px at top right,    rgba(0, 0, 0, 0.46), transparent),
    radial-gradient(150px 150px at bottom left,  rgba(0, 0, 0, 0.46), transparent),
    radial-gradient(150px 150px at bottom right, rgba(0, 0, 0, 0.46), transparent);
}

/* ─── O NAMA ────────────────────────────────── */
/* Living background — same dark charcoal/brass palette as the hero, drifting
   slowly like the aurora technique but with no radial "symbol" blobs. */
#o-nama {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 5%;
  overflow-x: clip;   /* contains the slide-in reveal; keeps vertical content visible */
  background-image: linear-gradient(135deg,
    #100D0A 0%, #2B3322 26%, #120F0C 50%, #3A3019 76%, #100D0A 100%);
  background-size: 300% 300%;
  animation: oNamaLiveBg 22s ease-in-out infinite;
}

@keyframes oNamaLiveBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #o-nama { animation: none; }
}

#o-nama > * { position: relative; z-index: 1; }

.o-nama-heading {
  text-align: left;
  color: var(--color-brass-light);
  font-family: 'Yeseva One', var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 28px;
  text-shadow:
    0 0 16px rgba(184, 145, 92, 0.55),
    0 0 32px rgba(184, 145, 92, 0.3);
}

/* Why the border kept disappearing: pseudo-elements with a NEGATIVE z-index
   still paint AFTER their host's own background (stacking order paints the
   host's background first, then negative-z children on top of it) — so a
   "bigger layer behind a smaller opaque one" never actually peeked through;
   it either got fully covered or fully covered the host, depending on which
   pseudo painted last. Fix: the host itself now paints NOTHING (no
   background of its own) — the fill lives entirely on ::after, and the
   ring/glow lives entirely on ::before, with z-index ordering
   (::before -2, ::after -1) guaranteeing ::after paints on top of ::before
   and both paint before the real text/photo content. */
.o-nama-frame {
  position: relative;
  max-width: 1273px;
  margin: 0 auto;
  padding: 40px 40px;
}

/* colored ring + glow — a solid, fully-filled copy of the exact same polygon,
   7px bigger on every side than the card fill (::after). Because ::after
   is opaque and smaller, it covers this layer's center entirely, leaving
   only a 7px sliver exposed — and that sliver traces every diagonal edge
   correctly since it's a fill difference between two identical polygons,
   not a border stroke clipped after the fact. drop-shadow() (not box-shadow)
   is used for the glow because it follows the clipped polygon's alpha shape
   instead of the element's rectangular box. */
.o-nama-frame::before {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -2;
  clip-path: polygon(2% 0%, 99% 3%, 97% 99%, 0% 95%);
  /* warm brass edge that frames the smoky-glass card */
  background: linear-gradient(135deg, var(--color-brass), var(--color-brass-light));
  pointer-events: none;
}

/* white glow line — a real element (not a 3rd pseudo-class, since only
   ::before/::after exist), sitting OUTSIDE/behind the colored ring (bigger
   inset, more negative z-index) so it's the outermost layer, opening onto
   the section's dark background and glowing into it. A cool electric-white
   tint (not flat #FFF) plus a wide drop-shadow stack reads as neon rather
   than a plain line, and a slow flicker animation keeps it alive. */
.o-nama-frame-glow {
  position: absolute;
  inset: -15px;
  z-index: -3;
  clip-path: polygon(2% 0%, 99% 3%, 97% 99%, 0% 95%);
  background: var(--color-brass-light);
  animation: oNamaGlowFlicker 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes oNamaGlowFlicker {
  0%, 100% {
    transform: translate(0, 0);
    filter:
      drop-shadow(0 0 4px #D4AF7A)
      drop-shadow(0 0 16px #D4AF7A)
      drop-shadow(0 0 32px rgba(212, 175, 122, 0.85))
      drop-shadow(0 0 56px rgba(184, 145, 92, 0.5));
  }
  25% {
    transform: translate(0.6px, -0.5px);
    filter:
      drop-shadow(0 0 5px #D4AF7A)
      drop-shadow(0 0 20px #D4AF7A)
      drop-shadow(0 0 40px rgba(212, 175, 122, 0.95))
      drop-shadow(0 0 66px rgba(184, 145, 92, 0.6));
  }
  50% {
    transform: translate(-0.5px, 0.5px);
    filter:
      drop-shadow(0 0 3px #D4AF7A)
      drop-shadow(0 0 12px #D4AF7A)
      drop-shadow(0 0 24px rgba(212, 175, 122, 0.7))
      drop-shadow(0 0 46px rgba(184, 145, 92, 0.4));
  }
  75% {
    transform: translate(0.4px, 0.4px);
    filter:
      drop-shadow(0 0 5px #D4AF7A)
      drop-shadow(0 0 18px #D4AF7A)
      drop-shadow(0 0 38px rgba(212, 175, 122, 0.9))
      drop-shadow(0 0 62px rgba(184, 145, 92, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .o-nama-frame-glow {
    animation: none;
    filter: drop-shadow(0 0 4px #D4AF7A) drop-shadow(0 0 18px #D4AF7A) drop-shadow(0 0 36px rgba(184, 145, 92, 0.75));
  }
}

/* the opaque card fill — sits exactly on the card's own footprint, on top of
   the glow layers above, so only their overhang shows as a border. */
.o-nama-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(2% 0%, 99% 3%, 97% 99%, 0% 95%);
  /* Smoky charcoal glass: a dark charcoal base with a single warm brass sheen
     sweeping across the middle (animated by auroraBorderFlow). Keeps the card
     a standout "glass shard" without flipping the page to a light section. */
  background: linear-gradient(135deg,
    #1B1B1B 0%, #242424 26%, rgba(184, 145, 92, 0.24) 50%, #222222 74%, #1A1A1A 100%);
  background-size: 300% 300%;
  animation: auroraBorderFlow 18s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -18px 40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

@media (max-width: 768px) {
  .o-nama-frame { padding: 28px 20px; }
}

.o-nama-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .o-nama-layout { grid-template-columns: 1fr; gap: 10px; }
}

/* Text sits directly on the dark section — no card, full use of its column. */
.o-nama-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
}

/* The card fill (.o-nama-frame::after) animates a brass sheen across charcoal
   on an 18s ease-in-out loop. This runs the body text on the SAME 18s loop but
   phased inversely: lightest cream at 0%/100% (when the darkest charcoal is
   behind the text) and a deeper cream at 50% (when the bright brass sheen is
   behind it). Because both animations share duration/easing and start at load,
   they stay locked, so the text brightness tracks the background underneath. */
@keyframes oNamaTextShade {
  0%, 100% { color: #EFE6CE; }
  50%      { color: #C2B492; }
}

.o-nama-intro {
  font-family: var(--font-body);
  font-size: 1.0rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-top: 12px;
  margin-bottom: 14px;
  line-height: 1.76;
  animation: oNamaTextShade 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .o-nama-intro { animation: none; color: var(--color-text-light); }
}

/* Editorial lead — first line carries the voice */
.o-nama-lead {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-white);
  line-height: 1.6;
  letter-spacing: 0.004em;
}

.o-nama-text .o-nama-intro:last-child {
  margin-bottom: 0;
}

/* Specialty chips: encode the fade/taper/curly specialties named in the lead.
   All five share one warm brass gradient (matching .btn-primary) so they read
   as one on-brand set. Kept to a single compact row so the panel height holds. */
.o-nama-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 14px;
}

.o-chip {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(120deg, var(--color-brass), var(--color-brass-light));
  background-size: 220% 220%;
  color: var(--color-bg-dark);
  animation: oChipLiveFlow 6.5s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@keyframes oChipLiveFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .o-chip { animation: none; }
}

.o-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ─── TEAM + USLUGE SHARED BACKGROUND ──────── */
.team-usluge-bg-wrap {
  position: relative;
  background-color: var(--color-bg-dark);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* ─── ZAKAZI (BOOKING WIZARD) ───────────────── */
#zakazi {
  position: relative;
  z-index: 2;
  padding: 80px 5% 120px;
}

.zakazi-header {
  text-align: center;
  margin-bottom: 48px;
  padding-top: 16px;
}

.zakazi-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text-white);
}

.zakazi-subtitle {
  max-width: 520px;
  margin: 12px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.zakazi-benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 22px;
}

.zakazi-benefit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
}

.zakazi-benefit svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary-light);
  flex-shrink: 0;
}

.zakazi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.zakazi-booking {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .zakazi-split { grid-template-columns: 1fr; gap: 24px; }
  /* NOTE: the .zakazi-aside mobile override lives in a second media block
     placed AFTER the base .zakazi-aside rule (further down this file), because
     that base rule is later in source order and would otherwise win — media
     queries do not add specificity. See that block for padding-top/gap. */
}

/* Step indicator */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 4px;
}

.step-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.25);
  background: rgba(255,255,255,0.04);
  transition: all 0.3s ease;
}

.step-pill.active {
  background: rgba(var(--color-primary-rgb), 0.15);
  border-color: var(--color-primary);
}

.step-pill.completed {
  border-color: rgba(var(--color-primary-rgb), 0.45);
  background: rgba(var(--color-primary-rgb), 0.08);
}

.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.15);
  color: rgba(255,255,255,0.4);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.step-pill.active .step-num {
  background: var(--color-brass);
  color: var(--color-bg-dark);
}

.step-pill.completed .step-num {
  background: rgba(var(--color-brass-rgb), 0.3);
  color: var(--color-brass);
}

.step-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.step-pill.active .step-label   { color: var(--color-text-white); }
.step-pill.completed .step-label { color: var(--color-primary-light); }

.step-connector {
  width: 32px; height: 1px;
  background: rgba(var(--color-primary-rgb), 0.2);
  flex-shrink: 0;
}

/* Wizard container */
.wizard-container {
  position: relative;
  background: var(--color-surface);
  border: 1.5px solid rgba(var(--color-brass-rgb), 0.4);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  min-height: 380px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Barber-tape accent across the top edge — ties the booking card to the
   red/white/blue divider motif running between the sections. */
.wizard-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%, #E0303F 16%, #FBFBF6 36%,
    #234E9E 58%, #E0303F 82%, transparent 100%);
  opacity: 0.85;
}

/* Empty / sparse booking state — still reads as designed */
#no-slots-msg {
  border: 1px solid rgba(var(--color-brass-rgb), 0.22);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 24px;
}

.wizard-step { display: none; animation: stepIn 0.4s ease; }
.wizard-step.active { display: block; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text-white);
  margin-bottom: 28px;
  font-weight: 700;
}

/* Step 2: service list */
.service-list-wizard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.service-row-wizard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.14);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.service-row-wizard:hover {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  background: rgba(var(--color-primary-rgb), 0.06);
}

.service-row-wizard.selected {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
}

.srw-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.service-row-wizard.selected .srw-check {
  background: var(--color-brass);
  border-color: var(--color-brass);
  color: var(--color-bg-dark);
}

.srw-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.srw-price {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-light);
  white-space: nowrap;
}

/* Duration hint next to the price; values mirror SALON_CONFIG durations. */
.srw-duration {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-light);
  white-space: nowrap;
  opacity: 0.55;
}

/* Step 3: time grid */
.step3-context {
  background: rgba(var(--color-primary-rgb), 0.07);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 24px;
  line-height: 1.5;
}

.step3-context strong { color: var(--color-primary-light); }

.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  margin-bottom: 28px;
}

.time-slot {
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.22);
  background: rgba(255,255,255,0.04);
  color: var(--color-text-white);
  transition: all 0.25s ease;
  font-family: var(--font-body);
}

.time-slot.available { cursor: pointer; }

.time-slot.available:hover {
  border-color: var(--color-brass);
  background: rgba(var(--color-brass-rgb), 0.1);
}

.time-slot.available.selected {
  border-color: var(--color-brass);
  background: var(--color-brass);
  color: var(--color-bg-dark);
}

.time-slot.zauzeto {
  opacity: 0.28;
  cursor: not-allowed;
  text-decoration: line-through;
}

.step3-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wizard-back {
  background: none;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.3);
  color: var(--color-text-light);
  font-size: 0.875rem;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  transition: all 0.25s ease;
  font-family: var(--font-body);
  cursor: pointer;
}

.wizard-back:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
}

.wizard-confirm:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Confirmation card */
.wizard-confirmation {
  text-align: center;
  padding: 16px;
  animation: stepIn 0.5s ease;
}

.confirm-check {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.12);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-primary-light);
  margin: 0 auto 20px;
}

.wizard-confirmation h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-text-white);
  margin-bottom: 16px;
}

.confirm-photo {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
  margin: 0 auto 14px;
  display: block;
}

.confirm-details {
  font-size: 1rem;
  color: var(--color-primary-light);
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.9;
}

.confirm-note {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
}

/* ─── MAP (relocated into the Zakaži card) ────── */
.mapa-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 20px;
}

#map {
  flex: 1;
  height: 100%;
  min-height: 300px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.3);
}

.leaflet-tile-pane {
  filter: hue-rotate(30deg) saturate(0.75) brightness(1.05);
}

.leaflet-popup-content-wrapper {
  background: var(--color-bg-card);
  color: var(--color-text-white);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--color-primary-rgb), 0.4);
  font-family: var(--font-body);
  box-shadow: var(--shadow-md);
}

.leaflet-popup-content b { color: var(--color-primary-light); display: block; margin-bottom: 4px; }
.leaflet-popup-tip { background: var(--color-bg-card); }
.leaflet-popup-close-button { color: var(--color-text-muted) !important; }

/* ─── FORM FIELDS (shared with the booking client-info modal) ── */
.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 20px 16px 8px;
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group select option {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
}

.form-group label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.form-group textarea ~ label { top: 24px; transform: none; }

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group select:focus ~ label,
.form-group select[data-has-value] ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
  top: 8px;
  font-size: 0.72rem;
  color: var(--color-primary-light);
  transform: translateY(0);
}

.form-error {
  font-size: 0.75rem;
  color: #ff6b6b;
  margin-top: 4px;
  display: none;
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea { border-color: #ff6b6b; }

.form-group.error .form-error { display: block; }

/* Social buttons (footer) */
.social-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-light);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.social-btn:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
}

.social-btn svg { width: 18px; height: 18px; }

.footer-ico {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 8px;
  color: var(--color-primary-light);
}

/* ─── ZAKAŽI ASIDE — cenovnik (top) + map (bottom) ── */
.zakazi-aside {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  padding-top: 90px;
}

/* Mobile override — MUST come after the base .zakazi-aside rule above to win on
   source order (media queries add no specificity). On the stacked mobile layout
   the 90px desktop alignment padding becomes dead space, and the 24px gap reads
   as too much air between the cenovnik and map cards, so both are tightened. */
@media (max-width: 768px) {
  .zakazi-aside { padding-top: 0; gap: 14px; }
}

.cenovnik-col,
.zakazi-map-card {
  background-color: var(--color-surface);
  border: 1.5px solid rgba(var(--color-brass-rgb), 0.4);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}

.cenovnik-col { padding: 28px 30px; }

.cenovnik-col h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text-white);
  font-weight: 700;
  margin-bottom: 16px;
}

.cenovnik-box {
  display: flex;
  flex-direction: column;
}

.zakazi-map-card {
  padding: 18px;
  min-height: 0;   /* lets the map card shrink to its grid row */
}

.zakazi-map-card .mapa-label { margin-bottom: 12px; }

.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0 8px 0;
  border-left: 4px solid transparent;
  cursor: default;
  transition: padding-left 0.3s ease, border-color 0.3s ease;
}

.price-row:hover {
  padding-left: 8px;
  border-left-color: var(--color-primary);
}

.price-name {
  font-size: 0.875rem;
  color: var(--color-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.3s ease;
}

.price-row:hover .price-name { transform: translateX(6px); }

.price-dots {
  flex: 1;
  border-bottom: 1.5px dotted rgba(255,255,255,0.2);
  margin-bottom: 4px;
  min-width: 20px;
}

.price-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary-light);
  white-space: nowrap;
  transition: text-shadow 0.3s ease;
}

.price-row:hover .price-value {
  text-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.7);
}

/* ─── FOOTER ────────────────────────────────── */
footer {
  background: #0A0A0A;
  color: var(--color-text-white);
  border-top: 3px solid rgba(var(--color-primary-rgb), 0.6);
  padding: 80px 5% 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary-light);
  margin-bottom: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: footer-emerald-glow 4.5s ease-in-out infinite;
}

.footer-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.footer-tagline {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  max-width: 260px;
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-primary-light);
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  animation: footer-emerald-glow 4.5s ease-in-out infinite;
}

.footer-col:nth-of-type(2) h4 { animation-delay: 0.6s; }

@keyframes footer-emerald-glow {
  0%, 100% { color: var(--color-primary-light); }
  50%      { color: var(--color-primary-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo,
  .footer-col h4 { animation: none; }
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--color-primary-light); }

.footer-contact p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
}

.footer-contact a {
  color: rgba(255,255,255,0.5);
  transition: color var(--transition);
}

.footer-contact a:hover { color: var(--color-primary-light); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
}

.footer-social {
  display: flex;
  gap: 14px;
}

/* ─── REVEAL ANIMATIONS ─────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1) calc(var(--delay,0)*1ms),
              transform .7s cubic-bezier(.22,1,.36,1) calc(var(--delay,0)*1ms);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Section-title wipe — the two big titles rise from behind a mask in view */
.title-reveal {
  clip-path: inset(0 0 100% 0);
  transform: translateY(.28em);
  transition: clip-path .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}

.title-reveal.in-view {
  clip-path: inset(0 0 0 0);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .title-reveal { clip-path: none; transform: none; }
}

.reveal-left  { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }

.reveal-left.in-view,
.reveal-right.in-view {
  transform: translateX(0);
}

.reveal-pop {
  opacity: 0;
  transform: scale(0.95);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  transition-delay: calc(var(--delay, 0) * 1ms);
}

.reveal-pop.in-view {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children — each child's delay is set in JS */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-pop,
  .reveal-stagger > * {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ─── SCROLL PROGRESS ACCENT ─────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-brass), var(--color-brass-light));
  z-index: 1200;
  pointer-events: none;
  will-change: transform;
}

/* ─── RESPONSIVE ────────────────────────────── */
@media (max-width: 1024px) {
  .wizard-container { padding: 32px; }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }

  .nav-links { display: none; }
  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  #pocetna {
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 80px;
  }

  .hero-title { font-size: clamp(2rem, 10vw, 3rem); }

  .wizard-container { padding: 24px 20px; }

  /* ≥44px touch targets on mobile */
  .time-slot { min-height: 44px; }
  .wizard-back { min-height: 44px; }

  #map { min-height: 280px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 480px) {
  .cenovnik-col { padding: 22px 20px; }
  .step-indicator { gap: 6px; }
  .step-connector { display: none; }
}

/* ─── DATE PICKER ───────────────────────────────── */
.date-picker-row {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin-bottom: 20px;
}

.date-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.25);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  padding: 10px 6px 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-btn-weekday { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.date-btn-day      { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--color-text-white); }
.date-btn-month    { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }

.date-btn:hover {
  border-color: rgba(var(--color-brass-rgb), 0.6);
  background: rgba(var(--color-brass-rgb), 0.08);
}

.date-btn-active { background: var(--color-brass) !important; border-color: var(--color-brass) !important; }
.date-btn-active .date-btn-weekday,
.date-btn-active .date-btn-day,
.date-btn-active .date-btn-month { color: var(--color-bg-dark) !important; opacity: 1; }

/* ─── Zakaži interactivity polish (redesign-skill audit fixes) ───────
   The audit flagged: no :active pressed feedback, no keyboard focus rings,
   and time-slot/back-button touch targets under 44px. All motion below is
   transform-only with a reduced-motion fallback; palette is unchanged
   (brass accents only — no new colors). */

/* Touch targets: time slots were ~37px tall, the back button ~39px. */
.time-slot {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;   /* times line up in the grid */
}
.wizard-back { min-height: 44px; }
.price-value { font-variant-numeric: tabular-nums; }  /* prices align in a column */

/* Pressed/active feedback — a small physical "push" on tap/click. */
.date-btn:active,
.time-slot.available:active,
.service-row-wizard:active,
.wizard-back:active,
.wizard-next-btn:active { transform: scale(0.97); }

/* Keyboard focus rings (accessibility — visible for keyboard users). */
.date-btn:focus-visible,
.time-slot.available:focus-visible,
.service-row-wizard:focus-visible,
.wizard-back:focus-visible,
.wizard-next-btn:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wizard-step,
  .wizard-confirmation { animation: none; }
  .date-btn:active,
  .time-slot.available:active,
  .service-row-wizard:active,
  .wizard-back:active,
  .wizard-next-btn:active { transform: none; }
}

/* ─── CLIENT INFO MODAL ─────────────────────────── */
#client-info-modal .form-group {
  margin-bottom: 14px;
  position: relative;
}

#client-info-modal input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 20px 14px 8px;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

#client-info-modal input:focus {
  border-color: var(--color-primary);
}

#client-info-modal .form-group label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

#client-info-modal input:focus ~ label,
#client-info-modal input:not(:placeholder-shown) ~ label {
  top: 8px;
  font-size: 0.7rem;
  color: var(--color-primary-light);
  transform: translateY(0);
}

#client-info-modal h4 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-family: var(--font-display);
  color: var(--color-primary-light);
}

.cancel-booking-btn {
  cursor: pointer;
}

/* ─── ADMIN PANEL ──────────────────────── */
#admin-trigger {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(47,93,61,0.12);
  border: 1.5px solid rgba(47,93,61,0.25);
  color: var(--color-primary-light);
  cursor: pointer;
  z-index: 800;
  opacity: 0.35;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#admin-trigger:hover { opacity: 1; }

#admin-auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}

#admin-auth-inner {
  background: #1c1c1c;
  border: 1.5px solid rgba(47,93,61,0.35);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 320px;
  width: 100%;
}

#admin-auth-inner h4 {
  font-family: var(--font-display);
  color: var(--color-primary-light);
  font-size: 1.1rem;
  margin-bottom: 16px;
}

#admin-password-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(47,93,61,0.25);
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  padding: 12px 14px;
  outline: none;
  font-family: var(--font-body);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
#admin-password-input:focus { border-color: var(--color-primary); }

#admin-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.80);
  z-index: 9000;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#admin-inner {
  background: #161616;
  border: 1.5px solid rgba(47,93,61,0.3);
  border-radius: 20px;
  padding: 32px;
  max-width: 700px;
  width: 100%;
  margin: 40px auto;
}

#admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

#admin-title {
  font-family: var(--font-display);
  color: var(--color-primary-light);
  font-size: 1.3rem;
}

#admin-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}
#admin-close:hover { color: #fff; }

.admin-subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
}

#admin-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

#admin-week-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  flex: 1;
}

#admin-days-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.admin-day-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 16px 20px;
}

.admin-day-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-light);
  margin-bottom: 12px;
}

.admin-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-slot-btn {
  padding: 7px 14px;
  min-height: 40px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.35);
  transition: all 0.2s ease;
}
.admin-slot-btn:active { transform: translateY(1px) scale(0.98); }
.admin-slot-btn:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .admin-slot-btn:active { transform: none; }
}

/* Past days in the locked Mon–Sun week: visible but read-only. */
.admin-day-past { opacity: 0.5; }
.admin-day-past .admin-slot-btn:not(.booked) { cursor: not-allowed; }
.admin-day-past-note {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-left: 8px;
}

.admin-slot-btn.enabled {
  border-color: var(--color-primary);
  background: rgba(47,93,61,0.15);
  color: var(--color-primary-light);
}

/* Admin grid: a slot the barber pulled (with a reason) — struck through so it's
   clearly not offered; click restores it. */
.admin-slot-btn.slot-cancelled {
  border-color: rgba(255,90,90,0.5);
  background: rgba(255,90,90,0.10);
  color: #ff8a8a;
  text-decoration: line-through;
}

/* Customer wizard: pulled slots shown above the time grid, crossed-out + reason. */
#cancelled-slots-notice { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.pulled-slot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,90,90,0.28);
  background: rgba(255,90,90,0.06);
}
.pulled-slot-time { font-weight: 700; color: #ff8a8a; text-decoration: line-through; }
.pulled-slot-reason { color: rgba(255,255,255,0.7); }

.admin-slot-btn.booked {
  position: relative;
  cursor: not-allowed;
  border-color: var(--color-brass);
  background: rgba(var(--color-brass-rgb), 0.18);
  color: var(--color-brass-light);
  opacity: 0.92;
}

.admin-slot-btn.booked::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brass);
}

#admin-save-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-brass);
  color: var(--color-bg-dark);
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#admin-save-btn .btn-ico { width: 18px; height: 18px; }
#admin-trigger svg { width: 18px; height: 18px; }
#admin-save-btn:hover {
  box-shadow: 0 0 0 4px rgba(47,93,61,0.25);
}

#admin-save-msg {
  text-align: center;
  color: var(--color-primary-light);
  font-size: 0.9rem;
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH + ACCOUNTS UI  (nav control, auth modal, Moji termini, admin
   dashboard extensions). Reuses existing tokens — no new colors/fonts.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Top-bar auth control (replaces the old Instagram icon) ── */
.nav-auth-top {
  display: inline-flex;
  align-items: center;
  margin-left: 28px;
  position: relative;
}

.nav-signin-btn {
  background: var(--color-brass);
  color: var(--color-bg-dark);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  transition: background 0.25s ease, transform 0.2s ease;
}
.nav-signin-btn:hover { background: var(--color-brass-light); transform: translateY(-1px); }
.nav-signin-btn:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; }

.nav-acct { position: relative; }

.nav-acct-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--color-brass-rgb), 0.15);
  border: 1.5px solid var(--color-brass);
  color: var(--color-brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.nav-acct-btn:hover { background: rgba(var(--color-brass-rgb), 0.28); transform: translateY(-1px); }
.nav-acct-btn:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 2px; }
.nav-acct-initial {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

.nav-acct-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: var(--color-nav);
  border: 1.5px solid rgba(var(--color-brass-rgb), 0.35);
  border-radius: 14px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  z-index: 1300;
}
.nav-acct-menu.open { display: flex; }

.nav-acct-name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 4px;
}

.nav-acct-item {
  text-align: left;
  background: none;
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.18s ease;
}
.nav-acct-item:hover { background: rgba(255,255,255,0.06); }
.nav-acct-logout { color: #ff8a8a; }

/* ── Auth modal (login / register) ── */
#auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#auth-inner,
#reset-password-inner {
  position: relative;
  background: #161616;
  border: 1.5px solid rgba(var(--color-brass-rgb), 0.35);
  border-radius: 20px;
  padding: 30px 30px 26px;
  max-width: 400px;
  width: 100%;
}
.auth-x {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.auth-x:hover { color: #fff; }

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  background: rgba(255,255,255,0.04);
  padding: 5px;
  border-radius: var(--radius-pill);
}
.auth-tab {
  flex: 1;
  background: none;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, color 0.2s ease;
}
.auth-tab.active { background: var(--color-brass); color: var(--color-bg-dark); }

.auth-panel { display: none; }
.auth-panel.active { display: block; }

#auth-inner .form-group,
#reset-password-inner .form-group { margin-bottom: 14px; position: relative; }
#auth-inner input,
#reset-password-inner input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 20px 14px 8px;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
#auth-inner input:focus,
#reset-password-inner input:focus { border-color: var(--color-primary); }
#auth-inner .form-group label,
#reset-password-inner .form-group label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#auth-inner input:focus ~ label,
#auth-inner input:not(:placeholder-shown) ~ label,
#reset-password-inner input:focus ~ label,
#reset-password-inner input:not(:placeholder-shown) ~ label {
  top: 11px;
  transform: none;
  font-size: 0.66rem;
  color: var(--color-primary-light);
}

.auth-submit {
  width: 100%;
  text-align: center;
  margin-top: 6px;
  padding: 13px;
}
.auth-error {
  color: #ff8a8a;
  font-size: 0.82rem;
  margin-top: 12px;
  text-align: center;
}
.auth-msg {
  color: var(--color-primary-light);
  font-size: 0.82rem;
  margin-top: 12px;
  text-align: center;
  line-height: 1.5;
}

.auth-forgot-link {
  display: block;
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-decoration: underline;
  text-align: right;
  margin: -4px 0 16px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.auth-forgot-link:hover { color: var(--color-brass); }
.auth-panel[data-panel="forgot"] .auth-forgot-link { text-align: center; margin: 14px 0 0; }

.auth-forgot-hint {
  color: rgba(255,255,255,0.55);
  font-size: 0.83rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ── Reset-password modal (landed here from the recovery email link) ── */
#reset-password-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.reset-password-title {
  font-family: var(--font-display);
  color: var(--color-brass);
  font-size: 1.2rem;
  margin-bottom: 18px;
  text-align: center;
}

/* ── Email-verified toast (appears after clicking the confirmation link) ── */
.auth-verified-banner {
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  background: #1c1c1c;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary-light);
  padding: 14px 26px;
  border-radius: 12px;
  z-index: 9999;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  transition: opacity 0.5s ease;
}

/* ── Moji termini (user dashboard) ── */
#moji-termini-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.80);
  z-index: 9400;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 20px;
}
#moji-termini-inner {
  background: #161616;
  border: 1.5px solid rgba(var(--color-brass-rgb), 0.3);
  border-radius: 20px;
  padding: 28px 30px;
  max-width: 540px;
  width: 100%;
  margin: 40px auto;
}
.mt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.mt-header h3 {
  font-family: var(--font-display);
  color: var(--color-brass);
  font-size: 1.3rem;
}
#moji-close {
  background: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}
#moji-close:hover { color: #fff; }

#moji-termini-list { display: flex; flex-direction: column; gap: 12px; }
.mt-empty { color: rgba(255,255,255,0.5); font-size: 0.9rem; text-align: center; padding: 24px; }

.mt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 18px;
}
.mt-card.mt-cancelled { opacity: 0.55; }
.mt-info { min-width: 0; }
.mt-service { font-weight: 600; color: var(--color-text-white); font-size: 0.95rem; }
.mt-when { color: var(--color-text-light); font-size: 0.85rem; margin-top: 2px; }
.mt-id { color: var(--color-text-muted); font-size: 0.72rem; margin-top: 3px; }
/* User "Moji termini" — booking creation timestamp */
.mt-booked-at { font-size: 0.72rem; color: rgba(255, 255, 255, 0.38); margin-top: 3px; font-style: italic; }
.mt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

.mt-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.mt-status.active    { background: rgba(var(--color-primary-rgb), 0.18); color: var(--color-primary-light); }
.mt-status.done      { background: rgba(255,255,255,0.08); color: var(--color-text-muted); }
.mt-status.cancelled { background: rgba(255,90,90,0.15); color: #ff8a8a; }

.mt-cancel-btn {
  background: none;
  border: 1.5px solid rgba(255,90,90,0.5);
  color: #ff8a8a;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.mt-cancel-btn:hover:not(:disabled) { background: rgba(255,90,90,0.12); }
.mt-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: rgba(255,255,255,0.2); color: var(--color-text-muted); }

/* ── Admin dashboard extensions (tabs, users, bookings, book-on-behalf) ── */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 22px;
  background: rgba(255,255,255,0.04);
  padding: 5px;
  border-radius: 12px;
}
.admin-tab {
  flex: 1 1 auto;
  background: none;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.admin-tab.active { background: var(--color-brass); color: var(--color-bg-dark); }

.admin-tabpanel { display: none; }
.admin-tabpanel.active { display: block; }

.admin-empty { color: rgba(255,255,255,0.5); font-size: 0.9rem; text-align: center; padding: 22px; }

.admin-user-row,
.admin-booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.admin-booking-row.cancelled { opacity: 0.55; }
.admin-user-name { font-weight: 600; color: var(--color-text-white); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.admin-user-phone { color: var(--color-text-muted); font-size: 0.78rem; margin-top: 2px; }
.admin-user-note { color: var(--color-text-muted); font-size: 0.74rem; font-style: italic; }
.admin-booking-when { font-weight: 600; color: var(--color-text-white); font-size: 0.88rem; }
.admin-booking-svc { color: var(--color-text-light); font-size: 0.8rem; margin-top: 2px; }
/* Admin booking list — booking creation timestamp */
.admin-booking-created { font-size: 0.72rem; color: rgba(255, 255, 255, 0.38); margin-top: 3px; font-style: italic; }

.role-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.role-user  { background: rgba(255,255,255,0.08); color: var(--color-text-muted); }
.role-admin { background: rgba(var(--color-primary-rgb), 0.2); color: var(--color-primary-light); }
.role-core  { background: rgba(var(--color-brass-rgb), 0.22); color: var(--color-brass-light); }

.admin-role-btn,
.admin-cancel-btn {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.admin-role-btn.grant  { background: rgba(var(--color-primary-rgb), 0.15); border: 1.5px solid var(--color-primary); color: var(--color-primary-light); }
.admin-role-btn.revoke { background: none; border: 1.5px solid rgba(255,90,90,0.5); color: #ff8a8a; }
.admin-role-btn:hover:not(:disabled) { opacity: 0.85; }
.admin-role-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.admin-cancel-btn { background: none; border: 1.5px solid rgba(255,90,90,0.5); color: #ff8a8a; }
.admin-cancel-btn:hover:not(:disabled) { background: rgba(255,90,90,0.12); }
.admin-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Book-on-behalf form */
.admin-bk-form { display: flex; flex-direction: column; gap: 14px; }
.admin-bk-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-light);
}
.admin-bk-form select,
.admin-bk-target input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-text-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.admin-bk-form select:focus,
.admin-bk-target input:focus { border-color: var(--color-primary); }
.admin-bk-form select option { background: #1c1c1c; color: var(--color-text-white); }
.admin-bk-target { display: flex; flex-direction: column; gap: 10px; }
#admin-bk-submit { width: 100%; text-align: center; margin-top: 4px; padding: 13px; }
#admin-bk-msg { text-align: center; font-size: 0.85rem; margin-top: 4px; }

/* ── Mobile tuning for all auth/dashboard UI ── */
@media (max-width: 768px) {
  .nav-auth-top { margin-left: auto; margin-right: 10px; }
  .nav-signin-btn { padding: 8px 16px; font-size: 0.8rem; }
  .nav-acct-btn { width: 42px; height: 42px; }
  .nav-acct-menu { right: -4px; min-width: 200px; }

  #auth-inner,
  #reset-password-inner { padding: 26px 22px 22px; border-radius: 18px; }
  #moji-termini-inner { padding: 22px 18px; margin: 20px auto; }
  #admin-inner { padding: 24px 18px; margin: 20px auto; }

  .admin-tab { flex: 1 1 40%; min-height: 44px; }

  .admin-slot-btn { min-height: 44px; }
  .admin-slots-grid { gap: 10px; }

  .mt-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .mt-side { flex-direction: row; align-items: center; justify-content: space-between; }

  .admin-user-row,
  .admin-booking-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-user-ctrl,
  .admin-booking-side { display: flex; justify-content: flex-end; }
  .admin-role-btn,
  .admin-cancel-btn,
  .mt-cancel-btn { min-height: 40px; }
}

@media (max-width: 480px) {
  .admin-tab { flex: 1 1 100%; }
}