/* ==========================================================================
   .dr-hero__widget — booking card v2: card branco flutuando sobre a foto.

   Camada 100% visual: nenhum HTML/PHP/JS do Chauffeur Booking System é
   alterado — as regras .chbs-* apenas vestem o markup que o plugin
   renderizará (seletores lidos do fonte v8.8; confirmar no DevTools quando
   o booking form for configurado).

   Aceite v2: aba ativa comunica estado só por contraste de fundo (nenhum
   sublinhado); botão em PETROL (única cor de ação do DS — decisão
   documentada no pattern); largura 520px (pedido explícito do usuário).
   Tokens --dr-* exclusivamente; zero hex novo.
   ========================================================================== */

/* A moldura de .dr-hero__visual (fundo escuro, sombra grande, gradiente
 * ::after) foi desenhada para a FOTO do hero em main.css — com o card de
 * booking dentro, ela é neutralizada e o card assume o próprio contorno. */
.dr-hero__visual:has(.dr-hero__widget) {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.dr-hero__visual:has(.dr-hero__widget)::after {
	content: none;
}

/* --- Card de vidro fosco (cor anterior, mantida a estrutura v2) --------------
 * Vidro de tonalidade escura: a foto clara atravessa desfocada e o texto
 * branco mantém AA (vidro branco + texto branco falharia nesta cena). */

.dr-hero__widget {
	backdrop-filter: blur(28px) saturate(150%);
	-webkit-backdrop-filter: blur(28px) saturate(150%);
	/* Vidro BRANCO + texto ink (pedido 2026-07-09, ref. liquid glass):
	 * o AA vem do texto escuro — vidro branco com texto branco é que era
	 * proibido. 34%: translúcido o bastante p/ a refração aparecer. */
	background-color: color-mix(in srgb, var(--dr-color-surface) 34%, transparent);
	border: 1px solid color-mix(in srgb, var(--dr-color-surface) 60%, transparent);
	border-radius: var(--dr-radius-5);
	/* Bordas especulares internas (luz entrando pelo topo-esquerda e saindo
	 * embaixo-direita) — assinatura do vidro "líquido", dosada p/ vidro escuro. */
	box-shadow:
		0 6px 6px rgba(0, 0, 0, 0.12),
		0 20px 80px rgba(0, 0, 0, 0.15),
		inset 2px 2px 1px 0 color-mix(in srgb, var(--dr-color-surface) 50%, transparent),
		inset -1px -1px 1px 1px color-mix(in srgb, var(--dr-color-surface) 45%, transparent);
	isolation: isolate;
	margin-inline: auto;
	max-width: 32.5rem; /* 520px */
	/* Clipa o deslocamento do filtro líquido do ::before — sem isto o
	 * feDisplacementMap empurra pixels para fora dos cantos arredondados
	 * (manchas escuras quadradas na silhueta do card). */
	overflow: hidden;
	padding: var(--dr-space-4);
	/* Reserva espaço pra linha do botão + "Need help" (ambos position:
	 * absolute mais abaixo — não são irmãos no DOM, então não dá pra
	 * alinhar em flex normal; ver comentário na regra do botão). */
	padding-block-end: calc(var(--dr-space-4) + 3.75rem);
	position: relative;
	width: 100%;
}

/* Camada de refração do vidro líquido: re-amostra o vidro fosco abaixo dela
 * (blur leve) e o distorce com o filtro SVG #dr-glass-distortion inline no
 * pattern. Pinta acima do bg do card e abaixo do conteúdo (z -1 + isolation),
 * então não afeta o contraste do texto. Chromium-only por enquanto: Safari e
 * Firefox ignoram filter:url() sobre backdrop e ficam com o fosco de sempre. */
.dr-hero__widget::before {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-radius: inherit;
	content: "";
	filter: url("#dr-glass-distortion");
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* Fallback elegante sem backdrop-filter: painel branco quase sólido. */
@supports not (backdrop-filter: blur(1px)) {
	.dr-hero__widget {
		background-color: color-mix(in srgb, var(--dr-color-surface) 94%, transparent);
	}
}

/* --- Linha de contexto: pin dourado + label uppercase ------------------------ */

.dr-hero__widget-area {
	align-items: center;
	color: var(--dr-color-text);
	display: flex;
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-bold);
	gap: calc(var(--dr-space-1) / 2);
	letter-spacing: var(--dr-letter-spacing-wide);
	margin-block: 0 var(--dr-space-3);
	text-transform: uppercase;
}

.dr-hero__widget-area-pin {
	/* Dourado strong: é a variante para fundos claros (vidro branco). */
	background-color: var(--dr-color-premium-strong);
	display: block;
	flex-shrink: 0;
	height: 1rem;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.75%202.75%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.75%202.75%200%200%201%200%205.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 1rem;
}

/* --- Tabs Ride / Rental (sem sublinhado — estado ativo só por contraste) ----- */

/* Mesmo raio dos campos abaixo (radius-3), não pill. */
.dr-hero__widget-tabs {
	background-color: color-mix(in srgb, var(--dr-color-ink-900) 10%, transparent);
	border-radius: var(--dr-radius-3);
	display: flex;
	gap: calc(var(--dr-space-1) / 2);
	margin-block-end: var(--dr-space-1);
	padding: calc(var(--dr-space-1) / 2);
}

.dr-hero__widget-tab {
	background: none;
	border: 0;
	border-radius: calc(var(--dr-radius-3) - var(--dr-space-1) / 4);
	color: color-mix(in srgb, var(--dr-color-ink-900) 72%, transparent);
	cursor: pointer;
	flex: 1;
	font-family: inherit;
	font-size: var(--dr-font-size-200);
	font-weight: var(--dr-font-weight-semibold);
	min-height: var(--dr-control-height-sm, 2.25rem);
	padding: var(--dr-space-1) var(--dr-space-2);
	transition: background-color var(--dr-duration-normal) var(--dr-ease-standard),
		box-shadow var(--dr-duration-normal) var(--dr-ease-standard),
		color var(--dr-duration-normal) var(--dr-ease-standard);
}

.dr-hero__widget-tab:hover {
	color: var(--dr-color-text);
}

.dr-hero__widget-tab:focus-visible {
	box-shadow: 0 0 0 2px var(--dr-color-accent);
	outline: none;
}

.dr-hero__widget-tab.is-active {
	background-color: color-mix(in srgb, var(--dr-color-surface) 88%, transparent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
	color: var(--dr-color-text);
	font-weight: var(--dr-font-weight-bold);
}

/* --- Painel Rental: verticais de roadmap (opção "a" adaptada) --------------- */

.dr-hero__widget-rentals {
	display: grid;
	list-style: none;
	margin: 0 0 var(--dr-space-2);
	padding: 0;
}

.dr-hero__widget-rental {
	align-items: center;
	border-bottom: 1px solid color-mix(in srgb, var(--dr-color-ink-900) 14%, transparent);
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-block: var(--dr-space-2);
}

.dr-hero__widget-rental:first-child {
	padding-block-start: 0;
}

.dr-hero__widget-rental-name {
	color: var(--dr-color-text);
	font-size: var(--dr-font-size-300);
	font-weight: var(--dr-font-weight-semibold);
}

.dr-hero__widget-soon {
	background-color: var(--dr-color-premium-subtle);
	border-radius: var(--dr-radius-round);
	color: var(--dr-color-premium-strong);
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-semibold);
	letter-spacing: var(--dr-letter-spacing-wide);
	padding: calc(var(--dr-space-1) / 2) var(--dr-space-1);
	text-transform: uppercase;
}

.dr-hero__widget-rental-copy {
	color: color-mix(in srgb, var(--dr-color-ink-900) 78%, transparent);
	font-size: var(--dr-font-size-200);
	margin-block: 0 var(--dr-space-2);
}

/* --- Campos: label bold acima, ícone dentro do controle ---------------------
 * Labels são <label for> reais (leitor de tela). Ícones genéricos via mask
 * (nenhum SVG de marca — DS §7.1), mesmo tamanho e peso. */

.dr-hero__widget .chbs-form-field-pickup-location,
.dr-hero__widget .chbs-form-field-dropoff-location,
.dr-hero__widget-field {
	margin-block-end: var(--dr-space-1);
}

/* Linhas nativas do plugin (data/hora, transfer type) — mesmo respiro
 * reduzido, sobrescrevendo a margem própria do plugin entre elas. */
.dr-hero__widget .chbs-clear-fix.chbs-form-field-pickup-date-time,
.dr-hero__widget .chbs-form-field-transfer-type {
	margin-block-end: var(--dr-space-1) !important;
}

/* Contêineres de campo do formulário nativo (data/hora, transfer type,
 * persons) têm fundo branco opaco e cantos retos herdados do plugin —
 * quebra o vidro translúcido/arredondado do card. Removendo o fundo próprio
 * do contêiner: só o input/select por dentro (já com radius e cor certos)
 * fica visível, herdando o vidro do card por trás. */
.dr-hero__widget .chbs-form-field,
.dr-hero__widget .chbs-form-field-pickup-date-time,
.dr-hero__widget .chbs-form-field-return-date-time,
.dr-hero__widget .chbs-form-field-transfer-type,
.dr-hero__widget .chbs-form-field-passenger {
	background: none !important;
	border-radius: var(--dr-radius-3) !important;
	box-shadow: none !important;
}

/* Campos "Persons" e "Transfer type" ocultos no card compacto do hero
 * (mantidos na página completa de reserva, onde fazem mais sentido) — não
 * são removidos do formulário nativo, só escondidos nesta instância. */
.dr-hero__widget .chbs-form-field-passenger,
.dr-hero__widget .chbs-form-field-transfer-type {
	display: none !important;
}

/* Peso reduzido: semibold a 88% — hierarquia sem gritar. Fonte: o plugin usa
 * Lato por padrão (nunca no site) — sempre Inter aqui. */
.dr-hero__widget-label,
.dr-hero__widget .chbs-form-field-label {
	color: color-mix(in srgb, var(--dr-color-ink-900) 88%, transparent);
	display: block;
	font-family: var(--dr-font-sans) !important;
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-semibold);
	margin-block-end: calc(var(--dr-space-1) / 2);
}

