/* BeautyBook v3.1 - Clean Homepage Styles - UTF-8 */
:root{
  --cream:#FDF6F0;--blush:#F2D9E0;--blush2:#E8C4CF;
  --rose:#C4708A;--rose2:#A85070;--rose3:#8B3358;
  --petal:#F7E8EE;--petal2:#F0D5E0;
  --sage:#8FAF8E;--amber:#D4956A;--amber2:#B87040;
  --ink:#2D1F2B;--ink2:#4A3545;--muted:#9A8090;
  --card:#FFFFFF;--border:rgba(196,112,138,.15);
  --shadow:0 4px 24px rgba(139,51,88,.08);
  --shadow2:0 12px 48px rgba(139,51,88,.14);
  --radius:20px;--radius-lg:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  font-family:\'Nunito\',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ========== ANIMATIONS ========== */
@keyframes floatup{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes scalein{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.revealed{animation:floatup .7s cubic-bezier(.2,.8,.2,1) both}

/* ========== NAV ========== */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 40px;
  background:rgba(253,246,240,.85);backdrop-filter:blur(16px);
  transition:all .3s ease;
}
#nav.scrolled{box-shadow:var(--shadow);padding:10px 40px}
.nav-logo{display:flex;align-items:center;gap:8px}
.nav-logo img{height:36px;width:auto}
.logo-text{font-family:\'Playfair Display\',serif;font-style:italic;color:var(--rose);font-size:22px;font-weight:700}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-weight:600;font-size:15px;color:var(--ink2);transition:color .2s}
.nav-links a:hover{color:var(--rose)}
.nav-cta{
  background:linear-gradient(135deg,var(--rose),var(--rose2));
  color:#fff !important;padding:11px 22px;border-radius:30px;
  font-weight:700;font-size:14px;
  box-shadow:0 6px 18px rgba(196,112,138,.35);
  transition:all .25s ease;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(196,112,138,.45)}

/* ========== HERO ========== */
.hero{
  position:relative;
  padding:140px 24px 80px;
  background:radial-gradient(ellipse at top,var(--petal) 0%,var(--cream) 60%);
  text-align:center;overflow:hidden;
}
.hero::before{
  content:\'\';position:absolute;top:10%;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,var(--blush) 0%,transparent 70%);
  filter:blur(40px);z-index:0;
}
.hero::after{
  content:\'\';position:absolute;bottom:-100px;left:-100px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,var(--petal2) 0%,transparent 70%);
  filter:blur(50px);z-index:0;
}
.hero-inner{position:relative;z-index:1;max-width:880px;margin:0 auto}
.hero-badge{
  display:inline-block;padding:8px 18px;border-radius:30px;
  background:rgba(255,255,255,.7);border:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--rose2);
  letter-spacing:.5px;margin-bottom:24px;
  animation:floatup .8s both;
}
.hero-title{
  font-family:\'Playfair Display\',serif;
  font-size:clamp(42px,7vw,80px);font-weight:700;
  line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:24px;
  animation:floatup 1s .1s both;
}
.hero-title em{
  font-style:italic;
  background:linear-gradient(135deg,var(--rose),var(--rose3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  font-size:clamp(16px,1.8vw,20px);color:var(--ink2);
  max-width:620px;margin:0 auto 40px;
  animation:floatup 1s .2s both;
}

/* ========== BOOKING FUNNEL ========== */
.booking-funnel{
  display:flex;gap:12px;align-items:stretch;
  max-width:760px;margin:0 auto 24px;
  background:#fff;padding:10px;border-radius:var(--radius-lg);
  box-shadow:var(--shadow2);
  animation:scalein .6s .3s both;
  flex-wrap:wrap;
}
.funnel-step{
  flex:1;min-width:200px;
  display:flex;align-items:center;gap:8px;
  padding:0 14px;background:var(--petal);border-radius:var(--radius);
  position:relative;transition:all .25s;
}
.funnel-step:hover{background:var(--blush)}
.funnel-icon{font-size:20px;flex-shrink:0}
.funnel-select{
  flex:1;border:none;background:transparent;
  padding:18px 8px;font-size:15px;font-weight:600;
  color:var(--ink);cursor:pointer;outline:none;
  font-family:inherit;appearance:none;
  background-image:url(\"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'8\' viewBox=\'0 0 12 8\'><path fill=\'%23C4708A\' d=\'M6 8L0 0h12z\'/></svg>\");
  background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;
}
.funnel-btn{
  border:none;cursor:pointer;
  padding:18px 32px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--rose),var(--rose2));
  color:#fff;font-weight:800;font-size:15px;
  font-family:inherit;letter-spacing:.3px;
  box-shadow:0 8px 24px rgba(196,112,138,.4);
  transition:all .25s ease;
  white-space:nowrap;
}
.funnel-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(196,112,138,.5)}
.hero-trust{font-size:14px;color:var(--muted);margin-top:24px;animation:floatup 1s .5s both}

/* ========== SECTION HEAD ========== */
.section-head{text-align:center;max-width:680px;margin:0 auto 48px}
.section-head h2{
  font-family:\'Playfair Display\',serif;
  font-size:clamp(32px,4vw,48px);font-weight:700;
  color:var(--ink);margin-bottom:12px;letter-spacing:-.01em;
}
.section-head p{font-size:17px;color:var(--ink2)}

/* ========== LAST MINUTE ========== */
.last-minute{padding:80px 24px;background:linear-gradient(180deg,var(--cream),var(--petal) 100%)}
.lm-carousel{
  max-width:1200px;margin:0 auto;
  overflow:hidden;border-radius:var(--radius-lg);
  background:#fff;padding:30px;box-shadow:var(--shadow);
  position:relative;min-height:200px;
}
.lm-placeholder{
  text-align:center;padding:50px 20px;
  color:var(--muted);
}
.lm-placeholder-icon{font-size:48px;display:block;margin-bottom:16px}
.lm-placeholder p{font-size:18px;font-weight:600}
.lm-track{display:flex;gap:20px;transition:transform .8s cubic-bezier(.4,.0,.2,1)}
.lm-card{
  flex:0 0 320px;
  background:linear-gradient(135deg,#fff 0%,var(--petal) 100%);
  border-radius:var(--radius);padding:24px;
  position:relative;border:2px solid var(--blush);
  transition:all .3s ease;
}
.lm-card:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.lm-badge{
  position:absolute;top:-10px;right:20px;
  background:linear-gradient(135deg,var(--amber),var(--amber2));
  color:#fff;padding:8px 16px;border-radius:30px;
  font-weight:800;font-size:14px;
  box-shadow:0 6px 16px rgba(212,149,106,.4);
  animation:pulse 2s infinite;
}
.lm-time{font-size:13px;color:var(--rose2);font-weight:700;margin-bottom:8px}
.lm-card h3{font-family:\'Playfair Display\',serif;font-size:20px;color:var(--ink);margin-bottom:6px}
.lm-service{font-size:14px;color:var(--ink2);margin-bottom:14px}
.lm-price{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.lm-original{text-decoration:line-through;color:var(--muted);font-size:14px}
.lm-final{font-size:24px;font-weight:800;color:var(--rose2)}
.lm-cta{display:block;text-align:center;padding:10px;background:var(--rose);color:#fff;border-radius:30px;font-weight:700;font-size:14px;transition:background .2s}
.lm-cta:hover{background:var(--rose2)}

/* ========== SALONS CAROUSEL ========== */
.salons-section{padding:80px 24px;background:var(--cream)}
.salons-carousel{max-width:1300px;margin:0 auto;overflow:hidden}
.salons-track{display:flex;gap:24px;transition:transform 1s cubic-bezier(.4,.0,.2,1)}
.salon-card{
  flex:0 0 296px;
  background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:all .3s ease;display:block;
}
.salon-card:hover{transform:translateY(-6px);box-shadow:var(--shadow2)}
.salon-img{
  height:180px;background-size:cover;background-position:center;
  position:relative;
}
.salon-cat{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,.95);
  color:var(--rose2);padding:5px 12px;border-radius:20px;
  font-size:12px;font-weight:700;
}
.salon-body{padding:20px}
.salon-body h3{font-family:\'Playfair Display\',serif;font-size:20px;margin-bottom:6px;color:var(--ink)}
.salon-rating{color:var(--amber);font-weight:700;font-size:14px;margin-bottom:8px}
.salon-rating span{color:var(--muted);font-weight:500}
.salon-addr{font-size:13px;color:var(--ink2);margin-bottom:16px}
.salon-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--border)}
.salon-price{font-weight:800;color:var(--rose2);font-size:15px}
.salon-cta{font-weight:700;color:var(--rose);font-size:14px}

/* ========== HOW IT WORKS ========== */
.how-it-works{padding:80px 24px;background:linear-gradient(180deg,var(--petal),var(--cream))}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;max-width:1100px;margin:0 auto}
.step{text-align:center;padding:30px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);transition:all .3s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.step-num{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--rose),var(--rose2));
  color:#fff;font-size:28px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  box-shadow:0 8px 20px rgba(196,112,138,.35);
}
.step h3{font-family:\'Playfair Display\',serif;font-size:22px;margin-bottom:12px;color:var(--ink)}
.step p{font-size:15px;color:var(--ink2)}

/* ========== MAP ========== */
.map-section{padding:80px 24px;background:var(--cream)}
.bb-map{
  height:500px;max-width:1200px;margin:0 auto;
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow2);border:3px solid #fff;
}
.bb-marker{background:transparent;border:none}
.bb-pin{
  width:36px;height:36px;border-radius:50% 50% 50% 0;
  background:linear-gradient(135deg,var(--rose),var(--rose2));
  transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.bb-pin > *{transform:rotate(45deg)}
.map-popup{padding:6px;min-width:200px}
.map-popup h4{font-family:\'Playfair Display\',serif;font-size:16px;margin-bottom:6px;color:var(--ink)}
.map-popup-price{font-weight:800;color:var(--rose2);margin:8px 0}
.map-popup-btn{display:block;text-align:center;background:var(--rose);color:#fff !important;padding:8px;border-radius:20px;font-weight:700;font-size:13px;margin-top:8px}

/* ========== TESTIMONIALS ========== */
.testimonials{padding:80px 24px;background:linear-gradient(180deg,var(--cream),var(--petal))}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1100px;margin:0 auto}
.testimonial{background:#fff;padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);transition:all .3s}
.testimonial:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.stars{color:var(--amber);font-size:18px;margin-bottom:14px;letter-spacing:2px}
.testimonial p{font-size:15px;color:var(--ink2);font-style:italic;margin-bottom:16px;line-height:1.7}
.testimonial strong{color:var(--rose2);font-size:14px}

/* ========== FOOTER ========== */
#footer{background:var(--ink);color:#fff;padding:60px 24px 30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto 40px}
.footer-col h4{font-family:\'Playfair Display\',serif;font-size:18px;margin-bottom:18px;color:var(--blush)}
.footer-col a{display:block;color:rgba(255,255,255,.7);font-size:14px;margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--blush)}
.footer-col p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.6;margin-top:16px}
.footer-logo img{height:48px;filter:brightness(1.3)}
.footer-bottom{
  max-width:1200px;margin:0 auto;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:10px;
}

/* ========== STICKY CTA ========== */
.sticky-cta{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:99;display:none;
}
.sticky-cta-btn{
  background:linear-gradient(135deg,var(--rose),var(--rose2));
  color:#fff;padding:14px 28px;border-radius:30px;
  font-weight:800;font-size:15px;
  box-shadow:0 10px 30px rgba(196,112,138,.45);
}

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
  .nav-links{display:none}
  #nav{padding:10px 20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .booking-funnel{flex-direction:column;padding:14px}
  .funnel-step{min-width:100%}
}
@media(max-width:600px){
  .hero{padding:110px 20px 60px}
  .footer-grid{grid-template-columns:1fr}
  .sticky-cta{display:block}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* ===== v3.2 additions ===== */
.nav-right{display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:24px;padding:3px;gap:2px}
.lang-switch button{
  border:none;background:transparent;cursor:pointer;font-family:inherit;
  padding:6px 14px;border-radius:20px;font-weight:700;font-size:13px;color:var(--ink2);
  transition:all .25s ease;
}
.lang-switch button:hover{color:var(--rose)}
.lang-switch button.active{background:linear-gradient(135deg,var(--rose),var(--rose2));color:#fff;box-shadow:0 4px 12px rgba(196,112,138,.3)}

/* Salon card with emoji-based image */
.salon-img{position:relative;display:flex;align-items:center;justify-content:center}
.salon-emoji{font-size:64px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));z-index:1}

@media(max-width:900px){
  .nav-right{gap:8px}
  .lang-switch button{padding:5px 10px;font-size:12px}
}


/* ===== W21S1_HOMEPAGE_HAMBURGER_OK — mobile hamburger + drawer for homepage #nav (<=900px) ===== */
.bb-burger{
  display:none;
  position:relative;z-index:101;
  width:44px;height:44px;padding:0;
  background:transparent;border:none;cursor:pointer;
  border-radius:10px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:background .2s ease;
}
.bb-burger:hover{background:rgba(196,112,138,.08)}
.bb-burger:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.bb-burger-bar{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.bb-burger[aria-expanded="true"] .bb-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bb-burger[aria-expanded="true"] .bb-burger-bar:nth-child(2){opacity:0}
.bb-burger[aria-expanded="true"] .bb-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.bb-burger-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.bb-drawer-backdrop{
  position:fixed;inset:0;background:rgba(45,31,43,.45);
  opacity:0;transition:opacity .25s ease;z-index:200;
}
.bb-drawer-backdrop.is-open{opacity:1}
.bb-drawer-backdrop[hidden]{display:none}

.bb-drawer{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;
  width:min(86vw,360px);
  background:var(--cream);
  box-shadow:-8px 0 32px rgba(139,51,88,.18);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:201;display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
.bb-drawer.is-open{transform:translateX(0)}
.bb-drawer[hidden]{display:none}
.bb-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
}
.bb-drawer-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--rose2);font-style:italic}
.bb-drawer-close{
  width:44px;height:44px;border:none;background:transparent;cursor:pointer;
  border-radius:10px;font-size:28px;line-height:1;color:var(--ink2);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.bb-drawer-close:hover{background:rgba(196,112,138,.1)}
.bb-drawer-close:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.bb-drawer-nav{display:flex;flex-direction:column;padding:8px 0;flex:1;overflow-y:auto}
.bb-drawer-link{
  display:block;padding:14px 24px;
  font-weight:600;font-size:16px;color:var(--ink);
  border-left:3px solid transparent;
  min-height:48px;line-height:1.4;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.bb-drawer-link:hover,.bb-drawer-link:focus-visible{background:var(--petal);border-left-color:var(--rose);color:var(--rose2);outline:none}
.bb-drawer-foot{padding:16px 20px 24px;border-top:1px solid var(--border)}
.bb-drawer-cta{
  display:block;text-align:center;
  background:linear-gradient(135deg,var(--rose),var(--rose2));
  color:#fff;padding:14px 22px;border-radius:30px;
  font-weight:800;font-size:15px;letter-spacing:.3px;
  box-shadow:0 6px 18px rgba(196,112,138,.35);
  transition:transform .2s ease,box-shadow .2s ease;
  min-height:48px;
}
.bb-drawer-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(196,112,138,.45)}

body.bb-drawer-lock{overflow:hidden;touch-action:none}

@media(max-width:900px){
  .bb-burger{display:flex}
}
@media(min-width:901px){
  .bb-burger,.bb-drawer,.bb-drawer-backdrop{display:none !important}
}
/* ===== end W21S1_HOMEPAGE_HAMBURGER_OK ===== */