@import url('/assets/editor/components/section-library/section-library.css');
/* The Salon – Built-in Interactive Booking System & UI (the-salon.eu Color Palette) */
/* Universal Color Scheme Lock & Immunity against Mobile Force Dark / Auto-Inversion */
:root,
html,
body,
dialog,
header,
main,
footer,
nav,
section,
article,
div,
p,
span,
a,
button,
[data-booking-modal],
#salon-booking-modal,
.gob-booking-dialog {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

/* Unconditional Header, Navigation and Hero Branding Theme Preservation */
header[data-nav],
header[data-nav].bg-ink\/85 {
  background-color: #dfc8b5 !important;
  background: #dfc8b5 !important;
  border-bottom: 1px solid rgba(198, 171, 148, 0.6) !important;
  border-bottom-color: rgba(198, 171, 148, 0.6) !important;
  color-scheme: only light !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

header[data-nav] .container-page,
header[data-nav] > .container-page,
header[data-nav] #nav-panel {
  background-color: transparent !important;
  background: transparent !important;
}

header[data-nav] > .container-page > a:first-child,
header[data-nav] a.font-display {
  color: #000000 !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

header[data-nav] button[data-nav-toggle],
header[data-nav] button[data-nav-toggle] svg,
header[data-nav] button[data-nav-toggle] svg path,
header[data-nav] button[data-nav-toggle] svg line {
  color: #282828 !important;
  stroke: #282828 !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

.gob-hero-booking-btn,
.gob-hero-booking-btn span {
  color: #ffffff !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

.gob-hero-booking-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

/* Explicitly provide dark-mode media query that locks in the exact same luxury light palette */
@media (prefers-color-scheme: dark) {
  :root,
  html,
  body {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
    background-color: #FAF5ED !important;
    background: #FAF5ED !important;
    color: #282828 !important;
    --gob-ink: #fef2e8 !important;
    --gob-surface: #FAF5ED !important;
    --gob-surface-elevated: #dfc8b5 !important;
    --gob-cream: #282828 !important;
    --gob-muted: #5a4d42 !important;
    --gob-brass: #7d5a3c !important;
    --gob-brass-strong: #282828 !important;
    --gob-line: #E2D9CB !important;
    --color-ink: #fef2e8 !important;
    --color-surface: #f0e2d3 !important;
    --color-cream: #282828 !important;
    --color-muted: #5a4d42 !important;
    --color-brass: #7d5a3c !important;
    --color-line: #c6ab94 !important;
  }

  header[data-nav],
  header[data-nav].bg-ink\/85 {
    background-color: #dfc8b5 !important;
    background: #dfc8b5 !important;
    border-bottom: 1px solid rgba(198, 171, 148, 0.6) !important;
    border-bottom-color: rgba(198, 171, 148, 0.6) !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  header[data-nav] > .container-page > a:first-child,
  header[data-nav] a.font-display {
    color: #000000 !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  header[data-nav] #nav-panel nav ul li a,
  header[data-nav] #nav-panel nav ul li a[aria-current="page"],
  header[data-nav] #nav-panel nav ul li a.font-bold,
  header[data-nav] #nav-panel nav ul li a.is-active,
  header[data-nav] #nav-panel nav ul li a.active {
    color: #282828 !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  header[data-nav] #nav-panel nav ul li a:not([aria-current="page"]):not(.is-active):not(.active):not(.font-bold) {
    color: #5a4d42 !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  header[data-nav] .gob-nav-BookingBtn {
    background-color: #282828 !important;
    color: #ffffff !important;
    border-color: #c6ab94 !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  header[data-nav] .gob-nav-BookingBtn .gob-badge-count {
    background-color: #282828 !important;
    color: #ffffff !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  header[data-nav] .gob-user-menu-btn {
    background-color: #282828 !important;
    color: #ffffff !important;
    border-color: #c6ab94 !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  header[data-nav] button[data-nav-toggle],
  header[data-nav] button[data-nav-toggle] svg,
  header[data-nav] button[data-nav-toggle] svg path,
  header[data-nav] button[data-nav-toggle] svg line {
    color: #282828 !important;
    stroke: #282828 !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  .gob-hero-booking-btn,
  .gob-hero-booking-btn span {
    color: #ffffff !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  .gob-hero-booking-btn svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  .text-cream {
    color: #282828 !important;
  }

  .text-muted {
    color: #5a4d42 !important;
  }

  .text-ink {
    color: #fef2e8 !important;
  }

  .bg-surface,
  .rounded-card.bg-surface,
  article.bg-surface,
  article.rounded-card.bg-surface,
  #team article,
  #team .rounded-card,
  [data-carousel-track] article,
  [data-carousel-track] .rounded-card,
  [data-carousel-track] li article {
    background-color: #f0e2d3 !important;
    background: #f0e2d3 !important;
  }

  .bg-ink\/85 {
    background-color: #dfc8b5 !important;
  }

  .rounded-card:not(.bg-surface) {
    background-color: #FAF5ED !important;
  }

  .rounded-card {
    border-color: #c6ab94 !important;
    color: #282828 !important;
  }

  .btn-primary,
  .gob-route-btn {
    background-color: #282828 !important;
    color: #ffffff !important;
  }
}

/* Explicit Map Card & Team Cards Warm Beige Restoration (#f0e2d3) */
.bg-surface,
.rounded-card.bg-surface,
article.bg-surface,
article.rounded-card.bg-surface,
#team article,
#team .rounded-card,
[data-carousel-track] article,
[data-carousel-track] .rounded-card,
[data-carousel-track] li article {
  background-color: #f0e2d3 !important;
  background: #f0e2d3 !important;
  border-color: #c4ad99 !important;
}

:root {
  --gob-ink: #fef2e8;
  --gob-surface: #FAF5ED;
  --gob-surface-elevated: #dfc8b5;
  --gob-cream: #282828;
  --gob-muted: #5a4d42;
  --gob-brass: #7d5a3c;
  --gob-brass-strong: #282828;
  --gob-line: #E2D9CB;
  --gob-success: #1b7f40;
  --gob-danger: #c92a2a;
  --gob-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --gob-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Header Layout & Language Switcher Pinned to Top Row Far Right */
header[data-nav] > .container-page {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: clamp(1rem, 2.2vw, 2.25rem) !important;
  padding-right: clamp(1rem, 2.2vw, 2.25rem) !important;
}

header[data-nav] > .container-page > a:first-child {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: #000000 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.1 !important;
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1:not([style*="color"]) {
  color: #000000 !important;
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1:not([style*="font-size"]) {
  font-size: clamp(2.75rem, 7.5vw, 6rem) !important;
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1:not([data-wb-shadow-enabled="false"]):not([data-wb-shadow-preset="none"]):not([style*="text-shadow: none"]):not([style*="text-shadow:none"]) {
  font-weight: 700;
  text-shadow:
    0 0 32px rgba(254, 242, 232, 1),
    0 0 70px rgba(254, 242, 232, 0.98),
    0 0 120px rgba(254, 242, 232, 0.92),
    0 0 180px rgba(254, 242, 232, 0.8),
    6px 10px 30px rgba(0, 0, 0, 0.82),
    0 18px 64px rgba(0, 0, 0, 0.72),
    0 0 100px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 12px 44px rgba(0, 0, 0, 0.6));
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1[data-wb-shadow-enabled="false"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]),
main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1[data-wb-shadow-preset="none"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]),
main:not(.container-page):not(.ts-settings-workspace) > section:first-child p[data-wb-shadow-enabled="false"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]),
main:not(.container-page):not(.ts-settings-workspace) > section:first-child p[data-wb-shadow-preset="none"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]) {
  text-shadow: none !important;
  filter: none !important;
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1.gob-hero-logo-wrap {
  text-shadow: none;
  font-size: 0 !important;
  line-height: 0 !important;
  border: none !important;
  background: transparent !important;
}

.gob-hero-logo-wrap {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(260px, 60vw, 846px) !important;
  max-width: min(846px, 92vw) !important;
  max-height: clamp(80px, 24vh, 220px) !important;
  height: auto !important;
  box-sizing: border-box !important;
  container-type: inline-size !important;
}

.gob-hero-logo-wrap::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 140% !important;
  height: 220% !important;
  max-width: 90vw !important;
  background: radial-gradient(ellipse at center,
    var(--gob-hero-glow-halo-0, rgba(255, 255, 255, 0.95)) 0%,
    var(--gob-hero-glow-halo-30, rgba(254, 242, 232, 0.75)) 30%,
    var(--gob-hero-glow-halo-55, rgba(254, 242, 232, 0.35)) 55%,
    var(--gob-hero-glow-halo-70, rgba(254, 242, 232, 0.1)) 70%,
    transparent 80%) !important;
  border-radius: 50% !important;
  filter: blur(clamp(8px, calc(100cqw * 0.0331), 28px)) !important;
  pointer-events: none !important;
  opacity: var(--gob-hero-glow-opacity, 1) !important;
  z-index: 0 !important;
  transition: opacity 0.15s ease;
}

.gob-hero-logo-wrap[data-wb-glow-enabled="false"]::before,
.gob-hero-logo-wrap[data-wb-glow-preset="none"]::before {
  opacity: 0 !important;
}

svg.gob-hero-logo,
.gob-hero-logo {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(rgba(254, 242, 232, 0.70) 0px 0px clamp(2px, calc(100cqw * 0.00827), 7px))
          drop-shadow(rgba(254, 242, 232, 0.82) 0px 0px clamp(5px, calc(100cqw * 0.02009), 17px))
          drop-shadow(rgba(254, 242, 232, 0.67) 0px 0px clamp(11px, calc(100cqw * 0.04610), 39px))
          drop-shadow(rgba(254, 242, 232, 0.44) 0px 0px clamp(20px, calc(100cqw * 0.08156), 69px))
          drop-shadow(rgba(254, 242, 232, 0.27) 0px 0px clamp(31px, calc(100cqw * 0.12766), 108px)) !important;
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child p:not([data-wb-shadow-enabled="false"]):not([data-wb-shadow-preset="none"]) {
  font-weight: 700;
  text-shadow:
    0 0 26px rgba(254, 242, 232, 1),
    0 0 56px rgba(254, 242, 232, 0.98),
    0 0 100px rgba(254, 242, 232, 0.92),
    0 0 150px rgba(254, 242, 232, 0.8),
    4px 8px 24px rgba(0, 0, 0, 0.82),
    0 14px 52px rgba(0, 0, 0, 0.72),
    0 0 84px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 10px 36px rgba(0, 0, 0, 0.58));
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child p[data-wb-shadow-enabled="false"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]),
main:not(.container-page):not(.ts-settings-workspace) > section:first-child p[data-wb-shadow-preset="none"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]),
main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1[data-wb-shadow-enabled="false"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]),
main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1[data-wb-shadow-preset="none"]:not([data-wb-glow-enabled="true"]):not([data-wb-glow-active="true"]) {
  text-shadow: none !important;
  filter: none !important;
}

.gob-hero-logo-wrap[data-wb-glow-enabled="false"] svg.gob-hero-logo,
.gob-hero-logo-wrap[data-wb-glow-preset="none"] svg.gob-hero-logo,
.gob-hero-logo-wrap[data-wb-glow-active="false"] svg.gob-hero-logo,
svg.gob-hero-logo[data-wb-glow-enabled="false"],
svg.gob-hero-logo[data-wb-glow-active="false"] {
  filter: none !important;
}

main:not(.container-page):not(.ts-settings-workspace) > section:first-child p:not([data-wb-shadow-enabled="false"]):not([data-wb-shadow-preset="none"]):not([style*="text-shadow: none"]):not([style*="text-shadow:none"])[style*="254, 242, 232"],
main:not(.container-page):not(.ts-settings-workspace) > section:first-child p:not([data-wb-shadow-enabled="false"]):not([data-wb-shadow-preset="none"]):not([style*="text-shadow: none"]):not([style*="text-shadow:none"])[style*="#fef2e8" i],
main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1:not([data-wb-shadow-enabled="false"]):not([data-wb-shadow-preset="none"]):not([style*="text-shadow: none"]):not([style*="text-shadow:none"])[style*="254, 242, 232"],
main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1:not([data-wb-shadow-enabled="false"]):not([data-wb-shadow-preset="none"]):not([style*="text-shadow: none"]):not([style*="text-shadow:none"])[style*="#fef2e8" i] {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.98),
    0 8px 34px rgba(0, 0, 0, 0.95),
    6px 12px 54px rgba(0, 0, 0, 0.92),
    0 0 80px rgba(0, 0, 0, 0.88),
    0 22px 100px rgba(0, 0, 0, 0.85),
    0 0 140px rgba(0, 0, 0, 0.7);
  filter: drop-shadow(0 12px 44px rgba(0, 0, 0, 0.78));
}

/* Lighter hero overlay (20% more transparent) */
main > section:first-child > div.bg-ink\/40,
main > section:first-of-type > div.bg-ink\/40 {
  background-color: rgba(254, 242, 232, 0.20) !important;
}

main > section:first-child > div.bg-ink\/45,
main > section:first-of-type > div.bg-ink\/45 {
  background-color: rgba(254, 242, 232, 0.25) !important;
}

/* Smooth Ethereal Headliner / Hero Bottom Transition (All Pages)
   Soft, seamless dissolve between hero video/image and the cream page content.
   Eliminates harsh lines and cutoffs. */
main > section:first-child > div.bg-gradient-to-t,
main > section:first-of-type > div.bg-gradient-to-t,
main > section:first-of-type [class*="bg-gradient-to-t"] {
  height: 52% !important;
  min-height: 240px !important;
  max-height: 520px !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  pointer-events: none !important;
  background-image: linear-gradient(
    to top,
    #FAF5ED 0%,
    #FAF5ED 10%,
    rgba(250, 245, 237, 0.98) 18%,
    rgba(250, 245, 237, 0.93) 28%,
    rgba(250, 245, 237, 0.84) 40%,
    rgba(250, 245, 237, 0.70) 54%,
    rgba(250, 245, 237, 0.52) 68%,
    rgba(250, 245, 237, 0.32) 80%,
    rgba(250, 245, 237, 0.14) 90%,
    rgba(250, 245, 237, 0.03) 96%,
    rgba(250, 245, 237, 0) 100%
  ) !important;
  z-index: 2 !important;
}

@media (max-width: 639px) {
  main > section:first-child > div.bg-gradient-to-t,
  main > section:first-of-type > div.bg-gradient-to-t,
  main > section:first-of-type [class*="bg-gradient-to-t"] {
    height: 48% !important;
    min-height: 180px !important;
    max-height: none !important;
    bottom: -2px !important;
  }
}

/* Ensure hero text and booking buttons stay crisp and interactive above the bottom dissolve */
main > section:first-child > div.relative,
main > section:first-of-type > div.relative,
main > section:first-of-type > div.absolute.flex,
main > section:first-of-type > div.relative.flex {
  z-index: 10 !important;
}

/* Eliminate harsh horizontal border line directly beneath the hero on all pages */
main > section:first-of-type + section,
main > section:first-of-type + div,
main > section:first-of-type + article,
main > section:first-child + section,
#szolgaltatasaink.border-t,
.container-page.border-t:first-of-type {
  border-top: none !important;
}

/* ==========================================================================
   THE SALON BUDAPEST — UNIVERSAL RESPONSIVE HERO CONTENT ENGINE (PHASE 15H)
   Adapts PC Hero composition fluidly to all screen dimensions and aspect ratios.
   Zero desktop regression; strict visual hierarchy:
   1. Brand Title (Logo SVG)
   2. Subtitle (Fodrászat & Hajápolás)
   3. Primary CTA Button (IDŐPONTFOGLALÁS)
   4. Divider Line
   5. Bottom Slogan (SZAKÉRTELEM · STÍLUS · TERMÉSZETES SZÉPSÉG)
   ========================================================================== */

/* Hero Section Base — Phase 15H Universal Responsive Engine (Decoupled from Scroll State) */
main > section:first-of-type:has(video),
main > section:first-of-type:has(.gob-hero-logo-wrap) {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-anchor: none !important;
  background-color: #FAF5ED !important;
}

/* Protected Hero Video Background — Absolute, Non-distorting */
main > section:first-of-type:has(video) > video,
main > section:first-of-type:has(.gob-hero-logo-wrap) > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  pointer-events: none !important;
}

/* Neutralize stale visual-drag transforms in live view so fluid math governs layout */
body:not(.gob-edit-mode) .gob-hero-logo-wrap,
body:not(.gob-edit-mode) [data-gob-edit-id="hero-home-subtitle"],
body:not(.gob-edit-mode) .gob-hero-booking-btn,
body:not(.gob-edit-mode) .gob-hero-divider,
body:not(.gob-edit-mode) [data-gob-edit-id="hero-home-tagline"] {
  transform: none !important;
}

/* Hero Content Layer */
main > section:first-of-type:has(video) > div.relative.z-10,
main > section:first-of-type:has(.gob-hero-logo-wrap) > div.relative.z-10 {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: clamp(1rem, 4vw, 2.5rem) !important;
  padding-right: clamp(1rem, 4vw, 2.5rem) !important;
  padding-top: calc(max(env(safe-area-inset-top, 0px), 4.5rem) + clamp(0.5rem, 2vh, 1.5rem)) !important;
  padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 1rem) + clamp(0.75rem, 2.5vh, 2rem)) !important;
  margin: 0 auto !important;
}

/* 1. FELSŐ TARTALMI RÉSZ: THE SALON BUDAPEST Logo */
.gob-hero-logo-wrap {
  order: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: clamp(260px, 60vw, 846px) !important;
  max-width: min(846px, 92vw) !important;
  max-height: clamp(80px, 24vh, 220px) !important;
  height: auto !important;
  box-sizing: border-box !important;
  container-type: inline-size !important;
}

svg.gob-hero-logo,
.gob-hero-logo {
  width: 100% !important;
  height: auto !important;
  max-height: clamp(80px, 24vh, 220px) !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(rgba(254, 242, 232, 0.70) 0px 0px clamp(2px, calc(100cqw * 0.00827), 7px))
          drop-shadow(rgba(254, 242, 232, 0.82) 0px 0px clamp(5px, calc(100cqw * 0.02009), 17px))
          drop-shadow(rgba(254, 242, 232, 0.67) 0px 0px clamp(11px, calc(100cqw * 0.04610), 39px))
          drop-shadow(rgba(254, 242, 232, 0.44) 0px 0px clamp(20px, calc(100cqw * 0.08156), 69px))
          drop-shadow(rgba(254, 242, 232, 0.27) 0px 0px clamp(31px, calc(100cqw * 0.12766), 108px)) !important;
}

/* 2. KÖZÉPSŐ TARTALMI CSOPORT: Fodrászat & Hajápolás (Glow-izolált rétegrend) */
[data-gob-edit-id="hero-home-subtitle"] {
  order: 2 !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(0.5rem, 1.6vh, 1.25rem) !important;
  margin-bottom: 0 !important;
  width: auto !important;
  max-width: min(90vw, 560px) !important;
  font-size: clamp(1.25rem, 2.6vw, 2.375rem) !important;
  line-height: 1.35 !important;
  font-style: italic !important;
  text-align: center !important;
  box-sizing: border-box !important;
  --hero-glow-blur-1: 0.1842em;
  --hero-glow-blur-2: 0.4474em;
  --hero-glow-blur-3: 1.0263em;
  --hero-glow-blur-4: 1.8158em;
  --hero-glow-blur-5: 2.8421em;
  text-shadow:
    0 0 var(--hero-glow-blur-1, 0.1842em) rgba(254, 242, 232, 0.71),
    0 0 var(--hero-glow-blur-2, 0.4474em) rgba(254, 242, 232, 0.83),
    0 0 var(--hero-glow-blur-3, 1.0263em) rgba(254, 242, 232, 0.68),
    0 0 var(--hero-glow-blur-4, 1.8158em) rgba(254, 242, 232, 0.45),
    0 0 var(--hero-glow-blur-5, 2.8421em) rgba(254, 242, 232, 0.28) !important;
  filter: none !important;
}

/* Hero Scroll Indicator styles defined in Section 15 */

/* 3. FŐ MŰVELETI GOMB: IDŐPONTFOGLALÁS (mindig az alcím alatt) */
.gob-hero-booking-btn {
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  background-color: #282828 !important;
  color: #ffffff !important;
  border: 1px solid rgba(198, 171, 148, 0.35) !important;
  border-radius: 10px !important;
  padding: clamp(0.75rem, 1.5vh, 0.85rem) clamp(1.5rem, 3.5vw, 2.25rem) !important;
  font-family: var(--gob-font-sans, system-ui, -apple-system, sans-serif) !important;
  font-size: clamp(0.75rem, 1.8vw, 0.875rem) !important;
  font-weight: 700 !important;
  letter-spacing: clamp(0.08em, 0.4vw, 0.14em) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
  position: relative !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(1rem, 2.6vh, 2.25rem) !important;
  margin-bottom: 0 !important;
  width: auto !important;
  min-width: min(280px, 86vw) !important;
  max-width: min(382px, 92vw) !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

/* 4. Finom elválasztó vonal */
.gob-hero-divider {
  order: 4 !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: clamp(0.75rem, 2vh, 1.5rem) !important;
  margin-bottom: clamp(0.5rem, 1.2vh, 0.75rem) !important;
  width: clamp(160px, 32vw, 384px) !important;
  max-width: 80vw !important;
  height: 1px !important;
  background-color: rgba(125, 90, 60, 0.4) !important;
  border: none !important;
}

/* 5. ALSÓ SZLOGEN: SZAKÉRTELEM · STÍLUS · TERMÉSZETES SZÉPSÉG */
[data-gob-edit-id="hero-home-tagline"] {
  order: 5 !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: auto !important;
  max-width: 90vw !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: clamp(0.55rem, 1.8vw, 0.875rem) !important;
  letter-spacing: clamp(0.06em, 0.5vw, 0.24em) !important;
  height: auto !important;
  min-height: auto !important;
  box-sizing: border-box !important;
  --hero-glow-blur-1: 0.5000em;
  --hero-glow-blur-2: 1.2143em;
  --hero-glow-blur-3: 2.7857em;
  --hero-glow-blur-4: 4.9286em;
  --hero-glow-blur-5: 7.7143em;
  text-shadow:
    0 0 var(--hero-glow-blur-1, 0.5000em) rgba(254, 242, 232, 0.83),
    0 0 var(--hero-glow-blur-2, 1.2143em) rgba(254, 242, 232, 0.90),
    0 0 var(--hero-glow-blur-3, 2.7857em) rgba(254, 242, 232, 0.74),
    0 0 var(--hero-glow-blur-4, 4.9286em) rgba(254, 242, 232, 0.49),
    0 0 var(--hero-glow-blur-5, 7.7143em) rgba(254, 242, 232, 0.30) !important;
  filter: none !important;
}

/* Desktop Baseline (>= 1024px & height >= 700px) Convergence */
@media (min-width: 1024px) and (min-height: 700px) {
  main > section:first-of-type:has(video),
  main > section:first-of-type:has(.gob-hero-logo-wrap) {
    height: 100vh !important;
    height: 100svh !important;
  }
  .gob-hero-logo-wrap {
    width: 846px !important;
    max-width: 100% !important;
  }
  [data-gob-edit-id="hero-home-subtitle"] {
    font-size: 38px !important;
    width: 451px !important;
  }
  .gob-hero-booking-btn {
    width: 382px !important;
    padding: 0.85rem 2.25rem !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.14em !important;
  }
  [data-gob-edit-id="hero-home-tagline"] {
    font-size: 14px !important;
    letter-spacing: 0.24em !important;
    width: 454px !important;
  }
}

/* Ultra-short viewports & Landscape mobile adjustments (height <= 540px) */
@media (max-height: 540px) {
  main > section:first-of-type:has(video) > div.relative.z-10,
  main > section:first-of-type:has(.gob-hero-logo-wrap) > div.relative.z-10 {
    padding-top: calc(max(env(safe-area-inset-top, 0px), 3.5rem) + 0.5rem) !important;
    padding-bottom: 1rem !important;
  }
  .gob-hero-logo-wrap {
    max-height: clamp(60px, 20vh, 110px) !important;
  }
  svg.gob-hero-logo {
    max-height: clamp(60px, 20vh, 110px) !important;
  }
  [data-gob-edit-id="hero-home-subtitle"] {
    font-size: clamp(1rem, 3.8vh, 1.4rem) !important;
    margin-top: 0.35rem !important;
  }
  .gob-hero-booking-btn {
    margin-top: 0.65rem !important;
    padding: 0.5rem 1.5rem !important;
    min-height: 42px !important;
  }
  .gob-hero-divider {
    margin-top: 0.5rem !important;
    margin-bottom: 0.35rem !important;
  }
  [data-gob-edit-id="hero-home-tagline"] {
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
  }
}

.gob-hero-booking-btn:hover {
  background-color: #7d5a3c !important;
  border-color: rgba(254, 242, 232, 0.5) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important;
}

.gob-hero-booking-btn:active {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
}

.gob-hero-booking-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
  width: 17px !important;
  height: 17px !important;
}

footer p.font-display,
footer p[data-gob-edit-id*="footer-brand"] {
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: clamp(1.1rem, 4.2vw, 1.5rem) !important;
  letter-spacing: clamp(0.08em, 1.2vw, 0.18em) !important;
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  margin-bottom: 0.75rem !important;
}

header[data-nav] .order-2 {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  gap: 0.55rem !important;
}

header[data-nav] .order-2 > button[data-nav-toggle] {
  order: 1 !important;
}

header[data-nav] .order-2 > .gob-header-actions {
  order: 2 !important;
}

header[data-nav] .order-2 > nav[aria-label="Nyelvválasztó"],
header[data-nav] .order-2 > nav[aria-label="Language selector"] {
  order: 10 !important;
  margin-left: 0.25rem;
  flex-shrink: 0;
}

header[data-nav] #nav-panel {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

header[data-nav] #nav-panel nav {
  width: 100%;
  display: flex;
  justify-content: center;
}

header[data-nav] #nav-panel nav ul {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

header[data-nav] #nav-panel nav ul li a {
  transition: color 0.2s ease, font-weight 0.2s ease, opacity 0.2s ease;
}

/* Active Top Header Navigation Item (Desktop & Mobile) - Bold & Prominent Cream */
header[data-nav] #nav-panel nav ul li a[aria-current="page"],
header[data-nav] #nav-panel nav ul li a.font-bold,
header[data-nav] #nav-panel nav ul li a.is-active,
header[data-nav] #nav-panel nav ul li a.active {
  font-weight: 700 !important;
  color: var(--gob-cream, #282828) !important;
  opacity: 1 !important;
}

/* Inactive Top Header Navigation Item - Regular Weight & Subtle Muted */
header[data-nav] #nav-panel nav ul li a:not([aria-current="page"]):not(.is-active):not(.active):not(.font-bold) {
  font-weight: 400 !important;
  color: var(--gob-muted, #5a4d42) !important;
  opacity: 0.85;
}

header[data-nav] #nav-panel nav ul li a:not([aria-current="page"]):not(.is-active):not(.active):not(.font-bold):hover {
  color: var(--gob-cream, #282828) !important;
  opacity: 1 !important;
}

@media (min-width: 64rem) {
  header[data-nav] > .container-page {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: clamp(0.75rem, 1.4vw, 1.75rem) !important;
  }

  header[data-nav] > .container-page > a:first-child {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  header[data-nav] #nav-panel {
    grid-column: 2 !important;
    order: 2 !important;
    width: auto !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  header[data-nav] #nav-panel nav ul {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(1rem, 1.8vw, 2.25rem) !important;
  }

  header[data-nav] #nav-panel nav ul li a {
    white-space: nowrap;
    text-align: center;
  }

  header[data-nav] .order-2 {
    grid-column: 3 !important;
    order: 3 !important;
    justify-self: end !important;
    margin-left: auto !important;
  }
}

/* Header Quick Actions (My Bookings & Admin) */
.gob-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.gob-nav-BookingBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #b5977e;
  background: rgba(254, 242, 232, 0.85);
  color: var(--gob-cream);
  border-radius: 9999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-nav-BookingBtn:hover {
  border-color: #282828;
  background: #282828;
  color: #fef2e8;
}

.gob-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #282828;
  color: #fef2e8;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
}

.gob-nav-BookingBtn:hover .gob-badge-count {
  background: #dfc8b5;
  color: #282828;
}

/* ============================================================================
   USER ACCOUNT DROPDOWN (3-LINE HAMBURGER MENU)
   ============================================================================ */
.gob-user-menu-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  order: 20 !important;
  margin-left: 0.35rem !important;
  z-index: 1000 !important;
}

.gob-user-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  border-radius: 9999px !important;
  background: #282828 !important;
  border: 1px solid #b5977e !important;
  color: #fef2e8 !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 0 !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.gob-user-menu-btn:hover {
  background: #7d5a3c !important;
  border-color: #dfc8b5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.gob-user-menu-btn:focus-visible {
  outline: 2px solid #dfc8b5 !important;
  outline-offset: 2px !important;
}

.gob-user-menu-btn.is-active {
  background: #7d5a3c !important;
  border-color: #c6ab94 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(125, 90, 60, 0.4) !important;
}

.gob-user-menu-icon {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
  transition: stroke 0.15s ease !important;
}

.gob-user-menu-indicator {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  border: 2px solid #282828 !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.85) !important;
  pointer-events: none !important;
}

.gob-user-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 270px !important;
  max-width: 92vw !important;
  background: #1f1d1b !important;
  border: 1px solid rgba(198, 171, 148, 0.38) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  padding: 0 !important;
  z-index: 100000 !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.18s;
  pointer-events: none;
  overflow: hidden !important;
}

.gob-user-dropdown.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.gob-user-dropdown-header {
  padding: 0.85rem 1.1rem 0.75rem !important;
  border-bottom: 1px solid rgba(198, 171, 148, 0.2) !important;
  background: rgba(45, 38, 32, 0.55) !important;
}

.gob-user-dropdown-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

.gob-user-dropdown-name {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #fef2e8 !important;
  letter-spacing: 0.02em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gob-user-dropdown-email {
  font-size: 0.75rem !important;
  color: #b5977e !important;
  margin-top: 0.2rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gob-user-dropdown-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.16rem 0.5rem !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
}

.gob-user-dropdown-badge.badge-munkatars {
  background: rgba(181, 151, 126, 0.25) !important;
  color: #dfc8b5 !important;
  border: 1px solid rgba(181, 151, 126, 0.5) !important;
}

.gob-user-dropdown-badge.badge-admin {
  background: #7d5a3c !important;
  color: #fef2e8 !important;
  border: 1px solid #b5977e !important;
}

.gob-user-dropdown-badge.badge-guest {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #dfc8b5 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.gob-user-dropdown-body {
  padding: 0.35rem 0 !important;
}

.gob-user-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.7rem 1.1rem !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #fef2e8 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  box-sizing: border-box !important;
}

.gob-user-dropdown-item:hover,
.gob-user-dropdown-item:focus-visible {
  background: rgba(181, 151, 126, 0.2) !important;
  color: #dfc8b5 !important;
  outline: none !important;
}

.gob-user-dropdown-item svg {
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
  transition: opacity 0.15s ease !important;
}

.gob-user-dropdown-item:hover svg {
  opacity: 1 !important;
}

.gob-user-dropdown-item .item-text {
  flex: 1 1 auto !important;
}

.gob-user-dropdown-item .gob-badge-count {
  margin-left: auto !important;
}

.gob-user-dropdown-divider {
  height: 1px !important;
  margin: 0.35rem 0 !important;
  background: rgba(198, 171, 148, 0.18) !important;
}

.gob-user-dropdown-item.item-danger {
  color: #fca5a5 !important;
}

.gob-user-dropdown-item.item-danger:hover,
.gob-user-dropdown-item.item-danger:focus-visible {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fecaca !important;
}

/* Language Switcher inside User Dropdown */
.gob-user-dropdown-lang-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 1.1rem !important;
  gap: 0.75rem !important;
}

.gob-user-dropdown-lang-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #dfc8b5 !important;
}

.gob-user-dropdown-lang-label svg {
  stroke: #b5977e !important;
  flex-shrink: 0 !important;
}

.gob-user-dropdown-lang-pills {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(198, 171, 148, 0.3) !important;
  border-radius: 9999px !important;
  padding: 2px !important;
  gap: 2px !important;
}

.gob-lang-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.28rem 0.8rem !important;
  min-width: 2.2rem !important;
  text-align: center !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 9999px !important;
  color: #b5977e !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.gob-lang-pill-flag {
  display: none !important;
}

.gob-lang-pill:hover {
  color: #fef2e8 !important;
  background: rgba(181, 151, 126, 0.2) !important;
}

.gob-lang-pill.is-active {
  background: #b5977e !important;
  color: #282828 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   Language Rocker Switch (Billenőkapcsoló)
   ========================================================================== */
.gob-lang-rocker {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 84px !important;
  height: 30px !important;
  padding: 2px !important;
  background: rgba(18, 16, 14, 0.85) !important;
  border: 1px solid rgba(198, 171, 148, 0.35) !important;
  border-radius: 9999px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(255, 255, 255, 0.05) !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.gob-lang-rocker:hover {
  border-color: rgba(198, 171, 148, 0.65) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 8px rgba(181, 151, 126, 0.2) !important;
}

.gob-lang-rocker:focus-visible {
  outline: 2px solid #b5977e !important;
  outline-offset: 2px !important;
}

/* The physical sliding rocker thumb */
.gob-lang-rocker-thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: calc(50% - 2px) !important;
  height: calc(100% - 4px) !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #c5a687 0%, #b5977e 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
  will-change: transform !important;
}

.gob-lang-rocker.is-hu .gob-lang-rocker-thumb {
  transform: translateX(0) !important;
}

.gob-lang-rocker.is-en .gob-lang-rocker-thumb {
  transform: translateX(100%) !important;
}

/* The text labels inside the rocker switch */
.gob-lang-rocker-btn {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  text-align: center !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 9999px !important;
  color: #a38c7b !important;
  text-decoration: none !important;
  transition: color 0.25s ease, font-weight 0.25s ease, text-shadow 0.25s ease !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.gob-lang-rocker.is-hu .gob-lang-hu {
  color: #1c1815 !important;
  font-weight: 800 !important;
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.3) !important;
}

.gob-lang-rocker.is-en .gob-lang-en {
  color: #1c1815 !important;
  font-weight: 800 !important;
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.3) !important;
}

.gob-lang-rocker.is-hu .gob-lang-en:hover,
.gob-lang-rocker.is-en .gob-lang-hu:hover {
  color: #fef2e8 !important;
}

/* Hide standalone language switcher in header so it lives cleanly inside the 3-line menu */
header[data-nav] nav[aria-label="Nyelvválasztó"],
header[data-nav] nav[aria-label="Language selector"] {
  display: none !important;
}

/* Interactive Service Cards Enhancement on Pages */
.gob-service-interactive {
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.gob-service-interactive:hover {
  border-color: #7d5a3c !important;
  background-color: rgba(223, 200, 181, 0.38);
}

.gob-service-book-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gob-brass);
  transition: color 0.15s ease, transform 0.15s ease;
}

.gob-service-interactive:hover .gob-service-book-hint {
  color: var(--gob-brass-strong);
  transform: translateX(3px);
}

/* Booking Dialog Modal */
/* Booking Dialog Modal - Premium The Salon Palette */
dialog.gob-booking-dialog {
  width: min(96vw, 76rem);
  max-width: 76rem;
  height: min(90dvh, 52rem);
  min-height: min(90dvh, 52rem);
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  background: #FAF8F5;
  color: #1F1F1F;
  border: 1px solid #E6E0D6;
  border-radius: 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-family: var(--gob-font-sans);
}

dialog.gob-booking-dialog[open] {
  display: flex;
  flex-direction: column;
}

dialog.gob-sec-lib-dialog:not([open]) {
  display: none !important;
}

dialog.gob-sec-lib-dialog[open] {
  display: flex !important;
}

dialog.gob-booking-dialog::backdrop {
  background: rgba(30, 25, 20, 0.58);
  backdrop-filter: blur(8px);
}

html:has(dialog.gob-booking-dialog[open]) {
  overflow: hidden;
}

/* Modal Edit Mode Bar */
.gob-modal-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.65rem 1.5rem;
  background: #24211D;
  color: #FAF8F5;
  border-bottom: 2px solid #C59B6D;
  font-family: var(--gob-font-sans);
  font-size: 0.82rem;
  flex-shrink: 0;
  z-index: 20;
}

.gob-meb-badge-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gob-meb-badge {
  background: #C59B6D;
  color: #1A1815;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.gob-meb-hint {
  color: #D6CEC3;
  font-size: 0.8rem;
}

