/* =====================================================================
   contact.css — صفحة «تواصل معنا» (تضيف فوق base.css فقط)
   ===================================================================== */

/* ----- طرق التواصل ----- */
.contact-layout { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1.45fr 1fr; gap: var(--s-6); } }

.method { display: grid; gap: var(--s-2); align-content: start; }
/* .method__icon = صندوق الأيقونة الموحّد في base.css (مع .icon-card__icon) */
.method__icon { margin-block-end: var(--s-1); }
.method__title { font-size: var(--fs-md); }
.method__value {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xl); line-height: 1.2;
  color: var(--ink); transition: color var(--dur) var(--ease); justify-self: start;
}
a.method__value:hover { color: var(--orange-deep); }
.method__value--handle { font-size: var(--fs-lg); }
.method__value--text { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-base); }
.method__note { color: var(--steel); font-size: 0.9375rem; line-height: 1.7; }
.method__foot { font-size: var(--fs-sm); color: var(--slate); padding-block-start: var(--s-2); border-block-start: 1px solid var(--line); }
.method__foot a { color: var(--ink); font-weight: 500; }
.method__foot a:hover { color: var(--orange-deep); }
.method .btn { justify-self: start; }

.contact-branches { display: grid; gap: var(--s-4); }
.contact-branches__head { display: flex; gap: var(--s-3); align-items: flex-start; }
.contact-branches__head .icon { color: var(--orange-light); margin-block-start: 4px; }
.contact-branches__head .card__title { margin-block-end: 2px; }
.contact-branches__list { display: grid; gap: var(--s-3); }
.contact-branches__list .branch-item { padding-block-end: var(--s-3); border-block-end: 1px solid var(--line-dark); }
.contact-branches__list .branch-item:last-child { border-block-end: 0; padding-block-end: 0; }
.contact-branches__list .branch-item__phones { font-size: 0.9375rem; }
.contact-branches .btn { justify-self: start; }

/* ----- نموذج عرض السعر ----- */
.quote-layout { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); }
  .quote-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-5)); }
}
.quote-card { padding: var(--s-5); }
@media (min-width: 768px) { .quote-card { padding: var(--s-6); } }
.field__foot { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.field__count { flex: none; font-size: var(--fs-xs); color: var(--slate); padding-block-start: 2px; }
.field__count.is-near { color: var(--error); font-weight: 600; }
/* quote.js يستخدم has-error؛ base.css يستخدم is-invalid — ندعم الاثنين */
.field.has-error .field__error { display: flex; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--error); }
.field.has-error .input:focus, .field.has-error .select:focus, .field.has-error .textarea:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .18); }
.quote-privacy { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.quote-privacy .icon { font-size: 20px; color: var(--orange-mid); flex: none; margin-block-start: 2px; }
.quote-privacy strong { color: var(--ink); }

.quote-success { display: grid; gap: var(--s-4); }
.quote-success__heading { font-size: var(--fs-base); }
.quote-msg {
  margin: 0; padding: var(--s-4) var(--s-5); white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.8;
  background: var(--paper); border: 1px solid var(--line); border-inline-start: 3px solid var(--orange); border-radius: var(--r-1);
  color: var(--ink);
}

.quote-aside { display: grid; gap: var(--s-4); }
.steps { display: grid; gap: var(--s-3); counter-reset: step; }
.steps li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.65; font-size: 0.9375rem; color: var(--steel); }
.steps li strong { color: var(--ink); }
.steps__num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--orange-light); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
}
.quote-calc { display: flex; gap: var(--s-4); align-items: flex-start; color: inherit; }
.quote-calc .method__icon { margin: 0; flex: none; }
.quote-calc .card__title { font-size: var(--fs-md); }
.quote-calc .btn--ghost { margin-block-start: var(--s-2); min-height: 0; padding-block: 0; }
@media (min-width: 1024px) and (max-width: 1199px) { .quote-calc { flex-direction: column; } }

/* ----- الأسئلة الشائعة ----- */
.faq { display: grid; gap: var(--s-3); }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-2); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq__item[open] { border-color: var(--orange-light); box-shadow: var(--sh-1); }
.faq__q {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base); color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { flex: none; font-size: 20px; color: var(--orange-mid); transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__q:hover { color: var(--orange-deep); }
.faq__a { padding: 0 var(--s-5) var(--s-5); color: var(--steel); line-height: 1.8; }

/* ----- شريط الأسطول ----- */
.band__content { max-width: 640px; }
.band__title { color: var(--white); font-size: var(--fs-2xl); margin-block: var(--s-4) var(--s-3); }
.band__text { color: var(--on-dark-soft); line-height: 1.8; }
.band .hero__actions { margin-block-start: var(--s-5); }

/* ----- حركة (js/motion-contact.js) ----- */
/* تركيز الحقول: عنوان الحقل يتلوّن وشرطة برتقالية قصيرة تنمو من جهة البداية (CSS فقط) */
.quote-card .label { position: relative; transition: color var(--dur) var(--ease); }
.quote-card .label::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -4px;
  width: 24px; height: 2px; border-radius: 1px; background: var(--grad-orange); pointer-events: none;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur) var(--ease);
}
[dir="ltr"] .quote-card .label::after { transform-origin: 0 50%; }
.quote-card .field:focus-within .label { color: var(--orange-deep); }
.quote-card .field:focus-within .label::after { transform: scaleX(1); }
/* تبديل النموذج ↔ لوحة النجاح: كلاسات مؤقتة أثناء التلاشي المتقاطع فقط —
   الاثنان في نفس الخلية حتى يظهر الداخل في موضع المغادر، والمغادر يبقى معروضًا رغم hidden لثوانٍ الحركة */
html.gsap .quote-main.is-switching { display: grid; align-items: start; }
html.gsap .quote-main.is-switching > * { grid-area: 1 / 1; min-width: 0; }
html.gsap .quote-main.is-switching > .is-leaving { pointer-events: none; }
html.gsap .quote-main.is-switching > .is-leaving[hidden] { display: grid !important; }   /* .form و.quote-success كلاهما grid في الأصل */