/*
 * Design tokens — single source of truth for the app's visual language.
 * Change a value here to restyle every component that references it.
 *
 * Usage in Rails views: class="ui-input", class="ui-btn ui-btn-primary", etc.
 * Usage in Tailwind:   still fine — tokens are additive, not replacing Tailwind.
 */

:root {
  /* ── Brand / accent ─────────────────────────────── */
  --color-primary:       #0f172a;   /* slate-900 — main CTA, borders on focus  */
  --color-primary-hover: #1e293b;   /* slate-800 — hover state                 */
  --color-accent:        #0f172a;   /* swap this one line to change brand color */

  /* ── Neutrals ────────────────────────────────────── */
  --color-border:        #e2e8f0;   /* slate-200 — default input/card borders   */
  --color-border-focus:  #0f172a;   /* border when input is focused             */
  --color-surface:       #ffffff;   /* input / card backgrounds                 */
  --color-surface-subtle:#f8fafc;   /* slate-50  — subtle area backgrounds      */
  --color-text:          #0f172a;   /* slate-900 — body text                    */
  --color-muted:         #64748b;   /* slate-500 — secondary / hint text        */
  --color-placeholder:   #94a3b8;   /* slate-400 — placeholder                  */

  /* ── Semantic ────────────────────────────────────── */
  --color-danger:        #ef4444;   /* red-500   — errors                       */
  --color-danger-light:  #fef2f2;   /* red-50    — error backgrounds            */
  --color-success:       #10b981;   /* emerald-500                              */
  --color-warning:       #f59e0b;   /* amber-500                                */

  /* ── Border radius ───────────────────────────────── */
  --radius-sm:   0.375rem;   /*  6px — badges, tags           */
  --radius-md:   0.75rem;    /* 12px — inputs, buttons        */
  --radius-lg:   1rem;       /* 16px — cards, panels          */
  --radius-xl:   1.25rem;    /* 20px — modals, large surfaces */
  --radius-full: 9999px;     /* pills                         */

  /* ── Input ───────────────────────────────────────── */
  --input-height:    2.625rem;   /* 42px — target tap height      */
  --input-px:        0.75rem;    /* 12px horizontal padding       */
  --input-py:        0.625rem;   /* 10px vertical padding         */
  --input-font-size: 0.875rem;   /* 14px                          */
  --input-radius:    var(--radius-md);
  --input-border:    1px solid var(--color-border);
  --input-bg:        var(--color-surface);
  --input-color:     var(--color-text);

  /* ── Button ──────────────────────────────────────── */
  --btn-height:    2.75rem;    /* 44px                          */
  --btn-px:        1.25rem;    /* 20px                          */
  --btn-py:        0.75rem;    /* 12px                          */
  --btn-radius:    var(--radius-md);
  --btn-font-size: 0.875rem;

  /* ── Spacing ─────────────────────────────────────── */
  --field-gap:  1rem;    /* vertical gap between fields   */
  --label-mb:   0.25rem; /* label → input gap             */
}

/* ═══════════════════════════════════════════════════
   Input utilities
   ═══════════════════════════════════════════════════ */

