/* ===== موديول فورم الاستشارة (3 خطوات) — مستقل، بياخد ألوانه من التوكنز ===== */
.cf{position:relative;display:grid;gap:1.4rem;padding:clamp(1.5rem,3vw,2.75rem);border-radius:var(--r-card);background:linear-gradient(160deg,rgba(11,47,73,.95),rgba(0,28,52,.95));border:1px solid rgba(224,224,224,.14);box-shadow:var(--shadow),var(--edge);overflow:hidden}
.cf::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold-500),var(--gold-300),var(--gold-500),transparent)}
.cf [hidden]{display:none!important}
.cf__head{display:grid;gap:1.1rem}
.cf__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
.cf__steps li{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-small);font-weight:500;opacity:.5;transition:opacity var(--dur-1)}
.cf__steps b{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);font-size:.8125rem;font-weight:700;color:var(--gold-300);transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.cf__steps li.is-on,.cf__steps li.is-done{opacity:1}
.cf__steps li.is-on b{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900)}
.cf__steps li.is-done b{background:rgba(176,141,87,.18);border-color:var(--gold-500)}
.cf__steps li.is-done{cursor:pointer}
.cf__bar{height:2px;background:var(--hair);overflow:hidden;border-radius:2px}
.cf__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-300),var(--gold-500));transform:scaleX(.3333);transform-origin:right center;transition:transform .7s var(--ease-out)}

.cf__step{display:grid;gap:1.1rem;min-width:0;margin:0;padding:0;border:0}
.cf__step legend{padding:0;margin-bottom:1rem;font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:700}
.cf__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.cf__card{position:relative;cursor:pointer}
.cf__card input,.cf__chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cf__card-in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.2rem .9rem;height:100%;min-height:84px;padding:.9rem 1rem;border-radius:var(--r-leaf);border:1px solid rgba(224,224,224,.18);background:rgba(0,17,31,.5);transition:background var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
.cf__card-in svg{grid-row:span 2;width:44px;height:44px;padding:10px;border-radius:50%;border:1px solid var(--line);color:var(--gold-300);transition:background var(--dur-1),color var(--dur-1)}
.cf__card-in b{font-size:1rem;font-weight:700;line-height:1.4;align-self:end}
.cf__card-in small{font-size:.8125rem;font-weight:300;line-height:1.5;opacity:.75;align-self:start}
.cf__card:hover .cf__card-in{border-color:var(--gold-500)}
.cf__card input:checked + .cf__card-in{background:linear-gradient(150deg,rgba(176,141,87,.24),rgba(176,141,87,.08));border-color:var(--gold-500);box-shadow:0 18px 30px -20px rgba(176,141,87,.7)}
.cf__card input:checked + .cf__card-in svg{background:var(--gold-500);color:var(--navy-900)}
.cf__card input:focus-visible + .cf__card-in,.cf__chip input:focus-visible + span{outline:2px solid var(--gold-300);outline-offset:3px}

.cf__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cf__field{position:relative;display:grid;gap:.4rem}
.cf__field>span,.cf__label{font-size:var(--fs-label);font-weight:500;opacity:.8}
.cf__field input,.cf__field textarea{width:100%;min-height:52px;padding:.7rem 1rem;border-radius:12px 3px 12px 3px;border:1px solid rgba(224,224,224,.2);background:rgba(0,17,31,.55);color:inherit;outline:0;transition:border-color var(--dur-1),box-shadow var(--dur-1);resize:vertical}
.cf__field input::placeholder,.cf__field textarea::placeholder{color:rgba(224,224,224,.4)}
.cf__field input[dir="ltr"]{text-align:right}
.cf__field textarea{padding-bottom:1.9rem}
.cf__field input:focus,.cf__field textarea:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(176,141,87,.25)}
.cf__field.is-bad input{border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(219,150,29,.2)}
.cf__count{position:absolute;inset-inline-end:1rem;bottom:.6rem;font-style:normal;font-size:.75rem;opacity:.55;pointer-events:none}
.cf__group{display:grid;gap:.55rem}
.cf__chips{display:flex;flex-wrap:wrap;gap:.55rem}
.cf__chip{position:relative;cursor:pointer}
.cf__chip span{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:.5rem 1.1rem;border-radius:var(--r-leaf);border:1px solid rgba(224,224,224,.2);background:rgba(0,17,31,.5);font-size:var(--fs-small);font-weight:500;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
.cf__chip span::before{content:"";width:8px;height:8px;border-radius:8px 2px 8px 2px;border:1px solid var(--gold-500);transition:background var(--dur-1),border-color var(--dur-1)}
.cf__chip:hover span{border-color:var(--gold-500)}
.cf__chip input:checked + span{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900)}
.cf__chip input:checked + span::before{background:var(--navy-900);border-color:var(--navy-900)}

.cf__preview{display:grid;gap:.6rem;padding:1rem 1.1rem;border-radius:var(--r-leaf);background:rgba(0,17,31,.5);border:1px dashed rgba(224,224,224,.2)}
.cf__preview small{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-label);font-weight:500;opacity:.75}
.cf__preview small svg{width:16px;height:16px;color:var(--gold-300)}
.cf__bubble{justify-self:start;max-width:100%;margin:0;white-space:pre-line;font-size:var(--fs-small);line-height:1.8;padding:.75rem 1rem;border-radius:14px 14px 4px 14px;background:rgba(224,224,224,.09);overflow-wrap:anywhere}

.cf__err{margin:0;font-size:var(--fs-small);color:var(--amber-500)}
.cf__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cf__nav .cta{margin-inline-start:auto;border:0;cursor:pointer;font-family:inherit}
.cf__back{min-height:46px;padding:.4rem .5rem;border:0;background:none;color:inherit;font:inherit;font-size:var(--fs-small);font-weight:500;opacity:.8;cursor:pointer;border-bottom:1px solid var(--line)}
.cf__back:hover{opacity:1;color:var(--gold-300)}
.cf__note{display:flex;align-items:flex-start;gap:.6rem;margin:0;padding-top:1rem;border-top:1px solid var(--hair);font-size:var(--fs-label);font-weight:300;line-height:1.7;opacity:.8}
.cf__note svg{width:18px;height:18px;flex:none;margin-top:.1rem;color:var(--gold-300)}

.cf__done{display:grid;justify-items:center;gap:.9rem;padding-block:1.5rem;text-align:center}
.cf__done>svg{width:72px;height:72px;padding:18px;border-radius:50%;background:var(--gold-500);color:var(--navy-900)}
.cf__done h4{margin:0;font-size:var(--fs-h3);font-weight:800}
.cf__done p{margin:0;max-width:36ch;font-weight:300;opacity:.85}
.cf__done-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-top:.5rem}

@media (max-width:640px){
  .cf__cards,.cf__row{grid-template-columns:1fr}
  .cf__steps span{display:none}
  .cf__steps{grid-template-columns:repeat(3,auto);justify-content:start;gap:.75rem}
}