.gob-meb-steps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.gob-meb-steps-label {
  color: #A89F91;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.2rem;
}

.gob-meb-step-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #E8E2D7;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-meb-step-btn:hover {
  background: rgba(197, 155, 109, 0.25);
  border-color: #C59B6D;
  color: #FFF;
}

.gob-meb-step-btn.active {
  background: #C59B6D;
  border-color: #C59B6D;
  color: #1A1815;
  font-weight: 700;
}

.gob-meb-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gob-meb-btn-save {
  background: #2E7D32;
  color: #FFF;
  border: 1px solid #388E3C;
  border-radius: 6px;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.gob-meb-btn-save:hover {
  background: #1B5E20;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.4);
}

.gob-meb-btn-reset {
  background: transparent;
  color: #C4B5A5;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-meb-btn-reset:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: #DC3545;
  color: #FF8080;
}

/* Edit Mode Outline inside Booking Dialog */
body.gob-edit-mode #gob-booking-dialog [data-gob-modal-edit-id] {
  outline: 1px dashed rgba(197, 155, 109, 0.6);
  outline-offset: 3px;
  cursor: text;
  transition: outline 0.15s ease, background 0.15s ease;
  border-radius: 3px;
}

body.gob-edit-mode #gob-booking-dialog [data-gob-modal-edit-id]:hover {
  outline: 2px dashed #C59B6D;
  background: rgba(197, 155, 109, 0.1);
}

body.gob-edit-mode #gob-booking-dialog [data-gob-modal-edit-id]:focus {
  outline: 2px solid #C59B6D;
  background: rgba(197, 155, 109, 0.12);
}

/* Modal Top Header */
.gob-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 2rem;
  background: #FAF8F5;
  border-bottom: 1px solid #EAE4DA;
  flex-shrink: 0;
}

.gob-modal-brand {
  display: flex;
  align-items: center;
  gap: 0;
}

.gob-brand-logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.gob-brand-logo {
  font-family: var(--gob-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1A1A1A;
}

.gob-brand-city {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: #666666;
  text-align: center;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.gob-brand-divider {
  width: 1px;
  height: 38px;
  background: #DCD5CA;
  margin: 0 1.5rem;
}

.gob-brand-text {
  display: flex;
  flex-direction: column;
}

.gob-brand-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1A1A1A;
  text-transform: uppercase;
  line-height: 1.2;
}

.gob-brand-subtitle {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: #7A756D;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.gob-modal-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gob-header-btn-foglalas {
  background: #242424;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.gob-header-btn-foglalas:hover {
  background: #3A3A3A;
  transform: translateY(-1px);
}

.gob-header-btn-fooldal {
  background: #FFFFFF;
  color: #242424;
  border: 1px solid #DCD5CA;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-header-btn-fooldal:hover {
  border-color: #242424;
  background: #F5F2EC;
}

.gob-header-btn-user {
  background: #FFFFFF;
  color: #242424;
  border: 1px solid #DCD5CA;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s ease;
}

.gob-header-btn-user:hover {
  border-color: #242424;
  background: #F5F2EC;
}

.gob-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #DCD5CA;
  background: #FFFFFF;
  color: #444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.gob-close-btn:hover {
  border-color: #242424;
  background: #242424;
  color: #FFFFFF;
}

/* Stepper Bar */
.gob-stepper-wrap {
  display: flex;
  flex-direction: column;
  background: #FAF8F5;
  border-bottom: 1px solid #EAE4DA;
  padding: 0.85rem 2rem;
  flex-shrink: 0;
}

.gob-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
}

.gob-stepper-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gob-stepper-item.active {
  background: #EDE4D6;
  padding: 0.35rem 1.25rem 0.35rem 0.35rem;
}

.gob-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #DCD5CA;
  color: #777777;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.15s ease;
}

.gob-stepper-item.active .gob-step-circle,
.gob-stepper-item.completed .gob-step-circle {
  background: #242424;
  border-color: #242424;
  color: #FFFFFF;
}

.gob-step-text {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7A756D;
  transition: all 0.15s ease;
}

.gob-stepper-item.active .gob-step-text {
  color: #242424;
  font-weight: 700;
}

.gob-stepper-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gob-stepper-line {
  flex: 1;
  height: 1px;
  background: #DCD5CA;
  margin: 0 1rem;
  max-width: 5rem;
}

/* Modal Body Layout */
.gob-modal-body {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  background: #FAF8F5;
}

@media (min-width: 56rem) {
  .gob-modal-body {
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    overflow: hidden;
  }

  .gob-summary-pane {
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
}

.gob-main-pane {
  padding: 1.5rem 1.75rem;
  overflow-y: auto;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  background: #FAF8F5;
}

.gob-summary-pane {
  background: #FAF8F5;
  padding: 1.5rem 1.75rem 1.5rem 0;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 56rem) {
  .gob-summary-pane {
    padding: 1.5rem;
    border-top: 1px solid #EAE4DA;
  }
}

/* Step 1 Header Bar */
.gob-step-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.gob-step-main-title {
  font-family: var(--gob-font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1F1F1F;
  margin: 0;
  line-height: 1.25;
}

.gob-title-accent {
  color: #9E3A3A;
  font-weight: 700;
}

.gob-step-location-sub {
  font-size: 0.86rem;
  font-weight: 600;
  color: #242424;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.gob-btn-mybookings {
  background: #FFFFFF;
  border: 1px solid #DCD5CA;
  border-radius: 8px;
  padding: 0.55rem 1.15rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #242424;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gob-btn-mybookings:hover {
  border-color: #242424;
  background: #F5F2EC;
}

.gob-step-desc {
  font-size: 0.83rem;
  color: #555555;
  line-height: 1.5;
  margin: 0.75rem 0 1.2rem 0;
}

/* Category & Language Filter Rows */
.gob-filter-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.gob-filter-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #333333;
  text-transform: uppercase;
  min-width: 85px;
  flex-shrink: 0;
}

.gob-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gob-pill-btn {
  background: #FFFFFF;
  border: 1px solid #DCD5CA;
  border-radius: 999px;
  padding: 0.38rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #242424;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gob-pill-btn:hover {
  border-color: #777777;
}

.gob-pill-btn.active {
  background: #242424;
  border-color: #242424;
  color: #FFFFFF;
}

/* Staff Cards List */
.gob-staff-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.gob-staff-tile,
.gob-staff-card {
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  overflow: hidden;
}

.gob-staff-tile:hover,
.gob-staff-card:hover {
  border-color: #C8BFB2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.gob-staff-tile.selected,
.gob-staff-card.selected {
  border: 2px solid var(--gob-brass, #7d5a3c);
  background: #FAF8F5;
  box-shadow: 0 4px 16px rgba(125, 90, 60, 0.12);
}

/* Compact Single-Row Tile Header */
.gob-staff-tile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  transition: background-color 0.15s ease;
}

.gob-staff-tile-header:focus-visible {
  outline: 2px solid var(--gob-brass, #7d5a3c);
  outline-offset: -2px;
}

.gob-staff-tile:not(.selected) .gob-staff-tile-header:hover {
  background: rgba(247, 245, 240, 0.6);
}

/* Avatar - Compact 52px */
.gob-staff-tile-avatar-wrap,
.gob-staff-card-avatar-wrap {
  flex-shrink: 0;
}

.gob-staff-tile-avatar,
.gob-staff-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #EAE5DC;
  display: block;
}

.gob-staff-tile-avatar-fallback,
.gob-staff-avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #EDE4D6;
  color: #242424;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  border: 1px solid #EAE5DC;
  flex-shrink: 0;
}

/* Middle Info: Name, Role, Languages */
.gob-staff-tile-info,
.gob-staff-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gob-staff-tile-title-row,
.gob-staff-card-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.gob-staff-tile-name,
.gob-staff-card-name {
  font-family: var(--gob-font-sans);
  font-size: 1.06rem;
  font-weight: 700;
  color: #1F1F1F;
  margin: 0;
  line-height: 1.25;
}

.gob-staff-tile-role,
.gob-staff-card-badge {
  background: #EFECE6;
  color: #3A3A3A;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gob-staff-tile-langs,
.gob-staff-card-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.gob-staff-lang-tag {
  background: #F7F5F0;
  border: 1px solid #EAE5DC;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #242424;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.gob-lang-flag-icon {
  display: inline-block;
  vertical-align: middle;
  border-radius: 1px;
}

/* Right Side: Circular Radio Selector */
.gob-staff-tile-select-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.5rem;
}

.gob-staff-radio {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #D1C7BD;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gob-staff-tile-header:hover .gob-staff-radio:not(.checked) {
  border-color: var(--gob-brass, #7d5a3c);
  background: #FAF8F5;
}

.gob-staff-radio.checked {
  background: var(--gob-brass, #7d5a3c);
  border-color: var(--gob-brass, #7d5a3c);
  box-shadow: 0 2px 8px rgba(125, 90, 60, 0.35);
}

.gob-staff-radio-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gob-staff-radio.checked .gob-staff-radio-inner {
  opacity: 1;
  transform: scale(1);
}

.gob-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -2px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.gob-spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: rgba(125, 90, 60, 0.12);
  color: var(--gob-brass, #7d5a3c);
  flex-shrink: 0;
}

.gob-spec-icon .gob-svg-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.gob-msg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.5rem;
  background: rgba(125, 90, 60, 0.12);
  color: var(--gob-brass, #7d5a3c);
  flex-shrink: 0;
}

.gob-msg-icon .gob-svg-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.loc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gob-brass, #7d5a3c);
  vertical-align: -2px;
  margin-right: 0.25rem;
}

.loc-icon .gob-svg-icon {
  width: 15px;
  height: 15px;
}

/* Expanded Accordion Body */
.gob-staff-tile-body {
  padding: 0 1.15rem 1.15rem 1.15rem;
  animation: gobAccordionFade 0.22s ease-out;
}

@keyframes gobAccordionFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gob-staff-tile-divider {
  height: 1px;
  background: #EAE5DC;
  margin: 0.15rem 0 0.85rem 0;
}

.gob-staff-expanded-bio {
  font-size: 0.86rem;
  color: #3F3F3F;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 8px;
  padding: 0.75rem 0.95rem;
}

.gob-staff-expanded-specialties {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(125, 90, 60, 0.05);
  border: 1px solid rgba(125, 90, 60, 0.18);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0;
}

.gob-staff-expanded-specialties .gob-spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
}

.gob-spec-logo-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  border: none;
  background: transparent;
}

.gob-spec-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.gob-spec-label {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gob-brass, #7d5a3c);
  font-weight: 700;
  line-height: 1.2;
}

.gob-spec-text {
  font-size: 0.82rem;
  color: #282828;
  line-height: 1.4;
}

/* Mobile Responsiveness for Staff Tiles */
@media (max-width: 640px) {
  .gob-staff-tile-header {
    padding: 0.75rem 0.85rem;
    gap: 0.75rem;
  }

  .gob-staff-tile-avatar,
  .gob-staff-card-avatar {
    width: 46px;
    height: 46px;
  }

  .gob-staff-tile-avatar-fallback,
  .gob-staff-avatar-fallback {
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
  }

  .gob-staff-tile-title-row,
  .gob-staff-card-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .gob-staff-tile-name,
  .gob-staff-card-name {
    font-size: 0.98rem;
  }

  .gob-staff-tile-role,
  .gob-staff-card-badge {
    font-size: 0.64rem;
  }

  .gob-staff-tile-body {
    padding: 0 0.85rem 0.85rem 0.85rem;
  }
}

/* ============================================================================
   STEP 2 - SZOLGÁLTATÁS KIVÁLASZTÁSA UI / UX REFACTOR
   ============================================================================ */

/* Selected Staff Member Compact Bar */
.gob-selected-staff-card {
  background: #FAF5ED;
  border: 1px solid #EAE5DC;
  border-radius: 12px;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.gob-selected-staff-left {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
  flex: 1;
}

.gob-selected-staff-avatar {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #EAE5DC;
  flex-shrink: 0;
}

.gob-selected-staff-avatar-fallback {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: #EDE4D6;
  color: #242424;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  border: 1px solid #EAE5DC;
  flex-shrink: 0;
}

.gob-selected-staff-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.gob-selected-staff-label {
  font-size: 0.72rem;
  color: #7A7065;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.gob-selected-staff-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.gob-selected-staff-name {
  font-family: var(--gob-font-sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: #1F1F1F;
  margin: 0;
  line-height: 1.25;
}

.gob-selected-staff-badge {
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4A4035;
  white-space: nowrap;
}

.gob-selected-staff-change-btn {
  background: #FFFFFF;
  border: 1px solid #D6CEBE;
  color: #242424;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.gob-selected-staff-change-btn:hover {
  background: #242424;
  color: #FFFFFF;
  border-color: #242424;
}

/* Service Card (Visual Parity with Step 1 Staff Cards) */
.gob-service-card {
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gob-service-card:hover {
  border-color: #C8BFB2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.gob-service-card:focus-visible {
  outline: 2px solid var(--gob-brass, #7d5a3c);
  outline-offset: -2px;
}

.gob-service-card.selected {
  border: 2px solid var(--gob-brass, #7d5a3c);
  background: #FAF8F5;
  box-shadow: 0 4px 16px rgba(125, 90, 60, 0.12);
}

.gob-service-card-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  width: 100%;
  box-sizing: border-box;
}

.gob-service-thumb-wrap {
  flex-shrink: 0;
  margin-top: 2px;
}

.gob-service-thumb {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #EAE5DC;
  display: block;
}

.gob-service-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.gob-service-title {
  font-family: var(--gob-font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1F1F1F;
  margin: 0;
  line-height: 1.3;
}

.gob-service-meta-dur {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #555555;
  font-weight: 600;
  margin-top: 0.1rem;
}

.gob-service-desc {
  font-size: 0.81rem;
  color: #63564B;
  line-height: 1.45;
  margin: 0.2rem 0 0 0;
}

.gob-service-action-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  padding-left: 0.5rem;
  margin-top: 1px;
}

.gob-service-price-tag {
  font-family: var(--gob-font-sans);
  font-size: 1.08rem;
  font-weight: 700;
  color: #1F1F1F;
  white-space: nowrap;
}

.gob-service-action-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #D1C7BD;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5A4D42;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.gob-service-card:hover .gob-service-action-circle:not(.checked) {
  border-color: var(--gob-brass, #7d5a3c);
  background: #FAF8F5;
  color: var(--gob-brass, #7d5a3c);
}

.gob-service-action-circle.checked {
  background: var(--gob-brass, #7d5a3c);
  border-color: var(--gob-brass, #7d5a3c);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(125, 90, 60, 0.35);
}

/* Hair length breakdown section inside card */
.gob-hair-length-section {
  padding: 0 1.15rem 0.95rem 1.15rem;
  border-top: 1px solid #EAE5DC;
  margin-top: 0.2rem;
  padding-top: 0.75rem;
  animation: gobAccordionFade 0.2s ease-out;
}

.gob-hl-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7A7065;
  margin-bottom: 0.5rem;
}

.gob-hl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}

.gob-hl-pill {
  background: #FFFFFF;
  border: 1px solid #E6E0D6;
  border-radius: 8px;
  padding: 0.52rem 0.65rem;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  overflow: hidden;
}

.gob-hl-pill:not(.is-stacked) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
}

.gob-hl-pill:not(.is-stacked) .gob-hl-pill-left {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.gob-hl-pill:not(.is-stacked) .gob-hl-label {
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.25;
}

.gob-hl-pill:not(.is-stacked) .gob-hl-val {
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.25;
}

.gob-hl-pill.is-stacked {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 0.5rem;
  row-gap: 0.16rem;
  align-items: center;
  align-content: center;
  justify-content: stretch;
}

.gob-hl-pill.is-stacked .gob-hl-pill-left {
  display: contents;
}

.gob-hl-pill.is-stacked .gob-hl-radio {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.gob-hl-pill.is-stacked .gob-hl-label {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.22;
  text-align: left;
}

.gob-hl-pill.is-stacked .gob-hl-val {
  grid-column: 2;
  grid-row: 2;
  white-space: nowrap;
  line-height: 1.22;
  text-align: left;
}

.gob-hl-pill:hover {
  background: #FAF8F5;
  border-color: #6D4C33;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(109, 76, 51, 0.08);
}

.gob-hl-pill.selected {
  background: #FAF5ED;
  border: 1.5px solid #6D4C33;
  box-shadow: 0 2px 8px rgba(109, 76, 51, 0.12);
}

.gob-hl-pill-left {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.gob-hl-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #C5B8A8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s ease;
  background: #FFFFFF;
  box-sizing: border-box;
  color: #FFFFFF;
}

.gob-hl-pill:hover .gob-hl-radio:not(.checked) {
  border-color: #6D4C33;
}

.gob-hl-pill.selected .gob-hl-radio {
  border-color: #6D4C33;
  background: #6D4C33;
  box-shadow: 0 1px 4px rgba(109, 76, 51, 0.25);
}

.gob-hl-radio svg {
  display: block;
}

.gob-hl-label {
  color: #4A4035;
  font-weight: 600;
}

.gob-hl-pill.selected .gob-hl-label {
  color: #1F1F1F;
  font-weight: 700;
}

.gob-hl-val {
  font-weight: 700;
  color: #1F1F1F;
  white-space: nowrap;
}

.gob-hl-pill.selected .gob-hl-val {
  color: #6D4C33;
}

.gob-summary-svc-variant-badge {
  font-size: 0.72rem;
  color: #6D4C33;
  background: #FAF5ED;
  border: 1px solid #EAE5DC;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  display: inline-block;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  width: fit-content;
  font-weight: 600;
}

@media (max-width: 640px) {
  .gob-selected-staff-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
  }
  .gob-selected-staff-change-btn {
    align-self: flex-end;
  }
  .gob-service-card-main {
    padding: 0.75rem 0.85rem;
    gap: 0.75rem;
  }
  .gob-service-thumb {
    width: 50px;
    height: 50px;
  }
  .gob-service-title {
    font-size: 0.96rem;
  }
  .gob-service-price-tag {
    font-size: 0.98rem;
  }
  .gob-hl-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================================
   STEP 3 - IDŐPONT KIVÁLASZTÁSA UI / UX REFACTOR (MATCHING SCREENSHOT)
   ============================================================================ */

/* Selected Services Compact Box */
.gob-selected-services-box {
  background: #FAF5ED;
  border: 1px solid #EAE5DC;
  border-radius: 12px;
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.15rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.gob-ssb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.gob-ssb-title {
  font-family: var(--gob-font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: #1F1F1F;
}

.gob-ssb-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #554A3F;
}

.gob-ssb-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gob-ssb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gob-ssb-pill {
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #282828;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* ============================================================================
   STEP 3: INTELLIGENT CALENDAR & APPOINTMENT PICKER (PREMIUM UI/UX)
   ============================================================================ */

/* Main Container Wrappers */
.gob-cal-view-wrap,
.gob-slots-view-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 100%;
  box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   VIEW A: 7-DAY CALENDAR VIEW
   ---------------------------------------------------------------------------- */

/* Compact Full-Width Week Navigation Bar */
.gob-cal-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

.gob-cwn-left {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.gob-cwn-btn {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.5rem;
  border: 1px solid #EAE5DC;
  background: #FAF5ED;
  color: #4A3E35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.gob-cwn-btn:hover:not(:disabled) {
  background: #FFFFFF;
  border-color: #6D4C33;
  color: #6D4C33;
}

.gob-cwn-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #F4EFEA;
}

.gob-cwn-range {
  font-family: var(--gob-font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: #1F1F1F;
  letter-spacing: -0.01em;
}

.gob-cwn-center {
  display: inline-flex;
  align-items: center;
}

.gob-cwn-week-indicator {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7A7065;
  background: #FAF5ED;
  border: 1px solid #EAE5DC;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.gob-cwn-right {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.gob-cwn-today-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6D4C33;
  background: #FAF5ED;
  border: 1px solid #D9CEBF;
  padding: 0.35rem 0.65rem;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-cwn-today-btn:hover {
  background: #FFFFFF;
  border-color: #6D4C33;
}

/* 4x5 Days Grid (20 days total: 4 rows of 5 columns, perfectly filling the space) */
.gob-cal-days-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(4.85rem, 1fr));
  gap: 0.65rem;
  width: 100%;
  flex: 1 1 auto;
}

@media (max-width: 55.99rem) {
  .gob-cal-days-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 35.99rem) {
  .gob-cal-days-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

/* Day Card Styling - Generously sized for 4x5 grid to fill the space */
.gob-cal-day-card {
  height: 100%;
  min-height: 4.85rem;
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 0.75rem;
  padding: 0.65rem 0.5rem 0.55rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  width: 100%;
  box-sizing: border-box;
}

.gob-cal-day-card:hover:not(:disabled):not(.selected) {
  background: #FAF8F5;
  border-color: #6D4C33;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(109, 76, 51, 0.08);
}

.gob-cal-day-card.selected {
  background: #FAF5ED !important;
  border: 2px solid #6D4C33 !important;
  box-shadow: 0 4px 12px rgba(109, 76, 51, 0.18) !important;
}

.gob-cdc-name {
  font-family: var(--gob-font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1F1F1F;
  text-transform: uppercase;
  line-height: 1.15;
}

.gob-cdc-date {
  font-size: 0.95rem;
  font-weight: 700;
  color: #3D352E;
  line-height: 1.15;
}

.gob-cdc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.gob-cdc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gob-cdc-dot--available {
  background: #16A34A;
}

.gob-cdc-dot--few {
  background: #D97706;
}

.gob-cdc-dot--none {
  background: #9CA3AF;
}

/* Card Visual States */
.gob-cal-day-available .gob-cdc-label {
  color: #15803D;
}

.gob-cal-day-few .gob-cdc-label {
  color: #B45309;
}

.gob-cal-day-none {
  background: #F4EFEA !important;
  border-color: #E8E2D9 !important;
  cursor: not-allowed !important;
  opacity: 0.75;
}

.gob-cal-day-none .gob-cdc-name {
  color: #7A7065;
}

.gob-cal-day-none .gob-cdc-date {
  color: #7A7065;
}

.gob-cal-day-none .gob-cdc-label {
  color: #8C827A;
}

/* Legend Bar */
.gob-cal-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem 0 1rem;
  margin-top: auto;
  border-top: 1px solid #EFEAE2;
  font-size: 0.78rem;
  color: #7A7065;
}

.gob-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
}

/* Info Callout Card */
.gob-cal-info-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: #FFFFFF;
  border: 1px solid #E8E2D8;
  border-radius: 0.75rem;
  padding: 0.95rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.gob-cal-info-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: #FAF5ED;
  color: #6D4C33;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gob-cal-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.gob-cal-info-title {
  font-family: var(--gob-font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1F1F1F;
}

.gob-cal-info-desc {
  font-size: 0.8rem;
  color: #6E655C;
  margin: 0;
  line-height: 1.4;
}

/* ----------------------------------------------------------------------------
   VIEW B: TIME SLOT VIEW (DÉLELŐTT & DÉLUTÁN KÉT OSZLOPBAN)
   ---------------------------------------------------------------------------- */

/* Compact Top Action Bar */
.gob-slots-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

.gob-stb-left {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.gob-back-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6D4C33;
  background: #FAF5ED;
  border: 1px solid #D9CEBF;
  padding: 0.45rem 0.85rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-back-cal-btn:hover {
  background: #FFFFFF;
  border-color: #6D4C33;
}

.gob-stb-date-title {
  font-family: var(--gob-font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1F1F1F;
  letter-spacing: -0.01em;
}

.gob-stb-right {
  display: inline-flex;
  align-items: center;
}

.gob-slots-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #15803D;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
}

/* Compact Meta Line */
.gob-slots-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.78rem;
  color: #6E655C;
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 0.5rem;
  padding: 0.55rem 0.85rem;
}

.gob-sml-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gob-sml-item svg {
  color: #6D4C33;
  flex-shrink: 0;
}

.gob-sml-bullet {
  color: #CBB8A6;
}

/* Two Columns Layout */
.gob-slots-two-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.15rem;
  width: 100%;
}

@media (max-width: 55.99rem) {
  .gob-slots-two-cols {
    grid-template-columns: 1fr;
  }
}

.gob-slots-col {
  background: #FFFFFF;
  border: 1px solid #EAE5DC;
  border-radius: 0.75rem;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.gob-slots-col-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--gob-font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: #1F1F1F;
  border-bottom: 1px solid #F0EBE3;
  padding-bottom: 0.6rem;
  margin: 0;
}

.gob-slots-col-header svg {
  color: #6D4C33;
  flex-shrink: 0;
}

/* 3-Column Slot Grid per column */
.gob-slots-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
}

@media (max-width: 35.99rem) {
  .gob-slots-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Slot Button */
.gob-slot-btn {
  min-height: 3.35rem;
  padding: 0.45rem 0.3rem;
  border-radius: 0.55rem;
  border: 1px solid #D9CEBF;
  background: #FAF8F5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.gob-slot-btn:hover {
  background: #FFFFFF;
  border-color: #6D4C33;
  box-shadow: 0 2px 6px rgba(109, 76, 51, 0.12);
  transform: translateY(-1px);
}

.gob-slot-btn.selected {
  background: #4A3525 !important;
  border-color: #4A3525 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 8px rgba(74, 53, 37, 0.28) !important;
}

.gob-sb-time {
  font-family: var(--gob-font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  color: #2A2521;
  line-height: 1.1;
}

.gob-sb-dur {
  font-size: 0.68rem;
  color: #7A7065;
  line-height: 1.1;
}

.gob-slot-btn.selected .gob-sb-time {
  color: #FFFFFF !important;
}

.gob-slot-btn.selected .gob-sb-dur {
  color: #E2DBD0 !important;
}

.gob-sb-check {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.68rem;
  color: #FFFFFF;
  font-weight: 800;
}

/* Unavailable / Disabled Slot Buttons in Fresha Redesign */
.gob-slot-btn:disabled,
.gob-slot-btn.is-disabled,
.gob-slot-btn--unavailable {
  background: #F4EFEA !important;
  border: 1px solid #E5DFD7 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  opacity: 0.76;
}

.gob-slot-btn:disabled .gob-sb-time,
.gob-slot-btn.is-disabled .gob-sb-time,
.gob-slot-btn--unavailable .gob-sb-time {
  color: #9C9389 !important;
  text-decoration: line-through !important;
  text-decoration-color: #B2A79C !important;
  text-decoration-thickness: 1.5px !important;
}

.gob-slot-btn:disabled .gob-sb-dur,
.gob-slot-btn.is-disabled .gob-sb-dur,
.gob-slot-btn--unavailable .gob-sb-dur {
  color: #A89F95 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

.gob-slot-btn:disabled:hover,
.gob-slot-btn.is-disabled:hover,
.gob-slot-btn--unavailable:hover {
  background: #F4EFEA !important;
  border-color: #E5DFD7 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Informative notice at top of column when no free slots are available */
.gob-slots-period-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.2rem;
  background: rgba(168, 159, 149, 0.09);
  border: 1px solid rgba(168, 159, 149, 0.2);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: #7A7065;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
}

.gob-slots-period-notice svg {
  flex-shrink: 0;
  color: #8C827A;
}

/* Lunch Break Card */
.gob-lunch-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #FAF5ED;
  border: 1px dashed #D4C4B2;
  border-radius: 0.55rem;
  padding: 0.6rem 0.85rem;
  margin-top: 0.25rem;
  color: #6D4C33;
}

.gob-lunch-card svg {
  flex-shrink: 0;
  color: #6D4C33;
}

.gob-lunch-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.25;
}

.gob-lunch-card-text strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4A3525;
}

.gob-lunch-card-text span {
  font-size: 0.74rem;
  color: #7A7065;
}

/* Waitlist Strip (Bottom of left content) */
.gob-waitlist-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  background: #FAF5ED;
  border: 1px solid #E4DACD;
  border-radius: 0.75rem;
  padding: 0.85rem 1.15rem;
  margin-top: 0.25rem;
  box-sizing: border-box;
}

.gob-ws-left {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.gob-ws-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #D9CEBF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6D4C33;
  flex-shrink: 0;
}

.gob-ws-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gob-ws-title {
  font-family: var(--gob-font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  color: #1F1F1F;
}

.gob-ws-desc {
  font-size: 0.76rem;
  color: #6E655C;
  margin: 0;
  line-height: 1.35;
}

.gob-ws-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4A3525;
  background: #FFFFFF;
  border: 1px solid #C4B5A5;
  border-radius: 0.5rem;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gob-ws-btn:hover {
  background: #4A3525;
  color: #FFFFFF;
  border-color: #4A3525;
}

.gob-ws-btn svg {
  flex-shrink: 0;
}

/* Sidebar Selected Slot Section */
.gob-summary-slot-section {
  padding: 0.75rem 0;
}

.gob-summary-slot-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1F1F1F;
  display: block;
  margin-bottom: 0.45rem;
}

.gob-summary-slot-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gob-summary-slot-line {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: #282828;
  font-weight: 600;
}

.gob-summary-slot-line svg {
  color: #6D4C33;
  flex-shrink: 0;
}

/* Sidebar Summary Card - Luxury Aesthetic matching Booking Modal Background */
.gob-summary-card {
  background: #FAF8F5;
  border: 1px solid #E6E0D6;
  border-radius: 16px;
  padding: 1.35rem 1.35rem 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  color: #1F1F1F;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.gob-summary-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
}

.gob-summary-heading {
  font-family: var(--gob-font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: #1F1F1F;
  margin: 0;
  letter-spacing: -0.01em;
}

.gob-summary-meta-block {
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}

.gob-summary-meta-block.clickable {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.gob-summary-meta-block.clickable:hover {
  opacity: 0.8;
}

.gob-summary-meta-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.gob-summary-icon {
  color: #7d5a3c;
  flex-shrink: 0;
  display: inline-block;
}

.gob-summary-meta-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1F1F1F;
  letter-spacing: -0.01em;
}

.gob-summary-meta-sub {
  margin-left: 1.55rem;
  font-size: 0.8rem;
  color: #63564B;
  margin-top: 0.15rem;
  line-height: 1.35;
}

.gob-summary-slot-section {
  padding: 0.45rem 0;
  flex-shrink: 0;
}

.gob-summary-divider {
  height: 1px;
  background: #E6E0D6;
  margin: 0.65rem 0 0.85rem 0;
  flex-shrink: 0;
}

.gob-summary-services-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.gob-summary-services-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}

.gob-summary-services-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1F1F1F;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.gob-summary-services-total-dur {
  font-size: 0.8rem;
  color: #7A7065;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.2;
}

.gob-summary-services-total-dur strong {
  color: #3D352E;
  font-weight: 600;
}

.gob-summary-services-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: #B5977E #FAF5ED;
}

.gob-summary-services-list::-webkit-scrollbar {
  width: 5px;
}

.gob-summary-services-list::-webkit-scrollbar-track {
  background: #FAF5ED;
  border-radius: 999px;
}

.gob-summary-services-list::-webkit-scrollbar-thumb {
  background: #B5977E;
  border-radius: 999px;
}

.gob-summary-services-list::-webkit-scrollbar-thumb:hover {
  background: #6D4C33;
}

.gob-summary-svc-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #EAE4DA;
}

.gob-summary-svc-card:last-child {
  border-bottom: none;
}

.gob-summary-svc-thumb-wrap {
  flex-shrink: 0;
  margin-top: 2px;
}

.gob-summary-svc-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #EAE5DC;
  display: block;
}

.gob-summary-svc-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gob-summary-svc-name {
  color: #1F1F1F;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.3;
  word-break: break-word;
}

.gob-summary-svc-dur {
  color: #75685D;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.gob-summary-svc-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.gob-summary-svc-price {
  color: #1F1F1F;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.gob-summary-remove-svc-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #E2D9CC;
  background: #FAF8F5;
  color: #8C8276;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
  flex-shrink: 0;
  outline: none;
}

.gob-summary-remove-svc-btn svg {
  display: block;
  pointer-events: none;
}

.gob-summary-remove-svc-btn:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #DC2626;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
}

.gob-summary-empty-text {
  color: #8C8276;
  font-size: 0.84rem;
  padding: 0.5rem 0;
}

.gob-summary-vat-notice {
  font-size: 0.72rem;
  color: #7A7065;
  line-height: 1.35;
  margin: 0.25rem 0 0.75rem 0;
}

.gob-summary-bottom-section {
  margin-top: auto;
  padding-top: 0.45rem;
  flex-shrink: 0;
}

.gob-summary-total-divider {
  height: 1px;
  background: #E6E0D6;
  margin-bottom: 0.75rem;
}

.gob-summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.gob-summary-total-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1F1F1F;
  letter-spacing: -0.01em;
}

.gob-summary-total-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F1F1F;
  letter-spacing: -0.02em;
}

.gob-summary-notice {
  font-size: 0.82rem;
  color: #63564B;
  line-height: 1.45;
  margin: 0 0 1.25rem 0;
}

.gob-summary-notice strong {
  color: #1F1F1F;
}

.gob-summary-cta-btn {
  width: 100%;
  background: #282828;
  color: #FFFFFF;
  border: 1px solid #282828;
  border-radius: 9px;
  padding: 0.95rem 1.25rem;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gob-summary-cta-btn:hover:not(:disabled) {
  background: #3A3A3A;
  border-color: #3A3A3A;
}

.gob-summary-cta-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #A0988E;
  border-color: #A0988E;
}

/* Salon Selector Cards */
.gob-salon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.gob-salon-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid var(--gob-line);
  background: var(--gob-surface);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.gob-salon-card:hover {
  border-color: var(--gob-brass);
}

.gob-salon-card.selected {
  border-color: #282828;
  background: #dfc8b5;
  box-shadow: 0 0 0 1px #282828;
}

.gob-salon-thumb {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 0.375rem;
  object-fit: cover;
  flex-shrink: 0;
}

.gob-salon-info h4 {
  font-family: var(--gob-font-display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gob-cream);
}

.gob-salon-info p {
  font-size: 0.78rem;
  color: var(--gob-muted);
  margin-top: 0.15rem;
}

/* Category Filter Pills */
.gob-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.gob-cat-pill {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--gob-line);
  background: var(--gob-surface);
  color: var(--gob-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-cat-pill:hover {
  color: var(--gob-cream);
  border-color: var(--gob-brass);
}

.gob-cat-pill.active {
  background: #282828;
  color: #fef2e8;
  border-color: #282828;
  font-weight: 600;
}

/* Service List inside Modal */
.gob-service-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.gob-service-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border-radius: 10px;
  border: 1px solid #EAE3D8;
  background: #FAF5ED;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.gob-service-item:hover {
  border-color: #C8BEAF;
  background: #F4EDE2;
  box-shadow: 0 4px 14px rgba(125, 90, 60, 0.06);
}

.gob-service-item.selected {
  border: 2px solid #282828;
  background: #dfc8b5;
  box-shadow: 0 4px 16px rgba(40, 40, 40, 0.1);
}

.gob-service-item.disabled-salon {
  opacity: 0.55;
}

.gob-service-left h4 {
  font-family: var(--gob-font-display);
  font-size: 1.15rem;
  color: #1F1F1F;
  letter-spacing: 0.02em;
}

.gob-service-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #63564B;
}

.gob-service-desc {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: #554A40;
  line-height: 1.45;
}

.gob-service-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.gob-service-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gob-brass);
  white-space: nowrap;
}

.gob-check-circle {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid #DCD3C7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7d5a3c;
  background: #FFFFFF;
  font-weight: 700;
  transition: all 0.15s ease;
}

.gob-service-item:hover .gob-check-circle {
  border-color: #7d5a3c;
  color: #7d5a3c;
  background: #FAF5ED;
}

.gob-service-item.selected .gob-check-circle {
  background: #282828;
  border-color: #282828;
  color: #fef2e8;
}

/* Barber Grid inside Modal */
.gob-barber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 1rem;
}

.gob-barber-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid var(--gob-line);
  background: var(--gob-surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.gob-barber-card:hover {
  border-color: var(--gob-brass);
}

.gob-barber-card.selected {
  border-color: #282828;
  box-shadow: 0 0 0 1px #282828;
  background: #dfc8b5;
}

.gob-barber-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
}

.gob-barber-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--gob-brass);
  flex-shrink: 0;
}

.gob-barber-any-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  border: 1px solid var(--gob-brass);
  background: #dfc8b5;
  color: var(--gob-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.gob-barber-name {
  font-family: var(--gob-font-display);
  font-size: 1.3rem;
  color: var(--gob-cream);
  letter-spacing: 0.04em;
}

.gob-barber-role {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gob-brass);
  margin-top: 0.1rem;
}

.gob-barber-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.gob-lang-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 0.2rem;
  border: 1px solid var(--gob-line);
  color: var(--gob-muted);
  background: var(--gob-ink);
}

