/* SAMF contact page (W-FM). Tokens only. Desktop 1728 / tablet 1024 / mobile 375. */
.samf-contact-body { padding-block: 1rem 5rem; }
.samf-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) { .samf-contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; } }
.samf-contact-details, .samf-contact-form, .samf-contact-success {
  background: color-mix(in srgb, var(--samf-color-page) 35%, transparent); border: 1px solid var(--samf-color-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 2rem; padding: 2rem;
}
.samf-contact-details h2, .samf-contact-form h2, .samf-contact-success h2 { font-size: var(--samf-fs-h5); margin-block-end: 1rem; color: var(--samf-color-primary); }
.samf-contact .form-control, .samf-contact .form-select { min-block-size: 3rem; border-radius: var(--samf-radius); }
.samf-contact textarea.form-control { min-block-size: 9rem; }
.samf-contact-details dt { font-weight: 600; color: var(--samf-color-muted); margin-block-start: 1rem; }
.samf-contact-details dd { margin-inline-start: 0; overflow-wrap: anywhere; }
.samf-contact-ltr { unicode-bidi: plaintext; text-align: start; }
.samf-contact .samf-contact-note { color: var(--samf-color-muted); font-size: var(--samf-fs-body); }
.samf-contact .samf-required, .samf-contact .samf-optional { font-weight: 400; font-size: var(--samf-fs-body); color: var(--samf-color-muted); }
.samf-contact .form-control, .samf-contact .form-select { max-inline-size: 100%; }
.samf-contact .samf-field-error::before { content: "! "; font-weight: 800; }
.samf-contact .samf-error-summary { border-width: 2px; }
.samf-contact .samf-error-summary:focus { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
.samf-contact .samf-error-summary ul { margin-block-end: 0; padding-inline-start: 1.25rem; }
.samf-contact .samf-error-summary a { color: var(--samf-color-danger); font-weight: 600; text-decoration: underline; }
.samf-contact-success { text-align: center; display: grid; justify-items: center; gap: 1rem; border: 0; color: var(--samf-color-text); }
.samf-contact-reference { font-size: var(--samf-fs-h5); margin: 0; background: var(--samf-color-page); border: 1px solid var(--samf-color-primary); border-radius: var(--samf-radius-pill); padding: .5rem 1.5rem; }
.samf-contact-reference strong { color: var(--samf-color-primary); unicode-bidi: isolate; }
@media (max-width: 1024px) { .samf-contact-details, .samf-contact-form, .samf-contact-success { padding: 1.5rem; } .samf-contact-body { padding-block-end: 3rem; } }
@media (max-width: 375px) { .samf-contact-details, .samf-contact-form, .samf-contact-success { padding: 1.25rem; } }

/* Honeypot (126704 AC4): clipped to nothing, not display:none, so bots still see and fill it. No large offset: in RTL it widened the page by 10000px (126938). */
.samf-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }
@media (max-width: 375px) { .samf-contact .samf-btn-accent { inline-size: 100%; } .samf-contact-reference { overflow-wrap: anywhere; } }

/* Newsletter result and token pages (Views/Forms): same glass card and spacing as the contact cards. */
.samf-result, .samf-token { padding-block: 9rem 5rem; }
.samf-result .samf-status-card, .samf-token .samf-status-card {
  max-inline-size: 40rem; margin-inline: auto; text-align: center; padding: 2.5rem 2rem;
  background: color-mix(in srgb, var(--samf-color-page) 35%, transparent); border: 1px solid var(--samf-color-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 2rem;
}
@media (max-width: 1024px) { .samf-result, .samf-token { padding-block: 6rem 3rem; } }

/* Arabic: values with dir=ltr (email, phone) sit at the reading end; the select arrow and the checkbox mirror (Bootstrap ships LTR only). */
[dir="rtl"] .samf-contact-ltr { text-align: end; }
[dir="rtl"] .samf-contact .form-select { background-position: .75rem center; padding-inline: 1rem 2.5rem; }
.samf-contact .form-check { display: flex; align-items: flex-start; gap: .75rem; padding-inline-start: 0; min-block-size: 2.75rem; }
.samf-contact .form-check-input { float: none; flex: none; margin: .125rem 0 0; inline-size: 1.5rem; block-size: 1.5rem; }
.samf-contact .form-check-label { flex: 1 1 auto; min-inline-size: 0; }
.samf-contact .form-check .samf-field-error { flex-basis: 100%; }
.samf-contact .form-check-input { border-width: 2px; border-radius: .375rem; }

/* Round 2: consent checkbox kept clear of its label (Bootstrap's negative margin won over the rule above); intro line moved under the header rule. */
.samf-contact .form-check .form-check-input { margin: .125rem 0 0; float: none; }
@media (min-width: 64.0625rem) { .samf-contact-hero .samf-pagehead__sub { transform: translateY(3.25rem); } }

/* visual-fix-1108 G5 (no Figma frame; derived from the FAQs/Careers mobile frames: 20px gutter). */
@media (max-width: 575.98px) { .samf-contact .samf-m2-wrap { padding-inline: 20px; } }
/* visual-fix-1108 G5: no Contact frame, so it follows the one Figma form card (Karting contact details 317:10751) and the Careers/FAQs page frame.
   - header pulled up 49 where the sticky header is 125 (as FAQs/Careers/legal), intro line moved a little further under the header rule;
   - a lone form card is centred at 880 (was a third of the width with an empty two thirds beside it);
   - card border white 35%, padding 32/40/40; button 8 radius, 15/20 padding, 14/20 SemiBold with the chevron (was a pill). */
@media (min-width: 1400px) { .samf-contact.samf-m2-page { margin-block-start: -49px; } }
@media (min-width: 64.0625rem) { .samf-contact-hero .samf-pagehead__sub { position: absolute; inset-block-start: calc(100% + 1rem); inset-inline-start: 2.5rem; margin: 0; max-inline-size: 38rem; transform: none; } }
.samf-contact-layout > .samf-contact-form:only-child { grid-column: 1 / -1; inline-size: 100%; max-inline-size: 880px; justify-self: center; }
.samf-contact :is(.samf-contact-form, .samf-contact-details) { border-color: var(--samf-figma-white-35); }
@media (min-width: 576px) { .samf-contact :is(.samf-contact-form, .samf-contact-details) { padding: 32px 40px 40px; } }
.samf-contact .samf-btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; min-block-size: 50px; padding: 14px 20px;
  border: 1px solid var(--samf-color-primary); border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: var(--samf-fw-semibold); text-transform: uppercase;
}
:lang(ar) .samf-contact .samf-btn-accent, [dir="rtl"] .samf-contact .samf-btn-accent { text-transform: none; }
.samf-contact button.samf-btn-accent::after {
  content: ""; inline-size: 12px; block-size: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M4 1.5 8.5 6 4 10.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
}
[dir="rtl"] .samf-contact button.samf-btn-accent::after { transform: scaleX(-1); }
@media (max-width: 575.98px) { .samf-contact :is(.samf-contact-form, .samf-contact-details, .samf-contact-success) { border-radius: 16px; } }