/* ==========================================================================
   SolidW — Shared Components (v2 — luxury pass)
   ========================================================================== */

/* ---------- Default field styling ----------
   base.css strips border/background from every input/select/textarea for a
   clean reset. Only the auth pages' .input-field class was putting that
   back, so every other form in the app (booking form, dashboard forms,
   change-password fields) rendered as invisible, borderless boxes. This
   restores a visible field by default; .input-field can still override it. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--fs-base);
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
input::placeholder,
textarea::placeholder {
  color: var(--color-text-faint);
}

/* ---------- Layout container ----------
   Used across the public site, dashboard, and landing pages. This was
   referenced in the markup but never actually defined anywhere, so content
   (like the business description on the booking page) had no max-width or
   side padding and could run past the edge of the screen. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  box-sizing: border-box;
}

/* ---------- Buttons — frosted, layered, premium ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(180deg, #6D7CFF 0%, #5567F2 100%);
  color: var(--color-text-inverse);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(85, 103, 242, 0.18);
}
.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 40px rgba(85, 103, 242, 0.24);
  transform: translateY(-2px);
}

.btn-accent {
  background: #FFFFFF;
  border-color: var(--border-medium);
  color: var(--color-brand-navy);
  box-shadow: var(--shadow-soft-sm), var(--shadow-inner-highlight);
}
.btn-accent:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-soft-md), var(--shadow-inner-highlight);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: #FFFFFF;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background-color: var(--color-pastel-bg-soft);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover { background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent); color: var(--color-text); }

.btn-danger {
  background-color: color-mix(in srgb, var(--color-danger) 8%, white);
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 22%, transparent);
  box-shadow: none;
}
.btn-danger:hover {
  background-color: color-mix(in srgb, var(--color-danger) 14%, white);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
  box-shadow: none;
  transform: none;
}

.btn-sm { padding: 0.4rem 0.85rem; font-size: var(--fs-xs); }
.btn-lg { padding: 0.75rem 1.75rem; font-size: var(--fs-base); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; transform: none !important; }

.modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  min-width: 36px;
  border-radius: var(--radius-full);
  font-size: var(--fs-md);
  line-height: 1;
  flex-shrink: 0;
  background-color: var(--bg-canvas);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.modal-close-btn:hover {
  background-color: var(--color-danger);
  color: var(--color-text-inverse);
  border-color: var(--color-danger);
}

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft-md), var(--shadow-inner-highlight);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.card--hover {
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.card--hover:hover {
  box-shadow: var(--shadow-soft-lg), var(--shadow-inner-highlight);
  border-color: var(--border-brand);
  transform: translateY(-3px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card--gold-edge {
  position: relative;
  border-top: none;
}
.card--gold-edge::before {
  content: "";
  position: absolute;
  top: 0; left: var(--space-5); right: var(--space-5);
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--color-brand-primary), transparent);
}

/* ---------- Glass panels ----------
   Thin, backward-compatible aliases onto the Liquid Glass system defined in
   liquid-glass.css. Prefer `.liquid-glass` / `.liquid-glass--dark` directly
   in new markup; these three class names are kept so existing pages that
   reference them keep working unchanged. */
.glass-light {
  background: var(--glass-light-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-light-border);
}

.glass-dark {
  background: var(--glass-dark-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-dark-border);
  color: var(--color-navy-text);
  box-shadow: inset 0 1px 0 var(--glass-dark-highlight);
}

.glass-panel {
  background: var(--glass-light-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen-light);
}

/* ---------- Dropdowns (menu + select) ----------
   `.dropdown` / `.dropdown-menu` / `.dropdown-item` is the one solid
   (non-glass) dropdown primitive. For a translucent dropdown, use
   `.glass-dropdown` / `.glass-dropdown-item` from liquid-glass.css instead. */
.dropdown { position: relative; display: inline-block; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  padding: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.dropdown-item:hover { background-color: var(--color-surface-alt); }
.dropdown-item.danger { color: var(--color-danger); }

/* Native <select> gets the same visual language as .btn-outline / inputs */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.1em), calc(100% - 15px) calc(1.1em);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-7);
}

