/* ══════════════════════════════════════════════════════════════════════════
   /contact — on the /aboutus system (2026-10-05, owner: «نفس النظام»).
   Loaded after home.css + about.css; the page reuses ab-* components (hero,
   pills, cards, steps). This file holds only what /contact alone has: the
   conversation visual, the form card, the Help Center search. Scoped to .ct.
   No glows, logical properties, everything stops under reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hero visual: a conversation with the team, playing (contact.js) ── */
.ct-talk{ margin:0; border-radius:var(--hm-r); background:var(--hm-card); border:1px solid var(--hm-line); overflow:hidden;
    animation:ab-in .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.ct-talk__head{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--hm-card-2); border-block-end:1px solid var(--hm-line); }
.ct-talk__av{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--em-gold-ink); background:var(--hm-gold); }
.ct-talk__av svg{ width:20px; height:20px; }
.ct-talk__who b{ display:block; font-size:14.5px; } .ct-talk__who small{ display:block; font-size:12.5px; color:var(--em-muted); }
.ct-talk__body{ display:flex; flex-direction:column; gap:10px; min-height:290px; padding:20px 18px; justify-content:flex-end; }
.ct-talk__b{ max-width:82%; padding:11px 15px; border-radius:18px; font-size:14px; line-height:1.6;
    opacity:0; transform:translateY(10px) scale(.97); transition:opacity .4s, transform .45s cubic-bezier(.2,.9,.3,1.2); }
.ct-talk__b.is-on{ opacity:1; transform:none; }
.ct-talk__b--me{ align-self:flex-start; background:var(--hm-card-2); border:1px solid var(--hm-line); border-end-start-radius:5px; }
.ct-talk__b--team{ align-self:flex-end; color:var(--em-gold-ink); background:var(--hm-gold); border-end-end-radius:5px; font-weight:600; }
.ct-talk__b--typing{ align-self:flex-end; display:inline-flex; gap:5px; padding:14px 16px; background:color-mix(in srgb,var(--hm-gold) 16%,var(--hm-card)); border-end-end-radius:5px; }
.ct-talk__b--typing:not(.is-on){ display:none; }
.ct-talk__b--typing.is-gone{ display:none; }
.ct-talk__b--typing i{ width:7px; height:7px; border-radius:50%; background:var(--hm-gold); animation:hm-blink 1s infinite; }
.ct-talk__b--typing i:nth-child(2){ animation-delay:.15s; } .ct-talk__b--typing i:nth-child(3){ animation-delay:.3s; }
.ct-talk__foot{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-block-start:1px solid var(--hm-line); }
.ct-talk__in{ flex:1; padding:10px 14px; border-radius:99px; font-size:13.5px; color:var(--em-muted); background:var(--hm-card-2); border:1px solid var(--hm-line); }
.ct-talk__send{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--em-gold-ink); background:var(--hm-gold); }
.ct-talk__send svg{ width:18px; height:18px; }
[dir=rtl] .ct-talk__send svg{ transform:scaleX(-1); }

/* «how we can help» cards: a link at the bottom */
.ct-more{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:14px; font-weight:800;
    color:var(--hm-gold); text-decoration:none; }
.ct-more svg{ width:16px; height:16px; transition:transform .3s; }
[dir=rtl] .ct-more svg{ transform:scaleX(-1); }
.ct-more:hover svg{ transform:translateX(3px); } [dir=rtl] .ct-more:hover svg{ transform:scaleX(-1) translateX(3px); }
.ct-ltr{ text-align:start; unicode-bidi:isolate; }
[dir=rtl] .ct-ltr{ text-align:end; }

/* ── the form section: heading + help search | the form card ── */
.ct-split{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:start; }
@media (max-width:900px){ .ct-split{ grid-template-columns:minmax(0,1fr); } }
.ct-split__aside{ position:sticky; top:120px; }
@media (max-width:900px){ .ct-split__aside{ position:static; } }
.ct-split__aside .hm-sub{ margin-inline:0; }
#ct-form{ scroll-margin-top:110px; }

.ct-help{ margin-top:26px; padding:18px; border-radius:22px; background:var(--hm-card-2); border:1px dashed var(--hm-line); }
.ct-help__lbl{ display:block; margin-bottom:10px; font-size:13.5px; font-weight:700; }
.ct-help__box{ display:flex; align-items:center; gap:8px; padding:6px; border-radius:16px; background:var(--hm-card); border:1px solid var(--hm-line); transition:border-color .3s; }
.ct-help__box:focus-within{ border-color:var(--hm-gold); }
.ct-help__ico{ width:18px; height:18px; flex:none; margin-inline-start:8px; color:var(--em-muted); }
.ct-help__in{ flex:1; min-width:0; height:40px; border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:var(--em-text); }
.ct-help__btn{ height:40px; padding-inline:18px; border:0; border-radius:12px; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
    color:var(--em-gold-ink); background:var(--hm-gold); transition:transform .2s; }
