/* ==========================================================================
   FABRIQSTAR BOOKING WIDGET — premium editorial design
   Uses the same design tokens as the main theme/plugin (--ink, --gold, etc.)
   when present, with sensible fallbacks so this plugin also looks right
   standalone.
   ========================================================================== */
.fs-booking{
  --fs-ink: var(--ink, #1B1512);
  --fs-ink-soft: var(--ink-soft, #4a4038);
  --fs-gold: var(--gold, #A9782F);
  --fs-gold-deep: var(--gold-deep, #7C591F);
  --fs-gold-light: var(--gold-light, #D9B770);
  --fs-paper: var(--paper, #FBF7F0);
  --fs-paper-dim: var(--paper-dim, #F3EFE7);
  --fs-sand-line: var(--sand-line, #E9E1D3);
  --fs-emerald: var(--emerald, #1F3D31);
  --fs-wine: var(--wine, #6B1F2A);
  --fs-font-display: var(--font-display, Georgia, 'Times New Roman', serif);
  --fs-font-body: var(--font-body, Arial, sans-serif);

  font-family: var(--fs-font-body);
  color: var(--fs-ink);
  max-width: 1140px;
  margin-inline: auto;
}

/* ---- Intro ---- */
.fs-booking__intro{ text-align:center; margin-bottom:2.2rem; }
.fs-booking__eyebrow{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fs-gold-deep); font-weight:700; }
.fs-booking__heading{ font-family:var(--fs-font-display); font-size:clamp(2rem,3.4vw,3rem); margin-top:.35em; color:var(--fs-ink); line-height:1.1; }
.fs-booking__desc{ margin-top:.7em; color:var(--fs-ink-soft); max-width:52ch; margin-inline:auto; line-height:1.75; font-size:.98rem; }

/* ---- Decorative thread divider (self-contained, matches main site motif) ---- */
.fs-booking .thread{ display:flex; align-items:center; justify-content:center; gap:.8em; max-width:220px; margin:0 auto 1.6rem; }
.fs-booking .thread::before, .fs-booking .thread::after{ content:''; flex:1; height:1px; background:var(--fs-sand-line); }
.fs-booking .thread .diamond{ width:6px; height:6px; background:var(--fs-gold); transform:rotate(45deg); flex:none; }

/* ---- Step indicator ---- */
.fs-booking__steps{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-bottom:2.4rem; }
.fs-booking__step{ display:flex; align-items:center; gap:.7em; opacity:.4; transition:opacity .3s; }
.fs-booking__step.is-active{ opacity:1; }
.fs-booking__step-num{
  width:34px; height:34px; border:1px solid var(--fs-gold); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--fs-font-display); font-size:.9rem; color:var(--fs-gold-deep); flex:none; transition:background .3s, color .3s;
}
.fs-booking__step.is-active .fs-booking__step-num{ background:var(--fs-gold); color:#fff; }
.fs-booking__step-label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; white-space:nowrap; }
.fs-booking__step-line{ width:60px; height:1px; background:var(--fs-sand-line); position:relative; }
.fs-booking__step-line::after{
  content:''; position:absolute; inset:0; background:var(--fs-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease, ease);
}
.fs-booking__step-line.is-active::after{ transform:scaleX(1); }

/* ---- Panel wrapper ---- */
.fs-booking__panel{
  background:var(--fs-paper); border:1px solid var(--fs-sand-line); padding:clamp(1.6rem,4vw,3rem);
  box-shadow:0 24px 60px -30px rgba(27,21,18,.18);
}

.fs-booking__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:start; }

/* ---- Calendar ---- */
.fs-cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.fs-cal-month-label{ font-family:var(--fs-font-display); font-style:italic; font-size:1.3rem; }
.fs-cal-nav{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--fs-sand-line); background:none; cursor:pointer;
  font-size:1.05rem; color:var(--fs-ink); transition:border-color .2s, background .2s, transform .2s;
}
.fs-cal-nav:hover{ border-color:var(--fs-gold); background:var(--fs-paper-dim); transform:scale(1.06); }
.fs-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.68rem; color:var(--fs-ink-soft); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.7em; font-weight:600; }
.fs-cal-days{ display:grid; grid-template-columns:repeat(7,1fr); column-gap:2px; row-gap:8px; }
.fs-cal-day{
  width:38px; height:38px; max-width:38px; max-height:38px; margin-inline:auto;
  border:1px solid transparent; border-radius:50%; background:none; cursor:pointer;
  font-family:var(--fs-font-body); font-size:.8rem; color:var(--fs-ink); transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.fs-cal-day:hover:not(.is-disabled):not(.is-empty){ border-color:var(--fs-gold); transform:scale(1.08); }
.fs-cal-day.is-empty{ background:none; cursor:default; }
.fs-cal-day.is-disabled{ background:none; color:#d8d1c5; cursor:not-allowed; }
.fs-cal-day.is-selected{
  background:var(--fs-gold); border-color:var(--fs-gold); color:#fff; font-weight:700;
  box-shadow:0 8px 18px -6px rgba(169,120,47,.55);
}
.fs-cal-legend{ margin-top:1.2rem; font-size:.74rem; color:var(--fs-ink-soft); display:flex; align-items:center; gap:.4em; }
.fs-cal-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--fs-gold); margin-right:.3em; }
.fs-cal-dot.is-off{ background:#d8d1c5; }

/* ---- Duration + price ---- */
.fs-booking__block{ margin-bottom:2rem; }
.fs-booking__label{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fs-ink-soft); margin-bottom:.8em; }
.fs-duration-stepper{
  display:inline-flex; align-items:center; gap:1.4em; border:1px solid var(--fs-sand-line); padding:.5em 1.1em; background:var(--fs-paper);
}
.fs-duration-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--fs-sand-line); background:var(--fs-paper); cursor:pointer;
  font-size:1.2rem; line-height:1; color:var(--fs-ink); transition:border-color .2s, background .2s, transform .15s;
}
.fs-duration-btn:hover{ border-color:var(--fs-gold); background:var(--fs-gold); color:#fff; transform:scale(1.05); }
.fs-duration-value{ font-family:var(--fs-font-display); font-size:1.15rem; min-width:5.5em; text-align:center; display:inline-block; }
.fs-booking__price-panel{
  margin-top:1.1rem; display:flex; align-items:baseline; justify-content:space-between;
  padding:1em 1.3em; background:var(--fs-paper-dim); border-left:3px solid var(--fs-gold);
}
.fs-booking__price-label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fs-ink-soft); font-weight:700; }
.fs-booking__price{ font-family:var(--fs-font-display); font-size:2rem; color:var(--fs-gold-deep); }

/* ---- Time slots ---- */
.fs-slots-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.fs-slot{
  border:1px solid var(--fs-sand-line); background:var(--fs-paper); padding:.8em .5em; font-size:.82rem;
  color:var(--fs-ink); cursor:pointer; transition:border-color .2s, background .2s, color .2s, transform .15s;
}
.fs-slot:hover{ border-color:var(--fs-gold); transform:translateY(-2px); }
.fs-slot.is-selected{ background:var(--fs-gold); border-color:var(--fs-gold); color:#fff; font-weight:700; box-shadow:0 8px 18px -8px rgba(169,120,47,.55); }

/* ---- Form ---- */
.fs-booking__form.fs-booking__panel{ margin-top:2.5rem; max-width:680px; margin-inline:auto; }
.fs-booking__summary{
  text-align:center; font-family:var(--fs-font-display); font-size:1.15rem; margin-bottom:2rem;
  padding:1.2em; background:var(--fs-paper-dim); border:1px solid var(--fs-sand-line);
}
.fs-booking__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:0; }
.fs-booking__field{ display:flex; flex-direction:column; gap:.5em; margin-bottom:1.2rem; }
.fs-booking__field label{ font-size:.76rem; font-weight:700; letter-spacing:.03em; }
.fs-booking__field label span{ color:var(--fs-wine); }
.fs-booking__field input,
.fs-booking__field select,
.fs-booking__field textarea{
  border:1px solid var(--fs-sand-line); background:var(--fs-paper); padding:.85em .95em; font-size:.92rem;
  font-family:var(--fs-font-body); box-sizing:border-box; transition:border-color .2s, box-shadow .2s;
}
.fs-booking__field input:focus, .fs-booking__field select:focus, .fs-booking__field textarea:focus{
  border-color:var(--fs-gold-deep); outline:none; box-shadow:0 0 0 3px rgba(169,120,47,.12);
}
.fs-booking__submit{
  width:100%; margin-top:.6rem; background:var(--fs-ink); color:var(--fs-paper); border:1px solid var(--fs-ink);
  padding:1.1em 1.6em; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; cursor:pointer;
  transition:background .3s, border-color .3s;
}
.fs-booking__submit:hover{ background:var(--fs-gold-deep); border-color:var(--fs-gold-deep); }
.fs-booking__submit:disabled{ opacity:.6; cursor:not-allowed; }
.fs-booking__status{ margin-top:1.1em; text-align:center; font-size:.85rem; min-height:1.2em; }
.fs-booking__status.is-success{ color:var(--fs-emerald); font-weight:600; }
.fs-booking__status.is-error{ color:var(--fs-wine); font-weight:600; }

@media (max-width:820px){
  .fs-booking__grid{ grid-template-columns:1fr; }
  .fs-booking__row{ grid-template-columns:1fr; }
  .fs-slots-grid{ grid-template-columns:repeat(2,1fr); }
  .fs-booking__steps{ gap:.6rem; }
  .fs-booking__step-label{ display:none; }
  .fs-booking__step-line{ width:34px; }
}