/* ---------- Tabs (solid) ----------
   `.tabs` / `.tab` is the one solid pill tab bar. For a translucent bar use
   `.glass-tabs` / `.glass-tab` from liquid-glass.css. `.admin-filter-tabs`
   and `.public-tabs` (below/in public-site.css) both compose with this. */
.tabs {
  display: inline-flex;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  max-width: 100%;
  overflow-x: auto;
}

.tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.tab:hover { color: var(--color-text); }
.tab.active,
.tab[aria-selected="true"] {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ---------- Form groups ---------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Native <input type="date">/<input type="time"> controls (and selects)
   render at their own intrinsic width by default and ignore a flex parent's
   "stretch" sizing — that's what was pushing them past the edge of the
   screen inside a two-up .form-row. Forcing width:100% + border-box makes
   them fill (and shrink to) whatever space their column actually has. */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

/* Checkboxes/radios should stay their natural small size and never stretch
   full-width — that's what was shoving a checkbox label's text off the
   right edge of the modal. */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  flex-shrink: 0;
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.form-hint--success { color: var(--color-success); }
.form-hint--danger { color: var(--color-danger); }

/* Business name → booking page URL: preview text + inline "edit slug"
   control. The name field always keeps whatever spacing/punctuation the
   owner typed — only the URL itself gets dashed/lowercased, and this lets
   the owner override that generated URL independently of the name. */
.slug-preview-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.slug-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: color var(--duration-fast, 0.15s) var(--ease-standard, ease), background-color var(--duration-fast, 0.15s) var(--ease-standard, ease);
}

.slug-edit-btn:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-line);
}

.slug-reset-btn {
  border: none;
  background: transparent;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.slug-edit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.slug-edit-prefix {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.slug-edit-input {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 0.4rem 0.6rem;
  font-size: var(--fs-sm);
}

.form-error {
  font-size: var(--fs-xs);
  color: var(--color-danger);
}

.form-row {
  display: flex;
  gap: var(--space-4);
}
/* min-width: 0 overrides the flex default of min-width: auto, which
   otherwise refuses to shrink a column below its content's intrinsic
   width — the actual cause of date/time inputs overflowing off-screen. */
.form-row > .form-group { flex: 1; min-width: 0; }

/* ---------- Price input currency affix ----------
   Shows the business's actual selected currency (see /assets/js/currencies.js)
   inline in the price field — "$50", "₺500", "150.00 AED" — instead of a
   bare number. Driven entirely by updatePriceAffix() in services.js, never
   a hardcoded symbol. Padding is set inline (in ch, based on the symbol's
   character count) rather than measured from the DOM, since this field
   lives inside a display:none modal until opened and offsetWidth would
   read 0 there. */
.price-input-group {
  position: relative;
}
.price-input-affix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  pointer-events: none;
  white-space: nowrap;
}
.price-input-group.affix-prefix .price-input-affix { left: 0.9rem; }
.price-input-group.affix-suffix .price-input-affix { right: 0.9rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border: 1px solid transparent;
}
.badge-free { background-color: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.badge-pro { background: var(--gradient-gold); color: var(--color-brand-navy); }
.badge-success { background-color: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.badge-warning { background-color: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); }
.badge-danger { background-color: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); }

/* ---------- Alert banners ---------- */
.auth-error-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
}

.auth-success-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  color: color-mix(in srgb, var(--color-success) 70%, black);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-soft-sm);
}

/* ---------- Tables ----------
   border-collapse was missing, so every <td>/<th> kept its own separate
   border box (the browser default border-spacing), which is what made the
   row dividers look broken/uneven instead of one clean line per row.
   The wrapping .card also had no horizontal scroll, so on a narrow phone
   screen the rightmost column(s) were simply clipped off-screen — the
   :has() rule below lets a table scroll sideways inside its card instead. */
.table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
  border-spacing: 0;
}
.card:has(.table) {
  overflow-x: auto;
}
.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background-color: var(--color-surface-alt); }

