/* ================================================================
   Beautician Index – Main Stylesheet
   Built on Bootstrap 5. Import order: tokens → layout → components
   ================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  --bi-primary:     #F59E0B; /* Amber  */
  --bi-primary-dk:  #D97706;
  --bi-red:         #EF4444;
  --bi-green:       #22C55E;
  --bi-blue:        #3B82F6;
  --bi-purple:      #8B5CF6;
  --bi-dark:        #0F172A;
  --bi-surface:     #F8FAFC;
  --bi-border:      #E2E8F0;
  --bi-text:        #1E293B;
  --bi-muted:       #64748B;
  --bi-radius:      12px;
  --bi-shadow:      0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --bi-shadow-lg:   0 4px 6px rgba(0,0,0,.05), 0 20px 40px rgba(0,0,0,.10);
  --navbar-h:       64px;
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--bi-text);
  background: var(--bi-surface);
  font-size: .9375rem;
  line-height: 1.6;
}

/* ── Typography helpers ───────────────────────────────────────── */
.fw-500{ font-weight:500!important; }
.fw-600{ font-weight:600!important; }
.fw-700{ font-weight:700!important; }
.fw-800{ font-weight:800!important; }
.fw-900{ font-weight:900!important; }
.text-white-75{ color:rgba(255,255,255,.75); }

/* ── Layout helpers ───────────────────────────────────────────── */
.bi-section { padding-top:2rem; padding-bottom:2rem; }
.bi-section-title { font-size:1.5rem; font-weight:800; }
.col-lg-2-4 { flex:0 0 auto; width:20%; }

