/* ══════════════════════════════════════
   NAIL ART UB — Design System
   Scroll-driven cinematic background
   ══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Stage 0 — warm beige (hero) */
  --s0-bg:    #F7F7F7;
  --s0-text:  #111111;
  --s0-text2: #666666;
  --s0-card:  rgba(255,255,255,0.7);
  --s0-border:rgba(0,0,0,0.25);
  --s0-nav:   rgba(245,239,230,0.88);

  /* Stage 1 — bright art (salons) */
  --s1-bg:    #FFFFFF;
  --s1-text:  #1E1510;
  --s1-text2: #6B5245;

  /* Stage 2 — mid-dark (services) */
  --s2-bg:    #2A1A14;
  --s2-text:  #F0E6DA;
  --s2-text2: #A08878;

  /* Stage 3 — deep dark (promos+footer) */
  --s3-bg:    #0E0A08;
  --s3-text:  #E8DDD4;
  --s3-text2: #7A6A62;

  /* Active (changes with scroll via JS) */
  --bg:       var(--s0-bg);
  --text:     var(--s0-text);
  --text2:    var(--s0-text2);
  --card-bg:  var(--s0-card);
  --border:   var(--s0-border);
  --nav-bg:   var(--s0-nav);

  --gold:    #C4924A;
  --gold2:   #E0B472;
  --rose:    #C4627A;
  --rose2:   #E8A0B4;

  --font-s: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --ease:   cubic-bezier(0.25,0.46,0.45,0.94);
}

html { scroll-behavior: auto; }
body {
  font-family: var(--font-b);
  font-weight: 300;
  overflow-x: hidden;
  min-height: 100vh;
  background: var(--s0-bg);
  color: var(--s0-text);
  transition: color 0.6s;
}

/* ══ SCROLL BACKGROUND LAYERS ══
   4 layers stacked; JS crossfades them via opacity
   Layer 0 = plain beige (no image)
   Layer 1 = bright art image (fades in as you scroll to salons)
   Layer 2 = mid-dark art image (fades in at services)
   Layer 3 = dark art image (fades in at promos/footer)
*/
#scrollBg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Layer 0 — warm beige solid, always visible as base */
#bg0 {
  opacity: 1;
  background: linear-gradient(160deg, #F7F7F7 0%, #EEEEEE 40%, #E8DDD0 100%);
}
/* Layer 1 — bright nail art photo */
#bg1 {
  background-image: url('https://images.unsplash.com/photo-1604654894610-df63bc536371?w=1920&q=90');
  /* soft bright overlay to keep it light and artistic */
}
#bg1::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(245,239,230,0.20);
}
/* Layer 2 — mid-dark moody art */
#bg2 {
  background-image: url('https://images.unsplash.com/photo-1519014816548-bf5fe059798b?w=1920&q=90');
}
/* bg2 — no overlay, natural photo colors */
/* Layer 3 — deep dark dramatic art */
#bg3 {
  background-image: url('https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1920&q=90');
}
/* bg3 — no overlay, naturally dark photo */

