/* ═══════════════════════════════════════════════════════════════════════
   FIDA — the enquiry pop-up
   Pairs with js/fida-cta.js. Loadable on ANY page, so it defines its own
   colours rather than assuming main.css or shop.css is present — the values
   are hers, just not borrowed through a variable that may not exist here.

   It sits on :root variables where they DO exist, with her hex as the
   fallback, so a page that has the tokens uses them and a page that does not
   still looks right.
   ═══════════════════════════════════════════════════════════════════════ */

.fc-wrap{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  padding:20px;
}
.fc-wrap[hidden]{display:none}

.fc-scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.72);
  opacity:0;transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.fc-wrap.is-open .fc-scrim{opacity:1}

.fc-box{
  position:relative;z-index:1;
  width:100%;max-width:430px;
  background:var(--ink,#000);
  color:var(--white,#fff);
  border:1px solid rgba(221,210,240,.22);
  border-radius:6px;
  padding:30px 28px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  /* it arrives rather than appears — 8px is enough to read as a movement
     without becoming an animation anyone has to wait for */
  opacity:0;transform:translateY(8px) scale(.99);
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
  max-height:calc(100dvh - 40px);overflow-y:auto;
}
.fc-wrap.is-open .fc-box{opacity:1;transform:none}

.fc-x{
  position:absolute;top:10px;right:12px;
  width:32px;height:32px;border:0;background:none;cursor:pointer;
  font:400 calc(24px * var(--fs))/1 system-ui,sans-serif;
  color:rgba(255,255,255,.45);
}
.fc-x:hover{color:var(--white,#fff)}

.fc-title{
  margin:0 0 8px;font:400 calc(26px * var(--fs))/1.25
    var(--ff-display,'Pujarelah',Georgia,serif);
  color:var(--white,#fff);
}
.fc-intro{
  margin:0 0 20px;font:300 calc(14px * var(--fs))/1.6
    var(--ff-sans,'Inter',-apple-system,'Segoe UI',sans-serif);
  color:rgba(255,255,255,.66);
}
.fc-intro[hidden]{display:none}

.fc-form{display:flex;flex-direction:column;gap:13px}
/* An author display rule BEATS the browser's [hidden]{display:none}, so a
   flex form stayed on screen after it was hidden — the enquiry sent, the
   thank-you appeared, and the filled-in fields and a stuck "Sending…" button
   sat there underneath it looking broken. Every element this file hides needs
   its own rule; the other three already had one. */
.fc-form[hidden]{display:none}
.fc-f{display:flex;flex-direction:column;gap:6px}
.fc-l{
  font:500 calc(10px * var(--fs))/1 var(--ff-sans,'Inter',sans-serif);
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.fc-f input,.fc-f textarea{
  width:100%;box-sizing:border-box;
  background:var(--field,#d9d9d9);
  border:0;border-radius:3px;
  padding:11px 12px;
  /* 16px so iOS does not zoom the page when the field is focused */
  font:300 calc(16px * var(--fs))/1.4 var(--ff-sans,'Inter',sans-serif);
  color:var(--ink,#000);
}
.fc-f textarea{min-height:96px;resize:vertical}
.fc-f input:focus,.fc-f textarea:focus{
  outline:2px solid var(--lilac,#ddd2f0);outline-offset:2px;
}

.fc-send{
  margin-top:5px;padding:13px 22px;
  border:0;border-radius:3px;cursor:pointer;
  background:var(--lilac,#ddd2f0);color:var(--ink,#000);
  font:600 calc(15px * var(--fs))/1 var(--ff-sans,'Inter',sans-serif);
  transition:opacity .16s ease;
}
.fc-send:hover{opacity:.88}
.fc-send[disabled]{opacity:.5;cursor:default}

.fc-msg{
  margin:14px 0 0;padding:11px 13px;border-radius:3px;
  font:400 calc(13px * var(--fs))/1.55 var(--ff-sans,'Inter',sans-serif);
}
.fc-msg[hidden]{display:none}
.fc-msg.is-ok {background:rgba(127,209,163,.12);color:#9fdcbb}
.fc-msg.is-bad{background:rgba(240,160,160,.12);color:#f0b6b6}

@media (max-width:480px){
  .fc-box{padding:26px 20px 22px;max-width:none}
  .fc-title{font-size:23px}
}

@media (prefers-reduced-motion:reduce){
  .fc-scrim,.fc-box{transition:none}
}