:root {
  --bg: #020617;
  --surface: #0f172a;
  --card: #111827;
  --txt: #f8fafc;
  --muted: #94a3b8;
  --accent: #be3144;
  --accent-contrast: #ffffff;
  --link: color-mix(in srgb, var(--accent) 70%, var(--txt) 30%);
  --link-hover: color-mix(in srgb, var(--accent) 85%, #fff 15%);
  --anchor-offset: 6.25rem;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: var(--bg); color: var(--txt); line-height: 1.5; position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background-image: none; transition: opacity .2s ease; }
body[data-pattern-enabled='1']::before { z-index: 0; opacity: var(--pattern-opacity, 0.12); background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px), repeating-radial-gradient(circle at center, transparent 0 calc(var(--pattern-spacing, 120px) - 2px), rgba(255, 255, 255, 0.02) calc(var(--pattern-spacing, 120px) - 2px) var(--pattern-spacing, 120px)), repeating-linear-gradient(45deg, transparent 0 calc(var(--pattern-spacing, 120px) - 2px), rgba(255, 255, 255, 0.02) calc(var(--pattern-spacing, 120px) - 2px) var(--pattern-spacing, 120px)); }
body[data-pattern-enabled='1']::after { content: var(--pattern-glyphs, '✂'); white-space: pre; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--pattern-opacity, 0.12); color: rgba(255, 255, 255, 0.75); font-size: var(--pattern-icon-size, 44px); line-height: var(--pattern-spacing, 120px); letter-spacing: calc(var(--pattern-spacing, 120px) * .32); text-shadow: 0 0 1px rgba(255, 255, 255, .22); overflow: hidden; }
html { scroll-padding-top: var(--anchor-offset); }
[id] { scroll-margin-top: var(--anchor-offset); }
a,
a:visited,
a:active {
  color: var(--link);
  text-decoration-thickness: .08em;
  text-underline-offset: 2px;
}
a:hover,
a:focus-visible {
  color: var(--link-hover);
}
.container { width: min(1100px, 92%); margin: auto; }
.topbar { position: sticky; top: var(--admin-toolbar-offset, 0px); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid #1e293b; z-index: 50; }

.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.brand,
.brand:visited,
.brand:hover,
.brand:focus-visible { display: flex; align-items: center; gap: .5rem; color: var(--header-brand-color, #ffffff); text-decoration: none; font-weight: 700; }
.brand picture { display: inline-flex; }
.brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: #fff; }
.brand span { letter-spacing: .02em; color: var(--header-brand-color, #ffffff); }

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.primary-nav { display: flex; align-items: center; gap: .5rem; }
.social-circle { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 999px; display: inline-grid; place-items: center; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
button.social-circle { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; background: transparent; padding: 0; }
.social-circle svg { width: 18px; height: 18px; }
.social-circle:hover,
.social-circle:focus-visible { transform: translateY(-1px); filter: brightness(1.05); }
.social-circle-google { background: #ffffff; border-color: #e5e7eb; }
.social-circle-google svg { width: 1.2rem; height: 1.2rem; }
.social-circle-facebook { background: #1877f2; }
.social-circle-x { background: #000; }
.social-circle-tiktok { background: #000; }
.social-circle-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-circle-linkedin { background: #0a66c2; }
.social-circle-threads { background: #000000; }
.social-circle-birdseye { background: #2563eb; }
.social-circle-shopify { background: #95bf47; }
.social-circle-website { background: #334155; }
.social-circle-yelp { background: #d32323; }
.social-circle-call { background: #059669; }
.social-circle-text { background: #0284c7; }
.social-circle-email { background: #f97316; }
.social-circle-subscribe { background: #7c3aed; }
.primary-nav a { color: var(--txt); text-decoration: none; font-weight: 600; padding: .45rem .6rem; border-radius: 8px; }
.primary-nav a:hover,
.primary-nav a:focus-visible { color: color-mix(in srgb, var(--txt) 75%, var(--accent)); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.nav-book { margin-left: .4rem; white-space: nowrap; }
.nav-toggle { display: none; background: transparent; color: var(--txt); border: 1px solid #334155; border-radius: 8px; padding: .45rem .75rem; font-weight: 600; cursor: pointer; }

.hero { padding: 4rem 0; display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-copy { max-width: 62ch; justify-self: start; }
.hero-media { justify-self: center; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: clamp(.25rem, 1.8vw, 1rem); }
.hero-logo-image { width: min(100%, 320px); display: block; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 18px 34px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .35); background: #fff; margin-inline: auto; }
.hero-social-bar { margin-top: .85rem; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.landing-page > .hero-social-bar { margin: 0 auto 1rem; }
.btn,
.btn:visited { background: var(--accent); color: var(--accent-contrast, #ffffff); padding: .7rem 1rem; border-radius: 999px; text-decoration: none; border: none; display: inline-block; cursor: pointer; font-weight: 700; font: inherit; font-size: 1rem; line-height: 1.2; }
.btn:hover,
.btn:focus-visible { filter: brightness(1.08); color: var(--accent-contrast, #ffffff); }
.btn.ghost,
.btn.ghost:visited { background: color-mix(in srgb, var(--surface) 85%, #000 15%); border: 1px solid color-mix(in srgb, var(--accent) 45%, #64748b 55%); color: var(--txt); }
.btn.ghost:hover,
.btn.ghost:focus-visible { color: var(--txt); border-color: var(--accent); background: color-mix(in srgb, var(--surface) 55%, var(--accent) 45%); }
.cta-row { display: flex; flex-wrap: wrap; gap: .6rem; }

.btn-with-icon { display: inline-flex; align-items: center; gap: .4rem; }
.btn-with-icon span[aria-hidden='true'] { line-height: 1; }

.section-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.section-view-all {
  font-size: .95rem;
  font-weight: 700;
}

.dashboard-row-warning {
  background: color-mix(in srgb, #f59e0b 20%, var(--card) 80%);
}

.dashboard-row-danger {
  background: color-mix(in srgb, #ef4444 20%, var(--card) 80%);
}

.dashboard-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid #1f2937; padding: 1rem; border-radius: 14px; }
.card img { width: 100%; border-radius: 8px; }
#reviews .review-showcase-photo { width: 100%; max-height: 180px; object-fit: cover; object-position: top; }
#reviews .review-card { display: grid; gap: .8rem; }
#reviews .review-meta { display: flex; align-items: center; gap: .65rem; }
#reviews .reviewer-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center; border: 2px solid color-mix(in srgb, var(--accent) 45%, #fff 55%); background: #fff; flex: 0 0 auto; }
#reviews .reviewer-avatar-fallback { display: inline-grid; place-items: center; font-weight: 700; color: var(--accent-contrast, #fff); background: var(--accent); }
#reviews .review-meta small { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.setup { padding: 3rem 0; }
.setup form { display: grid; gap: .75rem; max-width: 760px; }
.setup label { display: block; line-height: 1.35; }
.setup input, .setup select, .setup textarea { width: 100%; padding: .75rem; border-radius: 8px; border: 1px solid #334155; background: var(--surface); color: #fff; }
.template-panel { display: grid; gap: .55rem; padding: .7rem; border: 1px solid #334155; border-radius: 12px; background: color-mix(in srgb, var(--card) 85%, #000 15%); }
.template-token-help { border: 1px solid #334155; border-radius: 10px; padding: .6rem .75rem; background: color-mix(in srgb, var(--surface) 86%, #000 14%); margin-bottom: .25rem; }
.template-token-help summary { cursor: pointer; font-weight: 700; }
.template-token-help p { margin: .5rem 0 .35rem; }
.template-token-help ul { margin: .25rem 0 0; padding-left: 1.15rem; }
input:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']),
select,
textarea {
  font-size: 16px;
  min-height: 2.75rem;
}

.setup select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23cbd5e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: right .8rem center;
}
.error { color: #fca5a5; }
.site-footer { margin-top: 3rem; border-top: 1px solid #1e293b; background: color-mix(in srgb, var(--surface) 80%, #000 20%); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(180px, .8fr); gap: 1.1rem 1.5rem; padding: 2.2rem 0; align-items: start; }
.footer-brand-block { display: grid; gap: .95rem; }
.footer-logo { width: min(260px, 100%); height: auto; border-radius: 8px; filter: drop-shadow(0 0 var(--footer-logo-glow-blur, 22px) var(--footer-logo-glow-color, rgba(255, 255, 255, 0.9))); }
.footer-contact-links { display: flex; flex-wrap: nowrap; gap: .55rem; }
.footer-contact-links a { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #334155; padding: .45rem .7rem; border-radius: 999px; color: color-mix(in srgb, var(--txt) 90%, #fff 10%); text-decoration: none; font-weight: 600; white-space: nowrap; flex: 1 1 0; justify-content: center; }
.footer-contact-links a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, #334155); }
.footer-social-icon-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .55rem;
  max-width: 100%;
  padding: .5rem .15rem;
  overflow: visible;
}
.footer-tagline { margin: 0; color: var(--muted); max-width: 56ch; }
.footer-address { margin: -.15rem 0 0; color: color-mix(in srgb, var(--txt) 84%, #fff 16%); font-weight: 600; line-height: 1.4; }
.footer-links-block { display: grid; gap: .5rem; min-width: 0; justify-self: start; align-content: start; }
.footer-links-block h2,
.footer-links-block a { justify-self: start; }
.footer-links-heading { margin: 0 0 .25rem; font-size: 1rem; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: color-mix(in srgb, var(--txt) 82%, var(--accent) 18%); }
.footer-links-block a { color: color-mix(in srgb, var(--txt) 90%, #fff 10%); text-decoration: none; font-weight: 600; }
.footer-links-block a:hover, .footer-links-block a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.footer-meta-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem 1rem; padding-top: .45rem; border-top: 1px solid #1e293b; }
.footer-meta-row p { margin: 0; color: var(--muted); white-space: nowrap; }
.footer-creator { justify-self: start; }
.footer-version { justify-self: center; text-align: center; }
.footer-meta-row a,
.footer-meta-row a:visited { color: color-mix(in srgb, var(--txt) 90%, #fff 10%); text-decoration: none; font-weight: 600; }
.footer-meta-row a:hover,
.footer-meta-row a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.footer-policy-links { display: inline-flex; align-items: center; justify-self: end; flex-wrap: nowrap; gap: .55rem; white-space: nowrap; }
.footer-policy-separator { color: var(--muted); user-select: none; }
.footer-auth-form { margin: 0; display: inline; }
.footer-auth-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: color-mix(in srgb, var(--txt) 90%, #fff 10%);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.footer-auth-button:hover,
.footer-auth-button:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.theme-preview-list.compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.theme-preview-item { display: flex; gap: .6rem; align-items: center; background: var(--card); border: 1px solid #334155; padding: .5rem; border-radius: 10px; }
.theme-preview-item small { display: block; color: var(--muted); }
.theme-swatch { width: 56px; height: 36px; border-radius: 8px; border: 1px solid #1e293b; }
.theme-swatch.large { width: 100%; height: 110px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.theme-card { display: grid; gap: .5rem; border: 1px solid #334155; border-radius: 12px; padding: .8rem; background: var(--card); cursor: pointer; }
.theme-card input { width: 18px; height: 18px; }
.theme-card small { color: var(--muted); }
.theme-card.selected { outline: 2px solid var(--accent); }
.theme-grid-swatches { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .55rem; }
.theme-grid-swatches .theme-card { padding: .45rem; gap: .35rem; align-items: center; justify-items: center; text-align: center; }
.theme-grid-swatches .theme-card input { width: 16px; height: 16px; }
.theme-grid-swatches .theme-swatch { width: 100%; max-width: 74px; height: 40px; }
.theme-card-label { font-size: .73rem; line-height: 1.15; }
@media (min-width: 1200px) {
  .theme-grid-swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

body[data-theme='midnight-fade'] { --bg:#020617; --surface:#0f172a; --card:#111827; --txt:#f8fafc; --muted:#94a3b8; --accent:#be3144; --accent-contrast:#ffffff; }
body[data-theme='ocean-breeze'] { --bg:#082f49; --surface:#0f3c4d; --card:#134e4a; --txt:#ecfeff; --muted:#a5f3fc; --accent:#06b6d4; --accent-contrast:#05212b; }
body[data-theme='sunset-barber'] { --bg:#431407; --surface:#7c2d12; --card:#9a3412; --txt:#fff7ed; --muted:#fdba74; --accent:#f97316;  --accent-contrast:#2f1406;}
body[data-theme='forest-edge'] { --bg:#052e16; --surface:#14532d; --card:#166534; --txt:#f0fdf4; --muted:#86efac; --accent:#22c55e; --accent-contrast:#032a11; }
body[data-theme='royal-violet'] { --bg:#2e1065; --surface:#581c87; --card:#6b21a8; --txt:#faf5ff; --muted:#d8b4fe; --accent:#a855f7;  --accent-contrast:#1d063d;}
body[data-theme='golden-hour'] { --bg:#292524; --surface:#44403c; --card:#57534e; --txt:#fafaf9; --muted:#fcd34d; --accent:#f59e0b; --accent-contrast:#3f2500; }
body[data-theme='graphite-steel'] { --bg:#111827; --surface:#1f2937; --card:#374151; --txt:#f9fafb; --muted:#d1d5db; --accent:#9ca3af; --accent-contrast:#111827; }
body[data-theme='rosewood'] { --bg:#3f0f1f; --surface:#831843; --card:#9d174d; --txt:#fff1f2; --muted:#fda4af; --accent:#fb7185;  --accent-contrast:#3a0a16;}
body[data-theme='mint-cut'] { --bg:#0f172a; --surface:#1e293b; --card:#334155; --txt:#f8fafc; --muted:#99f6e4; --accent:#34d399; --accent-contrast:#052e1f; }
body[data-theme='cobalt-shop'] { --bg:#172554; --surface:#1d4ed8; --card:#1e40af; --txt:#eff6ff; --muted:#bfdbfe; --accent:#60a5fa; --accent-contrast:#0c1b4f; }
body[data-theme='ember-glow'] { --bg:#1f2937; --surface:#7f1d1d; --card:#991b1b; --txt:#fef2f2; --muted:#fca5a5; --accent:#ef4444;  --accent-contrast:#3a0909;}
body[data-theme='plum-night'] { --bg:#1e1b4b; --surface:#4c1d95; --card:#5b21b6; --txt:#f5f3ff; --muted:#ddd6fe; --accent:#c084fc;  --accent-contrast:#22063e;}
body[data-theme='olive-lounge'] { --bg:#1a2e05; --surface:#3f6212; --card:#4d7c0f; --txt:#f7fee7; --muted:#bef264; --accent:#84cc16; --accent-contrast:#1a2e05; }
body[data-theme='ruby-luxe'] { --bg:#2b0a0a; --surface:#7f1d1d; --card:#9f1239; --txt:#fff1f2; --muted:#fda4af; --accent:#f43f5e;  --accent-contrast:#2a060f;}
body[data-theme='skyline'] { --bg:#0f172a; --surface:#334155; --card:#475569; --txt:#f8fafc; --muted:#bae6fd; --accent:#38bdf8; --accent-contrast:#06273a; }
body[data-theme='teal-studio'] { --bg:#042f2e; --surface:#0f766e; --card:#115e59; --txt:#f0fdfa; --muted:#99f6e4; --accent:#2dd4bf; --accent-contrast:#05302c; }
body[data-theme='sandstone'] { --bg:#292524; --surface:#57534e; --card:#78716c; --txt:#fafaf9; --muted:#fcd34d; --accent:#fbbf24; --accent-contrast:#3f2b06; }
body[data-theme='neon-trim'] { --bg:#111827; --surface:#1f2937; --card:#374151; --txt:#f9fafb; --muted:#d9f99d; --accent:#a3e635; --accent-contrast:#1f2a06; }
body[data-theme='arctic-night'] { --bg:#082f49; --surface:#1e3a8a; --card:#1d4ed8; --txt:#eff6ff; --muted:#bfdbfe; --accent:#93c5fd; --accent-contrast:#102b63; }
body[data-theme='mocha-fade'] { --bg:#292524; --surface:#78350f; --card:#92400e; --txt:#fff7ed; --muted:#fdba74; --accent:#fb923c; --accent-contrast:#4a2308; }

body[data-theme='candy-cane'] { --bg:#7f1d1d; --surface:#b91c1c; --card:#dc2626; --txt:#fff7f7; --muted:#fecaca; --accent:#e0f2fe; --accent-contrast:#7f1d1d; }
body[data-theme='north-pine'] { --bg:#052e16; --surface:#14532d; --card:#166534; --txt:#f0fdf4; --muted:#bbf7d0; --accent:#facc15; --accent-contrast:#2e2405; }
body[data-theme='frosted-window'] { --bg:#1e1b4b; --surface:#1d4ed8; --card:#1e40af; --txt:#eff6ff; --muted:#bfdbfe; --accent:#dbeafe; --accent-contrast:#1e3a8a; }
body[data-theme='harvest-maple'] { --bg:#431407; --surface:#9a3412; --card:#c2410c; --txt:#fff7ed; --muted:#fdba74; --accent:#fb923c; --accent-contrast:#4a1d0a; }
body[data-theme='spring-bloom'] { --bg:#14532d; --surface:#16a34a; --card:#15803d; --txt:#f0fdf4; --muted:#bbf7d0; --accent:#f9a8d4; --accent-contrast:#4a1430; }
body[data-theme='summer-pop'] { --bg:#0f766e; --surface:#06b6d4; --card:#0891b2; --txt:#ecfeff; --muted:#a5f3fc; --accent:#fb7185; --accent-contrast:#4a1020; }
body[data-theme='firecracker'] { --bg:#1e3a8a; --surface:#dc2626; --card:#b91c1c; --txt:#f8fafc; --muted:#cbd5e1; --accent:#f8fafc; --accent-contrast:#1e3a8a; }
body[data-theme='blackout-neon'] { --bg:#020617; --surface:#0f172a; --card:#111827; --txt:#f8fafc; --muted:#67e8f9; --accent:#22d3ee; --accent-contrast:#042f2e; }
body[data-theme='executive-slate'] { --bg:#111827; --surface:#334155; --card:#475569; --txt:#f8fafc; --muted:#cbd5e1; --accent:#3b82f6; --accent-contrast:#08122b; }
body[data-theme='ledger-green'] { --bg:#022c22; --surface:#166534; --card:#15803d; --txt:#f0fdf4; --muted:#bbf7d0; --accent:#86efac; --accent-contrast:#14532d; }
body[data-theme='linen-luxe'] { --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --txt:#1f2937; --muted:#6b7280; --accent:#b45309; --accent-contrast:#fff7ed; }
body[data-theme='porcelain-blue'] { --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --txt:#1e3a5f; --muted:#64748b; --accent:#2563eb; --accent-contrast:#eff6ff; }
body[data-theme='sage-paper'] { --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --txt:#243127; --muted:#667085; --accent:#3f6212; --accent-contrast:#f7fee7; }
body[data-theme='blush-marble'] { --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --txt:#4a1d36; --muted:#7c6a76; --accent:#be185d; --accent-contrast:#fff1f2; }
body[data-theme='amber-ledger'] { --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --txt:#27272a; --muted:#71717a; --accent:#d97706; --accent-contrast:#1f2937; }
body[data-theme='mint-ledger'] { --bg:#ffffff; --surface:#ffffff; --card:#ffffff; --txt:#134e4a; --muted:#5f6b6a; --accent:#0f766e; --accent-contrast:#f0fdfa; }
body[data-theme='linen-luxe'],
body[data-theme='porcelain-blue'],
body[data-theme='sage-paper'],
body[data-theme='blush-marble'],
body[data-theme='amber-ledger'],
body[data-theme='mint-ledger'] {
  --header-brand-color: color-mix(in srgb, var(--txt) 90%, #111827 10%);
  --link: color-mix(in srgb, var(--accent) 72%, #0f172a 28%);
  --link-hover: color-mix(in srgb, var(--accent) 82%, #0f172a 18%);
}


.card-link { text-decoration: none; color: var(--txt); display: block; transition: transform .15s ease, border-color .15s ease; }
.card-link:visited,
.card-link:active { color: var(--txt); }
.card-link:hover,
.card-link:focus-visible { transform: translateY(-2px); border-color: var(--accent); color: var(--txt); }
.admin-quick-card { padding: .65rem .7rem; }
.admin-quick-card h3 { font-size: .9rem; margin: 0; }
.admin-quick-card p { font-size: 1.35rem; margin: .15rem 0; font-weight: 800; }
.admin-quick-card small { color: var(--muted); font-size: .76rem; }
.admin-image-upload-field { display: grid; gap: .6rem; justify-items: start; }
.btn-icon { min-width: 2.4rem; padding: .52rem .66rem; text-align: center; line-height: 1; }
.btn-icon-delete { margin-left: .35rem; }
.btn-icon-approve { color: #15803d; }
.btn-icon-decline { color: #b91c1c; }
.feature-section { margin-top: 1.2rem; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.feature-item { background: var(--card); border: 1px solid #1f2937; border-radius: 12px; padding: .8rem .95rem; }
.feature-item p { margin: .4rem 0 0; }
.faq-grid { display: grid; gap: .8rem; }
.faq-grid details summary { cursor: pointer; font-weight: 700; }
.faq-grid details > div a,
.faq-grid details > div a:visited {
  color: color-mix(in srgb, var(--accent) 72%, var(--txt) 28%) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-grid details > div a:hover,
.faq-grid details > div a:focus-visible {
  color: var(--accent) !important;
}

.faq-grid details[open] { border-color: var(--accent); }
.card-blog { scroll-margin-top: calc(var(--anchor-offset) + .8rem); }
.blog-excerpt { color: var(--muted); font-style: italic; }
.blog-content { margin-top: .65rem; }

@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2.5rem 0 2rem;
  }
  .hero-media,
  .hero-copy { justify-self: stretch; }
  .hero-logo-image {
    width: min(100%, 280px);
    margin-inline: auto;
  }
  .hero-copy {
    width: min(100%, 62ch);
    max-width: none;
    margin-inline: auto;
    padding-inline: clamp(.25rem, 2.5vw, .85rem);
    text-align: center;
    justify-self: center;
  }
  .hero .cta-row { justify-content: center; }
  .nav { align-items: center; flex-wrap: nowrap; gap: .7rem; }
  .nav-right { width: auto; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; position: relative; }
  .nav-toggle { display: inline-flex; margin-left: 0; }
  .social-circle { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  .social-circle svg { width: 15px; height: 15px; }
  .social-circle-google svg { width: .95rem; height: .95rem; }
  .primary-nav { display: none; position: absolute; top: calc(100% + .5rem); right: 0; width: min(280px, 92vw); flex-direction: column; align-items: stretch; padding: .4rem; border: 1px solid #334155; border-radius: 10px; background: color-mix(in srgb, var(--surface) 88%, #020617 12%); box-shadow: 0 14px 28px rgba(2, 6, 23, .45); z-index: 80; }
  .primary-nav a { width: 100%; }
  .primary-nav .btn,
  .primary-nav .nav-book {
    display: block;
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  [data-site-nav].is-open .primary-nav { display: flex; }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .hero {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2.5rem 0 2rem;
  }

  .hero-media,
  .hero-copy {
    justify-self: stretch;
  }

  .hero-logo-image {
    width: min(100%, 280px);
    margin-inline: auto;
  }

  .hero-copy {
    width: min(100%, 62ch);
    max-width: none;
    margin-inline: auto;
    padding-inline: clamp(.25rem, 2.5vw, .85rem);
    text-align: center;
    justify-self: center;
  }

  .hero .cta-row {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .customization-nav-controls,
  .customization-nav-select {
    width: 100%;
    max-width: 100%;
  }

  .setup .cta-row {
    justify-content: flex-start;
  }
}

.broadcast-subject-wrap {
  display: grid;
  gap: .35rem;
}

@media (max-width: 800px) {
  .site-footer .container {
    width: min(1100px, 100%);
    padding-inline: 1rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 1.2rem;
    text-align: center;
  }
  .footer-brand-block { justify-items: center; }
  .footer-contact-links,
  .footer-social-icon-bar { justify-content: center; }
  .footer-links-block {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    justify-items: center;
    text-align: center;
    padding-inline: 0;
  }
  .footer-links-block h2,
  .footer-links-block a { justify-self: center; }
  .footer-meta-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    width: 100%;
  }
  .footer-creator,
  .footer-version,
  .footer-policy-links {
    justify-self: center;
    text-align: center;
    width: 100%;
  }
  .footer-policy-links {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }
}

.btn,
.btn:visited,
.btn:hover,
.btn:focus-visible {
  color: #ffffff !important;
}

.blog-page {
  display: grid;
  gap: 1.25rem;
}

.barber-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.barber-grid:has(> :only-child):not(.barber-grid-single) {
  max-width: 420px;
  margin-inline: auto;
}

.barber-card {
  display: grid;
  gap: .8rem;
  padding: 1rem;
}

.barber-photo-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, #475569 65%);
  background: color-mix(in srgb, var(--surface) 86%, #000 14%);
}

.barber-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.barber-card h3 {
  margin: 0;
}

.barber-bio {
  margin: 0;
  color: color-mix(in srgb, var(--txt) 88%, var(--muted) 12%);
}


.barber-copy {
  display: grid;
  gap: .55rem;
}

.barber-role {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.barber-highlight {
  margin: 0;
  font-weight: 600;
}

.barber-meta {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: .35rem;
  color: color-mix(in srgb, var(--txt) 92%, var(--muted) 8%);
}

.barber-grid-single {
  max-width: 100%;
  width: 100%;
}

.barber-grid-single .barber-card-single {
  width: 100%;
}

.barber-card-single {
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  align-items: stretch;
  gap: 1rem;
}

.barber-card-single .barber-photo-wrap {
  aspect-ratio: 4 / 4;
}

@media (max-width: 640px) {
  .barber-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .barber-card-single {
    grid-template-columns: 1fr;
  }
}

.home-top-notice {
  padding-top: .75rem;
}


.notice-card {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}

.landing-page {
  padding: 2.5rem 0;
  display: grid;
  gap: 1rem;
}

.landing-intro {
  color: var(--muted);
  max-width: 70ch;
}

.landing-link {
  color: var(--txt);
  text-decoration: none;
}

.landing-link:hover,
.landing-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.landing-hero {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 85%, #fff 15%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #334155 72%);
}

.landing-hero .cta-row {
  justify-content: center;
}

.landing-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}

.landing-section-grid .card h3 {
  margin-top: 0;
}

.blog-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .5rem;
}

.blog-list {
  display: grid;
  gap: 1rem;
}

.card-blog {
  padding: 1.1rem;
}

.blog-card-media {
  flex: 0 0 auto;
}

.blog-thumb {
  width: 128px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, #334155 65%);
  display: block;
}

.blog-card-body {
  min-width: 0;
}

.blog-list .card-blog {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.blog-post-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .8rem;
}

.blog-post-cover {
  width: 180px;
  max-width: 38%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, #334155 65%);
}

.blog-post-heading h1 {
  margin-top: 0;
}

.card-blog-featured {
  border-color: color-mix(in srgb, var(--accent) 55%, #334155 45%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}

.card-blog h2 {
  margin: 0 0 .45rem;
}

.card-blog h2,
.card-blog h1 {
  color: var(--txt);
}

.card-blog:hover h2,
.card-blog:focus-visible h2 {
  color: var(--accent);
  text-decoration: underline;
}

.customization-nav {
  margin: 0 0 1rem;
  display: grid;
  gap: .6rem;
}

.setup > .customization-nav + * {
  margin-top: 0;
}

.customization-nav-label {
  font-size: .9rem;
  color: color-mix(in srgb, var(--txt) 80%, #94a3b8 20%);
}

.customization-nav-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.customization-nav-select {
  max-width: 22rem;
}



.theme-help { margin-top: .3rem; color: var(--muted); }
.icon-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .55rem; margin-top: .35rem; }
.icon-choice { display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; border: 1px solid #334155; border-radius: 10px; background: color-mix(in srgb, var(--card) 75%, #fff 25%); }
.icon-preview { width: 1.55rem; text-align: center; font-size: 1.1rem; }
.icon-picker-hint { color: var(--muted); margin-top: .45rem; display: inline-block; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid #334155;
  padding: .65rem;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  background: color-mix(in srgb, var(--surface) 86%, #000 14%);
}

.broadcast-sent-message {
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid #334155;
  border-radius: 12px;
  background: var(--card);
}

.broadcast-sent-message h2 {
  margin-top: 0;
}

.broadcast-sent-message-subject {
  margin: 0 0 .75rem;
}

.broadcast-sent-message-body {
  margin: 0;
  width: 100%;
  overflow-x: auto;
  word-break: break-word;
}

.broadcast-sent-message-body--sms {
  white-space: pre-wrap;
}

.admin-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #334155;
  background: color-mix(in srgb, var(--surface) 88%, #000 12%);
}

.admin-image-upload-preview {
  margin-bottom: .55rem;
}

.admin-inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .45rem;
}


@media (max-width: 640px) {
  .blog-list .card-blog,
  .blog-post-header {
    flex-direction: column;
  }

  .blog-thumb,
  .blog-post-cover {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.hours-table-card {
  margin-bottom: .9rem;
  overflow: hidden;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
}

.hours-table th,
.hours-table td {
  padding: .7rem .8rem;
  border-bottom: 1px solid #334155;
}

.hours-table th {
  background: color-mix(in srgb, var(--surface) 86%, #000 14%);
  text-align: left;
}

.hours-table tbody tr:last-child td {
  border-bottom: 0;
}

.hours-disclaimer {
  margin: .7rem 0 0;
  padding: .65rem .8rem 0;
  border-top: 1px solid #334155;
  color: var(--muted);
  font-size: .9rem;
}

.hours-special-notices {
  margin: .7rem 0 0;
  padding: 0 .8rem;
  display: grid;
  gap: .35rem;
  color: var(--muted);
  font-size: .9rem;
}

.hours-special-notices p {
  margin: 0;
}

.admin-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .45rem;
}

.hours-editor-table .hours-editor-input {
  width: 100%;
}

.hours-save-status {
  color: var(--muted);
}

.hours-disclaimer-editor {
  display: grid;
  gap: .45rem;
  margin: .35rem 0 .9rem;
}

.hours-disclaimer-input {
  width: 100%;
}


.contact-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  align-content: stretch;
  height: 100%;
}

.contact-stack .feature-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hours-contact-layout {
  display: grid;
  gap: .85rem;
  align-items: stretch;
}

.hours-column,
.contact-column {
  display: grid;
  gap: .55rem;
}

.hours-contact-column-heading {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

@media (min-width: 960px) {
  .hours-contact-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .hours-contact-layout .hours-table-card {
    margin-bottom: 0;
  }

  .hours-contact-layout .contact-stack {
    min-height: 100%;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
}



.moderation-dialog {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #334155 60%);
  border-radius: 16px;
  max-width: 560px;
  width: min(94vw, 560px);
  background: var(--surface);
  color: var(--txt);
  padding: 1rem;
}

.moderation-dialog::backdrop {
  background: rgba(10, 15, 30, .62);
}

.moderation-dialog-close-wrap {
  display: flex;
  justify-content: flex-end;
}

.moderation-form {
  display: grid;
  gap: .6rem;
}

.moderation-form textarea {
  width: 100%;
  min-height: 108px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #475569 76%);
  background: color-mix(in srgb, var(--surface) 85%, #000 15%);
  color: var(--txt);
  padding: .65rem .75rem;
  resize: vertical;
}

.moderation-form .btn {
  width: 100%;
  border-radius: 999px;
}

.subscribe-dialog {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #334155 60%);
  border-radius: 16px;
  max-width: 520px;
  width: min(92vw, 520px);
  background: var(--surface);
  color: var(--txt);
  padding: 1rem;
}

.subscribe-dialog::backdrop {
  background: rgba(10, 15, 30, .62);
}

.subscribe-dialog-close-wrap {
  display: flex;
  justify-content: flex-end;
}

.subscribe-dialog-close {
  border: 0;
  background: transparent;
  color: var(--txt);
  font-size: 1.2rem;
  cursor: pointer;
}

.subscribe-form,
.footer-subscribe-form {
  display: grid;
  gap: .55rem;
}

.subscribe-choice-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  align-items: center;
}

.subscribe-choice-row .admin-inline-checkbox {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1.15;
}

.footer-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(180px, .8fr);
  gap: 1.1rem 1.5rem;
}

.footer-subscribe-block {
  display: grid;
  gap: .6rem;
  align-self: start;
  margin-top: 0;
  background: linear-gradient(165deg, color-mix(in srgb, var(--card) 80%, #000 20%), color-mix(in srgb, var(--surface) 86%, #000 14%));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, #334155 65%);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 14px 26px rgba(2, 8, 23, .28);
}

.footer-subscribe-block h3 {
  margin: 0;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.footer-subscribe-form input:not([type="checkbox"]) {
  width: 100%;
}

.footer-subscribe-form {
  gap: .65rem;
}

.footer-subscribe-form input:not([type="checkbox"]) {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #475569 76%);
  background: color-mix(in srgb, var(--surface) 85%, #000 15%);
  padding: .62rem .72rem;
}

.footer-subscribe-form input::placeholder {
  color: color-mix(in srgb, var(--muted) 86%, #fff 14%);
}

.footer-subscribe-form input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff 45%);
  outline-offset: 1px;
}

.subscribe-dialog .subscribe-form {
  gap: .65rem;
}

.subscribe-dialog .subscribe-form input {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #475569 76%);
  background: color-mix(in srgb, var(--surface) 85%, #000 15%);
  padding: .62rem .72rem;
  color: var(--txt);
}

.subscribe-dialog .subscribe-form label {
  color: color-mix(in srgb, var(--muted) 45%, #fff 55%);
  font-size: .92rem;
}

.subscribe-dialog .subscribe-form .btn {
  width: 100%;
  border-radius: 999px;
  padding: .7rem .9rem;
  font-weight: 700;
}

.footer-subscribe-form .subscribe-choice-row {
  padding: .2rem .1rem 0;
  gap: .9rem;
}

.subscribe-consent-note {
  margin: .1rem 0 0;
  color: color-mix(in srgb, var(--muted) 74%, #fff 26%);
  font-size: .74rem;
  line-height: 1.35;
}

.footer-subscribe-submit {
  width: 100%;
  border-radius: 999px;
  padding: .7rem .9rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.rte {
  display: grid;
  gap: .45rem;
}

.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.rte-toolbar button {
  border: 1px solid #475569;
  background: var(--card);
  color: var(--txt);
  border-radius: 8px;
  padding: .32rem .55rem;
  cursor: pointer;
}

.rte-editor {
  min-height: 220px;
  border: 1px solid #475569;
  border-radius: 12px;
  padding: .7rem;
  background: color-mix(in srgb, var(--surface) 90%, #000 10%);
}

.rte-editor:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, #fff 50%);
  outline-offset: 2px;
}

.rte-fallback {
  min-height: 220px;
}

.rte.is-enhanced .rte-fallback {
  display: none;
}

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


.dashboard-checkin-form {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.dashboard-checkin-search-wrap {
  position: relative;
  min-width: 260px;
  flex: 1 1 280px;
}

.dashboard-checkin-search-input {
  min-width: 260px;
  width: 100%;
}
.dashboard-datetime-label {
  min-width: 220px;
  flex: 0 1 260px;
}

.dashboard-datetime-label input[type="datetime-local"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


.dashboard-walkin-toggle,
.dashboard-walkin-reset {
  width: 100%;
}

.dashboard-walkin-reset {
  margin-top: .35rem;
}


.dashboard-checkin-results {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow: auto;
  padding: .25rem;
  margin-top: .2rem;
}

.dashboard-checkin-result {
  width: 100%;
  border: 1px solid #334155;
  background: color-mix(in srgb, var(--card) 88%, #fff 12%);
  color: var(--txt);
  border-radius: 10px;
  padding: .45rem .55rem;
  text-align: left;
  display: grid;
  gap: .15rem;
  margin: 0 0 .25rem;
}

.dashboard-checkin-result strong {
  font-size: .9rem;
}

.dashboard-checkin-result span {
  color: var(--muted);
  font-size: .82rem;
}

.dashboard-checkin-result-create {
  min-height: 8.5rem;
  align-content: center;
  gap: .45rem;
  border-color: color-mix(in srgb, var(--accent) 55%, #334155 45%);
}

.dashboard-checkin-result-create strong {
  font-size: 1rem;
}

.dashboard-datetime-helper {
  display: block;
  margin-top: .3rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.dashboard-message {
  margin: 0 0 .75rem;
}

.dashboard-create-client-dialog {
  border: 1px solid #334155;
  border-radius: 14px;
  background: var(--card);
  color: var(--txt);
  width: min(34rem, calc(100vw - 1rem));
  padding: .95rem;
}

.dashboard-create-client-dialog::backdrop {
  background: rgba(2, 6, 23, .6);
}

.dashboard-create-client-close-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .35rem;
}

.dashboard-create-client-grid {
  display: grid;
  gap: .55rem;
  margin-bottom: .75rem;
}

.dashboard-create-client-grid label,
.dashboard-create-client-grid input,
.dashboard-create-client-grid textarea,
.dashboard-create-client-grid select {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.dashboard-inline-check {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.admin-quick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-page-header-actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.dashboard-vacation-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}


.dashboard-header-btn {
  padding: .55rem .75rem;
  min-width: 2.35rem;
}

.dashboard-queue-table tbody tr[data-dashboard-row-link] {
  cursor: pointer;
}

.dashboard-queue-table tbody tr[data-dashboard-row-link]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-toolbar {
  background: #111827;
  border-bottom: 1px solid #1f2937;
  position: sticky;
  top: 0;
  z-index: 80;
  overflow: visible;
}

.admin-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  flex-wrap: wrap;
  overflow: visible;
}

.admin-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  overflow: visible;
}

.admin-toolbar-group-right {
  margin-left: auto;
}

.admin-toolbar a,
.admin-toolbar summary {
  color: #e5e7eb;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  padding: .25rem .45rem;
}


.admin-toolbar-link-icon {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin-right: .3rem;
  vertical-align: text-bottom;
  flex: 0 0 auto;
}

.admin-toolbar-link-icon svg {
  width: 100%;
  height: 100%;
}

.admin-toolbar-link-text {
  display: inline;
}


.admin-toolbar-menu {
  position: relative;
}


.admin-toolbar summary {
  list-style: none;
}

.admin-toolbar a:hover,
.admin-toolbar summary:hover,
.admin-toolbar a:focus-visible,
.admin-toolbar summary:focus-visible {
  background: #1e293b;
}

.admin-toolbar summary::-webkit-details-marker {
  display: none;
}



.admin-toolbar-refresh-form {
  display: inline-flex;
  margin: 0;
}

.admin-toolbar-icon-btn {
  border: 1px solid #334155;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 8px;
  padding: .25rem .5rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 2rem;
}

.admin-toolbar-icon-btn:hover {
  background: #1e293b;
}

.admin-toolbar-dropdown {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  min-width: 220px;
  padding: .45rem;
  display: grid;
  gap: .35rem;
  z-index: 90;
}

.admin-toolbar-menu:not([open]) .admin-toolbar-dropdown {
  display: none;
}

.admin-toolbar-dropdown a {
  padding: .35rem .45rem;
  border-radius: 8px;
}

.admin-toolbar-dropdown a:hover {
  background: #1e293b;
}

.admin-toolbar-dropdown-right {
  left: auto;
  right: 0;
}

@media (max-width: 1024px) {
  .admin-toolbar-inner {
    gap: .45rem;
    flex-wrap: nowrap;
    overflow-x: visible;
    scrollbar-width: thin;
  }

  .admin-toolbar-group {
    flex-wrap: nowrap;
  }

  .admin-toolbar-link-text,
  .admin-toolbar summary .admin-toolbar-link-text {
    display: none !important;
  }

  .admin-toolbar a,
  .admin-toolbar summary {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1;
  }

  .admin-toolbar-link-icon {
    margin-right: 0;
    width: 1.05rem;
    height: 1.05rem;
  }

  .admin-toolbar-icon-btn {
    padding: .2rem .4rem;
  }
}

@media (max-width: 1100px) {

  .dashboard-checkin-form {
    align-items: stretch;
  }

  .dashboard-checkin-form > .btn,
  .dashboard-checkin-form > label,
  .dashboard-checkin-search-wrap {
    width: 100%;
    min-width: 0;
  }

  .dashboard-checkin-search-input {
    min-width: 0;
  }

  .dashboard-datetime-label {
    min-width: 0;
    width: 100%;
  }

  .dashboard-datetime-label input[type="datetime-local"] {
    min-width: 0;
  }

  .dashboard-create-client-dialog {
    width: calc(100vw - .75rem);
    max-width: calc(100vw - .75rem);
    margin: .25rem;
    padding: .75rem;
  }
  .admin-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}


@media (max-width: 640px) {
  .setup {
    padding: 1.25rem 0;
  }

  .setup form {
    max-width: 100%;
  }

  .setup .admin-inline-checkbox,
  .setup .dashboard-inline-check {
    align-items: flex-start;
  }

  .setup .admin-inline-checkbox input,
  .setup .dashboard-inline-check input {
    margin-top: .2rem;
    width: auto;
    min-height: 0;
  }

  .setup .cta-row .btn,
  .setup .cta-row a.btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .admin-page-header-actions {
    width: 100%;
    justify-content: space-between;
    gap: .35rem;
  }

  .dashboard-header-btn {
    flex: 1 1 calc(25% - .3rem);
    display: inline-flex;
    justify-content: center;
    padding: .5rem;
  }

  .admin-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
  }

  .admin-quick-card {
    padding: .48rem;
  }

  .admin-quick-card h3 {
    font-size: .75rem;
  }

  .admin-quick-card p {
    font-size: 1rem;
  }

  .admin-quick-card small {
    font-size: .66rem;
  }

  .dashboard-queue-table {
    font-size: .82rem;
  }

  .dashboard-action-label {
    display: none;
  }
}


.local-listing-card h2 {
  margin-bottom: .25rem;
}

.local-listing-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .75rem;
  margin-bottom: .5rem;
}

[data-local-category].active {
  border-color: var(--accent);
  color: var(--accent);
}


.booking-unavailable-hours {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 26%, transparent 74%);
}

.booking-unavailable-hours h3 {
  margin: 0 0 .5rem;
  font-size: .95rem;
}

.booking-unavailable-hours-table {
  width: 100%;
  font-size: .9rem;
}

.booking-unavailable-hours-table th,
.booking-unavailable-hours-table td {
  padding: .4rem .45rem;
}

.booking-unavailable-hours-table tbody tr td:first-child {
  color: var(--muted);
  width: 42%;
}


@media (max-width: 1024px) {
  .dashboard-vacation-btn-text {
    display: none;
  }
}

[hidden] {
  display: none !important;
}