.gob-barber-bio {
  padding: 0 1rem 1rem;
  font-size: 0.78rem;
  color: var(--gob-muted);
  line-height: 1.45;
}

/* Date & Time Picker */
.gob-date-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
}

.gob-date-card {
  min-width: 4.4rem;
  padding: 0.65rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--gob-line);
  background: var(--gob-surface);
  color: var(--gob-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-date-card:hover {
  border-color: var(--gob-brass);
}

.gob-date-card.selected {
  background: #282828;
  color: #fef2e8;
  border-color: #282828;
  font-weight: 600;
}

.gob-date-day {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.gob-date-num {
  font-family: var(--gob-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.1;
}

.gob-date-month {
  font-size: 0.65rem;
  opacity: 0.75;
}

.gob-time-group {
  margin-bottom: 1.25rem;
}

.gob-time-group-title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gob-brass);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.gob-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.5rem;
}

.gob-slot-btn {
  padding: 0.6rem 0.4rem;
  border-radius: 0.375rem;
  border: 1px solid var(--gob-line);
  background: var(--gob-surface);
  color: var(--gob-cream);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.gob-slot-btn:hover:not(:disabled) {
  border-color: #282828;
  background: #dfc8b5;
}

.gob-slot-btn.selected {
  background: #282828;
  color: #fef2e8;
  border-color: #282828;
  font-weight: 700;
}

.gob-slot-btn:disabled {
  opacity: 0.32;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Client Form */
.gob-form-grid {
  display: grid;
  gap: 1rem;
}

.gob-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 40rem) {
  .gob-form-grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.gob-field {
  display: flex;
  flex-direction: column;
}

.gob-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.35rem;
  margin-bottom: 0.4rem;
}

.gob-field-header label,
.gob-field-label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gob-muted);
  margin-bottom: 0 !important;
  line-height: 1.2;
}

.gob-field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gob-muted);
  margin-bottom: 0.4rem;
}

.gob-field-badge {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.gob-field-badge--synced {
  color: #1b7f40;
}

.gob-field-badge--warn {
  color: #c92a2a;
}

.gob-input,
.gob-textarea,
.gob-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border-radius: 0.375rem;
  border: 1px solid var(--gob-line);
  background: #fff9f4;
  color: var(--gob-cream);
  font-size: 0.9rem;
  line-height: 1.25;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gob-input,
.gob-select {
  height: 2.75rem;
}

.gob-input:focus,
.gob-textarea:focus,
.gob-select:focus {
  outline: none;
  border-color: #282828;
}

/* Booking ÁSZF & Policy Box */
.gob-booking-aszf-box {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--gob-line);
  background: var(--gob-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.gob-booking-aszf-box.has-error {
  border-color: #c92a2a !important;
  box-shadow: 0 0 0 2px rgba(201, 42, 42, 0.25) !important;
  background: rgba(201, 42, 42, 0.05) !important;
}

.gob-booking-aszf-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  margin-bottom: 0 !important;
  user-select: none;
}

.gob-booking-aszf-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: #282828;
  cursor: pointer;
  flex-shrink: 0;
}

.gob-booking-aszf-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.gob-booking-aszf-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gob-cream);
  line-height: 1.35;
}

.gob-booking-aszf-desc {
  font-size: 0.76rem;
  color: var(--gob-muted);
  line-height: 1.4;
}

.gob-booking-aszf-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gob-brass);
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.gob-booking-aszf-toggle:hover {
  color: #282828;
}

.gob-booking-aszf-details {
  margin-top: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 0.375rem;
  background: #dfc8b5;
  color: #282828;
  font-size: 0.78rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gob-aszf-item {
  line-height: 1.45;
}

.gob-aszf-item strong {
  color: #282828;
}

/* Summary Sidebar */
.gob-summary-title {
  font-family: var(--gob-font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gob-line);
  padding-bottom: 0.65rem;
}

.gob-summary-block {
  font-size: 0.83rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gob-summary-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gob-brass);
  font-weight: 600;
}

.gob-summary-items {
  border-top: 1px solid var(--gob-line);
  border-bottom: 1px solid var(--gob-line);
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gob-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.84rem;
}

.gob-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
  font-weight: 600;
  padding-top: 0.25rem;
}

.gob-summary-total-price {
  font-family: var(--gob-font-display);
  font-size: 1.6rem;
  color: var(--gob-brass);
}

.gob-cta-btn {
  width: 100%;
  padding: 0.9rem 1.25rem;
  border-radius: 0.375rem;
  background: #282828;
  color: #fef2e8;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: 0;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.gob-cta-btn:hover:not(:disabled) {
  background: var(--gob-brass);
}

.gob-cta-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   PREMIUM SUCCESS / CONFIRMED SCREEN (UI/UX 2026 SPEC)
   ========================================================================== */
.gob-main-pane.is-confirmed-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.65rem 1.25rem 0.85rem;
  box-sizing: border-box;
}

.gob-confirmed-container {
  max-width: 600px;
  width: 100%;
  margin: auto 0;
  padding: 0;
  box-sizing: border-box;
}

.gob-confirmed-header {
  text-align: center;
  margin-bottom: 0.65rem;
}

.gob-confirmed-success-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #EBF7EE;
  border: 1.5px solid #A3D9B1;
  color: #1B7F40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.4rem;
  box-shadow: 0 3px 10px rgba(27, 127, 64, 0.12);
}

.gob-confirmed-title {
  font-family: var(--gob-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: #1F1F1F;
  margin: 0 0 0.2rem 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.gob-confirmed-subtitle {
  color: #6E6359;
  font-size: 0.82rem;
  margin: 0 0 0.45rem 0;
  line-height: 1.35;
}

.gob-confirmed-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gob-confirmed-status-badge.is-pending {
  background: #F5EFEB;
  border: 1px solid #DFD5C8;
  color: #7D5A3C;
}

.gob-confirmed-status-badge.is-confirmed {
  background: #EBF7EE;
  border: 1px solid #A3D9B1;
  color: #1B7F40;
}

.gob-confirmed-card {
  background: #FFFFFF;
  border: 1px solid #EAE4DA;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(109, 76, 51, 0.05);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.gob-confirmed-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.48rem 1.1rem;
  border-bottom: 1px solid #EAE4DA;
  box-sizing: border-box;
}

.gob-confirmed-row:last-child {
  border-bottom: none;
}

.gob-confirmed-id-row {
  justify-content: space-between;
  background: #FAF8F5;
  padding: 0.45rem 1.1rem;
}

.gob-confirmed-id-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.gob-confirmed-row-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8C8276;
}

.gob-confirmed-id-val {
  font-family: var(--gob-font-sans);
  font-size: 1.05rem;
  font-weight: 800;
  color: #1F1F1F;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.gob-confirmed-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #FFFFFF;
  border: 1px solid #D6CEBE;
  color: #4A4035;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-confirmed-copy-btn:hover {
  background: #FAF5ED;
  border-color: #7D5A3C;
  color: #7D5A3C;
  transform: translateY(-1px);
}

.gob-confirmed-copy-btn.is-copied {
  background: #EBF7EE;
  border-color: #A3D9B1;
  color: #1B7F40;
}

.gob-confirmed-icon-col {
  width: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7D5A3C;
}

.gob-confirmed-avatar {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #D6CEBE;
  display: block;
}

.gob-confirmed-prof-logo {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #D6CEBE;
  background: #F1E9E0;
  display: block;
  flex-shrink: 0;
}

.gob-confirmed-prof-icon-wrap {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7D5A3C;
}

.gob-confirmed-prof-icon-wrap svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.gob-confirmed-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.gob-confirmed-item-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1F1F1F;
  line-height: 1.25;
}

.gob-confirmed-item-sub {
  font-size: 0.76rem;
  color: #7A7065;
  line-height: 1.25;
}

.gob-confirmed-svc-single {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.gob-confirmed-svc-single-price {
  font-weight: 700;
  color: #1F1F1F;
  font-size: 0.86rem;
  white-space: nowrap;
}

.gob-confirmed-svc-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.gob-confirmed-svc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.gob-confirmed-svc-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1F1F1F;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.gob-confirmed-svc-price {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1F1F1F;
  white-space: nowrap;
}

.gob-confirmed-svc-badge {
  font-size: 0.68rem;
  color: #7D5A3C;
  background: #FAF5ED;
  border: 1px solid #EAE4DA;
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-weight: 600;
}

.gob-confirmed-total-row {
  justify-content: space-between;
  padding: 0.6rem 1.1rem;
  background: #FCFAF7;
}

.gob-confirmed-total-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1F1F1F;
}

.gob-confirmed-penalty-note {
  font-size: 0.72rem;
  color: #C92A2A;
  margin-top: 0.1rem;
}

.gob-confirmed-total-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: #7D5A3C;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.gob-confirmed-policy-bar {
  background: #FAF5ED;
  border: 1px solid #EAE4DA;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  color: #5A4D42;
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.gob-confirmed-policy-bar svg {
  color: #7D5A3C;
  flex-shrink: 0;
}

.gob-confirmed-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}

.gob-confirmed-btn-primary,
.gob-confirmed-btn-secondary {
  flex: 1 1 0;
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
}

.gob-confirmed-btn-primary {
  background: #242424;
  color: #FFFFFF;
  border: 1.5px solid #242424;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.gob-confirmed-btn-primary:hover {
  background: #000000;
  border-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}

.gob-confirmed-btn-secondary {
  background: #FFFFFF;
  color: #242424;
  border: 1.5px solid #D6CEBE;
  box-shadow: none;
}

.gob-confirmed-btn-secondary:hover {
  background: #FAF8F5;
  border-color: #242424;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (max-width: 520px) {
  .gob-confirmed-actions {
    flex-direction: column;
  }

  .gob-confirmed-title {
    font-size: 1.45rem;
  }

  .gob-confirmed-row {
    padding: 0.45rem 0.85rem;
  }
}

.gob-confirm-box {
  text-align: center;
  padding: 2rem 1rem;
  max-width: 34rem;
  margin: 0 auto;
}

@media (max-height: 750px) {
  .gob-main-pane.is-confirmed-pane {
    padding: 0.45rem 1rem 0.65rem;
  }
  .gob-confirmed-header {
    margin-bottom: 0.35rem;
  }
  .gob-confirmed-success-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.25rem;
  }
  .gob-confirmed-title {
    font-size: 1.4rem;
    margin-bottom: 0.1rem;
  }
  .gob-confirmed-subtitle {
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
  }
  .gob-confirmed-row {
    padding: 0.36rem 0.95rem;
  }
  .gob-confirmed-id-row {
    padding: 0.35rem 0.95rem;
  }
  .gob-confirmed-card {
    margin-bottom: 0.45rem;
  }
  .gob-confirmed-policy-bar {
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
  }
  .gob-confirmed-btn-primary,
  .gob-confirmed-btn-secondary {
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   THE SALON - MY BOOKINGS (FOGLALÁSAIM) 2026 SPEC
   ========================================================================== */
/* ==========================================================================
   FOGLALÁSAIM (MY BOOKINGS) COMPACT MODAL SIZING
   Pulling in sides and bottom to snugly fit content without dead space
   ========================================================================== */
dialog.gob-booking-dialog.gob-my-bookings-dialog,
dialog.gob-booking-dialog:has(.is-my-bookings-body) {
  width: min(94vw, 44rem) !important;
  max-width: 44rem !important;
  height: auto !important;
  min-height: auto !important;
  max-height: min(90dvh, 52rem) !important;
  inset-block: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-inline: auto !important;
  margin-block: 0 !important;
}

dialog.gob-booking-dialog.gob-my-bookings-dialog .gob-modal-header,
dialog.gob-booking-dialog:has(.is-my-bookings-body) .gob-modal-header {
  padding: 1rem 1.5rem;
}

dialog.gob-booking-dialog.gob-my-bookings-dialog .gob-modal-body,
dialog.gob-booking-dialog:has(.is-my-bookings-body) .gob-modal-body {
  display: block !important;
  flex: 0 1 auto !important;
  height: auto !important;
  min-height: auto !important;
  max-height: calc(min(88dvh, 48rem) - 72px) !important;
  overflow-y: auto !important;
  grid-template-columns: 1fr !important;
}

dialog.gob-booking-dialog.gob-my-bookings-dialog .gob-main-pane,
dialog.gob-booking-dialog:has(.is-my-bookings-body) .gob-main-pane,
.gob-main-pane.is-my-bookings-pane {
  display: block !important;
  padding: 1rem 1.5rem 1.25rem !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

.gob-my-bookings-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.gob-my-bookings-header {
  text-align: center;
  margin-bottom: 1rem;
}

.gob-my-bookings-title {
  font-family: var(--gob-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: #1F1F1F;
  margin: 0 0 0.2rem 0;
  line-height: 1.2;
}

.gob-my-bookings-subtitle {
  color: #6E6359;
  font-size: 0.85rem;
  margin: 0 0 0.85rem 0;
  line-height: 1.4;
}

.gob-my-bookings-tabs {
  display: inline-flex;
  background: #F3ECE4;
  border: 1px solid #DFD5C8;
  border-radius: 999px;
  padding: 3px;
  gap: 4px;
  margin: 0 auto;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.gob-my-bookings-bottom-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
  padding-bottom: 0.25rem;
}

.gob-my-bookings-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #7D7063;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-my-bookings-tab:hover {
  color: #1F1F1F;
}

.gob-my-bookings-tab.active {
  background: #FFFFFF;
  color: #1F1F1F;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gob-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: #EAE4DA;
  color: #4A4035;
  transition: all 0.18s ease;
}

.gob-my-bookings-tab.active .gob-tab-badge {
  background: #7D5A3C;
  color: #FFFFFF;
}

.gob-my-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.gob-my-booking-card-modern {
  background: #FFFFFF;
  border: 1px solid #EAE4DA;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(109, 76, 51, 0.05);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gob-my-booking-card-modern:hover {
  box-shadow: 0 6px 20px rgba(109, 76, 51, 0.09);
}

.gob-my-booking-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1.1rem;
  background: #FAF8F5;
  border-bottom: 1px solid #EAE4DA;
}

.gob-my-booking-id-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.gob-my-booking-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.1rem;
  border-bottom: 1px solid #F2EEE8;
  box-sizing: border-box;
}

.gob-my-booking-row:last-child {
  border-bottom: none;
}

.gob-my-booking-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.1rem;
  background: #FCFAF7;
  border-top: 1px solid #EAE4DA;
}

.gob-my-booking-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1.1rem;
  background: #FFFFFF;
  border-top: 1px solid #F2EEE8;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.gob-booking-policy-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #7A7065;
}

.gob-booking-policy-hint svg {
  color: #7D5A3C;
  flex-shrink: 0;
}

.gob-booking-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #FFF5F5;
  border: 1px solid #FFC9C9;
  color: #C92A2A;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-booking-cancel-btn:hover {
  background: #FFE3E3;
  border-color: #FA5252;
  transform: translateY(-1px);
}

.gob-booking-cancel-btn.is-late {
  background: #FFF9DB;
  border-color: #FFE066;
  color: #D9480F;
}

.gob-booking-cancel-btn.is-late:hover {
  background: #FFF3BF;
  border-color: #F59F00;
}

.gob-booking-rebook-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #FAF8F5;
  border: 1px solid #D6CEBE;
  color: #4A4035;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-booking-rebook-btn:hover {
  background: #FAF5ED;
  border-color: #7D5A3C;
  color: #7D5A3C;
  transform: translateY(-1px);
}

.gob-status-badge-completed {
  background: #EBF7EE;
  border: 1px solid #C3E6CB;
  color: #237836;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gob-status-badge-cancelled {
  background: #FFF5F5;
  border: 1px solid #FFC9C9;
  color: #C92A2A;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gob-my-bookings-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: #FFFFFF;
  border: 1px dashed #D6CEBE;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

.gob-my-bookings-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FAF8F5;
  border: 1px solid #EAE4DA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7D5A3C;
  margin: 0 auto 0.85rem;
}

.gob-my-bookings-empty-icon svg {
  display: block;
}

.gob-my-bookings-empty-title {
  font-family: var(--gob-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #1F1F1F;
  margin: 0 0 0.35rem 0;
}

.gob-my-bookings-empty-text {
  font-size: 0.88rem;
  color: #7A7065;
  max-width: 28rem;
  margin: 0 auto;
  line-height: 1.5;
}

.gob-my-bookings-bottom-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.25rem;
}

/* Right-side floating action buttons group (Oldal szerkesztése + Időpontfoglalás) */
.gob-right-fabs-group {
  position: fixed !important;
  right: 1rem !important;
  bottom: 1rem !important;
  z-index: 40 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.65rem !important;
  pointer-events: none !important;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) !important;
  will-change: opacity, transform;
}

@media (min-width: 640px) {
  .gob-right-fabs-group {
    right: 1.5rem !important;
    bottom: 1.5rem !important;
    gap: 0.85rem !important;
  }
}

.gob-right-fabs-group > * {
  pointer-events: auto !important;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
}

body.gob-edit-mode .gob-right-fabs-group [data-booking-fab] {
  display: none !important;
}

/* Floating Corner Actions Hero Visibility (Hidden during hero video, stylish transition upon scrolling below hero) */
.gob-right-fabs-group,
[data-booking-fab],
#CookiebotWidget,
#CookiebotWidgetUnderlay,
.gob-cookiebot-fab,
[data-cookiebot-fab] {
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) !important;
  will-change: opacity, transform;
}

body:not(.gob-hero-active) .gob-right-fabs-group,
body:not(.gob-hero-active) .gob-cookiebot-fab,
body:not(.gob-hero-active) [data-cookiebot-fab],
body:not(.gob-hero-active) #CookiebotWidget,
body.gob-edit-mode #CookiebotWidget,
body.gob-edit-mode .gob-cookiebot-fab,
body.gob-edit-mode [data-cookiebot-fab],
body.gob-edit-mode .gob-right-fabs-group,
body.gob-edit-mode .gob-editor-fab,
body.gob-edit-mode [data-gob-editor-fab] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

body.gob-hero-active:not(.gob-edit-mode) .gob-right-fabs-group,
body.gob-hero-active:not(.gob-edit-mode) [data-booking-fab],
body.gob-hero-active:not(.gob-edit-mode) .gob-editor-fab,
body.gob-hero-active:not(.gob-edit-mode) [data-gob-editor-fab],
body.gob-hero-active:not(.gob-edit-mode) .gob-cookiebot-fab,
body.gob-hero-active:not(.gob-edit-mode) [data-cookiebot-fab],
body.gob-hero-active:not(.gob-edit-mode) #CookiebotWidget:not(.CookiebotWidget-open),
body.gob-hero-active:not(.gob-edit-mode) #CookiebotWidgetUnderlay {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(22px) scale(0.94) !important;
  visibility: hidden !important;
}

#CookiebotWidget.CookiebotWidget-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.gob-hero-active:not(.gob-edit-mode) .gob-right-fabs-group *,
body.gob-hero-active:not(.gob-edit-mode) [data-booking-fab] *,
body.gob-hero-active:not(.gob-edit-mode) .gob-editor-fab *,
body.gob-hero-active:not(.gob-edit-mode) [data-gob-editor-fab] * {
  pointer-events: none !important;
}

body:not(.gob-hero-active).gob-is-admin .gob-right-fabs-group,
body:not(.gob-hero-active).gob-is-admin .gob-editor-fab,
body:not(.gob-hero-active).gob-is-admin [data-gob-editor-fab] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

body.gob-edit-mode .gob-right-fabs-group,
body.the-salon-edit-mode .gob-right-fabs-group {
  z-index: 99996 !important;
  bottom: 4.5rem !important;
}

body:not(.gob-hero-active).gob-is-admin .gob-right-fabs-group *,
body:not(.gob-hero-active).gob-is-admin .gob-editor-fab *,
body:not(.gob-hero-active).gob-is-admin [data-gob-editor-fab] *,
body.gob-edit-mode .gob-right-fabs-group *,
body.gob-edit-mode .gob-editor-fab *,
body.gob-edit-mode [data-gob-editor-fab] * {
  pointer-events: auto !important;
}

/* Edit Mode FAB Button (Bottom Right Corner – Left of Időpontfoglalás) */
/* Strictly hidden by default for anonymous / unauthenticated visitors */
.gob-editor-fab,
[data-gob-editor-fab] {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  background: #7d5a3c !important;
  color: #fef2e8 !important;
  border: 1px solid #c6ab94 !important;
  border-radius: var(--radius-card, 1.25rem) !important;
  padding: 0.8rem 1.35rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.32) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  text-decoration: none !important;
  user-select: none !important;
  z-index: 50 !important;
}

/* Explicitly displayed when admin is logged in OR Edit Mode is active */
body.gob-is-admin:not(.gob-is-guest):not(.gob-is-munkatars) .gob-editor-fab,
body.gob-is-admin:not(.gob-is-guest):not(.gob-is-munkatars) [data-gob-editor-fab],
body.gob-edit-mode .gob-editor-fab,
body.gob-edit-mode [data-gob-editor-fab] {
  display: inline-flex !important;
}

body.gob-edit-mode .gob-editor-fab {
  background: #282828 !important;
  border-color: #dfad7a !important;
}

.gob-editor-fab:hover {
  background: #282828 !important;
  color: #fef2e8 !important;
  border-color: #dfad7a !important;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-2px) !important;
}

.gob-editor-fab:active {
  transform: translateY(0) scale(0.97) !important;
}

.gob-editor-fab svg {
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .gob-editor-fab {
    padding: 0.7rem 0.95rem !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
  }
}

/* Guests (role === 'VENDÉG') and Staff (role === 'MUNKATÁRS'): The entire website editor and all its tools stay strictly hidden */
body.gob-is-guest .gob-editor-fab,
body.gob-is-guest [data-gob-editor-fab],
body.gob-is-munkatars .gob-editor-fab,
body.gob-is-munkatars [data-gob-editor-fab],
body.gob-is-guest .gob-headliner-controls,
body.gob-is-munkatars .gob-headliner-controls,
body.gob-is-guest .gob-headliner-media-btn,
body.gob-is-munkatars .gob-headliner-media-btn,
body.gob-is-guest [data-gob-editor-toolbar],
body.gob-is-munkatars [data-gob-editor-toolbar],
body.gob-is-guest .gob-editor-toolbar,
body.gob-is-munkatars .gob-editor-toolbar,
body.gob-is-guest .gob-editor-box-overlay,
body.gob-is-munkatars .gob-editor-box-overlay,
body.gob-is-guest .gob-editor-box-frame,
body.gob-is-munkatars .gob-editor-box-frame,
body.gob-is-guest .gob-editor-img-overlay,
body.gob-is-munkatars .gob-editor-img-overlay,
body.gob-is-guest .gob-editor-text-toolbar,
body.gob-is-munkatars .gob-editor-text-toolbar,
body.gob-is-guest .gob-editor-design-panel,
body.gob-is-munkatars .gob-editor-design-panel,
body.gob-is-guest .gob-modal-edit-bar,
body.gob-is-munkatars .gob-modal-edit-bar,
/* hidden rule handled by .gob-editor-fab { display: none !important; } */

/* Admin Auth Prompt Dialog */
dialog#gob-admin-prompt {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  width: min(calc(100vw - 32px), 440px) !important;
  max-width: 440px !important;
  max-height: calc(100dvh - 32px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 100000 !important;
}

dialog#gob-admin-prompt[open] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

dialog#gob-admin-prompt::backdrop {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.gob-editor-toolbar[hidden] {
  display: none !important;
}

/* Note: Modern Visual Builder Toolbar & Editor Controls are defined in the dedicated suite section below */

/* Editable text highlight */
body.gob-edit-mode [data-gob-edit-id] {
  outline: 1px dashed rgba(125, 90, 60, 0.55);
  outline-offset: 2px;
  border-radius: 3px;
  cursor: text !important;
  transition: outline-color 0.15s, background-color 0.15s;
}

body.gob-edit-mode [data-gob-edit-id]:hover {
  outline: 1px dashed #282828;
  background-color: rgba(223, 200, 181, 0.4);
}

body.gob-edit-mode [data-gob-edit-id]:focus {
  outline: 2px solid #282828;
  background-color: rgba(223, 200, 181, 0.65);
}

/* Empty editable text placeholders and hit areas in Edit Mode */
body.the-salon-edit-mode [data-gob-edit-id].gob-is-empty,
body.the-salon-edit-mode [data-gob-edit-id]:empty,
body.gob-edit-mode [data-gob-edit-id].gob-is-empty,
body.gob-edit-mode [data-gob-edit-id]:empty {
  min-width: 160px !important;
  min-height: 2.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  outline: 2px dashed #bf966a !important;
  outline-offset: 3px !important;
  background: rgba(33, 31, 29, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border-radius: 6px !important;
  cursor: text !important;
  position: relative !important;
  padding: 0.25rem 0.75rem !important;
}

body.the-salon-edit-mode [data-gob-edit-id].gob-is-empty::before,
body.the-salon-edit-mode [data-gob-edit-id]:empty::before,
body.gob-edit-mode [data-gob-edit-id].gob-is-empty::before,
body.gob-edit-mode [data-gob-edit-id]:empty::before {
  content: attr(data-placeholder);
  color: rgba(241, 193, 139, 0.95) !important;
  font-size: 0.85rem !important;
  font-style: italic !important;
  font-family: var(--gob-font-sans, system-ui, sans-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

body.the-salon-edit-mode [data-gob-edit-id].gob-is-empty:hover,
body.the-salon-edit-mode [data-gob-edit-id]:empty:hover,
body.gob-edit-mode [data-gob-edit-id].gob-is-empty:hover,
body.gob-edit-mode [data-gob-edit-id]:empty:hover {
  outline: 2px dashed #f1c18b !important;
  background: rgba(191, 150, 106, 0.35) !important;
  box-shadow: 0 0 12px rgba(191, 150, 106, 0.35) !important;
}

body.the-salon-edit-mode [data-gob-edit-id].gob-is-empty:focus,
body.the-salon-edit-mode [data-gob-edit-id]:empty:focus,
body.gob-edit-mode [data-gob-edit-id].gob-is-empty:focus,
body.gob-edit-mode [data-gob-edit-id]:empty:focus {
  outline: 2px solid #f1c18b !important;
  background: rgba(33, 31, 29, 0.75) !important;
}

/* Editable images */
body.gob-edit-mode main img,
body.gob-edit-mode header img {
  outline: 2px dashed #7d5a3c !important;
  outline-offset: -2px;
  cursor: pointer !important;
  transition: outline-color 0.15s;
}

body.gob-edit-mode main img:hover,
body.gob-edit-mode header img:hover,
body.gob-edit-mode .gob-wb-selected-img {
  outline: 3px solid #282828 !important;
}

/* Webnode Box Highlight */
body.gob-edit-mode .gob-wb-hovered-box {
  outline: 2px dashed #7d5a3c !important;
  outline-offset: 4px;
  position: relative;
}

body.gob-edit-mode .gob-wb-selected-box {
  outline: 2px dashed #282828 !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(223, 200, 181, 0.55);
}

/* ==========================================================================
   HEADLINER (HERO) MEDIA GEAR BUTTON & POPOVER PANEL
   Strictly only visible in Edit Mode: body.gob-edit-mode
   ========================================================================== */
.gob-headliner-gear-wrap {
  display: none !important;
  position: absolute;
  top: 5.5rem;
  right: 1.5rem;
  z-index: 55;
  font-family: var(--gob-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

body.gob-edit-mode .gob-headliner-gear-wrap {
  display: block !important;
}

/* Fallback for legacy classes */
.gob-headliner-controls,
.gob-headliner-media-btn {
  display: none !important;
}

/* Minimalist Circular Gear Button */
.gob-headliner-gear-btn {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background: #1C1917;
  color: #FAF5ED;
  border: 1.5px solid #C59B6D;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(197, 155, 109, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  padding: 0;
}

.gob-headliner-gear-btn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: #FAF5ED;
}

.gob-headliner-gear-btn:hover {
  background: #2E2822;
  border-color: #DFAD7A;
  color: #FFFFFF;
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.8), 0 0 12px rgba(197, 155, 109, 0.45);
}

.gob-headliner-gear-btn:hover svg {
  transform: rotate(45deg);
}

.gob-headliner-gear-btn.is-active,
.gob-headliner-gear-btn[aria-expanded="true"] {
  background: #C59B6D;
  color: #12100E;
  border-color: #C59B6D;
  box-shadow: 0 0 16px rgba(197, 155, 109, 0.6);
}

.gob-headliner-gear-btn.is-active svg,
.gob-headliner-gear-btn[aria-expanded="true"] svg {
  color: #12100E;
  transform: rotate(90deg);
}

.gob-headliner-gear-btn:focus-visible {
  outline: 2px solid #C59B6D;
  outline-offset: 3px;
}

/* Popover Settings Panel */
.gob-headliner-popover {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  width: 350px;
  max-width: min(90vw, 380px);
  background: #1C1917;
  border: 1.5px solid #C59B6D;
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(197, 155, 109, 0.25);
  overflow: hidden;
  color: #FAF5ED;
  animation: gobHlPopFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
  z-index: 60;
}

.gob-headliner-popover[hidden] {
  display: none !important;
}

@keyframes gobHlPopFade {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Popover Header */
.gob-headliner-popover-header {
  background: #24211D;
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(197, 155, 109, 0.25);
}

.gob-headliner-popover-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.gob-headliner-popover-icon {
  color: #C59B6D;
  flex-shrink: 0;
}

.gob-headliner-popover-title {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: #FAF5ED;
  letter-spacing: 0.02em;
}

.gob-headliner-popover-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FAF5ED;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.gob-headliner-popover-close:hover {
  background: rgba(197, 155, 109, 0.3);
  border-color: #C59B6D;
  color: #FFFFFF;
}

/* Popover Body */
.gob-headliner-popover-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Popover Section Groups */
.gob-hl-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gob-hl-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gob-hl-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #A8A29E;
  text-transform: uppercase;
}

.gob-hl-type-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #C59B6D;
  background: rgba(197, 155, 109, 0.12);
  border: 1px solid rgba(197, 155, 109, 0.3);
  padding: 2px 7px;
  border-radius: 9999px;
}

.gob-hl-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: #C59B6D;
}

/* Action Button */
.gob-hl-action-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #24211D;
  color: #FAF5ED;
  border: 1px solid rgba(197, 155, 109, 0.35);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.gob-hl-action-btn:hover {
  background: #2E2822;
  border-color: #C59B6D;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.gob-hl-action-btn svg {
  color: #C59B6D;
}

/* Speed Grid */
.gob-hl-speed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.gob-hl-speed-btn {
  background: #24211D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #FAF5ED;
  border-radius: 8px;
  padding: 0.45rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.gob-hl-speed-btn:hover {
  background: #2E2822;
  border-color: #C59B6D;
  color: #FFFFFF;
}

.gob-hl-speed-btn.is-active {
  background: #C59B6D !important;
  color: #12100E !important;
  border-color: #C59B6D !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(197, 155, 109, 0.4) !important;
}

/* Row group (Loop toggle) */
.gob-hl-row-group {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: #141210;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(197, 155, 109, 0.2);
}

.gob-hl-muted-hint {
  font-size: 0.74rem;
  color: #A8A29E;
  line-height: 1.35;
}

/* Two-state switch button */
.gob-hl-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #24211D;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #A8A29E;
  border-radius: 9999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.gob-hl-toggle-knob {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #78716C;
  transition: background 0.18s ease;
}

.gob-hl-toggle-btn.is-active {
  background: rgba(197, 155, 109, 0.18);
  border-color: #C59B6D;
  color: #FAF5ED;
}

.gob-hl-toggle-btn.is-active .gob-hl-toggle-knob {
  background: #C59B6D;
  box-shadow: 0 0 6px rgba(197, 155, 109, 0.8);
}

.gob-hl-toggle-btn:hover {
  border-color: #C59B6D;
  color: #FFFFFF;
}

@media (max-width: 640px) {
  .gob-headliner-gear-wrap {
    top: 4.8rem;
    right: 0.75rem;
  }
  .gob-headliner-popover {
    right: 0;
    width: calc(100vw - 1.5rem);
    max-width: 330px;
  }
}

/* Webnode Interactive Dashed Box Resize Frame */
.gob-wb-box-frame {
  position: fixed;
  z-index: 74;
  pointer-events: none;
  border: 2px dashed rgba(125, 90, 60, 0.85);
  border-radius: 4px;
  transition: border-color 0.12s ease;
}

.gob-wb-box-frame.is-selected {
  border-color: #282828;
}

.gob-wb-box-frame[hidden] {
  display: none !important;
}

/* Full-length draggable edge strips along all 4 dashed lines */
.gob-wb-box-edge {
  position: absolute;
  pointer-events: auto;
  z-index: 2;
  transition: background-color 0.12s ease;
}

.gob-wb-box-edge:hover,
.gob-wb-box-edge.is-dragging {
  background-color: rgba(125, 90, 60, 0.28);
}

.gob-wb-box-edge-n {
  top: -7px;
  left: 8px;
  right: 8px;
  height: 12px;
  cursor: ns-resize !important;
}

.gob-wb-box-edge-s {
  bottom: -7px;
  left: 8px;
  right: 8px;
  height: 12px;
  cursor: ns-resize !important;
}

.gob-wb-box-edge-e {
  right: -7px;
  top: 8px;
  bottom: 8px;
  width: 12px;
  cursor: ew-resize !important;
}

.gob-wb-box-edge-w {
  left: -7px;
  top: 8px;
  bottom: 8px;
  width: 12px;
  cursor: ew-resize !important;
}

/* Subtle pill grip indicators on the middle of each dashed edge */
.gob-wb-box-edge::after {
  content: '';
  position: absolute;
  background: #7d5a3c;
  border: 1.5px solid #fef2e8;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.gob-wb-box-frame.is-selected .gob-wb-box-edge::after,
.gob-wb-box-edge:hover::after {
  background: #282828;
}

.gob-wb-box-edge-n::after,
.gob-wb-box-edge-s::after {
  width: 24px;
  height: 6px;
  left: calc(50% - 12px);
  top: 3px;
}

.gob-wb-box-edge-e::after,
.gob-wb-box-edge-w::after {
  width: 6px;
  height: 24px;
  top: calc(50% - 12px);
  left: 3px;
}

.gob-wb-box-edge:hover::after {
  transform: scale(1.2);
}

/* 4 Corner resize handles on the dashed box frame */
.gob-wb-box-corner {
  position: absolute;
  width: 13px;
  height: 13px;
  background: #282828;
  border: 2px solid #fef2e8;
  border-radius: 50%;
  pointer-events: auto;
  z-index: 3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.gob-wb-box-corner:hover {
  transform: scale(1.25);
  background: #7d5a3c;
}

.gob-wb-box-corner-nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize !important;
}

.gob-wb-box-corner-ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize !important;
}

.gob-wb-box-corner-se {
  bottom: -7px;
  right: -7px;
  cursor: nwse-resize !important;
}

.gob-wb-box-corner-sw {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize !important;
}

/* Webnode Floating Box Action Overlay - The Salon Budapest Toolkit */
.gob-wb-box-overlay {
  position: fixed;
  z-index: 99992;
  display: flex;
  flex-direction: column;
  background: #211f1e;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #c4c0ba;
  padding: 8px 12px 6px 12px;
  border-radius: 17px;
  border: 1.3px solid #896746;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(137, 103, 70, 0.25);
  pointer-events: auto;
  font-size: 0.72rem;
  max-width: 96vw;
  box-sizing: border-box;
  user-select: none;
  transition: top 0.15s ease, left 0.15s ease;
}

.gob-wb-box-overlay[hidden] {
  display: none !important;
}

.gob-wb-box-overlay .gob-wb-toolkit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.gob-wb-box-overlay .gob-wb-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f2d3af;
  padding: 4px 8px 4px 4px;
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
  border-right: none;
}

.gob-wb-box-overlay .gob-wb-mini-btn {
  padding: 5px 12px;
  border-radius: 15px;
  border: 1px solid #74583f;
  background: #3a3029;
  color: #e6c6a5;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  outline: none;
}

.gob-wb-box-overlay .gob-wb-mini-btn:hover {
  background: #5b4939;
  color: #fff4ea;
  border-color: #af865b;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.gob-wb-box-overlay .gob-wb-mini-btn:focus-visible {
  box-shadow: 0 0 0 2px #d4b282;
}

.gob-wb-box-overlay .gob-wb-mini-btn-danger {
  background: #512d2d !important;
  border: 1px solid #a45c58 !important;
  color: #f5bbb4 !important;
  border-radius: 14px;
  font-weight: 600;
  padding: 5px 12px;
}

.gob-wb-box-overlay .gob-wb-mini-btn-danger:hover {
  background: #6e3939 !important;
  border-color: #c96a66 !important;
  color: #ffffff !important;
}

.gob-wb-box-overlay .gob-wb-sep {
  width: 1px;
  height: 22px;
  background: #625447;
  margin: 0 4px;
  display: inline-block;
  flex-shrink: 0;
}

.gob-wb-box-overlay .gob-wb-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: #323130;
  color: #c4c0ba;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  outline: none;
  flex-shrink: 0;
}

