/* Contact form (contact page). Same two-column format as the heroes: the intro and the direct
   contact options on the start side, the form card on the other side.

   The site has no server yet, so the form writes the message and opens WhatsApp with it
   (js/contact-form.js); nothing is stored. Swap the submit handler for a real endpoint later.

   Fields: 48px+ targets, labels always visible, errors under the field in text (not colour
   alone). Focus: ink border + a yellow ring (a fill, not text: light ground, base.css rule). */

.contact-form-section {
  --gutter: clamp(24px, 5vw, 96px);
  padding: clamp(96px, 12vh, 144px) var(--gutter);
  background: var(--surface-alt);
  color: var(--h10-ink);
}
.contact-form-section__inner {
  max-width: 1760px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  align-items: start; gap: clamp(40px, 6vw, 120px);
}
.contact-form__intro .section-title { margin-bottom: 12px; }
.contact-form__lead { margin: 0 0 32px; max-width: 46ch; font-size: 17px; line-height: 1.8; color: var(--ink-muted); }

/* direct options: rows like the coverage routes */
.contact-ways { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contact-ways li { border-bottom: 1px solid var(--line); }
.contact-ways > li > a,
.contact-ways__row {
  display: flex; align-items: center; gap: 16px;
  min-height: 76px; color: inherit; text-decoration: none;
}
/* the app row is a button that opens the store chooser (js/app-picker.js) */
.contact-ways__picker { display: block; position: relative; }
.contact-ways__row {
  width: 100%; padding: 0; border: 0; background: none;
  font: inherit; text-align: start; cursor: pointer;
}
.contact-ways__picker .app-picker__panel { top: calc(100% - 8px); min-width: 0; }
.contact-ways__icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: #FFFFFF;
  transition: background-color 150ms ease;
}
.contact-ways__icon svg { width: 20px; height: 20px; }
.contact-ways__icon .stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-ways__icon .glyph { fill: currentColor; }
.contact-ways b { display: block; font-size: 17px; }
.contact-ways small { display: block; color: var(--ink-muted); font-size: 14px; }
.contact-ways small[dir="ltr"] { text-align: start; unicode-bidi: plaintext; }
@media (hover: hover) and (pointer: fine) {
  .contact-ways > li > a:hover .contact-ways__icon,
  .contact-ways__row:hover .contact-ways__icon { background: var(--h10-yellow); }
}

/* the card */
.contact-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgba(22, 24, 28, 0.35);
}
.contact-form__field { display: grid; gap: 8px; align-content: start; }
.contact-form__field--wide { grid-column: 1 / -1; }
.contact-form label { font-size: 15px; font-weight: 600; }
.contact-form label .opt { font-weight: 400; color: var(--ink-muted); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #C9CDD2; border-radius: 12px;
  background: #FFFFFF; color: var(--h10-ink);
  font: 400 16px/1.5 var(--font);                    /* 16px: no zoom-on-focus on iPhone */
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form select {
  appearance: none;
  background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'><path d='M6 9l6 6 6-6' fill='none' stroke='%2316181C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat left 14px center;
  padding-inline-end: 44px;
}
.contact-form select:dir(ltr) { background-position: right 14px center; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #8A9099; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--h10-ink);
  box-shadow: 0 0 0 4px rgba(242, 183, 5, 0.55);
}
.contact-form [aria-invalid="true"] { border-color: #B42318; }
.contact-form__error { margin: 0; min-height: 0; font-size: 14px; color: #B42318; }
.contact-form__error:empty { display: none; }

.contact-form__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 4px;
}
.contact-form__note { margin: 0; max-width: 42ch; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }
.contact-form__status { grid-column: 1 / -1; margin: 0; font-size: 15px; font-weight: 600; }
.contact-form__status:empty { display: none; }
.contact-form__status[data-state="ok"] { color: #067647; }
.contact-form__status[data-state="error"] { color: #B42318; }
.contact-form[aria-busy="true"] [type="submit"] { opacity: .6; cursor: progress; }

@media (max-width: 900px) {
  .contact-form-section { --gutter: 16px; padding-block: 72px; }
  .contact-form-section__inner { grid-template-columns: none; gap: 32px; }
  .contact-form { grid-template-columns: none; }
}

/* H10's accounts under the ways to reach us: round outlined icons that fill yellow on hover */
.contact-socials { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 28px; }
.contact-socials p { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.contact-socials ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-socials__link {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--h10-ink); background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 160ms var(--ease-out);
}
.contact-socials__link svg { width: 20px; height: 20px; }
.contact-socials__link:active { transform: scale(0.95); }
.contact-socials__link:focus-visible { outline: 2px solid var(--h10-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .contact-socials__link:hover { background: var(--h10-yellow); box-shadow: inset 0 0 0 1px var(--h10-yellow); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-socials__link { transition: none; }
  .contact-form input, .contact-form select, .contact-form textarea, .contact-ways__icon { transition: none; }
}

/* spam trap: a field people never see and bots fill in (the server drops those requests) */
.contact-form__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Start a chat (block chat_cta): the card on the form's side opens Social Lab's chat widget. */
.chat-card {
  display: grid; gap: 16px; align-content: start;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgba(22, 24, 28, 0.35);
}
.chat-card__preview { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.chat-card__avatar {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--h10-ink); color: var(--h10-yellow);
}
.chat-card__avatar .inline-logo { width: 30px; height: auto; }
.chat-card__bubble {
  margin: 0; padding: 12px 16px; max-width: 34ch;
  border-radius: 18px; border-end-start-radius: 4px;
  background: var(--surface-alt); font-size: 16px; line-height: 1.6;
}
.chat-card__title { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.chat-card__text { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.8; max-width: 52ch; }
.chat-card__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.chat-card__points li { position: relative; padding-inline-start: 28px; font-size: 15px; line-height: 1.6; }
.chat-card__points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--h10-yellow);
}
.chat-card__points li::after {
  content: ""; position: absolute; inset-inline-start: 6px; top: 7px;
  width: 4px; height: 8px; border: solid var(--h10-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.chat-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.chat-card__note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-muted); max-width: 40ch; }

/* chat block: the card on the start side (right in Arabic), the text and contact rows beside it.
   Phones keep the reading order: title and rows first, then the card. */
@media (min-width: 901px) {
  .contact-form-section--chat .contact-form-section__inner { grid-template-columns: minmax(0, 6fr) minmax(280px, 5fr); }
  .contact-form-section--chat .chat-card { order: -1; }
}