/* Fatima Skin Lab - booking page skin (v2).
   The booking ENGINE (markup + JS from fsl-core) is untouched; this sheet
   restyles its components in the mockup language: porcelain cards, hush
   hairlines, Newsreader headings, Karla text, wine actions. Loads only on
   /book/, after fsl-brand.css. Erf 2026-08-07: no vertical photo, masthead
   must match the rest of the site. */

/* ---------- masthead, in the pricing .phead idiom ---------- */
.bhead{padding:calc(74px + var(--s6)) 0 var(--s5);position:relative;overflow:hidden}
.bhead .glow{width:940px;height:940px;right:-280px;top:-340px;opacity:.3;filter:blur(130px);animation:none}
.bhead p{color:var(--stone);font-size:1.12rem;margin-top:var(--s3);max-width:46ch}

/* ---------- layout ---------- */
.bwrap{padding-bottom:var(--s6)}
.bgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s4);align-items:start}
@media(max-width:980px){.bgrid{grid-template-columns:1fr}}

/* ---------- aside cards (pricing .card recipe) ---------- */
.bcard{background:var(--porcelain);border:1px solid var(--hush);border-radius:var(--r);padding:28px}
.bcard+.bcard{margin-top:var(--s3)}
.bcard h2{font-size:1.35rem;margin-bottom:10px}
.bcard ul{list-style:none;margin:0;padding:0}
.bcard li{position:relative;padding:8px 0 8px 22px;color:var(--stone);font-size:.95rem}
.bcard li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:1px;background:var(--rose)}
.bcard p{color:var(--stone);font-size:.95rem;margin:0 0 14px}
.bcard .quiet{color:var(--wine);font-weight:500;text-decoration:none;font-size:.95rem}
.bcard .quiet:hover{text-decoration:underline}

/* ---------- form reskin: override public.css component by component ---------- */
body.fsl-v2 .fsl-book{font-family:'Karla',sans-serif}
body.fsl-v2 .fsl-step{background:var(--porcelain);border:1px solid var(--hush);border-radius:var(--r);
  padding:32px;box-shadow:none}
body.fsl-v2 .fsl-step+.fsl-step{margin-top:var(--s3)}
body.fsl-v2 .fsl-step-h{font-family:'Newsreader',serif;font-weight:400;font-size:1.6rem;color:var(--ink);
  letter-spacing:0;gap:14px;margin:0 0 var(--s3)}
body.fsl-v2 .fsl-step-h span{background:var(--blush);color:var(--wine);font-family:'Karla',sans-serif;
  font-size:.8rem;font-weight:600;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
body.fsl-v2 .fsl-label{font-family:'Karla',sans-serif;font-weight:600;font-size:.68rem;
  letter-spacing:.16em;color:var(--stone)}
.fsl-book input[type=text],.fsl-book input[type=email],.fsl-book input[type=tel],
body.fsl-v2 .fsl-book select, body.fsl-v2 .fsl-book textarea{
  font-family:'Karla',sans-serif;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--hush);border-radius:12px;padding:12px 14px;box-shadow:none}
body.fsl-v2 .fsl-book input:focus, body.fsl-v2 .fsl-book select:focus, body.fsl-v2 .fsl-book textarea:focus{
  outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(190,110,124,.18)}