.gob-wb-box-overlay .gob-wb-icon-btn:hover:not(:disabled) {
  background: #51463d;
  color: #ffffff;
}

.gob-wb-box-overlay .gob-wb-icon-btn:focus-visible {
  outline: 2px solid #d4b282;
}

.gob-wb-box-overlay .gob-wb-icon-btn.active,
.gob-wb-box-overlay .gob-wb-icon-btn.active:hover {
  background: #cfa878;
  color: #271e19;
}

.gob-wb-box-overlay .gob-wb-icon-btn.is-disabled,
.gob-wb-box-overlay .gob-wb-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.gob-wb-box-overlay .gob-wb-move-btn {
  border-radius: 7px;
}

.gob-wb-box-overlay .gob-wb-move-arrows-wrap {
  display: inline-flex;
  align-items: center;
  max-width: 140px;
  opacity: 1;
  margin: 0 4px;
  overflow: hidden;
  transition: max-width 220ms cubic-bezier(.2,.8,.2,1), opacity 150ms ease, margin 220ms cubic-bezier(.2,.8,.2,1), padding 220ms cubic-bezier(.2,.8,.2,1);
  vertical-align: middle;
}

.gob-wb-box-overlay .gob-wb-move-arrows-wrap.collapsed {
  max-width: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  border: none !important;
}

.gob-wb-box-overlay .gob-wb-move-capsule {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #4b3b2e;
  border: 1px solid #af865b;
  border-radius: 11px;
  padding: 2px 3px;
}

.gob-wb-box-overlay .gob-wb-nav-btn {
  width: 27px;
  height: 25px;
  border-radius: 6px;
  border: none;
  background: #5b4939;
  color: #f0e0d0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
  outline: none;
}

.gob-wb-box-overlay .gob-wb-nav-btn:hover {
  background: #b28d65;
  color: #221a14;
}

.gob-wb-box-overlay .gob-wb-nav-btn:focus-visible {
  outline: 2px solid #d4b282;
}

.gob-wb-box-overlay .gob-wb-align-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.gob-wb-box-overlay .gob-wb-status-line {
  font-size: 11px;
  color: #8b7968;
  padding: 5px 2px 1px 4px;
  width: 100%;
  letter-spacing: 0.02em;
  font-family: Arial, Helvetica, sans-serif;
  transition: color 0.15s ease;
}

.gob-wb-box-overlay .gob-wb-status-line.active {
  color: #dfc8b5;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .gob-wb-box-overlay,
  .gob-wb-box-overlay .gob-wb-move-arrows-wrap,
  .gob-wb-box-overlay .gob-wb-align-group {
    transition: none !important;
  }
}

.gob-wb-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #dfad7a;
  padding: 0.15rem 0.45rem;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  margin-right: 0.15rem;
}

.gob-wb-mini-btn {
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fef2e8;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.gob-wb-mini-btn:hover {
  background: #c59b6d;
  color: #1c1917;
  border-color: #c59b6d;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.gob-wb-mini-btn:active {
  transform: translateY(0) scale(0.97);
}

.gob-wb-mini-btn-danger {
  background: rgba(201, 42, 42, 0.25);
  border-color: rgba(255, 135, 135, 0.45);
  color: #ffc9c9;
}

.gob-wb-mini-btn-danger:hover {
  background: #c92a2a;
  color: #fff;
  border-color: #c92a2a;
}

/* Webnode Image Resize Frame & Floating Controls */
.gob-wb-img-overlay {
  position: fixed;
  z-index: 99994;
  pointer-events: none;
  border: 2px solid #c59b6d;
  box-shadow: 0 0 0 2px rgba(28, 28, 30, 0.85);
}

.gob-wb-img-overlay[hidden] {
  display: none !important;
}

.gob-wb-img-bar {
  position: absolute;
  top: auto;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: linear-gradient(180deg, #222022 0%, #201e20 100%);
  border-radius: 17px;
  border: 1px solid #6b5b4d;
  box-shadow: 0 14px 39px rgba(18, 12, 11, 0.7), 0 1px 5px rgba(28, 19, 18, 0.5);
  padding: 8px 16px 9px;
  color: #f5f0ed;
  pointer-events: auto;
  width: max-content;
  max-width: min(96vw, 840px);
  z-index: 99996;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}

.gob-wb-img-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.gob-wb-img-top-row {
  padding: 0 0 3px;
}

.gob-wb-img-effect-row {
  padding-top: 7px;
  border-top: 1px solid #393336;
  gap: 5px;
}

.gob-wb-img-bar .gob-wb-line {
  height: 27px;
  width: 1px;
  background: #4b4342;
  margin: 0 4px;
  flex: 0 0 1px;
}

.gob-wb-img-bar .gob-wb-tool,
.gob-wb-img-bar .gob-wb-pill,
.gob-wb-img-bar .gob-wb-shape,
.gob-wb-img-bar .gob-wb-tab-btn,
.gob-wb-img-bar .gob-wb-preset,
.gob-wb-img-bar .gob-wb-mini-btn {
  white-space: nowrap;
  border-radius: 20px;
  border: 1px solid #504b49;
  background: #353335;
  color: #efeae5;
  font-size: 12px;
  font-weight: 650;
  height: 35px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1;
}

.gob-wb-img-bar .gob-wb-tool:hover,
.gob-wb-img-bar .gob-wb-pill:hover,
.gob-wb-img-bar .gob-wb-shape:hover,
.gob-wb-img-bar .gob-wb-tab-btn:hover,
.gob-wb-img-bar .gob-wb-preset:hover,
.gob-wb-img-bar .gob-wb-mini-btn:hover {
  background: #494143;
  border-color: #9c806b;
}

.gob-wb-img-bar .gob-wb-tool.strong {
  background: #343234;
}

.gob-wb-img-bar .gob-wb-tool.danger {
  color: #e8b0b1;
  border-color: #8e484b;
  background: #482327;
}
.gob-wb-img-bar .gob-wb-tool.danger:hover {
  background: #683138;
}

.gob-wb-img-bar .gob-wb-pill {
  padding: 0 11px;
  min-width: 52px;
}
.gob-wb-img-bar .gob-wb-pill.active,
.gob-wb-img-bar .gob-wb-shape.active,
.gob-wb-img-bar .gob-wb-tab-btn.active {
  background: #594e46;
  border-color: #bda083;
  color: #fff;
  box-shadow: inset 0 0 0 1px #786252;
}

.gob-wb-img-bar .gob-wb-shape {
  min-width: 35px;
  padding: 0 8px;
  font-size: 18px;
  font-weight: 500;
}
.gob-wb-img-bar .shape-icon {
  line-height: 0;
  display: inline-flex;
}
.gob-wb-img-bar .shape-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.gob-wb-img-bar .ic {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: none;
  align-items: center;
  justify-content: center;
}
.gob-wb-img-bar .ic svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gob-wb-img-bar .gob-wb-effect-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d7ad83;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-right: 3px;
}
.gob-wb-img-bar .gob-wb-effect-kicker .spark {
  font-size: 16px;
  line-height: 1;
}

.gob-wb-img-bar .gob-wb-tab-btn {
  border-radius: 11px;
  position: relative;
  padding: 0 10px 0 9px;
  height: 33px;
  font-size: 11.5px;
}
.gob-wb-img-bar .gob-wb-tab-btn .small-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b8580;
  box-shadow: 0 0 0 1px #48403c;
  flex: none;
  transition: background 0.2s, box-shadow 0.2s;
}
.gob-wb-img-bar .gob-wb-tab-btn[data-enabled="true"] .small-dot {
  background: #dcb892;
  box-shadow: 0 0 0 1px #8b6b52;
}
.gob-wb-img-bar .gob-wb-tab-btn .chev {
  width: 8px;
  height: 8px;
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 2px;
  color: #d6ccc3;
  display: inline-block;
}

.gob-wb-img-bar .gob-wb-swatches {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.gob-wb-img-bar .gob-wb-swatch {
  display: inline-flex;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--sw);
  border: 2px solid #80776f;
  box-shadow: inset 0 0 0 1px rgba(21, 20, 22, 0.63);
  transition: transform 0.15s, outline 0.15s;
  cursor: pointer;
  padding: 0;
  outline: none;
}
.gob-wb-img-bar .gob-wb-swatch:hover {
  transform: scale(1.08);
}
.gob-wb-img-bar .gob-wb-swatch.active {
  outline: 2px solid #f8d0a4;
  outline-offset: 2px;
}

.gob-wb-img-bar .gob-wb-custom-color {
  height: 28px;
  width: 28px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  cursor: pointer;
  border: 1px solid #6b5a4e;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #34302e;
  flex: none;
}
.gob-wb-img-bar .gob-wb-custom-color input {
  position: absolute;
  inset: -5px;
  width: 42px;
  height: 42px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
}
.gob-wb-img-bar .gob-wb-custom-color .plus {
  z-index: 1;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 4px #000;
  pointer-events: none;
  line-height: 1;
}

.gob-wb-img-bar .gob-wb-mini-btn {
  font-weight: 600;
  height: 30px;
  padding: 0 9px;
  color: #d7b7a0;
  font-size: 11px;
  background: #353033;
}

.gob-wb-settings-strip {
  border-top: 1px solid #494140;
  padding: 12px 0 4px;
  margin-top: 2px;
  animation: wbReveal 0.18s ease-out;
  min-width: 0;
}
.gob-wb-settings-strip[hidden] {
  display: none !important;
}
@keyframes wbReveal {
  from { opacity: 0.5; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.gob-wb-settings-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 2px 12px;
}
.gob-wb-settings-caption {
  display: flex;
  gap: 10px;
  align-items: center;
}
.gob-wb-settings-title {
  font-weight: 730;
  font-size: 12px;
  color: #f4e6d8;
}
.gob-wb-settings-sub {
  font-size: 10px;
  color: #a89d94;
  margin-top: 2px;
}
.gob-wb-settings-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.gob-wb-preset {
  font-size: 11px;
  height: 27px;
  padding: 0 9px;
  background: #2d292b;
  border-radius: 8px;
  font-weight: 580;
  color: #d6cac1;
}
.gob-wb-preset.active {
  background: #4c3d32;
  color: #ffe4c6;
  border-color: #c5a07c;
}
.gob-wb-preset.separator {
  margin-left: 5px;
}

.gob-wb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 650;
  color: #e0d3c9;
  cursor: pointer;
  margin-right: 4px;
}
.gob-wb-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.gob-wb-toggle .switch-track {
  width: 31px;
  height: 18px;
  background: #514c4e;
  border: 1px solid #716c6a;
  border-radius: 15px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  flex: none;
}
.gob-wb-toggle .switch-track::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #d3ceca;
  transition: transform 0.2s;
}
.gob-wb-toggle input:checked + .switch-track {
  background: #a88260;
  border-color: #d3aa7d;
}
.gob-wb-toggle input:checked + .switch-track::before {
  transform: translateX(13px);
  background: #fff;
}

.gob-wb-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.gob-wb-control {
  min-width: 0;
  padding: 9px 10px 10px;
  background: #2d292b;
  border: 1px solid #48403e;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.gob-wb-ctl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
.gob-wb-ctl-name {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #e9dfd6;
}
.gob-wb-value-edit {
  display: inline-flex;
  align-items: center;
  background: #221f20;
  border: 1px solid #554d48;
  border-radius: 7px;
  height: 24px;
  flex: none;
}
.gob-wb-value-edit input {
  width: 36px;
  padding: 0 2px 0 5px;
  border: 0;
  outline: none;
  color: #e6c4a3;
  background: transparent;
  text-align: right;
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.gob-wb-value-edit input::-webkit-inner-spin-button,
.gob-wb-value-edit input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gob-wb-unit {
  padding: 0 5px 0 2px;
  font-size: 10px;
  color: #ae9b8b;
}

.gob-wb-control input[type="range"] {
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, #c9a077 var(--percent, 50%), #514a48 var(--percent, 50%));
  height: 5px;
  border-radius: 12px;
  cursor: pointer;
  outline: 0;
}
.gob-wb-control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #f5e6d5;
  background: #ad845f;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.gob-wb-control input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid #f5e6d5;
  background: #ad845f;
  border-radius: 50%;
}

.gob-wb-strip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 2px 0;
  color: #aca096;
  font-size: 10px;
}
.gob-wb-strip-footer strong {
  color: #e8ccac;
}
.gob-wb-strip-footer .sep-dot {
  padding: 0 7px;
  color: #766d68;
}
.gob-wb-reset-position {
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: #847061;
  color: #d0ad89;
  font-size: 10px;
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
}
.gob-wb-strip-footer .microhint {
  color: #bda996;
  font-size: 10px;
}

@media (max-width: 1050px) {
  .gob-wb-controls {
    grid-template-columns: repeat(3, minmax(135px, 1fr));
  }
}
@media (max-width: 650px) {
  .gob-wb-img-bar {
    padding: 8px 9px 10px;
    border-radius: 13px;
    gap: 6px;
  }
  .gob-wb-img-bar .gob-wb-tool,
  .gob-wb-img-bar .gob-wb-pill,
  .gob-wb-img-bar .gob-wb-shape,
  .gob-wb-img-bar .gob-wb-tab-btn {
    height: 31px;
    font-size: 11px;
    padding: 0 8px;
  }
  .gob-wb-controls {
    grid-template-columns: repeat(2, minmax(128px, 1fr));
    gap: 6px;
  }
}


.gob-wb-resize-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #282828;
  border: 2px solid #fef2e8;
  border-radius: 50%;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.gob-wb-resize-se {
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}

.gob-wb-resize-sw {
  left: -8px;
  bottom: -8px;
  cursor: nesw-resize;
}

.gob-wb-resize-ne {
  right: -8px;
  top: -8px;
  cursor: nesw-resize;
}

.gob-wb-resize-nw {
  left: -8px;
  top: -8px;
  cursor: nwse-resize;
}

.gob-wb-resize-e {
  right: -8px;
  top: calc(50% - 8px);
  cursor: ew-resize;
}

.gob-wb-resize-w {
  left: -8px;
  top: calc(50% - 8px);
  cursor: ew-resize;
}

.gob-wb-resize-s {
  bottom: -8px;
  left: calc(50% - 8px);
  cursor: ns-resize;
}

.gob-wb-size-pill {
  position: absolute;
  bottom: 6px;
  right: 10px;
  background: rgba(40, 40, 40, 0.88);
  color: #fef2e8;
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  pointer-events: none;
}

/* Webnode Map Resize Frame & Floating Controls */
.gob-wb-map-overlay {
  position: fixed;
  z-index: 77;
  pointer-events: auto;
  border: 2px dashed #7d5a3c;
  border-radius: 0.65rem;
  box-shadow: 0 0 0 2px rgba(254, 242, 232, 0.4);
  background: rgba(40, 40, 40, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.gob-wb-map-overlay:hover {
  border: 2px solid #dfad7a;
  background: rgba(40, 40, 40, 0.18);
}

.gob-wb-map-overlay[hidden] {
  display: none !important;
}

.gob-wb-map-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  background: #282828;
  color: #fef2e8;
  padding: 0.35rem 0.55rem;
  border-radius: 0.45rem;
  border: 1px solid #c6ab94;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  white-space: nowrap;
  z-index: 5;
}

.gob-wb-map-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(40, 40, 40, 0.88);
  color: #fef2e8;
  border: 1px solid #dfad7a;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gob-wb-map-overlay:hover .gob-wb-map-center-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

.gob-wb-map-resize-s {
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  cursor: ns-resize;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.gob-wb-map-resize-handle {
  width: 54px;
  height: 8px;
  background: #282828;
  border: 2px solid #fef2e8;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: ns-resize;
}

body.gob-edit-mode main iframe[src*="maps.google.com"],
body.gob-edit-mode main iframe[src*="google.com/maps"] {
  outline: 2px dashed #7d5a3c;
  outline-offset: 2px;
}

/* Webnode Section / Grid Add Strip (Modern Section Action Toolbar) */
.gob-wb-add-strip,
.section-tool-panel {
  margin: 1.5rem auto 0.75rem auto;
  padding: 8px 12px;
  background-color: #F1E8DD;
  border: 1px solid #C6B09B;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(58, 48, 40, 0.08), 0 1px 3px rgba(58, 48, 40, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: max-content;
  width: auto;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  z-index: 40;
  position: relative;
}

.gob-wb-add-strip:hover,
.section-tool-panel:hover {
  box-shadow: 0 6px 22px rgba(58, 48, 40, 0.12), 0 2px 6px rgba(58, 48, 40, 0.06);
  border-color: #B89F88;
}

body:not(.gob-edit-mode) .gob-wb-add-strip,
body:not(.gob-edit-mode) .section-tool-panel {
  display: none !important;
}

.section-tool-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.section-tool-action:focus-visible {
  outline: 2px solid #3A3028;
  outline-offset: 2px;
}

.section-tool-action:active:not(:disabled) {
  transform: translateY(1px);
}

.section-tool-action__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.section-tool-action__label {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

/* 1. Elsődleges művelet: Doboz hozzáadása ide */
.section-tool-action--primary {
  background-color: #3A3028;
  color: #FFF6EC;
  border: 1px solid #3A3028;
  box-shadow: 0 2px 6px rgba(58, 48, 40, 0.2);
}

.section-tool-action--primary:hover {
  background-color: #27201A;
  border-color: #27201A;
  color: #FFF6EC;
  box-shadow: 0 4px 10px rgba(58, 48, 40, 0.28);
}

.section-tool-action--primary:active {
  background-color: #1A1511;
  border-color: #1A1511;
}

/* 2, 3, 4. Másodlagos műveletek: Szekció másolása, Kép elhelyezése ide, Új szekció ez alá */
.section-tool-action--secondary {
  background-color: #FCF8F2;
  color: #736557;
  border: 1px solid #D7C5B4;
  box-shadow: 0 1px 3px rgba(58, 48, 40, 0.04);
}

.section-tool-action--secondary:hover {
  background-color: #F4EDE3;
  color: #3A3028;
  border-color: #C6B09B;
  box-shadow: 0 2px 6px rgba(58, 48, 40, 0.08);
}

.section-tool-action--secondary:active {
  background-color: #ECE3D6;
}

/* 5. Veszélyes művelet: Szekció törlése */
.section-tool-action--danger {
  background-color: #FFF6F3;
  color: #A24743;
  border: 1px solid #C88E89;
  box-shadow: 0 1px 3px rgba(162, 71, 67, 0.06);
}

.section-tool-action--danger:hover:not(:disabled) {
  background-color: #FCE8E4;
  color: #882E2A;
  border-color: #A24743;
  box-shadow: 0 2px 6px rgba(162, 71, 67, 0.15);
}

.section-tool-action--danger:active:not(:disabled) {
  background-color: #F8D9D3;
}

.section-tool-action--danger:disabled,
.section-tool-action--danger.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .gob-wb-add-strip,
  .section-tool-panel {
    width: calc(100% - 24px);
    max-width: 100%;
    padding: 8px;
    gap: 8px;
  }

  .section-tool-action {
    flex: 1 1 calc(50% - 8px);
    min-width: 135px;
    padding: 0 12px;
    font-size: 0.8rem;
  }

  .section-tool-action--primary {
    flex-basis: 100%;
  }
}

/* Legacy Rich Text Formatting Toolbar completely removed */
.gob-wb-text-toolbar {
  display: none !important;
}

.gob-wb-text-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding-right: 0.45rem;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.gob-wb-text-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.gob-wb-size-select {
  background: rgba(255, 255, 255, 0.1);
  color: #fef2e8;
  border: 1px solid rgba(197, 155, 109, 0.4);
  border-radius: 9999px;
  padding: 0.24rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.gob-wb-size-select:focus {
  border-color: #dfad7a;
  background: rgba(255, 255, 255, 0.18);
}

.gob-wb-size-select option {
  background: #1c1917;
  color: #fef2e8;
}

.gob-wb-color-swatch {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.gob-wb-color-swatch:hover {
  transform: scale(1.2);
  border-color: #ffffff;
}

.gob-wb-color-swatch.is-active {
  border-color: #dfad7a;
  box-shadow: 0 0 0 2px #ffffff;
}

.gob-wb-color-picker {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid rgba(197, 155, 109, 0.45);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.gob-wb-mini-btn.is-active,
.gob-wb-mini-btn.active {
  background: #c59b6d !important;
  color: #1c1917 !important;
  border-color: #c59b6d !important;
}

.gob-toast {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #282828;
  color: #fef2e8;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(40, 40, 40, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gob-toast.show {
  opacity: 1;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OPTIMIZATION (Desktop >= 64rem is untouched)
   ========================================================================== */
/* STRICT MOBILE & TABLET DARK MODE DISABLE - FORCE IDENTICAL LUXURY PALETTE AS PC */
@media (max-width: 1199.98px), (max-width: 63.99rem), (pointer: coarse) {
  :root,
  html,
  body,
  dialog,
  header,
  main,
  footer,
  nav,
  section,
  article,
  div,
  p,
  span,
  a,
  button,
  input,
  select,
  textarea,
  *,
  *::before,
  *::after {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
    -webkit-forced-color-adjust: none !important;
  }

  body,
  main,
  #root,
  main > .container-page,
  section.container-page {
    background-color: #FAF5ED !important;
    background: #FAF5ED !important;
    color: #282828 !important;
  }

  header[data-nav],
  header[data-nav].bg-ink\/85 {
    background-color: #dfc8b5 !important;
    background: #dfc8b5 !important;
    border-bottom: 1px solid rgba(198, 171, 148, 0.6) !important;
    border-bottom-color: rgba(198, 171, 148, 0.6) !important;
  }

  header[data-nav] .container-page,
  header[data-nav] > .container-page,
  header[data-nav] #nav-panel,
  footer .container-page {
    background-color: transparent !important;
    background: transparent !important;
  }

  header[data-nav] > .container-page > a:first-child,
  header[data-nav] a.font-display {
    color: #000000 !important;
  }

  header[data-nav] button[data-nav-toggle],
  header[data-nav] button[data-nav-toggle] svg {
    color: #282828 !important;
    stroke: #282828 !important;
  }

  .gob-hero-booking-btn,
  .gob-hero-booking-btn span,
  .gob-hero-booking-btn svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
}

@media (max-width: 63.99rem) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Header & Navigation on Tablet/Mobile */
  header[data-nav] .order-2 {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
  }

  header[data-nav] .gob-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  header[data-nav] #nav-panel {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid rgba(198, 171, 148, 0.45);
  }

  header[data-nav] #nav-panel nav ul {
    gap: 0.65rem 1.25rem !important;
  }

  /* Hero section responsive scaling on Tablet/Mobile */
  main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1 {
    font-size: clamp(2.4rem, 8.5vw, 4.75rem) !important;
    line-height: 1.08 !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    word-break: break-word;
  }

  main:not(.container-page):not(.ts-settings-workspace) > section:first-child p:not([data-gob-edit-id*="hero-home"]):not(.gob-hero-tagline) {
    font-size: clamp(1rem, 2.5vw, 1.45rem) !important;
    line-height: 1.38 !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Prevent fixed-width visual editor boxes/text/images from overflowing */
  main [style*="width"]:not(.gob-hero-logo-wrap):not([data-gob-edit-id*="hero-home"]):not(.gob-hero-booking-btn):not(.gob-hero-divider),
  footer [style*="width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  main div[style*="width"]:not(.gob-hero-logo-wrap):not([data-gob-edit-id*="hero-home"]):not(.gob-hero-booking-btn):not(.gob-hero-divider):not(.visual):not(.ts-rent-visual):not([data-wb-box-role="visual"]),
  main p[style*="width"]:not([data-gob-edit-id*="hero-home"]):not(.gob-hero-tagline),
  main h1[style*="width"]:not(.gob-hero-logo-wrap),
  main h2[style*="width"],
  main h3[style*="width"],
  main li[style*="width"],
  footer p[style*="width"] {
    width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main [style*="height"]:not(img):not(video):not(iframe):not(.visual):not(.ts-rent-visual):not([data-wb-box-role="visual"]) {
    height: auto !important;
    min-height: 0 !important;
  }

  main img[style*="width"] {
    width: 100% !important;
    max-width: 34rem !important;
    height: auto !important;
  }
}

@media (max-width: 55.99rem) {
  .gob-modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gob-main-pane {
    overflow-y: visible;
    max-height: none;
    flex-shrink: 0;
  }

  .gob-summary-pane {
    flex-shrink: 0;
  }
}

@media (max-width: 47.99rem) {
  /* Compact Header on Mobile Phones */
  header[data-nav] > .container-page {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    gap: 0.45rem !important;
  }

  header[data-nav] > .container-page > a:first-child {
    font-size: clamp(0.78rem, 3.6vw, 1.25rem) !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
  }

  header[data-nav] .gob-nav-BookingBtn {
    padding: 0.28rem 0.55rem !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.06em !important;
  }

  header[data-nav] #nav-panel nav ul {
    flex-direction: column !important;
    gap: 0.6rem !important;
    padding: 0.35rem 0;
  }

  header[data-nav] #nav-panel nav ul li a {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem !important;
  }

  /* Hero & Content on Mobile Phones — Phase 18: Mobile Focal Layout Matching Spec */
  main:not(.container-page):not(.ts-settings-workspace) > section:first-child:has(video),
  main:not(.container-page):not(.ts-settings-workspace) > section:first-child:has(.gob-hero-logo-wrap) {
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100svh !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-anchor: none !important;
  }

  /* Hero Video Mobile Portrait Focal Alignment */
  main > section:first-of-type:has(video) > video,
  main > section:first-of-type:has(.gob-hero-logo-wrap) > video,
  main > section:first-child > video {
    object-position: 58% center !important;
  }

  main > section:first-of-type:has(video) > div.relative.z-10,
  main > section:first-of-type:has(.gob-hero-logo-wrap) > div.relative.z-10 {
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100% !important;
    justify-content: flex-end !important;
    padding-top: calc(max(env(safe-area-inset-top, 0px), 4.5rem) + 1rem) !important;
    padding-bottom: clamp(4.5rem, 14vh, 7.5rem) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 1. Mobile Logo */
  .gob-hero-logo-wrap {
    order: 1 !important;
    width: clamp(260px, 72vw, 335px) !important;
    max-width: 82vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  svg.gob-hero-logo,
  .gob-hero-logo {
    width: 100% !important;
    height: auto !important;
    max-height: 95px !important;
  }

  /* 2. Mobile Booking Button */
  .gob-hero-booking-btn {
    order: 2 !important;
    width: clamp(270px, 78vw, 335px) !important;
    max-width: 86vw !important;
    min-height: 48px !important;
    padding: 0.72rem 1.35rem !important;
    margin-top: clamp(0.9rem, 2.2vh, 1.25rem) !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 12px !important;
    font-size: clamp(0.78rem, 3.2vw, 0.88rem) !important;
    letter-spacing: 0.12em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  }

  /* Right chevron arrow matching mobile illustration */
  .gob-hero-booking-btn::after {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-top: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;
    transform: rotate(45deg) !important;
    margin-left: 0.25rem !important;
    flex-shrink: 0 !important;
  }

  /* 3. Mobile Divider */
  .gob-hero-divider {
    order: 3 !important;
    width: clamp(120px, 30vw, 150px) !important;
    height: 1px !important;
    margin-top: clamp(0.85rem, 2vh, 1.15rem) !important;
    margin-bottom: clamp(0.65rem, 1.4vh, 0.85rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: rgba(198, 171, 148, 0.5) !important;
  }

  /* 4. Mobile Tagline */
  [data-gob-edit-id="hero-home-tagline"] {
    order: 4 !important;
    font-size: clamp(0.58rem, 2.2vw, 0.72rem) !important;
    letter-spacing: clamp(0.16em, 0.5vw, 0.22em) !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   Hero Scroll Indicator (Universal Touch & Desktop Luxury Affordance)
   Displays an interactive luxury swipe-up pill affordance at the bottom of the hero.
   Responsive across mobile, tablet, touch laptop, Surface, and desktop viewports.
   ========================================================================== */

.gob-hero-scroll-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  order: 10 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  bottom: auto !important;
  margin-top: clamp(1rem, 2.8vh, 2rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 35 !important;
  width: 36px !important;
  height: 86px !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  overflow: visible !important;
  contain: none !important;
  will-change: transform, opacity !important;
  filter: none !important;
}

.gob-hero-scroll-indicator .gob-gesture-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

/* Tablet & Desktop: Strictly hidden per request (visible on mobile viewports only) */
@media (min-width: 48rem) {
  .gob-hero-scroll-indicator {
    display: none !important;
  }
}

/* Hide when scrolled past hero */
body:not(.gob-hero-active) .gob-hero-scroll-indicator,
.gob-hero-scroll-indicator.is-scrolled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(12px) scale(0.9) translateZ(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .gob-hero-scroll-indicator .gob-gesture-svg {
    opacity: 0.85 !important;
  }
}

@media (max-width: 47.99rem) {
  main:not(.container-page):not(.ts-settings-workspace) > section:first-child > img.h-\[60vh\] {
    height: 40vh !important;
    min-height: 15.5rem !important;
  }

  main:not(.container-page):not(.ts-settings-workspace) > section:first-child h1:not(.gob-hero-logo-wrap) {
    font-size: clamp(2.1rem, 10.5vw, 3.25rem) !important;
  }

  main:not(.container-page):not(.ts-settings-workspace) > section:first-child p:not([data-gob-edit-id*="hero-home"]):not(.gob-hero-tagline) {
    font-size: clamp(0.92rem, 3.8vw, 1.15rem) !important;
    margin-top: 0.75rem !important;
  }

  main h2[style*="font-size"] {
    font-size: clamp(1.45rem, 6vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }

  main img[style*="width"] {
    max-width: 100% !important;
  }

  /* Booking Modal & Service Cards on Mobile Phones */
  dialog.gob-booking-dialog {
    width: 98vw;
    height: 92dvh;
    min-height: 92dvh;
    max-height: 95dvh;
    border-radius: 0.6rem;
  }

  .gob-modal-header {
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    gap: 0.5rem;
  }

  .gob-modal-title {
    font-size: 1.2rem;
  }

  .gob-modal-header-right {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .gob-stepper {
    padding: 0.55rem 0.85rem;
  }

  .gob-step-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.7rem;
  }

  .gob-main-pane,
  .gob-summary-pane {
    padding: 1rem;
  }

  .gob-service-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.9rem;
  }

  .gob-service-right {
    justify-content: space-between;
    border-top: 1px solid rgba(198, 171, 148, 0.45);
    padding-top: 0.6rem;
    width: 100%;
  }

  .gob-service-right > div {
    text-align: left !important;
  }

  .gob-my-booking-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .gob-my-booking-card > div:last-child {
    width: 100%;
    justify-content: space-between !important;
    border-top: 1px solid rgba(198, 171, 148, 0.45);
    padding-top: 0.65rem;
  }

  .gob-editor-fab {
    padding: 0.7rem 0.95rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .gob-toast {
    width: max-content;
    max-width: 92vw;
    white-space: normal;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.55rem 1rem;
  }
}

/* Premium Social Media Action Buttons (Facebook, Instagram, TikTok) */
.gob-social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  padding: 0.45rem 0.95rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(198, 171, 148, 0.35) !important;
  background: rgba(36, 36, 36, 0.88) !important;
  color: #fef2e8 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

.gob-social-btn .gob-social-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  transition: transform 0.22s ease, fill 0.22s ease;
}

/* Platform Hover Effects */
.gob-social-btn.gob-social-fb:hover {
  background: #1877F2 !important;
  border-color: #1877F2 !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(24, 119, 242, 0.45) !important;
}

.gob-social-btn.gob-social-ig:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border-color: #e1306c !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(225, 48, 108, 0.5) !important;
}

.gob-social-btn.gob-social-tt:hover {
  background: #010101 !important;
  border-color: #25f4ee !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: -3px 3px 18px rgba(254, 44, 85, 0.55), 3px -3px 18px rgba(37, 244, 238, 0.55) !important;
}

.gob-social-btn:hover .gob-social-icon {
  transform: scale(1.14);
}

/* Responsive wrap for lists containing social buttons in navigation */
nav[aria-label*="Közösségi"],
nav[aria-label*="Social"],
nav ul:has(.gob-social-btn) {
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

/* Footer Brand Container & Balanced Equal-Width Social Media Buttons */
footer .space-y-4:has(p[data-gob-edit-id*="footer-brand"]),
footer .space-y-4:has(ul:has(.gob-social-btn)),
footer .space-y-4 {
  width: fit-content !important;
  max-width: 100% !important;
  align-self: flex-start !important;
}

footer ul:has(.gob-social-btn),
footer ul.gob-footer-social-list {
  display: flex !important;
  width: var(--footer-brand-width, 100%) !important;
  max-width: 100% !important;
  gap: 0.55rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

footer ul:has(.gob-social-btn) > li,
footer ul.gob-footer-social-list > li {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
}

footer ul:has(.gob-social-btn) .gob-social-btn,
footer ul.gob-footer-social-list .gob-social-btn {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  padding-top: 0.42rem !important;
  padding-bottom: 0.42rem !important;
  font-size: clamp(0.68rem, 2vw, 0.82rem) !important;
  white-space: nowrap !important;
}

footer ul:has(.gob-social-btn) .gob-social-icon,
footer ul.gob-footer-social-list .gob-social-icon {
  width: clamp(0.85rem, 2vw, 1.05rem) !important;
  height: clamp(0.85rem, 2vw, 1.05rem) !important;
}

/* Calendar and Route / Map Button Icons */
.gob-btn-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 0.45rem;
  transition: transform 0.22s ease, stroke 0.22s ease;
}

.btn-primary .gob-btn-icon,
.btn-secondary .gob-btn-icon,
.gob-route-btn .gob-btn-icon,
.gob-btn-with-icon .gob-btn-icon {
  stroke: currentColor;
}

/* Ensure buttons with icons are inline-flex and vertically centered */
.btn-primary:has(.gob-btn-icon),
.btn-secondary:has(.gob-btn-icon),
.gob-route-btn,
.gob-btn-with-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.25 !important;
}

/* Grouping container for contact box social buttons & action buttons */
.gob-contact-cta-group {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0.75rem !important;
  margin-top: auto !important;
  align-self: stretch !important;
}

/* Contact box action buttons container */
.gob-contact-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0.75rem !important;
  margin-top: auto !important;
  align-self: stretch !important;
}

.gob-contact-cta-group .gob-contact-actions {
  margin-top: 0 !important;
  width: 100% !important;
}

.gob-contact-actions > a,
.gob-contact-cta-group .gob-contact-actions > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding: 0.875rem 1rem !important;
}

/* Social media buttons row inside contact box – harmoniously balanced with action buttons */
.gob-contact-social-nav,
.gob-contact-cta-group nav {
  width: 100% !important;
  max-width: 100% !important;
}

.gob-contact-social-list,
.gob-contact-social-nav ul,
.gob-contact-cta-group nav ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.gob-contact-social-list > li,
.gob-contact-social-nav ul > li,
.gob-contact-cta-group nav ul > li {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
}

.gob-contact-social-list .gob-social-btn,
.gob-contact-social-nav .gob-social-btn,
.gob-contact-cta-group nav .gob-social-btn {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0.625rem 0.5rem !important;
  font-size: clamp(0.68rem, 1.8vw, 0.75rem) !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .gob-contact-actions,
  .gob-contact-cta-group .gob-contact-actions {
    grid-template-columns: 1fr !important;
    gap: 0.625rem !important;
  }

  .gob-contact-actions > a,
  .gob-contact-cta-group .gob-contact-actions > a {
    padding: 0.875rem 1.25rem !important;
  }

  .gob-contact-social-list,
  .gob-contact-social-nav ul,
  .gob-contact-cta-group nav ul {
    gap: 0.45rem !important;
  }

  .gob-contact-social-list .gob-social-btn,
  .gob-contact-social-nav .gob-social-btn,
  .gob-contact-cta-group nav .gob-social-btn {
    padding: 0.5rem 0.25rem !important;
    font-size: clamp(0.62rem, 2.6vw, 0.72rem) !important;
  }

  .gob-contact-social-list .gob-social-icon,
  .gob-contact-social-nav .gob-social-icon,
  .gob-contact-cta-group nav .gob-social-icon {
    width: 0.85rem !important;
    height: 0.85rem !important;
  }
}

.btn-primary:hover .gob-btn-icon,
.btn-secondary:hover .gob-btn-icon,
.gob-route-btn:hover .gob-btn-icon,
.gob-btn-with-icon:hover .gob-btn-icon {
  transform: scale(1.14);
}

/* Route Planner / Directions Button – matches .btn-primary in shape, proportions & dimensions */
.gob-route-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.875rem 2rem !important;
  border-radius: var(--radius-card, 0.375rem) !important;
  border: 1px solid #c6ab94 !important;
  background: #282828 !important;
  color: #fef2e8 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  line-height: 1.25 !important;
  box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out !important;
  cursor: pointer !important;
}

.gob-route-btn:hover {
  background: #7d5a3c !important;
  border-color: #7d5a3c !important;
  color: #fef2e8 !important;
  box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.25) !important;
}

.gob-route-btn:hover .gob-btn-icon {
  stroke: #fef2e8 !important;
  transform: scale(1.14);
}

/* Floating Cookiebot Consent FAB (Bottom Left Corner – Official Circular Black Button with White Monogram) */
.gob-cookiebot-fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  left: 1rem !important;
  bottom: 1rem !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  user-select: none !important;
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
  z-index: 40 !important;
  overflow: hidden !important;
}

@media (min-width: 640px) {
  .gob-cookiebot-fab {
    left: 1.5rem !important;
    bottom: 1.5rem !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

.gob-cookiebot-fab:hover {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.gob-cookiebot-fab:active {
  transform: translateY(0) scale(0.95) !important;
}

.gob-cookiebot-fab .gob-cookiebot-icon,
.gob-cookiebot-fab .gob-cookie-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0;
  display: block;
  transition: transform 0.25s ease;
}

.gob-cookiebot-fab:hover .gob-cookiebot-icon,
.gob-cookiebot-fab:hover .gob-cookie-icon {
  transform: scale(1.06);
}

.gob-cookiebot-fab .gob-cookie-text {
  display: none !important;
}

@media (max-width: 639px) {
  .gob-cookiebot-fab {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }
  .gob-cookiebot-fab .gob-cookiebot-icon,
  .gob-cookiebot-fab .gob-cookie-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}

/* If Cookiebot's native widget is present and visible, avoid duplicate buttons */
body:has(#CookiebotWidget:not([style*="display: none"])) .gob-cookiebot-fab {
  display: none !important;
}

/* Ensure #CookiebotWidget conforms to the exact circular placement when closed, and a clean card when open */
#CookiebotWidget button.CookiebotWidget-logo {
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

#CookiebotWidget:not(.CookiebotWidget-open) {
  border-radius: 50% !important;
  box-shadow: none !important;
}

#CookiebotWidget.CookiebotWidget-open {
  border-radius: 14px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(198, 171, 148, 0.35) !important;
  overflow: hidden !important;
  max-width: min(92vw, 480px) !important;
  max-height: calc(100vh - 3rem) !important;
}

#CookiebotWidget.CookiebotWidget-open #CookiebotWidget-widgetContent,
#CookiebotWidget.CookiebotWidget-open .CookiebotWidget-contents {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Dim and disable pointer interactions during visual text editor mode */
body.gob-edit-mode .gob-cookiebot-fab {
  opacity: 0.3 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Cookiebot Consent Dialog – Anchored to Bottom-Left Corner
   ========================================================================== */
#CybotCookiebotDialog,
div#CybotCookiebotDialog,
body > #CybotCookiebotDialog,
html body #CybotCookiebotDialog {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 1.5rem !important;
  left: 1.5rem !important;
  margin: 0 !important;
  transform: none !important;
  max-width: min(92vw, 520px) !important;
  width: 520px !important;
  max-height: calc(100vh - 3rem) !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  border: 1px solid rgba(198, 171, 148, 0.4) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
  z-index: 2147483647 !important;
  overflow: hidden !important;
}

#CybotCookiebotDialogBody,
#CybotCookiebotDialogDetail {
  max-height: calc(100vh - 5rem) !important;
  overflow-y: auto !important;
}

@media (max-width: 639px) {
  #CybotCookiebotDialog,
  div#CybotCookiebotDialog,
  body > #CybotCookiebotDialog,
  html body #CybotCookiebotDialog {
    bottom: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: calc(100vh - 2rem) !important;
    border-radius: 14px !important;
  }
}

/* GPU hardware acceleration & full frame rate rendering for headliner video */
main section video,
video.object-cover {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* ==========================================================================
   MODERN GALLERY LIGHTBOX (Blurred backdrop, centered enlarged image,
   top-right close X button on the image, and smooth prev/next navigation)
   ========================================================================== */
dialog[data-lightbox] {
  display: none;
}

dialog[data-lightbox][open] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  outline: none !important;
}

dialog[data-lightbox]::backdrop {
  background: rgba(18, 13, 10, 0.55) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}

.gob-lightbox-surface {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(22, 16, 12, 0.62);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  outline: none;
  user-select: none;
}

.gob-lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 96vw;
  max-height: 92dvh;
}

