/* ==========================================================================
   EGYVACATIONS — TAILOR MADE — the five-step brief wizard
   assets/css/templates/tailor.css
   Loads on top of tokens -> base -> chrome -> components -> sections.
   ========================================================================== */
/* ---------- 1. HEADER ---------- */
.evf-head{padding:var(--sp-8) 0 var(--sp-7)}
.evf-headgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-9);align-items:center}
.evf-head h1{font-size:clamp(1.95rem,3.8vw,3rem);line-height:1.08}
.evf-head h1 .l1{display:block;font-weight:var(--fw-light);letter-spacing:var(--ls-heading)}
.evf-head h1 .l2{display:block;font-weight:var(--fw-bold);letter-spacing:var(--ls-display)}
.evf-head h1 em{font-style:normal;color:var(--accent)}
.evf-head .lede{margin-top:var(--sp-5);font-size:var(--fs-lede);font-weight:var(--fw-light);
  color:var(--text-secondary);max-width:54ch}
.evf-promise{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-6);
  border-top:1px solid var(--border-soft)}
.evf-promise li{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:var(--text-secondary)}
.evf-promise svg{width:17px;height:17px;flex:none;color:var(--ev-ocean)}
.evf-promise b{color:var(--text-heading);font-weight:var(--fw-bold)}
.evf-headmedia{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3}
.evf-headmedia img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .evf-headgrid{grid-template-columns:1fr;gap:var(--sp-6)}
  .evf-headmedia{aspect-ratio:16/9}
}

/* ---------- 2. LAYOUT ---------- */
.evf-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--sp-8);align-items:start;
  padding-bottom:var(--sp-10)}
@media(max-width:1040px){.evf-layout{grid-template-columns:1fr;gap:var(--sp-7)}}

/* ---------- 3. PROGRESS ---------- */
.evf-progress{display:flex;gap:6px;margin-bottom:var(--sp-6)}
.evf-progress li{flex:1;display:flex;flex-direction:column;gap:8px}
.evf-progress .bar{height:4px;border-radius:99px;background:var(--border-soft);
  transition:background var(--dur-base) var(--ease)}
.evf-progress li.is-done .bar,.evf-progress li.is-current .bar{background:var(--accent)}
.evf-progress .lbl{font-size:.66rem;font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-decorative);transition:color var(--dur-base) var(--ease)}
.evf-progress li.is-done .lbl{color:var(--text-muted)}
.evf-progress li.is-current .lbl{color:var(--text-heading)}
@media(max-width:620px){.evf-progress .lbl{display:none}}

/* ---------- 4. STEP PANEL ---------- */
.evf-panel{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-xl);
  padding:var(--sp-7);box-shadow:var(--shadow-1)}