/* calendar */
body.fsl-v2 .fsl-cal{border:1px solid var(--hush);border-radius:var(--r);background:#fff}
body.fsl-v2 .fsl-cal-title{font-family:'Newsreader',serif;font-weight:400;color:var(--ink)}
body.fsl-v2 .fsl-cal-dow{font-family:'Karla',sans-serif;font-size:.64rem;letter-spacing:.16em;color:var(--stone)}
body.fsl-v2 .fsl-cal-grid button{font-family:'Karla',sans-serif;background:none;border:1px solid transparent;
  border-radius:8px;color:var(--ink);cursor:pointer}
body.fsl-v2 .fsl-cal-grid button:hover:not(:disabled){border-color:var(--rose)}
body.fsl-v2 .fsl-cal-grid button:disabled{color:rgba(58,36,41,.28)}
body.fsl-v2 .fsl-cal-grid button[aria-pressed=true], body.fsl-v2 .fsl-cal-grid button.is-selected{
  background:var(--wine);color:var(--milk);border-color:var(--wine)}
body.fsl-v2 .fsl-cal-note{color:var(--stone);font-size:.82rem}
/* time chips */
body.fsl-v2 .fsl-times button{font-family:'Karla',sans-serif;font-size:.9rem;background:#fff;
  border:1px solid var(--hush);border-radius:100px;color:var(--ink);padding:10px 16px;cursor:pointer}
body.fsl-v2 .fsl-times button:hover{border-color:var(--rose)}
body.fsl-v2 .fsl-times button[aria-pressed=true], body.fsl-v2 .fsl-times button.is-selected{
  background:var(--wine);color:var(--milk);border-color:var(--wine)}
body.fsl-v2 .fsl-slots-empty{color:var(--stone)}
/* summary + submit */
body.fsl-v2 .fsl-summary{background:var(--milk);border:1px solid var(--hush);border-radius:var(--r);color:var(--ink)}
body.fsl-v2 .fsl-submit, body.fsl-v2 .fsl-book .fsl-submit{
  display:inline-flex;align-items:center;gap:10px;font-family:'Karla',sans-serif;
  font-weight:500;font-size:.95rem;padding:16px 30px;border-radius:100px;
  background:var(--wine);color:var(--milk);border:1px solid var(--wine);cursor:pointer;
  text-transform:none;letter-spacing:normal;box-shadow:none}
body.fsl-v2 .fsl-submit:hover{background:var(--wine);border-color:var(--wine);box-shadow:0 12px 30px rgba(126,50,67,.28);transform:translateY(-2px)}
body.fsl-v2 .fsl-msg{border-radius:10px}
body.fsl-v2 .fsl-book-foot{color:var(--stone)}
/* match the pricing masthead's display scale */
.bhead h1{font-size:clamp(2.7rem,6vw,4.6rem)}

/* ---------- custom treatment dropdown (progressive enhancement) ---------- */
body.fsl-v2 .fsl-dd{position:relative}
body.fsl-v2 .fsl-dd-native{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body.fsl-v2 .fsl-dd-btn{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;
  font-family:'Karla',sans-serif;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--hush);border-radius:12px;padding:13px 44px 13px 14px;cursor:pointer;
  position:relative;transition:border-color .3s}
body.fsl-v2 .fsl-dd-btn:hover, body.fsl-v2 .fsl-dd.is-open .fsl-dd-btn{border-color:var(--rose)}
body.fsl-v2 .fsl-dd-btn:focus-visible{outline:none;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(190,110,124,.18)}
body.fsl-v2 .fsl-dd-btn .fsl-dd-ph{color:var(--stone)}
body.fsl-v2 .fsl-dd-btn .fsl-dd-meta{margin-left:auto;color:var(--stone);font-size:.85rem}
body.fsl-v2 .fsl-dd-chev{position:absolute;right:16px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--wine);border-bottom:1.5px solid var(--wine);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease)}
body.fsl-v2 .fsl-dd.is-open .fsl-dd-chev{transform:translateY(-30%) rotate(225deg)}
body.fsl-v2 .fsl-dd-list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;
  list-style:none;background:var(--porcelain);border:1px solid var(--hush);border-radius:12px;
  box-shadow:0 18px 44px rgba(58,36,41,.14);max-height:322px;overflow:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
body.fsl-v2 .fsl-dd.is-open .fsl-dd-list{opacity:1;transform:none;pointer-events:auto}
body.fsl-v2 .fsl-dd-list li{display:flex;align-items:baseline;gap:12px;padding:11px 12px;border-radius:8px;
  cursor:pointer;font-size:.95rem;color:var(--ink)}