/* ---------- Empty states ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--color-text-muted);
}
.empty-state h3 { color: var(--color-text-muted); margin-bottom: var(--space-2); }

/* ---------- FAQ accordion ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.faq-item[open] {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-secondary);
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: var(--space-3); }

/* ---------- Nav / sidebar shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-canvas);
  max-width: 100vw;
  overflow-x: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-4) var(--space-5);
  color: var(--color-text);
  z-index: var(--z-sidebar);
  transition: width var(--duration-base) var(--ease-standard),
              padding var(--duration-base) var(--ease-standard);
}
.sidebar > * { position: relative; z-index: 1; }

/* Collapse / expand toggle */
.sidebar-toggle {
  position: absolute;
  top: var(--space-5);
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-soft-sm);
  z-index: 2;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.sidebar-toggle:hover { color: var(--color-brand-primary); border-color: var(--border-brand); }
.sidebar-toggle svg { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-standard); }

/* Hidden on desktop; shown only inside the mobile media query below. */
.mobile-nav-open-btn { display: none; }

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-5);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-group-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin: var(--space-4) var(--space-3) var(--space-2);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-group-label:first-of-type { margin-top: 0; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.sidebar-link:hover { background-color: var(--bg-canvas-alt); color: var(--color-text); }
.sidebar-link.active {
  background: var(--color-brand-navy);
  color: #FFFFFF;
  box-shadow: var(--shadow-soft-sm);
}

.sidebar-link.btn-glass {
  background-color: transparent;
  border-color: transparent;
}
.sidebar-link.btn-glass:hover {
  background-color: var(--bg-canvas-alt);
  border-color: transparent;
  color: var(--color-danger);
}

.sidebar-link--danger:hover { background-color: color-mix(in srgb, var(--color-danger) 8%, transparent); color: var(--color-danger); }

.sidebar-link span,
.sidebar-brand span { overflow: hidden; text-overflow: ellipsis; }

/* ---- Upgrade / plan card inside sidebar ---- */
.sidebar-upgrade-card {
  position: relative;
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg,
    var(--color-pastel-periwinkle) 0%,
    var(--color-brand-primary) 45%,
    var(--color-brand-deep) 78%,
    var(--color-brand-navy) 100%);
  box-shadow: var(--shadow-soft-lg), var(--shadow-blue-glow);
  color: var(--color-text-inverse);
  overflow: hidden;
  isolation: isolate;
}
/* Soft radial sheen in the top corner for depth, plus a faint diagonal
   highlight sweeping across the card — kept purely decorative (behind
   content, no pointer events) so it never interferes with the button. */
.sidebar-upgrade-card::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-pastel-pink) 55%, transparent) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.sidebar-upgrade-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, transparent 35%);
  z-index: -1;
  pointer-events: none;
}
.sidebar-upgrade-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.sidebar-upgrade-bolt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
}
.sidebar-upgrade-bolt svg { width: 13px; height: 13px; }
.sidebar-upgrade-label { display: block; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.02em; }
.sidebar-upgrade-plan { display: block; font-size: var(--fs-xs); font-weight: 700; }
.sidebar-upgrade-copy {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.sidebar-upgrade-card .btn-accent {
  margin-top: var(--space-2);
  padding: 0.45rem 1rem;
  font-size: var(--fs-xs);
  background: #FFFFFF;
  border-color: transparent;
  color: var(--color-brand-navy);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.sidebar-upgrade-card .btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* ---- Collapsed rail state ---- */
.sidebar.is-collapsed { width: var(--sidebar-width-collapsed); padding-left: var(--space-3); padding-right: var(--space-3); }
.sidebar.is-collapsed .sidebar-brand span,
.sidebar.is-collapsed .sidebar-group-label,
.sidebar.is-collapsed .sidebar-link span,
.sidebar.is-collapsed .sidebar-upgrade-card {
  display: none;
}
.sidebar.is-collapsed .sidebar-brand,
.sidebar.is-collapsed .sidebar-link {
  justify-content: center;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.sidebar.is-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.main-content {
  flex: 1;
  padding: var(--space-6);
  min-width: 0;
  background-color: var(--bg-canvas);
  color: var(--color-text);
}

.hairline-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
  border: none;
  margin: var(--space-5) 0;
}

/* ---------- Toast ---------- */
.solidw-toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
}

.solidw-toast {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
  cursor: pointer;
  max-width: 320px;
  font-size: var(--fs-sm);
}

.solidw-toast--visible { opacity: 1; transform: translateY(0); }
.solidw-toast--success { background-color: var(--color-success); }
.solidw-toast--warning { background-color: var(--color-warning); }
.solidw-toast--error { background-color: var(--color-danger); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  /* Top-aligned rather than vertically centered: centering recalculates
     against the viewport height, and on mobile that height changes the
     instant the keyboard opens, which is what made the modal visibly jump
     and clip its own top when a text field inside it was focused.
     Anchoring to the top keeps its position stable regardless. */
  align-items: flex-start;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
}

.modal {
  position: relative;
  isolation: isolate;
  background: var(--glass-light-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-light-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-width: 460px;
  width: 100%;
  /* dvh (dynamic viewport height) tracks the *visible* viewport, including
     when a mobile keyboard is open — unlike vh, which stays pinned to the
     full-screen height and made the modal think it had more room than it
     actually did once the keyboard covered part of the screen. Falls back
     to vh on older browsers that don't support dvh. */
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen-light);
}
.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, var(--sheen-light) 0%, transparent 40%);
  opacity: 0.8;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.modal > * { position: relative; z-index: 1; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.modal-header h3 { font-size: var(--fs-lg); }

/* Reject-booking modal — a plain white card (matches the site's price/
   service cards) instead of the frosted glass surface other modals use.
   Scoped to this one modifier so nothing else changes. */
.modal--card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft-md), var(--shadow-inner-highlight);
}
.modal--card { display: flex; flex-direction: column; }
.modal--card::before { display: none; }
.modal--card h3 { margin-bottom: var(--space-2); }