.dr-hero__widget-control {
	display: block;
	position: relative;
}

/* --- Campos do formulário real (form ID 10007) não previstos no fallback ----
 * O formulário publicado tem mais campos que o fallback estático (transfer
 * type, persons, tooltips, "use my location") e um CSS por-site gerado pelo
 * próprio Chauffeur a partir da cor configurada no admin dele — sobrescrito
 * aqui de propósito, não é preferência estética. Esse CSS usa seletores com
 * "html" na frente (especificidade alta); por isso os overrides de cor abaixo
 * usam !important — é o mesmo padrão de exceção documentado no Design System
 * (§4: "!important, exceto utilitários e acessibilidade" — compatibilidade
 * de plugin de terceiros conta como a mesma exceção). Selectors confirmados
 * no HTML renderizado real, não adivinhados. */

/* Labels sem a classe .chbs-form-field-label (Pickup time, Pickup/Drop-off
 * location, Transfer type) — mesmo tratamento visual dos que já têm a classe. */
.dr-hero__widget .chbs-form-field > label {
	color: color-mix(in srgb, var(--dr-color-ink-900) 88%, transparent);
	display: block;
	font-family: var(--dr-font-sans) !important;
	font-size: var(--dr-font-size-100);
	font-weight: var(--dr-font-weight-semibold);
	margin-block-end: calc(var(--dr-space-1) / 2);
}