.gob-lightbox-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.1rem;
  overflow: hidden;
  background: #1c1511;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(254, 242, 232, 0.18);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.gob-lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(80vw, 960px);
  max-height: 82dvh;
  object-fit: contain;
  border-radius: 1.1rem;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.18s ease, transform 0.22s ease;
}

.gob-lightbox-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 15, 12, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fef2e8;
  border: 1px solid rgba(254, 242, 232, 0.28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.gob-lightbox-close-btn:hover,
.gob-lightbox-close-btn:focus-visible {
  background: rgba(160, 109, 64, 0.95);
  border-color: rgba(254, 242, 232, 0.6);
  color: #ffffff;
  transform: scale(1.08);
  outline: none;
}

.gob-lightbox-nav-btn {
  flex-shrink: 0;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 18, 14, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fef2e8;
  border: 1px solid rgba(254, 242, 232, 0.24);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.gob-lightbox-nav-btn:hover,
.gob-lightbox-nav-btn:focus-visible {
  background: rgba(160, 109, 64, 0.92);
  border-color: rgba(254, 242, 232, 0.55);
  color: #ffffff;
  transform: scale(1.08);
  outline: none;
}

.gob-lightbox-counter {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  background: rgba(20, 15, 12, 0.74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(254, 242, 232, 0.2);
  color: #fef2e8;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
}

@media (max-width: 640px) {
  .gob-lightbox-surface {
    padding: 0.75rem;
  }
  .gob-lightbox-stage {
    gap: 0.5rem;
    width: 100%;
  }
  .gob-lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
  }
  .gob-lightbox-nav-btn:hover,
  .gob-lightbox-nav-btn:focus-visible {
    transform: translateY(-50%) scale(1.06);
  }
  .gob-lightbox-prev {
    left: 0.5rem;
  }
  .gob-lightbox-next {
    right: 0.5rem;
  }
  .gob-lightbox-close-btn {
    top: 0.55rem;
    right: 0.55rem;
    width: 2.15rem;
    height: 2.15rem;
  }
}

/* ============================================================================
   PUBLIC DYNAMIC PRICE LIST & SERVICE CATALOG
   ============================================================================ */
.gob-public-catalog-wrap {
  width: 100%;
  margin-top: 2rem;
}

.gob-catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  background: var(--gob-surface);
  border: 1px solid var(--gob-line);
  border-radius: 1rem;
  padding: 1.5rem;
}

.gob-catalog-search-wrap {
  position: relative;
  max-width: 32rem;
  width: 100%;
}

.gob-catalog-search-input {
  width: 100%;
  padding: 0.75rem 1.1rem 0.75rem 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--gob-line);
  background: #1f1d1b;
  color: var(--gob-cream);
  font-size: 0.92rem;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.gob-catalog-search-input:focus {
  outline: none;
  border-color: var(--gob-brass);
  box-shadow: 0 0 0 3px rgba(198, 171, 148, 0.25);
  background: #282828;
}

.gob-catalog-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gob-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.gob-catalog-clear-btn {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gob-muted);
  font-size: 1.35rem;
  cursor: pointer;
  padding: 0 0.35rem;
  line-height: 1;
  transition: color 0.15s ease;
}

.gob-catalog-clear-btn:hover {
  color: var(--gob-cream);
}

.gob-public-prof-group {
  margin-bottom: 3.5rem;
}

.gob-public-prof-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 2px solid var(--gob-line);
  padding-bottom: 0.85rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gob-public-prof-title {
  font-family: var(--gob-font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gob-cream);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.gob-public-category-title {
  font-family: var(--gob-font-display);
  font-size: 1.15rem;
  color: var(--gob-brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.75rem 0 0.95rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gob-public-category-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(198, 171, 148, 0.22);
  margin-left: 0.75rem;
}

.gob-public-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.35rem;
  margin-bottom: 2rem;
}

.gob-public-svc-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.35rem;
  border-radius: 14px;
  border: 1px solid var(--gob-line);
  background: var(--gob-surface);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  min-height: 200px;
}

.gob-public-svc-card:hover {
  border-color: var(--gob-brass);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.gob-public-svc-card.selected {
  border-color: #7d5a3c;
  background: rgba(223, 200, 181, 0.14);
  box-shadow: 0 0 0 1.5px #7d5a3c, 0 10px 24px rgba(0, 0, 0, 0.35);
}

.gob-public-svc-top {
  margin-bottom: 1rem;
}

.gob-public-svc-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.gob-public-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(198, 171, 148, 0.15);
  color: var(--gob-brass);
  border: 1px solid rgba(198, 171, 148, 0.3);
}

.gob-public-svc-name {
  font-family: var(--gob-font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--gob-cream);
  margin: 0 0 0.5rem 0;
}

.gob-public-svc-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--gob-muted);
  margin: 0;
}

.gob-public-svc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(198, 171, 148, 0.25);
  padding-top: 0.95rem;
  margin-top: 1rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.gob-public-svc-price-wrap {
  display: flex;
  flex-direction: column;
}

.gob-public-svc-price {
  font-family: var(--gob-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gob-cream);
  letter-spacing: 0.02em;
}

.gob-public-svc-vat {
  font-size: 0.68rem;
  color: var(--gob-muted);
}

.gob-public-svc-btns {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gob-svc-select-btn {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--gob-line);
  background: transparent;
  color: var(--gob-cream);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.gob-svc-select-btn:hover {
  border-color: var(--gob-brass);
  color: var(--gob-brass);
}

.gob-svc-select-btn.selected {
  background: #7d5a3c;
  border-color: #7d5a3c;
  color: #fef2e8;
}

.gob-svc-direct-book-btn {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--gob-brass);
  background: var(--gob-brass);
  color: #282828;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.gob-svc-direct-book-btn:hover {
  background: #c6ab94;
  border-color: #c6ab94;
  transform: translateY(-1px);
}

/* ============================================================================
   FLOATING STICKY DRAWER / CART BAR
   ============================================================================ */
#services-sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 48;
  background: rgba(28, 28, 28, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(198, 171, 148, 0.45);
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.65);
  transform: translateY(120%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0.95rem 1.35rem;
}

#services-sticky-cart.visible {
  transform: translateY(0);
}

body.has-public-cart .gob-right-fabs-group {
  bottom: 6.8rem !important;
  transition: bottom 0.25s ease;
}

.gob-cart-container {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.gob-cart-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gob-cart-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gob-cream);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.gob-cart-chips {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: 44rem;
}

.gob-cart-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: rgba(223, 200, 181, 0.16);
  border: 1px solid rgba(198, 171, 148, 0.35);
  color: var(--gob-cream);
  font-size: 0.78rem;
}

.gob-cart-chip button {
  background: none;
  border: none;
  color: var(--gob-muted);
  cursor: pointer;
  padding: 0 0.15rem;
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
}

.gob-cart-chip button:hover {
  color: #ff6b6b;
}

