/* ============================================================
   WaitingMate — MASTER COLOR PALETTE (single source of truth)
   ============================================================
   Loaded on every clientapp page via header.html.
   Page-specific stylesheets (home.css, auth.css, my_queue.css, ...)
   ALL derive their colors from the --wm-* variables below.
   To rebrand the whole app, edit the values in THIS ONE FILE only.
   ============================================================ */

:root {
  /* ── Brand (Logo Palette) ── */
  --wm-brand-blue: #1877E6;    /* Primary Blue                                  */
  --wm-brand-green: #73C000;   /* Primary Green                                 */
  --wm-brand-dark: #0F3D91;    /* Dark Blue — headings                          */
  --wm-brand-light: #ffffff;   /* Light background                              */
  --wm-brand-white: #FFFFFF;   /* White                                         */
  --wm-brand-text: #2D3748;    /* Dark Text                                     */

  /* ── Semantic roles (built from the logo palette) ── */
  --wm-primary: var(--wm-brand-dark);            /* headings / primary text      */
  --wm-primary-light: var(--wm-brand-blue);      /* lighter blue — hovers/accents */
  --wm-accent: var(--wm-brand-blue);             /* Primary Blue — CTAs/active   */
  --wm-accent-hover: #0f66c9;                    /* accent on hover              */
  --wm-accent-light: #4d9bf0;                    /* light blue — gradients       */
  --wm-accent-soft: rgba(24, 119, 230, 0.08);    /* soft accent background pill  */

  /* ── Neutrals ── */
  --wm-bg: var(--wm-brand-white);                /* page background              */
  --wm-bg-card: var(--wm-brand-white);           /* card background              */
  --wm-bg-soft: var(--wm-brand-light);           /* subtle fills / search bars   */
  --wm-bg-section: #eef3fa;                      /* section backgrounds          */
  --wm-text: var(--wm-brand-text);               /* primary text                 */
  --wm-text-secondary: #64748b;                  /* secondary text               */
  --wm-text-muted: #94a3b8;                      /* muted / placeholder text     */
  --wm-border: #e2e8f0;                          /* standard borders             */
  --wm-border-light: #f1f5f9;                    /* hairline borders             */

  /* ── Status ── */
  --wm-success: var(--wm-brand-green);           /* Primary Green                */
  --wm-success-dark: #4d7d00;                    /* darker green — readable text */
  --wm-success-soft: rgba(115, 192, 0, 0.1);
  --wm-warning: #f59e0b;
  --wm-warning-soft: rgba(245, 158, 11, 0.1);
  --wm-danger: #ef4444;
  --wm-danger-soft: rgba(239, 68, 68, 0.1);
  --wm-info: var(--wm-brand-blue);               /* Primary Blue                 */
  --wm-info-soft: rgba(24, 119, 230, 0.1);

  /* ── Generic aliases (used by shared/global styles) ── */
  --primary: var(--wm-primary);
  --primary-light: var(--wm-primary-light);
  --accent: var(--wm-accent);
  --accent-hover: var(--wm-accent-hover);
  --accent-light: var(--wm-accent-light);
  --accent-soft: var(--wm-accent-soft);
  --bg-body: var(--wm-bg);
  --bg-card: var(--wm-bg-card);
  --bg-soft: var(--wm-bg-soft);
  --bg-section: var(--wm-bg-section);
  --text-primary: var(--wm-text);
  --text-secondary: var(--wm-text-secondary);
  --text-muted: var(--wm-text-muted);
  --border-color: var(--wm-border);
  --border-light: var(--wm-border-light);
  --success: var(--wm-success);
  --success-dark: var(--wm-success-dark);
  --success-soft: var(--wm-success-soft);
  --warning: var(--wm-warning);
  --warning-soft: var(--wm-warning-soft);
  --danger: var(--wm-danger);
  --danger-soft: var(--wm-danger-soft);
  --info: var(--wm-info);
  --info-soft: var(--wm-info-soft);
  --white: var(--wm-brand-white);
  --dark: var(--wm-primary);
  --muted: var(--wm-text-secondary);
  --border: var(--wm-border);
  --light: var(--wm-bg-soft);
  --bg: var(--wm-bg);
  --green: var(--wm-success);
}