body.fsl-v2 .fsl-dd-list li .fsl-dd-meta{margin-left:auto;color:var(--stone);font-size:.85rem;white-space:nowrap}
body.fsl-v2 .fsl-dd-list li.is-active{background:var(--blush)}
body.fsl-v2 .fsl-dd-list li[aria-selected=true]{color:var(--wine);font-weight:600}
body.fsl-v2 .fsl-dd-list li[aria-selected=true]::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--wine);align-self:center;flex:none}
@media (prefers-reduced-motion: reduce){
  .fsl-dd-list{transition:none}.fsl-dd-chev{transition:none}
}

/* ---------- calendar, redesigned (Erf 2026-08-07) ---------- */
body.fsl-v2 .fsl-cal{padding:18px 18px 14px;background:#fff}
body.fsl-v2 .fsl-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
body.fsl-v2 .fsl-cal-title{font-size:1.25rem}
body.fsl-v2 .fsl-cal-dow{margin:8px 0 6px}
body.fsl-v2 .fsl-cal-grid{gap:5px}
body.fsl-v2 .fsl-cal-grid button{aspect-ratio:1;border-radius:10px;background:var(--milk);border:1px solid transparent;
  font-size:.92rem;transition:border-color .25s,background .25s,transform .25s var(--ease)}
body.fsl-v2 .fsl-cal-grid button:hover:not(:disabled){border-color:var(--rose);transform:translateY(-1px)}
body.fsl-v2 .fsl-cal-grid button:disabled{background:none;color:rgba(58,36,41,.24)}
body.fsl-v2 .fsl-cal-note{margin-top:12px;font-size:.78rem}

/* ---------- details step: labels and fields on one baseline ---------- */
body.fsl-v2 .fsl-book-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
body.fsl-v2 .fsl-field{display:flex;flex-direction:column;gap:6px}
body.fsl-v2 .fsl-field .fsl-label{margin-bottom:0}
@media(max-width:760px){.fsl-book-grid{grid-template-columns:1fr}}

/* ---------- calendar, third pass (Erf: needs much more) ---------- */
body.fsl-v2 .fsl-cal{border:1px solid var(--hush);border-radius:var(--r);background:var(--porcelain);
  padding:22px 22px 16px}
body.fsl-v2 .fsl-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
body.fsl-v2 .fsl-cal-title{font-family:'Newsreader',serif;font-size:1.35rem;color:var(--ink)}
body.fsl-v2 .fsl-cal-dow{font-size:.64rem;letter-spacing:.16em;color:var(--stone);margin:10px 0 8px}
body.fsl-v2 .fsl-cal-grid{gap:6px}
body.fsl-v2 .fsl-cal-grid button{aspect-ratio:1;border-radius:12px;background:#fff;border:1px solid var(--hush);
  color:var(--ink);font-size:.95rem;transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease)}
body.fsl-v2 .fsl-cal-grid button:hover:not(:disabled){border-color:var(--wine);transform:translateY(-1px)}
body.fsl-v2 .fsl-cal-grid button:disabled{background:none;border-color:transparent;color:rgba(58,36,41,.22)}
body.fsl-v2 .fsl-cal-grid button[aria-pressed=true],body.fsl-v2 .fsl-cal-grid button.is-selected{
  background:var(--wine);border-color:var(--wine);color:var(--milk)}
body.fsl-v2 .fsl-cal-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--hush);
  font-size:.76rem;color:var(--stone)}
body.fsl-v2 .fsl-slots-empty{background:var(--milk);border:1px dashed var(--hush);border-radius:12px;
  padding:22px;color:var(--stone);font-size:.92rem}