.ui-input {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: var(--input-py) var(--input-px);
  border-radius: var(--input-radius);
  border: var(--input-border);
  background: var(--input-bg);
  color: var(--input-color);
  font-size: var(--input-font-size);
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ui-input:focus {
  border-color: var(--color-border-focus);
}

.ui-input::placeholder {
  color: var(--color-placeholder);
}

.ui-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Narrow variant for country-code picker in phone inputs */
.ui-input--country {
  width: 6.25rem;
  flex-shrink: 0;
}

/* Business logo avatar overlapping the cover image (LinkedIn/Facebook style) */
.business-logo-overlay {
  position: absolute;
  bottom: 0;
  left: 1.5rem;           /* left-6 */
  transform: translateY(50%);
  z-index: 10;
  border-radius: var(--radius-xl);
  border: 4px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.business-logo-overlay img,
.business-logo-overlay picture {
  display: block;
  width: 9rem;            /* 144px */
  height: 9rem;
  border-radius: calc(var(--radius-xl) - 2px);
  object-fit: cover;
  background: #ffffff;
}

/* Space below cover to clear the overlapping logo */
.business-logo-offset {
  margin-top: 5.5rem;     /* 88px: half logo (72px) + 16px breathing room */
}

/* Prefix wrapper — e.g. "citauno.com/" + slug input */
.ui-input-group {
  display: flex;
  align-items: center;
  height: var(--input-height);
  border-radius: var(--input-radius);
  border: var(--input-border);
  background: var(--input-bg);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.ui-input-group:focus-within {
  border-color: var(--color-border-focus);
}

.ui-input-group__prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  color: var(--color-placeholder);
  font-size: var(--input-font-size);
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}

.ui-input-group__prefix {
  border-right: 1px solid var(--color-border);
}

.ui-input-group__field {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--input-px);
  background: transparent;
  border: none;
  outline: none;
  color: var(--input-color);
  font-size: var(--input-font-size);
}

.ui-input-group__field::placeholder {
  color: var(--color-placeholder);
}

/* ═══════════════════════════════════════════════════
   Mobile admin sidebar (off-canvas)
   ═══════════════════════════════════════════════════ */

.admin-sidebar {
  transition: transform 200ms ease;
}

@media (max-width: 1023px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }

  .admin-sidebar.admin-sidebar--open {
    transform: translateX(0);
  }

  .admin-main {
    margin-left: 0;
  }
}

@media (min-width: 1024px) {
  .admin-mobile-bar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════
   Impersonation banner ("conectado como …")
   ═══════════════════════════════════════════════════ */

/* The banner must stay visible above the fixed admin/platform sidebar (z-40)
   and the top-pinned buttons, so it is fixed to the viewport's top edge with
   a constant height. Layouts opt in by adding .has-impersonation-banner to
   <body>, which pads the page and shifts every other top-pinned element down
   by the banner height via --impersonation-banner-h. */
:root {
  --impersonation-banner-h: 0px;
}

.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  z-index: 60;
}

body.has-impersonation-banner {
  --impersonation-banner-h: 2.5rem;
  padding-top: var(--impersonation-banner-h);
}

body.has-impersonation-banner .admin-sidebar,
body.has-impersonation-banner .admin-mobile-bar,
body.has-impersonation-banner > header {
  top: var(--impersonation-banner-h);
}

/* Preserves the button's top-2.5 (10px) gap below the banner */
body.has-impersonation-banner .admin-share-link {
  top: calc(0.625rem + var(--impersonation-banner-h));
}

/* Preserves the toast stack's top-6 (24px) gap below the banner */
body.has-impersonation-banner .layout-toasts {
  top: calc(1.5rem + var(--impersonation-banner-h));
}

/* ═══════════════════════════════════════════════════
   Label
   ═══════════════════════════════════════════════════ */

.ui-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--label-mb);
}

.ui-hint {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════
   Button utilities
   ═══════════════════════════════════════════════════ */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: var(--btn-height);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
}

.ui-btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.ui-btn-primary:hover {
  background: var(--color-primary-hover);
  color: #ffffff;
}

.ui-btn-ghost {
  background: transparent;
  color: var(--color-muted);
}

.ui-btn-ghost:hover {
  color: var(--color-text);
}

.ui-btn-block {
  width: 100%;
}

/* ═══════════════════════════════════════════════════
   Form field wrapper
   ═══════════════════════════════════════════════════ */