.ct-help__btn:hover{ transform:translateY(-1px); }

/* the form card: a gold light runs once around its border on arrival */
.ct-card{ position:relative; isolation:isolate; padding:clamp(22px,2.6vw,34px); border-radius:30px; background:var(--hm-card); border:1px solid var(--hm-line); }
.ct-card__trace{ position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1.5px; pointer-events:none;
    background:conic-gradient(from var(--ct-a,0deg), transparent 0 70%, var(--hm-gold) 88%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    animation:ct-trace 2.6s .6s cubic-bezier(.4,0,.2,1) both; }
@property --ct-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes ct-trace{ 0%{ --ct-a:0deg; opacity:1; } 85%{ opacity:1; } 100%{ --ct-a:360deg; opacity:0; } }
.ct-card__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.ct-card__ico{ width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:16px; color:var(--em-gold-ink); background:var(--hm-gold);
    animation:ct-bob 4s ease-in-out infinite; }
@keyframes ct-bob{ 50%{ transform:translateY(-4px) rotate(-4deg); } }
.ct-card__ico svg{ width:24px; height:24px; }
.ct-card__ttl{ margin:2px 0 4px; font-size:18.5px; font-weight:800; }
.ct-card__sub{ margin:0; font-size:13.5px; line-height:1.7; color:var(--em-muted); }
.ct-note{ margin-bottom:16px; }

.ct-form{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }   /* one column that never outgrows the card (the auto track stretched to the 300px Turnstile at 320px) */
.ct-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:560px){ .ct-row{ grid-template-columns:minmax(0,1fr); } }
.ct .ct-field{ margin:0; }
.ct .em-field__label{ font-size:13.5px; font-weight:700; }
.ct-in{ position:relative; display:block; }
.ct-in__ico{ position:absolute; inset-inline-start:14px; inset-block-start:50%; width:17px; height:17px; transform:translateY(-50%); color:var(--em-muted); pointer-events:none; transition:color .3s; }
.ct .ct-in .em-field__input{ padding-inline-start:42px; }
.ct .em-field__input{ border-radius:14px; background:var(--hm-card-2); border-color:var(--hm-line); transition:border-color .25s, background-color .25s; }
.ct .em-field__input:focus{ border-color:var(--hm-gold); background:var(--hm-card); outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--hm-gold) 18%,transparent); }
.ct-in:focus-within .ct-in__ico{ color:var(--hm-gold); }
.ct .em-field__area{ min-height:150px; resize:vertical; }
.ct-meter{ display:block; height:3px; margin-top:8px; border-radius:3px; background:var(--hm-line); overflow:hidden; }
.ct-meter i{ display:block; height:100%; width:var(--ct-m,0%); border-radius:3px; background:var(--hm-gold); transition:width .3s, background-color .3s; }
.ct-meter.is-ok i{ background:var(--hm-good); }
.ct-count.is-ok{ color:var(--hm-good); }

/* send: the plane takes off while the form posts */
.ct .em-btn.em-btn--primary.ct-send{ position:relative; overflow:hidden; gap:10px; min-height:56px; border-radius:16px;
    background:var(--hm-gold); border-color:var(--hm-gold); color:var(--em-gold-ink); }
.ct-send__plane{ display:inline-grid; width:20px; height:20px; transition:transform .5s cubic-bezier(.5,0,.3,1); }
[dir=rtl] .ct-send__plane{ transform:scaleX(-1); }
.ct-send__plane svg{ width:100%; height:100%; }
.ct-send:hover .ct-send__plane{ transform:translate(3px,-3px); }
[dir=rtl] .ct-send:hover .ct-send__plane{ transform:scaleX(-1) translate(3px,-3px); }
.ct-send.is-sending{ pointer-events:none; }
.ct-send.is-sending .ct-send__plane{ animation:ct-fly 1.1s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes ct-fly{ 0%{ transform:translate(0,0); opacity:1; } 60%{ transform:translate(var(--ct-fx,60px),-40px); opacity:0; } 61%{ transform:translate(calc(var(--ct-fx,60px) * -1),30px); opacity:0; } 100%{ transform:translate(0,0); opacity:1; } }
[dir=rtl] .ct-send.is-sending .ct-send__plane{ --ct-fx:-60px; }
.ct .em-form__foot{ margin:0; font-size:12.5px; color:var(--em-muted); text-align:center; }

@media (prefers-reduced-motion: reduce){
    .ct *, .ct *::before, .ct *::after{ animation:none !important; transition:none !important; }
    .ct-card__trace{ display:none; } .ct-talk__b{ opacity:1; transform:none; } .ct-talk__b--typing{ display:none !important; }
}