/* Ícone de ajuda "?" — só a COR muda (tom neutro, sem herdar a cor de
 * destaque do admin do Chauffeur). Nunca tocar font-family aqui: é uma
 * fonte de ícone (glyph "?" vira caractere via @font-face), trocar quebra
 * o símbolo. */
.dr-hero__widget .chbs-tooltip.chbs-meta-icon-question {
	color: color-mix(in srgb, var(--dr-color-ink-900) 45%, transparent) !important;
}

/* Ícone de pin dos campos Pickup/Drop-off location: o plugin só usa
 * margin-top:6px (não é centralização de verdade — por isso ficava
 * visualmente "em cima"). Tentativa 1 (top:50% contra o campo inteiro,
 * rótulo+input) ficou pior — 50% do campo TODO não é o centro do input,
 * já que o rótulo entra na conta. O input é sempre o último filho, sem
 * margem embaixo, então ancorar pelo RODAPÉ do campo é o que realmente
 * alinha com o centro do input (confirmado via computed style: input
 * ~49px de altura, ícone 16px → 16.5px do rodapé centraliza). */
.dr-hero__widget .chbs-form-field-location-autocomplete {
	position: relative;
}

.dr-hero__widget .chbs-meta-icon-2.chbs-meta-icon-2-location-1 {
	bottom: 1.03rem;
	margin-top: 0 !important;
	top: auto !important;
}

/* Mesmo problema e mesma correção nos ícones de calendário/relógio
 * (Pickup date/time — campos .chbs-form-field-width-50 lado a lado). */
