/* AppointNow public site — modern directory + business detail.
   Lightweight, no framework. Mobile-first. RTL-aware via logical properties. */

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: rgba(37,99,235,.08);
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --gold: #f59e0b;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.12);
  --radius: 12px;
  --radius-sm: 8px;
  --header-h: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Heebo", "Inter", "Arial", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ===== Header ===== */
.an-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 16px; gap: 16px;
}
.an-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.an-brand-logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  /* Logo is transparent — no background needed; subtle shadow lifts it slightly */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.an-brand-name {
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--text);
  letter-spacing: 0.4px;
  line-height: 1;
  white-space: nowrap;
}
/* Same orange accent DividendsIQ uses for the "IQ" suffix. */
.an-brand-name-accent { color: #f39c12; }
.an-header-spacer { flex: 1; }
.an-header-nav {
  display: inline-flex; align-items: center; gap: 4px;
  margin-inline-start: 18px;
}
.an-header-nav-link {
  display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: 8px;
  color: var(--text-muted, #475569); font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.an-header-nav-link:hover {
  background: rgba(37, 99, 235, 0.06);
  color: var(--primary);
  text-decoration: none;
}
/* Mobile hamburger menu */
.an-header-mobile-menu { position: relative; display: none; }
.an-header-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.an-header-menu-toggle:hover { border-color: var(--primary); color: var(--primary); }
.an-header-menu-toggle .material-icons { font-size: 22px; }
.an-header-menu-panel {
  position: fixed; top: 60px; inset-inline-end: 10px;
  min-width: 200px; background: #fff;
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  padding: 6px; z-index: 100;
}
.an-header-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 14px;
  transition: background .15s;
}
.an-header-menu-item:hover { background: var(--surface); color: var(--primary); text-decoration: none; }
.an-header-menu-item .material-icons { font-size: 18px; color: var(--text-muted, #64748b); }
.an-header-menu-item:disabled, .an-header-menu-item[disabled] { opacity: 0.5; cursor: default; }
button.an-header-menu-item { border: 0; background: transparent; width: 100%; text-align: start; cursor: pointer; font: inherit; }
.an-header-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; }
/* Mobile menu signed-in header — avatar circle + name. Visually anchors
   the "you are logged in" state at the top of the menu. */
.an-header-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  background: var(--surface, #f4f6f8);
}
.an-header-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.an-header-menu-uname {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Lang pills inside the mobile menu panel (separate from the desktop topbar lang switch) */
.an-lang-switch-mobile { display: flex; gap: 4px; padding: 4px; }
.an-lang-switch-mobile button {
  flex: 1; padding: 8px 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.an-lang-switch-mobile button.active { border-color: var(--primary); color: var(--primary); background: rgba(37, 99, 235, 0.08); }
.an-lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.an-lang-switch button {
  padding: 6px 12px; border: none; background: var(--surface);
  color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; transition: background .15s;
}
.an-lang-switch button.active { background: var(--primary); color: white; }
.an-lang-switch button:hover:not(.active) { background: #f3f4f6; }
.an-staff-login {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 13px; background: var(--surface);
  transition: border-color .15s, color .15s;
}
.an-staff-login:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.an-staff-login .material-icons { font-size: 16px; }
.an-list-business {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--primary); color: white !important; font-size: 13px; font-weight: 500;
  transition: background .15s;
}
.an-list-business:hover { background: var(--primary-dark); text-decoration: none; }
.an-list-business .material-icons { font-size: 16px; }
@media (max-width: 600px) {
  .an-list-business span:not(.material-icons) { display: none; }
  .an-staff-login span:not(.material-icons) { display: none; }
  .an-list-business { padding: 7px 10px; }
  .an-staff-login   { padding: 7px 10px; }
  .an-lang-switch button { padding: 6px 8px; font-size: 12px; }
  .an-header { gap: 8px; padding: 0 10px; }
  /* Brand text doesn't fit alongside everything else on narrow screens —
     keep just the logo image so the header stays tidy. */
  .an-brand-name { display: none; }
  .an-brand-logo { width: 32px; height: 32px; }
}
@media (max-width: 760px) {
  .an-header-nav { display: none; }
  .an-header-mobile-menu { display: inline-flex; }
  /* On mobile, everything secondary moves into the hamburger panel —
     leaving just logo + List-your-business CTA + hamburger in the topbar. */
  .an-staff-login { display: none !important; }
  .an-client-slot { display: none !important; }
  .an-lang-switch:not(.an-lang-switch-mobile) { display: none !important; }
}

/* ===== Containers ===== */
.an-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; }
main { flex: 1; }

/* ===== Hero ===== */
.an-hero {
  position: relative;
  padding: 60px 16px 80px;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: white;
  overflow: hidden;
  text-align: center;
}
.an-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.1) 0, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(255,255,255,.08) 0, transparent 40%);
  pointer-events: none;
}
.an-hero-inner { position: relative; max-width: 900px; margin: 0 auto; }
.an-hero h1 {
  font-size: 36px; font-weight: 800; margin: 0 0 10px;
  letter-spacing: -.02em; line-height: 1.15;
}
.an-hero .an-hero-sub { color: rgba(255,255,255,.92); margin: 0 0 32px; font-size: 17px; }
@media (max-width: 600px) {
  .an-hero { padding: 40px 16px 64px; }
  .an-hero h1 { font-size: 26px; }
  .an-hero .an-hero-sub { font-size: 15px; margin-bottom: 24px; }
}

/* Combined what+where search */
.an-search-bar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  overflow: hidden;
  max-width: 760px; margin: 0 auto;
}
.an-search-field {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  text-align: start;
}
.an-search-field:last-of-type { border-inline-end: none; }
.an-search-field .material-icons { color: var(--text-muted); font-size: 20px; flex-shrink: 0; }
.an-search-field input,
.an-search-field select {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 15px; color: var(--text);
  padding: 0;
}
.an-search-field input::placeholder { color: var(--text-muted); }
.an-search-go {
  background: var(--primary); color: white; border: none;
  padding: 0 22px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.an-search-go:hover { background: var(--primary-dark); }
.an-search-go .material-icons { font-size: 20px; }
@media (max-width: 600px) {
  .an-search-bar { grid-template-columns: 1fr; }
  .an-search-field { border-inline-end: none; border-bottom: 1px solid var(--border); }
  .an-search-field:last-of-type { border-bottom: 1px solid var(--border); }
  .an-search-go { padding: 14px; }
}

/* ===== Sector pills ===== */
.an-sectors-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: sticky; top: var(--header-h); z-index: 40;
  transition: box-shadow .2s;
}
.an-sectors-strip.scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.an-sectors-scroll {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 0 16px; max-width: 1200px; margin: 0 auto;
  scrollbar-width: none;
}
.an-sectors-scroll::-webkit-scrollbar { display: none; }
.an-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: all .15s; font-family: inherit;
}
.an-pill:hover { border-color: var(--primary); color: var(--primary); }
.an-pill.active {
  background: var(--primary); color: white; border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(37,99,235,.3);
}
.an-pill .material-icons { font-size: 16px; }

