/* ==== Colors ==== */
:root {
  --gold: #d4af37;
  --gold-dark: #b8972e;
  --black: #0f0f0f;
  --dark-2: #1a1a1a;
  --gray: #bbbbbb;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {font-family:'Georgia',serif;line-height:1.7;color:#e0e0e0;background:var(--black);}
.container {max-width:1200px;margin:0 auto;padding:0 1rem;}
h1,h2,h3,h4 {font-family:'Playfair Display',serif;}
a {text-decoration:none;color:inherit;}

/* ==== Navbar, Hero, Footer ==== */
.navbar {background:rgba(15,15,15,.98);padding:1.2rem 0;position:sticky;top:0;z-index:1000;backdrop-filter:blur(12px);border-bottom:1px solid #333;box-shadow:0 4px 15px rgba(0,0,0,.3);}
.navbar .container {display:flex;justify-content:space-between;align-items:center;position:relative;}
.logo {font-size:2rem;font-weight:900;color:var(--gold);display:flex;align-items:center;gap:.6rem;}
.logo i {color:var(--gold);font-size:1.8rem;}
.nav-toggle {display:none;background:none;border:none;cursor:pointer;padding:.5rem;}
.hamburger,.hamburger::before,.hamburger::after {width:25px;height:3px;background:var(--gold);display:block;transition:.3s;}
.hamburger::before,.hamburger::after {content:"";}.hamburger::before {transform:translateY(-8px);}.hamburger::after {transform:translateY(5px);}
.nav-toggle.active .hamburger {background:transparent;}.nav-toggle.active .hamburger::before {transform:translateY(0) rotate(45deg);}
.nav-toggle.active .hamburger::after {transform:rotate(-45deg);transform:translateY(-3px);}
.nav-links {display:flex;gap:2.2rem;list-style:none;align-items:center;}
.nav-links a {font-weight:600;text-transform:uppercase;font-size:.95rem;letter-spacing:1.2px;color:#ccc;position:relative;transition:color .3s;}
.nav-links a::after {content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--gold);transition:width .3s;}
.nav-links a:hover::after,.nav-links a.active::after {width:100%;}.nav-links a:hover,.nav-links a.active {color:var(--gold);}
.page-hero {position:relative;height:60vh;background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url('../assets/book-hero.jpg') center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;}
.page-hero h1 {font-size:4.5rem;margin-bottom:1rem;animation:fadeInUp 1s ease;}
.page-hero p {font-size:1.5rem;animation:fadeInUp 1s ease .3s both;}
.footer {background:var(--dark-2);color:#ccc;padding:4rem 0 2rem;border-top:1px solid #333;}
.footer-grid {display:grid;gap:2.5rem;margin-bottom:2rem;}
.footer-col h3,.footer-col h4 {color:var(--gold);margin-bottom:1.2rem;font-size:1.4rem;}
.footer-col p,.footer-col ul li {margin-bottom:.8rem;font-size:.95rem;}
.footer-col ul {list-style:none;}
.footer-col ul a {transition:color .3s;}
.footer-col ul a:hover {color:var(--gold);}
.social {display:flex;gap:1.2rem;font-size:1.5rem;}
.social a {color:#ccc;transition:all .3s;}
.social a:hover {color:var(--gold);transform:translateY(-4px);}
.footer-bottom {text-align:center;padding-top:2rem;border-top:1px solid #333;font-size:.9rem;color:#888;}

/* ==== Form ==== */
.booking-section {padding:5rem 0;}
.booking-form {max-width:800px;margin:0 auto;background:var(--dark-2);padding:2.5rem;border-radius:16px;border:1px solid #333;}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.form-group {display:flex;flex-direction:column;}
.form-group.full-width {grid-column:1/-1;}
label {margin-bottom:.5rem;color:var(--gold);font-weight:600;font-size:.95rem;}
input,select,textarea {padding:.9rem 1rem;border:1px solid #444;border-radius:8px;background:#111;color:#fff;font-size:1rem;transition:.3s;}
input:focus,select:focus,textarea:focus {outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.2);}
.btn-submit {display:block;margin:2rem auto 0;background:var(--gold);color:#000;padding:1rem 3rem;border:none;border-radius:50px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .3s;box-shadow:0 6px 15px rgba(212,175,55,.3);}
.btn-submit:hover {background:var(--gold-dark);transform:translateY(-3px);box-shadow:0 10px 25px rgba(212,175,55,.4);}
.msg {text-align:center;margin-top:1rem;font-weight:600;}
/* Barber selection hint */
#barber {
  padding: .9rem 1rem;
  font-size: 1rem;
}
#barber option {
  color: #000;
}
/* ==== SERVICE CARDS ==== */
.service-cards {display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:1rem;margin-top:.5rem;}
.service-card {background:#222;padding:1rem;border-radius:12px;border:1px solid #444;text-align:center;transition:.3s;}
.service-card h4 {color:var(--gold);margin-bottom:.3rem;font-size:1.1rem;}
.service-card p {font-size:.9rem;color:#aaa;margin-bottom:.8rem;}
.add-btn {background:var(--gold);color:#000;padding:.5rem 1rem;border:none;border-radius:50px;font-weight:600;cursor:pointer;transition:.3s;}
.add-btn:hover {background:var(--gold-dark);transform:scale(1.05);}

/* ==== CART ==== */
.cart-items {background:#111;border:1px solid #444;border-radius:12px;padding:1rem;min-height:80px;}
.cart-item {display:flex;justify-content:space-between;align-items:center;background:#222;padding:.6rem 1rem;border-radius:8px;margin-bottom:.5rem;}
.cart-item span {font-size:.95rem;}
.cart-item button {background:#e74c3c;color:#fff;padding:.3rem .6rem;border:none;border-radius:50%;cursor:pointer;font-size:.8rem;}
.empty-cart {color:#888;font-style:italic;text-align:center;margin:1rem 0;}

/* ==== Location & Address ==== */
.location-toggle {display:flex;gap:1.5rem;margin-top:.5rem;}
.toggle-option {display:flex;align-items:center;gap:.6rem;font-size:1rem;cursor:pointer;}
.toggle-option input[type="radio"] {width:18px;height:18px;margin:0;accent-color:var(--gold);}
.toggle-option span {color:#ccc;transition:color .3s;}
.toggle-option small {color:var(--gold);font-weight:600;}
.toggle-option input:checked + span {color:var(--gold);font-weight:600;}
#homeAddressGroup {display:none;transition: all 0.3s ease;}
#homeAddressGroup.show {display:flex;}
.field-help {font-size:.85rem;color:#aaa;margin-top:.5rem;}

/* ==== Total & Time ==== */
.total-price {text-align:right;margin:1.5rem 0 .5rem;font-size:1.3rem;color:var(--gold);}
.total-price span {font-weight:700;font-size:1.5rem;}
.time-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.5rem;}
.time-slot {padding:.7rem;text-align:center;background:#222;border:1px solid #444;border-radius:8px;cursor:pointer;font-size:.9rem;transition:.3s;}
.time-slot.available {background:#0f2a0f;border-color:#0f5f0f;color:#4ade80;}
.time-slot.booked {background:#2a0f0f;border-color:#5f0f0f;color:#888;cursor:not-allowed;}
.time-slot.selected {background:var(--gold);color:#000;font-weight:700;}
.time-help {font-size:.85rem;color:#aaa;margin-top:.5rem;}

/* ==== Animations ==== */
@keyframes fadeInUp {from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ==== RESPONSIVE ==== */
@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:rgba(15,15,15,.98);flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .4s ease;}
  .nav-links.open{max-height:500px;padding:1rem 0;}
}
@media (max-width:768px){
  .page-hero h1{font-size:2.8rem;}
  .form-grid{grid-template-columns:1fr;}
  .time-grid{grid-template-columns:repeat(3,1fr);}
  .location-toggle{flex-direction:column;gap:1rem;}
  .total-price{text-align:center;}
}
@media (min-width:901px){.footer-grid{grid-template-columns:repeat(3,1fr);gap:3rem;}}

/* ==== MY ORDERS SECTION ==== */
.orders-section {
  padding: 4rem 0;
  background: var(--dark-2);
  border-top: 1px solid #333;
}
.orders-section h2 {
  color: var(--gold);
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.orders-section p {
  text-align: center;
  color: #aaa;
  margin-bottom: 2rem;
  font-size: 1rem;
}
.orders-list {
  max-width: 900px;
  margin: 0 auto;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #444;
}
.order-card {
  padding: 1.2rem;
  border-bottom: 1px solid #333;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
  font-size: .95rem;
}
.order-card:last-child { border-bottom: none; }
.order-card .label {
  font-weight: 600;
  color: var(--gold);
}
.order-card .value {
  color: #e0e0e0;
}
.status-unconfirmed { color: #fbbf24; font-weight: 600; }
.status-confirmed { color: #4ade80; font-weight: 600; }
.status-completed { color: #94a3b8; }
.status-cancelled { color: #ef4444; }
.empty-orders {
  text-align: center;
  padding: 2rem;
  color: #888;
  font-style: italic;
}

/* Mobile */
@media (max-width: 600px) {
  .order-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .order-card .label { display: block; margin-bottom: .3rem; }
}

/* ==== MY ORDERS PHONE INPUT ==== */
#ordersPhone {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid #444;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 1rem;
  transition: .3s;
}
#ordersPhone:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,175,55,.2);
}
#ordersPhone::placeholder {
  color: #888;
}