.gob-cart-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .gob-cart-container {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .gob-cart-actions {
    justify-content: space-between;
  }
  .gob-cart-actions button {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
  body.has-public-cart .gob-right-fabs-group {
    bottom: 10.5rem !important;
  }
}

/* ==========================================================================
   WEBNODE-GRADE VISUAL BUILDER SUITE (THE SALON)
   ========================================================================== */

/* 1. Enhanced Main Bottom Toolbar */
.gob-editor-toolbar {
  position: fixed !important;
  left: 50% !important;
  bottom: 1rem !important;
  transform: translateX(-50%) !important;
  z-index: 99990 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(28, 28, 30, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid #c59b6d !important;
  border-radius: 9999px !important;
  padding: 0.45rem 0.85rem !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(197, 155, 109, 0.25) !important;
  color: #fef2e8 !important;
  max-width: 96vw !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

.gob-editor-toolbar::-webkit-scrollbar {
  display: none;
}

.gob-editor-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #dfc8b5;
}

.gob-editor-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.gob-editor-status-dot.is-draft {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.gob-editor-sep {
  width: 1px;
  height: 1.4rem;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 0.15rem;
}

/* Device Switcher Pills */
.gob-device-switcher {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 9999px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.gob-device-btn {
  background: transparent;
  border: none;
  color: #a8a29e;
  padding: 0.25rem 0.52rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.gob-device-btn svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.gob-device-btn:hover {
  color: #fef2e8;
  background: rgba(255, 255, 255, 0.08);
}

.gob-device-btn.active {
  background: #c59b6d;
  color: #1c1917;
  box-shadow: 0 2px 8px rgba(197, 155, 109, 0.4);
}

.gob-device-btn.active svg {
  stroke: #1c1917;
}

/* Modern Luxury Action Buttons on Builder Toolbar */
.gob-editor-btn {
  padding: 0.34rem 0.62rem;
  border-radius: 9999px;
  border: 1px solid rgba(197, 155, 109, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fef2e8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}

.gob-editor-btn svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.gob-editor-btn:hover:not(:disabled) {
  border-color: #c59b6d;
  background: rgba(197, 155, 109, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gob-editor-btn:hover:not(:disabled) svg {
  transform: scale(1.1);
}

.gob-editor-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

.gob-editor-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  border-color: rgba(197, 155, 109, 0.2);
}

.gob-editor-btn-primary {
  background: #7d5a3c;
  color: #fef2e8;
  border-color: #c59b6d;
}

.gob-editor-btn-primary:hover:not(:disabled) {
  background: #c59b6d;
  color: #1c1917;
  border-color: #dfad7a;
}

.gob-editor-btn-danger {
  background: rgba(201, 42, 42, 0.2);
  color: #ffc9c9;
  border-color: rgba(201, 42, 42, 0.45);
}

.gob-editor-btn-danger:hover:not(:disabled) {
  background: #c92a2a;
  color: #fff;
  border-color: #c92a2a;
}

.gob-editor-btn-icon,
.gob-editor-btn:not(:has(span)) {
  padding: 0.38rem 0.52rem;
  min-width: 1.95rem;
  justify-content: center;
}

.gob-editor-btn-exit {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(197, 155, 109, 0.45);
  color: #fef2e8;
  padding: 0.38rem 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gob-editor-btn-exit svg {
  color: #dfad7a;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
}

.gob-editor-btn-exit:hover:not(:disabled) {
  background: rgba(201, 42, 42, 0.28);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.gob-editor-btn-exit:hover:not(:disabled) svg {
  color: #ffffff;
  transform: rotate(90deg) scale(1.15);
}

/* Team Card Booking Button: Luxury Black Button */
article a[data-staff-book-id],
article button[data-staff-book-id],
[data-carousel-track] a[data-staff-book-id],
[data-carousel-track] button[data-staff-book-id] {
  background: #23201e !important;
  color: #fef2e8 !important;
  border: 1px solid #3c342f !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-card, 0.5rem) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  transition: all 0.18s ease !important;
}
article a[data-staff-book-id]:hover,
article button[data-staff-book-id]:hover,
[data-carousel-track] a[data-staff-book-id]:hover,
[data-carousel-track] button[data-staff-book-id]:hover {
  background: #3a3430 !important;
  color: #ffffff !important;
  border-color: #c59b6d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32) !important;
}
article a[data-staff-book-id] svg,
article button[data-staff-book-id] svg,
[data-carousel-track] a[data-staff-book-id] svg {
  stroke: #c59b6d !important;
  margin-right: 0.45rem !important;
}

/* Team Card Admin Action Buttons (High contrast, clearly legible) */
article button[data-edit-staff-id],
article button[data-toggle-team-visibility],
[data-carousel-track] button[data-edit-staff-id],
[data-carousel-track] button[data-toggle-team-visibility] {
  background: #ffffff !important;
  color: #38281d !important;
  border: 1.5px solid #b8977a !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  font-size: 0.72rem !important;
  box-shadow: 0 2px 6px rgba(60, 42, 28, 0.09) !important;
  padding: 0.44rem 0.65rem !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  transition: all 0.16s ease !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
article button[data-edit-staff-id]:hover,
article button[data-toggle-team-visibility]:hover,
[data-carousel-track] button[data-edit-staff-id]:hover,
[data-carousel-track] button[data-toggle-team-visibility]:hover {
  background: #f7eee3 !important;
  border-color: #7d5a3c !important;
  color: #1a1008 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(60, 42, 28, 0.2) !important;
}
article button[data-edit-staff-id] svg,
[data-carousel-track] button[data-edit-staff-id] svg {
  stroke: #7d5a3c !important;
}
article button[data-toggle-team-visibility][data-make-visible="1"] {
  background: #fff8f0 !important;
  border-color: #d4a773 !important;
  color: #634320 !important;
}

/* 2. Responsive Preview Frame on <main> */
.gob-responsive-preview-active {
  background: #121214 !important;
  min-height: 100vh !important;
  transition: all 0.25s ease-out !important;
}

.gob-responsive-preview-banner {
  background: #282828;
  color: #dfad7a;
  border-bottom: 1px solid #7d5a3c;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.gob-responsive-preview-container {
  margin: 2rem auto !important;
  border: 10px solid #282828 !important;
  border-radius: 36px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(197, 155, 109, 0.3) !important;
  overflow: hidden !important;
  background: #fef2e8 !important;
  transition: max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. Floating Section Action Bars */
.gob-wb-section-bar {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: 45;
  display: none;
  align-items: center;
  gap: 0.35rem;
  background: rgba(28, 28, 30, 0.94);
  backdrop-filter: blur(10px);
  border: 1.5px solid #c59b6d;
  border-radius: 9999px;
  padding: 0.3rem 0.55rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.gob-edit-mode main > section {
  position: relative;
}

body.gob-edit-mode main > section:hover .gob-wb-section-bar,
body.gob-edit-mode main > section.is-selected-section .gob-wb-section-bar {
  display: inline-flex !important;
}

.gob-wb-section-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #dfad7a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.35rem;
}

.gob-wb-sec-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fef2e8;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.gob-wb-sec-btn:hover {
  background: #c59b6d;
  color: #1c1917;
  border-color: #c59b6d;
}

.gob-wb-sec-btn-danger:hover {
  background: #c92a2a;
  color: #fff;
  border-color: #c92a2a;
}

.gob-wb-glow-pill {
  transition: all 0.18s ease;
}

.gob-wb-glow-pill.active {
  background: #c59b6d !important;
  color: #1c1917 !important;
  border-color: #dfad7a !important;
  box-shadow: 0 0 10px rgba(197, 155, 109, 0.45);
}

/* 4. Docked / Floating Right Design Inspector Panel */
.gob-wb-design-panel {
  position: fixed;
  right: 1rem;
  top: 4.5rem;
  bottom: 5.25rem;
  width: 340px;
  max-width: 92vw;
  z-index: 85;
  background: rgba(28, 28, 30, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid #c59b6d;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(197, 155, 109, 0.2);
  display: flex;
  flex-direction: column;
  color: #fef2e8;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.gob-wb-design-panel[hidden] {
  display: none !important;
}

.gob-wb-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(197, 155, 109, 0.25);
  background: rgba(0, 0, 0, 0.2);
}

.gob-wb-panel-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dfad7a;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gob-wb-panel-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gob-wb-panel-tab {
  flex: 1;
  text-align: center;
  background: transparent;
  border: none;
  color: #a8a29e;
  padding: 0.65rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.gob-wb-panel-tab:hover {
  color: #fef2e8;
}

.gob-wb-panel-tab.active {
  color: #c59b6d;
  border-bottom-color: #c59b6d;
  background: rgba(197, 155, 109, 0.08);
}

.gob-wb-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gob-wb-panel-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.gob-wb-panel-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #dfad7a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gob-wb-panel-input,
.gob-wb-panel-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(197, 155, 109, 0.35);
  border-radius: 8px;
  color: #fef2e8;
  padding: 0.5rem 0.75rem;
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.15s;
}

.gob-wb-panel-input:focus,
.gob-wb-panel-select:focus {
  border-color: #c59b6d;
  box-shadow: 0 0 0 2px rgba(197, 155, 109, 0.25);
}

.gob-wb-panel-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(197, 155, 109, 0.35);
  border-radius: 6px;
  outline: none;
  accent-color: #c59b6d;
  cursor: pointer;
}

.gob-wb-panel-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c59b6d;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  border: 2px solid #fff;
  transition: transform 0.1s ease;
}

.gob-wb-panel-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.gob-wb-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.gob-wb-palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.gob-wb-palette-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.gob-wb-palette-btn:hover {
  transform: scale(1.15);
  border-color: #fff;
}

.gob-wb-palette-btn.active {
  border-color: #c59b6d;
  box-shadow: 0 0 0 2px #fff;
}

/* 5. Section Catalog Library Modal */
.gob-wb-catalog-modal {
  max-width: 58rem;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: #1c1917;
  color: #fef2e8;
  border: 1.5px solid #c59b6d;
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65);
  padding: 1.75rem;
}

.gob-wb-cat-filter-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gob-wb-cat-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #d6d3d1;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-wb-cat-pill:hover {
  background: rgba(197, 155, 109, 0.2);
  color: #fef2e8;
}

.gob-wb-cat-pill.active {
  background: #c59b6d;
  color: #1c1917;
  border-color: #c59b6d;
}

.gob-wb-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

.gob-wb-tpl-card {
  background: rgba(40, 40, 40, 0.65);
  border: 1px solid rgba(197, 155, 109, 0.25);
  border-radius: 12px;
  padding: 1.1rem;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gob-wb-tpl-card:hover {
  transform: translateY(-3px);
  border-color: #c59b6d;
  background: rgba(60, 60, 60, 0.8);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.gob-wb-tpl-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #dfad7a;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gob-wb-tpl-desc {
  font-size: 0.78rem;
  color: #a8a29e;
  line-height: 1.45;
}

.gob-wb-tpl-preview {
  height: 90px;
  background: #282828;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #78716c;
  padding: 0.5rem;
  text-align: center;
}




/* Status Badges */
.gob-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.gob-status-badge.is-confirmed {
  background: #EBF7EE;
  border: 1px solid #C3E6CB;
  color: #237836;
}

.gob-status-badge.is-pending {
  background: #FFF4E6;
  border: 1px solid #FFE0B2;
  color: #B45309;
}

.gob-status-badge.is-completed {
  background: #EBF7EE;
  border: 1px solid #C3E6CB;
  color: #237836;
}

.gob-status-badge.is-rejected {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
}

.gob-status-badge.is-cancelled {
  background: #F8F9FA;
  border: 1px solid #E9ECEF;
  color: #6C757D;
}

.gob-status-badge.is-no-show {
  background: #FFF0F6;
  border: 1px solid #FFD6E7;
  color: #C41D7F;
}

.gob-booking-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #DC2626;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-booking-call-btn:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #B91C1C;
  transform: translateY(-1px);
}


/* Collapsible Modern Booking Card */
.gob-my-booking-card-modern {
  background: #FFFFFF;
  border: 1px solid #EAE4DA;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(109, 76, 51, 0.05);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.gob-my-booking-card-modern:hover {
  box-shadow: 0 6px 20px rgba(109, 76, 51, 0.09);
  border-color: #D6CEBE;
}

.gob-my-booking-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1.15rem;
  background: #FAF8F5;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.18s ease;
  gap: 0.75rem;
  border-bottom: 1px solid transparent;
}

.gob-my-booking-card-top:hover {
  background: #F4EFEA;
}

.gob-my-booking-card-modern.is-expanded .gob-my-booking-card-top {
  border-bottom-color: #EAE4DA;
}

.gob-my-booking-card-top-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.gob-my-booking-card-top-right .gob-booking-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #FFF5F5;
  border: 1px solid #FFC9C9;
  color: #C92A2A;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-my-booking-card-top-right .gob-booking-cancel-btn:hover {
  background: #FFE3E3;
  border-color: #FA5252;
  transform: translateY(-1px);
}

.gob-my-booking-card-top-right .gob-booking-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #DC2626;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-my-booking-card-top-right .gob-booking-call-btn:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #B91C1C;
}

.gob-my-booking-card-top-right .gob-booking-rebook-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #FAF8F5;
  border: 1px solid #D6CEBE;
  color: #4A4035;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  outline: none;
}

.gob-my-booking-card-top-right .gob-booking-rebook-btn:hover {
  background: #FAF5ED;
  border-color: #7D5A3C;
  color: #7D5A3C;
}

.gob-booking-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #8C8074;
  transition: transform 0.22s ease;
  margin-left: 0.15rem;
}

.gob-my-booking-card-modern.is-expanded .gob-booking-chevron {
  transform: rotate(180deg);
}

.gob-my-booking-details {
  display: none;
}

.gob-my-booking-card-modern.is-expanded .gob-my-booking-details {
  display: block;
  animation: gobFadeIn 0.2s ease;
}



/* ==========================================================================
   THE SALON - AUTH MODAL (BEJELENTKEZÉS) 2026 SPEC
   Optimized Mobile Login Prototype Integration
   ========================================================================== */
dialog.gob-auth-dialog {
  --cream: #fffdfb;
  --bg: #f8f5f1;
  --border: #e8d9c9;
  --ink: #28180e;
  --brown: #9b6236;
  --muted: #886b56;
  --focus: #ad7546;

  width: min(100%, 398px);
  max-width: 398px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border-radius: 18px;
  border: 1px solid #e5d6c6;
  box-shadow: 0 14px 30px rgba(27, 20, 15, 0.27);
  background: rgba(255, 253, 249, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ink, #28180e);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d3bda7 transparent;
  box-sizing: border-box;
}

dialog.gob-auth-dialog::backdrop {
  background: rgba(26, 19, 15, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

dialog.gob-auth-dialog .modal,
dialog.gob-auth-dialog .gob-auth-modal-wrapper,
dialog.gob-auth-dialog .login-card {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

dialog.gob-auth-dialog .header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 14px;
  min-height: 68px;
  border-bottom: 1px solid rgba(232, 220, 207, 0.7);
  background: transparent;
  box-sizing: border-box;
}

dialog.gob-auth-dialog .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  user-select: none;
  z-index: 1;
}

dialog.gob-auth-dialog .brand-name {
  font: 400 16.8px/1.15 Georgia, 'Times New Roman', serif !important;
  letter-spacing: 3.2px !important;
  color: #1e150e !important;
  margin: 0 !important;
  display: block;
}

dialog.gob-auth-dialog .brand-city {
  font: 700 7.8px/1.4 Arial, Helvetica, sans-serif !important;
  letter-spacing: 2.8px !important;
  color: #935b2e !important;
  margin-top: 3.5px !important;
  display: block;
}

dialog.gob-auth-dialog .brand-sep {
  display: none !important;
}

dialog.gob-auth-dialog .header-title {
  display: none !important;
}

dialog.gob-auth-dialog .close {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 1px solid #dac1a7 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: #63492d !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: transform 0.15s, background 0.15s, border-color 0.15s !important;
  outline: none !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

dialog.gob-auth-dialog .close:hover {
  background: #f7eee6 !important;
  border-color: #cdb49d !important;
  transform: translateY(-50%) rotate(90deg) !important;
}

dialog.gob-auth-dialog .close:hover {
  background: #f7eee6;
  border-color: #cdb49d;
  transform: rotate(90deg);
}

dialog.gob-auth-dialog .close svg {
  width: 15px;
  height: 15px;
}

dialog.gob-auth-dialog .hero {
  text-align: center;
  padding: 22px 20px 0;
}

dialog.gob-auth-dialog .hero h2 {
  font: 400 clamp(30px, 7.5vw, 36px)/1.15 Georgia, 'Times New Roman', serif !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  color: #1e150e !important;
}

dialog.gob-auth-dialog .hero p {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14.5px !important;
  color: #7d6552 !important;
  line-height: 1.45 !important;
  margin: 8px 0 16px !important;
}

dialog.gob-auth-dialog .content {
  padding: 0 15px;
  box-sizing: border-box;
}

dialog.gob-auth-dialog .gob-auth-error-box {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff5f5;
  border: 1px solid #ffc9c9;
  color: #c92a2a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

dialog.gob-auth-dialog .providers {
  display: grid;
  gap: 9px;
}

dialog.gob-auth-dialog .provider {
  height: 54px;
  border-radius: 15px;
  background: #fffdfb;
  border: 1px solid var(--border, #e8d9c9);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
  color: #5c5147;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
}

dialog.gob-auth-dialog .provider:hover {
  background: #faf4ee;
  border-color: #d5baa1;
}

dialog.gob-auth-dialog .provider:active {
  transform: scale(0.995);
}

dialog.gob-auth-dialog .provider-icon {
  width: 30px;
  height: 30px;
  justify-self: center;
  grid-column: 1;
  display: block;
}

dialog.gob-auth-dialog button[data-provider="Apple"] .provider-icon,
dialog.gob-auth-dialog .provider[data-provider="Apple"] .provider-icon,
dialog.gob-auth-dialog [data-provider-btn="apple"] .provider-icon {
  transform: scale(1.28) !important;
  transform-origin: center center !important;
}

dialog.gob-auth-dialog button[data-provider="Apple"] .provider-icon path,
dialog.gob-auth-dialog .provider[data-provider="Apple"] .provider-icon path,
dialog.gob-auth-dialog [data-provider-btn="apple"] .provider-icon path {
  fill: #000000 !important;
}

dialog.gob-auth-dialog .provider-label {
  grid-column: 2;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: -0.18px;
  color: #665950;
}

dialog.gob-auth-dialog .provider-spacer {
  display: block;
  width: 30px;
  height: 30px;
  grid-column: 3;
  justify-self: center;
}

dialog.gob-auth-dialog .terms {
  margin-top: 14px;
  padding: 13px 13px 12px;
  background: var(--cream, #fffdfb);
  border: 1px solid #e5d1bc;
  border-radius: 15px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

dialog.gob-auth-dialog .terms-top {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

dialog.gob-auth-dialog .consent {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.4px solid #a79c92;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  margin: 2px 0 0;
  display: grid;
  place-items: center;
  outline: none;
  flex-shrink: 0;
}

dialog.gob-auth-dialog .consent:checked {
  border-color: #a06a39;
  background: #9b6236;
}

dialog.gob-auth-dialog .consent:checked:after {
  content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
  display: block;
}

dialog.gob-auth-dialog .terms-text {
  font-size: 12.6px;
  line-height: 1.5;
  color: #37271d;
  letter-spacing: -0.08px;
  cursor: pointer;
  user-select: none;
}

dialog.gob-auth-dialog .terms-text strong {
  font-weight: 700;
  color: #211810;
}

dialog.gob-auth-dialog .terms-text span {
  font-weight: 400;
}

dialog.gob-auth-dialog .legal-toggle {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: #a56836;
  font-size: 11.2px;
  line-height: 1.4;
  cursor: pointer;
  margin: 12px 0 0 12px;
  padding: 0;
  max-width: calc(100% - 12px);
  text-decoration: underline;
  text-align: left;
  font-family: inherit;
  outline: none;
}

dialog.gob-auth-dialog .legal-toggle span {
  white-space: nowrap;
}

dialog.gob-auth-dialog .doc-icon {
  width: 13px;
  height: 16px;
  flex: 0 0 13px;
}

dialog.gob-auth-dialog .legal-chevron {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  transition: transform 0.15s;
}

dialog.gob-auth-dialog .legal-toggle[aria-expanded="true"] .legal-chevron {
  transform: rotate(180deg);
}

dialog.gob-auth-dialog .legal-details {
  font-size: 11.5px;
  line-height: 1.55;
  color: #725643;
  background: #f8f2ec;
  border-radius: 9px;
  padding: 9px 10px;
  margin: 10px 0 0 12px;
  max-height: 180px;
  overflow-y: auto;
}

dialog.gob-auth-dialog .legal-details[hidden] {
  display: none !important;
}

dialog.gob-auth-dialog .legal-details p {
  margin: 0 0 6px;
}

dialog.gob-auth-dialog .legal-details p:last-child {
  margin-bottom: 0;
}

dialog.gob-auth-dialog .footer,
dialog.gob-auth-dialog .modal-footer,
dialog.gob-auth-dialog footer {
  text-align: center;
  padding: 15px 12px 18px;
  margin: 0;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

dialog.gob-auth-dialog .footer p {
  margin: 0 0 7px;
  font-size: 11.6px;
  line-height: 1.4;
  color: #9b8069;
}

dialog.gob-auth-dialog .footer a {
  font-size: 11.8px;
  color: #975e34;
  text-decoration: underline;
  text-underline-offset: 2px;
}

dialog.gob-auth-dialog .provider:focus-visible,
dialog.gob-auth-dialog .close:focus-visible,
dialog.gob-auth-dialog .legal-toggle:focus-visible,
dialog.gob-auth-dialog .consent:focus-visible,
dialog.gob-auth-dialog .footer a:focus-visible {
  outline: 3px solid #b7875e !important;
  outline-offset: 2px !important;
}

@media(max-width: 355px) {
  dialog.gob-auth-dialog .legal-toggle span {
    white-space: normal;
  }
}

@media(max-width: 370px) {
  dialog.gob-auth-dialog .header {
    gap: 6px;
    padding-inline: 10px;
  }
  dialog.gob-auth-dialog .brand {
    width: auto;
  }
  dialog.gob-auth-dialog .brand-name {
    font-size: 14.5px;
    letter-spacing: 2px;
    color: #000000 !important;
  }
  dialog.gob-auth-dialog .header-title {
    font-size: clamp(21px, 6vw, 24px) !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    color: #000000 !important;
  }
  dialog.gob-auth-dialog .content {
    padding-inline: 11px;
  }
  dialog.gob-auth-dialog .provider {
    height: 52px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    padding: 0 10px;
  }
  dialog.gob-auth-dialog .provider-icon {
    width: 27px;
    height: 27px;
  }
  dialog.gob-auth-dialog .provider-spacer {
    display: block;
    width: 27px;
    height: 27px;
  }
  dialog.gob-auth-dialog .provider-label {
    font-size: 12.9px;
  }
  dialog.gob-auth-dialog .terms {
    padding: 11px;
  }
  dialog.gob-auth-dialog .terms-text {
    font-size: 12px;
  }
  dialog.gob-auth-dialog .legal-toggle {
    font-size: 11px;
  }
}

@media(max-height: 670px) {
  dialog.gob-auth-dialog {
    max-height: calc(100dvh - 16px);
  }
  dialog.gob-auth-dialog .hero {
    padding-top: 11px;
  }
  dialog.gob-auth-dialog .hero p {
    margin-bottom: 11px;
  }
  dialog.gob-auth-dialog .footer {
    padding-block: 12px;
  }
}

@media(prefers-reduced-motion: reduce) {
  dialog.gob-auth-dialog * {
    transition: none !important;
  }
}

/* Ensure no browser default blue leaks into booking and auth dialogs */
.gob-booking-dialog :focus-visible,
.gob-auth-dialog :focus-visible,
.gob-my-bookings-dialog :focus-visible {
  outline: 2px solid var(--gob-brass, #7D5A3C) !important;
  outline-offset: 2px !important;
}

.gob-booking-dialog a:not([class*="btn"]),
.gob-auth-dialog a:not([class*="btn"]),
.gob-my-bookings-dialog a:not([class*="btn"]) {
  color: var(--gob-brass, #7D5A3C);
}

.gob-booking-dialog a:not([class*="btn"]):hover,
.gob-auth-dialog a:not([class*="btn"]):hover,
.gob-my-bookings-dialog a:not([class*="btn"]):hover {
  color: var(--gob-cream, #282828);
}

/* ==========================================================================
   THE SALON – CSAPATPROFIL SZERKESZTŐ MODAL (PREMIUM 2-COLUMN MODAL)
   ========================================================================== */

dialog.gob-booking-dialog.ts-staff-profile-dialog:not([open]),
dialog.ts-staff-profile-dialog:not([open]) {
  display: none !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog[open] {
  display: flex !important;
  flex-direction: column !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog {
  width: min(96vw, 72rem);
  max-width: 72rem;
  height: min(94dvh, 50rem);
  min-height: min(88dvh, 42rem);
  max-height: 96dvh;
  margin: auto;
  padding: 0;
  background: #FAF8F5;
  color: #1F1F1F;
  border: 1px solid #E6E0D6;
  border-radius: 1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  font-family: var(--gob-font-sans);
}

.ts-sp-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.5rem;
  padding: 1rem 1.75rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-items: stretch;
  background: #FAF8F5;
}

.ts-sp-form-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-right: 0.25rem;
}

/* Avatar edit row */
.ts-sp-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 0.95rem;
  background: #FFFFFF;
  border: 1px solid #EAE4DA;
  border-radius: 0.625rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ts-sp-avatar-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #DCD5CA;
  background: #FAF5ED;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-sp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-sp-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #7C5A42;
}

.ts-sp-avatar-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ts-sp-field-title {
  font-size: 0.825rem;
  font-weight: 700;
  color: #1F1F1F;
  letter-spacing: 0.02em;
}

.ts-sp-photo-status {
  font-size: 0.72rem;
  color: #7A756D;
}

.ts-sp-avatar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.2rem;
}

.ts-sp-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7C5A42;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.ts-sp-btn-link:hover {
  color: #5A3E2B;
  text-decoration: underline;
}

.ts-sp-btn-link-sec {
  font-size: 0.72rem;
  color: #7A756D;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.ts-sp-btn-link-sec:hover {
  color: #1F1F1F;
}

.ts-sp-btn-link-danger {
  font-size: 0.72rem;
  color: #C92A2A;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.ts-sp-btn-link-danger:hover {
  text-decoration: underline;
}

.ts-sp-url-row {
  margin-top: 0.35rem;
}

/* Grid & Form fields */
.ts-sp-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.ts-sp-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ts-sp-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #282828;
  letter-spacing: 0.01em;
}

.ts-sp-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ts-sp-count {
  font-size: 0.7rem;
  color: #8C827A;
}

.ts-sp-input {
  background: #FFFFFF !important;
  border: 1px solid #DCD5CA !important;
  border-radius: 0.45rem !important;
  padding: 0.48rem 0.75rem !important;
  font-size: 0.825rem !important;
  color: #1F1F1F !important;
  height: auto !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.ts-sp-input:focus {
  border-color: #7C5A42 !important;
  box-shadow: 0 0 0 3px rgba(124, 90, 66, 0.12) !important;
  outline: none !important;
}

.ts-sp-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.ts-sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid #DCD5CA;
  background: #FAF8F5;
  color: #555555;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.ts-sp-chip:hover:not(:disabled) {
  border-color: #7C5A42;
  color: #7C5A42;
}

.ts-sp-chip.is-active {
  background: #282828;
  color: #FFFFFF;
  border-color: #282828;
}

.ts-sp-chip-add {
  border-style: dashed;
  background: transparent;
  color: #7C5A42;
  border-color: #C59B6D;
}

.ts-sp-chip-add:hover {
  background: rgba(197, 155, 109, 0.08);
}

.ts-sp-textarea {
  background: #FFFFFF !important;
  border: 1px solid #DCD5CA !important;
  border-radius: 0.45rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  color: #1F1F1F !important;
  resize: vertical !important;
  min-height: 4rem !important;
  max-height: 6.5rem !important;
  box-sizing: border-box !important;
}

.ts-sp-textarea:focus {
  border-color: #7C5A42 !important;
  box-shadow: 0 0 0 3px rgba(124, 90, 66, 0.12) !important;
  outline: none !important;
}

.ts-sp-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #282828;
  cursor: pointer;
  margin-top: 0.15rem;
  user-select: none;
}

.ts-sp-checkbox {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #282828;
  cursor: pointer;
}

/* Right column preview */
.ts-sp-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  height: 100%;
  box-sizing: border-box;
  background: #F4EFEB;
  border: 1px solid #EAE4DA;
  border-radius: 0.85rem;
  padding: 1.15rem 1.35rem 1.25rem 1.35rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ts-sp-preview-title {
  font-family: var(--gob-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1A1A1A;
  margin-bottom: 0.85rem;
  text-align: center;
}

.ts-sp-preview-card-wrap {
  width: 100%;
  max-width: 20.5rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  border-radius: 0.85rem;
  overflow: hidden;
  background: #FFFFFF;
  margin-bottom: auto;
}

.ts-sp-preview-card-wrap article {
  border: none !important;
}

.ts-sp-preview-card-wrap img {
  max-height: 17.5rem !important;
  object-fit: cover !important;
}

.ts-sp-preview-card-wrap .aspect-\[4\/5\] {
  max-height: 17.5rem !important;
}

.ts-sp-preview-card-wrap div.p-5 {
  padding: 1rem 1.15rem !important;
  gap: 0.5rem !important;
}

.ts-sp-preview-card-wrap h3 {
  font-size: 1.32rem !important;
  line-height: 1.25 !important;
}

.ts-sp-preview-card-wrap .eyebrow {
  font-size: 0.75rem !important;
}

.ts-sp-preview-card-wrap p.text-brass {
  font-size: 0.8rem !important;
  margin-top: 0.2rem !important;
}

.ts-sp-preview-card-wrap p.leading-relaxed {
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ts-sp-preview-card-wrap .btn-secondary {
  padding: 0.55rem 0.95rem !important;
  font-size: 0.78rem !important;
}

.ts-sp-preview-hint {
  font-size: 0.72rem;
  color: #7A756D;
  text-align: center;
  margin-top: auto;
  padding-top: 0.75rem;
  line-height: 1.35;
}

/* Fixed Footer action bar */
.ts-sp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  background: #FAF8F5;
  border-top: 1px solid #EAE4DA;
  flex-shrink: 0;
}

.ts-sp-footer-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ts-sp-status-text {
  font-size: 0.75rem;
  color: #7A756D;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ts-sp-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1b7f40;
  display: inline-block;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.ts-sp-status-dot.is-dirty {
  background: #D97706;
}

.ts-sp-error-box {
  font-size: 0.75rem;
  font-weight: 600;
  color: #C92A2A;
  background: rgba(201, 42, 42, 0.08);
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(201, 42, 42, 0.25);
}

.ts-sp-footer-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ts-sp-btn-cancel {
  padding: 0.55rem 1.25rem;
  border: 1px solid #DCD5CA;
  background: #FFFFFF;
  color: #444444;
  border-radius: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ts-sp-btn-cancel:hover {
  background: #F4EFEB;
  color: #111111;
  border-color: #C59B6D;
}

.ts-sp-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.5rem;
  border: none;
  background: #282828;
  color: #FFFFFF;
  border-radius: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ts-sp-btn-save:hover {
  background: #3D3D3D;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 960px) {
  dialog.gob-booking-dialog.ts-staff-profile-dialog {
    width: min(96vw, 48rem);
    height: min(94dvh, 56rem);
    max-height: 96dvh;
  }
  .ts-sp-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
  }
  .ts-sp-grid-2 {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .ts-sp-preview-col {
    height: auto !important;
    align-self: auto !important;
    padding: 1.35rem 1.5rem !important;
  }
  .ts-sp-footer {
    padding: 0.75rem 1.5rem;
  }
}

/* ==========================================================================
   Staff Profile Dialog Header & Close Button Layout (Top-Right Placement)
   ========================================================================== */
dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0.75rem !important;
  padding: 1rem 1.5rem !important;
  background: #FAF8F5 !important;
  border-bottom: 1px solid #EAE4DA !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-modal-brand {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 0 !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-brand-logo-group {
  flex-shrink: 0 !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-brand-text {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-modal-header-right {
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  flex-wrap: nowrap !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  background: #FAF5ED !important;
  border: 1px solid #DCD5CA !important;
  color: #282828 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
}

dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-close-btn:hover {
  background: #F0E8DD !important;
  color: #7D5A3C !important;
  border-color: #C59B6D !important;
  transform: scale(1.04) !important;
}

/* ==========================================================================
   Mobile-Optimized Layout (Smartphones <= 768px)
   Native app viewport, prominent readable header, 16px touch inputs
   ========================================================================== */
@media (max-width: 768px) {
  dialog.gob-booking-dialog.ts-staff-profile-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
  }

  dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-modal-header {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }

  /* On mobile, hide the redundant logo & divider so the title is big, crisp and legible */
  dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-brand-logo-group,
  dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-brand-divider {
    display: none !important;
  }

  dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-brand-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-brand-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #1A1A1A !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-brand-subtitle {
    font-size: 0.75rem !important;
    color: #7A756D !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    letter-spacing: 0.01em !important;
  }

  dialog.gob-booking-dialog.ts-staff-profile-dialog .gob-close-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .ts-sp-container {
    padding: 0.85rem 1rem 1.5rem !important;
    gap: 1.25rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ts-sp-avatar-row {
    padding: 0.75rem 0.9rem !important;
    border-radius: 10px !important;
  }

  .ts-sp-avatar-wrapper {
    width: 52px !important;
    height: 52px !important;
  }

  .ts-sp-avatar-actions {
    gap: 0.65rem !important;
  }

  .ts-sp-btn-link,
  .ts-sp-btn-link-sec,
  .ts-sp-btn-link-danger {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.78rem !important;
  }

  /* 16px font-size prevents iOS Safari from automatically zooming in */
  .ts-sp-input,
  .ts-sp-textarea {
    font-size: 16px !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .ts-sp-input {
    min-height: 44px !important;
  }

  .ts-sp-textarea {
    min-height: 5.5rem !important;
    max-height: 8.5rem !important;
  }

  .ts-sp-chips-group {
    gap: 0.45rem !important;
  }

  .ts-sp-chip {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .ts-sp-checkbox-row {
    min-height: 42px !important;
    font-size: 0.85rem !important;
    margin-top: 0.25rem !important;
  }

  .ts-sp-checkbox {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }

  .ts-sp-preview-col {
    padding: 1.15rem 1rem !important;
    border-radius: 12px !important;
    margin-top: 0.25rem !important;
  }

  .ts-sp-preview-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
  }

  .ts-sp-preview-card-wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .ts-sp-footer {
    padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) 0.85rem !important;
    gap: 0.5rem !important;
  }

  .ts-sp-footer-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .ts-sp-status-text {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .ts-sp-status-dot {
    flex-shrink: 0 !important;
  }

  .ts-sp-footer-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-shrink: 0 !important;
  }

  .ts-sp-btn-cancel,
  .ts-sp-btn-save {
    min-height: 38px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    box-sizing: border-box !important;
  }

  .ts-sp-btn-cancel {
    padding: 0.5rem 0.8rem !important;
  }

  .ts-sp-btn-save {
    padding: 0.5rem 0.95rem !important;
  }
}

/* ==========================================================================
   THE SALON – UNIFIED PREMIUM DIALOGS & NOTIFICATION SYSTEM
   (SalonConfirmDialog, SalonAlertDialog, SalonPromptDialog, SalonToast)
   ========================================================================== */

dialog.salon-dialog-backdrop,
.salon-dialog-backdrop {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border: none;
  outline: none;
  z-index: 2147483647;
  background: rgba(22, 19, 16, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  box-sizing: border-box;
}

dialog.salon-dialog-backdrop[open] {
  display: flex !important;
}

dialog.salon-dialog-backdrop:not([open]) {
  display: none !important;
}

dialog.salon-dialog-backdrop::backdrop {
  background: transparent !important;
}

.salon-dialog-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.salon-dialog-window {
  background: #faf6f0;
  border: 1px solid #e7ded4;
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(22, 18, 14, 0.28), 0 8px 24px rgba(22, 18, 14, 0.12);
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.salon-dialog-backdrop.is-open .salon-dialog-window {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.salon-dialog-header {
  padding: 1.15rem 1.6rem 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #ebdcd0;
  background: #faf6f0;
}

.salon-dialog-brand {
  display: flex;
  flex-direction: column;
}

.salon-dialog-logo {
  font-family: var(--gob-font-display, "Playfair Display", Georgia, serif);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1e1915;
  font-weight: 600;
  line-height: 1.2;
}

.salon-dialog-city {
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8e7c6d;
  font-weight: 600;
  margin-top: 1px;
}

.salon-dialog-category {
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8e7c6d;
  font-weight: 600;
}

.salon-dialog-card {
  margin: 1.25rem 1.5rem 1rem;
  background: #ffffff;
  border: 1px solid #ebdcd0;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

.salon-dialog-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.salon-dialog-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f4ede5;
  border: 1px solid #e5d8cb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a2e24;
  flex-shrink: 0;
}

.salon-dialog-icon-badge.danger {
  background: #fbf0ed;
  border-color: #ebd0c8;
  color: #a13d2d;
}

.salon-dialog-icon-badge.success {
  background: #eef6ee;
  border-color: #d1e5d1;
  color: #286b36;
}

.salon-dialog-icon-badge.warning {
  background: #fdf6ec;
  border-color: #f4dfc4;
  color: #9c6818;
}

.salon-dialog-card-tag {
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9c8472;
  font-weight: 600;
  padding-top: 4px;
}

.salon-dialog-title {
  font-family: var(--gob-font-display, "Playfair Display", Georgia, serif);
  font-size: 1.32rem;
  color: #1e1915;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.55rem;
}

.salon-dialog-message {
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 0.92rem;
  color: #625950;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  word-break: break-word;
}

.salon-dialog-input {
  width: 100%;
  height: 42px;
  background: #faf8f5;
  border: 1px solid #dcd2c6;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.92rem;
  color: #1e1915;
  margin-bottom: 1.25rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}

.salon-dialog-input:focus {
  border-color: #7D5A3C;
  background: #ffffff;
}

.salon-dialog-divider {
  border: none;
  border-top: 1px solid #eee5dc;
  margin: 1.15rem 0;
}

.salon-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.salon-dialog-btn-primary {
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  background: #1c1917;
  color: #ffffff;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  font-family: inherit;
  box-sizing: border-box;
}

.salon-dialog-btn-primary:hover {
  background: #322d29;
}

.salon-dialog-btn-primary:active {
  transform: scale(0.99);
}

.salon-dialog-btn-secondary {
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  background: #ffffff;
  color: #3a322b;
  border: 1px solid #dbd1c5;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: inherit;
  box-sizing: border-box;
}

.salon-dialog-btn-secondary:hover {
  background: #f7f2eb;
  border-color: #cbbfb2;
}

.salon-dialog-btn-danger {
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  background: #ffffff;
  color: #9a3424;
  border: 1px solid #e8c0ba;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: inherit;
  box-sizing: border-box;
}

.salon-dialog-btn-danger:hover {
  background: #fdf2f0;
  border-color: #dfa8a0;
}

.salon-dialog-footnote {
  font-size: 0.78rem;
  color: #8e8072;
  text-align: center;
  margin: 0 1.5rem 1.25rem;
  line-height: 1.4;
}

/* --- THE SALON TOAST SYSTEM --- */
.salon-toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 200500;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
  width: 380px;
}

.salon-toast {
  pointer-events: auto;
  background: #faf6f0;
  border: 1px solid #e7ded4;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  box-shadow: 0 12px 32px rgba(24, 20, 16, 0.14), 0 4px 12px rgba(24, 20, 16, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  transform: translateX(24px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  box-sizing: border-box;
}

.salon-toast.is-show {
  transform: translateX(0);
  opacity: 1;
}

.salon-toast.is-hiding {
  transform: translateX(24px);
  opacity: 0;
}

.salon-toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.salon-toast-icon.success {
  background: #eef6ee;
  color: #2e6935;
  border: 1px solid #d4e7d4;
}

.salon-toast-icon.error {
  background: #fdf2f0;
  color: #a13d2d;
  border: 1px solid #f2cfc9;
}

.salon-toast-icon.warning {
  background: #fef7ed;
  color: #9c6818;
  border: 1px solid #f6dfbe;
}

.salon-toast-icon.info {
  background: #f3eee7;
  color: #4a3e33;
  border: 1px solid #e4dacd;
}

.salon-toast-content {
  flex: 1;
  min-width: 0;
}

.salon-toast-msg {
  font-size: 0.84rem;
  color: #4a3f36;
  line-height: 1.45;
  word-break: break-word;
  font-family: "Inter", -apple-system, sans-serif;
}

.salon-toast-close {
  background: none;
  border: none;
  padding: 4px;
  color: #8e7c6d;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.salon-toast-close:hover {
  color: #1e1915;
  background: #ede3d7;
}

@media (max-width: 640px) {
  .salon-toast-container {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-width: 100%;
  }
}

/* ==========================================================================
   THE SALON: PRÉMIUM BEÁLLÍTÁSOK MODAL RENDSZER (KÖZPONTI MEGJELENÉS)
   ========================================================================== */
.ts-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(30, 25, 20, 0.58);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ts-settings-backdrop.open,
.ts-settings-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ts-settings-window {
  width: min(96vw, 1120px);
  max-width: 1120px;
  height: min(92vh, 800px);
  max-height: 92vh;
  background: #FAF8F5;
  color: #1F1F1F;
  border: 1px solid #E6E0D6;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.97);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--gob-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.ts-settings-backdrop.open .ts-settings-window,
.ts-settings-backdrop.active .ts-settings-window {
  transform: scale(1);
}

/* Modal Header */
.ts-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 2rem;
  background: #FAF8F5;
  border-bottom: 1px solid #EAE4DA;
  flex-shrink: 0;
}

.ts-settings-header-brand {
  display: flex;
  align-items: center;
  gap: 0;
}

.ts-brand-logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ts-brand-logo {
  font-family: var(--gob-font-display, "Playfair Display", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1A1A1A;
}

.ts-brand-city {
  font-family: var(--gob-font-body, "Inter", system-ui, sans-serif);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: #666666;
  text-align: center;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.ts-brand-divider {
  width: 1px;
  height: 38px;
  background: #DCD5CA;
  margin: 0 1.5rem;
}

.ts-brand-text {
  display: flex;
  flex-direction: column;
}

.ts-brand-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1A1A1A;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

.ts-brand-subtitle {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  color: #7A756D;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.ts-settings-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Modal Body: 2 Columns */
.ts-settings-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left Sidebar */
.ts-settings-sidebar {
  width: 270px;
  flex-shrink: 0;
  background: #FAF5ED;
  border-right: 1px solid #EAE4DA;
  padding: 1.25rem 0.9rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.ts-settings-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ts-settings-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8C7B6D;
  text-transform: uppercase;
  padding: 0 0.6rem 0.35rem 0.6rem;
}

.ts-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #3A3530;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.ts-settings-nav-item:hover {
  background: #FFFFFF;
  border-color: #E2D9CB;
  color: #282828;
}

.ts-settings-nav-item.active {
  background: #1C1917;
  border-color: #1C1917;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(40,40,40,0.12);
}

.ts-settings-nav-item .ts-settings-nav-icon {
  flex-shrink: 0;
  color: #7D5A3C;
  transition: color 0.15s ease;
}

.ts-settings-nav-item.active .ts-settings-nav-icon {
  color: #FFFFFF;
}

/* Right Workspace */
.ts-settings-workspace {
  flex: 1;
  min-width: 0;
  background: #FFFFFF;
  padding: 1.75rem 2.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ts-settings-view {
  display: none;
  flex-direction: column;
}

.ts-settings-view.active {
  display: flex;
}

.ts-settings-view-header {
  margin-bottom: 1.25rem;
}

.ts-settings-view-title {
  font-family: var(--gob-font-display, "Playfair Display", Georgia, serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: #282828;
  margin: 0 0 0.25rem 0;
}

.ts-settings-view-sub {
  font-size: 0.84rem;
  color: #8C7B6D;
  margin: 0;
  text-shadow: none !important;
  filter: none !important;
}

/* Strict isolation: prevent any text-shadow or filter leakage inside settings modal */
#ts-settings-modal,
#ts-settings-modal *,
.ts-settings-workspace,
.ts-settings-workspace * {
  text-shadow: none !important;
  filter: none !important;
}

/* Common Settings Cards */
.ts-settings-card {
  background: #FAF5ED;
  border: 1px solid #E2D9CB;
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.15rem;
}

.ts-settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #EAE4DA;
}

.ts-settings-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: #282828;
  margin: 0;
}

.ts-settings-card-desc {
  font-size: 0.8rem;
  color: #8C7B6D;
  margin: 0.2rem 0 0.75rem 0;
  line-height: 1.45;
}

/* Tables in Settings */
.ts-settings-table {
  width: 100%;
  border-collapse: collapse;
}

.ts-settings-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8C7B6D;
  text-transform: uppercase;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #E2D9CB;
}

.ts-settings-table td {
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid #F0EAE1;
  font-size: 0.86rem;
  color: #282828;
  vertical-align: middle;
}

.ts-settings-table tr:last-child td {
  border-bottom: none;
}

/* Time Inputs */
.ts-sett-time-input {
  height: 34px;
  padding: 0 0.5rem;
  border: 1px solid #E2D9CB;
  border-radius: 6px;
  background: #FFFFFF;
  color: #282828;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: inherit;
  outline: none;
}

.ts-sett-time-input:focus {
  border-color: #7D5A3C;
}

.ts-sett-time-input:disabled {
  background: #F0EAE1;
  color: #A09488;
  cursor: not-allowed;
}

/* Badges */
.ts-sett-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.ts-sett-status-pill.open {
  background: rgba(27,127,64,0.12);
  color: #1B7F40;
  border: 1px solid rgba(27,127,64,0.25);
}

.ts-sett-status-pill.closed {
  background: rgba(201,42,42,0.12);
  color: #C92A2A;
  border: 1px solid rgba(201,42,42,0.25);
}

/* Opening Hours Android Switch & Status Indicator */
.ts-hours-toggle-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  padding: 2px 0;
}

.ts-hours-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.ts-hours-status-badge.open {
  background: rgba(46, 125, 50, 0.12);
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.28);
}

.ts-hours-status-badge.closed {
  background: rgba(140, 123, 109, 0.14);
  color: #8C7B6D;
  border: 1px solid rgba(140, 123, 109, 0.28);
}

/* Android Material-style Toggle Switch */
.ts-android-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.ts-android-switch:focus-visible .ts-android-switch-track {
  box-shadow: 0 0 0 3px rgba(125, 90, 60, 0.28);
}

.ts-android-switch-track {
  position: relative;
  display: block;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #D8CEC2;
  border: 1.5px solid #BCB0A2;
  box-sizing: border-box;
  transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.ts-android-switch.on .ts-android-switch-track {
  background: #7D5A3C;
  border-color: #7D5A3C;
}

.ts-android-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.ts-android-switch.off .ts-android-switch-thumb {
  transform: translateX(0px);
}

.ts-android-switch.on .ts-android-switch-thumb {
  transform: translateX(22px);
}

@media (max-width: 640px) {
  .ts-hours-table {
    min-width: 320px;
  }
  .ts-hours-table th, 
  .ts-hours-table td {
    padding: 0.45rem 0.3rem;
  }
  .ts-sett-day-label {
    font-size: 0.8rem;
  }
  .ts-hours-toggle-wrap {
    gap: 6px;
  }
  .ts-hours-status-badge {
    min-width: 48px;
    padding: 3px 5px;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }
  .ts-android-switch {
    width: 44px;
    height: 24px;
  }
  .ts-android-switch-track {
    width: 44px;
    height: 24px;
  }
  .ts-android-switch-thumb {
    width: 17px;
    height: 17px;
    top: 2px;
    left: 2px;
  }
  .ts-android-switch.on .ts-android-switch-thumb {
    transform: translateX(20px);
  }
}

@media (max-width: 380px) {
  .ts-hours-table th, 
  .ts-hours-table td {
    padding: 0.4rem 0.2rem;
  }
  .ts-hours-status-badge {
    min-width: 44px;
    padding: 2px 4px;
    font-size: 0.64rem;
  }
}

/* Info Box */
.ts-settings-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: #F4EFE6;
  border: 1px solid #E2D9CB;
  margin: 1rem 0;
}

.ts-settings-info-box .ts-info-icon {
  color: #7D5A3C;
  flex-shrink: 0;
  margin-top: 2px;
}

.ts-settings-info-box .ts-info-text strong {
  display: block;
  font-size: 0.84rem;
  color: #282828;
  margin-bottom: 0.2rem;
}

.ts-settings-info-box .ts-info-text p {
  margin: 0;
  font-size: 0.78rem;
  color: #6C5F54;
  line-height: 1.4;
}

/* Action Buttons */
.ts-sett-btn-primary-full {
  width: 100%;
  height: 44px;
  background: #1C1917;
  color: #FFFFFF;
  border: 1px solid #1C1917;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
}

.ts-sett-btn-primary-full:hover {
  background: #2D2825;
  border-color: #2D2825;
}

.ts-sett-btn-secondary {
  height: 38px;
  padding: 0 1.15rem;
  background: #FFFFFF;
  color: #282828;
  border: 1px solid #E2D9CB;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.15s ease;
}

.ts-sett-btn-secondary:hover {
  background: #FAF5ED;
  border-color: #282828;
}

.ts-sett-btn-link {
  color: #7D5A3C;
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.ts-sett-btn-link:hover {
  color: #282828;
}

.ts-sett-status {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  display: none;
}

.ts-sett-status.success {
  display: block;
  background: rgba(27,127,64,0.1);
  color: #1B7F40;
  border: 1px solid rgba(27,127,64,0.3);
}

.ts-sett-status.error {
  display: block;
  background: rgba(201,42,42,0.1);
  color: #C92A2A;
  border: 1px solid rgba(201,42,42,0.3);
}

/* Toggle row item */
.ts-sett-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid #F0EAE1;
}

.ts-sett-toggle-row:last-child {
  border-bottom: none;
}

.ts-sett-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #282828;
}

.ts-sett-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.ts-sett-toggle-wrap input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #7D5A3C;
  cursor: pointer;
}

.ts-sett-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  font-weight: 700;
  color: #282828;
  background: #FAF5ED;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #E2D9CB;
}

.ts-sett-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(27,127,64,0.12);
  color: #1B7F40;
  font-size: 0.74rem;
  font-weight: 700;
}

.ts-sett-pill-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ts-sett-filter-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #E2D9CB;
  background: #FFFFFF;
  color: #5A4D42;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ts-sett-filter-pill:hover {
  border-color: #282828;
  color: #282828;
}

.ts-sett-filter-pill.active {
  background: #1C1917;
  border-color: #1C1917;
  color: #FFFFFF;
}

.ts-settings-error-card {
  padding: 2rem 1.5rem;
  text-align: center;
  background: #FAF5ED;
  border: 1px dashed #E2D9CB;
  border-radius: 12px;
  margin: 1rem 0;
}

.ts-settings-error-icon {
  color: #C92A2A;
  margin-bottom: 0.5rem;
}

.ts-settings-error-card h4 {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  color: #282828;
}

.ts-settings-error-card p {
  margin: 0 0 1rem 0;
  font-size: 0.82rem;
  color: #8C7B6D;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   THE SALON: WEBOLDAL KATEGÓRIA 4-FÜLES ALMENÜ STÍLUSOK
   ========================================================================== */
.ts-web-subtabs-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #EAE4DA;
  overflow-x: auto;
  flex-wrap: wrap;
}

.ts-web-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 36px;
  padding: 0 0.95rem;
  border-radius: 8px;
  border: 1px solid #E2D9CB;
  background: #FAF5ED;
  color: #5A4D42;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ts-web-tab-btn:hover {
  background: #FFFFFF;
  border-color: #282828;
  color: #282828;
}

.ts-web-tab-btn.active {
  background: #1C1917;
  border-color: #1C1917;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.15);
}

.ts-web-tab-btn.active i,
.ts-web-tab-btn.active svg {
  color: #FFFFFF;
}

.ts-web-pane {
  display: none;
  flex-direction: column;
}

.ts-web-pane.active {
  display: flex;
}

@media (max-width: 900px) {
  .ts-settings-window {
    width: 96vw;
    height: 94vh;
  }
  .ts-settings-body {
    flex-direction: column;
  }
  .ts-settings-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 0.65rem;
    gap: 0.75rem;
    border-right: none;
    border-bottom: 1px solid #EAE4DA;
  }
  .ts-settings-nav-group {
    flex-direction: row;
    gap: 0.35rem;
  }
  .ts-settings-group-label {
    display: none;
  }
  .ts-settings-nav-item {
    white-space: nowrap;
    width: auto;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
  }
  .ts-settings-workspace {
    padding: 1.25rem 1.5rem;
  }
}

/* ==========================================================================
   MODERN VISUAL WEBSITE BUILDER SUITE — THE SALON 2026
   ========================================================================== */

/* 1. Grouped Top Toolbar (6 Logical Modules: A-F) */
.gob-editor-toolbar {
  position: fixed !important;
  left: 50% !important;
  bottom: 1.25rem !important;
  transform: translateX(-50%) !important;
  z-index: 99990 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: rgba(24, 23, 21, 0.95) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1.5px solid #c59b6d !important;
  border-radius: 9999px !important;
  padding: 0.35rem 0.75rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(197, 155, 109, 0.3) !important;
  color: #fef2e8 !important;
  max-width: 96vw !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

.gob-tb-group {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  flex-shrink: 0;
}

.gob-tb-sep {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 0.1rem;
  flex-shrink: 0;
}

.gob-tb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #dfc8b5;
}

.gob-tb-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(197, 155, 109, 0.3);
  color: #c59b6d;
  transition: all 0.2s ease;
}

.gob-tb-status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.gob-tb-status-pill.is-saving .dot {
  background: #3b82f6;
  box-shadow: 0 0 6px #3b82f6;
  animation: gob-pulse 1s infinite alternate;
}

.gob-tb-status-pill.is-draft .dot {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.gob-tb-status-pill.is-error .dot {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}

@keyframes gob-pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* 2. Parent Section Subtle Selection Indicator */
.gob-wb-parent-section {
  outline: 1.5px dashed rgba(197, 155, 109, 0.45) !important;
  outline-offset: -2px !important;
  position: relative !important;
}

.gob-wb-parent-section::after {
  content: 'SZEKCIÓ';
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #c59b6d;
  background: rgba(24, 23, 21, 0.85);
  border: 1px solid rgba(197, 155, 109, 0.4);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
}

/* 3. Rétegkezelő (Layers Tree Modal & Floating Drawer) */
.gob-layers-dialog {
  max-width: 32rem;
  width: 92vw;
  background: #1C1917;
  color: #FAF5ED;
  border: 1.5px solid #C59B6D;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  padding: 0;
  overflow: hidden;
}

.gob-layers-dialog::backdrop {
  background: rgba(15, 14, 12, 0.6);
  backdrop-filter: blur(4px);
}

.gob-layer-tree {
  max-height: 440px;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gob-layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.gob-layer-item:hover {
  background: rgba(197, 155, 109, 0.12);
  border-color: rgba(197, 155, 109, 0.35);
}

.gob-layer-item.active {
  background: rgba(197, 155, 109, 0.22);
  border-color: #C59B6D;
  color: #FAF5ED;
}

.gob-layer-item.is-locked {
  opacity: 0.65;
}

.gob-layer-label-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.gob-layer-icon {
  color: #C59B6D;
  flex-shrink: 0;
}

.gob-layer-name {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gob-layer-tag {
  font-size: 0.68rem;
  color: #A8A29E;
  text-transform: uppercase;
  margin-left: 0.35rem;
}

.gob-layer-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.gob-layer-btn {
  background: transparent;
  border: none;
  color: #A8A29E;
  padding: 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gob-layer-btn:hover {
  color: #FAF5ED;
  background: rgba(255, 255, 255, 0.1);
}

.gob-layer-btn.is-active {
  color: #C59B6D;
}

/* Dialog overrides for Modern Editor Modals (Anthracite & Gold Luxury) */
.gob-layers-dialog,
.gob-medialib-dialog,
#gob-revisions-dialog,
#gob-publish-dialog,
.gob-image-replace-dialog,
#headliner-media-dialog {
  background: #1C1917 !important;
  color: #FAF5ED !important;
  border: 1.5px solid #C59B6D !important;
}

.gob-layers-dialog .gob-modal-header,
.gob-medialib-dialog .gob-modal-header,
#gob-revisions-dialog .gob-modal-header,
#gob-publish-dialog .gob-modal-header,
.gob-image-replace-dialog .gob-modal-header,
#headliner-media-dialog .gob-modal-header {
  background: #24211D !important;
  color: #FAF5ED !important;
  border-bottom: 1px solid rgba(197, 155, 109, 0.25) !important;
}

.gob-layers-dialog .gob-main-pane,
.gob-medialib-dialog .gob-main-pane,
#gob-revisions-dialog .gob-main-pane,
#gob-publish-dialog .gob-main-pane,
.gob-image-replace-dialog .gob-imgmodal-body,
#headliner-media-dialog .gob-main-pane {
  background: #1C1917 !important;
  color: #FAF5ED !important;
}

.gob-layers-dialog .gob-modal-title,
.gob-medialib-dialog .gob-modal-title,
#gob-revisions-dialog .gob-modal-title,
#gob-publish-dialog .gob-modal-title {
  color: #FAF5ED !important;
}

.gob-layers-dialog .gob-modal-eyebrow,
.gob-medialib-dialog .gob-modal-eyebrow,
#gob-revisions-dialog .gob-modal-eyebrow,
#gob-publish-dialog .gob-modal-eyebrow {
  color: #C59B6D !important;
}

.gob-layers-dialog .gob-close-btn,
.gob-medialib-dialog .gob-close-btn,
#gob-revisions-dialog .gob-close-btn,
#gob-publish-dialog .gob-close-btn {
  color: #FAF5ED !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.gob-layers-dialog .gob-layer-tree {
  background: #141210 !important;
  border: 1px solid rgba(197, 155, 109, 0.25) !important;
}

.gob-layers-dialog .gob-layer-item {
  background: #24211D !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FAF5ED !important;
}

.gob-layers-dialog .gob-layer-item:hover {
  background: #2E2822 !important;
  border-color: #C59B6D !important;
}

.gob-layers-dialog .gob-layer-name,
.gob-layers-dialog .gob-layer-name strong {
  color: #FAF5ED !important;
}

#gob-publish-dialog div[style*="background:var(--gob-surface)"] {
  background: #24211D !important;
  border-color: rgba(197, 155, 109, 0.25) !important;
  color: #FAF5ED !important;
}

#gob-publish-dialog p {
  color: #FAF5ED !important;
}

#gob-revisions-dialog #gob-revisions-list {
  background: #141210 !important;
  border-color: rgba(197, 155, 109, 0.25) !important;
}

#gob-medialib-dropzone {
  background: rgba(197, 155, 109, 0.08) !important;
  border: 2px dashed rgba(197, 155, 109, 0.45) !important;
  color: #FAF5ED !important;
}

#gob-medialib-search {
  background: #141210 !important;
  border: 1px solid rgba(197, 155, 109, 0.35) !important;
  color: #FAF5ED !important;
}

.gob-layer-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.gob-layer-child {
  margin-left: 1.25rem;
  border-left: 2px solid rgba(197, 155, 109, 0.3) !important;
  border-radius: 0 8px 8px 0 !important;
}

.gob-layer-act-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #A8A29E;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.gob-layer-act-btn:hover {
  background: rgba(197, 155, 109, 0.25);
  color: #FAF5ED;
  border-color: #C59B6D;
}

/* 4. Központi Médiatár (Media Library Modal) */
.gob-medialib-dialog {
  max-width: 52rem;
  width: 95vw;
  background: #1C1917;
  color: #FAF5ED;
  border: 1.5px solid #C59B6D;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  padding: 0;
  overflow: hidden;
}

.gob-medialib-dialog::backdrop {
  background: rgba(15, 14, 12, 0.65);
  backdrop-filter: blur(5px);
}

.gob-medialib-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gob-medialib-dropzone {
  border: 2px dashed rgba(197, 155, 109, 0.45);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s ease;
}

.gob-medialib-dropzone:hover,
.gob-medialib-dropzone.dragover {
  border-color: #C59B6D;
  background: rgba(197, 155, 109, 0.08);
}

.gob-medialib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.85rem;
  max-height: 380px;
  overflow-y: auto;
  padding: 0.35rem;
}

.gob-medialib-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: #282828;
  cursor: pointer;
  transition: all 0.18s ease;
}

.gob-medialib-card:hover {
  transform: translateY(-2px);
  border-color: #C59B6D;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.gob-medialib-card.is-selected {
  border-color: #C59B6D;
  box-shadow: 0 0 0 2px #C59B6D;
}

.gob-medialib-card img,
.gob-medialib-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gob-medialib-card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.35rem 0.5rem;
  background: rgba(15, 14, 12, 0.82);
  font-size: 0.68rem;
  color: #dfc8b5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5. Katalógushoz Kapcsolt Szolgáltatás Pill */
.gob-catalog-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: rgba(197, 155, 109, 0.15);
  border: 1px solid rgba(197, 155, 109, 0.4);
  color: #dfad7a;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