.evf-step[hidden]{display:none}
.evf-stepnum{font-size:.66rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.evf-step h2{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:var(--fw-bold);margin-top:8px}
.evf-step .hint{margin-top:10px;font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-light)}
.evf-group{margin-top:var(--sp-6)}
.evf-group > .lbl{display:block;margin-bottom:12px;font-size:.68rem;font-weight:var(--fw-bold);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--text-muted)}
.evf-group > .lbl i{font-style:normal;color:#B3261E}
@media(max-width:620px){.evf-panel{padding:var(--sp-5)}}

/* ---------- 5. OPTION CARDS ---------- */
.evf-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.evf-opts--2{grid-template-columns:repeat(2,1fr)}
.evf-opts--4{grid-template-columns:repeat(4,1fr)}
.evf-opt{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
  border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.evf-opt:hover{border-color:var(--ev-sky)}
.evf-opt input{position:absolute;opacity:0;width:0;height:0}
.evf-opt:has(input:checked){border-color:var(--action);background:var(--surface-sunken)}
.evf-opt:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.evf-opt .flag{font-size:1.15rem;line-height:1;flex:none}
.evf-opt .ic{width:34px;height:34px;flex:none;border-radius:var(--r-md);background:var(--surface-sunken);
  display:grid;place-items:center;color:var(--ev-ocean);transition:all var(--dur-fast) var(--ease)}
.evf-opt .ic svg{width:17px;height:17px}
.evf-opt:has(input:checked) .ic{background:var(--action);color:#fff}
.evf-opt .t{min-width:0}
.evf-opt .t b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text-heading)}
.evf-opt .t span{display:block;font-size:.72rem;color:var(--text-muted);margin-top:2px}
.evf-opt .tick{margin-left:auto;width:20px;height:20px;flex:none;border-radius:50%;
  border:1.6px solid var(--border);display:grid;place-items:center;
  transition:all var(--dur-fast) var(--ease)}
.evf-opt .tick svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.evf-opt:has(input:checked) .tick{background:var(--action);border-color:var(--action)}
.evf-opt:has(input:checked) .tick svg{opacity:1}
@media(max-width:820px){.evf-opts,.evf-opts--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.evf-opts,.evf-opts--2,.evf-opts--4{grid-template-columns:1fr}}

/* ---------- 6. CHIPS ---------- */
.evf-chips{display:flex;flex-wrap:wrap;gap:9px}
.evf-chip{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 17px;cursor:pointer;
  border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-secondary);
  transition:all var(--dur-fast) var(--ease)}
.evf-chip:hover{border-color:var(--ev-sky);color:var(--text-heading)}
.evf-chip input{position:absolute;opacity:0;width:0;height:0}
.evf-chip:has(input:checked){background:var(--action);border-color:var(--action);color:#fff}
.evf-chip:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.evf-chip svg{width:13px;height:13px;opacity:0;width:0;transition:opacity var(--dur-fast) var(--ease)}
.evf-chip:has(input:checked) svg{opacity:1;width:13px}

/* ---------- 7. STEPPERS ---------- */
.evf-counts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.evf-count{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  border:1.5px solid var(--border);border-radius:var(--r-lg)}
.evf-count .t b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text-heading)}
.evf-count .t span{display:block;font-size:.72rem;color:var(--text-muted);margin-top:2px}
.evf-count .ctrl{display:flex;align-items:center;gap:4px}
.evf-count button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);
  display:grid;place-items:center;color:var(--text-heading);transition:all var(--dur-fast) var(--ease)}
.evf-count button:hover:not(:disabled){border-color:var(--action);background:var(--surface-sunken)}
.evf-count button:disabled{opacity:.35;cursor:not-allowed}
.evf-count button svg{width:14px;height:14px}
.evf-count output{min-width:30px;text-align:center;font-size:1.05rem;font-weight:var(--fw-bold);
  color:var(--text-heading)}
@media(max-width:520px){.evf-counts{grid-template-columns:1fr}}

