.native-contact { width: min(640px, calc(100% - 32px)); padding: 28px; background: rgba(255,255,255,.94); border: 1px solid #e5e8f0; border-radius: 24px; box-shadow: 0 16px 48px #15205d0b; color: #171a24; font: 12px Inter,sans-serif; }
.native-contact h1 { font: 600 18px/1.4 Inter,sans-serif; letter-spacing: -.4px; margin: 0 0 24px; }
.native-contact h2 { font: 600 18px/1.4 Inter,sans-serif; letter-spacing: -.4px; margin: 0; }
.native-contact .contact-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.native-contact .contact-options button { width: 100%; max-width: none; height: auto; min-height: 128px; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 16px; background: linear-gradient(145deg,#f5f7ff,#edf0f8); border: 2px solid transparent; border-radius: 16px; color: #171a24; font: 600 13px Inter,sans-serif; }
.native-contact .contact-options button img { width: 40px; height: 40px; filter: none; }
.native-contact .contact-options button:hover { border-color: var(--blue); background: #eef2ff; }
.native-contact .contact-step-header { margin-bottom: 24px; gap: 12px; }
.native-contact .contact-back { color: #969cac; }
.native-contact .contact-back svg { width: 20px; height: 20px; }
.native-contact label { position: relative; font: 600 12px Inter,sans-serif; margin-bottom: 20px; }
.native-contact input, .native-contact textarea { background: #f8f9fc; border: 1px solid #dbe0ec; color: #171a24; padding: 12px 16px; font: 400 13px Inter,sans-serif; outline-offset: 3px; transition: background 180ms,border-color 180ms; }
.native-contact input { border-radius: 999px; margin-top: 0; padding-right: 40px; }
.native-contact textarea { border-radius: 16px; margin-top: 8px; }
.native-contact input::placeholder, .native-contact textarea::placeholder { color: #737989; opacity: 1; }
.native-contact input[data-valid="true"], .native-contact textarea[data-valid="true"] { background: #f0f3fe; border-color: #dce5ff; }
.native-contact input:focus-visible, .native-contact textarea:focus-visible { outline: 2px solid var(--blue); }
.contact-sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-required-star { position: absolute; width: 12px; height: 12px; right: 16px; top: 21px; transform: translateY(-50%); pointer-events: none; }
.native-contact .contact-fields { gap: 16px; }
.contact-form-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.native-contact .contact-submit { min-width: 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.native-contact .contact-submit svg { width: 20px; height: 20px; }
.native-contact .contact-field-error { color: #bc273b; font-size: 12px; font-weight: 400; }
.native-contact #contact-status { font-size: 12px; color: #737989; line-height: 1.5; }
.native-contact a { color: var(--blue); }
.native-contact [hidden] { display: none !important; }
@media(max-width:760px) { .native-contact { padding: 20px; } }

.native-contact .contact-options { grid-template-columns: 1fr; gap: 12px; }
.native-contact .contact-options button { min-height: 72px; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 20px; border: 1px solid #e5e8f0; border-radius: 16px; background: #f8f9fc; text-align: left; transition: background 180ms, border-color 180ms; }
.native-contact .contact-options button img { width: 24px; height: 24px; flex-shrink: 0; }
.contact-choice-arrow { width: 20px; height: 20px; margin-left: auto; flex-shrink: 0; color: var(--blue); }
.native-contact .contact-options button:hover { background: #f0f3fe; border-color: #b8c9ff; }
.native-contact .contact-options button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }


.native-contact:has(#contact-choice:not([hidden])) { background: rgba(255,255,255,.94); border: 1px solid #e5e8f0; box-shadow: 0 16px 48px #15205d0b; padding: 28px; }
.native-contact #contact-choice { --contact-method-index: 0; margin-bottom: 28px; }
.native-contact .contact-options { position: relative; isolation: isolate; display: flex; gap: 0; width: 120px; }
.native-contact .contact-options button[data-contact-method] { position: relative; display: grid; place-items: center; min-height: 0; height: 44px; width: 60px; max-width: none; padding: 12px 20px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.native-contact .contact-options button[data-contact-method] img { position: static; width: 20px; height: 20px; margin: 0; opacity: .45; transform: none; filter: brightness(0) saturate(100%) invert(56%) sepia(8%) saturate(543%) hue-rotate(187deg); }
.native-contact .contact-options button[aria-pressed="true"] img { opacity: 1; filter: none; }
.contact-method-slider { position: absolute; z-index: -1; left: 0; top: 0; width: 60px; height: 44px; border-radius: 999px; background: #f0f3fe; transform: translateX(calc(var(--contact-method-index) * 60px)); transition: transform 350ms cubic-bezier(.22,1,.36,1); }
.native-contact .contact-step-header { margin-bottom: 24px; }
@media(max-width:760px) { .native-contact:has(#contact-choice:not([hidden])) { padding: 20px; } }
@media(prefers-reduced-motion:reduce) { .contact-method-slider { transition: none; } }

/* Match booking2's card and labelled method selector. */
.native-contact:has(#contact-choice:not([hidden])) { background: rgba(255,255,255,.94); border: 1px solid #e5e8f0; border-radius: 24px; padding: 28px; }
.native-contact h2 { font-size: 18px; font-weight: 600; margin: 0; }
.native-contact #contact-choice { margin-bottom: 32px; }
.native-contact .contact-options { width: 304px; max-width: 100%; }
.native-contact .contact-options button[data-contact-method] { display: flex; justify-content: center; align-items: center; gap: 8px; width: 50%; flex: 1; padding: 12px; font: 600 12px Inter,sans-serif; color: #969cac; }
.native-contact .contact-options button[aria-pressed="true"] { color: var(--blue); }
.contact-method-slider { width: 50%; transform: translateX(calc(var(--contact-method-index) * 100%)); background: linear-gradient(145deg,rgba(223,231,255,.85),rgba(238,242,255,.6)); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 2px 8px #19367b0a; }
.native-contact .contact-fields { display: block; }
.native-contact .contact-fields label { display: block; }
@media(max-width:760px) { .native-contact:has(#contact-choice:not([hidden])) { padding: 20px; } }

.contact-inputs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.native-contact .contact-inputs .contact-fields { display: contents; }
.contact-inputs .contact-fields label:first-child { grid-column: 1 / -1; }
.contact-inputs:has(.contact-fields[hidden]) > label { grid-column: 1 / -1; }
@media(max-width:760px) { .contact-inputs { grid-template-columns: 1fr; } }

.native-contact .contact-message-field textarea { margin-top: 0; padding-right: 40px; }

.contact-message-field { position: relative; margin-bottom: 20px; }
.native-contact .contact-message-field textarea { padding-bottom: 56px; }
.contact-attach { position: absolute; top: 108px; left: 12px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--blue); background: #f0f3fe; cursor: pointer; }
.contact-attach svg { width: 18px; height: 18px; }
#contact-photo-status { font-size: 11px; color: #737989; margin: 8px 0 0; }

.contact-message-input { position: relative; }
.contact-attach { top: auto; bottom: 12px; }

.contact-photo-previews { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.contact-photo-previews[hidden] { display: none; }
.contact-photo-previews img { flex: 0 0 84px; width: 84px; height: 64px; object-fit: cover; border-radius: 12px; background: #f0f3fe; }

.contact-photo-tile { position: relative; flex: 0 0 84px; width: 84px; height: 64px; }
.contact-photo-tile img { display: block; }
.contact-photo-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 3px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #737989; cursor: pointer; box-shadow: 0 1px 4px #0002; }
.contact-photo-remove svg { width: 14px; height: 14px; }
.contact-photo-add { flex: 0 0 84px; width: 84px; height: 64px; padding: 0; border: 0; border-radius: 12px; background: #f0f3fe; color: var(--blue); font-family: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.contact-photo-remove:focus-visible, .contact-photo-add:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.contact-plate-toggle { left: 52px; }
.contact-plate-toggle.has-value, .contact-plate-toggle[aria-expanded="true"] { background: var(--blue); color: #fff; }
.contact-plate-field { margin-top: 12px; max-width: 240px; }
.contact-plate-field[hidden] { display: none; }

 .contact-message-input { background: #f8f9fc; border: 1px solid #dbe0ec; border-radius: 16px; padding-top: 12px; }
.contact-subjects { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 40px 0 16px; }
.contact-subject { border: 0; border-radius: 999px; padding: 6px 10px; background: #edf0fb; color: #737989; font: 500 11px/1.3 Inter, sans-serif; cursor: pointer; }
.contact-subject[aria-pressed="true"] { background: var(--blue); color: #fff; }
.contact-subject:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.native-contact .contact-message-input textarea { border: 0; background: transparent; border-radius: 0 0 16px 16px; margin-bottom: 0; }
.contact-message-input:focus-within { border-color: var(--blue); }
.contact-message-input:has(textarea[data-valid="true"]) { background: #f0f3fe; }
.native-contact .contact-message-input textarea[data-valid="true"] { background: transparent; }

/* The message wrapper owns the focus border for the whole composer. */
.native-contact .contact-message-input textarea:focus,
.native-contact .contact-message-input textarea:focus-visible { outline: none; box-shadow: none; border: 0; background: transparent; }

.contact-subjects::after { content: ''; display: block; flex: 0 0 100%; height: 1px; margin-top: 6px; background: #e2e5ed; }
.native-contact .contact-message-input textarea { padding-top: 16px; }

.contact-call-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.contact-call-times[hidden] { display: none; }
.contact-call-times .contact-subject { padding: 8px 12px; background: #f0f3fe; }
.contact-call-times .contact-subject[aria-pressed="true"] { background: var(--blue); color: #fff; }

.hero__content--contact .contact-details { width: min(640px, calc(100% - 32px)); gap: 16px 24px; }
.hero__content--contact .contact-details a { gap: 8px; color: #454b59; font: 500 14px/1.5 Inter, sans-serif; transition: color 180ms ease; }
.hero__content--contact .contact-details img { width: 20px; height: 20px; filter: none; opacity: 1; transition: filter 180ms ease, opacity 180ms ease; }
.hero__content--contact .contact-details a:hover { color: var(--blue); text-decoration: none; }
.hero__content--contact .contact-details a:hover img { filter: none; opacity: 1; }

/* Keep the card inset equal on all four sides. */
.native-contact, .native-contact:has(#contact-choice:not([hidden])) { padding: 28px; }
.native-contact #contact-choice .contact-options { margin-top: 0; }
.native-contact form { margin-bottom: 0; }
@media (max-width: 760px) {
  .native-contact, .native-contact:has(#contact-choice:not([hidden])) { padding: 20px; }
}

.native-contact, .native-contact:has(#contact-choice:not([hidden])) { padding: 36px; }

.native-contact .contact-step-header:has(h2[hidden]) { display: none; }
.native-contact .contact-inputs { column-gap: 14px; }
.native-contact .contact-inputs label { margin-bottom: 14px; }

#contact-photo-status:not(:empty) { display: flex; align-items: flex-start; gap: 8px; }
#contact-photo-status:not(:empty)::before { content: ''; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; background: var(--blue); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* A single swipeable topic row, with a fading edge revealing more choices. */
@media (max-width: 760px) {
  .contact-subject-strip { margin: 0 40px 0 16px; border-bottom: 1px solid #e2e5ed; padding-bottom: 12px; min-width: 0; }
  .contact-subjects { flex-wrap: nowrap; overflow-x: auto; padding: 2px 24px 4px 0; gap: 6px; scrollbar-width: none; mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent); }
  .contact-subjects .contact-subject { flex: 0 0 auto; white-space: nowrap; }
  .contact-subjects::after { display: none; }
  .contact-subjects::-webkit-scrollbar { display: none; }
}

/* Match booking's compact inline attachment and number plate tools. */
.contact-optional-tools { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.contact-optional-tools .contact-attach { position: static; flex: 0 0 32px; }
.contact-optional-tools .contact-plate-field { position: relative; flex: 1; min-width: 0; max-width: none; margin: 0; }
.native-contact .contact-optional-tools #contact-plate { width: 100%; height: 32px; margin: 0; padding: 6px 32px 6px 12px; font-size: 13px; border-radius: 999px; }
.native-contact .contact-optional-tools #contact-plate:focus,
.native-contact .contact-optional-tools #contact-plate:focus-visible { outline: none; box-shadow: none; }
.contact-plate-check { position: absolute; right: 12px; top: 8px; width: 16px; height: 16px; color: var(--blue); pointer-events: none; }
.contact-plate-check[hidden] { display: none; }

.native-contact .contact-optional-tools .contact-plate-field { height: 32px; display: grid; align-items: center; }
.native-contact .contact-optional-tools .contact-plate-field > label { position: absolute; margin: 0; top: 0; left: 0; }
.native-contact .contact-optional-tools #contact-plate { box-sizing: border-box; grid-area: 1 / 1; min-width: 0; }
.native-contact .contact-optional-tools .contact-plate-check { position: static; grid-area: 1 / 1; align-self: center; justify-self: end; margin-right: 12px; transform: none; }

.native-contact .contact-message-input textarea { resize: none; overflow-y: hidden; box-sizing: border-box; padding-bottom: 64px; }

.contact-field-valid { display: none; position: absolute; right: 14px; top: 21px; transform: translateY(-50%); width: 16px; height: 16px; color: var(--blue); pointer-events: none; }
.native-contact label:has(input[data-valid="true"]:not([aria-invalid="true"])) > .contact-field-valid,
.contact-message-input:has(textarea[data-valid="true"]:not([aria-invalid="true"])) > .contact-field-valid { display: block; }
.native-contact label:has(input[data-valid="true"]:not([aria-invalid="true"])) > .contact-required-star,
.contact-message-input:has(textarea[data-valid="true"]:not([aria-invalid="true"])) > .contact-required-star { display: none; }

/* Method selector SVGs use the same compact sizing as the previous images. */
.native-contact .contact-options button[data-contact-method] svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; }
.native-contact .contact-options button[data-contact-method] span { white-space: nowrap; }

.native-contact .contact-options button[data-contact-method] .contact-method-filled { display: none; }
.native-contact .contact-options button[data-contact-method][aria-pressed="true"] .contact-method-filled { display: block; }
.native-contact .contact-options button[data-contact-method][aria-pressed="true"] .contact-method-outline { display: none; }
.native-contact .contact-options button[data-contact-method][aria-pressed="false"] .contact-method-outline { display: block; }

.native-contact input[name="phone"][data-empty="true"] { color: #737989; }
.contact-subjects .contact-subject { border: 1px solid var(--blue); background: transparent; }
.contact-subjects .contact-subject[aria-pressed="true"] { background: var(--blue); color: #fff; }

.native-contact input[data-valid="true"],
.native-contact textarea[data-valid="true"],
.native-contact .contact-message-input:has(textarea[data-valid="true"]) { background: #f1f5fe; }
.native-contact .contact-message-input textarea[data-valid="true"] { background: transparent; }

.native-contact .contact-message-input:focus-within { border-color: var(--blue); outline: none; box-shadow: 0 0 0 1px var(--blue); }

.contact-call-times .contact-subject { border: 1px solid #737989; background: transparent; }
.contact-call-times .contact-subject[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }

.contact-subjects .contact-subject { border: 1px solid #737989; background: transparent; }
.contact-subjects .contact-subject[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }

.contact-field-invalid { display: none; position: absolute; right: 14px; top: 21px; transform: translateY(-50%); width: 16px; height: 16px; color: var(--blue); pointer-events: none; }
.native-contact label:has(input[data-invalid="true"]) > .contact-field-invalid,
.native-contact label:has(input[aria-invalid="true"]) > .contact-field-invalid { display: block; }
.native-contact label:has(input[data-invalid="true"]) > .contact-required-star,
.native-contact label:has(input[aria-invalid="true"]) > .contact-required-star { display: none; }

.native-contact .contact-submit { display: inline-flex; gap: 8px; width: auto; padding: 0 16px; border-radius: 999px; }