.dr-hero__widget .chbs-form-field.chbs-form-field-width-50 {
	position: relative;
}

.dr-hero__widget .chbs-meta-icon-2.chbs-meta-icon-2-date-1,
.dr-hero__widget .chbs-meta-icon-2.chbs-meta-icon-2-time-1 {
	bottom: 1.03rem;
	margin-top: 0 !important;
	top: auto !important;
}

/* Link "Use my location" dentro do label — mesmo tratamento de link do
 * resto do card (ver .dr-hero__widget-help-copy a). !important porque uma
 * regra do próprio plugin (mais específica) ainda pintava de cinza. */
.dr-hero__widget .chbs-my-location-link a {
	color: var(--dr-color-accent) !important;
	font-family: var(--dr-font-sans) !important;
	font-weight: var(--dr-font-weight-semibold) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: none !important;
}

/* Texto digitado/selecionado nos campos — fonte do site, peso normal (o
 * plugin usa Lato 700 no input e 300 no select por padrão: pesado demais
 * num e fino demais no outro, e nenhum dos dois é a nossa fonte). */
.dr-hero__widget .chbs-form-field input[type="text"],
.dr-hero__widget .chbs-form-field select {
	font-family: var(--dr-font-sans) !important;
	font-weight: var(--dr-font-weight-regular) !important;
}

/* Seta do select "Transfer type" (fonte de ícone, cor controlável via
 * `color`; o próprio jQuery UI Selectmenu envolve o <select> real num botão
 * gerado — .ui-selectmenu-button — antes de renderizar). */
.dr-hero__widget .ui-selectmenu-button .chbs-meta-icon-arrow-vertical-large {
	color: color-mix(in srgb, var(--dr-color-ink-900) 60%, transparent) !important;
}

/* Linha ativa das abas jQuery UI (topo do painel) — o CSS por-site do
 * plugin pinta essa borda com a cor de destaque configurada no admin. */
.dr-hero__widget .chbs-tab.ui-tabs .ui-tabs-panel,
.dr-hero__widget .chbs-tab-custom.ui-tabs .ui-tabs-panel {
	border-top-color: transparent !important;
}

/* jQuery UI (biblioteca base do plugin) aplica padding:1em 1.4em em todo
 * .ui-tabs-panel — zerando o topo (não é a origem principal do espaço, ver
 * próxima regra, mas mantém consistente). */
.dr-hero__widget .ui-tabs .ui-tabs-panel {
	padding-block-start: 0 !important;
}

/* A origem real do espaço entre as abas Ride/Rental e os campos de Pickup:
 * o próprio plugin aplica margin-top:50px em .chbs-main-content (confirmado
 * via computed style ao vivo, não estava em nenhum seletor óbvio no CSS
 * fonte — provavelmente vem de uma media query ou de uma regra bem
 * genérica). Zerando aqui. */
.dr-hero__widget .chbs-main-content {
	margin-block-start: 0 !important;
}

/* Botão "Book now" nativo: precisa bater 100% com o contrato de botão do
 * Design System (mesmo usado em "Start Your Experience" etc.), não só a
 * cor — o plugin também aplica sua própria fonte/altura/radius por padrão.
 * Contrato (DESIGN-SYSTEM.md §8.1): altura 60px, radius 18px, tipografia
 * 18px/700/-0.02em, sem gradiente. */
/* .chbs-main tem position:relative no CSS do plugin (provavelmente só pra
 * conter o overlay de carregamento #chbs-preloader) — isso vira o
 * containing block do botão logo abaixo, fazendo bottom/inset-inline-end
 * ancorarem no fim do FORMULÁRIO, não no fim do CARD. Neutralizando aqui
 * (só dentro do hero) pra "subir" a referência pro .dr-hero__widget de
 * verdade. Efeito colateral aceitável: o preloader passa a cobrir o card
 * inteiro em vez de só a área do form durante o carregamento (breve, raro). */
.dr-hero__widget .chbs-main {
	position: static !important;
}