/* ===== Toolbar (filters / favorites / near me) ===== */
.an-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 16px 0 8px;
}
.an-toolbar select {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14px; color: var(--text); outline: none; cursor: pointer;
}
.an-toolbar select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.an-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px;
  cursor: pointer; transition: all .15s;
}
.an-toolbar-btn:hover { border-color: var(--primary); color: var(--primary); }
.an-toolbar-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.an-toolbar-btn .material-icons { font-size: 18px; }
.an-toolbar-spacer { flex: 1; }
.an-result-count { color: var(--text-muted); font-size: 13px; }

/* ===== Featured row ===== */
.an-featured-section {
  padding: 24px 0 8px;
}
.an-section-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.an-section-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.an-section-head .material-icons { color: var(--gold); font-size: 22px; }
.an-featured-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 320px);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
  /* Snap so swipes land on a card */
  scroll-snap-type: x mandatory;
}
.an-featured-scroll > * { scroll-snap-align: start; }
@media (max-width: 480px) {
  .an-featured-scroll { grid-auto-columns: 78%; }
  .an-grid { gap: 14px; }
}
.an-featured-scroll::-webkit-scrollbar { height: 6px; }
.an-featured-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== Cards grid ===== */
.an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 16px 0 60px;
}

/* ===== Card ===== */
.an-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.an-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.an-card-banner {
  position: relative; width: 100%; aspect-ratio: 16/8.5;
  background: linear-gradient(135deg, #e9ebef, #d1d5db);
  overflow: hidden;
}
.an-card-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .35s;
}
.an-card-banner-img.fading { opacity: 0; }
.an-card-logo {
  position: absolute;
  bottom: -22px; inset-inline-start: 16px;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: #f3f4f6;            /* neutral fallback so light/white logos still show a silhouette */
  border: 2px solid white;        /* slimmer ring so the dark shadow can do the visual work */
  box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06) inset;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.an-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.an-card-logo .material-icons { font-size: 28px; color: #bbb; }
.an-card-status {
  position: absolute; top: 12px; inset-inline-end: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: white;
  font-size: 12px; font-weight: 500;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.an-card-status.is-open      { background: rgba(22,163,74,.92); }
.an-card-status.is-on_break  { background: rgba(245,158,11,.92); }
.an-card-status.is-closed    { background: rgba(75,85,99,.85); }
.an-card-status .dot { width: 6px; height: 6px; border-radius: 50%; background: white; }
.an-card-fav {
  position: absolute; top: 12px; inset-inline-start: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.an-card-fav:hover { transform: scale(1.1); background: white; }
.an-card-fav .material-icons { font-size: 20px; color: var(--text-muted); }
.an-card-fav.on .material-icons { color: var(--danger); }
.an-card-featured-badge {
  position: absolute; bottom: 8px; inset-inline-start: 80px;
  /* Sits next to the logo (which extends bottom-start) instead of fighting the
     favorite heart at top-start. Keeps top corners cleaner on narrow cards. */
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(245,158,11,.95); color: white;
  font-size: 11px; font-weight: 600;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.an-card-featured-badge .material-icons { font-size: 13px; }
@media (max-width: 480px) {
  /* Star-only badge on small viewports — text is redundant with the gold color. */
  .an-card-featured-badge .label { display: none; }
  .an-card-featured-badge { padding: 4px; }
}
.an-card-body {
  padding: 32px 16px 14px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.an-card-name { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.25; }

/* Single inline meta row: sector chip + dot + city + (optional) distance.
   Replaces the previous stacked layout that wasted vertical space. */
.an-card-metaline {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted);
  flex-wrap: wrap;
  min-height: 22px;
}
.an-card-sector {
  display: inline-block; font-size: 11.5px; color: var(--primary);
  background: var(--primary-light); padding: 2px 9px; border-radius: 999px;
  font-weight: 500; line-height: 1.4;
}
.an-card-metaline .sep { color: #d1d5db; }
.an-card-metaline .city,
.an-card-metaline .distance {
  display: inline-flex; align-items: center; gap: 3px;
}
.an-card-metaline .city .material-icons,
.an-card-metaline .distance .material-icons { font-size: 13px; }
.an-card-metaline .distance {
  margin-inline-start: auto;
  font-weight: 500; color: var(--primary);
}
/* Social-media icon row on the business page (under contact info). */
.an-socials { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.an-social {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  background: #f0f4f8;
  color: var(--text);
  transition: transform 0.12s, filter 0.12s;
}
.an-social:hover { transform: translateY(-1px); filter: brightness(1.05); }
.an-social svg { width: 22px; height: 22px; }
.an-social .material-icons { font-size: 22px; }
.an-social-fb  { background: #1877f2; color: #fff; }
.an-social-ig  { background: linear-gradient(45deg,#fdf497,#fd5949 25%,#d6249f 60%,#285AEB 100%); color: #fff; }
.an-social-tt  { background: #000; color: #fff; }
.an-social-wa  { background: #25d366; color: #fff; }
.an-social-web { background: #f0f4f8; color: var(--primary); }

/* Branches section on the business page — vertical list of cards. */
.an-section-count { color: var(--text-muted, #64748b); font-weight: 400; font-size: 0.85em; }
.an-branches-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* When the user expands a long list (Show all), cap the section at
     ~600px and let the inner block scroll. Prevents a 50-branch chain
     from turning the sidebar into a kilometer-long wall. */
  max-height: 600px;
  overflow-y: auto;
}
.an-branch-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface, #f4f6f8);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an-branch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-branch-name { font-weight: 600; font-size: 14.5px; flex: 1; min-width: 0; }
.an-branch-primary {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(26, 82, 118, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.an-branch-dist {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; color: var(--text-muted, #64748b); font-weight: 500;
}
.an-branch-dist .material-icons { font-size: 13px; }
.an-branch-addr {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13.5px; color: var(--text); line-height: 1.4;
}
.an-branch-addr .material-icons { font-size: 16px; color: var(--text-muted, #64748b); margin-top: 1px; flex-shrink: 0; }
.an-branch-phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--primary); text-decoration: none;
}
.an-branch-phone .material-icons { font-size: 16px; }
.an-branch-phone:hover { text-decoration: underline; }
.an-branch-book {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
}
.an-branch-book .material-icons { font-size: 17px; }
.an-branch-book:hover { filter: brightness(0.95); }
.an-branches-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--primary);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.an-branches-more:hover { background: var(--surface, #f4f6f8); }

/* "Branch in {city}" chip — signals that this business matched the
   city filter via a branch (not its main address). Subtle pill so it
   doesn't compete with the primary name/sector chip. */
.an-card-metaline .an-card-branch-match {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(26, 82, 118, 0.08);
  color: var(--primary);
  font-weight: 500;
  font-size: 12.5px;
}
.an-card-metaline .an-card-branch-match .material-icons { font-size: 13px; }
.an-card-desc {
  font-size: 13px; color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Status footer pinned to bottom — keeps card bottom-edges aligned regardless
   of description length, and replaces the prior "italic gray next_open" line
   with a clearer icon + color-coded label. */
.an-card-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f1f3f5;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.an-card-footer .material-icons { font-size: 14px; }
.an-card-footer .status-text { font-weight: 500; }
.an-card-footer.is-open     { color: var(--success); }
.an-card-footer.is-on_break { color: var(--warning); }
.an-card-footer.is-closed   { color: var(--text-muted); }
.an-card-footer .next       { color: var(--text-muted); font-weight: 400; margin-inline-start: 2px; }
.an-card-footer .next::before { content: '· '; color: #d1d5db; margin-inline-end: 2px; }

/* "Book" CTA inside each business card. Sits at the bottom of the body
   under the status footer. Stops the card's own anchor navigation so the
   click goes straight to the booking flow on the business page. */
.an-card-book {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 10px;
  padding: 9px 14px; border: 0; border-radius: 8px;
  background: var(--primary); color: #fff !important;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
}
.an-card-book:hover { background: var(--primary-dark); }
.an-card-book:active { transform: scale(0.97); }
.an-card-book .material-icons { font-size: 16px; }

/* Carousel dots indicator */
.an-card-dots {
  position: absolute; bottom: 8px; inset-inline-end: 8px;
  display: flex; gap: 4px; z-index: 2;
}
.an-card-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.an-card-dot.active { background: rgba(255,255,255,.95); width: 14px; border-radius: 3px; transition: width .2s; }

/* ===== Empty / loading ===== */
.an-empty {
  text-align: center; padding: 60px 16px; color: var(--text-muted);
  background: var(--surface); border-radius: var(--radius);
  margin: 24px 0;
}
.an-empty .material-icons { font-size: 48px; color: #d0d4dc; margin-bottom: 12px; }
.an-empty h3 { margin: 0 0 8px; color: var(--text); font-size: 17px; }
.an-empty .an-empty-suggestions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 16px;
}
.an-empty .an-empty-suggestions button {
  padding: 6px 12px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text);
}
.an-empty .an-empty-suggestions button:hover { border-color: var(--primary); color: var(--primary); }
.an-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: an-spin .8s linear infinite;
  margin: 60px auto;
}
@keyframes an-spin { to { transform: rotate(360deg); } }

/* ===== Footer ===== */
.an-footer {
  margin-top: auto;
  background: #1f2937; color: #d1d5db;
  padding: 36px 0 20px;
}
.an-footer-cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 24px; border-bottom: 1px solid #374151;
}
@media (max-width: 720px) { .an-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .an-footer-cols { grid-template-columns: 1fr; } }
.an-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #f3f4f6; margin: 0 0 12px; }
.an-footer p, .an-footer li { font-size: 14px; }
.an-footer ul { list-style: none; padding: 0; margin: 0; }
.an-footer ul li + li { margin-top: 6px; }
.an-footer a { color: #d1d5db; text-decoration: none; }
.an-footer a:hover { color: white; text-decoration: underline; }
.an-footer-bottom {
  padding-top: 18px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: #9ca3af;
}

/* ===== Business detail ===== */
.an-biz-banner {
  position: relative; width: 100%; height: 320px;
  background: linear-gradient(135deg, #e9ebef, #d1d5db); overflow: hidden;
}
.an-biz-banner img { width:100%; height:100%; object-fit: cover; }
.an-biz-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%);
}
.an-biz-banner-content { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 24px; z-index: 1; }
.an-biz-banner-inner { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; align-items: flex-end; gap: 16px; }
.an-biz-logo {
  width: 110px; height: 110px; border-radius: 18px;
  background: var(--surface); border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg); overflow: hidden; flex-shrink: 0;
}
.an-biz-logo img { width:100%; height:100%; object-fit: cover; }
.an-biz-title-block { color: white; flex: 1; min-width: 0; }
.an-biz-title-block h1 {
  font-size: 32px; font-weight: 700; margin: 0 0 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.an-biz-meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 14.5px; }
.an-biz-meta-row > span { display: inline-flex; align-items: center; gap: 4px; }
.an-biz-meta-row .material-icons { font-size: 17px; }
.an-biz-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
}
.an-biz-status.is-open     { background: rgba(22,163,74,.95); color: white; }
.an-biz-status.is-on_break { background: rgba(245,158,11,.95); color: white; }
.an-biz-status.is-closed   { background: rgba(75,85,99,.95); color: white; }

.an-biz-content { display: grid; grid-template-columns: 1fr 340px; gap: 28px; padding: 28px 0 60px; align-items: start; }
@media (max-width: 900px) {
  .an-biz-banner { height: 220px; }
  .an-biz-logo { width: 80px; height: 80px; }
  .an-biz-title-block h1 { font-size: 24px; }
  .an-biz-content { grid-template-columns: 1fr; }
}

.an-section { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.an-section h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; color: var(--text); }
.an-about { color: var(--text); font-size: 14.5px; line-height: 1.65; }
.an-about h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; color: var(--text); }
.an-about h4 { font-size: 15px; font-weight: 600; margin: 14px 0 8px; }
.an-about p  { margin: 0 0 10px; }
.an-about ul, .an-about ol { margin: 6px 0 12px; padding-inline-start: 22px; }
.an-about li { margin-bottom: 4px; }

.an-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.an-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform .15s; }
.an-gallery img:hover { transform: scale(1.02); }

.an-services { display: flex; flex-direction: column; gap: 8px; }
.an-service-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fafbfd;
}
.an-service-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.an-service-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.an-service-name { font-weight: 500; }
.an-service-branches {
  display: flex; align-items: center; gap: 3px;
  color: var(--text-muted); font-size: 12px;
}
.an-service-branches .material-icons { font-size: 14px; flex-shrink: 0; }
.an-service-meta { color: var(--text-muted); font-size: 13.5px; flex-shrink: 0; }
/* Expandable description: row becomes tappable when it has a body. */
.an-service-row.has-desc { cursor: pointer; transition: background 0.15s; }
.an-service-row.has-desc:hover { background: #f4f6f8; }
.an-service-chev {
  font-size: 22px;
  color: var(--text-muted);
  transition: transform 0.2s;
  margin-inline-start: 4px;
}
.an-service-row.open .an-service-chev { transform: rotate(180deg); }
.an-service-desc {
  padding: 12px 16px 16px;
  background: #fafbfd;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  margin-top: -8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.an-service-desc p { margin: 0 0 8px; }
.an-service-desc p:last-child { margin-bottom: 0; }
.an-service-desc ul, .an-service-desc ol { margin: 0 0 8px; padding-inline-start: 20px; }
.an-service-desc a { color: var(--primary); text-decoration: underline; }

.an-info-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; }
.an-info-row + .an-info-row { border-top: 1px solid #f1f3f5; }
.an-info-row .material-icons { font-size: 18px; color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
.an-info-row .label { color: var(--text-muted); font-size: 12px; display: block; }
.an-info-row .value { color: var(--text); font-weight: 500; }
.an-info-row .value a { color: var(--text); }

.an-hours-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.an-hours-table td { padding: 7px 0; }
.an-hours-table tr.today td { font-weight: 600; color: var(--primary); }
.an-hours-table .day { color: var(--text-muted); width: 40%; }
.an-hours-table .closed { color: var(--text-muted); font-style: italic; }

.an-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  background: var(--primary); color: white; border: none; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .15s; text-decoration: none;
}
.an-cta:hover { background: var(--primary-dark); text-decoration: none; }
.an-cta:disabled { opacity: 0.65; cursor: not-allowed; }
/* Aside CTA wrap — matches branch-card width / margin so the button
   reads as part of the same visual family as the branch list below. */
.an-cta-wrap { margin: 16px 0; }
.an-cta-wrap .an-cta {
  padding: 12px 14px;
  font-size: 14.5px;
  border-radius: 10px;
}

/* Lightbox */
.an-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out;
}
.an-lightbox.open { display: flex; }
.an-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

.an-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted); font-size: 14px; margin: 16px 0 0;
}
.an-back .material-icons { font-size: 18px; }
[dir="rtl"] .an-back .material-icons { transform: scaleX(-1); }

/* ===== Yelp-style city picker ===== */
.an-cp { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.an-cp-input {
  flex: 1; min-width: 0;
  border: none; outline: none;
  background: transparent;
  font: inherit; font-size: 15px; color: var(--text);
  padding: 0;
  caret-color: var(--primary);
}
.an-cp-input::placeholder { color: var(--text-muted); }

.an-cp-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;                /* flush against the search bar above */
  border-radius: 0 0 14px 14px;    /* square top, rounded bottom matches bar's bottom */
  box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.06);
  z-index: 1300;
  overflow: hidden;
  animation: an-cp-fade .14s ease-out;
}
@keyframes an-cp-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.an-cp-list {
  max-height: 460px;
  overflow-y: auto;
  padding: 6px 0;
}
.an-cp-section {
  padding: 12px 18px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.an-cp-shortcut,
.an-cp-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  text-align: start;
  transition: background .12s;
  line-height: 1.3;
}
.an-cp-shortcut:hover,
.an-cp-item:hover,
.an-cp-shortcut.hl,
.an-cp-item.hl { background: #f3f4f6; }
.an-cp-shortcut {
  color: var(--primary);
  font-weight: 600;
}
.an-cp-shortcut .material-icons {
  font-size: 22px;
  color: var(--primary);
}
.an-cp-shortcut.busy .material-icons { animation: an-cp-spin 1s linear infinite; }
@keyframes an-cp-spin { to { transform: rotate(360deg); } }

.an-cp-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Yelp-style: matched portion = regular weight, unmatched = bold. */
.an-cp-item-name strong { font-weight: 700; }

.an-cp-count {
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 9px;
  flex-shrink: 0;
}

.an-cp-empty {
  padding: 18px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Mobile: full-height bottom sheet */
@media (max-width: 640px) {
  .an-cp-panel.is-mobile {
    position: fixed; inset: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: flex; flex-direction: column;
  }
  .an-cp-panel.is-mobile .an-cp-list {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;             /* allow flex child to shrink so overflow-y scrolls */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 calc(24px + env(safe-area-inset-bottom));
  }
  .an-cp-mobile-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
  }
  .an-cp-mobile-input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit; font-size: 16px;
    outline: none;
  }
  .an-cp-mobile-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  }
  .an-cp-mobile-close {
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
}

/* ===== Custom select (vanilla, mirrors staff-app <Select> look) ===== */
.an-cs { position: relative; display: inline-flex; width: 100%; }
.an-cs-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  height: 38px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: start;
}
.an-cs-btn:hover  { border-color: var(--primary); }
.an-cs-btn.open   { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.an-cs-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-cs-label.is-placeholder { color: var(--text-muted); }
.an-cs-arrow {
  font-size: 20px !important;
  color: var(--text-muted);
  transition: transform .15s;
  margin-inline-start: auto;
}
.an-cs-btn.open .an-cs-arrow { transform: rotate(180deg); }

.an-cs-menu {
  position: fixed;
  z-index: 1200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  overflow-y: auto;
  animation: an-cs-fade .12s ease-out;
}
.an-cs-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 4000;
}

/* ===== AN_PICKER — generic searchable-sheet picker ===== */
.an-pk { position: relative; display: inline-flex; width: 100%; }
.an-pk-trigger {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font: inherit; font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.an-pk-trigger:hover { border-color: var(--primary); }
.an-pk-trigger.open  { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.an-pk-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.an-pk-trigger-label.is-placeholder { color: var(--text-muted); }
.an-pk-trigger-arrow { color: var(--text-muted); transition: transform .15s; }
.an-pk-trigger.open .an-pk-trigger-arrow { transform: rotate(180deg); }

.an-pk-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 4000;
}
.an-pk-panel {
  position: fixed;
  z-index: 4001;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: an-pk-fade .14s ease-out;
}
@keyframes an-pk-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.an-pk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 8px 10px 16px;
  border-bottom: 1px solid var(--border);
}
.an-pk-title {
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.an-pk-close {
  background: transparent; border: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
}
.an-pk-close:hover { color: var(--text); background: #f0f4f8; }
.an-pk-close .material-icons { font-size: 22px; }
.an-pk-search { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.an-pk-search-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit; font-size: 15px;
  outline: none;
}
.an-pk-search-input:focus { border-color: var(--primary); }
.an-pk-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }
.an-pk-item {
  width: 100%;
  display: flex; align-items: center;
  padding: 12px 16px;
  border: 0; background: transparent;
  font: inherit; font-size: 15px;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.an-pk-item:hover { background: #f0f4f8; }
.an-pk-item.active {
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary);
  font-weight: 600;
}

/* Mobile: full-width bottom sheet, top-rounded only, dim backdrop. */
@media (max-width: 600px) {
  .an-pk-panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(80vh + env(safe-area-inset-bottom)) !important;
    border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
  }
  .an-pk-item { padding: 14px 16px; font-size: 16px; min-height: 48px; }
}
/* Searchable AN_SELECT — sticky search input above the scrollable list.
   Used when enhance(sel, { searchable: true }) is passed. */
.an-cs-menu.has-search { display: flex; flex-direction: column; padding: 0; }
.an-cs-search {
  position: sticky;
  top: 0;
  padding: 8px 8px 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.an-cs-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.an-cs-search-input:focus { border-color: var(--primary); }
.an-cs-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
/* Mobile: render the AN_SELECT dropdown as a bottom-sheet so a long
   list (e.g. 18 branches) is fully reachable and items are easy to
   tap. The inline `top/bottom/left/width/max-height` from JS get
   overridden via !important. */
@media (max-width: 600px) {
  .an-cs-menu {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(70vh + env(safe-area-inset-bottom)) !important;
    border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 4001;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
  }
  .an-cs-item { padding: 14px 16px; font-size: 16px; min-height: 48px; }
}
@keyframes an-cs-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.an-cs-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none; background: none;
  font: inherit; font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
  text-align: start;
}
.an-cs-item:hover { background: #f3f4f6; }
.an-cs-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

/* In the search bar (hero), the select sits inside its own field cell —
   strip our chrome so it inherits the field's transparent background. */
.an-search-field .an-cs { width: 100%; }
.an-search-field .an-cs-btn {
  border: none;
  background: transparent;
  padding: 0;
  height: auto;
  box-shadow: none !important;
}
.an-search-field .an-cs-btn:hover { border: none; }
.an-search-field .an-cs-arrow { color: var(--text-muted); }

/* In the lead dialog the select reuses the form-input look. */
.an-lead-form .an-cs-btn {
  height: auto;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
}

[dir="rtl"] .an-cs-btn { text-align: right; }
[dir="rtl"] .an-cs-item { text-align: right; }

/* ===== Public booking modal ===== */
.an-booking-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 220;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 12px;
  overflow-y: auto;
}
.an-booking-dialog {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px;
  margin: auto;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
}
.an-booking-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
}
.an-booking-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.an-booking-close { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); }
.an-booking-close .material-icons { font-size: 22px; }
.an-booking-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  flex: 1;
}
.an-booking-loading { display: flex; align-items: center; justify-content: center; padding: 40px; }
.an-booking-error {
  margin: 12px 22px 0;
  background: #fee2e2; color: #991b1b;
  padding: 10px 14px; border-radius: 8px; font-size: 14px;
}
.an-booking-success {
  margin: 22px;
  display: flex; align-items: flex-start; gap: 12px;
  background: #d1fae5; color: #065f46;
  padding: 18px 16px; border-radius: 12px;
}
.an-booking-success .material-icons { font-size: 26px; flex-shrink: 0; }

.an-bk-section { margin-bottom: 18px; }
.an-bk-label {
  display: block;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.an-bk-input,
.an-bk-select,
.an-bk-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface);
  outline: none; box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.an-bk-input:focus,
.an-bk-select:focus,
.an-bk-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.an-bk-textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.an-bk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .an-bk-grid2 { grid-template-columns: 1fr; } }
/* Consistent vertical rhythm between client-detail rows
   (name/phone row, email, notes). */
.an-bk-fields { display: flex; flex-direction: column; gap: 10px; }

/* Staff chips */
.an-bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.an-bk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: all .12s;
}
.an-bk-chip:hover { border-color: var(--primary); color: var(--primary); }
.an-bk-chip.on   { background: var(--primary); color: white; border-color: var(--primary); }
.an-bk-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.1); }

/* Slot picker */
.an-bk-slot-help {
  margin-bottom: 8px; font-size: 12.5px; color: var(--text-muted);
}
.an-bk-day-tabs {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  margin-bottom: 8px;
}
.an-bk-day-tab {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 0 0 auto;
  min-width: 64px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: all .12s;
}
.an-bk-day-tab:hover { border-color: var(--primary); }
.an-bk-day-tab.on    { background: var(--primary); color: white; border-color: var(--primary); }
.an-bk-day-name { font-weight: 600; font-size: 13px; }
.an-bk-day-date { font-size: 11px; opacity: .9; }

.an-bk-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.an-bk-slot {
  padding: 9px 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: all .12s;
}
.an-bk-slot:hover { border-color: var(--primary); color: var(--primary); }
.an-bk-slot.on    { background: var(--primary); color: white; border-color: var(--primary); }

.an-bk-empty,
.an-bk-empty-small {
  padding: 18px; text-align: center; color: var(--text-muted); font-size: 14px;
  /* When placed inside the slots grid, span every column so the message
     reads horizontally instead of being squeezed into a 72px column. */
  grid-column: 1 / -1;
}
.an-bk-empty-small { padding: 6px; font-size: 12.5px; }

/* Selected-slot chips */
.an-bk-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.an-bk-selected-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid var(--primary); border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 13px; font-weight: 500;
}
.an-bk-selected-chip button {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; color: var(--primary); display: inline-flex;
}
.an-bk-selected-chip .material-icons { font-size: 16px; }

/* Footer actions */
.an-bk-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.an-bk-cancel,
.an-bk-submit {
  padding: 10px 22px; border-radius: 8px;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.an-bk-cancel { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.an-bk-cancel:hover { background: #f3f4f6; }
.an-bk-submit { background: var(--primary); color: white; border: none; }
.an-bk-submit:hover:not(:disabled) { background: var(--primary-dark); }
.an-bk-submit:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 480px) {
  .an-booking-overlay { padding: 0; }
  .an-booking-dialog { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
}

/* ===== "List your business" lead modal ===== */
.an-lead-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .5);
  z-index: 200;
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.an-lead-overlay.open { display: flex; }
.an-lead-dialog {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px;
  margin: auto;
  padding: 24px;
}
.an-lead-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.an-lead-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.an-lead-close { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); }
.an-lead-close:hover { color: var(--text); }
.an-lead-close .material-icons { font-size: 22px; }
.an-lead-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; }
.an-lead-error { background: #fee2e2; color: #991b1b; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.an-lead-success {
  display: flex; align-items: center; gap: 10px;
  background: #d1fae5; color: #065f46; padding: 16px 14px; border-radius: 10px; font-size: 15px;
}
.an-lead-success .material-icons { font-size: 24px; }
.an-lead-form { display: flex; flex-direction: column; gap: 14px; }
.an-lead-field { display: flex; flex-direction: column; gap: 4px; }
.an-lead-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.an-lead-label small { color: var(--text-muted); font-weight: 400; }
.an-lead-form input,
.an-lead-form select,
.an-lead-form textarea {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.an-lead-form input:focus,
.an-lead-form select:focus,
.an-lead-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.an-lead-form textarea { resize: vertical; min-height: 80px; font-family: inherit; }
.an-lead-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.an-lead-cancel,
.an-lead-submit {
  padding: 10px 20px; border-radius: 8px;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.an-lead-cancel {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.an-lead-cancel:hover { background: #f3f4f6; }
.an-lead-submit {
  background: var(--primary); color: white; border: none;
}
.an-lead-submit:hover { background: var(--primary-dark); }
.an-lead-submit:disabled { opacity: .65; cursor: not-allowed; }

/* ===== Legal pages (terms, privacy, accessibility) ===== */
.an-legal {
  background: var(--surface); padding: 36px; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin: 28px 0; line-height: 1.7;
}
.an-legal h1 { margin-top: 0; font-size: 28px; }
.an-legal h2 { font-size: 19px; margin-top: 28px; color: var(--text); }
.an-legal p, .an-legal li { font-size: 14.5px; }
.an-legal a { color: var(--primary); }
.an-legal .updated { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
@media (max-width: 600px) { .an-legal { padding: 22px 18px; } }

/* ===== Client login pill (header) ===== */
.an-client-slot { position: relative; display: inline-flex; align-items: center; }
.an-client-login {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 13px; background: var(--surface);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.an-client-login:hover { border-color: var(--primary); color: var(--primary); }
.an-client-login .material-icons { font-size: 16px; }
.an-client-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer; user-select: none;
  transition: border-color .15s, box-shadow .15s;
}
.an-client-pill:hover, .an-client-pill:focus { border-color: var(--primary); box-shadow: var(--shadow-sm); outline: none; }
.an-client-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: white; font-weight: 600; font-size: 13px;
}
.an-client-name { font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-client-caret { font-size: 18px; color: var(--text-muted); }
.an-client-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
  min-width: 200px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden;
}
.an-client-menu-greeting {
  padding: 10px 14px; font-size: 13px; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.an-client-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; background: transparent; border: none;
  font-size: 14px; color: var(--text); cursor: pointer; text-align: start;
  text-decoration: none;
}
.an-client-menu-item:hover { background: #f3f4f6; text-decoration: none; color: var(--text); }
.an-client-menu-item .material-icons { font-size: 18px; color: var(--text-muted); }
@media (max-width: 600px) {
  .an-client-login span:not(.material-icons) { display: none; }
  .an-client-login { padding: 7px 10px; }
  .an-client-name { max-width: 90px; }
}

/* ===== Auth dialog (login / register OTP) ===== */
.an-auth-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
}
.an-auth-dialog {
  background: var(--surface); border-radius: var(--radius);
  width: 100%; max-width: 420px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 32px);
}
.an-auth-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.an-auth-head h2 { margin: 0; font-size: 18px; }
.an-auth-close {
  background: transparent; border: none; cursor: pointer; padding: 4px;
  color: var(--text-muted); display: inline-flex;
}
.an-auth-close:hover { color: var(--text); }
.an-auth-sub {
  padding: 14px 20px 0; color: var(--text-muted); font-size: 13.5px;
}
.an-auth-error {
  margin: 12px 20px 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: #fef2f2; border: 1px solid #fecaca; color: var(--danger); font-size: 13.5px;
}
.an-auth-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 0; }
.an-auth-label { font-size: 13px; font-weight: 500; margin: 6px 0 6px; color: var(--text); }
.an-auth-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; box-sizing: border-box; background: white; color: var(--text);
}
.an-auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.an-auth-code {
  letter-spacing: 12px; font-size: 26px; text-align: center; font-weight: 600;
  padding: 12px; max-width: 220px; margin: 4px auto 0;
}
.an-auth-help { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.an-auth-sentto {
  background: var(--primary-light); color: var(--primary-dark);
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px;
  margin-bottom: 14px; text-align: center;
}
.an-auth-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px;
}
.an-auth-actions-row {
  justify-content: space-between; margin-top: 10px;
}
.an-auth-cancel, .an-auth-primary {
  padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.an-auth-cancel { background: var(--surface); color: var(--text); }
.an-auth-cancel:hover { background: #f3f4f6; }
.an-auth-primary { background: var(--primary); color: white; border-color: var(--primary); font-weight: 500; }
.an-auth-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.an-auth-primary:disabled { opacity: .65; cursor: not-allowed; }
.an-auth-link {
  background: transparent; border: none; color: var(--primary); cursor: pointer;
  font-size: 13px; padding: 4px 0; font-family: inherit;
}
.an-auth-link:disabled { color: var(--text-muted); cursor: default; }
.an-auth-link:hover:not(:disabled) { text-decoration: underline; }

/* ===== My appointments page ===== */
.an-myappts-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 24px 0 12px;
}
.an-myappts-head h1 { margin: 0; font-size: 24px; }
.an-myappts-back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted); font-size: 14px;
}
.an-myappts-back:hover { color: var(--primary); text-decoration: none; }
.an-myappts-loading { padding: 60px; display: flex; justify-content: center; }
.an-myappts-empty {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.an-myappts-empty .material-icons { font-size: 48px; opacity: .6; display: block; margin-bottom: 12px; }
.an-myappts-cta {
  display: inline-block; margin-top: 16px;
  padding: 10px 22px; background: var(--primary); color: white !important;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 500;
  border: none; cursor: pointer;
}
.an-myappts-cta:hover { background: var(--primary-dark); text-decoration: none; }
.an-myappts-section { margin: 24px 0; }
.an-myappts-section h2 {
  font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.an-myappts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.an-myappts-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.an-myappts-card.pending { border-color: #fde68a; background: #fffbeb; }
.an-myappts-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.an-myappts-biz {
  font-weight: 600; color: var(--text); font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%;
}
.an-myappts-biz:hover { color: var(--primary); text-decoration: none; }
.an-myappts-badge {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  background: #e5e7eb; color: var(--text-muted);
}
.an-myappts-badge.ok   { background: #dcfce7; color: #166534; }
.an-myappts-badge.bad  { background: #fee2e2; color: #991b1b; }
.an-myappts-badge.warn { background: #fef3c7; color: #92400e; }
.an-myappts-when {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text);
}
.an-myappts-when .material-icons { font-size: 16px; color: var(--text-muted); }
.an-myappts-dot { color: var(--text-muted); }
.an-myappts-svc { font-size: 14px; color: var(--text-muted); }
.an-myappts-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.an-myappts-meta span { display: inline-flex; align-items: center; gap: 4px; }
.an-myappts-meta .material-icons { font-size: 14px; }
.an-myappts-notes {
  font-size: 13px; color: var(--text);
  background: #f9fafb; padding: 8px 10px; border-radius: var(--radius-sm); margin-top: 4px;
}
.an-myappts-slots-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.an-myappts-slots { margin: 4px 0 0; padding-inline-start: 18px; font-size: 13.5px; }
.an-myappts-slots li { margin: 2px 0; }
.an-myappts-error { padding: 30px; text-align: center; color: var(--danger); }
.an-myappts-gate {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 50px 30px; text-align: center; margin: 40px auto; max-width: 460px;
  box-shadow: var(--shadow-sm);
}
.an-myappts-gate .material-icons { font-size: 40px; color: var(--text-muted); display: block; margin-bottom: 12px; }
.an-myappts-gate h2 { margin: 0 0 8px; font-size: 20px; }
.an-myappts-gate p { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; }

/* ===== My appointments — view toggle + list view ===== */
.an-myappts-head-actions { display: inline-flex; align-items: center; gap: 14px; }
.an-myappts-view-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.an-myappts-view-toggle button {
  background: var(--surface); border: none; padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; color: var(--text-muted);
}
.an-myappts-view-toggle button.on { background: var(--primary); color: white; }
.an-myappts-view-toggle button:hover:not(.on) { background: #f3f4f6; color: var(--text); }
.an-myappts-view-toggle .material-icons { font-size: 18px; }

.an-myappts-table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: auto; box-shadow: var(--shadow-sm);
}
.an-myappts-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.an-myappts-table thead th {
  text-align: start; padding: 10px 14px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  background: #f9fafb; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.an-myappts-table tbody td {
  padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.an-myappts-table tbody tr:last-child td { border-bottom: none; }
.an-myappts-table tbody tr:hover { background: #fafbfc; }
.an-myappts-table a { color: var(--text); font-weight: 500; }
.an-myappts-table a:hover { color: var(--primary); }
.an-myappts-row-when { display: flex; flex-direction: column; line-height: 1.3; }
.an-myappts-row-time { color: var(--text-muted); font-size: 12.5px; }
.an-myappts-row-sub  { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.an-myappts-row-slots { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }

/* Per-card actions row — holds Waze + Google Maps on the left and any
   trailing CTAs (e.g. "Order again") right-aligned on the same line.
   Wraps cleanly on narrow screens. Empty rows collapse so cards without
   an address don't leave a phantom gap. */
.an-card-actions {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
  align-items: center;
}
.an-card-actions:empty { display: none; }
/* Right-align the Order-again CTA — only one trailing button so push-right
   via auto margin keeps the directions buttons left without needing a
   spacer element. */
.an-card-actions .an-myappts-order-again { margin-inline-start: auto; margin-top: 0; align-self: center; padding: 5px 10px; font-size: 12.5px; }
.an-card-actions .an-myappts-order-again .material-icons { font-size: 14px; }

/* Waze / Google Maps quick-navigate pills. Tap on mobile opens the
   installed app; desktop opens the web map. */
.an-directions-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform 0.08s, box-shadow 0.12s;
}
.an-directions-btn .material-icons { font-size: 14px; }
.an-directions-btn:hover { text-decoration: none; }
/* Quiet outline pills — subtle tinted background, brand-coloured icon
   + text. Hover fills in. Keeps the row visually calm next to the
   address while still telegraphing "tap to navigate". */
.an-directions-btn.waze  {
  background: rgba(51, 204, 255, 0.10);
  color: #0891b2;
  border: 1px solid rgba(51, 204, 255, 0.35);
}
.an-directions-btn.waze:hover  {
  background: #33ccff; color: #ffffff; border-color: #33ccff;
}
.an-directions-btn.gmaps {
  background: rgba(52, 168, 83, 0.10);
  color: #16a34a;
  border: 1px solid rgba(52, 168, 83, 0.35);
}
.an-directions-btn.gmaps:hover {
  background: #34a853; color: #ffffff; border-color: #34a853;
}

/* Contact-us page (contact.html / contact.js). Override .an-container's
   1200px width — the contact form looks lost in a 1200px card. Cap the
   whole <main> at 720px and center it. !important defends against the
   flex-item width quirk on some browsers. */
.an-legal.an-contact-page {
  max-width: 720px !important;
  margin-inline: auto !important;
}
.an-contact-wrap { /* No-op wrapper kept so existing class-based selectors still work. */ }
.an-contact-intro {
  margin-top: 4px; margin-bottom: 22px;
  color: var(--text-muted); font-size: 15px; line-height: 1.55;
}
.an-contact-form {
  display: grid; gap: 14px;
}
.an-contact-field { display: grid; gap: 6px; }
.an-contact-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.an-contact-label small { color: var(--text-muted); font-weight: 400; margin-inline-start: 4px; }
.an-contact-form input,
.an-contact-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface);
  box-sizing: border-box;
}
.an-contact-form textarea { resize: vertical; min-height: 120px; }
.an-contact-form input:focus,
.an-contact-form textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.an-contact-actions { margin-top: 4px; }
.an-contact-submit {
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  padding: 10px 22px; border-radius: 8px; font: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.an-contact-submit:hover:not(:disabled) { background: var(--primary-dark); }
.an-contact-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.an-contact-success {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 18px; padding: 14px 16px;
  background: #dcfce7; color: #166534;
  border: 1px solid #bbf7d0; border-radius: 8px; font-size: 15px;
}
.an-contact-error {
  margin: 8px 0 14px; padding: 12px 14px;
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fecaca; border-radius: 8px; font-size: 14px;
}

/* "Order again" CTA — appears in the past list (table view) and inside
   the .an-card-actions row on past cards. Quiet outline pill matching
   the Waze / Maps style: subtle tinted background, primary-coloured
   text, fills in on hover. */
.an-myappts-order-again {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary);
  border: 1px solid rgba(37, 99, 235, 0.35);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.an-myappts-order-again:hover {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
}
.an-myappts-order-again .material-icons { font-size: 16px; }
/* On cards, the Order-again button now lives INSIDE the shared
   .an-card-actions row (see rule above) — no separate placement needed. */

/* "Request cancellation" CTA — appears on upcoming cards when the business
   has allow_client_cancel=1 and we're outside the min-notice window. Soft
   red outline pill, fills on hover. Right-aligned in the actions row. */
.an-myappts-cancel-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.30);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  margin-inline-start: auto; align-self: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.an-myappts-cancel-btn:hover:not(:disabled) {
  background: #dc2626; color: #fff; border-color: #dc2626;
}
.an-myappts-cancel-btn:disabled { opacity: 0.6; cursor: wait; }
.an-myappts-cancel-btn .material-icons { font-size: 14px; }

/* "Cancellation requested" — read-only badge replacing the button after
   the client has submitted the request. */
.an-myappts-cancel-pending {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: #fef2f2; color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 12.5px; font-weight: 600;
  margin-inline-start: auto; align-self: center;
}
.an-myappts-cancel-pending .material-icons { font-size: 14px; }

/* Custom confirm modal for the cancel-request flow (browser-native
   dialogs are forbidden across the project). */
.an-myappts-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.an-myappts-modal {
  background: var(--surface, #fff); color: var(--text, #111);
  border-radius: 12px; padding: 22px 22px 18px;
  max-width: 420px; width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.an-myappts-modal h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.an-myappts-modal p  { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-muted, #555); }
.an-myappts-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.an-modal-btn {
  padding: 8px 16px; border-radius: 8px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; border: 1px solid var(--border, #ddd);
  background: var(--surface, #fff); color: var(--text, #111);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.an-modal-btn:hover { background: #f3f4f6; }
.an-modal-btn.primary {
  background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb);
}
.an-modal-btn.primary:hover { background: var(--primary-dark, #1d4ed8); border-color: var(--primary-dark, #1d4ed8); }
.an-modal-btn.primary.danger {
  background: #dc2626; border-color: #dc2626;
}
.an-modal-btn.primary.danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Toast — bottom-of-screen ephemeral feedback after cancel submit. */
.an-myappts-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px; border-radius: 999px;
  background: #1f2937; color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0; transition: opacity 0.25s, transform 0.25s;
  z-index: 10000;
}
.an-myappts-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.an-myappts-toast.ok  { background: #166534; }
.an-myappts-toast.bad { background: #991b1b; }

/* Single eligible staff — shown as an inert info pill (no choice to make). */
.an-bk-staff-single {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: #f9fafb; color: var(--text); font-size: 13.5px;
}
.an-bk-staff-single .dot { width: 10px; height: 10px; border-radius: 50%; }

/* ===== Public appointment-confirm page ===== */
.an-confirm-wrap {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px;
}
.an-confirm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: 520px; width: 100%;
  padding: 28px;
  text-align: center;
}
.an-confirm-loading {
  display: flex; justify-content: center; padding: 50px 0;
}
.an-confirm-icon {
  font-size: 48px !important;
  display: block; margin: 0 auto 12px;
  color: var(--primary);
}
.an-confirm-icon.error { color: var(--danger); }
.an-confirm-biz {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); color: var(--primary-dark);
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; margin-bottom: 16px;
}
.an-confirm-biz h2 { margin: 0; font-size: 14px; font-weight: 600; }
.an-confirm-biz .material-icons { font-size: 16px; }
.an-confirm-title { font-size: 22px; margin: 0 0 6px; }
.an-confirm-greet { color: var(--text-muted); font-size: 14.5px; margin-bottom: 20px; }
.an-confirm-summary {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: start;
  margin-bottom: 18px;
}
.an-confirm-summary .row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 14.5px;
}
.an-confirm-summary .row + .row { border-top: 1px solid var(--border); }
.an-confirm-summary .material-icons { font-size: 18px; color: var(--text-muted); flex-shrink: 0; }
.an-confirm-summary a { color: var(--primary); }
.an-confirm-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  margin: 4px 0 16px;
}
.an-confirm-state.ok   { background: #dcfce7; color: #166534; }
.an-confirm-state.bad  { background: #fee2e2; color: #991b1b; }
.an-confirm-state.warn { background: #fef3c7; color: #92400e; }
.an-confirm-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .an-confirm-actions { grid-template-columns: 1fr; }
}
.an-confirm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid; font: inherit; font-size: 15px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer; transition: all .15s;
}
.an-confirm-btn.confirm {
  background: #16a34a; color: white; border-color: #16a34a;
}
.an-confirm-btn.confirm:hover:not(:disabled) { background: #15803d; }
.an-confirm-btn.cancel {
  background: var(--surface); color: var(--danger); border-color: #fecaca;
}
.an-confirm-btn.cancel:hover:not(:disabled) { background: #fef2f2; }
.an-confirm-btn:disabled { opacity: .55; cursor: not-allowed; }
.an-confirm-btn .material-icons { font-size: 18px; }
.an-confirm-disclaimer {
  margin-top: 14px; font-size: 12px; color: var(--text-muted);
}
.an-confirm-link {
  display: inline-block; margin-top: 16px; color: var(--primary);
}