/* ===== FitStat Booking: trainer marketplace, dashboards, checkout ===== */

/* The original navbar was designed for 6 short plain links. As FitStat grew into
   multiple audiences (individuals, gym owners, apartment/society managers, independent
   trainers), a flat link list stopped communicating who each page was for — e.g.
   "Pricing" and "Products" are both gym-owner (FitStat Ops) pages, sitting next to
   consumer pages (Events, Programs) with no visual grouping. The nav is now organized
   by audience: "For Individuals" and "For Gyms" are dropdown groups (see .nav-group
   below), "For Societies" and "For Trainers" are direct links, each labeled by who
   it's for rather than what it's called internally. ".logo" has flex-shrink: 0
   (style.css) so it can never get silently squeezed by this. */
.navbar {
  max-width: 1060px;
}

.site-nav {
  gap: 0.9rem;
  font-size: 0.85rem;
}

.nav-divider {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  background: var(--border);
  margin: 0 0.15rem;
  vertical-align: middle;
}

/* "Find a Trainer" reads as a call-to-action, not just another link — accent pill,
   own hover state, and no underline-on-hover (that's the plain-link treatment).
   Selector needs to out-specify ".site-nav a" (incl. its mobile-dropdown override,
   which sets background: transparent) — plain ".nav-cta" alone loses that fight. */
.site-nav a.nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 999px;
  white-space: nowrap;
}

.site-nav a.nav-cta:hover {
  background: var(--accent) !important;
  filter: brightness(1.08);
  opacity: 0.95;
}

.nav-cta::after {
  display: none;
}

/* Account/login: icon-only on desktop (saves the ~90px "My Account" would cost in the
   pill), icon + label once the nav drops into the full-width mobile dropdown, where
   space isn't tight. */
.site-nav a.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 8px !important;
  border-radius: 50%;
}

.nav-account svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-account .nav-label {
  display: none;
}

.nav-account::after {
  display: none;
}

/* ---- Audience dropdowns: "For Individuals" / "For Gyms" ---- */
.nav-group {
  position: relative;
}

.nav-group-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.nav-group-trigger:hover,
.nav-group.open .nav-group-trigger {
  background: rgba(254, 65, 1, 0.1);
  color: var(--accent);
}

.nav-caret {
  width: 10px;
  height: 8px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-group.open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  z-index: 1000;
}

.nav-group.open .nav-dropdown {
  display: flex;
}

.nav-dropdown a {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 0.88rem;
}

.nav-dropdown a:hover {
  background: rgba(254, 65, 1, 0.08);
  color: var(--accent);
}

.nav-dropdown a::after {
  display: none;
}

/* Matches the 1100px nav-collapse breakpoint in style.css — these selectors style the
   CTA pill/account icon/audience dropdowns specifically for the mobile menu layout. */
@media (max-width: 1100px) {
  .site-nav a.nav-cta {
    border-radius: 12px;
  }

  .site-nav a.nav-account {
    border-radius: 12px;
    justify-content: center;
  }

  .nav-account .nav-label {
    display: inline;
  }

  /* Groups become full-width tap targets that expand a static (not floating) sublist
     directly beneath them, matching the rest of the vertical mobile menu. */
  .nav-group-trigger {
    width: 100%;
    justify-content: center;
    padding: 1rem;
    border-radius: 12px;
  }

  .nav-dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-top: 0.25rem;
  }

  .nav-dropdown a {
    text-align: center;
    color: var(--muted);
  }
}

.flash-error {
  background: rgba(220, 53, 69, 0.1);
  border-left-color: #dc3545;
}

.flash-success {
  background: rgba(40, 167, 69, 0.12);
  border-left-color: #28a745;
}

.flash-pending {
  background: rgba(254, 65, 1, 0.08);
  border-left-color: var(--accent);
  margin-bottom: 2rem;
}

/* ---- Generic card ---- */
.card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.pill-accent {
  background: rgba(254, 65, 1, 0.12);
  border-color: rgba(254, 65, 1, 0.3);
  color: var(--accent);
}

/* ---- Auth pages ---- */
.auth-layout {
  max-width: 480px;
  padding-bottom: 4rem;
}

.auth-form {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  background: var(--card);
}

.auth-switch {
  text-align: center;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- Dashboards ---- */
.dashboard-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  padding-bottom: 4rem;
  align-items: start;
}

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

.dashboard-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  background: var(--card);
  position: sticky;
  top: 110px;
}

/* Below 800px, .dashboard-nav stacks above .dashboard-panel instead of sitting beside
   it (single grid column) — position: sticky, meant for the desktop sidebar, then pins
   that whole stacked nav near the top of the viewport as the page scrolls, so it stays
   "expanded" over the panel's own fields (e.g. Pricing's Duration/Price) as they scroll
   up underneath it. Must come after the base .dashboard-nav rule above — same
   specificity, so source order decides the winner. Same shared component on every
   dashboard tab, so this fixes all of them at once. */
@media (max-width: 800px) {
  .dashboard-nav {
    position: static;
  }
}

.dashboard-nav a,
.dashboard-nav .btn-link {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}

.dashboard-nav a.active,
.dashboard-nav a:hover {
  background: rgba(254, 65, 1, 0.1);
  color: var(--accent);
}

.dashboard-panel {
  min-width: 0;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}

.btn-link:hover {
  color: var(--accent);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.inline-form .form-group {
  min-width: 140px;
}

/* ---- Tables ---- */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* ---- Booking cards ---- */
.booking-card .booking-date {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

/* ---- Trainer directory ---- */
.filter-form {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  max-width: 480px;
}

.trainer-card {
  display: block;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trainer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.trainer-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
  background: var(--card);
}

.trainer-experience {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

.trainer-bio {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.75rem 0;
}

.trainer-price {
  font-weight: 700;
  color: var(--accent);
}

.trainer-profile-hero {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.trainer-photo-large {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
  background: var(--card);
}

.trainer-bio-full {
  max-width: 700px;
  line-height: 1.7;
  color: var(--text);
}

.pricing-card h3 {
  margin-top: 0;
}

/* ---- Slot picker ---- */
.booking-picker {
  max-width: 480px;
  padding-bottom: 4rem;
}

.slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.slot-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.slot-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.slot-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- Measurements ---- */
.measurement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

/* ---- Homepage "Who FitStat Is For" (4 cards) ---- */
/* .info-highlight's default auto-fit(minmax(300px,1fr)) wraps 4 cards as 3+1 inside the
   1200px .container — an awkward half-empty row. A clean 2x2 reads better for exactly
   4 cards. Scoped to #audience-section only (the Strength/Muscle info-highlight further
   down the homepage keeps its default 2-card layout) and gated to min-width so it never
   fights style.css's `@media (max-width: 900px) { .info-highlight { grid-template-columns: 1fr; } }`
   mobile stacking rule — the two rules apply to non-overlapping width ranges. */
@media (min-width: 901px) {
  #audience-section .info-highlight {
    grid-template-columns: repeat(2, 1fr);
  }
}