:root{
  --gold:#C89B3C;
  --black:#1A1A1A;
  --white:#fff;
  --cream:#FAF7F2;
}
*{box-sizing:border-box;}
body{font-family:'Poppins',Arial,sans-serif;background:#fff;color:var(--black);}
a{text-decoration:none;}
.text-gold{color:var(--gold)!important;}
.text-secondary-light{color:#9a9a9a;}
.btn-gold{background:var(--gold);border:none;color:#fff;font-weight:600;}
.btn-gold:hover{background:#b7893a;color:#fff;}
.btn-outline-gold{border:1.5px solid var(--gold);color:var(--gold);font-weight:600;background:transparent;}
.btn-outline-gold:hover{background:var(--gold);color:#fff;}

/* ---------- Navbar ---------- */
.sb-navbar{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:.9rem 0;}
.sb-brand{font-size:1.15rem;font-weight:700;color:var(--black);letter-spacing:.5px;}
.sb-brand b{color:var(--gold);}
.sb-logo-img{height:36px!important;max-height:36px!important;width:auto!important;max-width:220px!important;display:block;}
.sb-logo-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold),#b7893a);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;
}
.sb-navbar .nav-link{color:#444;font-weight:500;font-size:.95rem;padding:.4rem .2rem;}
.sb-navbar .nav-link.active{color:var(--gold);border-bottom:2px solid var(--gold);}
.sb-navbar .nav-link:hover{color:var(--gold);}
.sb-location-pill{font-size:.9rem;color:#333!important;font-weight:500;}

html{overflow-x:hidden;}
body{max-width:100%;}
img{max-width:100%;}

/* ---------- Hero ---------- */
.sb-hero{background:var(--cream);padding:3.5rem 0 3rem;overflow:hidden;position:relative;}
.sb-hero-eyebrow{color:var(--gold);font-weight:700;font-size:.8rem;letter-spacing:1.5px;}
.sb-hero-title{font-size:2.6rem;font-weight:800;line-height:1.2;color:var(--black);}
.sb-hero-title .accent{color:var(--gold);}
.sb-hero-sub{color:#666;font-size:1rem;max-width:480px;}

.sb-hero-photo{
  background-image:url('../images/hero-banner.png');
  background-size:cover;
  background-position:right center;
  min-height:600px;
  display:flex;align-items:center;
}
.sb-hero-photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right, var(--cream) 0%, rgba(250,247,242,.94) 40%, rgba(250,247,242,.55) 60%, rgba(250,247,242,0) 78%);
}
.sb-hero-photo .container{position:relative;z-index:1;}

.sb-search-card{
  background:#fff;border-radius:60px;box-shadow:0 15px 40px rgba(0,0,0,.08);
  padding:.5rem .5rem .5rem 1.2rem;display:flex;align-items:center;gap:.4rem;
  flex-wrap:nowrap;max-width:100%;
}
.sb-search-card .seg{display:flex;align-items:center;gap:.5rem;padding:.3rem .4rem;min-width:0;}
.sb-search-card .seg.grow{flex:1 1 auto;min-width:0;}
.sb-search-card input, .sb-search-card select{
  border:none;outline:none;background:transparent;font-size:.85rem;min-width:0;width:100%;
  -webkit-appearance:none;appearance:none;
}
.sb-search-card select{flex-shrink:0;width:auto;max-width:110px;}
.sb-search-card .divider{width:1px;background:#eee;align-self:stretch;margin:.3rem 0;flex-shrink:0;}
.sb-geo-btn{
  border:1.5px solid var(--gold);color:var(--gold);width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0;
}
.sb-search-card .btn-gold{border-radius:50px;padding:.55rem 1.2rem;white-space:nowrap;flex-shrink:0;}

@media (max-width:1199px){
  .sb-search-card{flex-wrap:wrap;border-radius:24px;padding:1rem;}
  .sb-search-card .divider{display:none;}
  .sb-search-card select{max-width:none;}
}

.sb-stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 1rem;margin-top:2rem;}
@media (min-width:1200px){.sb-stat-row{grid-template-columns:repeat(4,1fr);}}
.sb-stat-item{display:flex;align-items:center;gap:.6rem;min-width:0;}
.sb-stat-item i{font-size:1.3rem;color:var(--gold);flex-shrink:0;}
.sb-stat-item h6{margin:0;font-weight:700;font-size:.85rem;white-space:nowrap;}
.sb-stat-item p{margin:0;font-size:.72rem;color:#777;white-space:nowrap;}

/* ---------- Popular Salons ---------- */
.sb-section-title{font-size:1.6rem;font-weight:700;}
.sb-view-all{color:var(--gold);font-weight:600;font-size:.9rem;}
.sb-card{background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;transition:.2s;height:100%;}
.sb-card:hover{box-shadow:0 15px 30px rgba(0,0,0,.08);transform:translateY(-3px);}
.sb-card img{height:170px;object-fit:cover;width:100%;background:#ddd;}
.sb-card .body{padding:1rem;}
.sb-card h6{font-weight:700;margin-bottom:.3rem;}
.sb-rating{color:#333;font-size:.85rem;font-weight:600;}
.sb-rating i{color:var(--gold);}
.sb-tags{font-size:.8rem;color:#777;margin:.3rem 0;}
.sb-addr{font-size:.8rem;color:#888;}
.sb-book-link{color:var(--gold);font-weight:700;font-size:.9rem;}

/* ---------- Promo Banner ---------- */
.sb-promo{background:var(--cream);border-radius:16px;padding:2rem;margin:3rem 0;}
.sb-promo-badge{
  width:56px;height:56px;border:2px dashed var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;font-size:.8rem;
}
.sb-promo h3{font-weight:800;color:var(--gold);margin:.2rem 0;}
.sb-feature-icon{
  width:52px;height:52px;border-radius:50%;border:1.5px solid #e5cfa0;
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:1.3rem;margin:0 auto .5rem;
}
.sb-feature-item{text-align:center;}
.sb-feature-item p{font-size:.82rem;color:#777;margin:0;}
.sb-feature-item h6{font-size:.9rem;font-weight:700;margin-bottom:.2rem;}

/* ---------- How It Works ---------- */
.sb-steps-wrap{padding:0 2rem;}
.sb-steps-row{display:flex;align-items:flex-start;justify-content:center;gap:.5rem;flex-wrap:wrap;}
.sb-step{flex:1 1 180px;max-width:220px;text-align:center;}
.sb-step-icon{display:block;font-size:1.3rem;color:var(--gold);margin-bottom:.6rem;}
.sb-step-circle{
  width:56px;height:56px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto .8rem;
}
.sb-step h6{font-weight:700;font-size:.95rem;}
.sb-step p{font-size:.8rem;color:#888;}
.sb-step-arrow{color:var(--gold);font-size:1.4rem;align-self:center;margin-top:2.6rem;flex:0 0 auto;}

@media (max-width:767px){
  .sb-steps-wrap{padding:0;}
  .sb-steps-row{flex-direction:column;align-items:center;}
  .sb-step-arrow{display:none;}
  .sb-step{max-width:320px;margin-bottom:1.5rem;}
}

/* ---------- Footer ---------- */
.sb-footer{background:var(--black);color:#ccc;}
.sb-footer-links li{margin-bottom:.55rem;}
.sb-footer-links a{color:#bbb;font-size:.88rem;}
.sb-footer-links a:hover{color:var(--gold);}
.sb-social-icon{
  width:34px;height:34px;border-radius:50%;background:#2a2a2a;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.sb-social-icon:hover{background:var(--gold);color:#1A1A1A;}
.sb-app-badge{
  display:flex;align-items:center;gap:.6rem;border:1px solid #444;border-radius:8px;
  padding:.5rem .8rem;color:#fff;font-size:.7rem;line-height:1.2;
}
.sb-app-badge b{font-size:.85rem;}
.sb-app-badge:hover{border-color:var(--gold);color:var(--gold);}

/* ---------- Misc shared (owner/admin panels reuse these) ---------- */
.badge-pending{background:#eee;color:#555;}
.badge-approved{background:#d4edda;color:#155724;}
.badge-rejected{background:#f8d7da;color:#721c24;}
.sidebar{background:var(--black);min-height:100vh;color:#fff;}
/* Fix: without this, Bootstrap's row (flex, align-items:stretch by default)
   stretches the content column to match the sidebar's 100vh height, making
   any .sb-card inside it (height:100%) balloon to nearly full viewport height
   and visually overlap the footer below. */
.row:has(> .sidebar){align-items:flex-start;}
.sidebar a{color:#ddd;display:block;padding:.6rem 1rem;text-decoration:none;border-radius:6px;}
.sidebar a:hover,.sidebar a.active{background:var(--gold);color:var(--black);font-weight:600;}

/* Below 767px the sidebar stacks above the page content instead of sitting
   beside it — min-height:100vh (meant for the side-by-side desktop layout)
   would otherwise force a full-screen-tall empty black block here. Placed
   after the base .sidebar rule so it correctly wins the cascade. */
@media (max-width:767px){
  .sidebar{min-height:auto;}
}

@media (max-width:991px){
  .sb-hero-title{font-size:2rem;}
  .sb-search-card{border-radius:20px;}
  .sb-hero-photo{min-height:auto;padding:2.5rem 0;}
  .sb-hero-photo::before{background:rgba(250,247,242,.9);}
}

/* ---------- Salon Detail Page ---------- */
.sb-salon-hero{
  background-size:cover;background-position:center;
  min-height:280px;display:flex;align-items:flex-end;
}
.sb-salon-hero-overlay{
  width:100%;background:linear-gradient(to top, rgba(26,26,26,.88), rgba(26,26,26,.15));
  padding:2rem 0;
}
.sb-service-option{
  display:flex;align-items:center;gap:.75rem;
  border:1px solid #eee;border-radius:12px;padding:.9rem 1.1rem;margin-bottom:.75rem;
  cursor:pointer;transition:.15s;
}
.sb-service-option:hover{border-color:var(--gold);}
.sb-service-option.selected{border-color:var(--gold);background:rgba(200,155,60,.06);}
.sb-service-option input[type="radio"]{width:18px;height:18px;accent-color:var(--gold);flex-shrink:0;}

.sb-card.sb-booking-box{position:sticky;top:90px;}
.sb-selected-service{background:var(--cream);border-radius:10px;padding:.75rem 1rem;}
.sb-pay-option{
  display:flex;align-items:center;gap:.6rem;border:1px solid #eee;border-radius:10px;
  padding:.6rem 1rem;margin-bottom:.5rem;cursor:pointer;
}
.sb-pay-option input{accent-color:var(--gold);}
.sb-pay-option:has(input:checked){border-color:var(--gold);background:rgba(200,155,60,.06);}

@media (max-width:991px){
  .sb-card.sb-booking-box{position:static;}
}

/* ---------- Time Slot Picker ---------- */
.sb-slot-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));gap:.5rem;
}
.sb-slot-btn{
  border:1px solid #ddd;background:#fff;border-radius:8px;padding:.5rem .4rem;
  font-size:.82rem;cursor:pointer;transition:.15s;
}
.sb-slot-btn:hover:not(.disabled){border-color:var(--gold);}
.sb-slot-btn.selected{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600;}
.sb-slot-btn.disabled{
  background:#f5f5f5;color:#bbb;text-decoration:line-through;cursor:not-allowed;border-color:#eee;
}

/* ---------- Favorite Heart Button ---------- */
.sb-card{position:relative;}
.sb-fav-btn{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:#999;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;box-shadow:0 2px 8px rgba(0,0,0,.15);
  cursor:pointer;transition:.15s;
}
.sb-fav-btn:hover{transform:scale(1.08);color:#e0245e;}
.sb-fav-btn.favorited{color:#e0245e;}

/* ---------- Provider Type Badge (Individual Expert) ---------- */
.sb-type-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(26,26,26,.85);color:#fff;font-size:.7rem;font-weight:600;
  padding:.3rem .6rem;border-radius:20px;
}

/* ---------- Notification Dot (new bookings indicator) ---------- */
.sb-notif-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#dc3545;margin-left:6px;vertical-align:middle;
  box-shadow:0 0 0 2px rgba(220,53,69,.25);
}
.sb-notif-dot-header{
  position:absolute;top:2px;right:0;margin-left:0;
}

/* ---------- Registration Type Tabs (Salon Owner / Individual Expert) ---------- */
#regTypeTabs{gap:.5rem;}
#regTypeTabs .nav-link{
  color:var(--gold);border:1px solid var(--gold);border-radius:8px;font-weight:600;
  background:transparent;
}
#regTypeTabs .nav-link.active{
  background:var(--gold);color:#fff;border-color:var(--gold);
}
#regTypeTabs .nav-link:hover:not(.active){background:rgba(200,155,60,.08);}

/* ---------- Product Gallery ---------- */
.sb-gallery-thumb{border:2px solid transparent;transition:.15s;}
.sb-gallery-thumb:hover{border-color:var(--gold);}

/* ---------- Mobile Header Fix ---------- */
/* Cap the logged-in account name so a long name can't push the header into wrapping. */
.sb-account-name{
  display:inline-block;max-width:80px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:middle;
}
@media (max-width:575.98px){
  .sb-navbar{padding:.65rem 0;}
  .sb-brand{font-size:1rem;}
  .sb-logo-mark{width:32px;height:32px;font-size:.75rem;}
  .sb-logo-img{height:28px!important;max-height:28px!important;max-width:170px!important;}
  .navbar-nav.flex-row{gap:.5rem!important;}
  .btn-gold.btn-sm{padding:.35rem .6rem;font-size:.8rem;}
  .sb-account-name{max-width:60px;}
}