.dr-hero__widget .chbs-button.chbs-button-style-1.chbs-button-widget-submit {
	align-items: center;
	background-color: var(--dr-color-accent) !important;
	background-image: none !important;
	border-color: var(--dr-color-accent) !important;
	border-radius: 1.125rem !important;
	bottom: var(--dr-space-4);
	box-shadow: none !important;
	color: var(--dr-color-text-inverse, #fff) !important;
	display: inline-flex;
	font-family: var(--dr-font-sans) !important;
	font-size: 1.125rem !important;
	font-weight: var(--dr-font-weight-bold, 700) !important;
	height: 3.75rem;
	inset-inline-end: var(--dr-space-4);
	justify-content: center;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding-inline: var(--dr-space-3) !important;
	/* Ancorado no rodapé do card — "Need help" ocupa o resto da linha à
	 * esquerda (ver .dr-hero__widget-help). Não são irmãos no DOM (o botão
	 * vem do widget nativo do Chauffeur, o help é conteúdo próprio do
	 * pattern), então position:absolute é o jeito de alinhar os dois na
	 * mesma linha sem reestruturar o markup do plugin. */
	position: absolute !important;
	text-transform: none !important;
	transition: background-color var(--dr-duration-normal) var(--dr-ease-standard);
	width: auto !important;
}

.dr-hero__widget .chbs-button.chbs-button-style-1.chbs-button-widget-submit:hover {
	background-color: var(--dr-color-accent-hover) !important;
	border-color: var(--dr-color-accent-hover) !important;
}

.dr-hero__widget-control::before {
	background-color: color-mix(in srgb, var(--dr-color-ink-900) 82%, transparent);
	content: "";
	height: 1.125rem;
	left: var(--dr-space-2);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	pointer-events: none;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 1.125rem;
	z-index: 2;
}

@media (forced-colors: active) {
	.dr-hero__widget-control::before {
		background-color: CanvasText;
	}
}

/* Localização (pickup / destination) */
.dr-hero__widget-field--from .dr-hero__widget-control::before,
.dr-hero__widget-field--where .dr-hero__widget-control::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.75%202.75%200%200%201%200%205.5z'/%3E%3C/svg%3E");
}

/* Calendário (data) */
.dr-hero__widget-field--date .dr-hero__widget-control::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19%204h-1V2h-2v2H8V2H6v2H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2zm0%2016H5V10h14v10zM5%208V6h14v2H5z'/%3E%3C/svg%3E");
}

/* Relógio (horário) */
.dr-hero__widget-field--time .dr-hero__widget-control::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm0%2018a8%208%200%201%201%200-16%208%208%200%200%201%200%2016zm1-13h-2v6l5.25%203.15%201-1.64-4.25-2.51V7z'/%3E%3C/svg%3E");
}

/* Espaço interno para o ícone */
.dr-hero__widget-control .dr-hero__widget-input {
	padding-inline-start: 2.75rem;
}

/* Data + horário lado a lado */
.dr-hero__widget-row {
	display: flex;
	gap: var(--dr-space-1);
}

.dr-hero__widget-row .dr-hero__widget-field {
	flex: 1;
	min-width: 0;
}

/* O campo inteiro abre o seletor nativo de data/hora (o indicador do
 * navegador é esticado e fica invisível sobre o campo). */
.dr-hero__widget-field--date input::-webkit-calendar-picker-indicator,
.dr-hero__widget-field--time input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	height: 100%;
	inset: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.dr-hero__widget-field--date input,
.dr-hero__widget-field--time input {
	position: relative;
}

/* --- Inputs: fundo branco, borda sutil --------------------------------------- */

.dr-hero__widget-input,
.dr-hero__widget .chbs-form-field input[type="text"],
.dr-hero__widget .chbs-form-field select {
	background-color: color-mix(in srgb, var(--dr-color-surface) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--dr-color-ink-900) 24%, transparent);
	border-radius: var(--dr-radius-3);
	color: var(--dr-color-text);
	color-scheme: light;
	font-size: var(--dr-font-size-300);
	min-height: var(--dr-control-height-md);
	padding: var(--dr-space-1) var(--dr-space-2);
	transition: background-color var(--dr-duration-normal) var(--dr-ease-standard),
		border-color var(--dr-duration-normal) var(--dr-ease-standard),
		box-shadow var(--dr-duration-normal) var(--dr-ease-standard);
	width: 100%;
}

.dr-hero__widget-input::placeholder,
.dr-hero__widget .chbs-form-field input[type="text"]::placeholder {
	color: color-mix(in srgb, var(--dr-color-ink-900) 64%, transparent);
}

