/* Frex Enquiry Form — front-end styles. Scoped under .fdf. Brand-matched to
   frex.digital: warm paper, orange→crimson accent, Plus Jakarta + Fraunces. */

.fdf-root { --fdf-paper:#F6F4F1; --fdf-card:#fff; --fdf-ink:#14110E; --fdf-ink-soft:#4a443d;
  --fdf-muted:#8a817a; --fdf-line:rgba(20,17,14,.12); --fdf-line-soft:rgba(20,17,14,.07);
  --fdf-orange:#FE9800; --fdf-red:#CB0000; --fdf-grad:linear-gradient(110deg,#FE9800,#FF6A00 45%,#CB0000);
  --fdf-r:16px; --fdf-r-lg:22px; --fdf-ease:cubic-bezier(.16,1,.3,1);
  --fdf-sans:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fdf-serif:"Fraunces",Georgia,serif; --fdf-mono:"JetBrains Mono",ui-monospace,monospace;
  font-family:var(--fdf-sans); color:var(--fdf-ink); -webkit-font-smoothing:antialiased; }
.fdf-root *,.fdf-root *::before,.fdf-root *::after { box-sizing:border-box; }

.fdf { max-width:680px; margin:0 auto; background:var(--fdf-card); border:1px solid var(--fdf-line);
  border-radius:var(--fdf-r-lg); padding:clamp(1.4rem,4vw,2.6rem); box-shadow:0 40px 90px -60px rgba(20,17,14,.5); }

/* top bar + progress */
/* The header is chrome, not content: "frex.digital" is a Latin wordmark and the
   language switcher is a fixed control, so neither should flip with the form's
   text direction — switching to فارسی threw the logo across the page. Pinning
   the bar to LTR keeps it identical in all three languages. */