/* ── Navbar ───────────────────────────────────────────────────── */
.bi-navbar {
  height: var(--navbar-h);
  background: var(--bi-dark);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  z-index: 1030;
}
.bi-navbar .navbar-brand {
  font-weight:800;
  font-size:1.2rem;
  color:#fff!important;
  letter-spacing:-.5px;
}
.bi-navbar .navbar-brand span { color:var(--bi-primary); }
.bi-nav-link {
  color:rgba(255,255,255,.75)!important;
  font-weight:600;
  font-size:.875rem;
  padding:.4rem .8rem!important;
  border-radius:8px;
  transition:color .15s, background .15s;
}
.bi-nav-link:hover{ color:#fff!important; background:rgba(255,255,255,.08)!important; }

.bi-input-icon{ background:#1E293B; border-color:#334155; color:#94A3B8; }
.bi-navbar-search .form-control {
  background:#1E293B; border-color:#334155; color:#fff;
  border-radius:10px; font-size:.875rem;
}
.bi-navbar-search .form-control::placeholder{ color:#64748B; }
.bi-navbar-search .btn-search {
  background:var(--bi-primary); border:none; border-radius:0 10px 10px 0;
  color:#000; font-weight:700;
}
.bi-navbar-search .btn-search:hover{ background:var(--bi-primary-dk); }

/* Mobile search bar */
.bi-mobile-search { background:#1a2638; border-top:1px solid #2d3a4f; padding:.5rem 1rem; }
.bi-mobile-search .form-control { background:#253248; border:none; color:#fff; }
.bi-mobile-search .form-control::placeholder{ color:#64748B; }

/* ── Hero Carousel ────────────────────────────────────────────── */
.bi-carousel-section { background:#000; }
.bi-carousel-img {
  width:100%; height:420px;
  object-fit:cover;
  opacity:.85;
}
@media(max-width:768px){ .bi-carousel-img{ height:220px; } }

/* ── Mega Search Hero ─────────────────────────────────────────── */
.bi-search-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
  padding:3.5rem 0;
}
.bi-search-hero-title {
  color:#fff;
  font-size:2.2rem;
  font-weight:900;
  margin-bottom:.5rem;
}
.bi-search-hero-sub { color:rgba(255,255,255,.65); font-size:1rem; margin-bottom:2rem; }
.bi-mega-search-form .bi-mega-input {
  height:52px;
  border-radius:12px 0 0 12px;
  border:none;
  font-size:.95rem;
  font-weight:500;
}
.bi-mega-search-form .bi-mega-input:focus{ box-shadow:none; border-color:var(--bi-primary); }
.bi-mega-search-form .row{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--bi-shadow-lg); }
.bi-mega-search-form .form-control,.bi-mega-search-form .form-select {
  border:none!important;
  border-right:1px solid var(--bi-border)!important;
  border-radius:0!important;
}
.bi-search-btn {
  height:52px;
  border-radius:0 12px 12px 0;
  font-weight:700;
  font-size:1rem;
  background:var(--bi-primary);
  border:none;
  color:#000;
}
.bi-search-btn:hover{ background:var(--bi-primary-dk); }
@media(max-width:768px){
  .bi-search-hero-title{ font-size:1.5rem; }
  .bi-mega-search-form .form-control,
  .bi-mega-search-form .form-select{ border-right:none!important; border-bottom:1px solid var(--bi-border)!important; border-radius:0!important; }
  .bi-mega-search-form .row{ border-radius:10px; }
  .bi-search-btn,.bi-mega-input{ border-radius:0!important; height:48px; }
}

/* ── Category Cards ───────────────────────────────────────────── */
.bi-cat-card { display:block; }
.bi-cat-card-inner {
  background: #fff;
  border:2px solid var(--bi-border);
  border-radius:var(--bi-radius);
  padding:1.5rem 1rem;
  text-align:center;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  cursor:pointer;
}
.bi-cat-card-inner:hover {
  transform:translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-color: var(--cat-color, var(--bi-primary));
}
.bi-cat-icon {
  width:60px; height:60px;
  border-radius:50%;
  background:color-mix(in srgb, var(--cat-color, var(--bi-primary)) 12%, white);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem;
  font-size:1.75rem;
  color: var(--cat-color, var(--bi-primary));
  transition:background .2s, transform .2s;
}
.bi-cat-card-inner:hover .bi-cat-icon {
  background:var(--cat-color, var(--bi-primary));
  color:#fff;
  transform:scale(1.1);
}
.bi-cat-name { font-weight:700; font-size:.95rem; color:var(--bi-text); margin-bottom:.25rem; }
.bi-cat-desc { color:var(--bi-muted); font-size:.78rem; margin:0; }

/* ── Listing Cards ────────────────────────────────────────────── */
.bi-listing-card {
  border-radius:var(--bi-radius)!important;
  transition:transform .2s, box-shadow .2s;
  overflow:hidden;
}
.bi-listing-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.14)!important;
}
.bi-card-img-wrap {
  display:block;
  position:relative;
  overflow:hidden;
  height:200px;
}
.bi-card-img-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s;
}
.bi-listing-card:hover .bi-card-img-wrap img{ transform:scale(1.05); }
.bi-featured-badge,.bi-cat-badge {
  position:absolute;
  font-size:.7rem;
  font-weight:700;
  padding:.3rem .65rem;
  border-radius:20px;
}
.bi-featured-badge {
  top:8px; left:8px;
  background:var(--bi-primary);
  color:#000;
}
.bi-cat-badge {
  bottom:8px; right:8px;
  background:rgba(0,0,0,.6);
  color:#fff;
  backdrop-filter:blur(4px);
}
.bi-stars { display:flex; gap:2px; font-size:.8rem; }

/* ── List view card ───────────────────────────────────────────── */
.bi-list-card { border-radius:var(--bi-radius); }
.bi-list-thumb { width:120px; height:90px; object-fit:cover; }

/* ── CTA Banner ───────────────────────────────────────────────── */
.bi-cta-section { background:#F1F5F9; }
.bi-cta-card {
  background: linear-gradient(135deg, #1E3A5F 0%, var(--bi-dark) 100%);
  border-radius:16px;
  padding:2.5rem;
  box-shadow:var(--bi-shadow-lg);
}

/* ── Featured Section ─────────────────────────────────────────── */
.bi-featured-section { background:#FFFBEB; }

/* ── Auth pages ───────────────────────────────────────────────── */
.bi-auth-section {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  min-height:calc(100vh - var(--navbar-h) - 60px);
}
.bi-auth-card { border-radius:20px!important; }
.bi-logo-icon {
  width:64px; height:64px;
  background:var(--bi-primary);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem;
  color:#fff;
}
.bi-form-input { height:48px; border-radius:10px!important; }
.bi-form-input:focus { border-color:var(--bi-primary); box-shadow:0 0 0 3px rgba(245,158,11,.15); }
textarea.bi-form-input { height:auto; }
.bi-btn-lg { height:52px; border-radius:12px; font-size:1rem; }

/* ── Wizard Step Indicators ───────────────────────────────────── */
.bi-steps-indicator {
  display:flex; align-items:center; justify-content:center;
  gap:0; flex-wrap:nowrap; overflow-x:auto; padding:.5rem 0;
}
.bi-step { display:flex; flex-direction:column; align-items:center; min-width:72px; }
.bi-step-circle {
  width:40px; height:40px; border-radius:50%;
  background:#E2E8F0; color:var(--bi-muted);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem;
  border:2px solid #CBD5E1;
  transition:all .25s;
}
.bi-step.active .bi-step-circle { background:var(--bi-primary); color:#000; border-color:var(--bi-primary); box-shadow:0 0 0 4px rgba(245,158,11,.25); }
.bi-step.done .bi-step-circle   { background:var(--bi-green); color:#fff; border-color:var(--bi-green); }
.bi-step-label { font-size:.72rem; font-weight:600; color:var(--bi-muted); margin-top:.35rem; text-align:center; }
.bi-step.active .bi-step-label  { color:var(--bi-primary-dk); }
.bi-step.done .bi-step-label    { color:var(--bi-green); }
.bi-step-line { flex:1; height:2px; background:#E2E8F0; min-width:24px; }
.bi-step-line.done { background:var(--bi-green); }

/* ── Review summary (step 4) ──────────────────────────────────── */
.bi-review-summary {
  background:#F8FAFC;
  border:1px solid var(--bi-border);
  border-radius:var(--bi-radius);
  padding:1.25rem 1.5rem;
}
.bi-price-box {
  background:linear-gradient(135deg,#ECFDF5,#D1FAE5);
  border:1.5px solid #6EE7B7;
  border-radius:var(--bi-radius);
  padding:1.25rem 1.5rem;
}
.bi-price-tag { font-size:2rem; font-weight:800; color:#059669; }

/* ── Listing Detail ───────────────────────────────────────────── */
.bi-detail-hero {
  height:320px; border-radius:16px;
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.bi-detail-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%, transparent 60%);
}
.bi-detail-hero-overlay {
  position:absolute; bottom:1rem; left:1rem;
  display:flex; gap:.5rem;
}
.bi-detail-section {
  background:#fff; border:1px solid var(--bi-border);
  border-radius:var(--bi-radius); padding:1.5rem;
}
.bi-sidebar-card { border-radius:var(--bi-radius)!important; }
.bi-review-card {
  background:#F8FAFC; border:1px solid var(--bi-border);
  border-radius:var(--bi-radius); padding:1rem 1.25rem;
}
.bi-write-review {
  background:#fff; border:1px solid var(--bi-border);
  border-radius:var(--bi-radius); padding:1.5rem;
}

/* Star rating widget */
.bi-star-rating { display:flex; flex-direction:row-reverse; gap:4px; width:fit-content; }
.bi-star-label  { cursor:pointer; font-size:1.5rem; color:#D1D5DB; transition:color .15s; }
.bi-star-rating:not(:hover) input:checked ~ label   { color:var(--bi-primary); }
.bi-star-rating input:checked ~ label               { color:var(--bi-primary); }
.bi-star-rating label:hover,
.bi-star-rating label:hover ~ label                 { color:var(--bi-primary); }

/* ── Dashboard ────────────────────────────────────────────────── */
.bi-stat-card {
  background:#fff;
  border:1px solid var(--bi-border);
  border-radius:var(--bi-radius);
  padding:1.25rem;
  text-align:center;
  box-shadow:var(--bi-shadow);
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.bi-stat-card i     { font-size:1.75rem; color:var(--bi-primary); }
.bi-stat-card span  { font-size:1.75rem; font-weight:800; line-height:1; }
.bi-stat-card small { font-size:.78rem; font-weight:600; color:var(--bi-muted); text-transform:uppercase; }

.bi-stat-card--green i  { color:var(--bi-green); }
.bi-stat-card--orange i { color:#F97316; }
.bi-stat-card--blue i   { color:var(--bi-blue); }
.bi-stat-card--purple i { color:var(--bi-purple); }

.bi-table-thumb { width:48px; height:36px; object-fit:cover; }
.bi-empty-state { min-height:40vh; }

/* ── Admin ─────────────────────────────────────────────────────── */
.bi-admin-nav {
  display:flex; gap:.5rem; flex-wrap:wrap;
  border-bottom:2px solid var(--bi-border);
  padding-bottom:.75rem;
}
.bi-admin-nav-item {
  text-decoration:none;
  color:var(--bi-muted);
  font-weight:600;
  font-size:.875rem;
  padding:.4rem .9rem;
  border-radius:8px;
  transition:all .15s;
}
.bi-admin-nav-item:hover  { background:#F1F5F9; color:var(--bi-text); }
.bi-admin-nav-item.active { background:var(--bi-primary); color:#000; }

.bi-admin-quick-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--bi-border);
  border-radius:var(--bi-radius); padding:2rem 1rem;
  color:var(--bi-text);
  transition:transform .2s, box-shadow .2s;
  text-align:center;
}
.bi-admin-quick-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--bi-shadow-lg);
  color:var(--bi-text);
}

/* ── Search refinement bar ────────────────────────────────────── */
.bi-search-refine-bar {
  background:#fff; border:1px solid var(--bi-border);
  border-radius:var(--bi-radius); padding:1rem;
  box-shadow:var(--bi-shadow);
}

/* ── Footer ───────────────────────────────────────────────────── */
.bi-footer { background:var(--bi-dark); color:rgba(255,255,255,.7); }
.bi-footer-heading { color:#fff; font-weight:700; font-size:.95rem; margin-bottom:.75rem; text-transform:uppercase; letter-spacing:.5px; }
.bi-footer a { color:rgba(255,255,255,.6); text-decoration:none; transition:color .15s; font-size:.875rem; }
.bi-footer a:hover  { color:var(--bi-primary); }
.bi-footer-bottom { border-top:1px solid #1E293B; }
.bi-social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.7);
  transition:background .15s, color .15s;
}
.bi-social a:hover { background:var(--bi-primary); color:#000; }

/* ── Flash messages ───────────────────────────────────────────── */
.bi-flash {
  position:fixed; top:76px; right:1rem; z-index:9999;
  min-width:280px; max-width:400px;
  animation:slideIn .25s ease;
}
@keyframes slideIn {
  from{ transform:translateX(100%); opacity:0; }
  to  { transform:translateX(0);    opacity:1; }
}

/* ── Pagination ───────────────────────────────────────────────── */
.page-link { color:var(--bi-text); font-weight:600; }
.page-item.active .page-link { background:var(--bi-primary); border-color:var(--bi-primary); color:#000; }

/* ── Utility ──────────────────────────────────────────────────── */
a { color:inherit; }
.rounded { border-radius:var(--bi-radius)!important; }
.card    { border-radius:var(--bi-radius)!important; }