/* ===================================================== 10 · REQUEST =====
   The form. Everything here is logical-property only (inline-start, not left),
   because this section exists in both directions and the Arabic one is the
   primary. */

.req { padding-block: 96px 104px; background: #fff; }

.req__head { max-width: 720px; margin-inline: auto; text-align: center; }

.req__title {
  margin: 0;                         /* was 16px, the gap under the section label */
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
[dir="rtl"] .req__title { line-height: 1.3; letter-spacing: -0.01em; }
/* --logo-grey is #d8d8d8, which is 1.43:1 on white. It exists for the greyed
   out client-logo strip, and reusing it on HEADLINE COPY made the half of the
   sentence carrying the actual promise - «ونرد خلال 48 ساعة» - very nearly
   invisible. The equivalent dimmed line in the expertise section renders at
   8.3:1, so this was the outlier rather than the pattern. --body-soft is
   6.39:1. --logo-grey itself is left alone; it is right where it belongs. */
.req__dim { color: var(--body-soft); }

.req__lede {
  margin: 18px auto 0;
  max-width: var(--measure-wide);
  color: var(--body-soft);
  font-size: 17px;
  line-height: 1.65;
}
[dir="rtl"] .req__lede { font-size: calc(17px * var(--ar)); line-height: 1.75; }

/* -- the tray ----------------------------------------------------------- */

.req__shell {
  margin-block-start: 44px;
  margin-inline: auto;
  max-width: 760px;
  background: var(--card-grey);
  border-radius: 24px;
  padding: 32px;
}

.req-form { display: flex; flex-direction: column; gap: 20px; }

.req-label {
  display: block;
  margin-block-end: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 0;                              /* <legend> carries padding by default */
}
/* Positive tracking pulls Arabic letters apart and BREAKS THE JOINS between
   them, which is not a spacing preference but a spelling error. type-check
   caught all four labels at 0.151px. Latin keeps it; Arabic gets zero. */
[dir="rtl"] .req-label { font-size: calc(14px * 1.08); letter-spacing: 0; }

.req-field { display: block; }

.req-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* -- the track chips ---------------------------------------------------- */

.req-tracks { margin: 0; padding: 0; border: 0; }
.req-tracks .req-label { margin-block-end: 10px; }

.req-chip { display: inline-block; cursor: pointer; }
.req-chip + .req-chip { margin-inline-start: 10px; }

/* The radio itself is the accessible control and stays in the tab order; it is
   made invisible rather than removed, so focus still lands somewhere real and
   :focus-visible below can draw a ring around the chip. */
.req-chip input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.req-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                        /* a real thumb target */
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e2e2;
  font-size: 15px;
  line-height: 1.3;
  color: var(--body);
  transition: background .2s, border-color .2s, color .2s;
}
[dir="rtl"] .req-chip span { font-size: calc(14px * 1.08); }
.req-chip:hover span { border-color: #cfcfcf; }
.req-chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.req-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* -- inputs ------------------------------------------------------------- */

.req-input {
  width: 100%;
  font: inherit;
  font-size: 16px;                         /* under 16px iOS zooms the page in */
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color .2s, box-shadow .2s;
}
[dir="rtl"] .req-input { font-size: calc(16px * 1.06); }
.req-input::placeholder { color: #9a9a9a; }

/* The phone field carries dir="ltr" so the digits keep their order, and that
   also drove its CONTENT to the left edge - so on an Arabic page its label
   pointed across an empty half-field, and the caret started as far from that
   label as the screen allows. Measured: the placeholder began 18px from the
   left with 207px of dead space after it, while every sibling field ended
   flush on the right. Direction stays LTR; only the alignment comes back. */
[dir="rtl"] .req-input[dir="ltr"] { text-align: right; }
.req-input:hover { border-color: #cfcfcf; }
.req-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(19, 19, 19, .10);
}
.req-input[aria-invalid="true"] { border-color: #a3231f; }

.req-area { resize: vertical; min-height: 116px; }

/* The arrow is drawn rather than left to the platform, so it points the right
   way in RTL and does not sit on top of a long Arabic option name. */
.req-select {
  appearance: none;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' fill='none' stroke='%23131313' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 14px center;
}
[dir="rtl"] .req-select { background-position: left 14px center; }

.req-err { margin: 7px 0 0; font-size: 14px; color: #a3231f; }

/* -- the honeypot ------------------------------------------------------- */

/* Hidden from people, not from bots: some skip display:none fields, and the
   ones that fill this in are exactly the ones worth catching. aria-hidden and
   tabindex -1 in the markup keep every real visitor away from it.

   It was `inset-inline-start: -9999px` for one build, which under RTL resolves
   to right:-9999px and pushed the input off the RIGHT edge of the document.
   rtl-check caught it: one element running off the edge at 390px, clipped
   rather than scrolled, because body{overflow-x:hidden} hides the symptom
   without removing the cause. The clip-path form takes up no space in any
   direction and cannot do that. */
.req-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* -- actions ------------------------------------------------------------ */

.req-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-block-start: 4px;
}

.req-send {
  height: 52px;
  padding: 0 30px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 500;
  gap: 10px;
}
.req-send:hover { background: var(--lime-soft); }
.req-send[disabled] { opacity: .55; cursor: progress; }
.req-send svg { width: 19px; height: 19px; }

.req-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--body-soft);
  border-block-end: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
[dir="rtl"] .req-wa { font-size: calc(15px * 1.06); }
.req-wa svg { width: 18px; height: 18px; }
.req-wa:hover { color: var(--ink); border-block-end-color: currentColor; }

/* The line that reassures somebody about handing over their phone number was
   the lowest-contrast text on the screen: #7b7b7b on the #f2f2f2 card is
   3.78:1, under AA at this size, and quieter than the WhatsApp link directly
   above it. Same token as that link now: 5.70:1. */
.req-note {
  margin: 0;
  font-size: 13px;
  color: var(--body-soft);
  line-height: 1.6;
}
[dir="rtl"] .req-note { font-size: calc(13px * 1.08); }

/* -- the done panel ----------------------------------------------------- */

.req-done { text-align: center; padding-block: 12px; }
.req-done__title {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
/* Mirza draws smaller ink than Plus Jakarta at the same value, so an Arabic
   role left at the English px reads about 19% small. These two were missed on
   the first pass and type-check named them both. */
[dir="rtl"] .req-done__title {
  font-size: calc(26px * var(--ar));
  letter-spacing: 0;
  line-height: 1.5;
}
.req-done__ref {
  margin: 14px 0;
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  /* The reference is Latin and digits in every language, so it must not be
     dragged around by the paragraph direction it sits inside. */
  direction: ltr;
  unicode-bidi: isolate;
}
.req-done__body {
  margin: 0 auto 20px;
  max-width: 44ch;
  color: var(--body-soft);
  font-size: 16px;
  line-height: 1.65;
}
[dir="rtl"] .req-done__body { font-size: calc(16px * var(--ar)); line-height: 1.75; }

.req-again {
  display: block;
  margin: 16px auto 0;
  font: inherit;
  font-size: 14px;
  color: var(--body-soft);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.req-again:hover { color: var(--ink); }
[dir="rtl"] .req-again { font-size: calc(14px * var(--ar)); }

/* ====================================================== RESPONSIVE ====== */

@media (max-width: 809px) {
  .req { padding-block: 64px 72px; }
  .req__shell { padding: 22px; border-radius: 20px; }
  .req-row { grid-template-columns: 1fr; }
  .req-actions { gap: 14px; }
  /* One thumb, one target: the send button owns the width on a phone. */
  .req-send { width: 100%; }
  .req-wa { width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
  .req-chip { display: block; }
  .req-chip + .req-chip { margin-inline-start: 0; margin-block-start: 8px; }
  .req-chip span { width: 100%; justify-content: center; }
}