/* ==========================================================================
   THE SALON – KÉPCSERE MODAL (Harmonized with Editor Windows: #1C1917 / #C59B6D)
   ========================================================================== */
dialog.gob-booking-dialog.gob-image-replace-dialog {
  max-width: min(94vw, 36rem) !important;
  width: min(94vw, 36rem) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: 94vh !important;
  padding: 0 !important;
  border-radius: 1.15rem !important;
  border: 1.5px solid #C59B6D !important;
  background: #1C1917 !important;
  color: #FAF5ED !important;
  overflow: hidden !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(197, 155, 109, 0.35) !important;
}

dialog.gob-booking-dialog.gob-image-replace-dialog::backdrop {
  background: rgba(10, 9, 8, 0.78);
  backdrop-filter: blur(8px);
}

.gob-imgmodal-header {
  background: #24211D !important;
  color: #FAF5ED !important;
  padding: 1.15rem 1.45rem 1.1rem 1.45rem !important;
  border-bottom: 1px solid rgba(197, 155, 109, 0.25) !important;
}

.gob-imgmodal-brand-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}

.gob-imgmodal-brand {
  display: flex;
  flex-direction: column;
}

.gob-imgmodal-logo-title {
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: #C59B6D !important;
  line-height: 1.1;
}

.gob-imgmodal-logo-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: #A8A29E !important;
  margin-top: 2px;
}

.gob-imgmodal-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer;
  color: #FAF5ED !important;
  padding: 6px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.gob-imgmodal-close:hover {
  background: rgba(197, 155, 109, 0.25) !important;
  border-color: #C59B6D !important;
  color: #FAF5ED !important;
}

.gob-imgmodal-headings {
  margin: 0;
}

.gob-imgmodal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #FAF5ED !important;
  margin: 0 !important;
  line-height: 1.2;
}

.gob-imgmodal-subtitle {
  font-size: 0.82rem;
  color: #A8A29E !important;
  margin: 0.35rem 0 0 0 !important;
  font-weight: 400;
}

.gob-imgmodal-body {
  padding: 1.25rem 1.45rem 1.4rem 1.45rem !important;
  background: #1C1917 !important;
  color: #FAF5ED !important;
}

.gob-imgmodal-tabs {
  display: flex;
  background: #141210;
  border-radius: 9999px;
  padding: 4px;
  border: 1px solid rgba(197, 155, 109, 0.25);
  margin-bottom: 1.1rem;
  gap: 2px;
}

.gob-imgmodal-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.55rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #A8A29E;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  user-select: none;
}

.gob-imgmodal-tab:hover {
  color: #FAF5ED;
}

.gob-imgmodal-tab.is-active {
  background: #24211D;
  color: #FAF5ED;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(197, 155, 109, 0.45);
}

.gob-imgmodal-pane {
  display: none;
}

.gob-imgmodal-pane.is-active {
  display: block;
}

.gob-imgmodal-field {
  margin-bottom: 0.85rem;
}

.gob-imgmodal-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #FAF5ED;
  margin-bottom: 0.4rem;
}

.gob-imgmodal-input {
  width: 100%;
  box-sizing: border-box;
  background: #141210 !important;
  border: 1px solid rgba(197, 155, 109, 0.35) !important;
  border-radius: 9999px !important;
  padding: 0.65rem 1.1rem !important;
  color: #FAF5ED !important;
  font-size: 0.88rem !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

.gob-imgmodal-input:focus {
  border-color: #C59B6D !important;
  box-shadow: 0 0 0 2px rgba(197, 155, 109, 0.25) !important;
}

.gob-imgmodal-hint {
  font-size: 0.75rem;
  color: #A8A29E;
  margin: 0.35rem 0 0 0.6rem;
}

.gob-imgmodal-dropzone {
  border: 2px dashed rgba(197, 155, 109, 0.45);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
  background: rgba(197, 155, 109, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gob-imgmodal-dropzone:hover,
.gob-imgmodal-dropzone.is-dragover {
  background: rgba(197, 155, 109, 0.16);
  border-color: #C59B6D;
}

.gob-imgmodal-dropzone-text {
  font-size: 0.88rem;
  color: #FAF5ED;
  margin-top: 0.35rem;
}

.gob-imgmodal-dropzone-text strong {
  color: #C59B6D;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gob-imgmodal-dropzone-sub {
  font-size: 0.72rem;
  color: #A8A29E;
  margin-top: 0.25rem;
}

.gob-imgmodal-search-wrap {
  margin-bottom: 0.65rem;
}

.gob-imgmodal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.6rem;
  max-height: 140px;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid rgba(197, 155, 109, 0.25);
  border-radius: 10px;
  background: #141210;
  scrollbar-width: thin;
  scrollbar-color: #C59B6D #141210;
}

.gob-imgmodal-grid::-webkit-scrollbar {
  width: 6px;
}
.gob-imgmodal-grid::-webkit-scrollbar-thumb {
  background: #C59B6D;
  border-radius: 4px;
}

.gob-imgmodal-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: #24211D;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
}

.gob-imgmodal-card:hover {
  transform: translateY(-2px);
  border-color: #C59B6D;
  background: #2E2822;
}

.gob-imgmodal-card.is-selected {
  border-color: #C59B6D !important;
  box-shadow: 0 0 0 2px #C59B6D, 0 0 12px rgba(197, 155, 109, 0.45) !important;
}

.gob-imgmodal-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gob-imgmodal-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.2rem 0.35rem;
  background: rgba(20, 18, 16, 0.88);
  font-size: 0.62rem;
  color: #FAF5ED;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.gob-imgmodal-preview-box {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: 10px;
  background-color: #141210;
  background-image: 
    linear-gradient(45deg, #1c1917 25%, transparent 25%), 
    linear-gradient(-45deg, #1c1917 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #1c1917 75%), 
    linear-gradient(-45deg, transparent 75%, #1c1917 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid rgba(197, 155, 109, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.gob-imgmodal-preview-box img {
  max-width: 95%;
  max-height: 80px;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}

.gob-imgmodal-preview-badge {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #C59B6D;
  background: rgba(20, 18, 16, 0.85);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(197, 155, 109, 0.35);
  pointer-events: none;
}

.gob-imgmodal-empty-preview {
  font-size: 0.78rem;
  color: #A8A29E;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gob-imgmodal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.gob-imgmodal-btn-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FAF5ED;
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gob-imgmodal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.gob-imgmodal-btn-apply {
  background: #C59B6D !important;
  border: 1px solid #C59B6D !important;
  color: #12100E !important;
  padding: 0.55rem 1.35rem !important;
  border-radius: 9999px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 2px 8px rgba(197, 155, 109, 0.35) !important;
}

.gob-imgmodal-btn-apply:hover {
  background: #DFAD7A !important;
  border-color: #DFAD7A !important;
  color: #0B0A08 !important;
  box-shadow: 0 4px 14px rgba(197, 155, 109, 0.5) !important;
}

/* ==========================================================================
   Penalty Fee Modal (Mulasztási Díj Beállítása)
   ========================================================================== */
dialog.gob-booking-dialog.ts-penalty-fee-dialog {
  width: min(94vw, 38rem) !important;
  max-width: 38rem !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 92vh !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid #EAE4DA !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ts-penalty-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
  padding: 1.25rem 1.75rem !important;
  background: #FAF8F5 !important;
  border-bottom: 1px solid #EAE4DA !important;
}

.ts-penalty-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

.ts-penalty-eyebrow {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #7d5a3c !important;
  line-height: 1.2 !important;
}

.ts-penalty-title {
  font-family: var(--gob-font-display, serif) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.ts-penalty-pane {
  padding: 1.5rem 1.75rem !important;
  background: #FFFFFF !important;
  color: #282828 !important;
}

.ts-penalty-user-box {
  background: #FAF8F5 !important;
  border: 1px solid #EAE4DA !important;
  border-radius: 10px !important;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.ts-penalty-user-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
  font-size: 0.84rem !important;
  color: #7A756D !important;
  margin-top: 0.45rem !important;
}

.ts-penalty-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}

.ts-penalty-meta-item svg {
  color: #7d5a3c !important;
  flex-shrink: 0 !important;
}

.ts-penalty-chips-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.5rem !important;
  margin-bottom: 0.85rem !important;
}

@media (max-width: 480px) {
  .ts-penalty-chips-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.ts-penalty-chip {
  height: 42px !important;
  border: 1.5px solid #E2D9CB !important;
  background: #FAF5ED !important;
  color: #282828 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ts-penalty-chip:hover {
  border-color: #B5977E !important;
  background: #F4ECE1 !important;
}

.ts-penalty-chip.selected {
  border-color: #1A1A1A !important;
  background: #1A1A1A !important;
  color: #FFFFFF !important;
}

.ts-penalty-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 1.5rem !important;
}

.ts-penalty-btn-cancel {
  flex: 1 1 50% !important;
  width: 50% !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  border: 1.5px solid #E2D9CB !important;
  background: #FAF5ED !important;
  color: #282828 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ts-penalty-btn-cancel:hover {
  background: #EDE5D8 !important;
  border-color: #B5977E !important;
  color: #1A1A1A !important;
}

.ts-penalty-btn-save {
  flex: 1 1 50% !important;
  width: 50% !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  border: none !important;
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

.ts-penalty-btn-save:hover {
  background: #333333 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-1px) !important;
}



/* ==========================================================================
   The Salon – Expandable Public Services Accordion Component (Mockup Aligned)
   Minimalist Beige & Warm Neutral Styling, Accessible 3-Level Hierarchy
   ========================================================================== */

.ts-services-catalog {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  font-family: var(--gob-font-sans, system-ui, -apple-system, sans-serif);
  color: #312921;
}

.ts-catalog-header {
  margin-bottom: 0.5rem;
}

.ts-catalog-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #A58262;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.ts-catalog-title {
  font-family: var(--gob-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  font-weight: 400;
  color: #322820;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.ts-catalog-subtitle {
  font-size: 0.95rem;
  color: #73685E;
  margin: 0;
  line-height: 1.5;
}

.ts-catalog-divider {
  height: 1px;
  background: #DDCEBE;
  margin: 1.5rem 0 1.5rem;
  border: none;
}

.ts-catalog-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #917559;
  text-transform: uppercase;
}

.ts-catalog-meta-count {
  font-size: 0.8rem;
  font-weight: 500;
  color: #988777;
  text-transform: none;
  letter-spacing: normal;
}

.ts-prof-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Level 1: Profession Card */
.ts-prof-item {
  border: 1px solid #E4D7C9;
  border-radius: 12px;
  background: #FFFEFC;
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 8px rgba(71, 53, 35, 0.03);
}

.ts-prof-item.is-expanded {
  background: #FAF7F2;
  border-color: #D6C7B7;
  box-shadow: 0 6px 20px rgba(71, 53, 35, 0.06);
}

.ts-prof-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background-color 0.2s ease;
}

.ts-prof-header:hover {
  background-color: rgba(241, 233, 224, 0.5);
}

.ts-prof-header:focus-visible {
  outline: 2px solid #8D7259;
  outline-offset: -2px;
}

.ts-prof-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F1E9E0;
  border: 1px solid #E5D6C7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8D7259;
  overflow: hidden;
  position: relative;
}

.ts-prof-icon-wrap svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-prof-icon-wrap .ts-prof-logo-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.ts-prof-badge-logo {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.35rem;
  border-radius: 3px;
}

.ts-prof-info {
  flex: 1 1 auto;
  min-width: 0;
}

.ts-prof-name {
  font-family: var(--gob-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #30271E;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.ts-prof-desc {
  font-size: 0.8rem;
  color: #8C7C6D;
  line-height: 1.45;
  word-break: break-word;
}

.ts-prof-meta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
}

.ts-prof-count {
  font-size: 0.8rem;
  color: #94795E;
  font-weight: 500;
  white-space: nowrap;
}

.ts-chevron {
  width: 16px;
  height: 16px;
  stroke: #8A6B4C;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.ts-prof-item.is-expanded .ts-chevron {
  transform: rotate(180deg);
}

.ts-prof-body {
  display: none;
  padding: 0.25rem 1.25rem 1.25rem;
  background: #FAF7F2;
  border-top: 1px solid #EBE1D7;
}

.ts-prof-item.is-expanded > .ts-prof-body {
  display: block;
}

.ts-services-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.75rem;
}

/* Level 2: Service Card */
.ts-svc-card {
  border: 1px solid #E8DED2;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ts-svc-card.has-variants:hover {
  border-color: #D9CDC0;
  box-shadow: 0 2px 10px rgba(71, 53, 35, 0.05);
}

.ts-svc-card.is-expanded {
  border-color: #D6C7B7;
  box-shadow: 0 4px 14px rgba(71, 53, 35, 0.06);
}

.ts-svc-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.95rem 1.15rem;
  gap: 1rem;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.ts-svc-header.is-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ts-svc-header.is-clickable:hover {
  background-color: rgba(249, 245, 240, 0.5);
}

.ts-svc-header.is-clickable:focus-visible {
  outline: 2px solid #8D7259;
  outline-offset: -2px;
}

.ts-svc-header.is-static {
  cursor: default;
}

.ts-svc-info {
  flex: 1 1 auto;
  min-width: 0;
}

.ts-svc-name {
  font-size: 0.96rem;
  font-weight: 600;
  color: #312921;
  line-height: 1.35;
}

.ts-svc-desc {
  font-size: 0.78rem;
  color: #928478;
  margin-top: 0.2rem;
  line-height: 1.45;
  word-break: break-word;
}

.ts-svc-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.ts-svc-duration {
  width: 95px;
  text-align: center;
  font-size: 0.825rem;
  font-weight: 500;
  color: #594F45;
  white-space: nowrap;
  flex-shrink: 0;
}

.ts-svc-price {
  width: 125px;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 600;
  color: #584332;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.ts-svc-toggle {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8A6B4C;
}

.ts-svc-chevron {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.ts-svc-card.is-expanded .ts-svc-chevron {
  transform: rotate(180deg);
}

.ts-svc-toggle-spacer {
  width: 24px;
  flex-shrink: 0;
}

/* Level 3: Optional Variants */
.ts-svc-body {
  display: none;
  padding: 0 1.15rem 0.85rem;
  border-top: 1px solid #EBE1D7;
  margin-top: 0.25rem;
  background: #FCFAF7;
}

.ts-svc-card.is-expanded > .ts-svc-body {
  display: block;
}

.ts-variants-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.6rem;
}

.ts-variant-row {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  gap: 1rem;
}

.ts-variant-row:nth-child(odd) {
  background: #F9F5F0;
}

.ts-variant-row:nth-child(even) {
  background: #FFFFFF;
}

.ts-variant-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: #62564A;
  word-break: break-word;
}

.ts-variant-duration {
  width: 95px;
  text-align: center;
  color: #706456;
  flex-shrink: 0;
  white-space: nowrap;
}