/* ---- phones: one field per row, tighter masthead ---- */
@media(max-width:760px){
  body.fsl-v2 .fsl-book-grid{grid-template-columns:1fr}
  .bhead{padding:calc(74px + var(--s5)) 0 var(--s4)}
}

/* ---- month nav: the buttons ARE .fsl-cal-nav (no wrapper); drawn chevrons, no glyphs ---- */
body.fsl-v2 button.fsl-cal-nav{width:38px;height:38px;border:1px solid var(--hush);border-radius:50%;
  background-color:#fff;color:transparent;font-size:0;line-height:0;padding:0;cursor:pointer;
  background-repeat:no-repeat;background-position:center;background-size:15px;
  transition:background-color .3s,border-color .3s,transform .3s var(--ease)}
body.fsl-v2 button.fsl-cal-nav[data-dir="-1"]{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E3243' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
body.fsl-v2 button.fsl-cal-nav[data-dir="1"]{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E3243' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}
body.fsl-v2 button.fsl-cal-nav:hover{background-color:var(--wine);border-color:var(--wine);transform:translateY(-1px)}
body.fsl-v2 button.fsl-cal-nav[data-dir="-1"]:hover{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF4F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E")}
body.fsl-v2 button.fsl-cal-nav[data-dir="1"]:hover{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF4F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}

/* the plugin's stacked-form sibling margin (.fsl-field+.fsl-field) pushes
   EMAIL/PHONE down inside the 3-col grid; rows own their spacing here */
body.fsl-v2 .fsl-book-grid .fsl-field{margin-top:0}

/* booking.js marks selection with .is-on (not .is-selected); style the real class */
body.fsl-v2 .fsl-cal-grid button.is-on,body.fsl-v2 .fsl-day.is-on{
  background:var(--wine);border-color:var(--wine);color:var(--milk)}
body.fsl-v2 .fsl-slot.is-on{background:var(--wine);border-color:var(--wine);color:var(--milk)}

/* ---- audit batch: states, statuses, focus, aside ---- */
body.fsl-v2 .fsl-book input:focus-visible,body.fsl-v2 .fsl-book textarea:focus-visible,
body.fsl-v2 .fsl-dd-btn:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
body.fsl-v2 .fsl-msg.is-ok{background:var(--blush);color:var(--wine);border:0}
body.fsl-v2 .fsl-msg.is-error{background:var(--wine);color:var(--milk);border:0}
body.fsl-v2 .fsl-cal-grid button:disabled{color:rgba(58,36,41,.5)}
body.fsl-v2 .fsl-cal.is-idle .fsl-cal-grid button{color:rgba(58,36,41,.35);background:#fff;border-color:var(--hush)}
body.fsl-v2 .fsl-foot-note{margin-top:12px;font-size:.85rem;color:var(--stone)}
body.fsl-v2 .fsl-done{background:var(--porcelain);border:1px solid var(--hush);border-radius:var(--r);
  padding:32px;text-align:left}
body.fsl-v2 .fsl-done h2{font-family:'Newsreader',serif;font-weight:500;font-size:2rem;margin:0 0 10px;color:var(--ink)}
body.fsl-v2 .fsl-done p{color:var(--stone);margin:0 0 8px}
body.fsl-v2 .fsl-done .fsl-done-meta{font-family:'Newsreader',serif;font-size:1.2rem;color:var(--ink);margin:14px 0}
@media(min-width:981px){.bside{position:sticky;top:calc(74px + var(--s3))}}

/* status messages: quiet card, hidden when empty; 44px month chevrons */
body.fsl-v2 .fsl-msg{font-size:.9rem;padding:12px 16px;border-radius:12px;margin-top:10px}
body.fsl-v2 .fsl-msg:empty{display:none;padding:0;margin:0}
body.fsl-v2 button.fsl-cal-nav{width:44px;height:44px}
body.fsl-v2 button.fsl-cal-nav:disabled{opacity:.35;cursor:default;transform:none;background-color:#fff}