/* =====================================================================
   FIND MY APPOINTMENT - guided booking sheet (TEST build)
   Two taps: what's going on -> where suits you -> straight to booking.
   Brand: linen/parchment, deep brown, gold hairlines, plum pill buttons.
   Terracotta only on the italic sub-line. Playfair headings, Outfit body.
   ===================================================================== */

.fc{
  --fc-linen:#F6EFE6; --fc-parch:#FCF8F3; --fc-sand:#EBE0D2;
  --fc-brown:#2A1F1A; --fc-text:#5C5048; --fc-plum:#482C5B;
  --fc-honey:#C9A25B; --fc-gold:#E6B85C; --fc-terra:#C76A4A;
  --fc-hair:rgba(201,162,91,.30);
  --fc-raised:5px 5px 14px rgba(148,124,100,.28),-5px -5px 14px rgba(255,255,255,.95);
  --fc-inset:inset 4px 4px 10px rgba(148,124,100,.30),inset -4px -4px 10px rgba(255,255,255,.95);
  --fc-ease:cubic-bezier(.22,.8,.28,1);
  position:fixed;inset:0;z-index:10000;display:none;
  align-items:center;justify-content:center;padding:24px;
  font-family:'Outfit','Avenir Next','Segoe UI',sans-serif;color:var(--fc-brown);
}
.fc.is-open{display:flex}
.fc__scrim{
  position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(246,239,230,.82),rgba(62,44,32,.62));
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  animation:fc-fade .35s ease both;
}
.fc__card{
  position:relative;z-index:1;width:min(880px,100%);max-height:min(92vh,820px);
  overflow:auto;overscroll-behavior:contain;
  border-radius:30px;border:1px solid var(--fc-hair);
  background:linear-gradient(165deg,var(--fc-parch) 0%,var(--fc-linen) 62%,#F1E8DB 100%);
  box-shadow:0 60px 120px -30px rgba(42,31,26,.55),0 18px 40px -16px rgba(42,31,26,.35),inset 0 1px 0 #fff;
  animation:fc-rise .5s var(--fc-ease) both;
}
.fc__card::before{ /* soft pool of warm light behind the heading */
  content:'';position:absolute;left:50%;top:-120px;width:560px;height:320px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(230,184,92,.28),rgba(230,184,92,0));
  pointer-events:none;
}
@keyframes fc-fade{from{opacity:0}to{opacity:1}}
@keyframes fc-rise{from{opacity:0;transform:translateY(28px) scale(.975)}to{opacity:1;transform:none}}
@keyframes fc-step{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fc-step-back{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* top bar: back / progress / close */
.fc__top{
  position:sticky;top:0;z-index:3;display:grid;grid-template-columns:96px 1fr 96px;align-items:center;
  padding:16px 18px 6px;
  background:linear-gradient(180deg,var(--fc-parch) 55%,rgba(252,248,243,0));
}
.fc__back,.fc__x{
  font:inherit;cursor:pointer;border:0;background:none;color:var(--fc-text);
  display:inline-flex;align-items:center;gap:6px;font-size:.92rem;font-weight:500;
  padding:9px 12px;border-radius:99px;transition:background .2s,color .2s;
}
.fc__back:hover,.fc__x:hover{background:rgba(201,162,91,.16);color:var(--fc-brown)}
.fc__back[hidden]{display:inline-flex;visibility:hidden}
.fc__x{justify-self:end}
.fc__x svg,.fc__back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fc__dots{display:flex;gap:8px;justify-content:center;align-items:center}
.fc__dot{width:26px;height:5px;border-radius:9px;background:rgba(201,162,91,.28);transition:background .35s,width .35s var(--fc-ease)}
.fc__dot.is-on{background:var(--fc-honey);width:40px}
.fc__dot.is-done{background:var(--fc-honey)}

.fc__stage{position:relative;padding:4px clamp(20px,4vw,48px) 30px}
.fc__step{animation:fc-step .45s var(--fc-ease) both}
.fc__step.is-back{animation-name:fc-step-back}

.fc__eyebrow{
  display:flex;justify-content:center;align-items:center;gap:10px;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8A6A2E;margin:6px 0 10px;
}
.fc__eyebrow::before,.fc__eyebrow::after{content:'';width:28px;height:1px;background:var(--fc-hair)}
.fc__title{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;text-align:center;
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.1;letter-spacing:-.015em;color:var(--fc-brown);
}
.fc__sub{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;text-align:center;
  font-size:clamp(1.05rem,2vw,1.25rem);color:var(--fc-terra);margin:8px 0 24px;
}

/* step 1: photo tiles */
.fc__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fc__tile{
  font:inherit;cursor:pointer;text-align:center;color:var(--fc-brown);
  border:1px solid transparent;border-radius:22px;padding:18px 12px 16px;
  background:linear-gradient(160deg,#FFFDFA,var(--fc-linen));
  box-shadow:var(--fc-raised);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  transition:transform .25s var(--fc-ease),box-shadow .25s,border-color .25s;
}
.fc__tile:hover{transform:translateY(-4px);border-color:var(--fc-hair);
  box-shadow:7px 12px 26px rgba(148,124,100,.32),-5px -5px 14px rgba(255,255,255,.95)}
.fc__tile:active{transform:scale(.97);box-shadow:var(--fc-inset)}
.fc__ring{ /* pressed-in circle holding the photo */
  width:92px;height:92px;border-radius:50%;padding:6px;background:var(--fc-linen);box-shadow:var(--fc-inset);
  position:relative;
}
.fc__ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 25%;display:block;
  box-shadow:0 0 0 1.5px rgba(201,162,91,.55)}
.fc__tile b{font-weight:600;font-size:1.02rem;line-height:1.25}
.fc__hint{font-size:.84rem;color:var(--fc-text);line-height:1.35;margin-top:-6px}

/* step 2: recommendation + places */
.fc__reco{
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border-radius:20px;padding:16px 20px;margin-bottom:18px;
  background:var(--fc-linen);box-shadow:var(--fc-inset);
}
.fc__reco-txt{flex:1 1 320px}
.fc__reco-txt small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8A6A2E;margin-bottom:3px}
.fc__reco-txt strong{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:600}
.fc__reco-txt p{font-size:.94rem;color:var(--fc-text);line-height:1.5;margin-top:3px}
.fc__switch{
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;color:var(--fc-plum);
  background:transparent;border:1.5px solid rgba(72,44,91,.35);border-radius:99px;padding:9px 16px;
  transition:background .2s,border-color .2s;white-space:nowrap;
}
.fc__switch:hover{background:rgba(72,44,91,.07);border-color:var(--fc-plum)}

.fc__places{display:grid;gap:12px}
.fc__place{
  display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;
  border-radius:20px;padding:16px 20px;border:1px solid var(--fc-hair);
  background:linear-gradient(160deg,#FFFDFA,var(--fc-linen));box-shadow:var(--fc-raised);
  animation:fc-step .5s var(--fc-ease) both;
}
.fc__place:nth-child(2){animation-delay:.06s}.fc__place:nth-child(3){animation-delay:.12s}.fc__place:nth-child(4){animation-delay:.18s}
.fc__place--main{border-color:rgba(201,162,91,.7);box-shadow:var(--fc-raised),0 0 0 4px rgba(230,184,92,.14)}
.fc__place h3{font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;font-weight:600;line-height:1.2;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fc__tag{font-family:'Outfit',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8A6A2E;background:rgba(201,162,91,.16);border-radius:99px;padding:3px 10px}
.fc__tag--today{color:#fff;background:linear-gradient(160deg,#D8B06A,#C9A25B)}
.fc__place p{grid-column:1;font-size:.92rem;color:var(--fc-text);line-height:1.45}
.fc__price{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;font-weight:600;color:var(--fc-brown);text-align:right;line-height:1}
.fc__price small{display:block;font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:500;color:var(--fc-text);margin-top:4px;letter-spacing:.02em}
.fc__go{
  grid-column:2;grid-row:2;justify-self:end;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  font-weight:600;font-size:.96rem;color:#fff;text-decoration:none;
  padding:12px 22px;border-radius:99px;
  background:linear-gradient(160deg,#5A3A74 0%,var(--fc-plum) 55%,#3A2349 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 2px 4px rgba(53,34,75,.18),0 12px 24px -12px rgba(53,34,75,.55);
  transition:transform .2s var(--fc-ease),box-shadow .25s;
}
.fc__go:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 4px 8px rgba(53,34,75,.2),0 20px 34px -14px rgba(53,34,75,.6)}
.fc__go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc__go--call{background:#fff;color:var(--fc-plum);border:1.5px solid var(--fc-plum);box-shadow:none}
.fc__go--call:hover{background:rgba(72,44,91,.06);box-shadow:none}

.fc__tip{
  display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:13px 18px;border-radius:16px;
  background:rgba(201,162,91,.12);border:1px dashed rgba(201,162,91,.55);font-size:.9rem;color:var(--fc-text);line-height:1.5;
}
.fc__tip svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px;stroke:var(--fc-honey);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fc__tip b{color:var(--fc-brown);font-weight:600}

.fc__foot{display:flex;justify-content:center;gap:6px 22px;flex-wrap:wrap;margin-top:22px;font-size:.92rem;color:var(--fc-text);text-align:center}
.fc__foot a,.fc__foot button{
  font:inherit;color:var(--fc-plum);font-weight:600;background:none;border:0;padding:4px 2px;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(72,44,91,.35);text-underline-offset:4px;
}
.fc__foot a:hover,.fc__foot button:hover{text-decoration-color:var(--fc-plum)}

/* the teaser line under the hero buttons */
.hero__ctas + .fc-teaser,.fc-teaser{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:.9rem;font-weight:500;letter-spacing:.01em;color:rgba(255,248,238,.92);
}
.fc-teaser i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--fc-gold,#E6B85C);opacity:.9}

@media (max-width:760px){
  .fc-teaser{display:none !important}
  .fc{padding:0;align-items:flex-end}
  .fc__card{width:100%;max-height:94dvh;border-radius:28px 28px 0 0;animation-name:fc-sheet}
  .fc__top{grid-template-columns:84px 1fr 84px;padding:12px 10px 4px}
  .fc__stage{padding:2px 18px calc(26px + env(safe-area-inset-bottom,0px))}
  .fc__tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .fc__tile{padding:14px 8px 13px;border-radius:20px}
  .fc__ring{width:78px;height:78px}
  .fc__tile b{font-size:.96rem}
  .fc__hint{display:none}
  .fc__place{grid-template-columns:1fr;padding:15px 16px}
  .fc__price{grid-column:1;grid-row:auto;text-align:left;order:2;display:flex;align-items:baseline;gap:8px}
  .fc__price small{display:inline;margin:0}
  .fc__place p{order:3}
  .fc__go{grid-column:1;grid-row:auto;order:4;justify-self:stretch;margin-top:6px;padding:14px 20px}
  .fc__reco{padding:12px 16px;gap:8px;margin-bottom:14px}
  .fc__reco-txt{flex-basis:100%}
  .fc__reco-txt strong{font-size:1.15rem}
  .fc__reco-txt p{display:none}
  .fc__switch{padding:7px 14px;font-size:.84rem}
  .fc__sub{margin-bottom:16px}
}
@keyframes fc-sheet{from{transform:translateY(100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .fc__scrim,.fc__card,.fc__step,.fc__place{animation:none}
  .fc__tile,.fc__go{transition:none}
}