.fdf-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; direction:ltr; }
.fdf-brand { font-family:var(--fdf-serif); font-weight:600; font-size:1.15rem; letter-spacing:-.02em; direction:ltr; unicode-bidi:isolate; }
.fdf-brand span { background:var(--fdf-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fdf-langs { display:flex; gap:.25rem; }
.fdf-lang { font-family:var(--fdf-mono); font-size:.7rem; letter-spacing:.04em; padding:.35rem .6rem; border:1px solid var(--fdf-line);
  background:transparent; color:var(--fdf-muted); border-radius:999px; cursor:pointer; transition:all .3s var(--fdf-ease); }
.fdf-lang.is-on { color:#fff; background:var(--fdf-ink); border-color:var(--fdf-ink); }
.fdf-lang:hover { color:var(--fdf-ink); }

.fdf-progress { display:flex; align-items:center; gap:.9rem; margin-bottom:1.8rem; }
.fdf-progress__bar { flex:1; height:5px; border-radius:5px; background:var(--fdf-line-soft); overflow:hidden; }
.fdf-progress__bar i { display:block; height:100%; background:var(--fdf-grad); border-radius:5px; transition:width .5s var(--fdf-ease); }
.fdf-progress__label { font-family:var(--fdf-mono); font-size:.68rem; letter-spacing:.08em; color:var(--fdf-muted); white-space:nowrap; }

/* typography */
.fdf-h1 { font-family:var(--fdf-serif); font-weight:600; font-size:clamp(1.7rem,4.5vw,2.5rem); line-height:1.1; letter-spacing:-.02em; margin:.4rem 0; }
.fdf-h2 { font-weight:700; font-size:clamp(1.25rem,3vw,1.6rem); letter-spacing:-.02em; margin:0; }
.fdf-lead { font-size:1.04rem; line-height:1.6; color:var(--fdf-ink-soft); margin:.6rem 0 0; }
.fdf-help { font-size:.9rem; color:var(--fdf-muted); line-height:1.5; margin:.5rem 0 0; }
.fdf-badge { display:inline-block; font-family:var(--fdf-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fdf-red); background:rgba(254,152,0,.1); border:1px solid rgba(254,152,0,.3); border-radius:999px; padding:.4rem .9rem; }

/* welcome */
.fdf-welcome { text-align:center; padding:1.5rem 0 1rem; }
.fdf-welcome .fdf-lead { max-width:34ch; margin-inline:auto; }
.fdf-welcome .fdf-btn { margin-top:1.8rem; }

/* step */
.fdf-step__head { display:flex; align-items:center; gap:.8rem; margin-bottom:.3rem; }
.fdf-opt { font-family:var(--fdf-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fdf-muted); border:1px solid var(--fdf-line); border-radius:999px; padding:.2rem .55rem; }
.fdf-fields { margin-top:1.6rem; display:flex; flex-direction:column; gap:1.4rem; }

/* field */
.fdf-f { display:flex; flex-direction:column; }
.fdf-label { font-weight:600; font-size:.98rem; margin-bottom:.5rem; }
.fdf-req { color:var(--fdf-red); }
.fdf-hint { font-size:.82rem; color:var(--fdf-muted); margin-bottom:.55rem; line-height:1.45; }
.fdf-note { font-size:.85rem; color:var(--fdf-ink-soft); background:var(--fdf-paper); border:1px solid var(--fdf-line-soft); border-radius:10px; padding:.6rem .8rem; margin-bottom:.7rem; }
.fdf-err { color:var(--fdf-red); font-size:.82rem; margin-top:.4rem; min-height:0; }
.fdf-f.is-err .fdf-input,.fdf-f.is-err .fdf-choices,.fdf-f.is-err .fdf-cards { border-color:var(--fdf-red); }

.fdf-input { width:100%; font-family:inherit; font-size:1rem; color:var(--fdf-ink); background:var(--fdf-paper);
  border:1px solid var(--fdf-line); border-radius:12px; padding:.85rem 1rem; transition:border-color .25s,box-shadow .25s; }
.fdf-input:focus { outline:none; border-color:var(--fdf-orange); box-shadow:0 0 0 3px rgba(254,152,0,.16); background:#fff; }
textarea.fdf-input { resize:vertical; min-height:96px; }
select.fdf-input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a817a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }
.fdf-rtl select.fdf-input { background-position:left 1rem center; padding-right:1rem; padding-left:2.4rem; }

/* choice pills (radio/checkbox) */
.fdf-choices { display:flex; flex-wrap:wrap; gap:.6rem; }
.fdf-choice { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .95rem; border:1px solid var(--fdf-line); border-radius:999px; cursor:pointer; transition:all .25s var(--fdf-ease); font-size:.95rem; background:var(--fdf-card); }
.fdf-choice:hover { border-color:var(--fdf-ink); }
.fdf-choice input { position:absolute; opacity:0; width:0; height:0; }
.fdf-choice.is-on { background:var(--fdf-ink); color:#fff; border-color:var(--fdf-ink); }

/* cards (services / ambition) */
.fdf-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; }
.fdf-card-opt { position:relative; text-align:start; display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.15rem; border:1px solid var(--fdf-line); border-radius:var(--fdf-r); background:var(--fdf-card); cursor:pointer; transition:all .3s var(--fdf-ease); font-family:inherit; }
.fdf-card-opt:hover { border-color:var(--fdf-ink); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(20,17,14,.5); }
.fdf-card-opt__ico { width:40px; height:40px; border-radius:11px; background:var(--fdf-paper); display:flex; align-items:center; justify-content:center; color:var(--fdf-ink); margin-bottom:.3rem; transition:all .3s; }
.fdf-card-opt__ico svg { width:20px; height:20px; }
.fdf-card-opt__t { font-weight:600; font-size:1rem; }
.fdf-card-opt__d { font-size:.85rem; color:var(--fdf-muted); line-height:1.45; }
.fdf-card-opt__check { position:absolute; top:.9rem; inset-inline-end:.9rem; width:20px; height:20px; border:1.5px solid var(--fdf-line); border-radius:50%; transition:all .25s; }
.fdf-card-opt.is-on { border-color:var(--fdf-orange); box-shadow:0 0 0 2px rgba(254,152,0,.25); }

/* ---- exclusive options ("all of it, or none of it") ---- */
/* .fdf-cards is an auto-fit grid, so the rule must span every column or it
   lands as a stray half-width cell mid-row. */
.fdf-cards__split { grid-column:1/-1; display:flex; align-items:center; gap:.75rem; margin:.35rem 0 .1rem; }
.fdf-cards__split::before,.fdf-cards__split::after { content:""; flex:1; height:1px; background:var(--fdf-line); }
.fdf-cards__split span { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fdf-muted,#8a817a); }
.fdf-card-opt--solo { grid-column:1/-1; }
/* Dimmed, never hidden: an option that vanishes reads as a bug, one that fades
   reads as "not while that other thing is chosen". Still focusable, so keyboard
   users can select it — which is what releases the lock. */
.fdf-card-opt.is-locked { opacity:.4; filter:saturate(.25); }
.fdf-card-opt.is-locked:hover { transform:none; border-color:var(--fdf-line); box-shadow:none; }
.fdf-excl-note { margin:.5rem 0 0; font-size:.8rem; color:var(--fdf-muted,#8a817a); }
.fdf-card-opt.is-on .fdf-card-opt__ico { background:var(--fdf-grad); color:#fff; }
.fdf-card-opt.is-on .fdf-card-opt__check { background:var(--fdf-grad); border-color:transparent; }
.fdf-card-opt.is-on .fdf-card-opt__check::after { content:""; position:absolute; inset:0; background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* toggle / consent */
.fdf-toggle { display:flex; align-items:flex-start; gap:.7rem; cursor:pointer; font-size:.95rem; line-height:1.5; }
.fdf-toggle input { position:absolute; opacity:0; width:0; height:0; }
.fdf-toggle__box { flex:none; width:22px; height:22px; border:1.5px solid var(--fdf-line); border-radius:7px; margin-top:1px; transition:all .2s; position:relative; }
.fdf-toggle.is-on .fdf-toggle__box { background:var(--fdf-grad); border-color:transparent; }
.fdf-toggle.is-on .fdf-toggle__box::after { content:""; position:absolute; inset:0; background:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* collapsible group */
.fdf-group { border:1px solid var(--fdf-line); border-radius:var(--fdf-r); overflow:hidden; }
.fdf-group__sum { cursor:pointer; padding:.9rem 1.1rem; font-weight:600; list-style:none; display:flex; align-items:center; gap:.5rem; background:var(--fdf-paper); }
.fdf-group__sum::-webkit-details-marker { display:none; }
.fdf-group__sum::before { content:"+"; color:var(--fdf-red); font-weight:700; }
.fdf-group[open] .fdf-group__sum::before { content:"–"; }
.fdf-group__body { padding:1.1rem; display:flex; flex-direction:column; gap:1.1rem; }

/* repeater / chips */
.fdf-rep { display:flex; flex-direction:column; gap:.5rem; }
.fdf-rep__row { display:flex; gap:.5rem; }
.fdf-rep__rm,.fdf-chip button { border:none; background:var(--fdf-line-soft); color:var(--fdf-ink); width:34px; border-radius:10px; cursor:pointer; font-size:1.1rem; }
.fdf-rep__add { align-self:flex-start; border:1px dashed var(--fdf-line); background:transparent; color:var(--fdf-ink-soft); padding:.5rem .9rem; border-radius:10px; cursor:pointer; font-family:inherit; font-size:.9rem; }
.fdf-chips { display:flex; flex-wrap:wrap; gap:.4rem; border:1px solid var(--fdf-line); border-radius:12px; padding:.5rem; background:var(--fdf-paper); }
.fdf-chips .fdf-input { flex:1; min-width:120px; border:none; background:transparent; padding:.35rem .5rem; }
.fdf-chip { display:inline-flex; align-items:center; gap:.35rem; background:var(--fdf-ink); color:#fff; border-radius:999px; padding:.25rem .3rem .25rem .7rem; font-size:.85rem; }
.fdf-chip button { width:20px; height:20px; background:rgba(255,255,255,.2); color:#fff; font-size:.9rem; line-height:1; }

/* range */
.fdf-range-wrap,.fdf-dual { display:flex; align-items:center; gap:1rem; }
.fdf-dual__tracks { position:relative; flex:1; display:grid; }
.fdf-dual__tracks .fdf-range { grid-area:1/1; }
.fdf-range { flex:1; accent-color:var(--fdf-orange); height:4px; }
.fdf-range__val { font-family:var(--fdf-mono); font-size:.9rem; min-width:56px; text-align:end; color:var(--fdf-ink); }

/* tel */
.fdf-tel { display:flex; align-items:stretch; border:1px solid var(--fdf-line); border-radius:12px; overflow:hidden; background:var(--fdf-paper); }
.fdf-tel:focus-within { border-color:var(--fdf-orange); box-shadow:0 0 0 3px rgba(254,152,0,.16); }
.fdf-tel__wa { display:flex; align-items:center; padding:0 .8rem; color:#25D366; background:rgba(37,211,102,.08); }
.fdf-tel__wa svg { width:20px; height:20px; }
.fdf-tel .fdf-input { border:none; box-shadow:none; background:transparent; flex:1 1 auto; min-width:0; direction:ltr; }
.fdf-rtl .fdf-tel .fdf-input { text-align:right; }

/* tel · country-code picker (custom — native selects can't render flag images,
   and Windows shows emoji flags as bare letters) */
.fdf-tel { position:relative; overflow:visible; }
.fdf-tel__wa { border-start-start-radius:11px; border-end-start-radius:11px; }
.fdf-cc__btn { display:flex; align-items:center; gap:.5rem; padding:0 .85rem; border:none; background:transparent; cursor:pointer;
  font:inherit; color:var(--fdf-ink); border-inline-end:1px solid var(--fdf-line); white-space:nowrap; }
.fdf-cc__btn:hover { background:rgba(0,0,0,.035); }
.fdf-cc__flag { width:22px; height:16px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.08); flex:0 0 auto; }
.fdf-cc__code { font-family:var(--fdf-mono); font-size:.92rem; direction:ltr; unicode-bidi:embed; }
.fdf-cc__caret { display:flex; width:13px; height:13px; opacity:.5; }
.fdf-cc__caret svg { width:13px; height:13px; }
.fdf-cc__list { position:absolute; top:calc(100% + 6px); inset-inline-start:0; z-index:60; width:min(320px, 92vw); max-height:280px;
  overflow:auto; background:var(--fdf-paper); border:1px solid var(--fdf-line); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.16); padding:.35rem; }
.fdf-cc__item { display:flex; align-items:center; gap:.65rem; width:100%; padding:.55rem .7rem; border:none; background:transparent;
  border-radius:9px; cursor:pointer; font:inherit; font-size:.94rem; color:var(--fdf-ink); text-align:start; }
.fdf-cc__item:hover, .fdf-cc__item.is-on { background:rgba(254,152,0,.10); }
.fdf-cc__sep { height:1px; background:var(--fdf-line); opacity:.6; margin:.35rem .55rem; }
.fdf-cc__name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fdf-cc__item .fdf-cc__code { color:var(--fdf-muted); }

/* file */
.fdf-file__list { margin-top:.6rem; display:flex; flex-direction:column; gap:.4rem; }
.fdf-file__item { display:flex; justify-content:space-between; align-items:center; background:var(--fdf-paper); border:1px solid var(--fdf-line-soft); border-radius:10px; padding:.5rem .8rem; font-size:.88rem; }
.fdf-file__item button { border:none; background:none; cursor:pointer; font-size:1.1rem; color:var(--fdf-muted); }

/* nav + buttons */
.fdf-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; }
.fdf-nav .fdf-btn--primary { margin-inline-start:auto; }
.fdf-btn { font-family:inherit; font-weight:600; font-size:.98rem; border-radius:999px; padding:.85rem 1.6rem; cursor:pointer; border:1px solid transparent; transition:all .3s var(--fdf-ease); display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.fdf-btn--primary { background:var(--fdf-grad); color:#fff; box-shadow:0 14px 34px -16px rgba(203,0,0,.5); }
.fdf-btn--primary:hover { transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(203,0,0,.55); }
.fdf-btn--primary:disabled { opacity:.6; cursor:default; transform:none; }
.fdf-btn--ghost { background:transparent; border-color:var(--fdf-line); color:var(--fdf-ink); }
.fdf-btn--ghost:hover { border-color:var(--fdf-ink); }
.fdf-btn--lg { padding:1rem 2.2rem; font-size:1.05rem; }

/* thank-you */
.fdf-thanks { text-align:center; padding:2rem 0; }
.fdf-thanks__mark { width:72px; height:72px; margin:0 auto 1.2rem; border-radius:50%; background:var(--fdf-grad); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 44px -18px rgba(203,0,0,.5); }
.fdf-thanks__mark svg { width:34px; height:34px; }
.fdf-thanks__svc { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1.4rem 0; }
.fdf-pill { font-size:.85rem; background:var(--fdf-paper); border:1px solid var(--fdf-line); border-radius:999px; padding:.4rem .9rem; }
.fdf-thanks .fdf-btn { margin-top:1rem; }

/* resume */
.fdf-resume { text-align:center; }

/* post-submit deep-dive offer */
.fdf-enrich-offer { margin:1.8rem auto 0.6rem; max-width:420px; padding:1.3rem 1.4rem; background:var(--fdf-paper); border:1px dashed var(--fdf-line); border-radius:var(--fdf-r); }
.fdf-enrich-offer .fdf-h2 { font-size:1.15rem; }
.fdf-enrich-offer .fdf-help { margin:.5rem 0 1rem; }

@media (max-width:520px){
  .fdf { padding:1.3rem; border-radius:18px; }
  .fdf-cards { grid-template-columns:1fr; }
  .fdf-nav { flex-direction:row; }
  .fdf-btn { padding:.8rem 1.2rem; }
  /* Duplicated from the pointer:coarse block below: narrow width is the proxy
     for "this is a phone" that also covers browsers that misreport the pointer. */
  .fdf-lang { min-height:44px; padding:.55rem .8rem; display:inline-flex; align-items:center; }
  .fdf-cc__item { min-height:44px; }
}

/* Real fingers, not cursors: 44px is the minimum a fingertip can hit reliably.
   Scoped to coarse pointers so the desktop pills keep their slim look. */
@media (pointer:coarse){
  .fdf-lang { min-height:44px; padding:.55rem .8rem; display:inline-flex; align-items:center; }
  .fdf-cc__item { min-height:44px; }
}

/* Small phones (320–380px) — found the hard way at 320px:
   1. brand + three language pills overflowed the top bar by 3px;
   2. the dial-code button left only 67px for typing the phone NUMBER — the one
      thing the field is for;
   3. the country list (anchored inline-start) ran 21px off the LEFT edge in RTL. */
@media (max-width:380px){
  .fdf-top { flex-wrap:wrap; row-gap:.5rem; }               /* pills drop to a second row instead of clipping */
  .fdf-tel__wa { padding:0 .55rem; }
  .fdf-cc__btn { padding:0 .5rem; gap:.35rem; }
  .fdf-cc__caret { display:none; }                          /* the flag already says "this opens" */
}
@media (max-width:480px){
  /* Physical centering beats logical anchoring here: the field sits centered in
     the card, so centering on it centers on the screen — in BOTH directions.
     inset-inline-start:0 anchored the 294px list to the field's start edge,
     which in RTL pushed it past the left edge of a 320px screen. */
  .fdf-cc__list { inset-inline-start:auto; inset-inline-end:auto; left:50%; right:auto;
    transform:translateX(-50%); width:min(320px, calc(100vw - 20px)); }
}