/* ============================================================
   css/style.css  –  Beauty Salon Booking
   ============================================================ */

:root {
  --salon-primary:  #b5636a;
  --salon-dark:     #8a3d42;
  --salon-light:    #f9eef0;
  --salon-accent:   #e8c4c8;
}

/* ── Navbar ── */
.bg-salon { background-color: var(--salon-dark); }

.btn-salon {
  background-color: var(--salon-primary);
  color: #fff;
  border: none;
}
.btn-salon:hover { background-color: var(--salon-dark); color: #fff; }

.btn-salon-outline {
  border: 2px solid var(--salon-accent);
  color: #fff;
  background: transparent;
}
.btn-salon-outline:hover { background: var(--salon-accent); color: var(--salon-dark); }

/* ── Hero ── */
.hero {
  background: linear-gradient(135deg, var(--salon-dark) 0%, var(--salon-primary) 100%);
  color: #fff;
  padding: 5rem 0;
  text-align: center;
  border-radius: 0 0 2rem 2rem;
}
.hero h1 { font-size: 3rem; font-weight: 700; }
.hero p  { font-size: 1.2rem; opacity: .9; }

/* ── Cards ── */
.service-card, .team-card {
  border: 1px solid var(--salon-accent);
  border-radius: .75rem;
  transition: box-shadow .25s;
}
.service-card:hover, .team-card:hover {
  box-shadow: 0 6px 20px rgba(181,99,106,.25);
}
.service-card .card-header {
  background: var(--salon-light);
  border-bottom: 2px solid var(--salon-accent);
  font-weight: 600;
  color: var(--salon-dark);
}

/* ── Booking form steps ── */
.step-indicator { display: flex; gap: 1rem; margin-bottom: 2rem; }
.step-indicator .step {
  flex: 1;
  text-align: center;
  padding: .5rem;
  border-radius: .5rem;
  background: #eee;
  font-weight: 600;
  color: #888;
}
.step-indicator .step.active {
  background: var(--salon-primary);
  color: #fff;
}
.step-indicator .step.done {
  background: var(--salon-accent);
  color: var(--salon-dark);
}

/* ── Time slot grid ── */
.time-slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.time-slot {
  padding: .4rem .8rem;
  border: 2px solid var(--salon-primary);
  border-radius: .4rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.time-slot:hover, .time-slot.selected {
  background: var(--salon-primary);
  color: #fff;
}
.time-slot.booked {
  border-color: #ccc;
  color: #aaa;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Admin sidebar ── */
.admin-sidebar {
  min-height: 100vh;
  background: var(--salon-dark);
  color: #fff;
  padding: 1.5rem 0;
}
.admin-sidebar a {
  display: block;
  padding: .6rem 1.5rem;
  color: rgba(255,255,255,.8);
  text-decoration: none;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  background: var(--salon-primary);
  color: #fff;
}

/* ── Status badges ── */
.badge-pending   { background-color: #ffc107; color: #212529; }
.badge-confirmed { background-color: #198754; }
.badge-cancelled { background-color: #dc3545; }
.badge-completed { background-color: #0dcaf0; color: #212529; }

/* ── Misc ── */
.section-title {
  color: var(--salon-dark);
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--salon-primary);
  margin-top: .3rem;
}