/* ── Open / Closed Status Badges (Primary Blue when Open, Red when Closed) ── */
.card-badge.badge-open,
.biz-badge.badge-open,
.badge-open {
  background: var(--wm-accent, #1877E6) !important;
  color: #ffffff !important;
}

.card-badge.badge-closed,
.biz-badge.badge-closed,
.badge-closed {
  background: var(--wm-danger, #ef4444) !important;
  color: #ffffff !important;
}

/* ── Card Border Hover Primary Color ── */
.card:hover,
.service-card:hover,
.biz-card:hover,
.category-card:hover,
.sd-card:hover,
.sd-widget:hover,
.wishlist-card:hover,
.how-step-card:hover {
  border-color: var(--wm-accent, #1877E6) !important;
}

/* ── Global Button Theme Adjustments (Replace harsh dark buttons with primary color) ── */
.btn-dark {
  background: var(--wm-accent, #1877E6) !important;
  border-color: var(--wm-accent, #1877E6) !important;
  color: #ffffff !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background: var(--wm-accent-hover, #0f66c9) !important;
  border-color: var(--wm-accent-hover, #0f66c9) !important;
  color: #ffffff !important;
}

/* ── Brand Logo Text Colors (Waiting = #1877E6, Mate = #73C000) ── */
.brand-waiting,
.brand-name .brand-waiting {
  color: #1877E6 !important;
}

.brand-mate,
.brand-name .brand-mate,
.brand-logo-text span,
.mobile-logo-text span {
  color: #73C000 !important;
}

/* ── Check Circle Fill Primary Brand Color ── */
.bi-check-circle-fill,
i.bi-check-circle-fill {
  color: var(--wm-accent, #1877E6) !important;
}

/* ── Global Modal Backdrop & Z-Index Layering Fix ── */
.modal-backdrop {
  z-index: 1050 !important;
  background-color: rgba(15, 23, 42, 0.5) !important;
}

.modal {
  z-index: 1065 !important;
}

/* ============================================================
   REDESIGNED LIGHT & VIBRANT BRAND COVERS
   (My Appointments, My Queue, My Favorites, Book Appointment)
   ============================================================ */
.appts-cover,
.queue-header,
.wishlist-cover,
.booking-cover {
  background: linear-gradient(135deg, #ffffff 0%, #f4f8fe 50%, #eaf2fc 100%) !important;
  padding: 32px 0 24px !important;
  margin: 0 0 24px 0 !important;
  border-radius: 0 0 20px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(24, 119, 230, 0.06) !important;
}

.appts-cover::before,
.queue-header::before,
.wishlist-cover::before,
.booking-cover::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 119, 230, 0.12), transparent 70%);
  top: -140px;
  right: -80px;
  pointer-events: none;
}

.appts-cover::after,
.queue-header::after,
.wishlist-cover::after,
.booking-cover::after {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115, 192, 0, 0.1), transparent 70%);
  bottom: -80px;
  left: -50px;
  pointer-events: none;
}

.cover-dots, .header-dots {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: radial-gradient(#0f172a 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

.cover-inner, .header-content {
  position: relative;
  z-index: 2;
}

.cover-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.cover-icon, .header-icon-wrap {
  width: 52px;
  height: 52px;
  background: var(--wm-accent, #1877E6) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 18px rgba(24, 119, 230, 0.28) !important;
}

.cover-text h1, .header-text h1, .wishlist-cover h1 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
  letter-spacing: -0.4px !important;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif !important;
}

.cover-text p, .header-text p, .wishlist-cover p {
  font-size: 0.86rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.cover-stats {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.cover-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 100px !important;
  padding: 6px 16px 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.cover-stat i {
  font-size: 0.85rem !important;
  color: var(--wm-accent, #1877E6) !important;
}

.cover-stat .num {
  font-weight: 800 !important;
  color: #0f172a !important;
}

.refresh-btn {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.22s ease !important;
}

.refresh-btn:hover {
  background: var(--wm-accent, #1877E6) !important;
  border-color: var(--wm-accent, #1877E6) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(24, 119, 230, 0.25) !important;
}