/* ══════════════════════════════════════
   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
═══════════════════════════════════════ */
#artistGateOverlay {
  position: fixed; inset: 0; z-index: 950;
  background: #FFFFFF;
  display: none; align-items: center; justify-content: center;
  flex-direction: column; padding: 2rem;
}
#artistGateOverlay.open { display: flex; }
.gate-title { font-family: var(--font-s); font-size: 1.6rem; color: #111; margin-bottom: 1.6rem; text-align: center; }
#artistGateGrid {
  display: grid; grid-template-columns: repeat(auto-fill, 130px); gap: 1.4rem;
  justify-content: center; max-width: 900px; max-height: 60vh; overflow-y: auto; padding: .5rem;
}
.gate-tile {
  width: 130px; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  cursor: pointer; position: relative; background: #eee; border: 2px solid transparent;
  transition: .2s;
}
.gate-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.gate-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-tile-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color: #fff; font-size: .78rem; padding: .5rem .4rem .35rem; text-align: center;
  opacity: 0; transition: opacity .2s;
}
/* Desktop (hover-capable): name hidden until hover */
@media (hover: hover) {
  .gate-tile:hover .gate-tile-name { opacity: 1; }
}
/* Touch devices: name always visible, placed under the photo, not overlapping */
@media (hover: none) {
  .gate-tile { aspect-ratio: auto; background: transparent; }
  .gate-tile img { aspect-ratio: 1; border-radius: 12px; }
  .gate-tile-name {
    position: static; background: none; color: #111; opacity: 1;
    padding: .5rem 0 0; text-align: center; font-size: .8rem;
  }
}
#artistGatePin { display: none; text-align: center; max-width: 320px; }
#artistGatePin .gate-back { background: none; border: none; color: var(--gold); cursor: pointer; font-size: .85rem; margin-bottom: 1rem; }

/* 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; }
}