.ui-field {
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════
   Wizard shell — two-panel layout
   ═══════════════════════════════════════════════════ */

.wizard-layout {
  display: flex;
  min-height: calc(100vh - 4rem);
}

/* ── Form panel ── */
/* Top-aligned (not vertically centered) on every breakpoint. Centering re-balances
   the whole column whenever step content changes height — e.g. toggling the seats
   counter swaps a tall callout for a short one, or adding a service/team row — which
   shifts the controls out from under the cursor. Top-aligning keeps everything put. */
.wizard-form-panel {
  flex: 1;
  min-width: 0;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.wizard-form-inner {
  max-width: 34rem;
  width: 100%;
  padding: 2rem 1.25rem;
}

@media (min-width: 768px) {
  .wizard-form-inner {
    padding: 2.5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .wizard-form-inner {
    padding: 3rem 2.5rem;
    max-width: 44rem;
  }
}

/* ── Progress nav ── */
.wizard-progress-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.wizard-progress-nav a,
.wizard-progress-continue {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #64748b;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  transition: color 0.15s ease;
}

.wizard-progress-nav a:hover,
.wizard-progress-continue:hover {
  color: #0f172a;
}

/* ── Progress bar ── */
.wizard-progress-bar-track {
  height: 0.375rem;
  border-radius: 9999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: 2rem;
}

.wizard-progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* ── Alert ── */
.wizard-alert {
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.875rem;
}

/* ── Titles ── */
.wizard-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .wizard-title { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .wizard-title,
  .wizard-intro {
    text-align: center;
  }
}

.wizard-intro {
  color: #64748b;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.wizard-content {
  margin-top: 1.75rem;
}

/* ═══════════════════════════════════════════════════
   Seats count input — remove browser spinners and center
   ═══════════════════════════════════════════════════ */

.seats-count-input {
  text-align: center;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.seats-count-input::-webkit-inner-spin-button,
.seats-count-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   Category picker cards
   ═══════════════════════════════════════════════════ */

.category-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 3.5rem;
}

.category-card:hover {
  border-color: #94a3b8;
}

.category-card[data-selected="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.category-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card__name {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════
   places-autocomplete dropdown
   Rendered by app/javascript/controllers/places_autocomplete_controller.js
   The controller anchors this dropdown to the input's positioned wrapper.
   ═══════════════════════════════════════════════════ */

.places-autocomplete__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12),
              0 4px 10px -2px rgba(15, 23, 42, 0.06);
  padding: 0.25rem;
}

.places-autocomplete__dropdown.hidden {
  display: none;
}

.places-autocomplete__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius-md) - 0.25rem);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text);
}

.places-autocomplete__item:hover,
.places-autocomplete__item--active {
  background: var(--color-surface-subtle);
}

.places-autocomplete__item-main {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--color-text);
}

.places-autocomplete__item-secondary {
  display: block;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--color-muted);
  margin-top: 2px;
}

/* Booking flow steps: when auto-advancing scrolls a step into view, leave room
   above for the sticky header so the section title stays visible. Also force
   the turbo-frame wrapper around the professional step to be a block so the
   space-y separation between siblings applies consistently with the other
   step cards. */
[data-booking-filter-target="step"] {
  scroll-margin-top: 5rem;
}

turbo-frame#booking_team_members {
  display: block;
}
/*
 * The app's own stylesheet, linked on every page next to Tailwind's build.
 *
 * Required by name rather than with `require_tree .`: leaflet.css.erb sits in
 * this directory but has to stay OUT of this bundle. The leaflet-map Stimulus
 * controller injects it on connect (see leaflet_map_controller.js), so the
 * ~14 KB of map styling never blocks the render of the pages — nearly all of
 * them — that show no map.
 *


 */

/* A Leaflet map numbers its own layers: 200 for the tiles, 600 for the marker,
   1000 for the zoom buttons. Leaflet only makes the map box `position:
   relative`, so with no stacking context of its own those numbers are read
   against the whole page, where the sticky header sits at z-20 — and the map
   paints over the header as soon as the page scrolls. Isolating the box keeps
   them inside it. It lives here, not in leaflet.css.erb, because that file is
   vendored verbatim from the npm tarball. */
.leaflet-container {
  isolation: isolate;
}