.dr-hero__widget-input:hover,
.dr-hero__widget .chbs-form-field input[type="text"]:hover,
.dr-hero__widget .chbs-form-field select:hover {
	background-color: color-mix(in srgb, var(--dr-color-surface) 70%, transparent);
	border-color: color-mix(in srgb, var(--dr-color-ink-900) 36%, transparent);
}

/* Foco: petróleo pleno (AA sobre o vidro branco) + glow sutil. */
.dr-hero__widget-input:focus-visible,
.dr-hero__widget .chbs-form-field input[type="text"]:focus-visible,
.dr-hero__widget .chbs-form-field select:focus-visible {
	border-color: var(--dr-color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-color-accent) 22%, transparent);
	outline: none;
}

/* --- Botão "Book your ride" — petrol sólido, seta -------------------------
 * O botão nativo do Chauffeur (chbs-button-widget-submit) agora é
 * position:absolute (ver regra de tipografia acima) — não usa mais esta
 * regra de largura total. Fica só pro CTA genérico do painel Rental. */
.dr-hero__widget-cta {
	margin-block-start: var(--dr-space-3);
	width: 100%;
}

/* Variante secundária (Rental — aviso de lançamento, não é reserva). */
.dr-hero__widget-cta--secondary,
.dr-hero__widget-cta--secondary:hover,
.dr-hero__widget-cta--secondary:focus-visible,
.dr-hero__widget-cta--secondary:active {
	background-color: transparent;
	border: 1px solid color-mix(in srgb, var(--dr-color-ink-900) 35%, transparent);
	box-shadow: none;
	color: var(--dr-color-text);
	margin-block-start: 0;
	transform: none;
}

.dr-hero__widget-cta--secondary:hover,
.dr-hero__widget-cta--secondary:focus-visible {
	background-color: color-mix(in srgb, var(--dr-color-ink-900) 8%, transparent);
	border-color: color-mix(in srgb, var(--dr-color-ink-900) 70%, transparent);
}

/* --- Bloco de ajuda ----------------------------------------------------------- */

/* Ancorado no rodapé do card, ao lado do botão "Book now" (que é
 * position:absolute — ver regra do botão) em vez de embaixo dele. Largura
 * limitada pra nunca encostar no botão em cards estreitos. */
.dr-hero__widget-help {
	align-items: center;
	bottom: var(--dr-space-4);
	display: flex;
	gap: var(--dr-space-1);
	inset-inline-start: var(--dr-space-4);
	max-width: calc(100% - 11.5rem);
	position: absolute;
}

.dr-hero__widget-help-avatar {
	align-items: center;
	background-color: color-mix(in srgb, var(--dr-color-ink-900) 8%, transparent);
	border-radius: var(--dr-radius-round);
	color: color-mix(in srgb, var(--dr-color-ink-900) 82%, transparent);
	display: flex;
	flex-shrink: 0;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.dr-hero__widget-help-avatar svg {
	display: block;
	height: 1.25rem;
	width: 1.25rem;
}

.dr-hero__widget-help-copy {
	color: var(--dr-color-text);
	font-size: var(--dr-font-size-200);
	line-height: var(--dr-line-height-body);
}

.dr-hero__widget-help-copy strong {
	font-weight: var(--dr-font-weight-bold);
}

/* Sobre o vidro branco o petróleo (cor de ação) volta a funcionar. */
.dr-hero__widget-help-copy a {
	color: var(--dr-color-accent);
	font-weight: var(--dr-font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dr-hero__widget-help-meta {
	color: color-mix(in srgb, var(--dr-color-ink-900) 66%, transparent);
	display: block;
	font-size: var(--dr-font-size-100);
}

/* --- Movimento reduzido ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.dr-hero__widget-tab,
		.dr-hero__widget-input,
		.dr-hero__widget .chbs-form-field input[type="text"],
		.dr-hero__widget .chbs-form-field select,
		.dr-hero__widget-cta,
		.dr-hero__widget .chbs-button.chbs-button-widget-submit {
		transition: none;
	}

	.dr-hero__widget-cta:hover,
	.dr-hero__widget-cta:focus-visible,
	.dr-hero__widget .chbs-button.chbs-button-widget-submit:hover {
		transform: none;
	}
}

/* --- Responsivo ------------------------------------------------------------ */

@media (max-width: 48.8125rem) {
	.dr-hero__widget {
		backdrop-filter: blur(28px) saturate(150%);
		-webkit-backdrop-filter: blur(28px) saturate(150%);
		max-width: 100%;
	}
}