/* ─────────────────────────────────────
   Makeup Exquisite — components.css
   Buttons, book-circle, WhatsApp widget, reviews
───────────────────────────────────── */

/* ── Buttons ── */
.btn {
  display:inline-block; font-family:var(--f-body);
  font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:.75rem 1.75rem; border:1px solid; border-radius:0;
  transition:background .2s, color .2s; white-space:nowrap; width:fit-content;
}
.btn-pink         { background:rgba(249,120,163,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:white; border-color:var(--c-pink); }
.btn-pink:hover   { background:transparent; color:var(--c-pink); }
.btn-black        { background:var(--c-black); color:white; border-color:var(--c-black); }
.btn-black:hover  { background:transparent; color:var(--c-black); }
.btn-outline      { background:transparent; color:var(--c-black); border-color:var(--c-black); }
.btn-outline:hover { background:var(--c-black); color:white; }
.btn-outline-pink       { background:transparent; color:var(--c-pink); border-color:var(--c-pink); }
.btn-outline-pink:hover { background:rgba(249,120,163,.82); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); color:white; }
.btn-group { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ── Book Circle ──
   Whole circle rotates via JS scroll (--rotDeg inline transform).
   Magnetic offset via txC/tyC lerped in JS.
   bc-inner is a flex container — sits above bc-fill, no transform.
*/
.book-circle {
  position:fixed; bottom:0; left:0;
  width:11rem; height:11rem; border-radius:50%;
  z-index:95; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.bc-visual {
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:rgba(249,120,163,.82);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  will-change:transform;
  display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.55);
}
.bc-inner {
  position:relative; z-index:5;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.2rem;
  pointer-events:none;
}
.bc-fill {
  position:absolute; left:0; right:0;
  bottom:-100%; height:100%;
  background:#000;
  transition:bottom .45s cubic-bezier(.16,1,.3,1);
  z-index:1;
}
.book-circle:hover .bc-fill { bottom:0; }
.bc-label {
  white-space:nowrap; position:relative; z-index:5;
  color:#fff; text-align:center; width:100%;
  font-family:var(--f-head); font-size:1.5rem; line-height:1.8rem;
}
.bc-arrow {
  position:relative; z-index:5; color:white; font-size:1rem;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.book-circle:hover .bc-arrow { transform:rotate(180deg); }

/* ── WhatsApp widget ── */
.wa-widget { position:fixed; bottom:2rem; right:2rem; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; pointer-events:none; }
.wa-circle, .wa-popup.open { pointer-events:auto; }
.wa-circle {
  width:3.5rem; height:3.5rem; border-radius:50%; background:var(--c-black);
  border:none; display:flex; align-items:center; justify-content:center;
  position:relative; transition:background .3s, transform .2s;
}
.wa-circle:hover  { transform:scale(1.08); }
.wa-circle.active { background:rgba(249,120,163,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.wa-circle svg    { width:1.5rem; height:1.5rem; fill:white; }
.wa-dot { position:absolute; top:2px; right:2px; width:.75rem; height:.75rem; background:#25D366; border-radius:50%; border:2px solid white; }

.wa-popup {
  background:white; border-radius:var(--r-xl); width:20rem;
  box-shadow:0 1.5rem 3.75rem rgba(0,0,0,.16); overflow:hidden;
  opacity:0; transform:translateY(.75rem) scale(.96); pointer-events:none;
  transition:opacity .3s, transform .3s; transform-origin:bottom right;
}
.wa-popup.open { opacity:1; transform:none; pointer-events:all; }
.wa-popup-header    { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-bottom:1px solid #f0f0f0; }
.wa-popup-avatar    { width:2.75rem; height:2.75rem; border-radius:50%; overflow:hidden; flex-shrink:0; }
.wa-popup-avatar img { width:100%; height:100%; object-fit:cover; }
.wa-popup-name      { font-size:.875rem; font-weight:600; color:var(--c-black); }
.wa-popup-close     { background:none; border:none; font-size:1.125rem; color:var(--c-grey-mid); line-height:1; padding:.25rem; margin-left:auto; }
.wa-popup-body      { background:#FFE9EF; padding:1.25rem; }
.wa-popup-bubble    { background:white; border-radius:0 var(--r-md) var(--r-md); padding:.75rem 1rem; }
.wa-popup-bubble-name { font-size:.7rem; font-weight:600; color:var(--c-pink); margin-bottom:.25rem; }
.wa-popup-bubble-msg  { font-size:.875rem; color:#333; line-height:1.55; margin:0; }
.wa-popup-footer    { padding:1rem 1.25rem; }
.wa-popup-start {
  display:flex; align-items:center; justify-content:center; gap:.625rem;
  width:100%; background:var(--c-black); color:white; border:none;
  border-radius:100px; padding:.875rem 1.5rem;
  font-size:.875rem; font-weight:600; text-decoration:none; transition:background .2s;
}
.wa-popup-start:hover { background:#222; }
.wa-popup-start svg { width:1.125rem; height:1.125rem; fill:currentColor; }

/* ── Reviews — horizontal scroll with progress bar ── */
.reviews-scroll-wrap { overflow:hidden; }
.testimonials-grid {
  display:flex; overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:1.5rem; padding:0 5% 1.5rem;
  scrollbar-width:none;
}
.testimonials-grid::-webkit-scrollbar { display:none; }
.t-card {
  padding:2.5rem; border:1px solid var(--c-grey); background:white;
  display:flex; flex-direction:column; gap:1.25rem; border-radius:var(--r-md);
  min-width:min(360px,82vw); max-width:min(360px,82vw);
  scroll-snap-align:start; flex-shrink:0;
}
.t-card-mark     { font-family:var(--f-head); font-size:3.75rem; line-height:.6; color:var(--c-pink); font-weight:300; }
.t-card-text     { font-family:var(--f-head); font-weight:300; font-size:1rem; line-height:1.65; letter-spacing:-.01em; color:var(--c-black); flex:1; }
.t-card-meta     { padding-top:1.25rem; border-top:1px solid var(--c-grey); }
.t-card-name     { font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--c-black); margin-bottom:.2rem; }
.t-card-occasion { font-size:.75rem; color:var(--c-grey-mid); }
.t-card-rating   { display:flex; gap:2px; margin-bottom:.5rem; }
.t-card-star     { color:var(--c-pink); font-size:.75rem; }

.reviews-progress { height:1.5px; background:rgba(249,120,163,.15); margin:0 5%; border-radius:100px; overflow:hidden; }
.reviews-progress-bar { height:100%; background:rgba(249,120,163,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); width:0%; border-radius:100px; transition:width .1s linear; }

/* ── Google badge ── */
.google-badge { display:inline-flex; align-items:center; gap:.75rem; background:white; border:1px solid var(--c-grey); border-radius:var(--r-md); padding:.875rem 1.25rem; text-decoration:none; transition:border-color .2s, box-shadow .2s; }
.google-badge:hover { border-color:var(--c-pink); box-shadow:0 4px 20px rgba(249,120,163,.15); }
.google-badge-icon  { width:1.5rem; height:1.5rem; }
.google-badge-name  { font-size:.75rem; font-weight:600; color:var(--c-black); }
.google-badge-stars { display:flex; align-items:center; gap:4px; font-size:.7rem; color:var(--c-grey-mid); }
.google-badge-stars span { color:var(--c-pink); }

@media(max-width:768px) 

{ .btn-group { flex-direction:column; align-items:flex-start; } 
.book-circle {
    width:8.8rem; height:8.8rem;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 0.2rem);
  }
  .bc-label { font-size:1.1rem; line-height:1.4rem; }
}