/* Everything above background */
nav, section, .mobile-drawer, footer,
.modal-overlay, .auth-overlay, .bookings-overlay, .lightbox, .toast {
  position: relative;
  z-index: 1;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ══ NAV ══ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 2.5rem; height: 64px;
  background: rgba(245,239,230,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  transition: background 0.5s, border-color 0.5s;
}
nav.dark-nav {
  background: rgba(14,10,8,0.88);
  border-bottom-color: rgba(196,146,74,0.2);
}
nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.08); }
.nav-logo { font-family: var(--font-s); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.06em; text-decoration: none; transition: color 0.5s; color: #111111; }
nav.dark-nav .nav-logo { color: #F0E6DA; }
.nav-logo em { color: var(--gold); font-style: italic; }
.nav-center { display: flex; justify-content: center; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 0.25s; position: relative; color: #666666; }
nav.dark-nav .nav-links a { color: #A08878; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.3s var(--ease); }
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 0.7rem; justify-content: flex-end; position: relative; }
#navAuthBtns { display: flex; gap: 0.6rem; }
.theme-toggle { background: none; border: 1px solid rgba(0,0,0,0.3); width: 34px; height: 34px; cursor: pointer; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; transition: all 0.25s; color: #666666; }
nav.dark-nav .theme-toggle { border-color: rgba(196,146,74,0.3); color: #A08878; }
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
.nav-btn { font-family: var(--font-b); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.45rem 1.1rem; border: 1px solid rgba(0,0,0,0.4); color: #666666; background: transparent; cursor: pointer; transition: all 0.25s; }
nav.dark-nav .nav-btn { color: #A08878; border-color: rgba(196,146,74,0.3); }
.nav-btn:hover { border-color: var(--gold); color: var(--gold); }
.nav-btn.primary { background: var(--gold); border-color: var(--gold); color: white; font-weight: 500; }
.nav-btn.primary:hover { background: var(--gold2); border-color: var(--gold2); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,var(--gold),var(--rose)); display: none; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; border: 2px solid rgba(196,146,74,0.4); flex-shrink: 0; }
.user-menu { position: absolute; top: 50px; right: 0; background: rgba(245,239,230,0.97); border: 1px solid rgba(0,0,0,0.3); min-width: 210px; display: none; flex-direction: column; z-index: 600; box-shadow: 0 20px 60px rgba(44,31,22,0.12); backdrop-filter: blur(20px); }
.user-menu.open { display: flex; }
.user-menu-header { padding: 0.9rem 1.1rem; border-bottom: 1px solid rgba(0,0,0,0.2); display: flex; align-items: center; gap: 0.8rem; }
.user-avatar-large { font-size: 2rem; }
.user-menu-name { font-size: 0.85rem; font-weight: 500; color: #111111; }
.user-menu-email { font-size: 0.72rem; color: #666666; margin-top: 0.1rem; }
.user-menu a, .user-menu button { display: block; width: 100%; padding: 0.7rem 1.1rem; font-family: var(--font-b); font-size: 0.78rem; color: #666666; text-decoration: none; background: none; border: none; text-align: left; cursor: pointer; transition: all 0.2s; }
.user-menu a:hover, .user-menu button:hover { background: rgba(196,146,74,0.08); color: var(--gold); }
.user-menu .divider { height: 1px; background: rgba(0,0,0,0.2); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: #111111; border-radius: 2px; transition: all 0.3s var(--ease); }
nav.dark-nav .hamburger span { background: #F0E6DA; }

/* ── NIGHT MODE (body.dark-mode) — also themes the header ── */
body.dark-mode nav:not(.dark-nav) {
  background: rgba(14,10,8,0.95) !important;
}
body.dark-mode nav:not(.dark-nav) .nav-logo,
body.dark-mode nav:not(.dark-nav) .nav-links a { color: #E8DDD0; }
body.dark-mode nav:not(.dark-nav) .nav-btn { color: #E8DDD0 !important; border-color: rgba(232,221,208,0.35) !important; }
body.dark-mode nav:not(.dark-nav) .nav-btn.primary { background: var(--gold) !important; color: #fff !important; border-color: var(--gold) !important; }
body.dark-mode nav:not(.dark-nav) .theme-toggle { color: #C4924A; border-color: rgba(196,146,74,0.3); }
body.dark-mode nav:not(.dark-nav) .hamburger span { background: #E8DDD0; }
body.dark-mode .mobile-drawer { background: #161616 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .mobile-drawer a,
body.dark-mode .mobile-drawer .mobile-auth-row { color: #E8DDD0; border-color: rgba(196,146,74,0.2); }
body.dark-mode .mobile-auth-row .nav-btn { color: #E8DDD0 !important; border-color: rgba(232,221,208,0.35) !important; }
body.dark-mode .mobile-auth-row .nav-btn.primary { background: var(--gold) !important; color: #fff !important; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-drawer { position: fixed; top: 64px; left: 0; right: 0; z-index: 490; background: #FFFFFF; border-bottom: 1px solid rgba(0,0,0,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-110%); transition: transform 0.4s var(--ease); }
.mobile-drawer.open { transform: translateY(0); }
.mobile-drawer-inner { display: flex; flex-direction: column; padding: 1.5rem 2rem; }
.mobile-drawer-inner a { font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: #666666; text-decoration: none; cursor: pointer; padding: 0.9rem 0; border-bottom: 1px solid rgba(0,0,0,0.2); transition: color 0.2s; }
.mobile-drawer-inner a:hover { color: var(--gold); }
.mobile-auth-row { display: flex; gap: 0.8rem; margin-top: 1.2rem; flex-wrap: wrap; }

/* ══ HERO ══ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 8rem 2rem 6rem;
  position: relative;
}
.hero-content { position: relative; z-index: 2; max-width: 780px; }
.hero-tag { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; animation: fadeUp 1s ease both; }
.hero-title { font-family: var(--font-s); font-weight: 300; line-height: 1.05; margin-bottom: 1.5rem; animation: fadeUp 1s 0.15s ease both; }
.hero-title .line1 { display: block; font-size: clamp(2.8rem,7vw,6rem); color: #111111; }
.hero-title .line2 { display: block; font-size: clamp(3.2rem,8.5vw,7.5rem); font-style: italic; background: linear-gradient(135deg,var(--gold) 0%,var(--rose) 50%,var(--gold2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 1rem; font-weight: 300; line-height: 1.7; color: #666666; max-width: 460px; margin: 0 auto 2.5rem; animation: fadeUp 1s 0.25s ease both; }
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeUp 1s 0.35s ease both; }
.btn-glow { position: relative; padding: 0.9rem 2.5rem; background: var(--gold); border: none; color: white; font-family: var(--font-b); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background .2s; }
.btn-glow:hover { background: #6D28D9; }
.btn-glow span { position: relative; z-index: 1; }
.btn-outline { padding: 0.9rem 2.5rem; background: transparent; border: 1px solid rgba(0,0,0,0.5); color: #111111; font-family: var(--font-b); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(196,146,74,0.05); }
.hero-stats { display: flex; align-items: center; gap: 3rem; margin-top: 4rem; position: relative; z-index: 2; animation: fadeUp 1s 0.5s ease both; }
.hstat { text-align: center; }
.hstat-n { font-family: var(--font-s); font-size: 2.4rem; font-weight: 300; display: block; color: #111111; }
.hstat-l { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #666666; }
.hstat-div { width: 1px; height: 40px; background: rgba(0,0,0,0.3); }
.hero-scroll-hint { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: #666666; font-size: 0.58rem; letter-spacing: 0.25em; text-transform: uppercase; animation: fadeUp 1s 0.8s ease both; }
.scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom,var(--gold),transparent); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.3;transform:scaleY(0.6)} 50%{opacity:1;transform:scaleY(1)} }

/* ══ REVEAL ══ */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ══ SECTION TEXT COLOR TRANSITIONS ══
   Sections switch between light/dark text depending on bg stage
*/
.light-section { --sec-text: #111111; --sec-text2: #666666; --sec-card: rgba(255,255,255,0.72); --sec-border: rgba(0,0,0,0.22); }
.dark-section  { --sec-text: #F0E6DA; --sec-text2: #A08878; --sec-card: rgba(255,255,255,0.04); --sec-border: rgba(196,146,74,0.2); }

/* ══ SEARCH ══ */
.search-section { padding: 5rem 2rem 2rem; max-width: 900px; margin: 0 auto; }
.search-bar { display: flex; align-items: stretch; border: 1px solid rgba(0,0,0,0.35); background: rgba(255,255,255,0.65); overflow: hidden; backdrop-filter: blur(12px); transition: border-color 0.3s, box-shadow 0.3s; }
.search-bar:focus-within { border-color: var(--gold); box-shadow: 0 0 24px rgba(196,146,74,0.15); }
.s-icon { padding: 1rem 0 1rem 1.2rem; color: #666666; font-size: 1.2rem; display: flex; align-items: center; }
.search-bar input { flex: 1; border: none; outline: none; padding: 1rem; font-family: var(--font-b); font-size: 0.88rem; font-weight: 300; color: #111111; background: transparent; }
.search-bar input::placeholder { color: #A08878; }
.search-bar select { border: none; border-left: 1px solid rgba(0,0,0,0.1); outline: none; padding: 1rem; font-family: var(--font-b); font-size: 0.78rem; color: #666666; background: #FFFFFF; appearance: none; cursor: pointer; min-width: 140px; }
.search-bar button { padding: 1rem 1.8rem; border: none; background: var(--gold); color: white; font-family: var(--font-b); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; text-align: center; }
.search-bar button:hover { background: #6D28D9; }
.filter-chips { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.chip { font-family: var(--font-b); font-size: 0.67rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.38rem 0.9rem; border: 1px solid rgba(0,0,0,0.3); color: #666666; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.25s; }
.chip:hover, .chip.active { background: var(--gold); border-color: var(--gold); color: white; }
.price-filter { margin-top: 1.2rem; padding: 1rem 1.2rem; border: 1px solid rgba(0,0,0,0.25); background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); }
.price-filter-label { display: flex; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #666666; margin-bottom: 0.9rem; }
.price-filter-label span:last-child { color: var(--gold); font-weight: 500; }
.range-wrap { position: relative; height: 24px; display: flex; align-items: center; }
.range-wrap input[type=range] { position: absolute; width: 100%; pointer-events: none; -webkit-appearance: none; height: 3px; background: transparent; z-index: 3; }
.range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2px solid white; pointer-events: all; cursor: pointer; box-shadow: 0 2px 8px rgba(196,146,74,0.4); }
.range-track { position: absolute; width: 100%; height: 3px; background: rgba(0,0,0,0.25); z-index: 1; border-radius: 2px; }
.range-fill { position: absolute; height: 100%; background: linear-gradient(to right,var(--gold),var(--rose)); z-index: 2; border-radius: 2px; }

/* ══ ROW SECTIONS ══ */
.row-section { padding: 3rem 3rem 2rem; max-width: 1280px; margin: 0 auto; }
.row-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.8rem; }
.eyebrow { font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; display: block; }
.row-head h2, .section-head h2 { font-family: var(--font-s); font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 300; }
.row-head h2 em, .section-head h2 em { font-style: italic; color: var(--gold); }
.row-arrows { display: flex; gap: 0.5rem; }
.rarrow { width: 42px; height: 42px; border: 1px solid rgba(0,0,0,0.35); background: rgba(255,255,255,0.5); color: var(--gold); font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(10px); }
.rarrow:hover { background: var(--gold); color: white; border-color: var(--gold); }
.track-wrap { overflow: hidden; }
.track { display: flex; gap: 16px; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); will-change: transform; }

/* ══ SALON CARD ══ */
.salon-card { flex: 0 0 calc(33.333% - 12px); min-width: 260px; background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.2); cursor: pointer; overflow: hidden; transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s; backdrop-filter: blur(10px); }
.salon-card:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(196,146,74,0.2); }
.card-img { position: relative; height: 200px; overflow: hidden; background: #EEEEEE; }
.card-img .slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
.card-img .slide-img.active { opacity: 1; }
.card-img .badge { position: absolute; top: .8rem; right: .8rem; z-index: 4; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.25rem 0.7rem; background: linear-gradient(135deg,var(--gold),var(--rose)); color: white; font-weight: 500; }
.card-img .sarrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(44,31,22,0.55); color: white; border: none; width: 28px; height: 44px; font-size: 1.2rem; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.sarrow.prev { left: 0; } .sarrow.next { right: 0; }
.card-img:hover .sarrow { opacity: 1; }
.sdots { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 5; }
.sdot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; transition: background 0.2s; }
.sdot.active { background: white; }
.card-body { padding: 1.2rem 1.4rem; }
.card-district { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.card-body h3 { font-family: var(--font-s); font-size: 1.3rem; font-weight: 400; color: #111111; margin-bottom: 0.4rem; }
.card-rating { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.7rem; }
.stars { color: var(--gold); font-size: 0.75rem; } .rnum { font-size: 0.73rem; color: #666666; }
.card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.ctag { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.55rem; border: 1px solid rgba(0,0,0,0.25); color: #666666; }
.card-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.2); padding-top: 0.9rem; }
.card-price { font-family: var(--font-s); font-size: 1rem; font-weight: 400; color: #111111; }
.cbook-btn { font-family: var(--font-b); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 1.1rem; border: 1px solid var(--gold); color: var(--gold); background: transparent; cursor: pointer; transition: all 0.25s; }
.cbook-btn:hover { background: var(--gold); color: white; }
.skel { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.2); flex: 0 0 calc(33.333% - 12px); min-width: 260px; }
.skel-img { height: 200px; background: linear-gradient(90deg,#EEEEEE 25%,#F7F7F7 50%,#EEEEEE 75%); background-size: 200%; animation: shimmer 1.5s infinite; }
.skel-body { padding: 1.2rem 1.4rem; }
.skel-line { height: 10px; margin-bottom: 0.8rem; border-radius: 2px; background: linear-gradient(90deg,#EEEEEE 25%,#F7F7F7 50%,#EEEEEE 75%); background-size: 200%; animation: shimmer 1.5s infinite; }
.skel-line.s { width: 40%; } .skel-line.m { width: 65%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══ MAP ══ */
.map-section { padding: 3rem 3rem 4rem; max-width: 1280px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 2.5rem; }
#gmap { height: 480px; border: 1px solid rgba(0,0,0,0.3); background: #EEEEEE; display: flex; align-items: center; justify-content: center; }
.map-ph { text-align: center; color: #666666; }
.map-ph .mph-icon { font-size: 3rem; opacity: 0.35; margin-bottom: 1rem; }
.map-ph p { font-size: 0.83rem; line-height: 1.7; }
.map-ph code { color: var(--gold); background: rgba(196,146,74,0.1); padding: 0.2rem 0.5rem; display: inline-block; margin-top: .5rem; }

/* ══ SERVICES ══ */
.content-section { padding: 4rem 3rem 5rem; max-width: 1280px; margin: 0 auto; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 2px; }
.svc-card { background: rgba(255,255,255,0.12); border: 1px solid rgba(196,146,74,0.18); padding: 2rem 1.6rem; transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s; backdrop-filter: blur(10px); }
.svc-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(196,146,74,0.15); }
.svc-icon { font-size: 2rem; margin-bottom: 1rem; }
.svc-card h3 { font-family: var(--font-s); font-size: 1.3rem; font-weight: 400; color: #F0E6DA; margin-bottom: 0.6rem; }
.svc-card p { font-size: 0.81rem; color: #A08878; line-height: 1.7; margin-bottom: 1.2rem; }
.svc-from { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border-top: 1px solid rgba(196,146,74,0.2); padding-top: 0.8rem; }

/* ══ PROMOS ══ */
.promo-bg { position: relative; max-width: 100%; padding: 5rem 0; }
.promo-bg .section-head, .promo-bg .promo-grid { max-width: 1280px; margin-inline: auto; padding-inline: 3rem; }
.promo-bg .section-head h2 { color: #E8DDD4; }
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 2px; }
.pcard { background: rgba(255,255,255,0.04); border: 1px solid rgba(196,146,74,0.18); padding: 2rem 1.6rem; backdrop-filter: blur(10px); transition: border-color 0.35s, transform 0.35s; }
.pcard:hover { border-color: var(--rose); transform: translateY(-4px); }
.pcard.featured { border-color: var(--gold); background: rgba(196,146,74,0.06); }
.pbadge { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.pcard h3 { font-family: var(--font-s); font-size: 1.35rem; font-weight: 400; color: #E8DDD4; margin-bottom: 0.6rem; }
.pcard p { font-size: 0.81rem; color: #A08878; line-height: 1.7; margin-bottom: 1rem; }
.pcard strong { color: var(--gold2); }
.coupon-box { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; border: 1px dashed rgba(196,146,74,0.4); padding: 0.6rem 0.8rem; background: rgba(196,146,74,0.06); }
.coupon-code { font-family: monospace; font-size: 0.9rem; font-weight: 600; color: var(--gold); letter-spacing: 0.12em; flex: 1; }
.coupon-copy-btn { font-family: var(--font-b); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem; border: 1px solid rgba(196,146,74,0.3); color: #A08878; background: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.coupon-copy-btn:hover { border-color: var(--gold); color: var(--gold); }
.coupon-copy-btn.copied { border-color: var(--gold); color: var(--gold); background: rgba(196,146,74,0.1); }
.pbtn { width: 100%; padding: 0.75rem; border: 1px solid rgba(196,146,74,0.3); color: var(--gold); background: transparent; font-family: var(--font-b); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; }
.pbtn:hover { background: linear-gradient(135deg,var(--gold),var(--rose)); border-color: transparent; color: white; }

/* ══ MODAL ══ */
.modal-overlay { position: fixed; inset: 0; z-index: 700; background: rgba(10,6,4,0.85); backdrop-filter: blur(12px); display: none; align-items: flex-start; justify-content: center; padding: 2rem; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.3); max-width: 680px; width: 100%; margin: auto; animation: modalIn 0.35s var(--ease); position: relative; }
@keyframes modalIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
.modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 10; background: rgba(245,239,230,0.9); border: 1px solid rgba(0,0,0,0.3); width: 32px; height: 32px; color: #666666; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.modal-close:hover { border-color: var(--gold); color: var(--gold); }
.modal-slider { height: 260px; position: relative; overflow: hidden; background: #EEEEEE; }
.modal-slider .slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
.modal-slider .slide-img.active { opacity: 1; }
.modal-slider .sarrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(44,31,22,0.5); color: white; border: none; width: 32px; height: 48px; font-size: 1.2rem; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.modal-slider:hover .sarrow { opacity: 1; }
.modal-slider .sarrow.prev { left: 0; } .modal-slider .sarrow.next { right: 0; }
.modal-slider .sdots { position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 5; }
.modal-slider .sdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: background 0.2s; }
.modal-slider .sdot.active { background: white; }
.modal-tabs { display: flex; border-bottom: 1px solid rgba(0,0,0,0.2); }
.modal-tab { padding: 0.85rem 1.5rem; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-family: var(--font-b); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #666666; cursor: pointer; transition: all 0.2s; }
.modal-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.modal-panel { display: none; padding: 1.75rem 2rem; }
.modal-panel.active { display: block; }
.modal-district { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.modal-name { font-family: var(--font-s); font-size: 1.9rem; font-weight: 300; color: #111111; margin-bottom: 1.2rem; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.2rem; }
.info-row { font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.2rem; }
.info-row strong { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.info-row span { color: #666666; }
.svc-title { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 1.2rem 0 0.8rem; }
.modal-services { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.service-item { display: flex; justify-content: space-between; font-size: 0.81rem; padding: 0.65rem 0.9rem; border: 1px solid rgba(0,0,0,0.2); background: rgba(255,255,255,0.5); }
.svc-name { color: #111111; } .svc-price { color: var(--gold); font-weight: 400; }
.book-form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.book-form input, .book-form select { width: 100%; padding: 0.85rem 1rem; border: 1px solid rgba(0,0,0,0.25); background: rgba(255,255,255,0.6); font-family: var(--font-b); font-size: 0.85rem; font-weight: 300; color: #111111; outline: none; transition: border-color 0.2s; }
.book-form input:focus, .book-form select:focus { border-color: var(--gold); }
.book-form input::placeholder { color: #A08878; }
.book-form input[readonly] { color: #666666; }
.book-submit { width: 100%; padding: 1rem; border: none; background: linear-gradient(135deg,var(--gold),var(--rose)); color: white; font-family: var(--font-b); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: opacity 0.25s; margin-top: 0.3rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.book-submit:hover { opacity: 0.85; } .book-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.login-prompt { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.2); padding: 1.2rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.login-prompt p { font-size: 0.82rem; color: #666666; }
.login-prompt button { font-family: var(--font-b); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45rem 1.1rem; border: 1px solid var(--gold); color: var(--gold); background: none; cursor: pointer; flex-shrink: 0; transition: all 0.2s; }
.login-prompt button:hover { background: var(--gold); color: white; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.gallery-item { aspect-ratio: 1; overflow: hidden; cursor: pointer; position: relative; background: #EEEEEE; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .gal-overlay { position: absolute; inset: 0; background: rgba(44,31,22,0.35); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; }
.gallery-item:hover .gal-overlay { opacity: 1; }
.gallery-empty { grid-column: 1/-1; text-align: center; padding: 3rem; color: #666666; font-size: 0.85rem; }
.reviews-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.review-item { border: 1px solid rgba(0,0,0,0.2); background: rgba(255,255,255,0.4); padding: 1rem 1.2rem; }
.review-top { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.reviewer-name { font-size: 0.85rem; font-weight: 400; color: #111111; }
.review-meta { text-align: right; }
.r-stars { color: var(--gold); font-size: 0.75rem; } .r-date { font-size: 0.68rem; color: #666666; }
.review-text { font-size: 0.81rem; color: #666666; line-height: 1.6; }
.write-review-title { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
.star-select { display: flex; gap: 0.3rem; margin-bottom: 0.8rem; }
.star-btn { font-size: 1.4rem; color: rgba(0,0,0,0.3); cursor: pointer; background: none; border: none; padding: 0; line-height: 1; transition: color 0.15s; }
.star-btn.lit { color: var(--gold); }
.review-textarea { width: 100%; padding: .85rem 1rem; border: 1px solid rgba(0,0,0,0.25); background: rgba(255,255,255,0.5); font-family: var(--font-b); font-size: .85rem; font-weight: 300; color: #111111; outline: none; resize: vertical; min-height: 90px; transition: border-color .2s; }
.review-textarea:focus { border-color: var(--gold); } .review-textarea::placeholder { color: #A08878; }
.review-submit { padding: .65rem 1.8rem; background: none; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-b); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: all .2s; margin-top: .6rem; }
.review-submit:hover { background: var(--gold); color: white; }
.no-auth-box { background: rgba(255,255,255,0.3); border: 1px solid rgba(0,0,0,0.2); padding: 1.2rem 1.5rem; font-size: .82rem; color: #666666; text-align: center; }
.no-auth-box a { color: var(--gold); cursor: pointer; }

/* ══ AUTH ══ */
.auth-overlay { position: fixed; inset: 0; z-index: 800; background: rgba(10,6,4,0.88); backdrop-filter: blur(16px); display: none; align-items: center; justify-content: center; padding: 2rem; }
.auth-overlay.open { display: flex; }
.auth-box { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.35); width: 100%; max-width: 420px; animation: modalIn .35s var(--ease); position: relative; padding: 2.5rem; }
.auth-close { position: absolute; top: 1rem; right: 1rem; background: none; border: 1px solid rgba(0,0,0,0.25); width: 30px; height: 30px; color: #666666; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.auth-close:hover { border-color: var(--gold); color: var(--gold); }
.auth-box h2 { font-family: var(--font-s); font-size: 2rem; font-weight: 300; color: #111111; margin-bottom: .3rem; }
.auth-box h2 em { font-style: italic; color: var(--gold); }
.auth-sub { font-size: .82rem; color: #666666; margin-bottom: 2rem; line-height: 1.6; }
.auth-sub em { font-style: italic; color: var(--gold); }
.auth-form { display: flex; flex-direction: column; gap: .75rem; }
.auth-form input { padding: .9rem 1rem; border: 1px solid rgba(0,0,0,0.25); background: rgba(255,255,255,0.6); font-family: var(--font-b); font-size: .88rem; font-weight: 300; color: #111111; outline: none; transition: border-color .2s; }
.auth-form input:focus { border-color: var(--gold); } .auth-form input::placeholder { color: #A08878; }
.field-error { font-size: .72rem; color: #C04040; min-height: 1rem; }
.auth-submit { padding: 1rem; border: none; background: linear-gradient(135deg,var(--gold),var(--rose)); color: white; font-family: var(--font-b); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: opacity .25s; margin-top: .2rem; display: flex; align-items: center; justify-content: center; gap: .6rem; }
.auth-submit:hover { opacity: .85; } .auth-submit:disabled { opacity: .4; cursor: not-allowed; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: .1rem 0; }
.auth-divider span { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: #A08878; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.25); }
.google-btn { padding: .85rem 1rem; border: 1px solid rgba(0,0,0,0.25); background: rgba(255,255,255,0.5); font-family: var(--font-b); font-size: .8rem; color: #111111; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .6rem; transition: all .2s; }
.google-btn:hover { border-color: var(--gold); }
.auth-switch { text-align: center; margin-top: .9rem; font-size: .8rem; color: #666666; }
.auth-switch a { color: var(--gold); cursor: pointer; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; animation: spin .7s linear infinite; display: none; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ══ PROFILE ══ */
.profile-box { max-width: 480px; }
.profile-current { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; padding: 1.2rem; border: 1px solid rgba(0,0,0,0.25); background: rgba(255,255,255,0.4); }
.profile-icon-big { font-size: 3.5rem; line-height: 1; }
.profile-info h4 { font-family: var(--font-s); font-size: 1.3rem; font-weight: 400; color: #111111; margin-bottom: 0.2rem; }
.profile-info p { font-size: 0.78rem; color: #666666; }
.profile-section-title { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.avatar-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0.5rem; margin-bottom: 1.5rem; }
.avatar-option { font-size: 1.8rem; width: 100%; aspect-ratio: 1; border: 2px solid transparent; background: rgba(255,255,255,0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s; border-radius: 50%; }
.avatar-option:hover { border-color: var(--gold); background: rgba(196,146,74,0.1); transform: scale(1.1); }
.avatar-option.selected { border-color: var(--gold); background: rgba(196,146,74,0.15); box-shadow: 0 0 16px rgba(196,146,74,0.3); }
.profile-save-btn { width: 100%; padding: 0.85rem; border: none; background: linear-gradient(135deg,var(--gold),var(--rose)); color: white; font-family: var(--font-b); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: opacity 0.25s; }
.profile-save-btn:hover { opacity: 0.85; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.5rem; }
.pstat { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.2); padding: 1rem; text-align: center; }
.pstat-n { font-family: var(--font-s); font-size: 1.8rem; font-weight: 300; color: var(--gold); display: block; }
.pstat-l { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #666666; }

/* ══ BOOKINGS ══ */
.bookings-overlay { position: fixed; inset: 0; z-index: 750; background: rgba(10,6,4,.88); backdrop-filter: blur(12px); display: none; align-items: center; justify-content: center; padding: 2rem; }
.bookings-overlay.open { display: flex; }
.bookings-panel { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08); width: 100%; max-width: 520px; animation: modalIn .35s var(--ease); position: relative; padding: 2rem; max-height: 82vh; overflow-y: auto; }
.bookings-panel h2 { font-family: var(--font-s); font-size: 1.8rem; font-weight: 300; color: #111; margin-bottom: 1.5rem; }
.bookings-panel h2 em { font-style: italic; color: var(--gold); }
.booking-item { border: 1px solid rgba(0,0,0,0.2); background: rgba(255,255,255,0.4); padding: 1rem 1.2rem; margin-bottom: .6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.b-name { font-size: .9rem; font-weight: 400; color: #111111; } .b-detail { font-size: .73rem; color: #666666; margin-top: .2rem; }
.b-status { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .7rem; background: rgba(196,146,74,0.1); color: var(--gold); border: 1px solid rgba(196,146,74,0.25); white-space: nowrap; flex-shrink: 0; }
.b-status.cancelled { background: rgba(180,60,60,.1); color: #C04040; border-color: rgba(180,60,60,.2); }
.cancel-btn { display: block; margin-top: .3rem; font-family: var(--font-b); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #A08878; background: none; border: none; cursor: pointer; transition: color .2s; }
.cancel-btn:hover { color: #C04040; }
.no-bookings { text-align: center; padding: 2.5rem; color: #666666; font-size: .85rem; line-height: 1.7; }

/* ══ LIGHTBOX ══ */
.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; animation: modalIn 0.3s var(--ease); }
.lb-close { position: absolute; top: 1.2rem; right: 1.2rem; background: none; border: 1px solid rgba(255,255,255,0.2); width: 36px; height: 36px; color: white; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.lb-close:hover { border-color: var(--gold); color: var(--gold); }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: white; width: 48px; height: 80px; font-size: 2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.lb-arrow:hover { background: rgba(196,146,74,0.3); }
.lb-arrow.prev { left: 1rem; } .lb-arrow.next { right: 1rem; }
.lb-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: 0.75rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.5); }

/* ══ TOAST ══ */
.toast { position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; background: #FFFFFF; color: #111111; padding: 1rem 1.5rem; font-size: .82rem; border-left: 3px solid var(--gold); transform: translateX(130%); transition: transform .35s var(--ease); max-width: 320px; line-height: 1.5; border: 1px solid rgba(0,0,0,0.3); box-shadow: 0 8px 32px rgba(44,31,22,0.15); }
.toast.show { transform: translateX(0); } .toast.error { border-left-color: #C04040; }

/* ══ FOOTER ══ */
footer { border-top: 1px solid rgba(196,146,74,0.15); padding: 3.5rem 2rem; text-align: center; }
.footer-inner { max-width: 600px; margin: 0 auto; }
.footer-logo { font-family: var(--font-s); font-size: 1.8rem; font-weight: 300; margin-bottom: 0.5rem; color: #E8DDD4; }
.footer-logo em { font-style: italic; color: var(--gold); }
.footer-tagline { font-size: 0.85rem; line-height: 1.6; margin-bottom: 1.5rem; color: #7A6A62; }
.footer-socials { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.social-link { width: 38px; height: 38px; border: 1px solid rgba(196,146,74,0.2); display: flex; align-items: center; justify-content: center; color: #7A6A62; text-decoration: none; transition: all 0.25s; }
.social-link svg { width: 16px; height: 16px; }
.social-link:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.footer-links { display: flex; justify-content: center; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.75rem; }
.footer-links a { color: #7A6A62; text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--gold); }
.footer-links span { color: rgba(196,146,74,0.3); }
.footer-copy { font-size: 0.7rem; color: rgba(196,146,74,0.35); }

/* ══ RESPONSIVE TABLET ══ */
@media (max-width:900px) {
  .nav-center { display: none; } .hamburger { display: flex; } #navAuthBtns { display: none; }
  nav { grid-template-columns: 1fr auto; }
  .hero { padding: 7rem 1.5rem 4rem; }
  .hero-title .line1 { font-size: clamp(2.2rem,6vw,3.5rem); }
  .hero-title .line2 { font-size: clamp(2.6rem,7vw,4.5rem); }
  .hero-stats { gap: 2rem; } .hstat-n { font-size: 1.8rem; }
  .search-section { padding: 3.5rem 1.5rem 1.5rem; }
  .row-section { padding: 2.5rem 1.5rem 1.5rem; }
  .salon-card { flex: 0 0 calc(50% - 8px); } .skel { flex: 0 0 calc(50% - 8px); }
  .map-section, .content-section { padding: 2.5rem 1.5rem 3rem; }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .promo-bg .section-head, .promo-bg .promo-grid { padding-inline: 1.5rem; }
  .promo-grid { grid-template-columns: repeat(2,1fr); }
}

/* ══ RESPONSIVE MOBILE ══ */
@media (max-width:540px) {
  nav { padding: 0 1rem; height: 56px; }
  .nav-logo { font-size: 1.05rem; }
  .hamburger { padding: 4px; gap: 4px; }
  .hamburger span { width: 19px; }
  .mobile-drawer { top: 56px; }
  .hero { padding: 5rem 1.2rem 2rem; min-height: auto; }
  .hero-tag { display: none; }
  .hero-title .line1 { font-size: 2rem; } .hero-title .line2 { font-size: 2.6rem; }
  .hero-sub { font-size: .88rem; }
  .hero-btns { margin-bottom: 1.5rem; }
  .hero-btns .btn-outline { display: none; }
  .hero-stats { gap: 1.2rem; margin-top: 1.6rem; }
  .hstat-n { font-size: 1.5rem; }
  .hstat-l { font-size: .52rem; letter-spacing: .12em; white-space: nowrap; }
  .hstat-div { height: 26px; }
  .hero-scroll-hint { display: none; }
  .search-section { padding: 1.5rem 1rem 1rem; }
  .search-bar { flex-wrap: wrap; }
  .search-bar select { flex: 1 1 100%; border-left: none; border-top: 1px solid rgba(0,0,0,0.1); min-width: 0; }
  .filter-chips { gap: .35rem; } .chip { font-size: .6rem; padding: .3rem .7rem; }
  .price-filter { display: none; }
  .row-section { padding: 1.5rem 1rem 1rem; } .row-head h2 { font-size: 1.3rem; }
  .salon-card { flex: 0 0 82vw; } .skel { flex: 0 0 82vw; } .track { gap: 10px; }
  .map-section { padding: 2rem 1rem 2.5rem; } #gmap { height: 300px; }
  .content-section { padding: 2rem 1rem 3rem; }
  .svc-grid { grid-template-columns: 1fr; } .svc-card:nth-child(n+4) { display: none; }
  .promo-bg { padding: 3rem 0; }
  .promo-bg .section-head, .promo-bg .promo-grid { padding-inline: 1rem; }
  .promo-grid { grid-template-columns: 1fr; } .pcard:nth-child(n+3) { display: none; }
  .modal { margin: 0; } .modal-panel { padding: 1.2rem; }
  .info-grid { grid-template-columns: 1fr; } .modal-services { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  footer { padding: 2rem 1rem; }
}

@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

/* ══════════════════════════════════════════════════════════════
   NEW: Role choice, admin panel, super admin panel
   ══════════════════════════════════════════════════════════════ */

/* Role choice in signup */
.role-choice { display:flex; gap:1rem; margin-bottom:1.5rem; }
.role-btn {
  flex:1; padding:1.2rem .8rem; border:2px solid var(--border);
  background:rgba(255,255,255,0.5); border-radius:12px; cursor:pointer;
  transition:.2s; text-align:center; font-family:var(--font-b);
}
.role-btn:hover { border-color:var(--gold); }
.role-btn.active { border-color:var(--gold); background:rgba(196,146,74,0.08); }
.role-btn .rb-icon { font-size:2rem; display:block; margin-bottom:.4rem; }
.role-btn .rb-title { font-size:.85rem; font-weight:500; color:var(--s0-text); display:block; }
.role-btn .rb-sub { font-size:.72rem; color:var(--s0-text2); display:block; margin-top:.2rem; }

/* Admin pending message */
.pending-notice {
  background: rgba(196,146,74,0.1); border:1px solid rgba(196,146,74,0.3);
  border-radius:10px; padding:1.2rem; text-align:center;
  font-size:.83rem; color:var(--s0-text2); line-height:1.7;
}
.pending-notice strong { color:var(--gold); display:block; font-size:1rem; margin-bottom:.4rem; }

/* ── Admin Panel (right slide-in) ─────────────────── */
.admin-overlay {
  position:fixed; inset:0; z-index:600; display:flex; justify-content:flex-end;
  background:rgba(10,6,4,0.5); opacity:0; pointer-events:none; transition:.3s;
}
.admin-overlay.open { opacity:1; pointer-events:all; }
.admin-panel {
  width:min(680px,100vw); height:100vh; overflow-y:auto; padding:2rem 1.8rem;
  background:#FFFFFF; transform:translateX(100%); transition:.35s var(--ease);
  box-shadow:-4px 0 40px rgba(0,0,0,0.15); position:relative;
}
.admin-overlay.open .admin-panel { transform:translateX(0); }
.admin-panel h2 { font-family:var(--font-s); font-size:1.8rem; color:var(--s0-text); margin-bottom:1.5rem; }
.admin-tabs { display:flex; gap:.4rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.admin-tab {
  padding:.45rem 1rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:20px; background:transparent;
  cursor:pointer; color:var(--s0-text2); transition:.2s;
}
.admin-tab.active { background:var(--gold); color:#fff; border-color:var(--gold); }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-field { margin-bottom:1rem; }
.admin-field label { display:block; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--s0-text2); margin-bottom:.4rem; }
.admin-field input, .admin-field textarea, .admin-field select {
  width:100%; padding:.7rem .9rem; border:1px solid var(--border);
  background:rgba(255,255,255,0.8); border-radius:8px; font-family:var(--font-b);
  font-size:.9rem; color:var(--s0-text); outline:none; transition:.2s;
}
.admin-field input:focus, .admin-field textarea:focus { border-color:var(--gold); }
.admin-field textarea { min-height:80px; resize:vertical; }
.admin-save-btn {
  width:100%; padding:.85rem; background:var(--gold); color:#fff; border:none;
  border-radius:10px; font-family:var(--font-b); font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; margin-top:.5rem; transition:.2s;
}
.admin-save-btn:hover { background:#b8832e; }
.coupon-toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.coupon-toggle-card {
  border:2px solid var(--border); border-radius:10px; padding:1rem;
  transition:.2s; cursor:pointer;
}
.coupon-toggle-card.active { border-color:var(--gold); background:rgba(196,146,74,0.06); }
.coupon-toggle-card h4 { font-size:.85rem; margin-bottom:.3rem; }
.coupon-toggle-card p { font-size:.75rem; color:var(--s0-text2); }
.toggle-switch { display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.toggle-switch input[type=checkbox] { width:36px; height:20px; cursor:pointer; }
.svc-list-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem; background:rgba(255,255,255,0.6); border-radius:8px;
  margin-bottom:.4rem; font-size:.85rem;
}
.svc-list-item .del-btn { background:none; border:none; color:#c47a7a; cursor:pointer; font-size:1rem; }
.add-svc-row { display:flex; gap:.5rem; margin-top:.8rem; }
.add-svc-row input { flex:1; padding:.6rem .8rem; border:1px solid var(--border); border-radius:8px; font-size:.85rem; }
.add-svc-row button { padding:.6rem 1rem; background:var(--gold); color:#fff; border:none; border-radius:8px; cursor:pointer; }
.booking-list-item {
  padding:.8rem; background:rgba(255,255,255,0.6); border-radius:8px;
  margin-bottom:.5rem; font-size:.82rem;
}
.booking-list-item .bli-name { font-weight:500; margin-bottom:.2rem; }
.booking-list-item .bli-detail { color:var(--s0-text2); font-size:.77rem; }
.status-badge {
  display:inline-block; padding:.2rem .6rem; border-radius:10px; font-size:.72rem;
}
.status-badge.confirmed { background:rgba(100,200,100,0.15); color:#2d7a2d; }
.status-badge.cancelled { background:rgba(200,80,80,0.15); color:#a03030; }

/* ── Super Admin Panel ────────────────────────────────── */
.sa-overlay {
  position:fixed; inset:0; z-index:700; background:rgba(0,0,0,0.6);
  opacity:0; pointer-events:none; transition:.3s;
}
.sa-overlay.open { opacity:1; pointer-events:all; }
.sa-panel {
  position:absolute; top:0; right:0; width:min(780px,100vw); height:100vh;
  overflow-y:auto; background:#1a1008; color:#E8DDD0;
  transform:translateX(100%); transition:.35s var(--ease);
  box-shadow:-4px 0 60px rgba(0,0,0,0.5);
}
.sa-overlay.open .sa-panel { transform:translateX(0); }
.sa-header {
  position:sticky; top:0; background:#1a1008; border-bottom:1px solid rgba(196,146,74,0.2);
  padding:1.2rem 1.8rem; display:flex; align-items:center; justify-content:space-between; z-index:2;
}
.sa-header h2 { font-family:var(--font-s); font-size:1.5rem; color:var(--gold); }
.sa-body { padding:1.5rem 1.8rem; }
.sa-tabs { display:flex; gap:.4rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.sa-tab {
  padding:.4rem 1rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(196,146,74,0.3); border-radius:20px; background:transparent;
  cursor:pointer; color:#A08878; transition:.2s;
}
.sa-tab.active { background:var(--gold); color:#fff; border-color:var(--gold); }
.sa-section { display:none; }
.sa-section.active { display:block; }
.sa-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(196,146,74,0.2);
  border-radius:10px; padding:1rem; margin-bottom:.8rem;
}
.sa-card h4 { color:#E8DDD0; font-size:.9rem; margin-bottom:.3rem; }
.sa-card p { color:#8a7a72; font-size:.78rem; }
.sa-badge {
  display:inline-block; padding:.15rem .5rem; border-radius:6px; font-size:.68rem;
  background:rgba(196,146,74,0.2); color:var(--gold); margin-left:.5rem;
}
.sa-approve-btn {
  padding:.4rem .9rem; background:rgba(100,180,100,0.2); color:#7fcf7f;
  border:1px solid rgba(100,180,100,0.4); border-radius:6px; cursor:pointer; font-size:.78rem; margin-right:.4rem;
}
.sa-reject-btn {
  padding:.4rem .9rem; background:rgba(200,80,80,0.15); color:#e07070;
  border:1px solid rgba(200,80,80,0.3); border-radius:6px; cursor:pointer; font-size:.78rem;
}
.sa-field { margin-bottom:.8rem; }
.sa-field input, .sa-field select {
  width:100%; padding:.6rem .9rem; border:1px solid rgba(196,146,74,0.3);
  background:rgba(255,255,255,0.06); border-radius:8px; color:#E8DDD0;
  font-family:var(--font-b); font-size:.85rem; outline:none;
}
.sa-field input:focus { border-color:var(--gold); }
.sa-add-btn {
  padding:.6rem 1.2rem; background:var(--gold); color:#fff; border:none;
  border-radius:8px; cursor:pointer; font-size:.82rem;
}
.sa-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .8rem; background:rgba(255,255,255,0.04);
  border-radius:7px; margin-bottom:.35rem; font-size:.83rem; color:#D0C4BA;
}
.sa-del { background:none; border:none; color:#e07070; cursor:pointer; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1rem; }
.theme-card {
  border:2px solid rgba(196,146,74,0.25); border-radius:9px; padding:.8rem .5rem;
  text-align:center; cursor:pointer; transition:.2s; background:rgba(255,255,255,0.04);
}
.theme-card:hover, .theme-card.active { border-color:var(--gold); background:rgba(196,146,74,0.1); }
.theme-card .tc-icon { font-size:1.4rem; display:block; margin-bottom:.3rem; }
.theme-card .tc-name { font-size:.72rem; color:#A08878; }

/* ── "See as user" mini-preview mode ─────────────────── */
body.preview-mode #scrollBg,
body.preview-mode nav,
body.preview-mode section,
body.preview-mode footer {
  pointer-events:none; user-select:none;
}
.preview-bar {
  display: none;
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--gold); color:#fff; padding:.5rem 1rem;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  align-items:center; justify-content:space-between;
}
body.preview-mode .preview-bar { display:flex; }
body.preview-mode { padding-top:36px; }

/* ── Coupon redesign ──────────────────────────────────── */
.coupon-type-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.coupon-type-card {
  border:2px solid rgba(196,146,74,0.25); border-radius:14px; padding:1.5rem 1.2rem;
  cursor:pointer; transition:.25s; text-align:center; background:rgba(255,255,255,0.06);
}
.coupon-type-card:hover { border-color:var(--gold); transform:translateY(-3px); }
.coupon-type-card .ct-icon { font-size:2.2rem; display:block; margin-bottom:.6rem; }
.coupon-type-card h3 { font-size:1.05rem; margin-bottom:.4rem; }
.coupon-type-card p { font-size:.8rem; color:var(--s0-text2); }
.coupon-type-card .ct-count { display:inline-block; margin-top:.6rem; padding:.2rem .7rem; border-radius:10px; font-size:.72rem; background:rgba(196,146,74,0.15); color:var(--gold); }
.coupon-salons-overlay {
  position:fixed; inset:0; z-index:600; background:rgba(0,0,0,0.6);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:.3s;
}
.coupon-salons-overlay.open { opacity:1; pointer-events:all; }
.coupon-salons-sheet {
  width:min(700px,100vw); max-height:75vh; overflow-y:auto;
  background:#FFFFFF; border-radius:20px 20px 0 0; padding:2rem 1.5rem;
  transform:translateY(100%); transition:.35s var(--ease);
}
.coupon-salons-overlay.open .coupon-salons-sheet { transform:translateY(0); }
.coupon-salon-card {
  display:flex; align-items:center; gap:1rem; padding:.9rem;
  background:rgba(255,255,255,0.7); border-radius:10px; margin-bottom:.7rem; cursor:pointer;
}
.coupon-salon-card:hover { background:#fff; }
.coupon-salon-card img { width:60px; height:60px; border-radius:8px; object-fit:cover; }
.cscard-info h4 { font-size:.9rem; margin-bottom:.2rem; }
.cscard-info p { font-size:.75rem; color:var(--s0-text2); }
.cscard-disc { margin-left:auto; background:var(--gold); color:#fff; border-radius:8px; padding:.3rem .6rem; font-size:.8rem; font-weight:500; white-space:nowrap; }

/* ── View All button in row headers ──────────────────── */
.view-all-btn {
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(196,146,74,0.4); border-radius:20px;
  padding:.4rem 1rem; background:transparent; cursor:pointer; transition:.2s;
}
.view-all-btn:hover { background:rgba(196,146,74,0.08); }

/* ── Stats real numbers ───────────────────────────────── */
#statDistricts { font-variant-numeric: tabular-nums; }

/* ── User profile extended ───────────────────────────── */
.profile-field { margin-bottom:.9rem; }
.profile-field label { display:block; font-size:.73rem; letter-spacing:.08em; text-transform:uppercase; color:var(--s0-text2); margin-bottom:.35rem; }
.profile-field input {
  width:100%; padding:.65rem .9rem; border:1px solid var(--border);
  background:rgba(255,255,255,0.6); border-radius:8px;
  font-family:var(--font-b); font-size:.9rem; color:var(--s0-text);
}
.profile-field input:focus { outline:none; border-color:var(--gold); }
.profile-tabs { display:flex; gap:.4rem; margin-bottom:1.2rem; }
.profile-tab { padding:.4rem .9rem; border:1px solid var(--border); border-radius:20px; font-size:.78rem; cursor:pointer; background:transparent; color:var(--s0-text2); transition:.2s; }
.profile-tab.active { background:var(--gold); color:#fff; border-color:var(--gold); }
.booking-history-item {
  padding:.8rem; border:1px solid var(--border); border-radius:10px; margin-bottom:.6rem;
}
.bhi-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.3rem; }
.bhi-name { font-size:.9rem; font-weight:500; }
.bhi-date { font-size:.75rem; color:var(--s0-text2); }
.bhi-svc { font-size:.8rem; color:var(--s0-text2); }
.reorder-btn { font-size:.72rem; color:var(--gold); border:1px solid rgba(196,146,74,0.4); border-radius:6px; padding:.2rem .5rem; background:transparent; cursor:pointer; margin-top:.4rem; }

/* ═══════════════════════════════════════════════════════
   ADMIN FULL-SCREEN MODE
═══════════════════════════════════════════════════════ */
body.admin-mode #scrollBg,
body.admin-mode > nav,
body.admin-mode > .preview-bar,
body.admin-mode .hero,
body.admin-mode .search-section,
body.admin-mode #salons-wrap,
body.admin-mode #map-wrap,
body.admin-mode #uilchilgee,
body.admin-mode #uramshuulal,
body.admin-mode .coupon-salons-overlay,
body.admin-mode footer,
body.admin-mode .mobile-drawer {
  display: none !important;
}
body.admin-mode .admin-overlay {
  position: fixed; inset: 0;
  background: #FFFFFF;
  opacity: 1; pointer-events: all;
  display: flex; justify-content: flex-start;
}
body.admin-mode .admin-panel {
  width: 100vw; max-width: 100vw; height: 100vh;
  transform: none; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column;
}
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.8rem; border-bottom: 1px solid var(--border);
  background: #fff; flex-shrink: 0; flex-wrap: wrap; gap: .6rem;
}
.admin-topbar-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-salon-logo { font-family: var(--font-s); font-size: 1.4rem; font-weight: 400; color: var(--s0-text); }
.admin-salon-tabs { display: flex; gap: .3rem; }
.admin-salon-tab {
  padding: .35rem .9rem; font-size: .75rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--s0-text2);
  transition: .2s;
}
.admin-salon-tab.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.admin-topbar-right { display: flex; align-items: center; gap: .6rem; }
.admin-topbar .add-salon-btn {
  padding: .4rem 1rem; font-size: .75rem; letter-spacing: .07em;
  border: 1px solid rgba(196,146,74,0.5); border-radius: 6px;
  background: transparent; color: var(--gold); cursor: pointer;
}
.admin-topbar .exit-btn {
  padding: .4rem 1rem; font-size: .75rem; letter-spacing: .07em;
  border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--s0-text2); cursor: pointer;
}
.admin-panel-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.8rem; }

/* ── Admin booking calendar ── */
.admin-cal-wrap {
  display: grid; grid-template-columns: 270px 1fr;
  gap: 1rem; min-height: 460px;
}
@media(max-width:680px) { .admin-cal-wrap { grid-template-columns: 1fr; } }
.cal-card {
  background: rgba(255,255,255,0.75); border-radius: 12px;
  border: 1px solid var(--border); padding: 1rem;
}
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .8rem;
}
.cal-header h4 { font-family: var(--font-s); font-size: 1.1rem; font-weight: 400; }
.cal-nav {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: .2rem .6rem; cursor: pointer; font-size: 1rem; color: var(--s0-text2);
}
.cal-dow {
  display: grid; grid-template-columns: repeat(7,1fr);
  text-align: center; font-size: .65rem; color: var(--s0-text2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem;
}
.cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; border-radius: 6px; cursor: pointer; font-size: .8rem;
  position: relative; transition: .15s;
}
.cal-day:hover:not(.other-month) { background: rgba(196,146,74,0.1); }
.cal-day.today { border: 1.5px solid var(--gold); font-weight: 600; }
.cal-day.selected { background: var(--gold); color: #fff; }
.cal-day.has-booking::after {
  content: ''; position: absolute; bottom: 3px;
  width: 4px; height: 4px; background: var(--gold); border-radius: 50%;
}
.cal-day.selected.has-booking::after { background: #fff; }
.cal-day.other-month { color: rgba(0,0,0,0.18); cursor: default; }
.cal-day.past { opacity: .35; cursor: default; }
/* Time slot column */
.time-col { overflow-y: auto; max-height: 460px; }
.time-col-header { font-family: var(--font-s); font-size: 1rem; margin-bottom: .8rem; color: var(--s0-text2); }
.time-row {
  display: flex; align-items: center; min-height: 38px; border-bottom: 1px solid rgba(0,0,0,0.04);
  gap: .6rem;
}
.time-row-label { width: 44px; font-size: .72rem; color: var(--s0-text2); flex-shrink: 0; }
.time-booking-block {
  flex: 1; background: linear-gradient(135deg, var(--gold), var(--rose));
  color: #fff; border-radius: 6px; padding: .3rem .7rem; font-size: .77rem; line-height: 1.3;
}
.time-booking-block .tbb-name { font-weight: 500; }
.time-booking-block .tbb-svc  { opacity: .85; font-size: .71rem; }

/* ── User booking calendar ── */
.bk-cal-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bk-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.6);
}
.bk-cal-head h4 { font-size: .92rem; font-family: var(--font-s); font-weight: 400; }
.bk-cal-nav { background: none; border: 1px solid var(--border); border-radius: 5px; padding: .15rem .5rem; cursor: pointer; color: var(--s0-text2); }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: .6rem; }
.bk-cal-dow { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: .63rem; color: var(--s0-text2); padding: .4rem .6rem 0; }
.bk-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer; font-size: .82rem; transition: .15s;
}
.bk-day:hover:not(.disabled) { background: rgba(196,146,74,0.1); }
.bk-day.today { font-weight: 600; color: var(--gold); }
.bk-day.selected { background: var(--gold); color: #fff; border-radius: 6px; }
.bk-day.disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.bk-day.other { opacity: .25; }
.bk-time-wrap { padding: .6rem 1rem; border-top: 1px solid var(--border); background: rgba(255,255,255,0.4); }
.bk-time-label { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--s0-text2); margin-bottom: .5rem; }
.bk-time-slots { display: flex; flex-wrap: wrap; gap: .4rem; }
.bk-slot {
  padding: .35rem .75rem; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.8); cursor: pointer; font-size: .8rem;
  color: var(--s0-text); transition: .15s;
}
.bk-slot:hover { border-color: var(--gold); }
.bk-slot.selected { background: var(--gold); color: #fff; border-color: var(--gold); }
.bk-slot.taken { opacity: .35; cursor: not-allowed; text-decoration: line-through; pointer-events: none; }

/* ── Super admin activity ── */
.sa-chart-wrap { margin-bottom: 1.2rem; }
.sa-bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 80px; }
.sa-bar { flex: 1; min-width: 8px; border-radius: 3px 3px 0 0; background: rgba(196,146,74,0.7); transition: .2s; cursor: pointer; }
.sa-bar:hover { background: var(--gold); }
.sa-chart-labels { display: flex; gap: 3px; margin-top: .3rem; }
.sa-chart-label { flex: 1; text-align: center; font-size: .6rem; color: #8a7a72; }
.sa-activity-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.sa-act-day { aspect-ratio: 1; border-radius: 3px; cursor: default; }
.sa-act-day.l0 { background: rgba(196,146,74,0.06); }
.sa-act-day.l1 { background: rgba(196,146,74,0.25); }
.sa-act-day.l2 { background: rgba(196,146,74,0.50); }
.sa-act-day.l3 { background: rgba(196,146,74,0.75); }
.sa-act-day.l4 { background: var(--gold); }
.sa-stat-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
.sa-stat-box { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(196,146,74,0.2); border-radius: 8px; padding: .8rem; text-align: center; }
.sa-stat-box .ssb-n { font-family: var(--font-s); font-size: 1.8rem; color: var(--gold); display: block; }
.sa-stat-box .ssb-l { font-size: .7rem; color: #8a7a72; }

/* ── Coupon type card (no emoji, slider) ── */
.coupon-type-card {
  min-width: 220px; border: 2px solid rgba(196,146,74,0.25);
  border-radius: 14px; padding: 1.4rem 1.2rem; cursor: pointer;
  transition: .25s; background: rgba(255,255,255,0.06); flex-shrink: 0;
}
.coupon-type-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.ct-type-name { font-family: var(--font-s); font-size: 1.2rem; font-weight: 400; margin-bottom: .4rem; color: var(--s0-text); }
.ct-type-desc { font-size: .8rem; color: var(--s0-text2); margin-bottom: .8rem; }
.ct-count { display: inline-block; padding: .2rem .7rem; border-radius: 10px; font-size: .72rem; background: rgba(196,146,74,0.12); color: var(--gold); }

/* ── Service card without emoji ── */
.svc-card { background: rgba(255,255,255,0.45); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem 1.4rem; transition: .25s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.svc-card-num { font-family: var(--font-s); font-size: 2rem; font-weight: 300; color: rgba(196,146,74,0.4); margin-bottom: .5rem; }

/* ── NIGHT MODE PHOTO OVERLAY & GOLDEN TEXT ── */
body.dark-mode #bg1,
body.dark-mode #bg2,
body.dark-mode #bg3 { filter: brightness(0.55); }

body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,
body.dark-mode .hero-title .line1,body.dark-mode .hero-title .line2,
body.dark-mode .row-head h2,body.dark-mode .section-head h2,
body.dark-mode .salon-card h3,body.dark-mode .modal-name { color: var(--gold) !important; }

body.dark-mode p,body.dark-mode li,body.dark-mode span:not(.badge):not(.stars):not(.ctag),
body.dark-mode .hero-sub,body.dark-mode .card-district,
body.dark-mode .card-price { color: #E8DDD0 !important; }

body.dark-mode .salon-card {
  border: 1.5px solid rgba(196,146,74,0.65) !important;
  background: rgba(28,18,10,0.7) !important;
}
body.dark-mode .coupon-type-card { border-color: rgba(196,146,74,0.5) !important; }

/* ── CARD BORDER RADIUS ── */
.salon-card { border-radius: 18px !important; overflow: hidden; border: 1px solid rgba(196,146,74,0.18); }
.coupon-type-card { border-radius: 18px !important; }
.svc-card { border-radius: 16px !important; }
.modal { border-radius: 20px !important; overflow: hidden; }
.auth-box { border-radius: 20px !important; }
.bookings-panel { border-radius: 20px !important; }
.admin-panel { border-radius: 0 !important; }

/* ── IG GALLERY STYLE ── */
.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.ig-grid-item { position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; }
.ig-grid-item img { width:100%; height:100%; object-fit:cover; transition:.25s; }
.ig-grid-item:hover img { transform:scale(1.04); }
.ig-grid-item .ig-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:.2s; }
.ig-grid-item:hover .ig-overlay { background:rgba(0,0,0,0.3); }
.ig-grid-item .ig-overlay-icon { color:#fff; font-size:1.2rem; opacity:0; transition:.2s; }
.ig-grid-item:hover .ig-overlay-icon { opacity:1; }

/* ── ARTIST CARDS ── */
.artist-cards-row { display:flex; gap:1rem; flex-wrap:wrap; }
.artist-card {
  width:160px; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  cursor:pointer; transition:.25s; background:rgba(255,255,255,0.5); flex-shrink:0;
}
.artist-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.08); border-color:var(--gold); }
.artist-card-img { width:100%; aspect-ratio:.85; object-fit:cover; }
.artist-card-body { padding:.6rem .7rem; }
.artist-card-name { font-size:.85rem; font-weight:500; color:var(--s0-text); }
.artist-card-type { font-size:.7rem; color:var(--gold); margin:.1rem 0; }
.artist-card-stars { font-size:.72rem; color:var(--s0-text2); }
.artist-card-stars .stars { color:#C4924A; font-size:.8rem; }

/* ── ARTIST PROFILE ── */
.artist-profile-header {
  display:flex; gap:1.2rem; align-items:center; padding:1rem 0 1.2rem;
  border-bottom:1px solid var(--border); margin-bottom:1rem;
}
.artist-profile-img { width:88px; height:88px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.artist-profile-info h3 { font-size:1.1rem; margin-bottom:.2rem; }
.artist-profile-type { font-size:.78rem; color:var(--gold); margin-bottom:.3rem; }
.artist-profile-stats { display:flex; gap:1rem; font-size:.75rem; color:var(--s0-text2); }
.artist-profile-stats strong { color:var(--s0-text); font-size:.9rem; display:block; }
.artist-section-label { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--s0-text2); margin:.8rem 0 .4rem; }

/* ── ADMIN ARTIST SELECTOR (PIN screen) ── */
.artist-selector-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; }
.artist-selector-card {
  border:1.5px solid var(--border); border-radius:14px; overflow:hidden;
  cursor:pointer; transition:.2s; text-align:center;
}
.artist-selector-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.artist-selector-card.active-sel { border-color:var(--gold); background:rgba(196,146,74,0.05); }
.artist-selector-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.artist-selector-card .asc-name { padding:.5rem .3rem .2rem; font-size:.82rem; font-weight:500; }
.artist-selector-card .asc-type { font-size:.68rem; color:var(--gold); padding-bottom:.4rem; }
.pin-row { display:flex; gap:.6rem; justify-content:center; margin:.8rem 0; }
.pin-box { width:44px; height:52px; border:1.5px solid var(--border); border-radius:8px; text-align:center; font-size:1.4rem; font-weight:600; color:var(--s0-text); background:rgba(255,255,255,0.7); }
.pin-box.filled { border-color:var(--gold); }
.pin-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; max-width:200px; margin:0 auto; }
.pin-key { padding:.6rem; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,0.6); cursor:pointer; font-size:.95rem; font-weight:500; text-align:center; transition:.15s; }
.pin-key:hover { border-color:var(--gold); background:rgba(196,146,74,0.06); }
.pin-key.del { color:#c47a7a; }

/* ═══════════════════════════════════════════════════
   BUG FIXES — v4 patch
═══════════════════════════════════════════════════ */

/* Super admin full-screen mode (like admin-mode) */
body.sa-full-mode #scrollBg,
body.sa-full-mode nav,
body.sa-full-mode .preview-bar,
body.sa-full-mode .hero,
body.sa-full-mode .search-section,
body.sa-full-mode #salons-wrap,
body.sa-full-mode #map-wrap,
body.sa-full-mode #uilchilgee,
body.sa-full-mode #uramshuulal,
body.sa-full-mode footer,
body.sa-full-mode .mobile-drawer {
  display: none !important;
}
body.sa-full-mode .sa-overlay {
  position: fixed; inset: 0;
  opacity: 1; pointer-events: all;
  background: rgba(0,0,0,0.5);
}
body.sa-full-mode .sa-panel {
  width: 100vw; max-width: 100vw; height: 100vh;
  transform: translateX(0) !important;
  border-radius: 0; box-shadow: none;
}

/* Stronger admin-mode selectors (remove > which can miss in some layouts) */
body.admin-mode .hero,
body.admin-mode .search-section,
body.admin-mode #salons-wrap,
body.admin-mode #map-wrap,
body.admin-mode #uilchilgee,
body.admin-mode #uramshuulal,
body.admin-mode .coupon-salons-overlay,
body.admin-mode footer,
body.admin-mode .mobile-drawer,
body.admin-mode nav,
body.admin-mode #scrollBg {
  display: none !important;
}
body.admin-mode .admin-overlay {
  position: fixed; inset: 0;
  opacity: 1; pointer-events: all;
  background: #FFFFFF;
  display: flex; justify-content: flex-start;
}
body.admin-mode .admin-panel {
  width: 100vw; max-width: 100vw; height: 100vh;
  transform: translateX(0) !important;
  border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column;
}

/* Services cards — lower opacity so they're not so white */
.svc-grid .svc-card {
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(8px);
}

/* Auth box — fix overflow so fields stay inside */
.auth-box {
  overflow: hidden !important;
  box-sizing: border-box;
}
.auth-form {
  overflow: hidden;
}
/* Fname/Lname two-column grid — make it flex so it wraps on small screens */
#userFields > div[style*="grid"],
#adminFields > div[style*="grid"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: .6rem;
}
#userFields > div[style*="grid"] input,
#adminFields > div[style*="grid"] input {
  flex: 1;
  min-width: 120px;
  box-sizing: border-box;
}
/* Prevent any input from overflowing auth box */
.auth-form input,
.auth-form select,
.auth-form textarea {
  box-sizing: border-box;
  max-width: 100%;
}

/* Google Maps placeholder */
.map-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; min-height: 300px; color: #A08878; text-align: center; gap: .8rem;
}
.map-ph .mph-icon { font-size: 2.5rem; }
.map-ph p { font-size: .88rem; max-width: 300px; line-height: 1.6; }
.map-ph code { font-size: .78rem; background: rgba(196,146,74,0.1); padding: .2rem .5rem; border-radius: 4px; color: var(--gold); }

/* ── COUPON TRACK FIX ── */
#track-coupons { display:flex; gap:16px; transition:transform .4s ease; }
#track-coupons .coupon-type-card {
  min-width: 220px;
  flex: 0 0 220px;
}
@media(max-width:640px){
  #track-coupons .coupon-type-card { min-width:160px; flex:0 0 160px; }
}
.coupon-type-card .ct-type-name { font-size:1rem; margin-bottom:.3rem; }
.coupon-type-card .ct-type-desc { font-size:.78rem; }

/* ── ADMIN MAP LINK ── */
#ai-maplink { box-sizing:border-box; width:100%; }

/* ── IMAGE UPLOAD DROPZONE ── */
#imgDropZone:hover { border-color:var(--gold); background:rgba(196,146,74,0.04); }

/* ── ADMIN ARTISTS SECTION ── */
.admin-section#admin-artists .svc-list-item { align-items:center; }

/* ── PENDING NOTICE for approved admin ── */
.salon-pending-notice {
  background:rgba(196,146,74,0.08); border:1px dashed rgba(196,146,74,0.4);
  border-radius:10px; padding:1rem 1.2rem; font-size:.82rem;
  color:var(--s0-text2); margin-bottom:1rem; line-height:1.6;
}
.salon-pending-notice strong { color:var(--gold); display:block; margin-bottom:.2rem; }

/* ═══════════════════════════════════════════════════════
   THEME v2 — Purple + White/Black, No BG pics, Loading screen
   ═══════════════════════════════════════════════════════ */
#scrollBg { display: none !important; }
:root {
  --gold:   #7C3AED;
  --gold2:  #9F67FF;
  --rose:   #A855F7;
  --accent: #7C3AED;
}
body { background: #FFFFFF !important; color: #111111; }
nav, nav.dark-nav { background: #F5F5F7 !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; backdrop-filter: none !important; }
nav .nav-logo, nav.dark-nav .nav-logo,
nav .nav-links a, nav.dark-nav .nav-links a { color: #111111 !important; }
nav .nav-links a:hover, nav.dark-nav .nav-links a:hover { color: var(--gold) !important; }
nav .nav-btn { color: #111111 !important; border-color: rgba(0,0,0,0.15) !important; }
nav .nav-btn.primary { background: var(--gold) !important; color: #fff !important; border-color: var(--gold) !important; }
nav .theme-toggle { color: var(--gold) !important; border-color: rgba(124,58,237,0.3) !important; }
nav .hamburger span, nav.dark-nav .hamburger span { background: #111111 !important; }
nav.scrolled { background: rgba(245,245,247,0.97) !important; }

h1,h2,h3,h4 { color: #111111 !important; }
.hero-title em, .row-head h2 em, .section-head h2 em { color: var(--gold) !important; }
.hero { background: #FFFFFF; }
.hero-sub, .hero-tag, .hstat-l { color: #555555 !important; }
.hstat-n, .eyebrow { color: var(--gold) !important; }
.hstat-div { background: rgba(0,0,0,0.1) !important; }
.scroll-line { background: var(--gold) !important; }

.search-section { background: #F5F5F7 !important; }
.search-bar { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
.chip { color: #555 !important; border-color: rgba(0,0,0,0.12) !important; background: #fff !important; }
.chip.active { background: var(--gold) !important; color: #fff !important; border-color: var(--gold) !important; }

.promo-bg { background: #F5F5F7 !important; }
.coupon-type-card { background: #FFFFFF !important; border-color: rgba(0,0,0,0.08) !important; }
.coupon-type-card:hover { border-color: var(--gold) !important; }
.ct-count { background: rgba(124,58,237,0.08) !important; color: var(--gold) !important; }

.btn-glow > span { background: none !important; }
.btn-glow::before { display: none !important; content: none !important; }
.btn-outline { border-color: rgba(124,58,237,0.4) !important; color: var(--gold) !important; }

footer { background: #F5F5F7 !important; }
.footer-logo { color: #111 !important; }
.footer-logo em { color: var(--gold) !important; }

/* Service cards spacing */
.svc-grid { gap: 1.8rem !important; }

/* ── DARK MODE ── */
body.dark-mode { background: #0D0D0D !important; color: #F0F0F0 !important; }
body.dark-mode { --gold: #A78BFA; --gold2: #C4B5FD; }
body.dark-mode nav, body.dark-mode nav.dark-nav { background: #161616 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
body.dark-mode nav .nav-logo, body.dark-mode nav .nav-links a,
body.dark-mode nav.dark-nav .nav-logo, body.dark-mode nav.dark-nav .nav-links a { color: #F0F0F0 !important; }
body.dark-mode nav .nav-btn { color: #F0F0F0 !important; border-color: rgba(255,255,255,0.15) !important; }
body.dark-mode nav .nav-btn.primary { background: #7C3AED !important; color: #fff !important; }
body.dark-mode nav .hamburger span, body.dark-mode nav.dark-nav .hamburger span { background: #F0F0F0 !important; }
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4 { color: #F0F0F0 !important; }
body.dark-mode .hero { background: #0D0D0D !important; }
body.dark-mode .hero-sub,body.dark-mode .hero-tag,body.dark-mode .hstat-l { color: #AAAAAA !important; }
body.dark-mode .search-section { background: #111111 !important; }
body.dark-mode .search-bar { background: #1A1A1A !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .search-bar input { color: #F0F0F0 !important; }
body.dark-mode .promo-bg { background: #111111 !important; }
body.dark-mode .coupon-type-card { background: #1A1A1A !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .row-section, body.dark-mode .content-section { background: #0D0D0D !important; }
body.dark-mode footer { background: #111111 !important; color: #AAAAAA !important; }
body.dark-mode .footer-logo { color: #F0F0F0 !important; }
body.dark-mode .auth-box { background: #1A1A1A !important; color: #F0F0F0 !important; }
body.dark-mode .auth-box h2 { color: #F0F0F0 !important; }
body.dark-mode .auth-box input, body.dark-mode .auth-box select { background: #252525 !important; color: #F0F0F0 !important; border-color: rgba(255,255,255,0.12) !important; }

/* ── LOADING SCREEN ── */
#pageLoader {
  position: fixed; inset: 0; z-index: 9999;
  background: #FFFFFF; display: flex; flex-direction: column;
  align-items: center; justify-content: center; transition: opacity .45s ease;
}
body.dark-mode #pageLoader { background: #0D0D0D; }
#pageLoader.hidden { opacity: 0; pointer-events: none; }
.loader-logo { font-family: 'Playfair Display', Georgia, serif; font-size: 2.2rem; font-weight: 400; color: #111; margin-bottom: 1.5rem; }
.loader-logo em { color: #7C3AED; }
body.dark-mode .loader-logo { color: #F0F0F0; }
.loader-spinner { width: 38px; height: 38px; border: 3px solid rgba(124,58,237,0.2); border-top-color: #7C3AED; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── PASSWORD TOGGLE ── */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 2.6rem !important; width: 100%; box-sizing: border-box; }
.pw-toggle { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #999; font-size: .9rem; padding: 0; line-height: 1; }
.pw-toggle:hover { color: var(--gold); }

/* ═══════════════════════════════════════
   FONT + ADMIN DARK MODE  — patch v11
═══════════════════════════════════════ */

/* ── 2 fonts: Inter (body) + Playfair Display (headings) ── */
:root {
  --font-s: 'Playfair Display', Georgia, serif;
  --font-b: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
*, body, button, input, select, textarea {
  font-family: var(--font-b) !important;
}
h1, h2, h3,
.hero-title,
.hero-title .line1,
.hero-title .line2,
.hero-title em,
.nav-logo,
.footer-logo,
.modal-name,
.admin-salon-logo,
.sa-header h2,
.row-head h2,
.section-head h2,
.auth-box h2,
.bookings-panel h2,
.coupon-salons-sheet h3 {
  font-family: var(--font-s) !important;
}

/* Admin panel intentionally NEVER follows dark mode — always white. See 'FORCE ADMIN WHITE' block at end of file. */


/* ═══════════════════════════════
   patch-v12 fixes
═══════════════════════════════ */

/* Coupon track — centered, proper row layout */
#uramshuulal .track-wrap {
  overflow-x: auto;
  padding: 0 1rem 1rem;
  -webkit-overflow-scrolling: touch;
}
#track-coupons {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px;
  flex-wrap: nowrap;
  min-width: min-content;
}
#track-coupons .coupon-type-card {
  flex: 0 0 220px;
  min-width: 220px;
  margin: 0;
}
@media(max-width:640px){
  #track-coupons .coupon-type-card { flex: 0 0 170px; min-width: 170px; }
}

/* SA salon edit overlay */
.sa-edit-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none; transition: .25s;
}
.sa-edit-overlay.open { opacity: 1; pointer-events: all; }
.sa-edit-box {
  background: #1a1008; color: #E8DDD0;
  border-radius: 16px; width: min(680px,100%);
  max-height: 85vh; overflow-y: auto;
  padding: 1.5rem 1.8rem;
  transform: translateY(20px); transition: .3s var(--ease);
}
.sa-edit-overlay.open .sa-edit-box { transform: translateY(0); }
.sa-edit-field { margin-bottom: .9rem; }
.sa-edit-field label { display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8a7a72; margin-bottom:.4rem; }
.sa-edit-field input, .sa-edit-field select, .sa-edit-field textarea {
  width:100%; padding:.65rem .9rem; border:1px solid rgba(196,146,74,0.25);
  background:rgba(255,255,255,0.06); border-radius:8px;
  color:#E8DDD0; font-family:var(--font-b); font-size:.9rem;
  box-sizing:border-box; outline:none;
}
.sa-edit-field input:focus { border-color:var(--gold); }
.sa-edit-save { width:100%; padding:11px; background:var(--gold); color:#fff; border:none; border-radius:10px; font-size:.88rem; cursor:pointer; margin-top:.5rem; }
.sa-cat-chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }
.sa-cat-chip { padding:.3rem .8rem; border-radius:20px; font-size:.75rem; cursor:pointer; border:1px solid rgba(196,146,74,0.3); color:#A08878; background:transparent; transition:.15s; }
.sa-cat-chip.on { background:var(--gold); color:#fff; border-color:var(--gold); }

/* Admin coupon % input inside toggle card */
.coupon-pct-row { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; }
.coupon-pct-row label { font-size:.72rem; color:var(--s0-text2); white-space:nowrap; }
.coupon-pct-row input[type=number] { width:60px; padding:.25rem .4rem; border:1px solid var(--border); border-radius:6px; font-size:.8rem; text-align:center; }
body.dark-mode .coupon-pct-row input { background:#252525; color:#E8DDD0; border-color:rgba(255,255,255,0.15); }

/* ── LEAFLET MAP (replaces Google Maps — no API key needed) ── */
#gmap { height: 420px; width: 100%; border-radius: 16px; overflow: hidden; z-index: 1; }
.leaflet-gold-pin { background: transparent; border: none; }
.leaflet-gold-pin .lgp-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #7C3AED; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
body.dark-mode .leaflet-gold-pin .lgp-dot { background: #A78BFA; }
.leaflet-popup-content-wrapper { border-radius: 10px !important; }
.leaflet-popup-content { margin: 10px 12px !important; }
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip { background: #1A1A1A !important; color: #F0F0F0 !important; }
body.dark-mode .leaflet-popup-content b { color: #F0F0F0; }

/* ═══════════════════════════════════════════════════════
   PATCH v13 — mobile swipe, card fills, centering, delete UI
═══════════════════════════════════════════════════════ */

/* ── MOBILE: native horizontal swipe instead of broken JS transform ── */
@media(max-width:900px){
  .track-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .track { transform: none !important; }
  .track > * { scroll-snap-align: start; }
  .row-head .rarrow { display: none !important; }
  #uramshuulal .rarrow { display: none !important; }
}

/* ── COUPON SECTION — force centered layout ── */
/* .promo-bg was written for an older section-head/promo-grid layout and
   was stripping .row-section's own max-width/padding, pushing the coupon
   row's content flush to the left edge of the page. Restore it here. */
section.row-section.promo-bg {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 3rem 3rem 2rem !important;
}
@media(max-width:900px){
  section.row-section.promo-bg { padding: 2.5rem 1.5rem 1.5rem !important; }
}
@media(max-width:540px){
  section.row-section.promo-bg { padding: 2rem 1rem 1rem !important; }
}
#track-coupons { justify-content: center; width: 100%; }

/* ── COUPON SALON LIST SHEET — whiter, clearer cards ── */
.coupon-salons-sheet { background: #FFFFFF !important; }
.coupon-salons-sheet h3 { color: #111 !important; }
.coupon-salon-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border-radius: 14px !important;
}
.coupon-salon-card:hover { border-color: #7C3AED !important; box-shadow: 0 4px 16px rgba(124,58,237,0.12); }
.cscard-info h4 { color: #111 !important; }
.cscard-info p { color: #666 !important; }

/* ── CARDS: fill vs border-only in dark mode (no golden-brown fill) ── */
body.dark-mode .salon-card {
  background: #161616 !important;
  border: 1.5px solid rgba(167,139,250,0.5) !important;
}
body.dark-mode .salon-card h3 { color: #F0F0F0 !important; }
body.dark-mode .card-district,
body.dark-mode .card-price { color: #AAAAAA !important; }
body.dark-mode .coupon-type-card {
  background: #161616 !important;
  border: 1.5px solid rgba(167,139,250,0.4) !important;
}
body.dark-mode .coupon-type-card:hover { border-color: #A78BFA !important; }
body.dark-mode .ct-type-name { color: #F0F0F0 !important; }

/* ── EVERY CARD: white bg (light) + consistent radius ── */
.salon-card, .coupon-type-card, .artist-card, .svc-list-item,
.booking-history-item, .sa-card, .admin-cal-wrap .cal-card {
  border-radius: 16px !important;
}
.salon-card { background: #FFFFFF; }
body.admin-mode .salon-card,
body.admin-mode .svc-list-item { background: #FFFFFF !important; }

/* ── SA DELETE (hard) BUTTON ── */
.sa-delete-btn {
  padding: .3rem .8rem; background: rgba(200,30,30,0.15); color: #ff6b6b;
  border: 1px solid rgba(200,30,30,0.4); border-radius: 6px; cursor: pointer; font-size: .72rem;
}
.sa-delete-btn:hover { background: rgba(200,30,30,0.28); }

/* ── PROFILE PIC UPLOAD (salon) ── */
.profile-pic-upload {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .3rem;
}
.profile-pic-preview {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border); background: #f2f2f2; flex-shrink: 0;
}
.profile-pic-btn {
  padding: .5rem 1rem; border: 1px dashed var(--border); border-radius: 8px;
  background: rgba(0,0,0,0.02); cursor: pointer; font-size: .8rem; color: var(--s0-text2);
}
.profile-pic-btn:hover { border-color: var(--gold); color: var(--gold); }
body.dark-mode .profile-pic-btn { border-color: rgba(255,255,255,0.15); color: #AAA; }
body.dark-mode .profile-pic-preview { background: #222; }

/* ── BOOKING TAB — category + receipt layout ── */
.booking-flow-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; }
@media(max-width:700px){ .booking-flow-wrap { grid-template-columns: 1fr; } }
.bcat-list { display: flex; flex-direction: column; gap: .7rem; }
.bcat-card {
  border: 1.5px solid var(--border); border-radius: 14px; padding: 1rem 1.2rem;
  cursor: pointer; transition: .2s; background: #fff;
  display: flex; justify-content: space-between; align-items: center;
}
.bcat-card:hover { border-color: var(--gold); transform: translateX(2px); }
.bcat-card.has-selection { border-color: var(--gold); background: rgba(124,58,237,0.04); }
.bcat-name { font-weight: 500; font-size: .95rem; color: var(--s0-text); }
.bcat-meta { font-size: .74rem; color: var(--s0-text2); margin-top: .2rem; }
.bcat-arrow { color: var(--gold); font-size: 1.2rem; }
body.dark-mode .bcat-card { background: #161616; border-color: rgba(255,255,255,0.1); }
body.dark-mode .bcat-name { color: #F0F0F0; }

/* Service selection overlay (inside a category) */
.svc-select-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: .25s;
}
.svc-select-overlay.open { opacity: 1; pointer-events: all; }
.svc-select-box {
  background: #fff; border-radius: 18px; width: min(560px, 100%); max-height: 82vh;
  overflow-y: auto; padding: 1.5rem 1.6rem;
}
body.dark-mode .svc-select-box { background: #161616; color: #F0F0F0; }
.svc-select-grid { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; }
.svc-select-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1rem; border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: .15s;
}
.svc-select-card.selected { border-color: var(--gold); background: rgba(124,58,237,0.06); }
.svc-select-card .ssc-name { font-size: .9rem; font-weight: 500; }
.svc-select-card .ssc-meta { font-size: .74rem; color: var(--s0-text2); margin-top: .15rem; }
.svc-select-card .ssc-price { font-size: .9rem; color: var(--gold); font-weight: 500; }
.svc-select-card .ssc-check {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; margin-left: .8rem; flex-shrink: 0;
}
.svc-select-card.selected .ssc-check { background: var(--gold); border-color: var(--gold); color: #fff; }
body.dark-mode .svc-select-card { border-color: rgba(255,255,255,0.12); }
body.dark-mode .svc-select-card.selected { background: rgba(167,139,250,0.1); }

/* Receipt panel */
.receipt-box {
  border: 1.5px solid var(--border); border-radius: 16px; padding: 1.2rem;
  background: #fff; position: sticky; top: 90px;
}
body.dark-mode .receipt-box { background: #161616; border-color: rgba(255,255,255,0.1); }
.receipt-header { border-bottom: 1px dashed var(--border); padding-bottom: .7rem; margin-bottom: .7rem; }
.receipt-salon { font-family: var(--font-s); font-size: 1.05rem; color: var(--s0-text); }
.receipt-artist, .receipt-time { font-size: .78rem; color: var(--s0-text2); margin-top: .15rem; }
.receipt-empty { text-align: center; color: var(--s0-text2); font-size: .84rem; padding: 1.2rem 0; }
.receipt-line { display: flex; justify-content: space-between; font-size: .85rem; padding: .4rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.receipt-line .rl-name { color: var(--s0-text); }
.receipt-line .rl-dur { color: var(--s0-text2); font-size: .74rem; display: block; }
.receipt-line .rl-price { color: var(--gold); font-weight: 500; white-space: nowrap; }
.receipt-total { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; padding-top: .8rem; border-top: 1.5px solid var(--border); font-size: 1.05rem; font-weight: 600; }
.receipt-total .rt-price { color: var(--gold); }
.receipt-continue { width: 100%; padding: .8rem; margin-top: 1rem; background: var(--gold); color: #fff; border: none; border-radius: 10px; font-size: .9rem; cursor: pointer; }
.receipt-continue:disabled { background: #ccc; cursor: not-allowed; }
body.dark-mode .receipt-continue:disabled { background: #333; }

/* Booking artist + calendar step */
.booking-artist-row { margin-bottom: 1rem; }
.booking-step-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--s0-text2); margin-bottom: .5rem; }

/* ═══════════════════════════════════════════════════
   SEASONAL THEMES — real accent-color changes (SA panel)
═══════════════════════════════════════════════════ */
body.theme-new_year      { --gold: #DC2626 !important; --gold2: #F87171 !important; }
body.theme-tsagaan_sar   { --gold: #2563EB !important; --gold2: #60A5FA !important; }
body.theme-naadam        { --gold: #16A34A !important; --gold2: #4ADE80 !important; }
body.theme-mothers_day   { --gold: #DB2777 !important; --gold2: #F472B6 !important; }
body.theme-womens_day    { --gold: #C026D3 !important; --gold2: #E879F9 !important; }
body.theme-soldiers_day  { --gold: #78716C !important; --gold2: #A8A29E !important; }
body.theme-valentine     { --gold: #E11D48 !important; --gold2: #FB7185 !important; }
body.theme-june1         { --gold: #F59E0B !important; --gold2: #FCD34D !important; }
body.theme-christmas     { --gold: #B91C1C !important; --gold2: #16A34A !important; }
body.theme-sept1         { --gold: #2563EB !important; --gold2: #FCD34D !important; }

/* Small decorative ribbon banner under the nav, injected via JS (#themeRibbon) */
#themeRibbon {
  display: none; text-align: center; font-size: .8rem; letter-spacing: .04em;
  padding: .5rem 1rem; color: #fff; font-family: var(--font-b);
}
body[class*="theme-"]:not(.theme-default) #themeRibbon { display: block; }
body.theme-new_year     #themeRibbon { background: linear-gradient(90deg,#DC2626,#F87171); }
body.theme-tsagaan_sar  #themeRibbon { background: linear-gradient(90deg,#2563EB,#60A5FA); }
body.theme-naadam       #themeRibbon { background: linear-gradient(90deg,#16A34A,#4ADE80); }
body.theme-mothers_day  #themeRibbon { background: linear-gradient(90deg,#DB2777,#F472B6); }
body.theme-womens_day   #themeRibbon { background: linear-gradient(90deg,#C026D3,#E879F9); }
body.theme-soldiers_day #themeRibbon { background: linear-gradient(90deg,#57534E,#A8A29E); }
body.theme-valentine    #themeRibbon { background: linear-gradient(90deg,#E11D48,#FB7185); }
body.theme-june1        #themeRibbon { background: linear-gradient(90deg,#F59E0B,#FCD34D); color:#3a2a00; }
body.theme-christmas    #themeRibbon { background: linear-gradient(90deg,#B91C1C,#16A34A); }
body.theme-sept1        #themeRibbon { background: linear-gradient(90deg,#2563EB,#FCD34D); }

/* ═══════════════════════════════════════════════════
   USER PROFILE — slide-in panel from the right
   (25% width on desktop, full-width on mobile)
═══════════════════════════════════════════════════ */
#profileOverlay {
  justify-content: flex-end !important;
  align-items: stretch !important;
  background: rgba(0,0,0,0.45);
}
#profileOverlay .profile-box {
  width: 25vw;
  min-width: 380px;
  max-width: 460px;
  max-height: none !important;
  height: 100vh;
  margin: 0;
  border-radius: 0 !important;
  animation: none !important;
  transform: translateX(100%);
  transition: transform .32s var(--ease);
  overflow-y: auto;
  padding: 2rem 1.8rem;
  box-shadow: -8px 0 30px rgba(0,0,0,0.15);
}
#profileOverlay.open .profile-box { transform: translateX(0); }
@media(max-width: 768px){
  #profileOverlay .profile-box { width: 100vw; min-width: 0; max-width: 100vw; }
}
body.dark-mode #profileOverlay .profile-box { background: #161616 !important; }

/* Extra profile panel content */
.profile-summary-card {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 1.2rem; background: rgba(124,58,237,0.03);
}
.profile-summary-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: rgba(124,58,237,0.1); flex-shrink: 0; }
.profile-summary-name { font-size: 1rem; font-weight: 600; color: var(--s0-text); }
.profile-summary-email { font-size: .78rem; color: var(--s0-text2); }
.profile-quicklinks { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.profile-quicklink {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: .15s; font-size: .87rem; color: var(--s0-text);
  background: #fff;
}
.profile-quicklink:hover { border-color: var(--gold); }
body.dark-mode .profile-quicklink { background: #1A1A1A; border-color: rgba(255,255,255,0.1); color: #F0F0F0; }
.profile-section-divider { border: none; border-top: 1px solid var(--border); margin: 1.3rem 0; }

/* ═══════════════════════════════════════════════════
   GLOBAL ROUND-CORNER SWEEP — applies everywhere, no exceptions
═══════════════════════════════════════════════════ */
button, input, select, textarea,
.salon-card, .coupon-type-card, .svc-card, .artist-card, .artist-selector-card,
.svc-list-item, .booking-history-item, .booking-list-item, .sa-card,
.cal-card, .bcat-card, .svc-select-card, .receipt-box, .receipt-continue,
.coupon-salon-card, .modal, .auth-box, .bookings-panel, .admin-panel,
.sa-panel, .sa-edit-box, .svc-select-box, .profile-quicklink,
.profile-summary-card, .status-badge, .badge, .ctag, .chip,
.theme-card, .avatar-option, .pin-box, .pin-key,
.time-row-label, .bk-slot, .bk-day, .cal-day,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input[type="tel"] {
  border-radius: 12px;
}
.salon-card, .modal, .auth-box, .bookings-panel, .sa-edit-box, .svc-select-box, .receipt-box {
  border-radius: 18px !important;
}
.badge, .ctag, .chip, .status-badge, .sa-badge { border-radius: 999px !important; }
.avatar-option, .profile-summary-avatar { border-radius: 50% !important; }
.pin-box { border-radius: 8px !important; }
#gmap, .leaflet-popup-content-wrapper { border-radius: 14px !important; }
.admin-panel, body.admin-mode .admin-overlay { border-radius: 0 !important; }  /* fullscreen — no radius needed */
#profileOverlay .profile-box { border-radius: 0 !important; }  /* edge-to-edge slide panel */

/* ═══════════════════════════════════════════════════════
   FORCE ADMIN WHITE — admin panel NEVER follows dark mode,
   regardless of whether body.dark-mode is also present.
   Placed last so it always wins the cascade.
   ═══════════════════════════════════════════════════════ */
body.admin-mode,
body.admin-mode.dark-mode {
  background: #FFFFFF !important;
}
body.admin-mode .admin-overlay,
body.admin-mode.dark-mode .admin-overlay {
  background: #FFFFFF !important;
}
body.admin-mode .admin-panel,
body.admin-mode.dark-mode .admin-panel {
  background: #FFFFFF !important;
  color: #111111 !important;
}
body.admin-mode .admin-topbar,
body.admin-mode.dark-mode .admin-topbar {
  background: #FFFFFF !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.admin-mode .admin-salon-logo,
body.admin-mode.dark-mode .admin-salon-logo { color: #111111 !important; }
body.admin-mode .admin-salon-tab,
body.admin-mode.dark-mode .admin-salon-tab {
  border-color: rgba(0,0,0,0.12) !important;
  color: #555555 !important;
  background: transparent !important;
}
body.admin-mode .admin-salon-tab.active,
body.admin-mode.dark-mode .admin-salon-tab.active { background: #7C3AED !important; color: #fff !important; border-color: #7C3AED !important; }
body.admin-mode div[style*="padding:.8rem 1.8rem 0"],
body.admin-mode.dark-mode div[style*="padding:.8rem 1.8rem 0"] {
  background: #FFFFFF !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.admin-mode .admin-tab,
body.admin-mode.dark-mode .admin-tab {
  border-color: rgba(0,0,0,0.12) !important;
  color: #555555 !important;
  background: transparent !important;
}
body.admin-mode .admin-tab.active,
body.admin-mode.dark-mode .admin-tab.active { background: #7C3AED !important; color: #fff !important; border-color: #7C3AED !important; }
body.admin-mode .admin-panel-body,
body.admin-mode.dark-mode .admin-panel-body { background: #FFFFFF !important; }
body.admin-mode .admin-field label,
body.admin-mode.dark-mode .admin-field label { color: #555555 !important; }
body.admin-mode .admin-field input,
body.admin-mode .admin-field textarea,
body.admin-mode .admin-field select,
body.admin-mode.dark-mode .admin-field input,
body.admin-mode.dark-mode .admin-field textarea,
body.admin-mode.dark-mode .admin-field select {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #111111 !important;
}
body.admin-mode .admin-save-btn,
body.admin-mode.dark-mode .admin-save-btn { background: #7C3AED !important; color: #fff !important; }
body.admin-mode .svc-list-item,
body.admin-mode .svc-select-card,
body.admin-mode.dark-mode .svc-list-item,
body.admin-mode.dark-mode .svc-select-card {
  background: #FFFFFF !important;
  color: #111111 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
body.admin-mode .add-svc-row input,
body.admin-mode .add-svc-row select,
body.admin-mode.dark-mode .add-svc-row input,
body.admin-mode.dark-mode .add-svc-row select {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #111111 !important;
}
body.admin-mode .coupon-toggle-card,
body.admin-mode.dark-mode .coupon-toggle-card {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #111111 !important;
}
body.admin-mode .coupon-toggle-card h4,
body.admin-mode.dark-mode .coupon-toggle-card h4 { color: #111111 !important; }
body.admin-mode .coupon-toggle-card p,
body.admin-mode.dark-mode .coupon-toggle-card p { color: #555555 !important; }
body.admin-mode .cal-card,
body.admin-mode.dark-mode .cal-card {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #111111 !important;
}
body.admin-mode .cal-day,
body.admin-mode.dark-mode .cal-day { color: #111111 !important; }
body.admin-mode .cal-day.other-month,
body.admin-mode.dark-mode .cal-day.other-month { color: rgba(0,0,0,0.2) !important; }
body.admin-mode .cal-day.selected,
body.admin-mode.dark-mode .cal-day.selected { background: #7C3AED !important; color: #fff !important; }
body.admin-mode .cal-nav,
body.admin-mode.dark-mode .cal-nav { border-color: rgba(0,0,0,0.15) !important; color: #555555 !important; background: transparent !important; }
body.admin-mode .cal-dow,
body.admin-mode.dark-mode .cal-dow { color: #555555 !important; }
body.admin-mode .time-row-label,
body.admin-mode.dark-mode .time-row-label { color: #555555 !important; }
body.admin-mode #imgDropZone,
body.admin-mode.dark-mode #imgDropZone {
  border-color: rgba(0,0,0,0.15) !important;
  color: #555555 !important;
  background: transparent !important;
}
body.admin-mode .admin-topbar .exit-btn,
body.admin-mode.dark-mode .admin-topbar .exit-btn {
  border-color: rgba(0,0,0,0.15) !important;
  color: #555555 !important;
}
body.admin-mode .admin-topbar .add-salon-btn,
body.admin-mode.dark-mode .admin-topbar .add-salon-btn {
  border-color: rgba(124,58,237,0.4) !important;
  color: #7C3AED !important;
}
body.admin-mode .artist-card,
body.admin-mode.dark-mode .artist-card {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.1) !important;
}
body.admin-mode .artist-card-name,
body.admin-mode.dark-mode .artist-card-name { color: #111111 !important; }
body.admin-mode .bcat-card,
body.admin-mode.dark-mode .bcat-card {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.1) !important;
}
body.admin-mode .receipt-box,
body.admin-mode.dark-mode .receipt-box {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #111111 !important;
}
body.admin-mode .sa-edit-box,
body.admin-mode.dark-mode .sa-edit-box {
  background: #FFFFFF !important;
  color: #111111 !important;
}
body.admin-mode .sa-edit-field label,
body.admin-mode.dark-mode .sa-edit-field label { color: #555555 !important; }
body.admin-mode .sa-edit-field input,
body.admin-mode.dark-mode .sa-edit-field input {
  background: #FFFFFF !important;
  color: #111111 !important;
  border-color: rgba(0,0,0,0.15) !important;
}

/* ═══════════════════════════════════════════════════════
   FINAL BORDER-RADIUS SAFETY NET — catches anything missed.
   Only targets div/form-controls (radius has no visible effect
   on elements with no background/border, so this is safe for
   plain layout wrappers). Deliberately excludes nav/footer/
   section-level containers, which must stay flush with the
   viewport edge — rounding those would show gaps at the page edge.
   ═══════════════════════════════════════════════════════ */
div, input, select, textarea, button, a.nav-btn,
img:not(.leaflet-marker-icon) {
  border-radius: 8px;
}
nav, footer, section, .hero, .row-section, .search-section,
.promo-bg, #uramshuulal, body, html, .admin-panel, .sa-panel,
body.admin-mode .admin-overlay, .track-wrap, .track, .modal-slider {
  border-radius: 0 !important;
}
/* Explicitly keep these NOT rounded, since rounding would break them */
.leaflet-marker-icon, .leaflet-gold-pin, .lgp-dot,
svg, .hamburger span, .toggle-switch input,
.range-track, .range-fill, .sdot, .cal-day.other-month {
  border-radius: inherit;
}

/* ═══════════════════════════════════════
   ARTIST LOGIN GATE + RESTRICTED MODE
═══════════════════════════════════════ */
/* the staff login screen («Артист сонгох») — styled in the v37 block at the end */

/* Restricted artist mode — hide owner-only admin sections */
body.artist-restricted-mode .admin-salon-tabs,
body.artist-restricted-mode .admin-topbar .add-salon-btn,
body.artist-restricted-mode .admin-tab[onclick*="'info'"],
body.artist-restricted-mode .admin-tab[onclick*="'artists'"],
body.artist-restricted-mode .admin-tab[onclick*="'coupons'"],
body.artist-restricted-mode .admin-tab[onclick*="'images'"] {
  display: none !important;
}

/* ── REQUIRED FIELD MARKER (red *) ── */
.req-field-wrap { position: relative; }
.req-field-wrap input { width: 100%; padding-right: 1.8rem !important; }
.req-mark {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  color: #E53935; font-size: 1.05rem; font-weight: 600; line-height: 1;
  cursor: help; user-select: none; z-index: 2;
}
/* Password field already has the eye toggle on the right — move * left of it */
.req-mark-pw { right: 2.4rem; }
.pw-wrap.req-field-wrap input { padding-right: 3.6rem !important; }
/* Custom hover label "Заавал" (native title also kept as fallback) */
.req-mark:hover::after {
  content: 'Заавал';
  position: absolute; bottom: 140%; right: -6px;
  background: #111; color: #fff; font-size: .68rem; font-weight: 400;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
/* No asterisks on the login screen — only on signup */
.auth-login-mode .req-mark { display: none; }
.auth-login-mode .req-field-wrap input { padding-right: .9rem !important; }
.auth-login-mode .pw-wrap.req-field-wrap input { padding-right: 2.6rem !important; }

/* ═══════════════════════════════════════════════════════
   MOBILE FIXES v20 (tested target: ~360–412px wide phones, e.g. S22 Ultra)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Search: row 1 = icon + text input, row 2 = district dropdown + Хайх */
  .search-bar {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    background: #FFFFFF !important;
    border-radius: 12px !important;
  }
  .search-bar .s-icon { grid-column: 1; grid-row: 1; padding: .8rem 0 .8rem 1rem; }
  .search-bar input  { grid-column: 2 / 4; grid-row: 1; min-width: 0; padding: .8rem; font-size: .9rem; }
  .search-bar select {
    grid-column: 1 / 3; grid-row: 2;
    flex: none !important; min-width: 0 !important; width: 100%;
    border-left: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 0 !important; padding: .8rem 1rem; font-size: .85rem;
  }
  .search-bar button {
    grid-column: 3; grid-row: 2;
    border-radius: 0 !important; padding: .8rem 1.4rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    letter-spacing: .08em; font-size: .78rem;
  }

  /* Salon modal: use the full screen width on phones */
  .modal-overlay { padding: .5rem !important; }
  .modal { border-radius: 16px !important; }
  .modal-slider { height: 200px; }

  /* Tabs: 4 equal columns so all four always fit — no hidden "Цаг авах" */
  .modal-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    position: sticky; top: 0; z-index: 5; background: #FFFFFF;
  }
  .modal-tab {
    padding: .8rem .2rem !important;
    letter-spacing: 0 !important; text-transform: none !important;
    font-size: .78rem !important; white-space: nowrap; text-align: center;
    border-radius: 0 !important;
  }
  /* Make the booking tab stand out since it's the main action */
  .modal-tab[onclick*="'booking'"] { color: var(--gold) !important; font-weight: 600; }
  .modal-tab[onclick*="'booking'"].active { background: var(--gold) !important; color: #fff !important; }

  .modal-panel { padding: 1rem !important; }
  .booking-flow-wrap { grid-template-columns: 1fr !important; }
  .receipt-box { position: static !important; }
  .artist-cards-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .artist-cards-row .artist-card { flex: 0 0 auto; }
  .bk-time-slots { gap: .35rem; }
  .bk-slot { padding: .45rem .6rem; font-size: .8rem; }
}

/* ═══════════════════ PAYMENTS ═══════════════════ */
.pay-overlay {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.pay-overlay.open { display: flex; }
.pay-box {
  background: #FFFFFF; color: #111; width: min(420px, 100%); max-height: 92vh; overflow-y: auto;
  border-radius: 20px !important; padding: 1.6rem 1.4rem; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.pay-box h3 { font-family: var(--font-s); font-size: 1.3rem; margin-bottom: .8rem; color: #111 !important; }
.pay-emoji { font-size: 2rem; margin-bottom: .3rem; }
.pay-summary { background: #F7F5FF; border-radius: 12px; padding: .8rem; font-size: .88rem; margin-bottom: 1rem; line-height: 1.6; }
.pay-summary strong { color: var(--gold); font-size: 1.15rem; }
.pay-notice-list { list-style: none; text-align: left; margin: 0 0 1rem; padding: 0; }
.pay-notice-list li { font-size: .85rem; line-height: 1.55; padding: .45rem 0; border-bottom: 1px dashed rgba(0,0,0,0.08); }
.pay-notice-list li:last-child { border-bottom: none; }
.pay-agree { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .85rem; margin-bottom: .8rem; cursor: pointer; }
.pay-agree input { width: 18px; height: 18px; accent-color: var(--gold); }
.pay-cancel { background: none; border: none; color: #888; font-size: .85rem; margin-top: .6rem; cursor: pointer; padding: .4rem; }
.pay-amount { font-size: 1.8rem; font-weight: 600; color: var(--gold); margin-bottom: 1rem; }
.pay-qr { width: 220px; max-width: 100%; aspect-ratio: 1; margin: 0 auto .8rem; display: block; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); }
.pay-hint { font-size: .8rem; color: #666; margin: .4rem 0 .6rem; line-height: 1.5; }
.pay-banks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.pay-bank { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; text-decoration: none; color: #111; font-size: .68rem; line-height: 1.2; }
.pay-bank img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; }
.pay-bank:active { background: #F7F5FF; }
.pay-qr-more summary { font-size: .8rem; color: var(--gold); cursor: pointer; margin-bottom: .6rem; }
.pay-status { font-size: .85rem; color: #666; margin: .6rem 0; }

/* Billing tab */
.bill-hero, .bill-promo { border-radius: 14px; padding: .9rem 1rem; font-size: .86rem; line-height: 1.55; margin-bottom: 1rem; }
.bill-hero { background: #F7F5FF; border: 1px solid rgba(124,58,237,0.18); }
.bill-promo { background: #FFF8E6; border: 1px solid #F5D98A; }
.bill-card { border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 1rem; margin-bottom: .9rem; background: #fff; }
.bill-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.bill-name { font-weight: 600; font-size: .95rem; }
.bill-sub { font-size: .75rem; color: #888; margin-top: 2px; }
.bill-chip { font-size: .7rem; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.bill-chip.ok { background: rgba(34,197,94,0.12); color: #15803D; }
.bill-chip.off { background: rgba(229,57,53,0.1); color: #C62828; }
.bill-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .8rem; }
.bill-plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  border: 1.5px solid rgba(0,0,0,0.1); border-radius: 14px; padding: .8rem .9rem;
  background: #fff; cursor: pointer; text-align: left; transition: border-color .15s;
}
.bill-plan:hover, .bill-plan:active { border-color: var(--gold); }
.bp-label { font-size: .8rem; color: #666; }
.bp-price { font-size: 1.05rem; font-weight: 600; color: #111; }
.bp-save { font-size: .68rem; color: #15803D; }
.bill-hist { display: flex; justify-content: space-between; font-size: .82rem; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.billing-banner { background: #FFEBEE; color: #B71C1C; border-radius: 12px; padding: .75rem 1rem; font-size: .82rem; margin-bottom: 1rem; line-height: 1.5; }
.billing-banner a { color: #B71C1C; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* Unpaid admin: only the payment tab is usable */
body.admin-payment-only .admin-tab:not([onclick*="billing"]),
body.admin-payment-only .admin-salon-tabs,
body.admin-payment-only .admin-topbar .add-salon-btn { display: none !important; }
/* Restricted artist can't pay/add branches either */
body.artist-restricted-mode .admin-tab[onclick*="billing"] { display: none !important; }

/* Unpaid salon on the public site: visible, but clearly unavailable */
.salon-card.salon-unavailable { position: relative; }
.salon-card.salon-unavailable .card-img img { filter: grayscale(0.85); opacity: .75; }
.unavail-badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(17,17,17,0.82); color: #fff; font-size: .72rem; padding: .3rem .8rem;
  border-radius: 999px; white-space: nowrap;
}

@media (max-width: 700px) {
  .pay-box { padding: 1.3rem 1.1rem; }
  .bill-plan { padding: .7rem; }
  .bp-price { font-size: .95rem; }
}

/* ═══════════════════════════════════════════════════════════
   v21 — confirm dialog · moderation · pictures · rent
═══════════════════════════════════════════════════════════ */

/* ── Confirm dialog: every delete asks first. Тийм = white, Үгүй = red ── */
.confirm-overlay, .mod-overlay, .warn-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.confirm-overlay { z-index: 3000; }
.mod-overlay     { z-index: 2500; }
.warn-overlay    { z-index: 2400; }
.confirm-overlay.open, .mod-overlay.open, .warn-overlay.open { display: flex; }
.confirm-box, .mod-box, .warn-box {
  background: #FFFFFF; color: #111111; width: min(380px, 100%);
  border-radius: 20px !important; box-shadow: 0 24px 70px rgba(0,0,0,0.3);
  max-height: 92vh; overflow-y: auto;
}
.confirm-box { padding: 1.6rem 1.4rem 1.3rem; text-align: center; animation: v21pop .16s ease-out; }
@keyframes v21pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .confirm-box { animation: none; } }
.confirm-icon {
  width: 46px; height: 46px; margin: 0 auto .8rem; border-radius: 50% !important;
  background: #FFEBEE; color: #E53935; font-weight: 700; font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center;
}
.confirm-title, .mod-title, .warn-title {
  font-family: var(--font-s) !important; font-size: 1.2rem; font-weight: 500;
  color: #111111 !important; margin-bottom: .5rem; line-height: 1.3;
}
.confirm-msg { font-size: .88rem; line-height: 1.55; color: #444444 !important; white-space: pre-line; margin-bottom: 1.3rem; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.confirm-actions button {
  height: 46px; border-radius: 12px !important; font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.confirm-yes { background: #FFFFFF !important; color: #111111 !important; border: 1.5px solid #D4D4D4 !important; }
.confirm-yes:hover { border-color: #111111 !important; }
.confirm-no  { background: #E53935 !important; color: #FFFFFF !important; border: 1.5px solid #E53935 !important; }
.confirm-no:hover { background: #C62828 !important; border-color: #C62828 !important; }
.confirm-actions button:focus-visible, .mod-box button:focus-visible, .warn-box button:focus-visible {
  outline: 3px solid rgba(124,58,237,0.45); outline-offset: 2px;
}

/* ── SA: warning / make-inactive modal (white, over the dark panel) ── */
.mod-box { width: min(520px, 100%); padding: 1.3rem 1.3rem 1.2rem; }
.mod-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .6rem; }
.mod-who { font-size: .8rem; color: #666666 !important; line-height: 1.45; }
.mod-x { background: none !important; border: none !important; font-size: 1.3rem; color: #888 !important; cursor: pointer; padding: 0 .2rem; line-height: 1; }
.mod-note { font-size: .82rem; line-height: 1.5; border-radius: 12px !important; padding: .65rem .8rem; margin-bottom: .9rem; background: #F7F5FF; color: #3B2A6B !important; }
.mod-note.has-strikes { background: #FFF8E6; color: #7A4B00 !important; }
.mod-label { font-size: .74rem; font-weight: 600; color: #555555 !important; margin: .2rem 0 .45rem; }
.mod-templates { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .6rem; }
.mod-tpl, .mod-ban {
  background: #FFFFFF !important; color: #111111 !important; border: 1.5px solid #E2E2E2 !important;
  border-radius: 12px !important; padding: .55rem .7rem; font-size: .8rem; cursor: pointer; text-align: left; line-height: 1.3;
}
.mod-tpl.on { border-color: #7C3AED !important; background: #F7F5FF !important; }
.mod-box textarea {
  width: 100%; min-height: 92px; resize: vertical; border: 1.5px solid #E2E2E2 !important; border-radius: 12px !important;
  padding: .65rem .75rem; font-size: .84rem; line-height: 1.5; color: #111111 !important; background: #FFFFFF !important; margin-bottom: .8rem;
}
.mod-box textarea:focus { outline: none; border-color: #7C3AED !important; }
.mod-bans { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.mod-ban { border-radius: 999px !important; padding: .4rem .8rem; text-align: center; }
.mod-ban.on { background: #111111 !important; color: #FFFFFF !important; border-color: #111111 !important; }
.mod-ban.on.severe { background: #E53935 !important; border-color: #E53935 !important; }
.mod-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; }
.mod-actions button { height: 46px; border-radius: 12px !important; font-size: .9rem; font-weight: 600; cursor: pointer; }
.mod-skip { background: #FFFFFF !important; color: #111111 !important; border: 1.5px solid #D4D4D4 !important; }
.mod-send { background: #7C3AED !important; color: #FFFFFF !important; border: none !important; }
.mod-send.severe { background: #E53935 !important; }
.mod-send:disabled { opacity: .6; cursor: wait; }

/* ── A warning the account received ── */
.warn-box { width: min(440px, 100%); padding: 1.5rem 1.3rem 1.2rem; text-align: center; }
.warn-item { text-align: left; border: 1px solid #F1D5D5; background: #FFF7F7; border-radius: 14px !important; padding: .8rem .9rem; margin-bottom: .6rem; }
.warn-item-title { font-weight: 600; font-size: .9rem; color: #B71C1C !important; margin-bottom: .25rem; }
.warn-item-msg { font-size: .85rem; line-height: 1.55; color: #333333 !important; white-space: pre-line; }
.warn-item-meta { font-size: .72rem; color: #888888 !important; margin-top: .4rem; }

/* ── SA lists: status chips, strike count, actions ── */
.sa-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.sa-filter {
  padding: .32rem .8rem; font-size: .74rem; border-radius: 999px !important; cursor: pointer;
  background: transparent; color: #A08878; border: 1px solid rgba(196,146,74,0.3);
}
.sa-filter.on { background: rgba(124,58,237,0.22); color: #E8DDD0; border-color: #7C3AED; }
.sa-filter b { font-weight: 600; margin-left: .25rem; }
.acc-card { padding: .9rem 1rem !important; margin-bottom: .55rem !important; }
.acc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.acc-name { font-size: .93rem; font-weight: 600; color: #E8DDD0; }
.acc-line { font-size: .76rem; color: #8a7a72; margin-top: 3px; line-height: 1.45; word-break: break-word; }
.acc-line.warn { color: #e0b060; }
.acc-line.bad { color: #e07070; }
.acc-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.acc-actions button { font-size: .74rem !important; padding: .35rem .8rem !important; margin: 0 !important; }
.st-chip { display: inline-block; flex-shrink: 0; font-size: .68rem; padding: .2rem .6rem; border-radius: 999px !important; white-space: nowrap; }
.st-chip.ok   { background: rgba(100,180,100,0.15); color: #7fcf7f; }
.st-chip.warn { background: rgba(224,176,96,0.16); color: #e0b060; }
.st-chip.bad  { background: rgba(200,80,80,0.16);  color: #f08a8a; }
.st-chip.gray { background: rgba(255,255,255,0.08); color: #a89a92; }
.sa-warn-btn {
  padding: .4rem .9rem; background: rgba(224,176,96,0.12); color: #e0b060;
  border: 1px solid rgba(224,176,96,0.4); border-radius: 6px; cursor: pointer; font-size: .78rem;
}
.strike-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: .3rem; }
.strike-dots i { width: 7px; height: 7px; border-radius: 50% !important; background: #e0b060; display: inline-block; }

/* ── SA → Зурагнууд ── */
.pic-summary { font-size: .8rem; color: #8a7a72; margin-bottom: .8rem; }
.pic-summary strong { color: #E8DDD0; font-weight: 600; }
.pic-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.pic-card {
  display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(196,146,74,0.22); border-radius: 14px !important;
  color: #E8DDD0; transition: border-color .15s, transform .15s;
}
.pic-card:hover { border-color: #7C3AED; }
.pic-card:focus-visible { outline: 3px solid rgba(124,58,237,0.6); outline-offset: 2px; }
.pic-cover { aspect-ratio: 4 / 3; width: 100%; background: #2a2018; display: flex; align-items: center; justify-content: center; border-radius: 0 !important; overflow: hidden; }
.pic-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; display: block; }
.pic-cover .pic-none { font-size: .75rem; color: #8a8a8a; }
.pic-card-body { padding: .6rem .75rem .75rem; display: flex; flex-direction: column; gap: 2px; border-radius: 0 !important; }
.pic-name { font-size: .88rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pic-state { font-size: .74rem; font-weight: 600; }
.pic-state.active { color: #7fcf7f; } .pic-state.inactive { color: #e0b060; } .pic-state.deleted { color: #f08a8a; }
.pic-reason { font-size: .7rem; color: #8a7a72; line-height: 1.35; }
.pic-count { font-size: .72rem; color: #a89a92; margin-top: 2px; }
/* no pictures → the whole card goes gray */
.pic-card.empty { filter: grayscale(1); opacity: .55; }
.pic-card.empty .pic-cover { background: #3a3a3a; }
.pic-back { background: none; border: 1px solid rgba(196,146,74,0.3); color: #A08878; border-radius: 999px !important; padding: .35rem .9rem; font-size: .76rem; cursor: pointer; margin-bottom: .9rem; }
.pic-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.pic-head-name { font-family: var(--font-s) !important; font-size: 1.35rem; color: #E8DDD0; line-height: 1.25; }
.pic-head-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.pic-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.pic-tile { background: rgba(255,255,255,0.05); border: 1px solid rgba(196,146,74,0.2); border-radius: 12px !important; overflow: hidden; display: flex; flex-direction: column; }
.pic-tile-img { aspect-ratio: 1; background: #2a2018; cursor: zoom-in; border-radius: 0 !important; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pic-tile-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; display: block; }
.pic-tile-img .pic-none { font-size: .72rem; color: #f08a8a; padding: .5rem; text-align: center; }
.pic-tile-body { padding: .5rem .6rem .6rem; display: flex; flex-direction: column; gap: 3px; flex: 1; border-radius: 0 !important; }
.pic-labels { font-size: .74rem; color: #E8DDD0; line-height: 1.35; }
.pic-size { font-size: .68rem; color: #8a7a72; }
.pic-del { margin-top: auto; align-self: flex-start; padding: .3rem .8rem; font-size: .72rem; cursor: pointer; background: rgba(200,30,30,0.15); color: #ff8a8a; border: 1px solid rgba(200,30,30,0.4); border-radius: 8px !important; }
.pic-del:hover { background: rgba(200,30,30,0.28); }
.pic-empty-msg { font-size: .85rem; color: #8a7a72; padding: 1.5rem 0; }

/* ── Main page: search results (inactive salons only show up here) ── */
.search-results { padding-top: 1.5rem; }
.search-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; padding: 0 0 1rem; }
.search-results-grid .salon-card { width: auto !important; min-width: 0 !important; flex: none !important; }
body.searching #salons-wrap { display: none; }
.search-empty { font-size: .88rem; color: #777; padding: 1.5rem 0 2.5rem; }

/* ── Admin → Төлбөр: Түрээс (main account) + Салбарууд ── */
.bill-section { margin-bottom: 1.6rem; }
.bill-section-title { font-family: var(--font-s) !important; font-size: 1.25rem; color: #111111; margin-bottom: .2rem; }
.bill-section-sub { font-size: .8rem; color: #777777; line-height: 1.5; margin-bottom: .8rem; }
.bill-card.rent { border: 1.5px solid rgba(124,58,237,0.28); }
.bill-empty { font-size: .85rem; color: #555; line-height: 1.55; }
.bill-days { font-size: .74rem; color: #666; margin-top: .6rem; }

@media (max-width: 640px) {
  .pic-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .pic-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mod-templates { grid-template-columns: 1fr; }
  .search-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .pic-head-name { font-size: 1.15rem; }
}
.t-warn { color: #e0b060; font-weight: 500; }
.t-bad  { color: #f08a8a; font-weight: 500; }
/* toast: fully off-screen when hidden (an empty toast used to peek at the corner), above dialogs */
.toast { z-index: 3500 !important; transform: translateX(calc(100% + 3rem)); }
.toast.show { transform: translateX(0); }
/* super admin title was dark-on-dark */
.sa-header h2 { color: #E8DDD0 !important; }
.confirm-msg, .mod-who, .mod-note, .warn-item-msg, .mod-tpl, .mod-ban, .mod-box textarea, .bill-section-sub, .bill-empty { font-weight: 400; }
/* owner account whose salon was deleted: only Төлбөр (Түрээс explains what to do) */
body.admin-no-salon .admin-tab:not([onclick*="billing"]),
body.admin-no-salon .admin-topbar .add-salon-btn { display: none !important; }
.sa-card h4 { color: #E8DDD0 !important; }   /* salon names were dark-on-dark */
@media (max-width: 640px) {
  .bill-card-head { flex-direction: column; align-items: flex-start; }
}

/* v22 — password reset: code is e-mailed, never shown on screen */
.forgot-sent { font-size: .82rem; line-height: 1.55; color: #3B2A6B; background: #F7F5FF; border: 1px solid rgba(124,58,237,0.18); border-radius: 12px; padding: .75rem .85rem; margin-bottom: .8rem; font-weight: 400; }
body.dark-mode .forgot-sent { color: #E9E3FF !important; background: rgba(124,58,237,0.14); border-color: rgba(167,139,250,0.35); }
#forgotCode { width: 100%; letter-spacing: .3em; }
#forgotCode::placeholder { letter-spacing: normal; }

/* v25 — login: "Намайг сана" + forgot link on one row */
.login-extras { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin: -.3rem 0 .15rem; }
.remember-me { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 400; color: #555555; cursor: pointer; user-select: none; -webkit-user-select: none; }
.auth-form .remember-me input[type=checkbox] {
  width: 17px !important; height: 17px !important; min-width: 0 !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important;
  background: none !important; border-radius: 4px !important; flex: none; cursor: pointer; accent-color: var(--gold);
}
.login-extras .forgot-link { color: var(--gold); cursor: pointer; font-size: .8rem; margin-left: auto; }
.login-extras .forgot-link:hover { text-decoration: underline; }
body.dark-mode .remember-me { color: #CFCFCF; }

/* v25 — search box: Google-style recent searches, in the site's colours */
.search-section { position: relative; z-index: 20; }        /* dropdown stays above the sections below */
.search-box { position: relative; }
.search-history {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  display: none; text-align: left; padding: .35rem 0; overflow: hidden;
  background: #FFFFFF; border: 1px solid rgba(124,58,237,0.14); border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(17,17,17,0.12), 0 2px 6px rgba(17,17,17,0.04);
}
.search-history.open { display: block; animation: shIn .14s ease-out; }
@keyframes shIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .7rem .35rem 1.1rem; border-radius: 0 !important; }
.sh-title { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #8A8A96; border-radius: 0 !important; }
.sh-clear { background: none; border: none; padding: .3rem .5rem; font-size: .75rem; font-weight: 500; color: #DC2626; cursor: pointer; border-radius: 8px !important; }
.sh-clear:hover { background: rgba(220,38,38,0.07); }
.sh-list { border-radius: 0 !important; }
.sh-list.sh-all { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.sh-item { display: flex; align-items: center; gap: .8rem; padding: .55rem .55rem .55rem 1.1rem; cursor: pointer; border-radius: 0 !important; transition: background .12s; }
.sh-item:hover, .sh-item.active { background: #F5F3FF; }
.sh-icon { width: 17px; height: 17px; flex: none; color: #A3A3B2; }
.sh-item:hover .sh-icon, .sh-item.active .sh-icon { color: var(--gold); }
.sh-text { flex: 1; min-width: 0; font-size: .9rem; font-weight: 400; color: #1F1F1F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0 !important; }
.sh-del {
  flex: none; width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; color: #A3A3B2;
  border-radius: 50% !important; transition: background .12s, color .12s;
}
.sh-del:hover { background: rgba(220,38,38,0.08); color: #DC2626; }
.sh-more {
  display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: none;
  border-top: 1px solid rgba(0,0,0,0.06); margin-top: .25rem; padding: .62rem 1rem .5rem calc(1.1rem + 17px + .8rem);
  font-size: .82rem; font-weight: 500; color: var(--gold); border-radius: 0 !important;
}
.sh-more:hover { background: #F5F3FF; }
body.dark-mode .search-history { background: #1A1A1A; border-color: rgba(255,255,255,0.10); box-shadow: 0 14px 34px rgba(0,0,0,0.55); }
body.dark-mode .sh-item:hover, body.dark-mode .sh-item.active, body.dark-mode .sh-more:hover { background: rgba(167,139,250,0.12); }
body.dark-mode .sh-text { color: #F0F0F0; }
body.dark-mode .sh-title { color: #9A9AA6; }
body.dark-mode .sh-icon, body.dark-mode .sh-del { color: #8A8A96; }
body.dark-mode .sh-more { border-top-color: rgba(255,255,255,0.08); }
body.dark-mode .sh-clear { color: #F87171; }
@media (hover: none) {
  .sh-item { padding-top: .45rem; padding-bottom: .45rem; }       /* finger-sized rows (~50px) */
  .sh-del { width: 36px; height: 36px; }
}
@media (max-width: 480px) {                                         /* keep "Намайг сана" + forgot link on one line */
  .login-extras { gap: .4rem .5rem; }
  .remember-me, .login-extras .forgot-link { font-size: .76rem; }
  .remember-me { gap: .4rem; }
}
/* dark mode: district picker was still white inside the dark search bar */
body.dark-mode .search-bar select { background: #1A1A1A !important; color: #CFCFCF !important; border-color: rgba(255,255,255,0.08) !important; }

/* v26 — login / signup window on small phones.
   It sat centred and taller than the screen with no way to scroll, so the title/× and the
   Бүртгүүлэх button were cut off. Now the dark background scrolls; margin:auto centres the
   box when it fits and starts it at the top when it doesn't. */
#authOverlay { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#authOverlay .auth-box { margin: auto; flex-shrink: 0; }
/* signup fields: all the same width, even spacing */
#userFields > * + *, #adminFields > * + * { margin-top: .75rem; }
#adminFields > hr { margin: .9rem 0 !important; }
.auth-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.auth-row2 > * { min-width: 0; }
.auth-row2 input { width: 100%; }
#adminFields > input, #adminFields > select { display: block; width: 100%; }
.auth-form select#aSalonDistrict {
  padding: .9rem 1rem; border: 1px solid rgba(0,0,0,0.25); background: rgba(255,255,255,0.6);
  font-size: .88rem; color: #111111; border-radius: 12px !important; cursor: pointer;
}
.hours-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .4rem; align-items: center; }
.hours-row select { width: 100%; min-width: 0; }
body.dark-mode .hours-box { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.12) !important; }
@media (max-width: 540px) {
  #authOverlay { padding: .75rem; }
  #authOverlay .auth-box { padding: 2rem 1.25rem 1.5rem; }
  #authOverlay .auth-box h2 { font-size: 1.7rem; padding-right: 2.4rem; }
  #authOverlay .auth-sub { margin-bottom: 1.4rem; }
}

/* v27 — phone menu: no more ≡. A V tab hangs under the header; tapped, it turns into › and
   slides inside the opened menu (top-right) — tap › (or outside) to close. */
:root { --nav-h: 64px; }
.hamburger { display: none !important; }
.menu-tab {
  display: none; position: fixed; z-index: 495; top: var(--nav-h); left: 50%;
  width: 62px; height: 24px; padding: 0; transform: translateX(-50%);
  align-items: center; justify-content: center; cursor: pointer;
  background: #F5F5F7; border: 1px solid rgba(0,0,0,0.08); border-top: none;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 6px 14px rgba(124,58,237,0.12);
  -webkit-tap-highlight-color: transparent;
  transition: top .42s var(--ease), left .42s var(--ease), width .42s var(--ease), height .42s var(--ease),
              border-radius .42s var(--ease), transform .42s var(--ease), background .3s, box-shadow .3s;
}
.menu-tab svg { width: 22px; height: 22px; display: block; transition: transform .42s var(--ease); }
.menu-tab:not(.open) svg { animation: mtNudge 2.6s ease-in-out 1.2s 2; }
@keyframes mtNudge { 0%,60%,100% { transform: translateY(0); } 70% { transform: translateY(3px); } 80% { transform: translateY(0); } 90% { transform: translateY(2px); } }
.menu-tab.open {
  top: calc(var(--nav-h) + 12px); left: calc(100% - 54px); width: 40px; height: 40px;
  transform: none; border-radius: 50% !important; border: 1px solid rgba(124,58,237,0.18);
  background: #F5F3FF; box-shadow: 0 4px 12px rgba(124,58,237,0.18);
}
.menu-tab.open svg { transform: rotate(-90deg); }   /* V → › */
.menu-tab:active { filter: brightness(.96); }
.mobile-drawer-inner > a:first-child { padding-right: 3.5rem; }   /* room for the › inside the menu */
body.dark-mode .menu-tab { background: #161616; border-color: rgba(255,255,255,0.08); box-shadow: 0 6px 14px rgba(0,0,0,0.45); }
body.dark-mode .menu-tab.open { background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.35); }
body.admin-mode .menu-tab, body.sa-full-mode .menu-tab { display: none !important; }
@media (max-width: 900px) {
  .menu-tab { display: flex; }
  nav { grid-template-columns: auto 1fr; }
  .nav-logo { white-space: nowrap; }
}
@media (max-width: 540px) {
  :root { --nav-h: 56px; }
  .nav-right { gap: .45rem; }
  #navAuthBtns { gap: .4rem; }
  .theme-toggle { width: 32px; height: 32px; }
  nav .nav-btn { padding: .42rem .7rem; letter-spacing: .08em; font-size: .62rem; }
}
@media (max-width: 350px) {
  nav { padding: 0 .75rem; }
  .nav-logo { font-size: .98rem; }
  nav .nav-btn { padding: .4rem .5rem; letter-spacing: .04em; }
  #navAuthBtns .nav-btn:not(.primary) { display: none; }   /* tiny phones: Нэвтрэх lives in the menu */
}
/* tapping outside the open menu only closes it (doesn't also press what's underneath) */
.menu-backdrop { position: fixed; inset: 0; z-index: 480; background: rgba(17,17,17,0.28); opacity: 0; pointer-events: none; transition: opacity .35s; }
.menu-backdrop.open { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .menu-backdrop { display: none; } }
body.admin-mode .menu-backdrop, body.sa-full-mode .menu-backdrop { display: none !important; }
@media (max-width: 380px) {
  .nav-logo { letter-spacing: .02em; }
  nav .nav-btn { padding: .42rem .58rem; }
  #navAuthBtns { gap: .35rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   v28 — salon schedule in Google-Calendar style (gcal.js)
   ═══════════════════════════════════════════════════════════════════ */
.gcal { --gc-line: #E3E5E8; --gc-text: #3C4043; --gc-sub: #70757A; --gc-accent: #7C3AED; --gc-red: #EA4335;
        position: relative; color: var(--gc-text); margin: -.4rem 0 0; }
.gc-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .2rem 0 .6rem; }
.gc-btn { height: 36px; padding: 0 1rem; border: 1px solid #DADCE0; background: #fff; color: var(--gc-text);
          border-radius: 18px !important; font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .15s; }
.gc-btn:hover { background: #F6F4FF; }
.gc-arrows { display: flex; }
.gc-icon { width: 36px; height: 36px; border: none; background: none; border-radius: 50% !important; font-size: 1.5rem;
           line-height: 1; color: #5F6368; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gc-icon:hover { background: #F1F3F4; }
.gc-title { border: none; background: none; font-size: 1.3rem; font-weight: 400; color: var(--gc-text); cursor: pointer;
            padding: .3rem .5rem; border-radius: 8px !important; white-space: nowrap; font-family: var(--font-b) !important; }
.gc-title:hover { background: #F1F3F4; }
.gc-caret { font-size: .7rem; color: #5F6368; vertical-align: middle; }
.gc-views { margin-left: auto; display: flex; background: #F1F3F4; border-radius: 20px !important; padding: 3px; gap: 2px; }
.gc-views button { border: none; background: none; padding: .42rem .85rem; font-size: .8rem; font-weight: 500; color: #5F6368;
                   border-radius: 16px !important; cursor: pointer; white-space: nowrap; }
.gc-views button.on { background: #fff; color: var(--gc-accent); box-shadow: 0 1px 3px rgba(60,64,67,.25); }
.gc-mini { display: none; position: absolute; z-index: 30; top: 48px; left: 120px; width: 264px; background: #fff;
           border-radius: 14px !important; box-shadow: 0 8px 28px rgba(60,64,67,.28); padding: .7rem; }
.gc-mini.open { display: block; }
.gc-mini-head { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; font-weight: 500; margin-bottom: .35rem; }
.gc-mini-head button { border: none; background: none; width: 30px; height: 30px; border-radius: 50% !important; font-size: 1.2rem; cursor: pointer; color: #5F6368; }
.gc-mini-head button:hover { background: #F1F3F4; }
.gc-mini-dow, .gc-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.gc-mini-dow span { font-size: .66rem; color: var(--gc-sub); padding: .2rem 0; }
.gc-mini-grid button { border: none; background: none; height: 32px; font-size: .78rem; border-radius: 50% !important; cursor: pointer; color: var(--gc-text); }
.gc-mini-grid button:hover { background: #F1F3F4; }
.gc-mini-grid button.out { color: #B0B3B8; }
.gc-mini-grid button.sel { background: #EDE7FF; color: var(--gc-accent); font-weight: 600; }
.gc-mini-grid button.today { background: var(--gc-accent); color: #fff; font-weight: 600; }
.gc-artists { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 0 .7rem; }
.gc-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .75rem .32rem .55rem; border: 1px solid #DADCE0;
           background: #fff; border-radius: 16px !important; font-size: .8rem; color: #5F6368; cursor: pointer; }
.gc-chip i { width: 12px; height: 12px; border-radius: 3px !important; border: 2px solid var(--c); background: transparent; flex: none; }
.gc-chip.on { color: var(--gc-text); border-color: color-mix(in srgb, var(--c) 45%, #DADCE0); }
.gc-chip.on i { background: var(--c); }
.gc-hint, .gc-msg { font-size: .85rem; color: var(--gc-sub); }
.gc-msg { padding: 2rem 1rem; text-align: center; }
.gc-msg.err { color: #D93025; }
.gc-body { border-top: 1px solid var(--gc-line); }

/* day / 3-day / week */
.gc-head { display: grid; grid-template-columns: 52px repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--gc-line); }
.gc-gutter { display: flex; align-items: flex-end; justify-content: center; padding-bottom: .3rem; }
.gc-gutter span { font-size: .58rem; color: var(--gc-sub); }
.gc-dayhead { border: none; background: none; cursor: pointer; padding: .45rem 0 .5rem; display: flex; flex-direction: column;
              align-items: center; gap: .15rem; border-radius: 0 !important; }
.gc-dow { font-size: .68rem; font-weight: 500; letter-spacing: .06em; color: var(--gc-sub); text-transform: uppercase; }
.gc-dnum { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
           color: var(--gc-text); border-radius: 50% !important; transition: background .15s; }
.gc-dayhead:hover .gc-dnum { background: #F1F3F4; }
.gc-dayhead.past .gc-dnum { color: var(--gc-sub); }
.gc-dayhead.today .gc-dow { color: var(--gc-accent); }
.gc-dayhead.today .gc-dnum { background: var(--gc-accent); color: #fff; }
.gc-scroll { overflow-y: auto; overflow-x: hidden; position: relative; overscroll-behavior: contain; }
.gc-grid { position: relative; display: grid; grid-template-columns: 52px repeat(var(--n), minmax(0, 1fr)); }
.gc-times { position: relative; border-radius: 0 !important; }
.gc-time { position: absolute; right: 8px; transform: translateY(-50%); font-size: .66rem; color: var(--gc-sub); white-space: nowrap; }
.gc-col { position: relative; border-left: 1px solid var(--gc-line); border-radius: 0 !important; cursor: pointer;
          background-image: linear-gradient(to bottom, var(--gc-line) 1px, transparent 1px);
          background-size: 100% var(--hour); }
.gc-col.today { background-color: rgba(124,58,237,0.025); }
.gc-ev { position: absolute; z-index: 2; overflow: hidden; padding: 3px 7px; border-radius: 6px !important; cursor: pointer;
         background: var(--c); color: #fff; font-size: .74rem; line-height: 1.3; box-shadow: 0 0 0 1px #fff;
         transition: box-shadow .15s, filter .15s; }
.gc-ev:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px #fff, 0 3px 10px rgba(0,0,0,.18); z-index: 3; }
.gc-ev-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-ev-s { opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-ev-inline { font-weight: 400; opacity: .9; }
.gc-ev.short { padding: 1px 6px; display: flex; align-items: center; }
.gc-ev.short .gc-ev-s { display: none; }
.gc-ev.noshow { background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 80%, #000);
                box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px #fff; }
.gc-ev.noshow .gc-ev-t { text-decoration: line-through; }
.gc-ev-tag { display: inline-block; margin-top: 2px; font-size: .62rem; font-weight: 600; padding: 0 5px; border-radius: 6px !important;
             background: #FCE8E6; color: #C5221F; }
.gc-ev.unmarked::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50% !important;
                         background: #FBBC04; box-shadow: 0 0 0 2px var(--c); animation: gcPulse 1.6s ease-in-out infinite; }
@keyframes gcPulse { 50% { transform: scale(1.35); } }
.gc-block { background: repeating-linear-gradient(135deg, #F1F3F4 0 6px, #E8EAED 6px 12px); color: #3C4043;
            box-shadow: inset 3px 0 0 var(--c), 0 0 0 1px #fff; }
.gc-block .gc-ev-s { color: #5F6368; }
.gc-now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--gc-red); z-index: 4; pointer-events: none; }
.gc-now i { position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50% !important; background: var(--gc-red); }
.gc-ghost { position: absolute; left: 1px; right: 3px; z-index: 5; border-radius: 6px !important; background: var(--gc-accent);
            color: #fff; font-size: .74rem; padding: 3px 7px; box-shadow: 0 4px 14px rgba(124,58,237,.35); pointer-events: none; }

/* month */
.gc-month { overflow-y: auto; }
.gc-mhead { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--gc-line); }
.gc-mhead div { text-align: center; font-size: .68rem; font-weight: 500; color: var(--gc-sub); padding: .45rem 0; }
.gc-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(104px, 1fr); }
.gc-mcell { border-right: 1px solid var(--gc-line); border-bottom: 1px solid var(--gc-line); padding: 2px 3px 4px; cursor: pointer;
            border-radius: 0 !important; min-width: 0; overflow: hidden; }
.gc-mcell:nth-child(7n) { border-right: none; }
.gc-mcell:hover { background: #FAFAFB; }
.gc-mcell.out .gc-mnum span { color: #B0B3B8; }
.gc-mnum { text-align: center; margin-bottom: 2px; }
.gc-mnum span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; font-size: .78rem;
                font-weight: 500; border-radius: 50% !important; color: var(--gc-text); }
.gc-mcell.today .gc-mnum span { background: var(--gc-accent); color: #fff; }
.gc-mchip { display: flex; align-items: center; gap: 4px; font-size: .68rem; line-height: 1.5; padding: 0 4px; border-radius: 4px !important;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gc-text); }
.gc-mchip i { width: 7px; height: 7px; border-radius: 50% !important; background: var(--c); flex: none; }
.gc-mchip.blk { background: repeating-linear-gradient(135deg, #F1F3F4 0 5px, #E8EAED 5px 10px); box-shadow: inset 2px 0 0 var(--c); }
.gc-mchip.noshow { text-decoration: line-through; color: var(--gc-sub); }
.gc-more { font-size: .66rem; font-weight: 600; color: #5F6368; padding: 0 4px; }

/* agenda */
.gc-agenda { overflow-y: auto; padding: .3rem 0 5rem; }
.gc-aday { display: flex; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--gc-line); }
.gc-adate { border: none; background: none; cursor: pointer; display: flex; align-items: flex-start; gap: .45rem; width: 118px; flex: none; text-align: left; }
.gc-adate .gc-dnum { width: 36px; height: 36px; font-size: 1.15rem; }
.gc-aday.today .gc-adate .gc-dnum { background: var(--gc-accent); color: #fff; }
.gc-adow { font-size: .68rem; color: var(--gc-sub); line-height: 1.35; padding-top: .3rem; text-transform: uppercase; letter-spacing: .04em; }
.gc-alist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-arow { display: flex; align-items: center; gap: .7rem; border: none; background: none; text-align: left; padding: .45rem .5rem;
           border-radius: 10px !important; cursor: pointer; width: 100%; }
.gc-arow:hover { background: #F6F4FF; }
.gc-arow > i { width: 10px; height: 10px; border-radius: 50% !important; flex: none; }
.gc-arow.blk > i { border-radius: 3px !important; }
.gc-atime { font-size: .78rem; color: var(--gc-sub); width: 88px; flex: none; }
.gc-atitle { flex: 1; min-width: 0; font-size: .86rem; font-weight: 500; color: var(--gc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-atitle small { display: block; font-weight: 400; font-size: .74rem; color: var(--gc-sub); overflow: hidden; text-overflow: ellipsis; }
.gc-ast, .gcs-status { font-size: .68rem; font-weight: 600; padding: .15rem .55rem; border-radius: 10px !important; flex: none;
                       background: #E8F0FE; color: #1967D2; }
.gc-ast.st-Completed, .gcs-status.st-Completed { background: #E6F4EA; color: #137333; }
.gc-ast.st-NoShow, .gcs-status.st-NoShow { background: #FCE8E6; color: #C5221F; }
.gc-ast.unmarked, .gcs-status.unmarked { background: #FEF7E0; color: #B06000; }

/* floating + (Google's create button) */
.gc-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 58px; height: 58px; border: none; cursor: pointer;
          border-radius: 18px !important; color: #fff; background: linear-gradient(135deg, #8B5CF6, #EC4899);
          box-shadow: 0 6px 18px rgba(124,58,237,.38), 0 2px 5px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
          transition: transform .15s, box-shadow .15s; }
.gc-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124,58,237,.42); }

/* bottom sheet on phones, dialog on desktop */
.gc-sheet-ov { position: fixed; inset: 0; z-index: 1500; background: rgba(32,33,36,0); display: flex; align-items: flex-end;
               justify-content: center; pointer-events: none; transition: background .2s; }
.gc-sheet-ov.open { background: rgba(32,33,36,.38); pointer-events: auto; }
.gc-sheet { width: min(460px, 100%); max-height: 88vh; overflow-y: auto; background: #fff; color: #3C4043;
            border-radius: 22px 22px 0 0 !important; padding: .5rem 1.3rem 1.4rem; transform: translateY(105%);
            transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -6px 30px rgba(0,0,0,.18); }
.gc-sheet-ov.open .gc-sheet { transform: none; }
@media (min-width: 700px) {
  .gc-sheet-ov { align-items: center; }
  .gc-sheet { border-radius: 18px !important; transform: scale(.96); opacity: 0; transition: transform .18s, opacity .18s; }
  .gc-sheet-ov.open .gc-sheet { opacity: 1; }
  .gc-grab { display: none; }
}
.gc-grab { width: 36px; height: 4px; border-radius: 2px !important; background: #DADCE0; margin: .2rem auto .7rem; }
.gcs-head { display: flex; align-items: flex-start; gap: .8rem; margin: .3rem 0 .9rem; }
.gcs-sq { width: 16px; height: 16px; border-radius: 4px !important; flex: none; margin-top: .35rem; }
.gcs-sq.blk { background: repeating-linear-gradient(135deg, #E8EAED 0 4px, #DADCE0 4px 8px); box-shadow: inset 3px 0 0 var(--c); }
.gcs-hd { flex: 1; min-width: 0; }
.gcs-title { font-size: 1.3rem; line-height: 1.3; color: #202124; font-family: var(--font-b) !important; }
.gcs-when { font-size: .82rem; color: var(--gc-sub, #70757A); margin-top: .2rem; }
.gcs-x { border: none; background: none; width: 36px; height: 36px; border-radius: 50% !important; font-size: 1.4rem; color: #5F6368; cursor: pointer; flex: none; }
.gcs-x:hover { background: #F1F3F4; }
.gcs-rows { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .6rem; }
.gcs-row { display: flex; align-items: center; gap: .9rem; font-size: .9rem; padding: .35rem 0; }
.gcs-row small { color: #70757A; }
.gcs-row a { color: #1A73E8; text-decoration: none; }
.gcs-ic { width: 20px; text-align: center; flex: none; color: #5F6368; font-size: .95rem; }
.gcs-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50% !important; }
.gcs-disc { font-size: .72rem; font-weight: 600; color: #B06000; background: #FEF7E0; padding: .1rem .45rem; border-radius: 8px !important; }
.gcs-mark { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0 .35rem; }
.gcs-mark button { height: 46px; border-radius: 14px !important; font-size: .92rem; font-weight: 600; cursor: pointer; border: 1.5px solid; background: #fff; }
.gcs-came { color: #137333; border-color: #A8DAB5 !important; }
.gcs-came.on, .gcs-came:hover { background: #E6F4EA; }
.gcs-came.on { border-color: #137333 !important; }
.gcs-noshow { color: #C5221F; border-color: #F4B4AE !important; }
.gcs-noshow.on, .gcs-noshow:hover { background: #FCE8E6; }
.gcs-noshow.on { border-color: #C5221F !important; }
.gcs-note { font-size: .76rem; color: #70757A; line-height: 1.5; }
.gcs-note a { color: #1A73E8; cursor: pointer; }
.gcs-cancel { width: 100%; margin-top: .9rem; height: 42px; border: 1px solid #F4B4AE; color: #C5221F; background: #fff;
              border-radius: 12px !important; font-weight: 500; cursor: pointer; }
.gcs-cancel:hover { background: #FCE8E6; }
.gcs-titlein { width: 100%; border: none; border-bottom: 2px solid #E8EAED; font-size: 1.15rem; padding: .5rem .1rem; margin-bottom: 1rem;
               outline: none; color: #202124; border-radius: 0 !important; background: transparent; }
.gcs-titlein:focus { border-bottom-color: var(--gold); }
.gcs-form { display: flex; flex-direction: column; gap: .7rem; }
.gcs-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .72rem; color: #70757A; font-weight: 500; }
.gcs-form select, .gcs-form input { height: 42px; border: 1px solid #DADCE0; border-radius: 10px !important; padding: 0 .7rem; font-size: .9rem;
                                    color: #202124; background: #fff; width: 100%; }
.gcs-times { display: flex; align-items: flex-end; gap: .5rem; }
.gcs-times label { flex: 1; }
.gcs-times > span { padding-bottom: .7rem; color: #70757A; }
.gcs-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }
.gcs-save { height: 42px; padding: 0 1.6rem; border: none; border-radius: 21px !important; background: var(--gold); color: #fff; font-weight: 600; cursor: pointer; }
.gcs-del { height: 42px; padding: 0 1.2rem; border: 1px solid #F4B4AE; border-radius: 21px !important; background: #fff; color: #C5221F; font-weight: 500; cursor: pointer; margin-right: auto; }
.gcs-link { display: inline-block; margin-top: .9rem; font-size: .8rem; color: var(--gold); cursor: pointer; }

@media (max-width: 640px) {
  .gcal { margin: -.8rem -.6rem 0; }
  .gc-top { gap: .25rem; }
  .gc-btn { height: 32px; padding: 0 .75rem; font-size: .78rem; }
  .gc-title { font-size: 1.08rem; padding: .25rem .3rem; }
  .gc-views { margin-left: 0; width: 100%; order: 5; justify-content: space-between; }
  .gc-views button { flex: 1; padding: .4rem .2rem; font-size: .74rem; }
  .gc-mini { left: 8px; top: 44px; }
  .gc-head, .gc-grid { grid-template-columns: 42px repeat(var(--n), minmax(0, 1fr)); }
  .gc-dnum { width: 34px; height: 34px; font-size: 1.1rem; }
  .gc-time { right: 5px; font-size: .6rem; }
  .gc-ev { font-size: .68rem; padding: 2px 4px; }
  .gc-mgrid { grid-auto-rows: minmax(78px, 1fr); }
  .gc-mchip { font-size: .6rem; padding: 0 2px; }
  .gc-mchip i { display: none; }
  .gc-adate { width: 84px; }
  .gc-atime { width: 72px; font-size: .72rem; }
  .gc-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}
/* phones: admin tabs on one swipeable row, so the schedule gets the screen */
@media (max-width: 640px) {
  .admin-tabs-row { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding: .6rem .8rem .5rem !important;
                    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .admin-tabs-row::-webkit-scrollbar { display: none; }
  .admin-tabs-row .admin-tab { flex: none; scroll-snap-align: start; }
}

/* ═══════════════════════════════════════════════════════════════════
   v28 — XP seasons, gift box, rewards (rewards.js)
   ═══════════════════════════════════════════════════════════════════ */
/* name decorations — <b> elements (dark mode forces colours on spans) */
.nm-hl { font-weight: 700; font-style: normal; }
.nm-gradient { background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text;
               -webkit-text-fill-color: transparent; color: transparent; }
.nm-glow { -webkit-text-fill-color: var(--c1); color: var(--c1) !important;
           text-shadow: 0 0 6px color-mix(in srgb, var(--c1) 55%, transparent), 0 0 16px color-mix(in srgb, var(--c2) 45%, transparent); }
.nm-marker { background: linear-gradient(transparent 52%, color-mix(in srgb, var(--c1) 80%, transparent) 52%, color-mix(in srgb, var(--c2) 80%, transparent));
             padding: 0 .12em; border-radius: 3px !important; -webkit-text-fill-color: #1F1F1F; color: #1F1F1F !important; }
.nm-rainbow { background: linear-gradient(90deg, #EF4444, #F59E0B, #10B981, #3B82F6, #8B5CF6, #EC4899, #EF4444); background-size: 220% auto;
              -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
              animation: nmRainbow 5s linear infinite; }
@keyframes nmRainbow { to { background-position: 220% center; } }
.nm-emblem { margin-right: .28em; font-weight: 400; -webkit-text-fill-color: initial; font-style: normal; }
.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; display: block; }
.user-avatar .av-img, .user-avatar-large .av-img { width: 1.4em; height: 1.4em; }
@media (prefers-reduced-motion: reduce) { .nm-rainbow { animation: none; } }

/* salon cards */
.salon-card { position: relative; }
.salon-card.deco-glow { border: 1.5px solid transparent !important; animation: cardGlow 3.2s ease-in-out infinite;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B, #8B5CF6) border-box !important; }
@keyframes cardGlow { 0%,100% { box-shadow: 0 0 0 rgba(139,92,246,0), 0 6px 18px rgba(139,92,246,.18); }
                      50% { box-shadow: 0 0 22px rgba(236,72,153,.35), 0 6px 22px rgba(139,92,246,.28); } }
body.dark-mode .salon-card.deco-glow { background: linear-gradient(#1A1A1A, #1A1A1A) padding-box, linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B, #8B5CF6) border-box !important; }
.featured-badge { position: absolute; top: .7rem; left: .7rem; z-index: 6; font-size: .62rem; font-weight: 600; letter-spacing: .06em;
                  padding: .25rem .6rem; border-radius: 999px !important; color: #fff; background: linear-gradient(135deg, #F59E0B, #EC4899);
                  box-shadow: 0 3px 10px rgba(236,72,153,.35); }
.card-sticker { position: absolute; top: .6rem; right: .6rem; z-index: 6; width: 34px; height: 34px; border-radius: 50% !important;
                background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.18); display: flex; align-items: center;
                justify-content: center; font-size: 1.15rem; overflow: hidden; }
.salon-card .card-img .badge { top: 3.2rem; }

/* reviews */
.reviewer-name { display: flex; align-items: center; gap: .45rem; }
.rv-av { width: 26px; height: 26px; border-radius: 50% !important; background: rgba(124,58,237,.1); display: inline-flex;
         align-items: center; justify-content: center; font-size: .9rem; flex: none; overflow: hidden; }
.review-item.rv-frame { border: 1.5px solid transparent !important; border-radius: 14px !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B) border-box !important; }
body.dark-mode .review-item.rv-frame { background: linear-gradient(#1C1C1C, #1C1C1C) padding-box, linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B) border-box !important; }
.review-item.rv-banner { position: relative; overflow: hidden; padding-top: 1.3rem; }
.review-item.rv-banner::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, #F97316, #EC4899, #8B5CF6); }

/* profile */
.profile-summary-card.has-banner { position: relative; overflow: hidden; padding-top: 2.4rem !important; }
.profile-summary-card.has-banner::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.6rem;
  background: linear-gradient(90deg, #F97316, #EC4899, #8B5CF6); }
.profile-summary-avatar { overflow: hidden; }
.avatar-option.gift { position: relative; }
.avatar-option.gift::after { content: ''; position: absolute; inset: -4px; border-radius: 50% !important; border: 2px solid #F59E0B; pointer-events: none; }
.avatar-gift-note { font-size: .72rem; color: var(--s0-text2); margin: -.2rem 0 .8rem; }

/* XP card */
.xp-wrap { margin: 0 0 1.1rem; }
.xp-card { border-radius: 18px !important; padding: 1rem 1.1rem .9rem; color: #1F1F1F;
           background: linear-gradient(160deg, #F7F3FF, #FFF5FA); border: 1px solid rgba(124,58,237,.14); }
.xp-card.can-open { box-shadow: 0 0 0 2px rgba(236,72,153,.25), 0 10px 26px rgba(236,72,153,.16); }
.xp-loading { font-size: .82rem; color: #8A8A96; }
.xp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.xp-season { font-size: .92rem; font-weight: 600; color: #3B2A6B; }
.xp-left { font-size: .72rem; color: #8A8A96; margin-top: .15rem; }
.xp-rank { font-size: 1.25rem; font-weight: 700; color: #7C3AED; line-height: 1; }
.xp-rank small { font-size: .7rem; color: #9CA3AF; font-weight: 500; }
.xp-bar { display: flex; align-items: center; gap: .45rem; margin: .8rem 0 .45rem; }
.xp-segs { flex: 1; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; align-items: center; }
.xp-segs i { height: 3px; border-radius: 2px !important; background: #D9D6E3; transition: .3s; }
.xp-segs i.on { height: 14px; border-radius: 3px !important; background: linear-gradient(180deg, #A78BFA, #7C3AED);
                box-shadow: 0 1px 3px rgba(124,58,237,.35); animation: xpFill .45s calc(var(--i) * 30ms) both; }
.xp-bar.full .xp-segs i.on { background: linear-gradient(180deg, #F9A8D4, #EC4899); }
@keyframes xpFill { from { transform: scaleY(.2); opacity: 0; } }
.xp-gift { font-size: 1.55rem; line-height: 1; filter: grayscale(.85) opacity(.55); transition: .3s; }
.xp-gift.ready { filter: none; animation: giftBounce 1.1s ease-in-out infinite; }
.xp-gift.done { filter: none; }
@keyframes giftBounce { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-5px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
.xp-nums { font-size: .8rem; color: #6B7280; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.xp-nums b { color: #1F1F1F; font-size: .95rem; }
.xp-nums b.neg { color: #DC2626; }
.xp-tag { font-size: .68rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px !important; background: #EDE9FE; color: #6D28D9; }
.xp-tag.boost { background: #FEF3C7; color: #B45309; }
.xp-open-btn { width: 100%; margin: .8rem 0 .3rem; height: 46px; border: none; border-radius: 14px !important; cursor: pointer; color: #fff;
               font-size: .95rem; font-weight: 700; background: linear-gradient(135deg, #8B5CF6, #EC4899);
               box-shadow: 0 8px 20px rgba(236,72,153,.32); animation: xpPulse 1.8s ease-in-out infinite; }
.xp-open-btn span { display: inline-block; animation: giftBounce 1.1s ease-in-out infinite; }
@keyframes xpPulse { 50% { transform: scale(1.02); box-shadow: 0 10px 26px rgba(236,72,153,.45); } }
.xp-need { font-size: .8rem; color: #4B5563; margin: .55rem 0 .2rem; }
.xp-need b { color: #7C3AED; }
.xp-negnote { color: #DC2626; font-size: .72rem; }
.xp-opened { display: flex; align-items: center; gap: .7rem; margin: .7rem 0 .2rem; padding: .6rem .7rem; border-radius: 12px !important;
             background: rgba(255,255,255,.75); font-size: .8rem; color: #374151; }
.xp-opened small { display: block; color: #8A8A96; font-size: .7rem; margin-top: .1rem; }
.xp-opened-ic { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.xp-opened-ic .pz-big { font-size: 1.6rem; } .xp-opened-ic .pz-text { font-size: .95rem; }
.xp-opened-ic .pz-name { font-size: .7rem; } .xp-opened-ic .pz-frame, .xp-opened-ic .pz-banner, .xp-opened-ic .pz-glow { transform: scale(.45); }
.xp-rule { font-size: .7rem; color: #8A8A96; line-height: 1.5; margin-top: .45rem; }
.xp-tabs { display: flex; gap: .4rem; margin-top: .7rem; }
.xp-tabs button { flex: 1; height: 34px; border: 1px solid rgba(124,58,237,.2); background: rgba(255,255,255,.7); color: #5B21B6;
                  border-radius: 10px !important; font-size: .76rem; font-weight: 600; cursor: pointer; }
.xp-tabs button.on { background: #7C3AED; color: #fff; border-color: #7C3AED; }
.xp-panel:empty { display: none; }
.xp-panel { margin-top: .7rem; }
.xp-empty { font-size: .8rem; color: #8A8A96; text-align: center; padding: .8rem 0; }
.xp-hist { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.xp-hrow { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: 8px !important; background: rgba(255,255,255,.65); }
.xp-hamt { width: 48px; flex: none; font-weight: 700; font-size: .85rem; text-align: right; }
.xp-hamt.pos { color: #059669; } .xp-hamt.neg { color: #DC2626; }
.xp-hnote { flex: 1; min-width: 0; font-size: .76rem; color: #374151; }
.xp-hnote small { display: block; color: #8A8A96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-hdate { font-size: .68rem; color: #9CA3AF; }
.rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.rw-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .7rem .5rem;
           border-radius: 14px !important; background: rgba(255,255,255,.8); border: 1.5px solid transparent; }
.rw-item.on { border-color: #A78BFA; background: #fff; }
.rw-item.coupon.used, .rw-item.coupon.expired { opacity: .5; }
.rw-prev { min-height: 48px; display: flex; align-items: center; justify-content: center; }
.rw-meta b { display: block; font-size: .78rem; color: #1F1F1F; }
.rw-meta small { display: block; font-size: .66rem; color: #8A8A96; line-height: 1.35; }
.rw-btn { height: 28px; padding: 0 .9rem; border-radius: 14px !important; border: 1px solid #C4B5FD; background: #fff; color: #6D28D9;
          font-size: .72rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; }
.rw-btn.on { background: #EDE9FE; border-color: #EDE9FE; }
.pz-big { font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.pz-big .av-img { width: 2rem; height: 2rem; }
.pz-text { font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, #F59E0B, #EC4899); -webkit-background-clip: text;
           background-clip: text; -webkit-text-fill-color: transparent; }
.pz-name { font-size: 1rem; }
.pz-frame { font-size: .6rem; line-height: 1.4; padding: .35rem .6rem; border: 1.5px solid transparent; border-radius: 10px !important;
            background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B) border-box; color: #6B7280; }
.pz-frame div:first-child { color: #F59E0B; }
.pz-banner { width: 90px; height: 34px; border-radius: 8px !important; background: linear-gradient(90deg, #F97316, #EC4899, #8B5CF6); }
.pz-glow { font-size: .72rem; font-weight: 600; padding: .45rem .7rem; border-radius: 10px !important; color: #6D28D9;
           border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B) border-box;
           box-shadow: 0 0 16px rgba(236,72,153,.35); }
body.dark-mode .xp-card { background: linear-gradient(160deg, rgba(124,58,237,.16), rgba(236,72,153,.08)); border-color: rgba(167,139,250,.25); color: #F0F0F0; }
body.dark-mode .xp-season { color: #E9E3FF !important; }
body.dark-mode .xp-nums b { color: #F0F0F0 !important; }
body.dark-mode .xp-segs i { background: #3A3A44; }
body.dark-mode .xp-opened, body.dark-mode .xp-hrow, body.dark-mode .rw-item { background: rgba(255,255,255,.05); color: #E5E5E5; }
body.dark-mode .rw-item.on { background: rgba(167,139,250,.12); }
body.dark-mode .rw-meta b, body.dark-mode .xp-hnote { color: #F0F0F0 !important; }
body.dark-mode .xp-need { color: #D1D5DB !important; }
body.dark-mode .xp-tabs button { background: rgba(255,255,255,.05); color: #C4B5FD; border-color: rgba(167,139,250,.3); }
body.dark-mode .xp-tabs button.on { background: #7C3AED; color: #fff; }

/* gift box */
.gift-ov { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
           background: radial-gradient(circle at 50% 45%, rgba(76,29,149,.92), rgba(17,10,34,.96)); transition: opacity .3s; }
.gift-ov.open { opacity: 1; pointer-events: auto; }
.gift-x { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50% !important; border: none; cursor: pointer;
          background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; }
.gift-stage { position: relative; width: min(360px, 92vw); height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gift-rays { position: absolute; left: 50%; top: 46%; width: 620px; height: 620px; margin: -310px 0 0 -310px; opacity: 0; pointer-events: none;
             background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 9deg, transparent 9deg 22deg); border-radius: 50% !important;
             -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
.gift-ov.opened .gift-rays { opacity: 1; animation: raysSpin 14s linear infinite, raysIn .5s ease-out; }
.gift-ov.r-legendary .gift-rays { background: repeating-conic-gradient(from 0deg, rgba(253,230,138,.35) 0 9deg, transparent 9deg 22deg); }
.gift-ov.r-epic .gift-rays { background: repeating-conic-gradient(from 0deg, rgba(249,168,212,.3) 0 9deg, transparent 9deg 22deg); }
@keyframes raysSpin { to { transform: rotate(360deg); } }
@keyframes raysIn { from { transform: scale(.3); opacity: 0; } }
.gift-box { position: relative; width: 150px; height: 150px; border: none; background: none; cursor: pointer; padding: 0; margin-top: 60px;
            border-radius: 0 !important; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.gift-ov.ready .gift-box { animation: giftDrop .7s cubic-bezier(.2,1.4,.4,1) both, giftIdle 1.6s ease-in-out .8s infinite; }
@keyframes giftDrop { from { transform: translateY(-260px) scale(.6); opacity: 0; } }
@keyframes giftIdle { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(-3deg); } 60% { transform: translateY(0) rotate(3deg); } }
.gift-body { position: absolute; left: 12px; right: 12px; bottom: 0; height: 96px; border-radius: 10px !important;
             background: linear-gradient(135deg, #8B5CF6, #7C3AED 55%, #6D28D9); }
.gift-ribbon { position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; margin-left: -11px; border-radius: 0 !important;
               background: linear-gradient(90deg, #F9A8D4, #EC4899 50%, #F9A8D4); }
.gift-lid { position: absolute; left: 0; right: 0; top: 30px; height: 34px; border-radius: 9px !important; z-index: 2;
            background: linear-gradient(135deg, #A78BFA, #8B5CF6); box-shadow: 0 4px 0 rgba(0,0,0,.12); transition: transform .55s cubic-bezier(.3,1.5,.5,1), opacity .5s; }
.gift-lid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 22px; margin-left: -11px; border-radius: 0 !important;
                    background: linear-gradient(90deg, #F9A8D4, #EC4899 50%, #F9A8D4); }
.gift-bow { position: absolute; left: 50%; top: -26px; width: 64px; height: 30px; margin-left: -32px; }
.gift-bow::before, .gift-bow::after { content: ''; position: absolute; top: 0; width: 30px; height: 26px; border: 7px solid #EC4899;
                                      border-radius: 50% 50% 8px 50% !important; }
.gift-bow::before { left: 0; transform: rotate(-20deg); } .gift-bow::after { right: 0; transform: scaleX(-1) rotate(-20deg); }
.gift-ov.shake .gift-box { animation: giftShake .45s ease-in-out infinite; }
@keyframes giftShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-9deg) translateY(-3px); } 40% { transform: rotate(8deg); }
                       60% { transform: rotate(-6deg) translateY(-2px); } 80% { transform: rotate(5deg); } }
.gift-ov.opened .gift-lid { transform: translateY(-150px) rotate(-28deg); opacity: 0; }
.gift-ov.opened .gift-box { animation: giftPop .5s ease-out forwards; }
@keyframes giftPop { 30% { transform: scale(1.12); } 100% { transform: scale(.9) translateY(40px); opacity: 0; } }
.gift-hint { position: relative; margin-top: 1.6rem; color: #E9E3FF; font-size: .95rem; font-weight: 500; min-height: 1.4em; text-align: center; }
.gift-confetti { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.gift-confetti i { position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: 0; }
.gift-ov.opened .gift-confetti i { animation: confetti 1.5s cubic-bezier(.15,.75,.35,1) var(--d) forwards; }
@keyframes confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; }
                      75% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 120px)) rotate(var(--r)); opacity: 0; } }
.gift-prize { position: absolute; left: 50%; top: 50%; width: min(320px, 88vw); transform: translate(-50%, -50%) scale(.3); opacity: 0;
              background: #fff; border-radius: 22px !important; padding: 1.4rem 1.2rem 1.2rem; text-align: center; color: #1F1F1F;
              box-shadow: 0 0 0 3px rgba(167,139,250,.7), 0 0 50px rgba(167,139,250,.55), 0 20px 50px rgba(0,0,0,.4); pointer-events: none; }
.gift-ov.show-prize .gift-prize { animation: prizeIn .6s cubic-bezier(.2,1.5,.4,1) forwards; pointer-events: auto; }
@keyframes prizeIn { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.gift-ov.r-rare .gift-prize { box-shadow: 0 0 0 3px rgba(14,165,233,.7), 0 0 50px rgba(14,165,233,.5), 0 20px 50px rgba(0,0,0,.4); }
.gift-ov.r-epic .gift-prize { box-shadow: 0 0 0 3px rgba(236,72,153,.75), 0 0 55px rgba(236,72,153,.55), 0 20px 50px rgba(0,0,0,.4); }
.gift-ov.r-legendary .gift-prize { box-shadow: 0 0 0 3px rgba(245,158,11,.85), 0 0 60px rgba(245,158,11,.6), 0 20px 50px rgba(0,0,0,.4); }
.gp-rarity { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .7rem;
             border-radius: 999px !important; background: #EDE9FE; color: #6D28D9; }
.gift-ov.r-rare .gp-rarity { background: #E0F2FE; color: #0369A1; }
.gift-ov.r-epic .gp-rarity { background: #FCE7F3; color: #BE185D; }
.gift-ov.r-legendary .gp-rarity { background: #FEF3C7; color: #B45309; }
.gp-visual { min-height: 90px; display: flex; align-items: center; justify-content: center; margin: .8rem 0 .4rem; }
.gp-visual .pz-big { font-size: 4rem; } .gp-visual .pz-big .av-img { width: 4rem; height: 4rem; }
.gp-visual .pz-text { font-size: 3.2rem; } .gp-visual .pz-name { font-size: 1.7rem; }
.gp-visual .pz-banner { width: 180px; height: 56px; } .gp-visual .pz-frame, .gp-visual .pz-glow { transform: scale(1.3); }
.gp-title { font-size: 1.25rem; font-weight: 700; } .gp-title span { font-weight: 500; color: #7C3AED; }
.gp-desc { font-size: .85rem; color: #4B5563; margin-top: .35rem; line-height: 1.5; }
.gp-until { font-size: .74rem; color: #8A8A96; margin-top: .35rem; }
.gp-ok { margin-top: 1rem; height: 44px; padding: 0 2rem; border: none; border-radius: 22px !important; cursor: pointer; color: #fff;
         font-weight: 700; background: linear-gradient(135deg, #8B5CF6, #EC4899); }
@media (prefers-reduced-motion: reduce) {
  .gift-ov.ready .gift-box, .gift-ov.shake .gift-box, .gift-ov.opened .gift-rays, .xp-open-btn, .xp-gift.ready, .salon-card.deco-glow { animation: none !important; }
}

/* coupon picker in the booking receipt */
.rc-coupons { margin: .6rem 0 .2rem; padding: .7rem; border-radius: 12px !important; background: linear-gradient(135deg, #FFF7ED, #FDF2F8); border: 1px dashed #F9A8D4; }
.rc-cp-title { font-size: .76rem; font-weight: 600; color: #9D174D; margin-bottom: .45rem; }
.rc-cp-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.rc-cp-list button { border: 1px solid #F9A8D4; background: #fff; color: #9D174D; border-radius: 10px !important; padding: .35rem .7rem;
                     font-size: .8rem; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.rc-cp-list button small { font-size: .58rem; font-weight: 400; color: #BE7A9A; }
.rc-cp-list button.on { background: #EC4899; color: #fff; border-color: #EC4899; }
.rc-cp-list button.on small { color: #FCE7F3; }
.rc-cp-note { font-size: .66rem; color: #A16B85; margin-top: .4rem; }
.rt-old { color: #9CA3AF; font-weight: 400; font-size: .85em; }
.receipt-xp { font-size: .74rem; color: #7C3AED; text-align: right; margin: -.2rem 0 .5rem; font-weight: 600; }
body.dark-mode .rc-coupons { background: rgba(236,72,153,.08); }
.bhi-disc { font-size: .66rem; color: #B06000; background: #FEF7E0; padding: .08rem .4rem; border-radius: 6px !important; font-weight: 600; }
.bhi-xp { font-size: .7rem; color: #7C3AED; font-weight: 600; }
.bhi-xp.neg { color: #DC2626; margin-top: .15rem; }

/* salon Купон tab: join the gift-coupon programme · Түрээс coupon badge */
.xpc-card { display: flex; align-items: flex-start; gap: .9rem; padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 14px !important;
            background: linear-gradient(135deg, #F7F3FF, #FFF5FA); border: 1px solid rgba(124,58,237,.18); }
.xpc-card.on { border-color: #A78BFA; box-shadow: 0 0 0 2px rgba(167,139,250,.25); }
.xpc-ic { font-size: 1.8rem; line-height: 1; }
.xpc-txt { flex: 1; font-size: .8rem; color: #374151; }
.xpc-txt b { color: #1F1F1F; }
.xpc-txt p { margin-top: .25rem; line-height: 1.5; color: #6B7280; }
.xpc-card .toggle-switch { flex: none; }
.bill-coupon { margin-top: .6rem; padding: .5rem .7rem; border-radius: 10px !important; background: #FEF3C7; color: #92400E; font-size: .78rem; font-weight: 500; }
.bill-coupon-mini { font-size: .72rem; font-weight: 700; color: #B45309; background: #FEF3C7; padding: .1rem .45rem; border-radius: 8px !important; }

/* super admin — XP & Бэлэг */
.sx-card h4 { font-size: 1rem; color: #E8DDD0 !important; margin-bottom: .8rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sx-card h4 small { font-size: .72rem; color: #8a7a72; font-weight: 400; }
.sx-card h5 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #C4B5FD; margin: .2rem 0 .5rem; }
.sx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .8rem; }
.sx-stats div { background: rgba(255,255,255,.05); border-radius: 10px !important; padding: .6rem; text-align: center; }
.sx-stats b { display: block; font-size: 1.2rem; color: #fff; }
.sx-stats small { font-size: .66rem; color: #8a7a72; }
.sx-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.sx-pill { font-size: .7rem; padding: .2rem .6rem; border-radius: 999px !important; background: rgba(167,139,250,.15); color: #DDD6FE; }
.sx-muted { font-size: .72rem; color: #8a7a72; margin: .3rem 0; }
.sx-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sx-top { display: flex; gap: .5rem; font-size: .78rem; padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.sx-top span { color: #8a7a72; width: 18px; } .sx-top b { flex: 1; color: #E8DDD0; font-weight: 500; } .sx-top em { color: #C4B5FD; font-style: normal; }
.sx-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem .8rem; margin-bottom: .6rem; }
.sx-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .7rem; color: #a89a90; }
.sx-form input, .sx-form select, .sx-chances input, .sx-add input, .sx-add select { background: rgba(255,255,255,.07); color: #F0E6DA;
  border: 1px solid rgba(196,146,74,.25); border-radius: 8px !important; padding: .5rem .6rem; font-size: .85rem; }
.sx-form select option, .sx-add select option { background: #1a1008; }
.sx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sx-chances { display: flex; flex-direction: column; gap: .3rem; }
.sx-chances label { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: #E8DDD0; }
.sx-chances label span { flex: 1; }
.sx-chances input { width: 74px; text-align: right; }
.sx-chances em { color: #8a7a72; font-style: normal; font-size: .75rem; }
.sx-total { font-size: .78rem; font-weight: 600; color: #6EE7B7; margin-top: .3rem; text-align: right; }
.sx-total.bad { color: #FCA5A5; }
.sx-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.sx-item { background: rgba(255,255,255,.96); border-radius: 12px !important; padding: .6rem; text-align: center; color: #1F1F1F; }
.sx-item.off { opacity: .45; }
.sx-prev { min-height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.sx-prev.big { font-size: 1.8rem; } .sx-prev .av-img { width: 2rem; height: 2rem; }
.sx-iname { font-size: .74rem; font-weight: 600; margin: .3rem 0; }
.sx-iname small { display: block; font-weight: 400; color: #8A8A96; font-size: .64rem; }
.sx-iact { display: flex; gap: .3rem; justify-content: center; }
.sx-iact button { font-size: .66rem; padding: .2rem .5rem; border-radius: 8px !important; border: 1px solid #C4B5FD; background: #fff; color: #6D28D9; cursor: pointer; }
.sx-iact button.del { border-color: #FCA5A5; color: #DC2626; }
.sx-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: rgba(255,255,255,.04); border-radius: 12px !important; padding: .7rem; }
.sx-add input[type=color] { width: 40px; height: 36px; padding: 2px; }
.sx-add > .sx-prev { background: #fff; border-radius: 8px !important; padding: .2rem .8rem; min-width: 90px; }
.sx-add button { padding: .5rem 1rem; border: none; border-radius: 8px !important; background: var(--gold); color: #fff; font-weight: 600; cursor: pointer; }
.sx-upload { font-size: .75rem; color: #C4B5FD; border: 1px dashed rgba(196,181,253,.5); border-radius: 8px !important; padding: .45rem .7rem; cursor: pointer; }
.sx-upload input { display: none; }
@media (max-width: 640px) { .sx-stats { grid-template-columns: 1fr 1fr; } .sx-two, .sx-tops { grid-template-columns: 1fr; } }
.xp-wait { margin: .7rem 0 .2rem; padding: .6rem .75rem; border-radius: 12px !important; background: #FEF3C7; color: #92400E; font-size: .8rem; font-weight: 500; }
.xp-wait small { display: block; font-weight: 400; color: #B45309; font-size: .7rem; margin-top: .15rem; }
body.dark-mode .xp-wait { background: rgba(245,158,11,.14); color: #FCD34D !important; }

/* ═══════════════════════════════════════════════════════════
   v29 — Үйлчилгээний нөхцөл · салоны гэрээ · урьдчилгаа (QPay)
═══════════════════════════════════════════════════════════ */
/* signup checkbox */
.terms-row { display: flex; align-items: flex-start; gap: .55rem; font-size: .8rem; line-height: 1.45; color: var(--s0-text2); margin: .1rem 0 .2rem; text-align: left; }
.terms-row input { width: 18px !important; height: 18px; min-width: 18px; margin-top: 1px; padding: 0 !important; accent-color: #7C3AED; cursor: pointer; }
.terms-row label { cursor: pointer; font-weight: 400; }
.terms-row a { color: #7C3AED; font-weight: 600; text-decoration: underline; cursor: pointer; }
.terms-row.bad { color: #C62828; animation: termsShake .35s; }
.terms-row.bad input { outline: 2px solid #E53935; outline-offset: 1px; }
@keyframes termsShake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
body.dark-mode .terms-row { color: #BDBDBD; }

/* reader / gate / contract */
.legal-overlay { position: fixed; inset: 0; z-index: 2200; background: rgba(12,10,20,.62); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px; }
.legal-overlay.open { display: flex; }
.legal-box { background: #fff; color: #111; width: min(660px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  border-radius: 20px !important; box-shadow: 0 24px 70px rgba(0,0,0,.3); overflow: hidden; }
.legal-head { display: flex; justify-content: space-between; gap: .8rem; padding: 1.1rem 1.3rem .7rem; border-bottom: 1px solid rgba(0,0,0,.07); }
.legal-kicker { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7C3AED; font-weight: 600; }
.legal-head h3 { font-family: var(--font-s); font-size: 1.35rem; line-height: 1.2; margin: .15rem 0; color: #111 !important; }
.legal-meta { font-size: .72rem; color: #888; }
.legal-x { background: #F3F4F6; border: none; width: 34px; height: 34px; min-width: 34px; border-radius: 50% !important; font-size: 1.15rem; cursor: pointer; color: #444; }
.legal-intro { margin: .8rem 1.3rem 0; padding: .7rem .85rem; background: #F5F3FF; border: 1px solid rgba(124,58,237,.18); border-radius: 12px !important; font-size: .82rem; line-height: 1.5; color: #3B2A6B; }
.legal-body { flex: 1; overflow-y: auto; padding: .9rem 1.3rem 1rem; font-size: .86rem; line-height: 1.65; color: #222; min-height: 120px; overscroll-behavior: contain; }
.legal-body p { margin: 0 0 .7rem; font-weight: 400; }
.legal-body h4 { font-size: .95rem; margin: 1rem 0 .35rem; color: #111; font-weight: 700; }
.legal-foot { padding: .8rem 1.3rem 1rem; border-top: 1px solid rgba(0,0,0,.07); background: #FCFCFD; text-align: center; }
.legal-foot .receipt-continue { margin-top: .4rem; }
.lg-sign { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; text-align: left; }
.lg-sign label { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; color: #555; font-weight: 500; }
.lg-sign small { color: #999; font-weight: 400; }
.lg-sign input { width: 100%; min-width: 0; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid rgba(0,0,0,.18); border-radius: 10px !important; font-size: .9rem; font-family: inherit; color: #111; background: #fff; }
.lg-sign input:focus { outline: 2px solid rgba(124,58,237,.35); border-color: #7C3AED; }
.lg-agree { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .85rem; cursor: pointer; color: #222; }
.lg-agree input { width: 18px; height: 18px; accent-color: #7C3AED; }
.legal-foot .field-error { min-height: 1em; margin: .3rem 0 0; }
@media (max-width: 560px) {
  .legal-overlay { padding: 0; align-items: flex-end; }
  .legal-box { border-radius: 20px 20px 0 0 !important; max-height: 94dvh; }
  .lg-sign { grid-template-columns: 1fr; }
}
body.dark-mode .legal-box { background: #1A1A1A; color: #EEE; }
body.dark-mode .legal-head h3, body.dark-mode .legal-body h4, body.dark-mode .lg-agree { color: #F2F2F2 !important; }
body.dark-mode .legal-body { color: #DDD; }
body.dark-mode .legal-foot { background: #151515; border-color: rgba(255,255,255,.08); }
body.dark-mode .legal-head { border-color: rgba(255,255,255,.08); }
body.dark-mode .legal-intro { background: rgba(124,58,237,.15); color: #DDD6FE; }
body.dark-mode .lg-sign input { background: #252525; color: #EEE; border-color: rgba(255,255,255,.14); }
body.dark-mode .legal-x { background: #2A2A2A; color: #DDD; }

/* booking receipt */
.receipt-dep { margin-top: .7rem; padding: .65rem .75rem; border-radius: 12px !important; background: #F5F3FF; border: 1px solid rgba(124,58,237,.16); }
.rd-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .86rem; }
.rd-row b { color: #7C3AED; font-size: 1rem; }
.rd-row small { color: #8B7FB0; font-size: .7rem; margin-left: .2rem; }
.rd-row.sub { font-size: .78rem; color: #555; margin-top: .25rem; }
.receipt-xp small { color: #9CA3AF; font-weight: 400; }
.receipt-dep-note { font-size: .7rem; color: #888; line-height: 1.45; margin-top: .45rem; text-align: center; }
body.dark-mode .receipt-dep { background: rgba(124,58,237,.14); border-color: rgba(167,139,250,.25); }
body.dark-mode .rd-row.sub { color: #BBB; }

/* QPay window */
.dn-rest { font-size: .8rem; color: #666; }
.dep-what { font-size: .8rem; color: #666; margin: -.6rem 0 .6rem; }
.dep-clock { display: inline-block; font-size: .8rem; font-weight: 600; color: #B45309; background: #FEF3C7; border-radius: 999px !important; padding: .25rem .75rem; margin-bottom: .7rem; font-variant-numeric: tabular-nums; }
.dep-done { padding: .4rem 0 .2rem; }
.dep-done-ic { font-size: 2.4rem; margin-bottom: .4rem; }
.dep-done-txt { font-size: .9rem; line-height: 1.55; color: #222; margin-bottom: .6rem; }

/* my bookings */
.booking-history-item.past { opacity: .62; }
.booking-history-item.past .bhi-name, .booking-history-item.past .bhi-svc { text-decoration: line-through; }
.bhi-dep { font-size: .76rem; margin-top: .35rem; color: #6B5E8F; line-height: 1.4; font-weight: 500; }
.bhi-dep.warn { color: #B45309; }
.bhi-dep.ok { color: #15803D; }
.booking-history-item.past .bhi-dep { text-decoration: none; }
.status-badge.waiting { background: rgba(245,158,11,.16); color: #B45309; }
.reorder-btn.pay { background: #7C3AED; color: #fff !important; border-color: #7C3AED !important; }
.bk-refund { margin-top: .55rem; padding: .6rem; border-radius: 12px !important; background: #FFF7ED; border: 1px solid #FED7AA; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.booking-history-item.past:has(.bk-refund) { opacity: 1; }
.bkr-t { font-size: .76rem; color: #9A3412; line-height: 1.4; }
.bk-refund select, .bk-refund input { width: 100%; min-width: 0; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid rgba(0,0,0,.15); border-radius: 8px !important; font-size: .82rem; font-family: inherit; background: #fff; color: #111; }
.bk-refund .reorder-btn { width: 100%; }
body.dark-mode .bk-refund { background: rgba(251,146,60,.1); border-color: rgba(251,146,60,.3); }
body.dark-mode .bk-refund select, body.dark-mode .bk-refund input { background: #252525; color: #EEE; }

/* salon: service deposit picker + calendar tab badge */
.svc-dep { display: flex; align-items: center; gap: .35rem; font-size: .68rem; color: #7C3AED; margin-top: .3rem; }
.svc-dep select { font-size: .7rem; padding: .1rem .3rem; border: 1px solid rgba(124,58,237,.3); border-radius: 6px !important; background: #fff; color: #333; max-width: 120px; }
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: .35rem;
  border-radius: 999px !important; background: #E53935; color: #fff; font-size: .66rem; font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: 1px; }

/* salon calendar: waiting for confirmation / payment */
.gc-ev.pending { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, #fff) 0 7px, #fff 7px 14px) !important;
  color: #1F1F1F !important; border: 2px dashed var(--c) !important; }
.gc-ev.unpaid { opacity: .55; background: color-mix(in srgb, var(--c) 12%, #fff) !important; color: #444 !important; border: 1px dashed #9AA0A6 !important; }
.gc-ev-tag.pend { background: #F59E0B !important; color: #fff !important; }
.gc-ev-tag.wait { background: #9AA0A6 !important; color: #fff !important; }
.gc-mchip.pending { outline: 1.5px dashed #F59E0B; }
.gc-mchip.unpaid { opacity: .5; }
.gc-ast.st-Pending, .gcs-status.st-Pending { color: #B45309 !important; font-weight: 600; }
.gc-ast.st-PendingPayment, .gcs-status.st-PendingPayment { color: #80868B !important; }
.gcs-confirm { margin: .5rem 0 .2rem; }
.gcs-deadline { font-size: .78rem; line-height: 1.45; color: #92400E; background: #FEF3C7; border-radius: 10px !important; padding: .55rem .7rem; margin-bottom: .55rem; }

/* salon: income (Төлбөр tab) */
.inc-contract { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; font-size: .8rem; padding: .6rem .8rem; border-radius: 12px !important;
  background: #FEF2F2; color: #991B1B; margin-bottom: .8rem; }
.inc-contract.ok { background: #F0FDF4; color: #166534; }
.inc-contract a { font-weight: 600; text-decoration: underline; cursor: pointer; color: inherit; }
.inc-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .6rem; margin-bottom: .9rem; }
.inc-tile { border: 1px solid rgba(0,0,0,.08); border-radius: 14px !important; padding: .75rem .85rem; background: #fff; display: flex; flex-direction: column; gap: .15rem; }
.inc-tile span { font-size: .72rem; color: #777; }
.inc-tile b { font-size: 1.25rem; color: #111; font-variant-numeric: tabular-nums; }
.inc-tile b.neg { color: #C62828; }
.inc-tile small { font-size: .7rem; color: #888; line-height: 1.35; }
.inc-tile small a { color: #7C3AED; cursor: pointer; font-weight: 600; }
.inc-tile.main { background: linear-gradient(135deg, #F5F3FF, #FDF2F8); border-color: rgba(124,58,237,.2); }
.inc-tile.main b { color: #6D28D9; font-size: 1.45rem; }
.inc-tile.hot { border-color: #F59E0B; background: #FFFBEB; }
.inc-tile.hot b { color: #B45309; }
.inc-acct { display: none; gap: .5rem; margin-top: .8rem; grid-template-columns: 1fr 1fr; }
.inc-acct.open { display: grid; }
.inc-acct select, .inc-acct input { width: 100%; min-width: 0; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid rgba(0,0,0,.15); border-radius: 10px !important; font-size: .85rem; font-family: inherit; }
.inc-acct .admin-save-btn { grid-column: 1 / -1; }
.inc-note { grid-column: 1 / -1; font-size: .7rem; color: #888; }
.inc-auto { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.inc-auto .toggle-switch { margin-top: 0; flex-shrink: 0; }
.inc-ledger { margin: .3rem 0 .6rem; }
.inc-ledger summary { font-size: .8rem; color: #7C3AED; cursor: pointer; padding: .4rem 0; font-weight: 500; }
.inc-ledger .bill-hist span small { display: block; font-size: .68rem; color: #999; margin-top: 1px; }
.bill-hist strong.neg { color: #C62828; } .bill-hist strong.pos { color: #15803D; }
@media (max-width: 640px) {
  .inc-grid { grid-template-columns: 1fr 1fr; }
  .inc-tile.main { grid-column: 1 / -1; }
  .inc-acct { grid-template-columns: 1fr; }
  .inc-auto { flex-direction: column; align-items: flex-start; }
}

/* super admin: Нөхцөл & Гэрээ */
.sl-intro { font-size: .76rem; color: #a89a90; margin-bottom: .9rem; line-height: 1.5; }
.sl-card { padding: 1rem 1.1rem !important; }
.sl-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.sl-head h4 { margin: 0 !important; font-size: 1rem !important; }
.sl-ver { font-size: .7rem; padding: .2rem .6rem; border-radius: 999px !important; background: rgba(110,231,183,.14); color: #6EE7B7; white-space: nowrap; }
.sl-ver.off { background: rgba(252,165,165,.14); color: #FCA5A5; }
.sl-stat { font-size: .76rem; color: #a89a90; margin-bottom: .7rem; }
.sl-stat b { color: #F0E6DA; }
.sl-title, .sl-body { width: 100%; background: rgba(255,255,255,.07); color: #F0E6DA; border: 1px solid rgba(196,146,74,.25);
  border-radius: 8px !important; padding: .55rem .7rem; font-size: .85rem; font-family: var(--font-b); margin-bottom: .45rem; }
.sl-body { min-height: 220px; resize: vertical; line-height: 1.55; font-size: .82rem; }
.sl-hint { font-size: .68rem; color: #8a7a72; margin-bottom: .5rem; }
.sl-re { display: flex; align-items: flex-start; gap: .45rem; font-size: .76rem; color: #E8DDD0; margin-bottom: .6rem; cursor: pointer; }
.sl-re small { color: #8a7a72; }
.sl-re input { margin-top: 2px; accent-color: #A78BFA; }
.sl-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sl-hist { margin-top: .7rem; font-size: .74rem; color: #a89a90; }
.sl-hist summary { cursor: pointer; color: #C4B5FD; margin-bottom: .3rem; }
.sl-hist div { padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.sl-hist a { color: #C4B5FD; cursor: pointer; margin-left: .3rem; }
.sl-sigs { display: grid; gap: .4rem; max-height: 340px; overflow-y: auto; }
.sl-sig { font-size: .76rem; color: #E8DDD0; padding: .45rem .6rem; background: rgba(255,255,255,.04); border-radius: 8px !important; }
.sl-sig small { color: #8a7a72; }

/* super admin: Урьдчилгаа */
.sd-card { padding: 1rem 1.1rem !important; }
.sd-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.sd-head h4 { margin: 0 !important; font-size: 1rem !important; }
.sd-state { font-size: .7rem; padding: .2rem .65rem; border-radius: 999px !important; background: rgba(252,165,165,.14); color: #FCA5A5; }
.sd-state.on { background: rgba(110,231,183,.14); color: #6EE7B7; }
.sd-warn { font-size: .76rem !important; color: #FCD34D !important; background: rgba(245,158,11,.1); padding: .55rem .7rem; border-radius: 8px !important; margin-bottom: .7rem; line-height: 1.5; }
.sd-toggle { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #F0E6DA; margin-bottom: .7rem; cursor: pointer; }
.sd-toggle input { width: 18px; height: 18px; accent-color: #6EE7B7; }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem .7rem; margin-bottom: .7rem; }
.sd-f { display: flex; flex-direction: column; gap: .25rem; font-size: .7rem; color: #a89a90; }
.sd-f input { background: rgba(255,255,255,.07); color: #F0E6DA; border: 1px solid rgba(196,146,74,.25); border-radius: 8px !important; padding: .45rem .55rem; font-size: .85rem; }
.sd-f small { font-size: .62rem; color: #7a6c64; line-height: 1.3; }
.sd-totals { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .8rem; font-size: .74rem; color: #a89a90; }
.sd-totals b { color: #F0E6DA; }
.sd-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.sd-main { font-size: .84rem; color: #F0E6DA; line-height: 1.45; min-width: 0; }
.sd-main small { display: block; font-size: .72rem; color: #a89a90; }
.sd-main a { color: #C4B5FD; }
.sd-err { color: #FCA5A5 !important; }
.sd-acct { color: #6EE7B7 !important; }
.sd-btns { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex-shrink: 0; }
.sd-btns button { margin: 0 !important; white-space: nowrap; }
.sd-btns button:disabled { opacity: .4; cursor: not-allowed; }
.sd-fee { font-size: .66rem; color: #a89a90; display: flex; align-items: center; gap: .3rem; }
.sd-fee input { width: 70px; background: rgba(255,255,255,.07); color: #F0E6DA; border: 1px solid rgba(196,146,74,.25); border-radius: 6px !important; padding: .2rem .35rem; font-size: .78rem; }
.sd-empty, .sd-note { font-size: .76rem !important; color: #8a7a72 !important; margin: .2rem 0 .5rem; }
.sd-mini { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; color: #CFC2B6; padding: .3rem 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.sd-st { font-style: normal; color: #a89a90; }
.sd-st.st-paid { color: #93C5FD; } .sd-st.st-earned { color: #6EE7B7; } .sd-st.st-refund_pending { color: #FCD34D; }
.sd-st.st-refunded { color: #C4B5FD; } .sd-st.st-expired, .sd-st.st-pending { color: #8a7a72; }
@media (max-width: 640px) { .sd-row { flex-direction: column; } .sd-btns { align-items: stretch; width: 100%; flex-direction: row; flex-wrap: wrap; } }
.bhi-recheck { color:#7C3AED; text-decoration:underline; cursor:pointer; font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════
   v30 — iPhone fit, profile menu, bell, bright filters, sliders,
         salon page, booking colours, maps, notifications
   ═══════════════════════════════════════════════════════════════════ */
:root { --bt-grad: linear-gradient(135deg, var(--gold) 0%, #EC4899 100%); --bt-soft: rgba(124,58,237,0.08); }

/* ── iPhone: nothing may stick out past the right edge (iOS then lets you zoom out to it),
      and inputs are ≥16px so Safari doesn't zoom in when you tap them ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.admin-overlay, .sa-overlay { overflow: hidden; }
.toast { transform: translateY(24px) !important; opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .3s !important; }
.toast.show { transform: none !important; opacity: 1; pointer-events: auto; }
@media (max-width: 700px) {
  .toast { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: none; border-radius: 14px !important; }
}
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(#gatePinInput), select, textarea { font-size: 16px !important; }
}

/* ── header: bell + avatar ── */
.nav-bell {
  position: relative; width: 38px; height: 38px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(124,58,237,0.22); background: #fff; color: var(--gold); cursor: pointer; padding: 0; flex-shrink: 0;
  transition: transform .2s, box-shadow .2s, background .2s; -webkit-tap-highlight-color: transparent;
}
.nav-bell svg { width: 21px; height: 21px; }
.nav-bell:hover { box-shadow: 0 4px 14px rgba(124,58,237,0.18); }
.nav-bell:active { transform: scale(.94); }
.nav-bell.has-new svg { animation: btRing 1.6s ease-in-out 2; transform-origin: 50% 12%; }
@keyframes btRing { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 40% { transform: rotate(-5deg); } }
.nb-badge {
  position: absolute; top: -4px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: linear-gradient(135deg, #F43F5E, #EC4899); color: #fff; font: 700 .66rem/19px var(--font-b); text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(236,72,153,0.4);
}
.nb-badge[hidden] { display: none; }
body.dark-mode .nav-bell { background: #1A1A1A; border-color: rgba(167,139,250,0.3); color: #C4B5FD; }
body.dark-mode .nb-badge { box-shadow: 0 0 0 2px #111, 0 3px 8px rgba(236,72,153,0.4); }
.user-avatar { width: 38px !important; height: 38px !important; transition: transform .2s, box-shadow .25s; position: relative; z-index: 2; -webkit-tap-highlight-color: transparent; }
.user-avatar:active { transform: scale(.94); }
.user-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(124,58,237,0.22); }
@media (max-width: 900px) {
  body.logged-in nav .theme-toggle { display: none !important; }   /* it lives in the profile menu now */
  .menu-tab { display: none !important; }
}
@media (max-width: 540px) { .nav-bell { width: 36px; height: 36px; } .user-avatar { width: 36px !important; height: 36px !important; } }

/* ── phone profile menu (opens from the profile picture) ── */
.mobile-drawer { border-radius: 0 0 22px 22px !important; box-shadow: 0 18px 40px rgba(17,17,17,0.14) !important; }
.mobile-drawer-inner { padding: 1.1rem 1.4rem 1.3rem !important; }
.md-head { display: flex; align-items: center; gap: .85rem; padding: .35rem 3.6rem .95rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.md-av { width: 48px; height: 48px; border-radius: 50%; background: var(--bt-grad); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 6px 16px rgba(124,58,237,0.25); overflow: hidden; }
.md-av img { width: 100%; height: 100%; object-fit: cover; }
.md-who { min-width: 0; }
.md-name { font-size: 1.02rem; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-mail { font-size: .78rem; color: #777; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-rows { display: flex; flex-direction: column; }
.md-rows > a, .md-setting {
  display: flex !important; align-items: center; gap: .9rem; padding: .95rem .2rem !important;
  font-size: .86rem !important; letter-spacing: .16em !important; text-transform: uppercase; color: #444 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color .2s, background .2s, padding .2s;
}
.md-rows > a:active, .md-setting:active { background: var(--bt-soft); }
.md-rows > a:hover, .md-setting:hover { color: var(--gold) !important; }
.md-ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--bt-soft); color: var(--gold); flex-shrink: 0; }
.md-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.md-lb { flex: 1; display: flex; flex-direction: column; }
.md-lb small { font-size: .62rem; letter-spacing: .08em; text-transform: none; color: #999; margin-top: .15rem; }
.md-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(135deg,#F43F5E,#EC4899); color: #fff; font: 700 .7rem/22px var(--font-b); letter-spacing: 0; text-align: center; }
.md-count[hidden] { display: none; }
.md-switch { width: 44px; height: 26px; border-radius: 999px; background: #E5E7EB; position: relative; transition: background .25s; flex-shrink: 0; }
.md-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform .25s var(--ease); }
.md-switch.on { background: var(--bt-grad); }
.md-switch.on i { transform: translateX(18px); }
.md-rows > a.md-out { color: #C2410C !important; border-bottom: none !important; }
.md-rows > a.md-out .md-ic { background: rgba(234,88,12,0.08); color: #EA580C; }
body.dark-mode .md-head { border-color: rgba(255,255,255,0.08); }
body.dark-mode .md-name { color: #F0F0F0; }
body.dark-mode .md-rows > a, body.dark-mode .md-setting { color: #D8D8D8 !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .md-ic { background: rgba(167,139,250,0.14); color: #C4B5FD; }
body.dark-mode .md-switch { background: #333; }
/* the › : waits hidden behind the profile picture; slides down into the menu with it */
.drawer-close {
  position: fixed; z-index: 495; top: calc(var(--nav-h) + 24px); right: 16px; width: 42px; height: 42px; padding: 0;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 50% !important; border: 1px solid rgba(124,58,237,0.2); background: #F5F3FF;
  box-shadow: 0 6px 16px rgba(124,58,237,0.22); -webkit-tap-highlight-color: transparent;
  opacity: 0; pointer-events: none; transform: translate(var(--dx, 0px), var(--dy, -60px)) scale(.45) rotate(-90deg);
  transition: transform .5s cubic-bezier(.22,1.25,.36,1), opacity .22s ease;
}
.drawer-close svg { width: 22px; height: 22px; }
.drawer-close.open { opacity: 1; pointer-events: auto; transform: none; transition: transform .52s cubic-bezier(.22,1.25,.36,1), opacity .18s ease .04s; }
.drawer-close:active { filter: brightness(.95); }
@media (max-width: 900px) { .drawer-close { display: flex; } }
body.admin-mode .drawer-close, body.sa-full-mode .drawer-close { display: none !important; }
body.dark-mode .drawer-close { background: #221c33; border-color: rgba(167,139,250,0.35); }

/* ── notifications panel (the user's bell) ── */
.notif-backdrop { position: fixed; inset: 0; z-index: 640; background: rgba(17,17,17,0.3); opacity: 0; pointer-events: none; transition: opacity .3s; }
.notif-backdrop.open { opacity: 1; pointer-events: auto; }
.notif-panel {
  position: fixed; z-index: 650; top: calc(var(--nav-h) + 10px); right: 18px; width: min(400px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - var(--nav-h) - 30px)); display: flex; flex-direction: column;
  background: #fff; border-radius: 20px !important; border: 1px solid rgba(124,58,237,0.12);
  box-shadow: 0 24px 60px rgba(17,17,17,0.18); overflow: hidden;
  visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top right;
  transition: opacity .22s, transform .28s var(--ease), visibility 0s linear .28s;
}
.notif-panel.open { visibility: visible; opacity: 1; transform: none; transition: opacity .22s, transform .28s var(--ease); }
@media (max-width: 700px) {
  .notif-panel { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 82vh; border-radius: 22px 22px 0 0 !important;
                 transform: translateY(28px); transform-origin: bottom center; padding-bottom: env(safe-area-inset-bottom); }
  .notif-panel.open { transform: none; }
}
.np-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem .8rem; border-bottom: 1px solid rgba(0,0,0,0.06);
           background: linear-gradient(180deg, #FAF7FF, #fff); }
.np-title { flex: 1; font-family: var(--font-s); font-size: 1.35rem; color: #111; }
.np-readall { border: 1px solid rgba(124,58,237,0.25); background: #fff; color: var(--gold); font-size: .72rem; font-weight: 600; padding: .4rem .75rem; border-radius: 999px !important; cursor: pointer; }
.np-readall[hidden] { display: none; }
.np-x { border: none; background: #F3F4F6; width: 32px; height: 32px; border-radius: 50% !important; font-size: 1.15rem; line-height: 1; cursor: pointer; color: #555; }
.np-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .5rem; overscroll-behavior: contain; }
.np-item { display: flex; gap: .8rem; padding: .8rem .75rem; border-radius: 14px; position: relative; transition: background .2s; }
.np-item + .np-item { margin-top: 2px; }
.np-item.has-link { cursor: pointer; }
.np-item.has-link:hover { background: #F8F5FF; }
.np-item.unread { background: linear-gradient(90deg, rgba(124,58,237,0.07), rgba(236,72,153,0.04)); }
.np-ic { width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: #F3F4F6; }
.tone-ok .np-ic    { background: #DCFCE7; } .tone-bad .np-ic  { background: #FEE2E2; } .tone-warn .np-ic { background: #FEF3C7; }
.tone-money .np-ic { background: #D1FAE5; } .tone-gift .np-ic { background: linear-gradient(135deg,#FDE68A,#FBCFE8); }
.tone-book .np-ic  { background: #EDE9FE; } .tone-info .np-ic { background: #E0F2FE; } .tone-muted .np-ic { background: #F3F4F6; }
.np-txt { flex: 1; min-width: 0; }
.np-t { font-size: .88rem; font-weight: 600; color: #111; line-height: 1.35; }
.np-b { font-size: .8rem; color: #555; line-height: 1.45; margin-top: .15rem; overflow-wrap: anywhere; }
.np-meta { font-size: .7rem; color: #999; margin-top: .3rem; }
.np-dot { position: absolute; top: .95rem; right: .75rem; width: 8px; height: 8px; border-radius: 50%; background: #EC4899; box-shadow: 0 0 0 3px rgba(236,72,153,0.15); }
.np-item.unread .np-txt { padding-right: .8rem; }
.np-empty { text-align: center; padding: 2.4rem 1rem 2.6rem; display: flex; flex-direction: column; gap: .35rem; color: #777; font-size: .82rem; }
.np-empty b { color: #111; font-size: .95rem; }
.np-empty-ic { font-size: 2rem; margin-bottom: .3rem; }
.np-loading { padding: 1.6rem; text-align: center; color: #999; font-size: .82rem; }
.np-more { display: block; margin: .6rem auto .3rem; border: 1px solid rgba(124,58,237,0.22); background: #fff; color: var(--gold); padding: .5rem 1.2rem; border-radius: 999px !important; font-size: .78rem; cursor: pointer; }
body.dark-mode .notif-panel { background: #161616; border-color: rgba(167,139,250,0.2); }
body.dark-mode .np-head { background: linear-gradient(180deg, #1d1828, #161616); border-color: rgba(255,255,255,0.06); }
body.dark-mode .np-title, body.dark-mode .np-t, body.dark-mode .np-empty b { color: #F0F0F0; }
body.dark-mode .np-b { color: #BBB; }
body.dark-mode .np-item.has-link:hover { background: #211b2d; }
body.dark-mode .np-readall, body.dark-mode .np-more { background: #1A1A1A; }
body.dark-mode .np-x { background: #262626; color: #CCC; }

/* ── salon panel: bell + Мэдэгдэл tab (the panel is always light) ── */
.admin-bell { width: 36px; height: 36px; margin-right: .2rem; }
.admin-tab-notifs { position: relative; }
.tab-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: .3rem; border-radius: 999px; background: #EC4899; color: #fff; font: 700 .64rem/18px var(--font-b); letter-spacing: 0; vertical-align: 1px; }
.tab-badge[hidden] { display: none; }
body.artist-restricted-mode .admin-bell, body.artist-restricted-mode .admin-tab-notifs,
body.admin-payment-only .admin-bell { display: none !important; }
#admin-notifs .an-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.an-title { font-family: var(--font-s); font-size: 1.5rem; color: #111; }
.an-sub { font-size: .78rem; color: #777; margin-top: .2rem; max-width: 420px; }
.an-filters { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .8rem; }
.an-chip { border: 1px solid rgba(124,58,237,0.18); background: #fff; color: #555; padding: .45rem .9rem; border-radius: 999px !important; font-size: .78rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.an-chip.on { background: var(--bt-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(124,58,237,0.25); }
.an-chip i { font-style: normal; min-width: 17px; height: 17px; border-radius: 999px; background: #EC4899; color: #fff; font-size: .62rem; line-height: 17px; padding: 0 4px; text-align: center; }
.an-chip.on i { background: rgba(255,255,255,0.3); }
.admin-np-list { padding: 0; border: 1px solid rgba(0,0,0,0.06); border-radius: 18px; background: #fff; }
.admin-np-list .np-item { border-radius: 0; border-bottom: 1px solid rgba(0,0,0,0.05); margin: 0; }
.admin-np-list .np-item:last-of-type { border-bottom: none; }

/* ── main page: search + bright filters ── */
.search-bar { display: flex !important; align-items: center; border-radius: 16px !important; padding: 5px; gap: 0;
              border: 1.5px solid rgba(124,58,237,0.18) !important; box-shadow: 0 8px 26px rgba(124,58,237,0.10) !important; }
.search-bar:focus-within { border-color: var(--gold) !important; box-shadow: 0 8px 30px rgba(124,58,237,0.2) !important; }
.search-bar .s-icon { display: flex; align-items: center; padding: 0 .3rem 0 .75rem !important; color: var(--gold); }
.search-bar .s-icon svg { width: 20px; height: 20px; }
.search-bar input { flex: 1; min-width: 0; padding: .8rem .6rem !important; font-weight: 400 !important; }
.search-bar button { border-radius: 12px !important; padding: .8rem 1.3rem !important; background: var(--bt-grad) !important; letter-spacing: .08em !important;
                     font-size: .78rem !important; box-shadow: 0 6px 16px rgba(124,58,237,0.3); border-top: none !important; flex-shrink: 0; }
body.dark-mode .search-bar { border-color: rgba(167,139,250,0.25) !important; }
.filter-block { margin-top: 1.1rem; }
.filter-label { display: flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #333; margin: 0 0 .55rem .15rem; }
.fl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bt-grad); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.fl-dot.pin { background: linear-gradient(135deg,#F59E0B,#EC4899); box-shadow: 0 0 0 3px rgba(245,158,11,0.14); }
body.dark-mode .filter-label { color: #DDD; }
.pill-row { display: flex; gap: .5rem; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none;
            -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.pill-row::-webkit-scrollbar { display: none; }
@media (min-width: 901px) { .pill-row { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } }
.tchip, .pill {
  flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; white-space: nowrap;
  font-family: var(--font-b); font-size: .84rem; font-weight: 500; color: #333; background: #fff;
  border: 1.5px solid rgba(124,58,237,0.16); border-radius: 999px !important; padding: .55rem 1rem .55rem .7rem;
  box-shadow: 0 3px 10px rgba(17,17,17,0.05); transition: transform .18s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.pill { padding: .5rem .95rem; font-size: .82rem; }
.tchip:hover, .pill:hover { border-color: var(--gold); box-shadow: 0 6px 16px rgba(124,58,237,0.15); }
.tchip:active, .pill:active { transform: scale(.96); }
.tchip .ti { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .95rem; background: linear-gradient(135deg,#F5F3FF,#FCE7F3); }
.tchip .pc, .pill .pc { font-size: .68rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; line-height: 20px; text-align: center; background: #F3F0FF; color: var(--gold); }
.tchip.active, .pill.active { background: var(--bt-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(124,58,237,0.32); }
.tchip.active .ti { background: rgba(255,255,255,0.25); }
.tchip.active .pc, .pill.active .pc { background: rgba(255,255,255,0.28); color: #fff; }
.pill.active { background: linear-gradient(135deg,#F59E0B,#EC4899); box-shadow: 0 8px 20px rgba(236,72,153,0.28); }
.tchip.empty:not(.active) { opacity: .6; }
body.dark-mode .tchip, body.dark-mode .pill { background: #1A1A1A; color: #E5E5E5; border-color: rgba(167,139,250,0.22); }
body.dark-mode .tchip .ti { background: rgba(167,139,250,0.15); }
body.dark-mode .tchip .pc, body.dark-mode .pill .pc { background: rgba(167,139,250,0.18); color: #C4B5FD; }
.filter-chips, #districtFilter { display: none !important; }

/* ── salon cards: pictures glide (no arrows) ── */
.card-img { overflow: hidden; }
.card-img .ci-track { display: flex; height: 100%; will-change: transform; transition: transform .9s cubic-bezier(.65,.05,.25,1); }
.card-img .ci-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.card-img .sarrow { display: none !important; }
.card-img .sdots { bottom: .65rem; gap: 5px; pointer-events: none; }
.card-img .sdot { width: 6px; height: 6px; background: rgba(255,255,255,0.55); transition: width .35s, background .35s; border-radius: 999px !important; }
.card-img .sdot.active { width: 18px; background: #fff; }
.card-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.22)); pointer-events: none; z-index: 1; }
.card-img .sdots, .card-img .badge { z-index: 3; }
.card-img-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F5F3FF, #FCE7F3) !important; }
.card-img-empty::after { display: none; }
.ci-empty { font-size: 3rem; filter: saturate(1.2); opacity: .85; }
.salon-card.salon-unavailable .card-img .ci-track img { filter: grayscale(0.85); opacity: .75; }

/* ── salon page: swipeable pictures ── */
.modal-slider { touch-action: pan-y; user-select: none; cursor: grab; height: 280px; }
.modal-slider:active { cursor: grabbing; }
.modal-slider.empty { height: 150px; cursor: default; background: linear-gradient(135deg, #F5F3FF, #FCE7F3); display: flex; align-items: center; justify-content: center; }
.ms-empty { font-size: 3.2rem; }
.ms-track { display: flex; height: 100%; will-change: transform; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
.ms-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.modal-slider .sarrow { display: none !important; }
.modal-slider .sdots { bottom: .8rem; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,0.22); backdrop-filter: blur(6px); }
.modal-slider .sdot { width: 7px; height: 7px; border-radius: 999px !important; background: rgba(255,255,255,0.55); transition: width .35s, background .3s; }
.modal-slider .sdot.active { width: 20px; background: #fff; }
@media (max-width: 700px) { .modal-slider { height: 240px !important; } }

/* ── salon page: bigger, brighter info ── */
.mi-head { margin-bottom: 1rem; }
#tab-info .modal-district { display: inline-flex; font-size: .68rem !important; font-weight: 600; letter-spacing: .14em; padding: .3rem .75rem; border-radius: 999px; background: var(--bt-soft); color: var(--gold); margin-bottom: .6rem; }
#tab-info .modal-district:empty { display: none; }
#tab-info .modal-name { font-size: 2.2rem !important; font-weight: 500 !important; line-height: 1.12; margin-bottom: .5rem !important; color: #111; }
.mi-rating { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .85rem; color: #555; }
.mr-stars { color: #F59E0B; letter-spacing: 1px; font-size: 1rem; }
.mi-rating b { color: #111; }
.mr-on { margin-left: auto; font-size: .74rem; font-weight: 600; color: #15803D; background: #DCFCE7; padding: .25rem .65rem; border-radius: 999px; }
.mr-off { margin-left: auto; font-size: .74rem; font-weight: 600; color: #B91C1C; background: #FEE2E2; padding: .25rem .65rem; border-radius: 999px; }
.mi-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.mi-tile { display: flex; align-items: center; gap: .75rem; padding: .9rem .95rem; border-radius: 16px; text-decoration: none; color: inherit;
           background: #fff; border: 1.5px solid rgba(124,58,237,0.12); box-shadow: 0 6px 18px rgba(17,17,17,0.05); min-width: 0; transition: transform .18s, box-shadow .2s; }
a.mi-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(124,58,237,0.14); }
a.mi-tile:active { transform: scale(.98); }
.mt-ic { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.mt-addr .mt-ic { background: linear-gradient(135deg,#FEE2E2,#FCE7F3); } .mt-phone .mt-ic { background: linear-gradient(135deg,#DCFCE7,#D1FAE5); }
.mt-hours .mt-ic { background: linear-gradient(135deg,#E0F2FE,#EDE9FE); } .mt-dep .mt-ic { background: linear-gradient(135deg,#FEF3C7,#FDE68A); }
.mt-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mt-txt small { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #999; }
.mt-txt b { font-size: .98rem; font-weight: 600; color: #111; margin-top: .15rem; line-height: 1.3; overflow-wrap: anywhere; }
.mt-go { color: var(--gold); font-size: 1.4rem; font-weight: 300; }
.mt-addr { grid-column: 1 / -1; }
.mi-desc { font-size: .92rem; line-height: 1.65; color: #444; background: linear-gradient(135deg, #FAF7FF, #FFF7FB); border-radius: 16px; padding: .95rem 1.05rem; margin-bottom: .6rem; border: 1px solid rgba(124,58,237,0.08); }
#tab-info .svc-title { font-size: .8rem !important; font-weight: 700; letter-spacing: .14em; color: #111 !important; margin: 1.4rem 0 .75rem !important; display: flex; align-items: center; gap: .5rem; }
#tab-info .svc-title::before { content: ''; width: 18px; height: 3px; border-radius: 3px; background: var(--bt-grad); }
.mcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .65rem; }
.mcat { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .9rem .95rem; cursor: pointer;
        background: #fff; border: 1.5px solid rgba(124,58,237,0.14); border-radius: 18px !important; box-shadow: 0 6px 16px rgba(17,17,17,0.05);
        transition: transform .18s, box-shadow .2s, border-color .2s, background .2s; font-family: var(--font-b); -webkit-tap-highlight-color: transparent; }
.mcat:hover { border-color: var(--gold); transform: translateY(-2px); }
.mcat:active { transform: scale(.97); }
.mcat-ic { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: linear-gradient(135deg,#F5F3FF,#FCE7F3); margin-bottom: .3rem; }
.mcat-name { font-size: .95rem; font-weight: 600; color: #111; }
.mcat-meta { font-size: .74rem; color: #777; }
.mcat.open { background: var(--bt-grad); border-color: transparent; box-shadow: 0 10px 24px rgba(124,58,237,0.3); }
.mcat.open .mcat-name, .mcat.open .mcat-meta { color: #fff; }
.mcat.open .mcat-ic { background: rgba(255,255,255,0.22); }
#tab-info .modal-services { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.msvc-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; font-size: .95rem; color: #111; padding: .2rem .2rem .1rem; }
.msvc-head small { font-weight: 500; color: #999; font-size: .74rem; }
#tab-info .service-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1rem !important; border-radius: 14px !important;
                          border: 1.5px solid rgba(124,58,237,0.1) !important; background: #fff !important; box-shadow: 0 3px 10px rgba(17,17,17,0.04); animation: btIn .3s var(--ease) both; }
#tab-info .service-item.can-book { cursor: pointer; }
#tab-info .service-item.can-book:hover { border-color: var(--gold) !important; }
@keyframes btIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.svc-left { display: flex; flex-direction: column; min-width: 0; }
#tab-info .svc-name { font-size: .95rem; font-weight: 600; color: #111; }
.svc-dur { font-size: .74rem; color: #888; margin-top: .15rem; }
.svc-right { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
#tab-info .svc-price { font-size: 1rem; font-weight: 700; color: var(--gold); }
.svc-add { width: 28px; height: 28px; border-radius: 50%; background: var(--bt-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; box-shadow: 0 4px 10px rgba(124,58,237,0.3); }
.mi-hint, .mi-empty { font-size: .82rem; color: #888; text-align: center; padding: .9rem; border: 1.5px dashed rgba(124,58,237,0.18); border-radius: 14px; }
.salon-map-wrap { border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(124,58,237,0.12); box-shadow: 0 6px 18px rgba(17,17,17,0.05); background: #fff; }
.salon-map { height: 230px; background: #EEE; z-index: 1; }
.salon-map-wrap.nomap .salon-map { display: none; }
.salon-map-actions { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; flex-wrap: wrap; }
.salon-map-actions:empty { display: none; }
.sma-dist { font-size: .82rem; font-weight: 600; color: #333; }
.sma-btn { margin-left: auto; text-decoration: none; background: var(--bt-grad); color: #fff; font-size: .8rem; font-weight: 600; padding: .55rem 1rem; border-radius: 999px; box-shadow: 0 6px 14px rgba(124,58,237,0.28); }
.mi-book-btn { width: 100%; margin-top: 1.3rem; padding: 1rem; border: none; border-radius: 16px !important; background: var(--bt-grad); color: #fff;
               font-family: var(--font-b); font-size: .92rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 24px rgba(124,58,237,0.32); }
.mi-book-btn:active { transform: scale(.99); }
body.dark-mode #tab-info .modal-name, body.dark-mode .mi-rating b, body.dark-mode .mt-txt b, body.dark-mode .mcat-name,
body.dark-mode .msvc-head, body.dark-mode #tab-info .svc-name, body.dark-mode #tab-info .svc-title, body.dark-mode .sma-dist { color: #F0F0F0 !important; }
body.dark-mode .mi-tile, body.dark-mode .mcat, body.dark-mode #tab-info .service-item, body.dark-mode .salon-map-wrap { background: #1A1A1A !important; border-color: rgba(167,139,250,0.18) !important; }
body.dark-mode .mi-desc { background: #1d1828; color: #CCC; border-color: rgba(167,139,250,0.14); }
body.dark-mode .mi-rating { color: #BBB; }
@media (max-width: 700px) {
  #tab-info .modal-name { font-size: 1.9rem !important; }
  .mi-tiles { grid-template-columns: 1fr; gap: .55rem; }
  .mcat-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .mcat { padding: .8rem .8rem; }
  .salon-map { height: 210px; }
}

/* ── booking: brighter choices ── */
.booking-step-label { font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .12em !important; color: #111 !important; }
.bcat-card { border: 1.5px solid rgba(124,58,237,0.2) !important; border-radius: 18px !important; background: linear-gradient(135deg, #FFFFFF, #FAF7FF) !important;
             box-shadow: 0 6px 18px rgba(124,58,237,0.08); padding: 1rem 1.1rem !important; position: relative; overflow: hidden; }
.bcat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bt-grad); opacity: .55; transition: opacity .2s, width .2s; }
.bcat-card:hover::before, .bcat-card.has-selection::before { opacity: 1; width: 5px; }
.bcat-card:hover { box-shadow: 0 10px 24px rgba(124,58,237,0.16); }
.bcat-card.has-selection { border-color: var(--gold) !important; background: linear-gradient(135deg, #F5F3FF, #FDF2F8) !important; box-shadow: 0 10px 26px rgba(124,58,237,0.2); }
.bcat-name { font-size: 1rem !important; font-weight: 600 !important; }
.bcat-arrow { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bt-soft); }
.bcat-card.has-selection .bcat-arrow { background: var(--bt-grad); color: #fff !important; }
.svc-select-card { border: 1.5px solid rgba(124,58,237,0.16) !important; border-radius: 16px !important; padding: .95rem 1rem !important; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.svc-select-card:active { transform: scale(.985); }
.svc-select-card.selected { border-color: transparent !important; background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(236,72,153,0.10)) !important; box-shadow: 0 0 0 2px var(--gold), 0 10px 22px rgba(124,58,237,0.18); }
.svc-select-card .ssc-check { border-radius: 50% !important; }
.svc-select-card.selected .ssc-check { background: var(--bt-grad) !important; border-color: transparent !important; }
.artist-cards-row .artist-card { border: 1.5px solid rgba(124,58,237,0.14) !important; border-radius: 18px !important; box-shadow: 0 6px 16px rgba(17,17,17,0.06); }
.bk-cal-wrap { border: 1.5px solid rgba(124,58,237,0.16) !important; border-radius: 18px !important; box-shadow: 0 6px 18px rgba(124,58,237,0.07); background: #fff; }
.bk-cal-head { background: linear-gradient(135deg, #F5F3FF, #FDF2F8); }
.bk-day { border-radius: 12px !important; font-weight: 500; transition: background .15s, transform .15s; }
.bk-day.today { box-shadow: inset 0 0 0 1.5px var(--gold); }
.bk-day.selected { background: var(--bt-grad) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(124,58,237,0.3); transform: scale(1.04); }
.bk-time-wrap { padding: .9rem 1rem 1rem !important; background: #fff !important; }
.bk-time-label { display: flex; align-items: center; gap: .5rem; font-weight: 700 !important; color: #111 !important; letter-spacing: .1em !important; }
.bk-dur { font-size: .7rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; background: var(--bt-grad); padding: .15rem .55rem; border-radius: 999px; }
.bk-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .72rem; color: #666; margin-bottom: .6rem; }
.bk-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.bk-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg-free { background: #DCFCE7; box-shadow: inset 0 0 0 1.5px #22C55E; } .lg-busy { background: #FEF3C7; box-shadow: inset 0 0 0 1.5px #EAB308; }
.lg-rest { background: #E5E7EB; box-shadow: inset 0 0 0 1.5px #6B7280; } .lg-mine { background: var(--bt-grad); }
.bk-time-slots { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .4rem !important; }
.bk-slot { position: relative; padding: .6rem .2rem !important; font-size: .84rem !important; font-weight: 600; border-radius: 12px !important; border: 1.5px solid transparent !important;
           font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, color .2s; }
.bk-slot.st-free { background: #F0FDF4 !important; color: #15803D !important; border-color: #BBF7D0 !important; }
.bk-slot.st-free:hover { border-color: #22C55E !important; transform: translateY(-1px); }
.bk-slot.st-busy { background: #FEF9C3 !important; color: #A16207 !important; }
.bk-slot.st-rest, .bk-slot.st-closed { background: #F3F4F6 !important; color: #9CA3AF !important; }
.bk-slot.st-past { background: #F9FAFB !important; color: #D1D5DB !important; }
.bk-slot.taken { opacity: 1 !important; text-decoration: line-through; }
.bk-slot.nofit { background: repeating-linear-gradient(135deg, #F9FAFB 0 6px, #F3F4F6 6px 12px) !important; color: #9CA3AF !important; border-color: #E5E7EB !important; }
.bk-slot.in-range { background: var(--bt-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 14px rgba(124,58,237,0.28); text-decoration: none; }
.bk-slot.in-range:not(.range-start) { opacity: .88 !important; }
.bk-slot.range-start { transform: scale(1.05); z-index: 1; box-shadow: 0 8px 18px rgba(124,58,237,0.38), 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.bk-range-note { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .8rem; padding: .7rem .9rem; border-radius: 14px;
                 background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(236,72,153,0.08)); border: 1.5px solid rgba(124,58,237,0.2); font-size: .86rem; color: #333; animation: btIn .25s var(--ease) both; }
.bk-range-note b { font-size: 1rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.bk-range-note span:last-child { font-size: .78rem; color: #666; }
.bk-range-hint { margin-top: .7rem; font-size: .78rem; color: #888; text-align: center; }
.receipt-box { border: 1.5px solid rgba(124,58,237,0.18) !important; box-shadow: 0 12px 30px rgba(124,58,237,0.12) !important; }
.receipt-time { display: inline-block; margin-top: .3rem; font-weight: 700; color: var(--gold) !important; background: var(--bt-soft); padding: .2rem .6rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.receipt-continue:not(:disabled) { background: var(--bt-grad) !important; box-shadow: 0 10px 22px rgba(124,58,237,0.3); }
body.dark-mode .bcat-card { background: linear-gradient(135deg, #1A1A1A, #1d1828) !important; border-color: rgba(167,139,250,0.25) !important; }
body.dark-mode .bk-cal-wrap, body.dark-mode .bk-time-wrap { background: #161616 !important; }
body.dark-mode .bk-cal-head { background: #1d1828; }
body.dark-mode .bk-time-label, body.dark-mode .booking-step-label { color: #F0F0F0 !important; }
body.dark-mode .bk-slot.st-free { background: rgba(34,197,94,0.1) !important; color: #4ADE80 !important; border-color: rgba(34,197,94,0.3) !important; }
body.dark-mode .bk-range-note { color: #DDD; }
@media (max-width: 700px) { .bk-time-slots { grid-template-columns: repeat(4, 1fr); } }

/* ── maps ── */
#gmap { border-radius: 20px !important; border: 1.5px solid rgba(124,58,237,0.14) !important; box-shadow: 0 10px 30px rgba(17,17,17,0.08); }
.bt-pin-wrap, .bt-me-wrap, .bt-cluster-wrap { background: transparent !important; border: none !important; }
.bt-pin { width: 40px; height: 40px; border-radius: 50% 50% 50% 6px !important; transform: rotate(-45deg); background: var(--bt-grad); padding: 3px;
          box-shadow: 0 6px 14px rgba(124,58,237,0.4); transition: transform .2s; }
.bt-pin-face { width: 100%; height: 100%; border-radius: 50% !important; overflow: hidden; background: #fff; transform: rotate(45deg);
               display: flex; align-items: center; justify-content: center; font: 700 .95rem var(--font-b); color: var(--gold); }
.bt-pin-face img { width: 100%; height: 100%; object-fit: cover; }
.bt-pin.off { background: #9CA3AF; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.bt-pin.off .bt-pin-face img { filter: grayscale(1); }
.leaflet-marker-icon:hover .bt-pin { transform: rotate(-45deg) scale(1.1); }
.bt-cluster { width: 100%; height: 100%; border-radius: 50% !important; display: flex; flex-direction: column; align-items: center; justify-content: center;
              background: var(--bt-grad); color: #fff; box-shadow: 0 0 0 6px rgba(124,58,237,0.18), 0 8px 18px rgba(124,58,237,0.35); line-height: 1; font-family: var(--font-b); }
.bt-cluster b { font-size: 1.05rem; font-weight: 800; }
.bt-cluster small { font-size: .56rem; letter-spacing: .06em; opacity: .9; margin-top: 2px; }
.bt-me { position: relative; width: 44px; height: 44px; }
.bt-me-face { position: absolute; inset: 0; border-radius: 50% !important; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 2px #3B82F6, 0 6px 16px rgba(59,130,246,0.45);
              display: flex; align-items: center; justify-content: center; font-size: 1.35rem; overflow: hidden; }
.bt-me-face img { width: 100%; height: 100%; object-fit: cover; }
.bt-me-pulse { position: absolute; inset: -10px; border-radius: 50% !important; background: rgba(59,130,246,0.22); animation: btPulse 2s ease-out infinite; }
@keyframes btPulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.bt-me.guest .bt-me-face { background: #3B82F6; }
.bt-me-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.bt-locate { width: 40px; height: 40px; border-radius: 12px !important; border: none; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18); cursor: pointer;
             display: flex; align-items: center; justify-content: center; color: #3B82F6; padding: 0; }
.bt-locate svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.bt-locate svg circle:first-child { fill: currentColor; }
.bt-locate.busy svg { animation: btSpin 1s linear infinite; }
@keyframes btSpin { to { transform: rotate(360deg); } }
.bt-popup .leaflet-popup-content-wrapper { border-radius: 18px !important; padding: 0; overflow: hidden; box-shadow: 0 14px 34px rgba(17,17,17,0.2); }
.bt-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.bt-pop { font-family: var(--font-b); }
.pp-img { width: 100%; height: 110px; object-fit: cover; display: block; }
.pp-body { padding: .75rem .9rem .9rem; display: flex; flex-direction: column; gap: .25rem; }
.pp-body b { font-size: .98rem; color: #111; }
.pp-meta { font-size: .76rem; color: #666; }
.pp-star { color: #F59E0B; font-weight: 700; }
.pp-dist { font-size: .74rem; color: #2563EB; font-weight: 600; }
.pp-off { font-size: .74rem; color: #B91C1C; font-weight: 600; margin-top: .2rem; }
.pp-btn { margin-top: .45rem; border: none; border-radius: 12px !important; background: var(--bt-grad); color: #fff; font-weight: 700; font-size: .8rem; padding: .6rem; cursor: pointer; box-shadow: 0 6px 14px rgba(124,58,237,0.3); }

/* ── super admin: the salon's services ── */
.se-svc-sum { font-size: .78rem; color: #A08878; margin-bottom: .8rem; }
.se-svc-group { border: 1px solid rgba(196,146,74,0.2); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .7rem; background: rgba(255,255,255,0.03); }
.se-svc-type { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--gold2, #C4B5FD); margin-bottom: .4rem; }
.se-svc-type small { margin-left: auto; font-weight: 500; color: #A08878; }
.se-svc-row { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .5rem 0; border-top: 1px dashed rgba(196,146,74,0.15); font-size: .85rem; color: #E8DDD0; }
.se-svc-main { display: flex; flex-direction: column; min-width: 0; }
.se-svc-main small { font-size: .72rem; color: #A08878; margin-top: .1rem; }
.se-svc-price { font-weight: 700; white-space: nowrap; }
.se-empty { font-size: .82rem; color: #8a7a72; }
/* v30 fixes: shadows of the active pill aren't cut off; one wide card per row for results on phones */
.pill-row { padding: 6px 12px 16px !important; margin: 0 -12px; }
@media (min-width: 901px) { .pill-row { padding: 4px 0 8px !important; margin: 0; } }
.tchip.active, .pill.active { box-shadow: 0 5px 14px rgba(124,58,237,0.28); }
.pill.active { box-shadow: 0 5px 14px rgba(236,72,153,0.26); }
@media (max-width: 520px) {
  .search-results-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  #searchResults .row-head { align-items: center; gap: .8rem; }
  #searchResults .row-head h2 { font-size: 1.35rem !important; line-height: 1.25; }
  #searchResults .view-all-btn { padding: .5rem .8rem !important; font-size: .62rem !important; letter-spacing: .08em !important; white-space: nowrap; }
}
.np-readall { white-space: nowrap; flex-shrink: 0; }
/* v30: the salon window follows dark mode too (it used to stay white with dark pieces inside) */
body.dark-mode .modal { background: #121212 !important; border-color: rgba(255,255,255,0.08) !important; color: #E8E8E8; }
body.dark-mode .modal-tabs { background: #121212 !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-mode .modal-tab { color: #A3A3A3 !important; }
body.dark-mode .modal-tab.active { color: #C4B5FD !important; border-bottom-color: #A78BFA !important; }
body.dark-mode .modal-tab[onclick*="'booking'"].active { color: #fff !important; }
body.dark-mode #tab-info .modal-name { color: #F5F3FF !important; }
body.dark-mode .modal-close { background: rgba(0,0,0,0.45) !important; color: #fff !important; border-color: rgba(255,255,255,0.2) !important; }
body.dark-mode .mi-tile, body.dark-mode .mcat, body.dark-mode #tab-info .service-item, body.dark-mode .salon-map-wrap { background: #1C1C1E !important; }
body.dark-mode .mcat.open { background: var(--bt-grad) !important; border-color: transparent !important; }
body.dark-mode .mt-txt small, body.dark-mode .mcat-meta, body.dark-mode .svc-dur { color: #9CA3AF; }
body.dark-mode .mcat.open .mcat-meta { color: #fff; }
body.dark-mode .mi-hint, body.dark-mode .mi-empty { color: #9CA3AF; border-color: rgba(167,139,250,0.25); }
body.dark-mode .receipt-salon { color: #F0F0F0 !important; }
body.dark-mode .receipt-artist, body.dark-mode .receipt-empty { color: #A3A3A3 !important; }
body.dark-mode .bk-cal-head h4, body.dark-mode .bk-day { color: #E5E5E5; }
body.dark-mode .bk-cal-dow { color: #9CA3AF; }
body.dark-mode .bk-legend { color: #A3A3A3; }
body.dark-mode .bk-slot.in-range { background: var(--bt-grad) !important; color: #fff !important; border-color: transparent !important; }
body.dark-mode .bk-slot.st-busy { background: rgba(234,179,8,0.14) !important; color: #FACC15 !important; }
body.dark-mode .bk-slot.st-rest, body.dark-mode .bk-slot.st-closed, body.dark-mode .bk-slot.st-past { background: #1F1F1F !important; color: #6B7280 !important; }
body.dark-mode .bk-slot.nofit { background: repeating-linear-gradient(135deg, #1A1A1A 0 6px, #222 6px 12px) !important; color: #6B7280 !important; border-color: #2A2A2A !important; }
body.dark-mode .bk-range-note b { color: #C4B5FD; }
body.dark-mode .bk-range-note span:last-child { color: #A3A3A3; }
body.dark-mode .tchip.active, body.dark-mode .pill.active { background: var(--bt-grad) !important; color: #fff !important; border-color: transparent !important; }
body.dark-mode .pill.active { background: linear-gradient(135deg,#F59E0B,#EC4899) !important; }
body.dark-mode .tchip.active .pc, body.dark-mode .pill.active .pc { background: rgba(255,255,255,0.28); color: #fff; }
.mr-stars { color: #D97706; }
body.dark-mode .mr-on { background: rgba(34,197,94,0.16); color: #4ADE80; }
body.dark-mode .mr-off { background: rgba(239,68,68,0.16); color: #F87171; }
body.dark-mode .leaflet-control-attribution, body.dark-mode .leaflet-popup-content-wrapper { color: #333; }
body.dark-mode .artist-cards-row .artist-card { background: #1C1C1E; }
body.dark-mode .artist-card-name { color: #F0F0F0; }
body.dark-mode .artist-card-stars { color: #A3A3A3; }

/* ═══════════════════════════════════════════════════════════════════
   v31 — the logo
   ═══════════════════════════════════════════════════════════════════ */
.nav-logo { display: inline-flex; align-items: center; gap: .55rem; line-height: 1; }
.nav-mark { display: block; height: 40px; width: auto; flex-shrink: 0; }
@media (max-width: 540px) { .nav-logo { gap: .4rem; } .nav-mark { height: 32px; } }
/* narrow phones: the flower makes the logo wider — tighten the bar so all the buttons still fit */
@media (max-width: 400px) {
  nav { padding: 0 .75rem; }
  .nav-logo { font-size: .98rem; gap: .3rem; letter-spacing: .02em; }
  .nav-mark { height: 28px; }
  .nav-right { gap: .35rem; }
  #navAuthBtns { gap: .3rem; }
  nav .nav-btn { padding: .42rem .55rem; letter-spacing: .05em; }
  .theme-toggle { width: 30px; height: 30px; }
}
@media (max-width: 350px) { .nav-mark { height: 26px; } }
/* the whole logo (flower + words) — a background, so only the light OR the dark copy is downloaded */
.brand-full { display: block; margin-left: auto; margin-right: auto; aspect-ratio: 560 / 480;
              background: url(logo-full.png) center / contain no-repeat; }
body.dark-mode .brand-full { background-image: url(logo-full-dark.png); }
.loader-logo.brand-full { width: 170px; margin-bottom: 1.4rem; }
.footer-logo.brand-full { width: 140px; margin-bottom: .9rem; }
@media (max-width: 540px) { .loader-logo.brand-full { width: 150px; } .footer-logo.brand-full { width: 120px; } }

/* ═══════════════════════════════════════════════════════════════════
   v32 — no emoji anywhere. The only icons: map pin, clock, phone (inline SVG, ico() in app.js).
   Avatars are coloured circles with the first letter of the name; crown / diamond / star are
   drawn with CSS; the little gift box is CSS too.
   ═══════════════════════════════════════════════════════════════════ */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* salon info tiles: pin / phone / clock */
.mt-ic .ico { width: 22px; height: 22px; }
.mt-addr .mt-ic { color: #E11D48; } .mt-phone .mt-ic { color: #059669; } .mt-hours .mt-ic { color: #4F46E5; }
body.dark-mode .mt-addr .mt-ic { color: #FB7185; } body.dark-mode .mt-phone .mt-ic { color: #34D399; } body.dark-mode .mt-hours .mt-ic { color: #A5B4FC; }
.mi-tile.mt-dep { padding-left: 1.1rem; }
.brn-ic { display: inline-flex; color: var(--gold); } .brn-ic .ico { width: 18px; height: 18px; }
body.dark-mode .brn-ic { color: #C4B5FD; }
.dep-clock .ico { width: 14px; height: 14px; vertical-align: -.18em; margin-right: .15rem; }
.gcs-deadline .ico { width: 15px; height: 15px; vertical-align: -.2em; margin-right: .1rem; }
.gcs-ic .ico { width: 17px; height: 17px; vertical-align: -.2em; }
.gcs-bul { display: inline-block; width: 7px; height: 7px; border-radius: 50% !important; background: #9AA0A6; vertical-align: middle; }
.pp-dist .ico, .sma-dist .ico { width: 14px; height: 14px; vertical-align: -.15em; margin-right: .1rem; }
.map-ph .mph-icon .ico { width: 44px; height: 44px; stroke-width: 1.6; }

/* theme button: moon / sun drawn like the menu icons */
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* password: «Харах / Нуух» instead of an eye picture */
.pw-toggle { font-size: .72rem !important; font-weight: 600; color: var(--gold) !important; letter-spacing: .01em; right: .8rem; }
.pw-wrap input { padding-right: 4.3rem !important; }
.req-mark-pw { right: 4.1rem; }
.pw-wrap.req-field-wrap input { padding-right: 5.4rem !important; }
.auth-login-mode .pw-wrap.req-field-wrap input { padding-right: 4.3rem !important; }

/* avatars */
.av { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; flex: none;
  border-radius: 50% !important; overflow: hidden; color: #fff; vertical-align: middle; container-type: size;
  background: linear-gradient(135deg, var(--c1, #8B5CF6), var(--c2, #EC4899)); }
.av b { font-size: .9em; font-size: 46cqh; font-weight: 700; line-height: 1; letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.18); -webkit-text-fill-color: currentColor; font-style: normal; }
.av-unicorn { background: linear-gradient(135deg, #F9A8D4 0%, #C4B5FD 50%, #93C5FD 100%); }
.av-rainbow { background: conic-gradient(from 210deg, #EF4444, #F59E0B, #FACC15, #22C55E, #3B82F6, #8B5CF6, #EC4899, #EF4444); }
.av-lotus { background: radial-gradient(circle at 50% 118%, #FDF2F8 0 26%, transparent 27%), linear-gradient(160deg, #F472B6, #BE185D); }
.av-strawberry { background: radial-gradient(#FEF3C7 1.1px, transparent 1.7px) 0 0 / 7px 7px, linear-gradient(160deg, #FB7185, #E11D48); }
.av-shell { background: radial-gradient(circle at 30% 24%, #fff 0 12%, transparent 42%), linear-gradient(135deg, #FCE7F3, #E0E7FF 55%, #CCFBF1); color: #7C3AED; }
.av-cupcake { background: repeating-linear-gradient(135deg, #FBCFE8 0 5px, #FFF1F7 5px 10px); color: #DB2777; }
.av-shell b, .av-cupcake b { text-shadow: none; }
.user-avatar .av, .md-av .av, .profile-summary-avatar .av, .rv-av .av, .bt-me-face .av { width: 100%; height: 100%; }
.card-sticker .av { width: calc(100% - 4px); height: calc(100% - 4px); }
.user-avatar-large .av { width: 44px; height: 44px; }
.avatar-option .av { width: 78%; height: 78%; }
.pz-big .av { width: 1.25em; height: 1.25em; }
.sx-prev .av { width: 34px; height: 34px; } .sx-prev.big .av { width: 40px; height: 40px; }
.user-avatar { overflow: hidden; }

/* crown / diamond (in front of a name) and the gift-box pictures */
.nm-emblem { display: inline-block; width: .95em; height: .78em; margin-right: .3em; vertical-align: -.02em; }
.em-crown { background: linear-gradient(180deg, #FDE68A, #F59E0B 58%, #B45309); clip-path: polygon(0 100%, 0 20%, 26% 56%, 50% 0, 74% 56%, 100% 20%, 100% 100%); }
.em-diamond { background: linear-gradient(160deg, #E0F2FE, #38BDF8 45%, #6366F1); clip-path: polygon(22% 0, 78% 0, 100% 34%, 50% 100%, 0 34%); }
.em-star { background: linear-gradient(180deg, #FDE68A, #F59E0B); clip-path: polygon(50% 0, 61.8% 35.4%, 98.5% 35.4%, 68.8% 57.3%, 79.4% 91.2%, 50% 70.2%, 20.6% 91.2%, 31.2% 57.3%, 1.5% 35.4%, 38.2% 35.4%); }
.pz-emblem { display: block; width: 1.15em; height: .95em; }
.pz-emblem.em-star { height: 1.1em; }
.mini-gift { display: inline-block; position: relative; width: 1em; height: .92em; vertical-align: -.1em; }
.mini-gift::before, .mini-gift::after { content: ''; position: absolute; border-radius: .12em;
  background: linear-gradient(90deg, transparent 42%, #FDE68A 42% 58%, transparent 58%), linear-gradient(135deg, #8B5CF6, #EC4899); }
.mini-gift::before { left: .08em; right: .08em; bottom: 0; height: .6em; }
.mini-gift::after { left: 0; right: 0; top: .1em; height: .26em; background: linear-gradient(90deg, transparent 40%, #FDE68A 40% 60%, transparent 60%), linear-gradient(135deg, #7C3AED, #DB2777); }
.xp-gift .mini-gift { font-size: 1.35rem; }
.xpc-ic .mini-gift { font-size: 1.7rem; }
.xp-open-btn .mini-gift { font-size: 1.05rem; vertical-align: -.12em; margin-right: .2rem; }
.xp-open-btn .mini-gift::before, .xp-open-btn .mini-gift::after { background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,.95) 42% 58%, transparent 58%), rgba(255,255,255,.55); }

/* notifications: a coloured square — the clock for time things, a dot for the rest */
.np-ic { width: 36px; height: 36px; border-radius: 12px; color: #6B7280; }
.np-ic:empty::before { content: ''; width: 10px; height: 10px; border-radius: 50% !important; background: currentColor; }
.np-ic .ico { width: 18px; height: 18px; }
.tone-ok .np-ic { color: #16A34A; } .tone-bad .np-ic { color: #DC2626; } .tone-warn .np-ic { color: #D97706; }
.tone-money .np-ic { color: #059669; } .tone-gift .np-ic { color: #DB2777; } .tone-book .np-ic { color: #7C3AED; }
.tone-info .np-ic { color: #0284C7; } .tone-muted .np-ic { color: #9CA3AF; }
.np-empty-ic svg { width: 40px; height: 40px; fill: none; stroke: #C4B5FD; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* payment windows */
.pay-mark { display: block; width: 52px; height: 52px; margin: 0 auto .4rem; object-fit: contain; }
.pay-notice-list li { position: relative; padding-left: 1.05rem; }
.pay-notice-list li::before { content: ''; position: absolute; left: .1rem; top: 1.05em; width: 6px; height: 6px; border-radius: 50% !important; background: var(--gold); }
.dep-done-ic { width: 60px; height: 60px; margin: 0 auto .6rem; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 8px 20px rgba(34,197,94,.3); }
.dep-done-ic.back { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 20px rgba(245,158,11,.3); }
.pay-status.ok { color: #16A34A; font-weight: 600; }

/* a salon without photos: the flower mark instead of a picture */
.ci-empty, .ms-empty { display: flex; align-items: center; justify-content: center; filter: none; opacity: 1; }
.np-mark { width: 64px; height: 64px; object-fit: contain; opacity: .5; }
.ms-empty .np-mark { width: 84px; height: 84px; }

.tchip { padding: .55rem 1.05rem; }
/* the gift-coupon card in the salon panel: on a phone the switch goes under the text instead of squeezing it */
.xpc-card { flex-wrap: wrap; }
.xpc-card .xpc-txt { flex: 1 1 190px; min-width: 0; }
.xpc-card .toggle-switch { margin-left: auto; }

/* v32 — super admin: who reached the gift, who can open it, who opened it and what they won */
.sg-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.sg-bar select { background: rgba(255,255,255,.06); color: #E8DDD0; border: 1px solid rgba(167,139,250,.3); border-radius: 8px !important; padding: .35rem .6rem; font-size: .8rem; }
.sg-bar select option { color: #111; }
.sg-filter { display: flex; gap: .3rem; }
.sg-filter button { font-size: .72rem; padding: .3rem .7rem; border-radius: 999px !important; border: 1px solid rgba(167,139,250,.3); background: transparent; color: #C4B5FD; cursor: pointer; }
.sg-filter button.on { background: #7C3AED; border-color: #7C3AED; color: #fff; }
.sg-counts { grid-template-columns: repeat(3, 1fr); }
.sg-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.sg-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px !important; background: rgba(255,255,255,.04); }
.sg-pz { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.sg-pz .av { width: 34px; height: 34px; }
.sg-pz .av-img { width: 34px; height: 34px; }
.sg-pz .mini-gift { font-size: 1.3rem; }
.sg-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.sg-who b { color: #E8DDD0; font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sg-who small { flex-basis: 100%; font-size: .68rem; color: #8a7a72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-kind { font-size: .6rem; padding: .05rem .45rem; border-radius: 999px !important; background: rgba(167,139,250,.18); color: #DDD6FE; }
.sg-kind.salon { background: rgba(236,72,153,.18); color: #FBCFE8; }
.sg-what { text-align: right; flex: none; max-width: 48%; }
.sg-what b { display: block; font-size: .78rem; color: #F5F3FF; font-weight: 600; }
.sg-what small { font-size: .66rem; color: #8a7a72; }
.sg-swatch { display: block; width: 30px; height: 14px; border-radius: 7px !important; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.sg-ring { display: block; width: 26px; height: 26px; border-radius: 8px !important; border: 3px solid transparent;
  background: linear-gradient(#1c1714, #1c1714) padding-box, linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B) border-box; }
.sg-banner { display: block; width: 30px; height: 12px; border-radius: 4px !important; background: linear-gradient(90deg, #F97316, #EC4899, #8B5CF6); }
.sg-glow { display: block; width: 16px; height: 16px; border-radius: 50% !important; background: #F0ABFC; box-shadow: 0 0 10px 3px rgba(236,72,153,.6); }
.sg-txt { font-size: .8rem; font-weight: 700; color: #FDE68A; }
@media (max-width: 560px) {
  .sg-row { flex-wrap: wrap; }
  .sg-what { max-width: none; flex-basis: 100%; text-align: left; padding-left: calc(38px + .7rem); }
}

/* v34 — a person's own profile picture is an emoji again (the only emoji on the site);
   it takes its size from the circle it sits in */
.av-emo { display: inline-block; line-height: 1; font-style: normal; font-weight: 400; letter-spacing: 0; text-shadow: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  -webkit-text-fill-color: initial; }

/* the owner's row in the Уран бүтээлч tab: whose PIN opens the owner tile, and changing it */
.owner-pin-row { align-items: center !important; gap: .8rem; flex-wrap: wrap; }
.opr-crown { width: 44px; height: 44px; flex: none; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #FEF3C7, #FDE68A 45%, #F5D0FE); }
.opr-crown .em-crown { display: block; width: 24px; height: 19px; }
.opr-sub { font-size: .74rem; color: var(--s0-text2); margin-top: .1rem; }
.opr-btn { font-size: .76rem; padding: .4rem .8rem; border-radius: 8px !important; border: 1px solid var(--border); background: transparent;
  color: var(--gold); cursor: pointer; white-space: nowrap; }
.opr-form { display: none; flex-basis: 100%; align-items: center; gap: .5rem; flex-wrap: wrap; padding-left: calc(44px + .8rem); }
.opr-form.open { display: flex; }
.opr-form input { width: 110px; text-align: center; letter-spacing: .35rem; font-size: 1rem; padding: .45rem .6rem; }
.opr-form small { flex-basis: 100%; font-size: .7rem; color: var(--s0-text2); }
.opr-form button { font-size: .78rem; padding: .45rem .9rem; border-radius: 8px !important; border: none; background: #7C3AED; color: #fff; cursor: pointer; }
/* ═══════════════════════════════════════════════════════════════════
   v35 — super admin: bookings by month / day (CSV), user history, salon bookings by artist
   ═══════════════════════════════════════════════════════════════════ */
.sab-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 .7rem; }
.sab-title { font-size: .8rem; color: #a89a92; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sab-year { display: inline-flex; align-items: center; gap: .2rem; }
.sab-year b { color: #E8DDD0; font-size: .9rem; min-width: 2.6rem; text-align: center; }
.sab-year button { width: 26px; height: 26px; border-radius: 50% !important; border: 1px solid rgba(196,146,74,.3); background: transparent;
  color: #E8DDD0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.sab-dl { font-size: .74rem; padding: .45rem .9rem; border-radius: 8px !important; border: 1px solid rgba(124,58,237,.6);
  background: rgba(124,58,237,.18); color: #DDD6FE; cursor: pointer; white-space: nowrap; }
.sab-dl:hover { background: rgba(124,58,237,.32); }
.sab-dl:disabled { opacity: .6; cursor: wait; }
.sab-note { font-size: .7rem; color: #8a7a72; line-height: 1.5; margin-top: .5rem; }

.sab-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 150px; }
.sab-mbar, .sab-day { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 3px; min-width: 0;
  padding: 0; border: none; background: transparent; cursor: pointer; color: #a89a92; font: inherit; }
.sab-n { font-size: .62rem; color: #E8DDD0; text-align: center; min-height: .9em; line-height: 1; }
.sab-track { flex: 1; display: flex; align-items: flex-end; border-radius: 4px !important; background: rgba(255,255,255,.03); }
.sab-fill { display: block; width: 100%; height: max(3px, calc(var(--h, 0) * 100%)); border-radius: 4px 4px 1px 1px !important;
  background: linear-gradient(180deg, #A78BFA, #7C3AED); transition: filter .15s, transform .15s; }
.zero .sab-fill { background: rgba(255,255,255,.12); }
.sab-mbar:hover .sab-fill, .sab-mbar:focus-visible .sab-fill, .sab-day:hover .sab-fill, .sab-day:focus-visible .sab-fill { filter: brightness(1.25); }
.sab-mbar:focus-visible, .sab-day:focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }
.sab-ml { font-size: .6rem; text-align: center; color: #8a7a72; }

.sab-ov .sab-box { position: relative; width: min(860px, 100%); max-height: 88vh; }
.sab-mhead { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .8rem; }
.sab-mhead h3 { font-family: var(--font-s); font-size: 1.25rem; color: #F5EDE3 !important; margin: 0 0 .25rem; }
.sab-sum { font-size: .74rem; color: #a89a92; line-height: 1.5; }
.sab-sum b { color: #E8DDD0; }
.sab-x { width: 32px; height: 32px; flex: none; border-radius: 50% !important; border: 1px solid rgba(196,146,74,.3); background: transparent;
  color: #E8DDD0; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0; }
.sab-x.small { width: 24px; height: 24px; font-size: .95rem; margin-left: .3rem; }
.sab-mbar-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sab-nav { font-size: .74rem; padding: .4rem .8rem; border-radius: 8px !important; border: 1px solid rgba(196,146,74,.25); background: transparent; color: #a89a92; cursor: pointer; }
.sab-wk { display: none; }
.sab-days { display: flex; gap: 3px; height: 170px; }
.sab-day { flex: 1; }
.sab-dl2 { font-size: .6rem; text-align: center; color: #a89a92; line-height: 1.15; display: flex; flex-direction: column; }
.sab-dl2 small { font-size: .5rem; color: #6f625b; }
.sab-day.we .sab-dl2 small { color: #C4B5FD; }
.sab-day.today .sab-dl2 { color: #FDE68A; font-weight: 700; }
.sab-day.pinned .sab-track { box-shadow: 0 0 0 2px #FDE68A; }

.sab-pop { position: fixed; z-index: 900; width: 320px; max-width: calc(100vw - 16px); background: #2a1d12; color: #E8DDD0;
  border: 1px solid rgba(167,139,250,.45); border-radius: 12px !important; box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: .7rem .8rem; }
.sab-pop.pinned { border-color: #FDE68A; }
.sabp-head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.sabp-head span { margin-left: auto; font-size: .7rem; color: #a89a92; }
.sabp-sum { font-size: .66rem; color: #a89a92; margin: .25rem 0 .4rem; }
.sabp-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; margin-top: .3rem; }
.sabp-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: .5rem; align-items: center; padding: .35rem .4rem;
  border-radius: 8px !important; background: rgba(255,255,255,.04); }
.sabp-t { font-size: .74rem; font-weight: 600; color: #E8DDD0; }
.sabp-w { min-width: 0; display: flex; flex-direction: column; }
.sabp-w b { font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sabp-w small { font-size: .66rem; color: #a89a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sabp-empty { font-size: .74rem; color: #8a7a72; padding: .4rem 0; }
.sab-st { font-size: .62rem; padding: .15rem .5rem; border-radius: 999px !important; white-space: nowrap; }
.sab-st.st-completed { background: rgba(100,180,100,.16); color: #86d886; }
.sab-st.st-no_show   { background: rgba(200,80,80,.18);  color: #f08a8a; }
.sab-st.st-cancelled { background: rgba(255,255,255,.08); color: #a89a92; }
.sab-st.st-active    { background: rgba(224,176,96,.16); color: #e0b060; }

.sab-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .8rem; }
.sab-bk { padding: .6rem .75rem; border-radius: 10px !important; background: rgba(255,255,255,.045); border-left: 3px solid rgba(224,176,96,.6); }
.sab-bk.st-completed { border-left-color: rgba(100,180,100,.7); }
.sab-bk.st-no_show { border-left-color: rgba(200,80,80,.8); }
.sab-bk.st-cancelled { border-left-color: rgba(255,255,255,.18); opacity: .75; }
.sab-bk-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; color: #E8DDD0; }
.sab-bk-l { font-size: .74rem; color: #a89a92; margin-top: .2rem; line-height: 1.45; }
.sab-bk-l2 { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.sab-who { font-size: .66rem; padding: .12rem .5rem; border-radius: 999px !important; background: rgba(124,58,237,.2); color: #DDD6FE; }
.sab-who.salon { background: rgba(196,146,74,.2); color: #F5D0A9; }
.sab-cl { font-size: .66rem; color: #8a7a72; }
.sab-h5 { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #8a7a72; margin: .9rem 0 .45rem; }
.sab-back { background: none; border: none; color: #C4B5FD; cursor: pointer; font-size: .8rem; padding: 0; }
.sab-artists { display: flex; flex-direction: column; gap: .45rem; }
.sab-art { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .6rem .7rem; cursor: pointer;
  border-radius: 10px !important; border: 1px solid rgba(196,146,74,.2); background: rgba(255,255,255,.04); color: #E8DDD0; font: inherit; }
.sab-art:hover { border-color: rgba(167,139,250,.6); }
.sab-art-pic { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50% !important; overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: linear-gradient(145deg, #8B5CF6, #EC4899); }
.sab-art-pic i { font-style: normal; font-weight: 700; color: #fff; font-size: 1rem; }
.sab-art-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; }
.sab-art-pic .em-crown { display: block; width: 22px; height: 17px; }
.sab-art-pic:has(.em-crown) { background: linear-gradient(145deg, #FEF3C7, #FDE68A 45%, #F5D0FE); }
.sab-art-pic:has(.em-crown) i { display: none; }
.sab-art-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sab-art-t b { font-size: .86rem; font-weight: 600; }
.sab-art-t small { font-size: .7rem; color: #a89a92; }
.sab-art-go { color: #8a7a72; font-size: 1.2rem; }
.sa-hist-btn { padding: .4rem .9rem; background: rgba(124,58,237,.16); color: #DDD6FE; border: 1px solid rgba(124,58,237,.45);
  border-radius: 6px !important; cursor: pointer; font-size: .78rem; }

/* a pending payment may have gone through without being recorded */
.pay-check-warn { margin-top: .6rem; padding: .5rem .7rem; border-radius: 8px !important; font-size: .74rem; line-height: 1.45;
  background: rgba(224,176,96,.12); border: 1px solid rgba(224,176,96,.45); color: #F3C77A; }

@media (max-width: 560px) {
  .sab-months { gap: 2px; height: 130px; }
  .sab-n { font-size: .56rem; }
  /* a month on a phone: a calendar (7 columns), the colour shows how busy the day was */
  .sab-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; font-size: .6rem; color: #8a7a72; text-align: center; }
  .sab-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: auto; }
  .sab-day { aspect-ratio: 1; position: relative; justify-content: center; align-items: center; border-radius: 8px !important;
    background: rgba(124,58,237, calc(.08 + var(--h, 0) * .62)); }
  .sab-day:first-child { grid-column-start: var(--gc, 1); }
  .sab-day.zero { background: rgba(255,255,255,.04); }
  .sab-day .sab-track, .sab-day .sab-dl2 small { display: none; }
  .sab-day .sab-dl2 { font-size: .74rem; color: #E8DDD0; }
  .sab-day .sab-n { position: absolute; top: 3px; right: 4px; font-size: .52rem; color: #FDE68A; }
  .sab-day.pinned { box-shadow: 0 0 0 2px #FDE68A; }
  .sab-pop { width: calc(100vw - 16px); }
}
/* XP settings explained */
.sx-hint { font-size: .66rem; color: #8a7a72; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.sx-pdesc { display: block; font-size: .64rem; color: #8a7a72; line-height: 1.35; margin-top: .1rem; }

/* the super admin's salon editor title (the global dark heading colour made it unreadable) */
#saEditOverlay h3 { color: #C4B5FD !important; }

/* ═══════════════════════════════════════════════════════════════════
   v37 — staff login screen, per-service calendar blocks, profile menus,
   salon panel on phones
   ═══════════════════════════════════════════════════════════════════ */

/* ── «Артист сонгох»: one framed card on a soft brand backdrop ── */
#artistGateOverlay {
  position: fixed; inset: 0; z-index: 950; display: none; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px);
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(167,139,250,.30), transparent 62%),
    radial-gradient(760px 480px at 105% 108%, rgba(244,114,182,.24), transparent 60%),
    #FAF8FF;
}
#artistGateOverlay.open { display: flex; align-items: flex-start; justify-content: center; }
@media (min-height: 640px) { #artistGateOverlay.open { align-items: center; } }
.gate-card {
  position: relative; width: 100%; max-width: 660px; padding: 30px 30px 18px; box-sizing: border-box;
  border-radius: 28px !important; border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, #C4B5FD, #F9A8D4 55%, #FDE68A) border-box;
  box-shadow: 0 30px 70px -24px rgba(76,29,149,.32), 0 6px 18px rgba(17,17,17,.05);
}
.gate-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 22px; }
.gate-mark { width: 44px; height: 44px; margin-bottom: 6px; filter: drop-shadow(0 6px 12px rgba(124,58,237,.25)); }
.gate-salon { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7C3AED; min-height: 1em; }
.gate-title { font-family: var(--font-s); font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: #1D1630; margin: 2px 0 0; text-wrap: balance; }
.gate-sub { margin: 4px 0 0; font-size: .86rem; color: #6B6280; max-width: 34ch; }
#artistGateGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 14px; }
.gate-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; margin: 0;
  padding: 18px 10px 15px; cursor: pointer; font: inherit; color: inherit; text-align: center;
  background: #FCFBFF; border: 1px solid #ECE6F8; border-radius: 20px !important;
  transition: transform .18s var(--ease), box-shadow .18s, border-color .18s, background .18s;
}
.gate-tile:hover { transform: translateY(-3px); background: #fff; border-color: #C4B5FD; box-shadow: 0 16px 30px -14px rgba(124,58,237,.42); }
.gate-tile:active { transform: translateY(0) scale(.98); }
.gate-tile:focus-visible { outline: 3px solid rgba(124,58,237,.45); outline-offset: 2px; }
.gate-av {
  width: 76px; height: 76px; flex: none; border-radius: 50% !important; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
  background: linear-gradient(145deg, #8B5CF6, #EC4899); box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px #E4D8FD, 0 10px 20px -8px rgba(124,58,237,.45);
}
.gate-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-letter { display: none; font-size: 1.9rem; font-weight: 600; color: #fff; line-height: 1; }
.gate-av.noimg img { display: none; }
.gate-av.noimg .gate-letter { display: block; }
.gate-av.owner-av { background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.9) 0 16%, transparent 46%), linear-gradient(145deg, #FEF3C7, #FDE68A 45%, #F5D0FE);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px #FCD34D, 0 10px 20px -8px rgba(217,119,6,.45); }
.gate-av.owner-av .em-crown { display: block; width: 38px; height: 30px; filter: drop-shadow(0 3px 5px rgba(180,83,9,.3)); }
.gate-tile.owner { background: linear-gradient(180deg, #FFFBEB, #FFFFFF 70%); border-color: #FDE68A; }
.gate-tile.owner:hover { border-color: #F59E0B; box-shadow: 0 16px 30px -14px rgba(217,119,6,.45); }
.gate-tile-name { font-size: .98rem; font-weight: 600; color: #1D1630; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-tile-sub { font-size: .72rem; color: #7A7090; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gate-tile.owner .gate-tile-sub { color: #B45309; }
#artistGatePin { display: none; text-align: center; max-width: 340px; margin: 0 auto; }
#artistGatePin .gate-back { display: inline-flex; align-items: center; gap: .3rem; background: #F5F3FF; border: 1px solid #E4D8FD; color: #6D28D9;
  border-radius: 999px !important; padding: .35rem .9rem; font-size: .8rem; cursor: pointer; margin-bottom: 1.1rem; }
.gate-pin-who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 1rem; }
.gate-pin-who .gate-av { width: 64px; height: 64px; }
.gate-pin-who .gate-letter { font-size: 1.6rem; }
.gate-pin-name { font-size: 1.05rem; font-weight: 600; color: #1D1630; }
.gate-pin-input, .gate-pw-input {
  display: block; margin: 0 auto .7rem; width: 200px; max-width: 100%; box-sizing: border-box; text-align: center;
  padding: .75rem .8rem; border: 1.5px solid #DDD3F5 !important; border-radius: 14px !important; background: #FBFAFF; color: #1D1630;
  transition: border-color .15s, box-shadow .15s;
}
.gate-pin-input { font-size: 1.5rem; letter-spacing: .6rem; padding-left: 1.4rem; }
.gate-pw-input { width: 260px; font-size: 1rem; }
.gate-pin-input:focus, .gate-pw-input:focus { outline: none; border-color: #8B5CF6 !important; box-shadow: 0 0 0 4px rgba(139,92,246,.16); }
.gate-pin-hint { font-size: .78rem; color: #6B7280; margin: -.2rem 0 .5rem; }
.gate-pin-hint:empty { display: none; }
#artistGatePin .field-error { margin-bottom: .7rem; min-height: 0; }
.gate-go { border: none; cursor: pointer; color: #fff; font: 600 .92rem var(--font-b); letter-spacing: .02em; padding: .8rem 2.4rem;
  border-radius: 999px !important; background: linear-gradient(135deg, #7C3AED, #EC4899); box-shadow: 0 12px 24px -10px rgba(124,58,237,.6); }
.gate-go:hover { filter: brightness(1.05); }
.gate-go:active { transform: scale(.98); }
.gate-pw-link { display: block; margin: 1.1rem auto 0; background: none; border: none; color: #7C3AED; font-size: .8rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.gate-foot { display: flex; justify-content: center; margin-top: 20px; padding-top: 14px; border-top: 1px solid #F0EBFA; border-radius: 0 !important; }
.gate-logout { background: none; border: none; cursor: pointer; font-size: .78rem; color: #8A8099; padding: .3rem .6rem; }
.gate-logout:hover { color: #C2410C; }
@media (max-width: 540px) {
  .gate-card { padding: 24px 16px 14px; border-radius: 24px !important; }
  .gate-title { font-size: 1.75rem; }
  #artistGateGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gate-tile { padding: 15px 8px 13px; }
  .gate-av { width: 64px; height: 64px; }
  .gate-letter { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .gate-tile, .gate-tile:hover { transition: none; transform: none; } }

/* ── calendar: each service of a visit is its own block ── */
.gc-ev-n { margin-left: .35em; font-size: .62rem; font-weight: 700; padding: 0 .38em; border-radius: 999px; background: rgba(255,255,255,.28); vertical-align: 1px; }
.gc-ev.unpaid .gc-ev-n, .gc-ev.pending .gc-ev-n { background: rgba(0,0,0,.08); }
.gc-an { font-style: normal; font-size: .66rem; font-weight: 700; color: #7C3AED; background: #F3EEFF; border-radius: 999px; padding: 0 .4em; margin-left: .25em; }
.gcs-parts > span:last-child { display: flex; flex-direction: column; gap: .35rem; }
.gcs-part b { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .3em; }

/* ── the customer's bookings: services with their times; locked once started ── */
.bhi-parts { display: flex; flex-direction: column; gap: .25rem; margin-top: .45rem; }
.bhi-part { display: flex; gap: .6rem; align-items: baseline; font-size: .86rem; }
.bhi-part b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .78rem; color: var(--gold); white-space: nowrap; }
.bhi-locked { align-self: center; font-size: .72rem; color: #9A8FA8; }

/* ── super admin XP settings: the fixed «Ирсэн» rule ── */
.sx-fixed { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(167,139,250,.08); border: 1px dashed rgba(167,139,250,.35); }
.sx-fixed b { font-size: .74rem; color: #C4B5FD; font-weight: 600; }
.sx-fixed span { font-size: .7rem; color: #a89a92; line-height: 1.45; }

/* ── salon panel on phones: the add-service row wraps; room at the bottom of every tab ── */
@media (max-width: 640px) {
  .add-svc-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; }
  .add-svc-row > #newSvcType, .add-svc-row > #newSvcName, .add-svc-row > #newSvcDep { grid-column: 1 / -1; }
  .add-svc-row > * { width: 100% !important; min-width: 0; box-sizing: border-box; }
  .add-svc-row > select, .add-svc-row > input { padding: .65rem .8rem; font-size: .9rem; border-radius: 10px; }
  .add-svc-row > label { justify-content: flex-start; }
  .add-svc-row > label input[type=checkbox] { flex: none !important; width: 18px !important; height: 18px; padding: 0; margin: 0; }
  .add-svc-row > button { padding: .7rem 1rem; }
}
.admin-section.active:not(#admin-calendar) { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }

/* ── computer: the customer's profile menu is a panel on the right (≈ 1/5 of the screen) ── */
.md-x { display: none; }
@media (min-width: 901px) {
  .mobile-drawer.side {
    top: var(--nav-h, 64px); bottom: 0; left: auto; right: 0; width: clamp(300px, 20vw, 380px);
    transform: translateX(104%); border-radius: 22px 0 0 0 !important; overflow-y: auto;
    border-left: 1px solid rgba(124,58,237,.12); border-bottom: none;
    box-shadow: -24px 0 60px -20px rgba(17,17,17,.22) !important; z-index: 620;
  }
  .mobile-drawer.side.open { transform: none; }
  .mobile-drawer.side .mobile-drawer-inner { min-height: 100%; box-sizing: border-box; padding: 1.4rem 1.4rem 1.2rem !important; display: flex; flex-direction: column; }
  .mobile-drawer.side .md-head { padding: .2rem 0 1.1rem; }
  .mobile-drawer.side .md-av { width: 56px; height: 56px; font-size: 1.75rem; }
  .mobile-drawer.side .md-x { display: flex; margin-left: auto; flex: none; width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer;
    border-radius: 50% !important; border: 1px solid rgba(124,58,237,.2); background: #F5F3FF; color: #8B5CF6; padding: 0; }
  .mobile-drawer.side .md-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-drawer.side .md-x:hover { background: #EDE9FE; }
  .mobile-drawer.side .md-rows > a { padding: 1rem .3rem !important; border-radius: 12px; }
  .mobile-drawer.side .md-rows > a:hover { background: var(--bt-soft); }
  .menu-backdrop.open { display: block; background: rgba(17,17,17,.16); z-index: 610; }
  body.dark-mode .mobile-drawer.side { border-left-color: rgba(255,255,255,.08); }
  body.dark-mode .mobile-drawer.side .md-x { background: #221c33; border-color: rgba(167,139,250,.35); color: #C4B5FD; }
}
.md-next { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
.md-next:empty { display: none; }
.md-next-h { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9A8FA8; margin-bottom: .1rem; }
.md-bk { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  padding: .7rem .75rem; border-radius: 14px !important; border: 1px solid #EEE8F9; background: #FCFBFF; transition: border-color .15s, box-shadow .15s; }
.md-bk:hover { border-color: #C4B5FD; box-shadow: 0 10px 22px -14px rgba(124,58,237,.5); }
.md-bk-d { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: .3rem .2rem; border-radius: 10px; background: #F5F3FF; }
.md-bk-d b { font-size: .95rem; color: #6D28D9; font-variant-numeric: tabular-nums; }
.md-bk-d small { font-size: .62rem; color: #7A7090; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-bk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-bk-t b { font-size: .84rem; font-weight: 600; color: #1D1630; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-bk-t small { font-size: .72rem; color: #7A7090; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-bk-st { display: block; margin-top: .3rem; }
.md-bk-st .status-badge { display: inline-block; font-size: .6rem; padding: .12rem .5rem; }
.md-more { align-self: flex-start; background: none; border: none; color: #7C3AED; font-size: .78rem; cursor: pointer; padding: .2rem 0; }
.md-empty { display: flex; flex-direction: column; gap: .2rem; padding: .9rem; border-radius: 14px; border: 1px dashed #E4D8FD; background: #FCFBFF; }
.md-empty b { font-size: .84rem; color: #1D1630; font-weight: 600; }
.md-empty span { font-size: .74rem; color: #7A7090; }
.md-foot { margin-top: auto; padding-top: 1rem; }
.md-foot > a { display: flex !important; align-items: center; gap: .9rem; padding: .9rem .3rem !important; font-size: .86rem; letter-spacing: .16em;
  text-transform: uppercase; color: #C2410C !important; cursor: pointer; text-decoration: none; border-top: 1px solid rgba(0,0,0,.08); border-bottom: none !important; border-radius: 0 !important; }
.md-foot > a .md-ic { background: rgba(234,88,12,0.08); color: #EA580C; }
body.dark-mode .md-bk, body.dark-mode .md-empty { background: #1d1828; border-color: rgba(167,139,250,.18); }
body.dark-mode .md-bk-d { background: rgba(167,139,250,.14); }
body.dark-mode .md-bk-d b { color: #C4B5FD; }
body.dark-mode .md-bk-t b, body.dark-mode .md-empty b { color: #F0F0F0; }
body.dark-mode .md-foot > a { border-color: rgba(255,255,255,.08); }

/* ── computer: the staff dropdown (super admin / salon) — same size, new look ── */
.user-menu { background: #FFFFFF !important; border: 1px solid rgba(124,58,237,.14) !important; border-radius: 18px !important; overflow: hidden;
  box-shadow: 0 22px 50px -18px rgba(44,20,90,.28), 0 4px 12px rgba(17,17,17,.06) !important; backdrop-filter: none; padding: .35rem; top: 54px; }
.user-menu-header { margin: 0 0 .3rem; padding: .85rem .8rem !important; border: none !important; border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(236,72,153,.08)); }
.user-menu .user-avatar-large { width: 44px; height: 44px; flex: none; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; background: var(--bt-grad); box-shadow: 0 6px 14px rgba(124,58,237,.28); overflow: hidden; }
.um-who { min-width: 0; }
.user-menu-name { font-size: .9rem !important; font-weight: 600 !important; color: #1D1630 !important; }
.user-menu-email { font-size: .72rem !important; color: #7A7090 !important; }
.user-menu a, .user-menu button { display: flex; align-items: center; gap: .7rem; border-radius: 12px !important; padding: .6rem .7rem !important;
  font-size: .8rem !important; color: #3F3A4A !important; letter-spacing: .02em; }
.user-menu a:hover, .user-menu button:hover { background: rgba(124,58,237,.07) !important; color: #6D28D9 !important; }
.um-ic { width: 30px; height: 30px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bt-soft); color: var(--gold); }
.um-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.user-menu .divider { height: 1px; background: rgba(0,0,0,.07) !important; margin: .3rem .4rem; }
.user-menu .um-out { color: #C2410C !important; }
.user-menu .um-out .um-ic { background: rgba(234,88,12,.08); color: #EA580C; }
.user-menu .um-out:hover { background: rgba(234,88,12,.06) !important; color: #C2410C !important; }
body.dark-mode .user-menu { background: #1B1726 !important; border-color: rgba(167,139,250,.22) !important; box-shadow: 0 22px 50px -18px rgba(0,0,0,.7) !important; }
body.dark-mode .user-menu-header { background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.12)); }
body.dark-mode .user-menu-name { color: #F2EEFA !important; }
body.dark-mode .user-menu-email { color: #A79FBD !important; }
body.dark-mode .user-menu a, body.dark-mode .user-menu button { color: #D9D3E6 !important; }
body.dark-mode .user-menu a:hover, body.dark-mode .user-menu button:hover { background: rgba(167,139,250,.12) !important; color: #E9DDFF !important; }
body.dark-mode .um-ic { background: rgba(167,139,250,.14); color: #C4B5FD; }
body.dark-mode .user-menu .divider { background: rgba(255,255,255,.08) !important; }

/* calendar list view on phones: the date goes above its bookings so names and services have room */
@media (max-width: 640px) {
  .gc-aday { flex-direction: column; gap: .2rem; }
  .gc-adate { width: auto; align-items: center; }
  .gc-adate .gc-adow br { display: none; }
  .gc-adate .gc-adow { margin-left: .2rem; }
  .gc-arow { flex-wrap: wrap; row-gap: .2rem; }
  .gc-atitle { flex: 1 1 120px; }
  .gc-arow > .gc-ast { margin-left: calc(72px + 10px + 1.4rem); }
}