.ts-variant-price {
  width: 125px;
  text-align: right;
  font-weight: 600;
  color: #564332;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

.ts-variant-spacer {
  width: 24px;
  flex-shrink: 0;
}

.ts-catalog-footer-notice {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #E2D7C9;
  font-size: 0.8rem;
  color: #978B7F;
  text-align: center;
  line-height: 1.5;
}

/* Responsive: Mobile Screens */
@media (max-width: 680px) {
  .ts-prof-header {
    padding: 1rem 1rem;
    gap: 0.85rem;
  }

  .ts-prof-icon-wrap {
    width: 42px;
    height: 42px;
  }

  .ts-prof-name {
    font-size: 1.2rem;
  }

  .ts-prof-desc {
    font-size: 0.75rem;
  }

  .ts-prof-count {
    display: none;
  }

  .ts-prof-body {
    padding: 0.25rem 0.65rem 0.85rem;
  }

  .ts-svc-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem;
  }

  .ts-svc-meta-row {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .ts-svc-duration {
    text-align: left;
    width: auto;
    font-size: 0.78rem;
  }

  .ts-svc-price {
    text-align: right;
    width: auto;
    font-size: 0.88rem;
    margin-left: auto;
  }

  .ts-variant-row {
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0.65rem;
  }

  .ts-variant-name {
    flex: 1 1 100%;
    font-size: 0.8rem;
  }

  .ts-variant-duration {
    width: auto;
    font-size: 0.75rem;
    text-align: left;
  }

  .ts-variant-price {
    width: auto;
    font-size: 0.825rem;
    margin-left: auto;
    text-align: right;
  }

  .ts-variant-spacer {
    display: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ts-prof-item,
  .ts-chevron,
  .ts-svc-card,
  .ts-svc-chevron {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   THE SALON · Kiadó helyek 1. sablon (Exact Mockup Layout & Theme)
   ========================================================================== */
.ts-rent-space-ad,
section.sheet,
.sheet {
  --page: #f9f0e8;
  --paper: #fffaf6;
  --ink: #322821;
  --muted: #786a5f;
  --accent: #8b6447;
  --border: #e5d7c9;
  --soft: #f5ece3;
  --line: #d7b89e;
  --shadow: 0 20px 55px rgba(81, 56, 40, 0.075);
  box-sizing: border-box;
}

.ts-rent-space-ad {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
}

.sheet,
.ts-rent-sheet {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  overflow: hidden;
  background: #fff9f4;
  border: 1px solid var(--border, #e5d7c9);
  border-radius: 20px;
  box-shadow: var(--shadow, 0 20px 55px rgba(81, 56, 40, 0.075));
  color: var(--ink, #322821);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sheet *,
.ts-rent-sheet * {
  box-sizing: border-box;
}

.visual,
.ts-rent-visual {
  position: relative;
  min-height: 708px;
  background: #e4dcd5;
  overflow: hidden;
}

.visual img,
.ts-rent-visual img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 48%;
  display: block;
}

.visual::after,
.ts-rent-visual::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgba(39, 28, 20, 0.42));
  pointer-events: none;
}

.photoBadge,
.ts-rent-photoBadge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 30px;
  background: rgba(255, 253, 251, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  color: #594435;
  font-weight: 650;
  line-height: 1;
}

.photoFoot,
.ts-rent-photoFoot {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 26px;
  z-index: 2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.photoFoot span,
.ts-rent-photoFoot span {
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.photoFoot button,
.photoFoot .ts-rent-badge-btn,
.ts-rent-photoFoot button,
.ts-rent-photoFoot .ts-rent-badge-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: white;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.right,
.ts-rent-right {
  padding: 38px 42px 32px;
  min-width: 0;
  color: #322821;
  background: #fff9f4;
}

.overline,
.ts-rent-overline {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent, #8b6447);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.overline .dot,
.ts-rent-overline .dot,
.ts-rent-dot {
  height: 6px;
  width: 6px;
  background: #a98468;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.heroTitle,
.ts-rent-heroTitle {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.13;
  margin: 16px 0 11px;
  color: #32251e !important;
}

.lead,
.ts-rent-lead {
  font-size: 14px;
  line-height: 1.8;
  color: #63564d;
  max-width: 580px;
  margin: 0;
}

.lead strong,
.ts-rent-lead strong {
  color: #36291f;
  font-weight: 700;
}

.featureGrid,
.ts-rent-featureGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 24px 0;
}

.feature,
.ts-rent-feature {
  min-width: 0;
  background: #f5ede4;
  border: 1px solid #e9dacc;
  border-radius: 11px;
  padding: 13px 11px 12px;
}

.feature svg,
.ts-rent-feature svg {
  width: 18px;
  height: 18px;
  color: #805c41;
  margin-bottom: 13px;
  display: block;
}

.feature b,
.ts-rent-feature b {
  font-size: 13px;
  display: block;
  color: #3d2e24;
  margin-bottom: 4px;
  white-space: normal;
  font-weight: 700;
}

.feature span,
.ts-rent-feature span {
  font-size: 11px;
  color: #826f60;
  line-height: 1.35;
  display: block;
}

.location,
.ts-rent-location {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 15px;
  border: 1px solid #e7d5c5;
  border-radius: 12px;
  background: #fffdfb;
  margin-bottom: 24px;
}

.location > svg,
.ts-rent-location > svg {
  color: var(--accent, #8b6447);
  margin-top: 3px;
  flex-shrink: 0;
}

.metaLabel,
.ts-rent-metaLabel {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 750;
  color: #9b7659;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.location p,
.ts-rent-location p {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 600;
  color: #322821;
  margin: 0;
}

.location small,
.ts-rent-location small {
  font-size: 11px;
  color: #8b7868;
  display: block;
  margin-top: 2px;
}

.contact,
.ts-rent-contact {
  background: #f5ece3;
  border-radius: 15px;
  border: 1px solid #e4d2c1;
  padding: 20px 20px 17px;
}

.contactHead,
.ts-rent-contactHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dfccbc;
}

.contactHead h2,
.contactHead h3,
.ts-rent-contactHead h2,
.ts-rent-contactHead h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  letter-spacing: 0.035em;
  font-size: 24px;
  color: #32251e;
  margin: 0;
}

.contactHead span,
.ts-rent-contactHead span {
  font-size: 11px;
  color: #897563;
}

.contactRows,
.ts-rent-contactRows {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 16px 0 18px;
}

.contactRows strong,
.ts-rent-contactRows strong {
  font-size: 13px;
  display: block;
  margin-top: 7px;
  color: #322821;
}

.phone,
.ts-rent-phone {
  color: #81583b !important;
  text-decoration: underline !important;
  text-decoration-color: #ceb19b !important;
  text-underline-offset: 3px;
}

.ctas,
.ts-rent-ctas {
  display: flex;
  gap: 10px;
}

.cta,
.ts-rent-cta {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #322722;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  flex: 1;
  transition: transform 0.15s, background 0.15s;
  cursor: pointer;
  text-decoration: none !important;
}

.cta:active,
.ts-rent-cta:active {
  transform: translateY(1px);
}

.cta.primary,
.ts-rent-cta.primary {
  background: #2c2927 !important;
  color: #ffffff !important;
  border-color: #322722 !important;
}

.cta.secondary,
.ts-rent-cta.secondary {
  color: #413128 !important;
  background: transparent !important;
  border: 1px solid #c8a78e !important;
}

.cta svg,
.ts-rent-cta svg {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}

.note,
.ts-rent-note {
  font-size: 12px;
  line-height: 1.65;
  color: #756153;
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.note svg,
.ts-rent-note svg {
  margin-top: 2px;
  color: #9c765b;
  flex-shrink: 0;
}

svg.ico,
.ts-rent-ico {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
}

/* Kiadó helyek 2. custom styles */
.photoFoot.ts-rent-photoFoot-col,
.ts-rent-photoFoot.ts-rent-photoFoot-col {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
}

.ts-rent-foot-title {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.ts-rent-foot-sub {
  font-size: 13.5px;
  color: #f5e9dc;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.aboutRoom,
.ts-rent-about {
  margin-bottom: 20px;
  padding: 2px 0;
}

.ts-rent-about-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #3e2e23;
  margin: 0 0 6px 0;
  font-family: inherit;
}

.ts-rent-about-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #69574a;
  margin: 0;
}

.ts-rent-contact-divider {
  height: 1px;
  background: #decbb9;
  margin: 16px 0 12px;
}

.ts-rent-contact-note {
  font-size: 13px;
  line-height: 1.5;
  color: #675446;
  margin: 0;
}

@media (max-width: 990px) {
  .sheet,
  .ts-rent-sheet {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .visual,
  .ts-rent-visual {
    min-height: 400px !important;
    height: auto !important;
    display: block !important;
  }
  .right,
  .ts-rent-right {
    padding: 28px 24px 28px;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .featureGrid,
  .ts-rent-featureGrid {
    margin: 20px 0;
  }
  .heroTitle,
  .ts-rent-heroTitle {
    font-size: 34px;
  }
}

@media (max-width: 580px) {
  .sheet,
  .ts-rent-sheet {
    height: auto !important;
  }
  .right,
  .ts-rent-right {
    padding: 24px 17px;
    height: auto !important;
  }
  .visual,
  .ts-rent-visual {
    min-height: 340px !important;
    height: auto !important;
    display: block !important;
  }
  .featureGrid,
  .ts-rent-featureGrid {
    gap: 6px;
  }
  .feature,
  .ts-rent-feature {
    padding: 10px 8px;
  }
  .feature b,
  .ts-rent-feature b {
    font-size: 12px;
  }
  .feature span,
  .ts-rent-feature span {
    font-size: 10px;
  }
  .contact,
  .ts-rent-contact {
    padding: 15px;
  }
  .contactRows,
  .ts-rent-contactRows {
    gap: 12px;
  }
  .ctas,
  .ts-rent-ctas {
    flex-wrap: wrap;
  }
  .ctas .cta,
  .ts-rent-ctas .ts-rent-cta {
    min-width: 130px;
  }
  .heroTitle,
  .ts-rent-heroTitle {
    font-size: 31px;
  }
}

/* Fail-safe safety guard: never display in-section builder UI on public pages */
body:not(.gob-edit-mode) .gob-content-add-strip,
body:not(.gob-edit-mode) .gob-content-add-btn,
body:not(.gob-edit-mode) .gob-sec-boundary-wrap,
body:not(.gob-edit-mode) .gob-sec-boundary-btn,
body:not(.gob-edit-mode) .gob-sec-boundary,
body:not(.gob-edit-mode) [data-gob-v5-ui="content-add-strip"],
body:not(.gob-edit-mode) [data-gob-v5-ui="section-boundary"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Ensure headliner background video is always visible even when OS prefers-reduced-motion is active */
main > section:first-child > video {
  display: block !important;
  visibility: visible !important;
}

/* ==========================================================================
   FRESHA MOBILE & TABLET BOOKING SCAFFOLD (THE SALON BRAND EDITION)
   Strictly scoped to <= 63.99rem (< 1024px). Desktop (>= 64rem) is 100% untouched.
   ========================================================================== */
.gob-fresha-back-btn,
.gob-fresha-cart-backdrop,
.gob-fresha-drawer-top,
.gob-fresha-bottom-bar,
.gob-fresha-step2-staff-chip,
.gob-fresha-day-strip,
.gob-fresha-step4-review {
  display: none;
}

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

@keyframes gobFreshaFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 63.99rem) {
  /* 1. Single-Row App Navigation Header across booking modes */
  dialog.gob-booking-dialog[data-gob-mode] .gob-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.65rem;
    padding: 0.65rem 0.95rem;
    min-height: 56px;
    background: #FAF8F5;
    border-bottom: 1px solid #EAE4DA;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-fresha-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: 1px solid #DCD5CA;
    background: #FFFFFF;
    color: #1F1F1F;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-fresha-back-btn:active {
    transform: scale(0.95);
    background: #F3ECE2;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-fresha-back-btn.is-hidden {
    visibility: hidden;
    pointer-events: none;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-modal-brand {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.1rem;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-brand-logo {
    font-size: 1.15rem;
    letter-spacing: 0.14em;
    line-height: 1.05;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-brand-city,
  dialog.gob-booking-dialog[data-gob-mode] .gob-brand-divider,
  dialog.gob-booking-dialog[data-gob-mode] .gob-brand-subtitle {
    display: none;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-brand-text {
    align-items: center;
    max-width: 100%;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-brand-title {
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    color: #7D5A3C;
    font-weight: 700;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-modal-header-right {
    width: auto !important;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  dialog.gob-booking-dialog[data-gob-mode] .gob-close-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    font-size: 0.92rem;
  }

  /* 2. Tablet App Sheet Shell (48rem - 63.99rem) */
  dialog.gob-booking-dialog[open][data-gob-mode="book"],
  dialog.gob-booking-dialog[open][data-gob-mode="confirmed"] {
    width: min(94vw, 44rem);
    max-width: 44rem;
    height: min(92dvh, 62rem);
    min-height: min(86dvh, 46rem);
    max-height: 94dvh;
    margin: auto;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* 3. Non-Clipping 4-Step Progress Bar */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-wrap {
    padding: 0.45rem 0.85rem 0.5rem;
    background: #FAF8F5;
    border-bottom: 1px solid #EAE4DA;
    flex-shrink: 0;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-line {
    display: none;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.36rem 0.45rem;
    border-radius: 999px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-item.active {
    background: #EDE4D6;
    padding: 0.36rem 0.45rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-item.completed {
    background: rgba(125, 90, 60, 0.08);
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-step-circle {
    width: 21px;
    height: 21px;
    min-width: 21px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-step-text {
    font-size: 0.67rem;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 4. Single-Scroll Body & Zero Summary Collision */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-modal-body,
  dialog.gob-booking-dialog[data-gob-mode="confirmed"] .gob-modal-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-main-pane,
  dialog.gob-booking-dialog[data-gob-mode="confirmed"] .gob-main-pane {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1.35rem 1.75rem;
    box-sizing: border-box;
  }

  /* Hide inline desktop summary sidebar to prevent collision; open as slide-up cart sheet on tap */
  dialog.gob-booking-dialog[data-gob-mode="book"]:not(.is-mobile-summary-open) .gob-summary-pane {
    display: none !important;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"].is-mobile-summary-open .gob-fresha-cart-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(24, 18, 14, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 35;
    animation: gobFreshaFadeIn 0.18s ease-out;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"].is-mobile-summary-open .gob-summary-pane {
    display: flex !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: auto !important;
    max-height: 84%;
    padding: 0 !important;
    border-top: none !important;
    background: transparent !important;
    overflow: hidden !important;
    animation: gobFreshaSheetUp 0.24s cubic-bezier(0.2, 0.85, 0.25, 1);
  }

  dialog.gob-booking-dialog[data-gob-mode="book"].is-mobile-summary-open .gob-summary-card {
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding: 0.65rem 1.15rem 1rem;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    background: #FAF8F5;
    box-shadow: 0 -12px 36px rgba(20, 14, 10, 0.24);
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-drawer-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 28px;
    margin-bottom: 0.35rem;
    flex-shrink: 0;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-drawer-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: #D8CEC0;
    display: block;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-drawer-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #DCD5CA;
    background: #FFFFFF;
    color: #3A322B;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  /* Bottom bar already holds the primary CTA */
  dialog.gob-booking-dialog[data-gob-mode="book"].is-mobile-summary-open .gob-summary-cta-btn {
    display: none;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"].is-mobile-summary-open .gob-summary-services-list {
    max-height: 34dvh;
    flex: 0 1 auto;
  }

  /* 5. Sticky Fresha Bottom Summary + CTA Bar */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.75rem 1.15rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    border-top: 1px solid #E6E0D6;
    box-shadow: 0 -6px 24px rgba(30, 22, 15, 0.08);
    flex-shrink: 0;
    z-index: 45;
    box-sizing: border-box;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-bar-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.14rem;
    background: transparent;
    border: none;
    padding: 0.15rem 0.25rem 0.15rem 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    flex: 1 1 auto;
    font-family: inherit;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1F1F1F;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1.15;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-staff {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1F1F1F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 13rem;
    line-height: 1.2;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-empty {
    font-size: 0.9rem;
    font-weight: 700;
    color: #5A4D42;
    line-height: 1.2;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #F2ECE4;
    border: 1px solid #E2D8CA;
    color: #6D4C33;
    font-size: 0.68rem;
    flex-shrink: 0;
    line-height: 1;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-sub {
    font-size: 0.75rem;
    color: #6E6359;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.25;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-cta-btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0.7rem 1.45rem;
    border-radius: 999px;
    background: #242424;
    color: #FFFFFF;
    border: 1px solid #242424;
    font-family: var(--gob-font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(36, 36, 36, 0.2);
    transition: background-color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-cta-btn:active:not(:disabled) {
    transform: scale(0.98);
    background: #141414;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-cta-btn:disabled {
    background: #CFC7BC;
    border-color: #CFC7BC;
    color: #FFFFFF;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.88;
  }

  /* 6. Horizontal Touch Category & Filter Pill Bars */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-filter-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    width: 100%;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-filter-pills,
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cat-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.45rem;
    width: 100%;
    padding: 0.1rem 0.1rem 0.25rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-filter-pills::-webkit-scrollbar,
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cat-pills::-webkit-scrollbar {
    display: none;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-pill-btn,
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cat-pill {
    flex-shrink: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.42rem 0.95rem;
    white-space: nowrap;
  }

  /* 7. Step 2 Selected Specialist Context Chip */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-step2-staff-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #FAF5ED;
    border: 1px solid #E5DDD0;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.9rem;
  }

  .gob-fresha-s2c-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
  }

  .gob-fresha-s2c-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #E2D9CC;
    flex-shrink: 0;
  }

  .gob-fresha-s2c-avatar-fallback {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #EDE4D6;
    color: #242424;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .gob-fresha-s2c-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.08rem;
  }

  .gob-fresha-s2c-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1F1F1F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gob-fresha-s2c-role {
    font-size: 0.72rem;
    color: #7A7065;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gob-fresha-s2c-change {
    background: #FFFFFF;
    border: 1px solid #D6CEBE;
    color: #242424;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 7b. Step 2 Adaptive Optional Service Variant Pills (Mobile & Tablet only) */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hair-length-section {
    padding: 0.72rem 1rem 0.9rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-grid {
    gap: 0.5rem;
    align-items: stretch;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill {
    padding: 0.52rem 0.62rem;
    gap: 0.5rem;
    min-height: 44px;
    align-items: center;
    overflow: hidden;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill:not(.is-stacked) {
    justify-content: center;
    gap: 0.55rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill:not(.is-stacked) .gob-hl-pill-left {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill:not(.is-stacked) .gob-hl-label {
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.25;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill:not(.is-stacked) .gob-hl-val {
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.25;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill.is-stacked {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 0.45rem;
    row-gap: 0.16rem;
    align-items: center;
    align-content: center;
    justify-content: stretch;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill.is-stacked .gob-hl-pill-left {
    display: contents;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill.is-stacked .gob-hl-radio {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill.is-stacked .gob-hl-label {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.22;
    text-align: left;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-pill.is-stacked .gob-hl-val {
    grid-column: 2;
    grid-row: 2;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.22;
    text-align: left;
  }

  /* 8. Step 3 Calendar & Fresha Quick Day Strip */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cal-view-wrap,
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-slots-view-wrap {
    min-height: auto;
    height: auto;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cal-days-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
    flex: 0 0 auto;
    gap: 0.55rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cal-day-card {
    height: auto;
    min-height: 4.65rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cal-legend {
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    gap: 0.85rem 1.25rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-day-strip {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.2rem 0.25rem 0.55rem;
    margin: -0.1rem -0.25rem -0.15rem;
    width: calc(100% + 0.5rem);
    box-sizing: border-box;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-slots-meta-line {
    gap: 0.4rem 1rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-sml-bullet {
    display: none;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-day-strip::-webkit-scrollbar {
    display: none;
  }

  .gob-fresha-day-pill {
    flex: 0 0 3.7rem;
    min-width: 3.7rem;
    border-radius: 14px;
    border: 1px solid #E6E0D6;
    background: #FFFFFF;
    padding: 0.45rem 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--gob-font-sans);
    box-sizing: border-box;
  }

  .gob-fresha-day-pill .gob-fdp-dow {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7A7065;
    line-height: 1.1;
  }

  .gob-fresha-day-pill .gob-fdp-num {
    font-size: 1.02rem;
    font-weight: 800;
    color: #1F1F1F;
    line-height: 1.15;
  }

  .gob-fresha-day-pill .gob-fdp-month {
    font-size: 0.6rem;
    font-weight: 600;
    color: #8C8276;
    line-height: 1.1;
    margin-bottom: 0.12rem;
  }

  .gob-fresha-day-pill.active {
    background: #242424;
    border-color: #242424;
    box-shadow: 0 4px 12px rgba(36, 36, 36, 0.22);
  }

  .gob-fresha-day-pill.active .gob-fdp-dow,
  .gob-fresha-day-pill.active .gob-fdp-month {
    color: #DFC8B5;
  }

  .gob-fresha-day-pill.active .gob-fdp-num {
    color: #FFFFFF;
  }

  .gob-fresha-day-pill:disabled {
    opacity: 0.42;
    background: #F4EFEA;
    cursor: not-allowed;
  }

  /* 9. Step 4 Compact Booking Review Card */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-step4-review {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: #FFFFFF;
    border: 1px solid #E6E0D6;
    border-radius: 14px;
    padding: 0.95rem 1rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 2px 10px rgba(30, 22, 15, 0.04);
  }

  .gob-fs4r-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
  }

  .gob-fs4r-staff {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
  }

  .gob-fs4r-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #E2D9CC;
    flex-shrink: 0;
  }

  .gob-fs4r-avatar-fallback {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #EDE4D6;
    color: #7D5A3C;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .gob-fs4r-staff-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.08rem;
  }

  .gob-fs4r-staff-meta strong {
    font-size: 0.92rem;
    color: #1F1F1F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gob-fs4r-staff-meta span {
    font-size: 0.72rem;
    color: #7A7065;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gob-fs4r-edit-btn {
    background: #FAF5ED;
    border: 1px solid #D9CEBF;
    color: #6D4C33;
    border-radius: 999px;
    padding: 0.32rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }

  .gob-fs4r-datetime {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #282828;
    background: #FAF8F5;
    border: 1px solid #EFEAE2;
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
  }

  .gob-fs4r-datetime svg {
    color: #7D5A3C;
    flex-shrink: 0;
  }

  .gob-fs4r-services {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.15rem;
  }

  .gob-fs4r-svc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
  }

  .gob-fs4r-svc-row.is-penalty {
    color: #C92A2A;
    font-weight: 600;
  }

  .gob-fs4r-svc-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .gob-fs4r-svc-name {
    font-weight: 600;
    color: #1F1F1F;
  }

  .gob-fs4r-svc-sub {
    font-size: 0.72rem;
    color: #7A7065;
  }

  .gob-fs4r-svc-price {
    font-weight: 700;
    color: #1F1F1F;
    white-space: nowrap;
  }

  .gob-fs4r-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #EAE4DA;
    padding-top: 0.55rem;
    font-size: 0.88rem;
  }

  .gob-fs4r-total span {
    color: #5A4D42;
    font-weight: 600;
  }

  .gob-fs4r-total strong {
    font-size: 1.08rem;
    color: #7D5A3C;
    font-weight: 800;
  }
}

/* Mobile Phone Full-Screen Native App Shell & Auth Bottom Sheet (<= 47.99rem) */
@media (max-width: 47.99rem) {
  dialog.gob-booking-dialog[open][data-gob-mode="book"],
  dialog.gob-booking-dialog[open][data-gob-mode="confirmed"] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    inset: 0;
    border-radius: 0;
    border: none;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-wrap {
    padding: 0.38rem 0.65rem 0.45rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper {
    gap: 0.25rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-item,
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stepper-item.active {
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.3rem 0.15rem;
    border-radius: 10px;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-step-circle {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 0.68rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-step-text {
    font-size: 0.56rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-main-pane {
    padding: 0.95rem 0.95rem 1.5rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-step-main-title {
    font-size: 1.08rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-step-desc {
    font-size: 0.8rem;
    margin: 0.45rem 0 0.9rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-filter-label {
    display: none;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hair-length-section {
    padding: 0.7rem 0.85rem 0.85rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cal-week-nav {
    padding: 0.5rem 0.65rem;
    gap: 0.4rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cwn-center {
    display: none;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cwn-range {
    font-size: 0.84rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cal-days-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.48rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-slots-top-bar {
    gap: 0.5rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-slots-meta-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-stb-date-title {
    font-size: 0.95rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-bottom-bar {
    padding: 0.68rem 0.9rem calc(0.68rem + env(safe-area-inset-bottom, 0px));
    gap: 0.65rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-price {
    font-size: 1.06rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fbb-staff {
    max-width: 10.5rem;
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-fresha-cta-btn {
    min-height: 44px;
    padding: 0.65rem 1.15rem;
    font-size: 0.82rem;
  }

  /* Prevent iOS/Android auto-zoom on form inputs */
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-input,
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-textarea,
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-select {
    font-size: 16px !important;
  }

  /* Fresha Bottom Sheet Auth Modal & Simulated OAuth Sheet - Small Phones (< 500px) */
  dialog.gob-auth-dialog[open] {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    margin: auto 0 0 0 !important;
    inset: auto 0 0 0 !important;
    border-radius: 24px 24px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-shadow: 0 -16px 44px rgba(20, 14, 10, 0.34) !important;
    animation: gobFreshaSheetUp 0.26s cubic-bezier(0.2, 0.85, 0.25, 1);
  }

  dialog.gob-auth-dialog[open]::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: #D8C5B2;
    margin: 10px auto 2px;
  }

  dialog.gob-auth-dialog .header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px 14px !important;
    min-height: 68px !important;
    border-bottom: 1px solid rgba(232, 220, 207, 0.7) !important;
    box-sizing: border-box !important;
  }

  dialog.gob-auth-dialog .brand-sep {
    display: none !important;
  }

  dialog.gob-auth-dialog .header-title {
    display: none !important;
  }

  dialog.gob-auth-dialog .brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    user-select: none !important;
    z-index: 1 !important;
  }

  dialog.gob-auth-dialog .brand-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16.5px !important;
    letter-spacing: 3px !important;
    font-weight: 400 !important;
    color: #1e150e !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  dialog.gob-auth-dialog .brand-city {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 7.8px !important;
    letter-spacing: 2.6px !important;
    font-weight: 700 !important;
    color: #935b2e !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  dialog.gob-auth-dialog .close {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    margin: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #dac1a7 !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  dialog.gob-booking-dialog[open][data-gob-mode="oauth-sim"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 86dvh !important;
    margin: auto 0 0 0 !important;
    inset: auto 0 0 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    animation: gobFreshaSheetUp 0.24s cubic-bezier(0.2, 0.85, 0.25, 1);
  }
}

/* Tablet, Laptop & Desktop Auth Modal (>= 500px / 31.25rem, incl. Laptop MDPI 800x1280, 1280x800, 1024x768, Galaxy Tab, iPad, PC)
   Centered floating luxury modal card with smooth rounded corners, zero cut-off,
   beautiful optical balance, and responsive vertical fitting */
@media (min-width: 31.25rem) {
  dialog.gob-auth-dialog[open] {
    width: min(calc(100vw - 32px), 480px) !important;
    max-width: 480px !important;
    max-height: min(92dvh, calc(100vh - 32px)) !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    border-radius: 20px !important;
    border: 1px solid #e5d6c6 !important;
    box-shadow: 0 16px 44px rgba(20, 14, 10, 0.28) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    animation: none !important;
  }

  dialog.gob-auth-dialog[open]::before {
    display: none !important;
  }

  dialog.gob-auth-dialog .header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px 14px !important;
    min-height: 68px !important;
    border-bottom: 1px solid rgba(232, 220, 207, 0.7) !important;
    box-sizing: border-box !important;
  }

  dialog.gob-auth-dialog .brand-sep {
    display: none !important;
  }

  dialog.gob-auth-dialog .header-title {
    display: none !important;
  }

  dialog.gob-auth-dialog .brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    user-select: none !important;
    z-index: 1 !important;
  }

  dialog.gob-auth-dialog .brand-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 17px !important;
    letter-spacing: 3.2px !important;
    font-weight: 400 !important;
    color: #1e150e !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  dialog.gob-auth-dialog .brand-city {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 2.8px !important;
    font-weight: 700 !important;
    color: #935b2e !important;
    margin-top: 3.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  dialog.gob-auth-dialog .close {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    margin: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #dac1a7 !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  dialog.gob-auth-dialog .hero {
    text-align: center !important;
    padding: 14px 20px 0 !important;
  }

  dialog.gob-auth-dialog .hero h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #28180e !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  dialog.gob-auth-dialog .hero p {
    font-size: 13.5px !important;
    color: #886b56 !important;
    margin: 6px 0 14px !important;
    line-height: 1.4 !important;
  }

  dialog.gob-auth-dialog .content {
    padding: 0 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  dialog.gob-auth-dialog .providers {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  dialog.gob-auth-dialog .provider {
    height: 54px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 15px !important;
    background: #fffdfb !important;
    border: 1px solid var(--border, #e8d9c9) !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    margin: 0 !important;
  }

  dialog.gob-auth-dialog .provider-icon {
    width: 28px !important;
    height: 28px !important;
    justify-self: center !important;
    grid-column: 1 !important;
    display: block !important;
  }

  dialog.gob-auth-dialog .provider-spacer {
    width: 28px !important;
    height: 28px !important;
    grid-column: 3 !important;
    justify-self: center !important;
    display: block !important;
  }

  dialog.gob-auth-dialog .provider-label {
    grid-column: 2 !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    letter-spacing: -0.15px !important;
    color: #665950 !important;
  }

  dialog.gob-auth-dialog .terms {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
    padding: 13px 16px 12px !important;
    border-radius: 15px !important;
    border: 1px solid #e5d1bc !important;
    background: var(--cream, #fffdfb) !important;
  }

  dialog.gob-auth-dialog .terms-top {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: start !important;
  }

  dialog.gob-auth-dialog .consent {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }

  dialog.gob-auth-dialog .terms-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #5c5147 !important;
  }

  dialog.gob-auth-dialog .legal-toggle {
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  dialog.gob-auth-dialog .footer {
    padding: 14px 20px 16px !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  dialog.gob-booking-dialog[open][data-gob-mode="oauth-sim"] {
    width: min(calc(100vw - 32px), 480px) !important;
    max-width: 480px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(88dvh, calc(100vh - 32px)) !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    border-radius: 20px !important;
    border: 1px solid #e5d6c6 !important;
    box-shadow: 0 16px 44px rgba(20, 14, 10, 0.28) !important;
    overflow-y: auto !important;
    animation: none !important;
  }
}

@keyframes gobShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.gob-shake {
  animation: gobShake 0.35s ease;
}

@media (max-width: 35.99rem) {
  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-cal-days-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  dialog.gob-booking-dialog[data-gob-mode="book"] .gob-hl-grid {
    grid-template-columns: 1fr;
  }
}

.gob-login-quick-banner {
  display: none !important;
}







/* ==========================================================================
   Modern Floating Carousel Controls (Side Buttons & Scrollbar Cleanup)
   ========================================================================== */
[data-carousel-track] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  --carousel-fade-left: 0px;
  --carousel-fade-right: 80px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--carousel-fade-left, 0px),
    black calc(100% - var(--carousel-fade-right, 80px)),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black var(--carousel-fade-left, 0px),
    black calc(100% - var(--carousel-fade-right, 80px)),
    transparent 100%
  ) !important;
}
[data-carousel-track]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 639px) {
  [data-carousel-track] {
    --carousel-fade-right: 36px;
  }
}

#team {
  height: auto !important;
  min-height: auto !important;
  padding-bottom: 2.5rem !important;
}

[data-carousel] {
  position: relative !important;
}

[data-carousel-controls] {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  pointer-events: none !important;
  z-index: 25 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 0 !important;
  overflow: visible !important;
}

[data-carousel-prev],
[data-carousel-next] {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 253, 249, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(198, 171, 148, 0.45) !important;
  box-shadow: 0 4px 18px rgba(40, 24, 14, 0.12), 0 1px 3px rgba(40, 24, 14, 0.06) !important;
  color: #7d5a3c !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  user-select: none !important;
}

[data-carousel-prev] {
  left: 10px !important;
}

[data-carousel-next] {
  right: 10px !important;
}

@media (min-width: 1240px) {
  [data-carousel-prev] {
    left: -22px !important;
  }
  [data-carousel-next] {
    right: -22px !important;
  }
}

@media (max-width: 639px) {
  [data-carousel-prev],
  [data-carousel-next] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  [data-carousel-prev] {
    left: 6px !important;
  }
  [data-carousel-next] {
    right: 6px !important;
  }
}

[data-carousel-prev]:hover:not(:disabled),
[data-carousel-next]:hover:not(:disabled) {
  background: rgba(255, 253, 249, 0.96) !important;
  border-color: #c6ab94 !important;
  color: #28180e !important;
  box-shadow: 0 8px 24px rgba(40, 24, 14, 0.2), 0 2px 6px rgba(198, 171, 148, 0.3) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

[data-carousel-prev]:active:not(:disabled),
[data-carousel-next]:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95) !important;
}

[data-carousel-prev]:disabled,
[data-carousel-next]:disabled {
  opacity: 0.25 !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

[data-carousel-prev] svg,
[data-carousel-next] svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke-width: 2.2 !important;
  transition: transform 0.2s ease !important;
}

[data-carousel-prev]:hover:not(:disabled) svg {
  transform: translateX(-1.5px) !important;
}

[data-carousel-next]:hover:not(:disabled) svg {
  transform: translateX(1.5px) !important;
}



/* Toast Device Icon Alignment */
.salon-toast-msg svg.salon-icon {
  display: inline-block !important;
  vertical-align: -2.5px !important;
  margin-right: 6px !important;
  color: #7d5a3c !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   INTEGRATIONS: GOOGLE & SEARCH ENGINE MODULES (THE SALON LUXURY WARM THEME)
   ========================================================================== */
.ts-int-google-card {
  background: #FAF5ED !important;
  border: 1px solid #E2D9CB !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.4rem !important;
  margin-bottom: 1.15rem !important;
  box-shadow: none !important;
}

.ts-int-box {
  background: #FFFFFF;
  border: 1px solid #EAE4DA;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0.85rem;
}

.ts-int-row {
  border-bottom: 1px solid #F1ECE6;
  transition: background-color 0.15s ease;
}

.ts-int-row:last-child {
  border-bottom: none;
}

.ts-int-header {
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.ts-int-header:hover {
  background-color: rgba(125, 90, 60, 0.03);
}

.ts-int-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-int-icon {
  width: 20px;
  height: 20px;
  color: #7D5A3C;
  stroke: #7D5A3C;
  flex-shrink: 0;
  display: inline-block;
}

.ts-int-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1A1A1A;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ts-int-help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #F6EDE4;
  color: #7D5A3C;
  border: 1px solid #E2D9CB;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  user-select: none;
  line-height: 1;
  vertical-align: middle;
  transition: all 0.15s ease;
}

.ts-int-help-badge:hover {
  background: #EDE2D5;
  border-color: #7D5A3C;
}

.ts-int-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  margin: 0;
}

.ts-int-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ts-int-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D5D8DC;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}

.ts-int-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ts-int-switch input:checked + .ts-int-slider {
  background-color: #7D5A3C;
}

.ts-int-switch input:checked + .ts-int-slider:before {
  transform: translateX(20px);
}

.ts-int-connect-btn {
  color: #7D5A3C;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: inherit;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.ts-int-connect-btn:hover {
  color: #553b26;
  text-decoration: underline;
}

.ts-int-drawer {
  padding: 0 18px 16px 18px;
  animation: tsIntSlideDown 0.2s ease-out;
}

@keyframes tsIntSlideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.ts-int-input {
  height: 38px;
  background: #FFFFFF;
  border: 1px solid #E2D9CB;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  color: #1A1A1A;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ts-int-input:focus {
  border-color: #7D5A3C;
  box-shadow: 0 0 0 2px rgba(125, 90, 60, 0.15);
}

.ts-int-textarea {
  background: #FFFFFF;
  border: 1px solid #E2D9CB;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  color: #1A1A1A;
  outline: none;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ts-int-textarea:focus {
  border-color: #7D5A3C;
  box-shadow: 0 0 0 2px rgba(125, 90, 60, 0.15);
}

.ts-int-save-btn {
  height: 38px;
  background: #7D5A3C;
  color: #ffffff;
  border: 1px solid #7D5A3C;
  border-radius: 6px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: all 0.15s ease;
}

.ts-int-save-btn:hover {
  background: #664830;
  border-color: #664830;
}

.ts-int-save-btn:active {
  background: #553b26;
  border-color: #553b26;
}

.ts-int-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ts-int-chevron {
  color: #7D5A3C;
  stroke: #7D5A3C;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.ts-int-chevron.open {
  transform: rotate(90deg);
}

.ts-int-card-footer {
  padding: 13px 18px;
  background: #FAF7F2;
  border-top: 1px solid #EAE4DA;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ts-int-card-footer .ts-int-save-btn {
  background: #1C1917;
  border-color: #1C1917;
}

.ts-int-card-footer .ts-int-save-btn:hover {
  background: #2D2825;
  border-color: #2D2825;
}

.ts-int-status-msg {
  font-size: 0.8rem;
  margin-top: 6px;
  font-weight: 600;
}

.ts-int-status-msg.success {
  color: #16a34a;
}

.ts-int-status-msg.error {
  color: #dc2626;
}




/* ==========================================================================
   BOUTIQUE LUXURY HEADER TRIAL (ECLAT BOUTIQUE REFERENCE IMPLEMENTATION)
   ========================================================================== */

header[data-nav].ts-boutique-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background-color: #FAF5ED !important;
  border-bottom: 1px solid rgba(198, 171, 148, 0.45) !important;
  box-shadow: 0 2px 14px rgba(28, 24, 15, 0.10) !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dark top accent border matching illustration */
.ts-top-border {
  height: 5px !important;
  background-color: #282337 !important;
  width: 100% !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Main bar layout */
header[data-nav].ts-boutique-header .ts-header-main {
  position: relative !important;
  height: 70px !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 clamp(1rem, 3.5vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

@media (min-width: 64rem) {
  .ts-mobile-toggle {
    display: none !important;
  }

  .ts-nav-left {
    position: absolute !important;
    right: calc(50% + clamp(76px, 5.8vw, 92px)) !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .ts-center-logo-slot {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateZ(0) !important;
    width: 86px !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    z-index: 80 !important;
  }

  .ts-center-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 86px !important;
    height: 86px !important;
    background: #ffffff !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 4px 16px rgba(24, 19, 17, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(198, 171, 148, 0.45) !important;
    border-top: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
  }

  .ts-center-logo:hover,
  .ts-center-logo:focus-visible {
    transform: translateY(2px) translateZ(0) !important;
    box-shadow: 0 6px 22px rgba(24, 19, 17, 0.25) !important;
  }

  .ts-nav-right {
    position: absolute !important;
    left: calc(50% + clamp(76px, 5.8vw, 92px)) !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .ts-nav-list {
    display: flex !important;
    align-items: center !important;
    gap: clamp(1.6rem, 2.6vw, 3.2rem) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ts-header-controls {
    position: absolute !important;
    right: clamp(1rem, 3.2vw, 2.5rem) !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
  }

  /* Hide mobile drawer on desktop */
  header[data-nav].ts-boutique-header #nav-panel,
  header[data-nav].ts-boutique-header #nav-panel.ts-mobile-menu {
    display: none !important;
  }
}

.ts-center-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  user-select: none !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Nav links typography matching illustration */
.ts-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #282337 !important;
  text-decoration: none !important;
  transition: opacity 0.16s ease, font-weight 0.16s ease !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0.5rem 0 !important;
  opacity: 0.72 !important;
}

.ts-nav-link:hover,
.ts-nav-link:focus-visible {
  color: #282337 !important;
  opacity: 1 !important;
}

.ts-nav-link.active,
.ts-nav-link[aria-current="page"] {
  color: #282337 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Chevron arrow */
.ts-chevron {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 3.5px solid transparent !important;
  border-right: 3.5px solid transparent !important;
  border-top: 4px solid #282337 !important;
  margin-left: 0.2rem !important;
  transform: translateY(1px) !important;
  transition: opacity 0.16s ease !important;
}

.ts-nav-link:hover .ts-chevron,
.ts-nav-link.active .ts-chevron {
  border-top-color: #282337 !important;
}

/* Hide old outer booking button from navbar */
.gob-nav-BookingBtn {
  display: none !important;
}

/* Circular Profile Button (Exact original styling and icon) */
.gob-user-menu-wrap {
  position: relative !important;
  display: inline-block !important;
}

.gob-user-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  border-radius: 9999px !important;
  background: #282828 !important;
  border: 1px solid #b5977e !important;
  color: #fef2e8 !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 0 !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.gob-user-menu-btn:hover {
  background: #7d5a3c !important;
  border-color: #dfc8b5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.gob-user-menu-btn:focus-visible {
  outline: 2px solid #dfc8b5 !important;
  outline-offset: 2px !important;
}

.gob-user-menu-btn.is-active,
.gob-user-menu-btn[aria-expanded="true"] {
  background: #7d5a3c !important;
  border-color: #c6ab94 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(125, 90, 60, 0.4) !important;
}

.gob-user-menu-icon {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
  transition: stroke 0.15s ease !important;
}

.gob-user-menu-indicator {
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  border: 2px solid #282828 !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.85) !important;
  pointer-events: none !important;
}

/* Profile Dropdown Panel (Restored to original luxurious dark color theme) */
.gob-user-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 270px !important;
  max-width: 92vw !important;
  background: #1f1d1b !important;
  background-color: #1f1d1b !important;
  border: 1px solid rgba(198, 171, 148, 0.38) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  padding: 0 !important;
  z-index: 100000 !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  overflow: hidden !important;
}

.gob-user-dropdown .dropdown-head,
.gob-user-dropdown-header {
  padding: 0.85rem 1.1rem 0.75rem !important;
  border-bottom: 1px solid rgba(198, 171, 148, 0.2) !important;
  background: rgba(45, 38, 32, 0.55) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #dfc8b5 !important;
  margin-bottom: 0 !important;
}

.gob-user-dropdown-body {
  padding: 0.35rem 0 !important;
}

/* Items inside the profile dropdown */
.gob-user-dropdown .gob-user-dropdown-item,
.gob-user-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  padding: 0.7rem 1.1rem !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #fef2e8 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.gob-user-dropdown .gob-user-dropdown-item svg,
.gob-user-dropdown-item svg {
  stroke: currentColor !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
  transition: opacity 0.15s ease !important;
}

.gob-user-dropdown .gob-user-dropdown-item:hover,
.gob-user-dropdown .gob-user-dropdown-item:focus-visible,
.gob-user-dropdown-item:hover,
.gob-user-dropdown-item:focus-visible {
  background: rgba(181, 151, 126, 0.2) !important;
  background-color: rgba(181, 151, 126, 0.2) !important;
  color: #dfc8b5 !important;
  outline: none !important;
}

.gob-user-dropdown .gob-user-dropdown-item:hover svg,
.gob-user-dropdown-item:hover svg {
  opacity: 1 !important;
  stroke: #dfc8b5 !important;
}

.gob-user-dropdown-item .item-text {
  flex: 1 1 auto !important;
}

/* Foglalásaim bubble item inside the dropdown */
.gob-user-dropdown-item[data-open-my-bookings] {
  font-weight: 600 !important;
  color: #fef2e8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.gob-user-dropdown-item[data-open-my-bookings] .gob-badge-count {
  margin-left: auto !important;
  background-color: #7d5a3c !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gob-user-dropdown-divider {
  height: 1px !important;
  margin: 0.35rem 0 !important;
  background: rgba(198, 171, 148, 0.18) !important;
}

.gob-user-dropdown-item.item-danger {
  color: #fca5a5 !important;
}

.gob-user-dropdown-item.item-danger:hover,
.gob-user-dropdown-item.item-danger:focus-visible {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fecaca !important;
}

/* Language Switcher inside User Dropdown */
.gob-user-dropdown-lang-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem 1.1rem !important;
  gap: 0.75rem !important;
}

.gob-user-dropdown-lang-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #dfc8b5 !important;
}

.gob-user-dropdown-lang-label svg {
  stroke: #b5977e !important;
  flex-shrink: 0 !important;
}

.gob-user-dropdown-lang-pills {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(198, 171, 148, 0.3) !important;
  border-radius: 9999px !important;
  padding: 2px !important;
  gap: 2px !important;
}

/* Mobile & Tablet Styles (< 1024px) */
@media (max-width: 63.99rem) {
  header[data-nav].ts-boutique-header .ts-header-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 62px !important;
    padding: 0 1rem !important;
  }

  .ts-nav-group {
    display: none !important;
  }

  .ts-center-logo-slot {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 70 !important;
    width: 70px !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .ts-center-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 70px !important;
    height: 70px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 4px 14px rgba(24, 19, 17, 0.16) !important;
    border: 1px solid rgba(198, 171, 148, 0.4) !important;
    border-top: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
  }

  .ts-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    min-height: 40px !important;
    background: transparent !important;
    border: none !important;
    color: #282337 !important;
    cursor: pointer !important;
    padding: 6px !important;
    order: 1 !important;
  }

  .ts-mobile-toggle svg {
    stroke: #282337 !important;
  }

  .ts-header-controls {
    order: 3 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .ts-lang-nav {
    display: none !important; /* Mobile language toggle is in drawer */
  }

  /* Mobile/Tablet Drawer Menu (Dark luxury style matching the profile menu) */
  header[data-nav].ts-boutique-header #nav-panel,
  header[data-nav].ts-boutique-header #nav-panel.ts-mobile-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #1f1d1b !important;
    background: #1f1d1b !important;
    border-bottom: 1px solid rgba(198, 171, 148, 0.38) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    z-index: 90 !important;
    padding: 12px 20px 24px !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    opacity: 1 !important;
  }

  header[data-nav].ts-boutique-header[data-nav-open="true"] #nav-panel,
  header[data-nav].ts-boutique-header[data-nav-open="true"] #nav-panel.ts-mobile-menu {
    display: block !important;
  }

  header[data-nav].ts-boutique-header #nav-panel ul,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header[data-nav].ts-boutique-header #nav-panel nav ul li a,
  header[data-nav].ts-boutique-header #nav-panel nav ul li a:not([aria-current="page"]):not(.is-active):not(.active):not(.font-bold),
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 16px 12px !important;
    border-bottom: 1px solid rgba(198, 171, 148, 0.18) !important;
    color: #fef2e8 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-sizing: border-box !important;
  }

  header[data-nav].ts-boutique-header #nav-panel nav ul li a:hover,
  header[data-nav].ts-boutique-header #nav-panel nav ul li a:focus-visible,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link:hover,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link:focus-visible {
    background: rgba(198, 171, 148, 0.12) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
  }

  header[data-nav].ts-boutique-header #nav-panel nav ul li a.active,
  header[data-nav].ts-boutique-header #nav-panel nav ul li a[aria-current="page"],
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link.active,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link[aria-current="page"] {
    color: #ffffff !important;
    font-weight: 700 !important;
    background: rgba(198, 171, 148, 0.16) !important;
    border-radius: 6px !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row {
    padding-top: 18px !important;
    display: flex !important;
    justify-content: center !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(198, 171, 148, 0.35) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border-radius: 9999px !important;
    padding: 3px !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row li {
    list-style: none !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row a {
    display: block !important;
    border-radius: 9999px !important;
    padding: 4px 16px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.14em !important;
    border-bottom: none !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row a.bg-brass {
    background: #b5977e !important;
    color: #1f1d1b !important;
    font-weight: 700 !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row a.text-muted {
    color: rgba(254, 242, 232, 0.7) !important;
    background: transparent !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row a.text-muted:hover {
    color: #ffffff !important;
  }
}


/* ==========================================================================
   Header refinements: PC profile menu at the far right, no hero gesture on
   mouse-driven PCs, and the mobile/tablet menu as a popup like the profile menu.
   ========================================================================== */
@media (min-width: 64rem) {
  header[data-nav].ts-boutique-header .ts-header-main {
    max-width: none !important;
  }
  .ts-header-controls {
    right: clamp(0.75rem, 1.6vw, 1.5rem) !important;
  }
}

@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  html:not(.has-touch-screen) .gob-hero-scroll-indicator {
    display: none !important;
  }
}

@keyframes tsMenuPop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 63.99rem) {
  header[data-nav].ts-boutique-header #nav-panel,
  header[data-nav].ts-boutique-header #nav-panel.ts-mobile-menu {
    top: calc(100% + 8px) !important;
    left: 0.75rem !important;
    right: auto !important;
    width: 270px !important;
    max-width: calc(100vw - 1.5rem) !important;
    padding: 0 !important;
    border: 1px solid rgba(198, 171, 148, 0.38) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
    z-index: 100000 !important;
    transform-origin: top left !important;
  }

  header[data-nav].ts-boutique-header[data-nav-open="true"] #nav-panel,
  header[data-nav].ts-boutique-header[data-nav-open="true"] #nav-panel.ts-mobile-menu {
    animation: tsMenuPop 0.16s ease-out !important;
  }

  header[data-nav].ts-boutique-header #nav-panel nav {
    padding: 0.35rem 0 !important;
  }

  header[data-nav].ts-boutique-header #nav-panel nav ul li a,
  header[data-nav].ts-boutique-header #nav-panel nav ul li a:not([aria-current="page"]):not(.is-active):not(.active):not(.font-bold),
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0.8rem 1.1rem !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    letter-spacing: 0.14em !important;
  }

  header[data-nav].ts-boutique-header #nav-panel nav ul li a:hover,
  header[data-nav].ts-boutique-header #nav-panel nav ul li a:focus-visible,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link:hover,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link:focus-visible,
  header[data-nav].ts-boutique-header #nav-panel nav ul li a.active,
  header[data-nav].ts-boutique-header #nav-panel nav ul li a[aria-current="page"],
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link.active,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-link[aria-current="page"] {
    border-radius: 0 !important;
  }

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row {
    padding: 0.75rem 1.1rem 0.9rem !important;
    border-top: 1px solid rgba(198, 171, 148, 0.2) !important;
  }
}

@media (max-width: 63.99rem) {
  header[data-nav].ts-boutique-header #nav-panel nav {
    display: block !important;
    width: 100% !important;
  }
  header[data-nav].ts-boutique-header #nav-panel nav ul,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-menu-list {
    display: block !important;
    width: 100% !important;
  }
  header[data-nav].ts-boutique-header #nav-panel nav ul li {
    width: 100% !important;
  }
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row nav ul {
    display: flex !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 63.99rem) {
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row nav ul {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: auto !important;
  }
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row nav ul li {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row nav ul li a,
  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row nav ul li a:not([aria-current="page"]):not(.is-active):not(.active):not(.font-bold) {
    width: auto !important;
    border-radius: 9999px !important;
    justify-content: center !important;
    padding: 0.35rem 1rem !important;
    letter-spacing: 0.12em !important;
  }
}

/* Header logo: exact user image cropped flush to outer frame boundaries */
.ts-center-logo,
.ts-center-logo-slot .ts-center-logo {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}
.ts-center-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  border-radius: 0 !important;
}

  header[data-nav].ts-boutique-header #nav-panel .ts-mobile-lang-row {
    display: none !important;
  }


/* ==========================================================================
   THE SALON BUDAPEST – SZOLGÁLTATÁSKÁRTYA & ALOLDAL BEÁLLÍTÁSOK
   ========================================================================== */

.service-card {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: #181715 !important;
  color: #f8f5f0 !important;
  border: 1px solid #3b332d !important;
  border-radius: 9px !important;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.18) !important;
  transition: box-shadow 0.2s ease, outline-color 0.2s ease, transform 0.2s ease !important;
}

/* Visibility rules */
body:not(.gob-edit-mode) .service-card[data-visible="0"],
body:not(.gob-edit-mode) .service-card.is-hidden-public {
  display: none !important;
}

body.gob-edit-mode .service-card[data-visible="0"],
body.gob-edit-mode .service-card.is-hidden-public {
  border-style: dashed !important;
  border-color: #655341 !important;
}

/* Public clickability */
body:not(.gob-edit-mode) .service-card {
  cursor: pointer !important;
}
body:not(.gob-edit-mode) .service-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Edit-only elements hidden on public page */
body:not(.gob-edit-mode) .gob-edit-only {
  display: none !important;
}

.service-card-photo {
  height: 228px !important;
  position: relative !important;
  background-color: #24221f !important;
  background-size: cover !important;
  background-position: center !important;
  transition: background-position 0.2s ease !important;
}

.service-card-photo.photo-triptych { background-size: cover !important; background-position: center !important; }
.service-card-photo.photo-left { background-size: cover !important; background-position: 0% 50% !important; }
.service-card-photo.photo-mid { background-size: cover !important; background-position: 50% 50% !important; }
.service-card-photo.photo-right { background-size: cover !important; background-position: 100% 50% !important; }

.service-card-photo::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 35%) !important;
  pointer-events: none !important;
}

/* Gear Button */
.gear-button {
  position: absolute !important;
  z-index: 10 !important;
  left: 14px !important;
  top: 13px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: rgba(23, 22, 21, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 10px !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.2s ease !important;
}

.gear-button:hover {
  background: #8b6b4c !important;
  transform: rotate(30deg) !important;
}

.gear-button svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
}

/* Mini status badge */
.card-mini-status {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  color: #fff !important;
  padding: 5px 9px !important;
  border-radius: 20px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}
.card-mini-status.off {
  background: rgba(72, 61, 55, 0.85) !important;
  color: #d8c8b5 !important;
}

/* Normal magazine view */
.card-normal {
  padding: 24px 22px 26px !important;
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
}

.card-normal .article-card-time {
  color: #c89f6b !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.card-normal h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
  color: #fff !important;
}

.card-normal p {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin: 0 0 12px 0 !important;
  color: #bdb3a9 !important;
  flex: 1 !important;
}

/* In-place Editable Fields */
.card-editable {
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  padding: 3px 5px !important;
  outline: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

body.gob-edit-mode .card-editable:hover {
  border-color: #7e6d5b !important;
}

body.gob-edit-mode .card-editable:focus {
  background: #2a2622 !important;
  border-color: #c2a47b !important;
  box-shadow: 0 0 0 2px rgba(185, 150, 101, 0.25) !important;
}

.card-editable:empty::before {
  content: attr(data-placeholder);
  color: #857b72;
}

.card-editor-hint {
  font-size: 11px !important;
  color: #937961 !important;
  margin-top: 6px !important;
}

/* In-card Accordion Settings Panel */
.card-settings {
  background: #221e1b !important;
  padding: 18px 20px 20px !important;
  border-top: 1px solid #3b332d !important;
  animation: cardPanelIn 0.22s ease-out !important;
}

@keyframes cardPanelIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-settings-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-bottom: 1px solid #54483b !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
}

.card-settings-heading strong {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.card-settings-heading span {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: #c5a17a !important;
  text-transform: uppercase !important;
}

.card-settings label:not(.material-toggle) {
  display: block !important;
  color: #d5bda0 !important;
  font-size: 11px !important;
  margin: 10px 0 5px 0 !important;
  font-weight: 600 !important;
}

.card-settings select,
.card-settings input[type="file"],
.card-settings input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  background: #302a24 !important;
  border: 1px solid #655341 !important;
  color: #f7f1e9 !important;
  border-radius: 6px !important;
  padding: 9px 10px !important;
  font-size: 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.card-settings select:focus,
.card-settings input:focus {
  border-color: #d4b58e !important;
  box-shadow: 0 0 0 2px rgba(194, 164, 122, 0.35) !important;
}

.card-settings select option {
  background: #2b241e !important;
  color: #f7f1e9 !important;
}

.photo-choices {
  display: flex !important;
  gap: 7px !important;
  margin: 6px 0 12px 0 !important;
}

.photo-choice {
  flex: 1 !important;
  height: 50px !important;
  padding: 0 !important;
  border: 2px solid #56493b !important;
  border-radius: 5px !important;
  position: relative !important;
  background-color: #1c1915 !important;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.photo-choice.selected {
  border-color: #edd0a1 !important;
  outline: 1px solid #edd0a1 !important;
}

.photo-choice span {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
  font-size: 9px !important;
  padding: 2px !important;
  text-align: center !important;
}

.card-settings .helptext {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #baaa95 !important;
  margin: 6px 0 !important;
}

.setting-route {
  margin: 12px 0 !important;
  padding: 10px !important;
  background: #161412 !important;
  border-radius: 6px !important;
  color: #d8b384 !important;
  border: 1px solid #44382b !important;
  font-family: monospace !important;
  font-size: 11px !important;
  word-break: break-all !important;
}

.setting-route b {
  display: block !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #b2a28e !important;
  margin-bottom: 3px !important;
}

.visibility-setting {
  margin: 14px 0 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.visibility-setting strong {
  font-size: 12px !important;
  color: #fff !important;
  display: block !important;
}

.visibility-setting span.description {
  font-size: 10px !important;
  color: #b6a38c !important;
  display: block !important;
  margin-top: 3px !important;
}

/* Material Toggle Switch */
.material-toggle {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 51px !important;
  height: 31px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.material-toggle input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.material-toggle .track {
  height: 31px !important;
  width: 51px !important;
  border-radius: 20px !important;
  background: #554c44 !important;
  border: 1px solid #9f8e7a !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.material-toggle .thumb {
  position: absolute !important;
  left: 4px !important;
  top: 4px !important;
  width: 23px !important;
  height: 23px !important;
  border-radius: 100% !important;
  background: #e7e2db !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.material-toggle input:checked ~ .track {
  background: #ad8660 !important;
  border-color: #d5b18c !important;
}

.material-toggle input:checked ~ .thumb {
  transform: translateX(20px) !important;
  background: #fffaf3 !important;
}

.card-settings-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.card-settings-actions button {
  min-height: 37px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
}

.card-save {
  flex: 1 !important;
  border: 1px solid #d7b88f !important;
  background: #dfc7a5 !important;
  color: #231a12 !important;
  transition: background 0.15s ease !important;
}

.card-save:hover {
  background: #ecd5b6 !important;
}

.card-cancel {
  border: 1px solid #695744 !important;
  color: #d8c8b5 !important;
  background: transparent !important;
}

.card-cancel:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.card-settings-error {
  color: #ffb4a2 !important;
  font-size: 11px !important;
  margin-top: 8px !important;
  min-height: 14px !important;
}