/* ---------- 8. BUDGET SLIDER ---------- */
.evf-budget{padding:18px 20px;border:1.5px solid var(--border);border-radius:var(--r-lg)}
.evf-budget input[type=range]{width:100%;accent-color:var(--accent)}
.evf-budget__val{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.evf-budget__val b{font-size:1.5rem;font-weight:var(--fw-black);color:var(--text-heading);
  letter-spacing:var(--ls-heading)}
.evf-budget__val span{font-size:var(--fs-xs);color:var(--text-muted)}
.evf-budget__ends{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;
  color:var(--text-muted)}

/* ---------- 9. TEXT FIELDS ---------- */
.evf-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.evf-fields .full{grid-column:1/-1}
.evf-field{display:flex;flex-direction:column;gap:6px}
.evf-field label{font-size:.68rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.evf-field label i{font-style:normal;color:#B3261E}
.evf-input{height:50px;padding:0 15px;border:1.5px solid var(--control-border);border-radius:var(--r-md);
  background:var(--surface);font-weight:var(--fw-medium);width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
textarea.evf-input{height:auto;padding:13px 15px;resize:vertical;min-height:110px;line-height:1.65}
.evf-input:focus{outline:0;border-color:var(--control-border-focus);box-shadow:var(--control-focus-shadow)}
.evf-input::placeholder{color:var(--control-placeholder);font-weight:var(--fw-regular)}
.evf-input[aria-invalid="true"]{border-color:#B3261E}
.evf-err{font-size:var(--fs-xs);color:#B3261E;font-weight:var(--fw-medium)}
.evf-err[hidden]{display:none}
select.evf-input{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323272A' stroke-opacity='.45' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px}
@media(max-width:620px){.evf-fields{grid-template-columns:1fr}}

/* ---------- 10. STEP NAV ---------- */
.evf-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--border-soft)}
.evf-nav .left{display:flex;align-items:center;gap:12px}
.evf-back{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:var(--fw-semi);
  color:var(--text-secondary)}
.evf-back:hover{color:var(--text-heading)}
.evf-back svg{width:15px;height:15px}
.evf-back[hidden]{display:none}
.evf-skip{font-size:var(--fs-xs);color:var(--text-muted);text-decoration:underline;
  text-underline-offset:3px}
.evf-skip:hover{color:var(--text-heading)}
.evf-skip[hidden]{display:none}

/* ---------- 11. SUMMARY RAIL ---------- */
.evf-rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:var(--sp-5)}
.evf-summary{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-6);
  background:var(--surface);box-shadow:var(--shadow-2)}
.evf-summary h3{font-size:.68rem;font-weight:var(--fw-bold);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--text-muted)}
.evf-summary dl{margin-top:var(--sp-5);display:flex;flex-direction:column}
.evf-summary dl > div{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--border-soft)}
.evf-summary dl > div:last-child{border-bottom:0}
.evf-summary dt{font-size:var(--fs-xs);color:var(--text-muted);flex:none}
.evf-summary dd{font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-heading);text-align:right}
.evf-summary dd.is-empty{font-weight:var(--fw-regular);color:var(--text-decorative)}
.evf-summary .wa{margin-top:var(--sp-5)}
.evf-summary .wa p{font-size:var(--fs-xs);color:var(--text-secondary);margin-bottom:12px}

.evf-person{display:flex;align-items:center;gap:13px;padding:var(--sp-5);border-radius:var(--r-lg);
  background:var(--surface-sunken)}
.evf-person img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--surface)}
.evf-person b{display:block;font-size:var(--fs-sm);color:var(--text-heading)}
.evf-person span{display:block;font-size:.72rem;color:var(--text-muted);margin-top:2px}
@media(max-width:1040px){.evf-rail{position:static}}

/* ---------- 12. SUCCESS ---------- */
.evf-done{text-align:center;padding:var(--sp-9) var(--sp-6)}
.evf-done .ic{width:66px;height:66px;margin:0 auto var(--sp-5);border-radius:50%;background:var(--whatsapp);
  display:grid;place-items:center;color:#fff}
.evf-done .ic svg{width:32px;height:32px}
.evf-done h2{font-size:1.5rem;font-weight:var(--fw-bold)}
.evf-done p{margin-top:12px;color:var(--text-secondary);font-weight:var(--fw-light);
  max-width:46ch;margin-inline:auto}
.evf-done .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--sp-6)}

/* ---------- 13. REASSURANCE BAND ---------- */
.evf-band{background:var(--surface-sunken);padding:var(--sp-10) 0}
.evf-steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-7)}
.evf-steps3 li{position:relative;padding-left:60px}
.evf-steps3 .n{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:var(--r-md);
  background:var(--action);color:#fff;display:grid;place-items:center;font-size:1.05rem;
  font-weight:var(--fw-black)}
.evf-steps3 b{display:block;font-size:1.02rem;font-weight:var(--fw-bold);color:var(--text-heading)}
.evf-steps3 p{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:8px;font-weight:var(--fw-light)}
@media(max-width:820px){.evf-steps3{grid-template-columns:1fr;gap:var(--sp-5)}}