.reject-modal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.reject-modal-actions .btn-danger { flex: 1; }
/* "Never mind" is the low-emphasis fallback action, so it's deliberately
   smaller than the default .btn size — it shouldn't visually compete with
   the primary Reject action next to it. */
.reject-modal-cancel {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  padding: 0.5rem 0.9rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .app-shell { position: relative; }

  /* The rail becomes a fixed, collapsible drawer pinned to the left edge —
     collapsed (icon-only) by default on phones, expanding as an overlay
     when toggled so it never pushes page content around. */
        .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    height: 100dvh;
    width: min(var(--sidebar-width), 84vw);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-right: 1px solid var(--color-border);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
  }
  .sidebar:not(.is-collapsed) {
    box-shadow: var(--shadow-soft-lg);
  }
  /* Collapsed = completely removed from rendering (not just invisible), so
     there is zero chance of it showing any sliver, blur, or gradient behind
     the page content. The only thing visible on mobile when closed is the
     hamburger button below. */
    .sidebar.is-collapsed {
    display: none;
  }

  /* While the drawer is open, keep the toggle fully inside its own box
     (top-right corner) so it reads as a clear "close" button and never
     overlaps the page content sitting behind/underneath the drawer. */
  .sidebar:not(.is-collapsed) .sidebar-toggle {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    left: auto;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft-md);
  }

  /* Small circular hamburger button, injected into <body> by
     sidebarToggle.js. This is the only nav affordance visible on mobile
     until the drawer is opened. */
  .mobile-nav-open-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft-md);
    z-index: calc(var(--z-sidebar) + 2);
  }
  .mobile-nav-open-btn span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--color-text);
  }
  /* Hide the hamburger button while the drawer is open (the in-drawer
     close button takes over at that point). */
  body.sidebar-open-lock .mobile-nav-open-btn { display: none; }

  /* Hamburger button sits at top:16px, is 44px tall, so its bottom edge is
     at 60px. Push page content down well past that so titles never crowd
     the button (was calc(space-5 + 52px) = 72px, only a ~12px gap). */
  .main-content { margin-left: 0; padding: calc(var(--space-6) + 72px) var(--space-4) var(--space-5); }

    .form-row { flex-direction: column; gap: 0; }

  /* Dim + block the page behind the drawer while it's open, so content
     doesn't visually bleed through / stay tappable underneath the sidebar. */
  .sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(13, 27, 51, 0.45);
    z-index: 790;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
  }
   /* Locks the page behind the mobile drawer so a scroll gesture that starts
   over the open sidebar can only move the sidebar's own nav list, never
   the page underneath it. Toggled by sidebarToggle.js. */
body.sidebar-open-lock {
  overflow: hidden;
}

  .sidebar:not(.is-collapsed) ~ .sidebar-scrim {
    display: block;
    opacity: 1;
  }
}