/*
  TARGET Agendamento — estilos do fluxo de agendamento (shortcode [target_agendamento]).
  Reaproveita os custom properties de tokens.css do tema (cor/tipografia/espaçamento) pra manter
  consistência visual, mas vive isolado sob o prefixo BEM `.ta-` — não depende das classes `l-`/
  de componentes do tema, e o tema não depende de nada daqui.
*/

.ta-booking {
	max-width: 640px;
	margin: 0 auto;
	font-family: var(--font-body, sans-serif);
	color: var(--texto-900, #1A1B1E);
}

.ta-booking__passos {
	display: flex;
    justify-content: space-between;		
	list-style: none;
	margin: 0 0 var(--space-5, 32px);
	padding: 0;
    font-family: var(--font-display, sans-serif);
	font-size: var(--fs-body-md, 1rem);
	color: var(--texto-muted, #5B5F68);
    text-transform: uppercase;
}

.ta-booking__passos li {
    background: var(--branco, #FFFFFF);
	border: 1px solid var(--texto-muted, #5B5F68);
	border-radius: 4px;
    padding: 8px 16px;	
}

.ta-booking__passos li.is-atual {
	background: var(--vermelho-target, #C21E1E);
    border: 1px solid var(--vermelho-target, #C21E1E);
	color: var(--branco, #fff);	
}

.ta-booking__passos li.is-concluido {
	color: var(--verde-tecnico, #4C8B6B);
}

.ta-booking__erro {
	background: #FCEBEA;
	border: 1px solid var(--vermelho-target, #C21E1E);
	color: var(--vermelho-target-dark, #9A1717);
	border-radius: var(--radius-sm, 4px);
	padding: var(--space-3, 16px);
	margin-bottom: var(--space-4, 24px);
}

.ta-step__titulo {
	font-family: var(--font-display, sans-serif);
	font-size: var(--fs-h3, 1.875rem);
	margin-bottom: 20px;
	text-transform: uppercase;
}

.ta-resumo-etapa {
	font-family: var(--font-display, sans-serif);
	font-size: 1.25rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
	border: 1px solid var(--texto-muted, #5B5F68);
	border-radius: 4px;
	padding: 8px 16px;
}

.ta-resumo-etapa:empty {
	display: none;
}

.ta-legenda {
	display: block;
	font-size: var(--fs-body-md, 1rem);
	color: var(--vermelho-target, #C21E1E);
	margin: -15px 0 20px;
}

.ta-campo input.is-invalido {
	border-color: var(--vermelho-target, #C21E1E);
	box-shadow: 0 0 0 3px rgba(194, 30, 30, 0.25);
}

.ta-checkbox input.is-invalido {
	box-shadow: 0 0 0 3px rgba(194, 30, 30, 0.25);
}

.ta-campo__erro {
	display: block;
	font-size: var(--fs-body-md, 1rem);
	color: var(--vermelho-target, #C21E1E);	
	min-height: 1em;
}

.ta-campo__erro:empty {
	display: none;
}

.ta-campo {
	display: flex;
	flex-direction: column;
	gap: var(--space-1, 8px);
	margin-bottom: var(--space-3, 16px);
}

.ta-campo-data{
    width: 100%;
    max-width: 276px;
}

.ta-campo label,
.ta-checkbox {
	font-size: var(--fs-body-md, 1rem);
	color: var(--texto-muted, #5B5F68);
}

.ta-campo input,
.ta-campo select {
    background: var(--branco, #fff);
	padding: var(--space-2, 12px);
	border: 1px solid #CBCBCB;
	border-radius: var(--radius-sm, 4px);
	font-size: var(--fs-body-md, 1rem);
}

/* Campo de data. O reset global do tema (layout.css) zera o appearance de todo
   input, e no iOS/Android isso faz o type="date" perder o placeholder
   dd/mm/aaaa e o ícone de calendário. Não dá pra devolver appearance: auto:
   o Chrome Android passa a desenhar o controle nativo, com cara de select.
   Então o campo segue com o visual dos outros inputs e, em telas de toque,
   o placeholder e o ícone são desenhados aqui (classe is-vazio alternada em
   booking.js). No desktop o campo nativo já mostra os dois. */
.ta-campo input[type="date"] {
	width: 100%;
	min-height: 48px; /* iOS Safari colapsa a altura sem isso */
	text-align: left; /* iOS centraliza o valor por padrão */
}

@media (pointer: coarse) {
	.ta-campo input[type="date"] {
		position: relative;
		padding-right: 48px;
		background: var(--branco, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 14px center / 22px 22px;
	}

	/* Campo todo clicável: o toque em qualquer ponto abre o seletor. */
	.ta-campo input[type="date"]::-webkit-calendar-picker-indicator {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	/* Vazio: esconde os segmentos nativos e mostra o placeholder. */
	.ta-campo input[type="date"].is-vazio::-webkit-datetime-edit {
		display: none;
	}

	.ta-campo input[type="date"].is-vazio::before {
		content: "dd/mm/aaaa";
		color: var(--texto-muted, #5B5F68);
	}
}

.ta-checkbox {
	margin: var(--space-4, 24px) 0;
}
.ta-checkbox input[type="checkbox"]{
    display: inline-block;
    vertical-align: top;
}
.ta-checkbox p {
	display: inline-block;
	vertical-align: top;
	margin: 4px 0 0 6px;
	width: max-content;
	max-width: calc( 100% - 36px );
}
.ta-checkbox p a{
    color: var(--texto-muted, #5B5F68);
    text-decoration: underline;
}
.ta-checkbox p a:hover{
    color: var(--vermelho-target, #C21E1E);
}
.ta-checkbox .ta-campo__erro {	
	width: 100%;	
    margin-top: 10px;
}

/* Mesma aparência dos radio do formulário de contato (.form__radio-option). */
.ta-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin: 0;
	border: 2px solid var(--vermelho-target, #C21E1E);
	border-radius: 100%;
	cursor: pointer;
}

.ta-checkbox input[type="checkbox"]::before {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 100%;
	background: var(--vermelho-target, #C21E1E);
	opacity: 0;
	transition: opacity var(--transition-base, 300ms ease);
}

.ta-checkbox input[type="checkbox"]:checked::before {
	opacity: 1;
}

.ta-step__acoes {
	display: flex;
	gap: var(--space-3, 16px);
	margin-top: var(--space-5, 32px);
}

.ta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
    min-width: 180px;
	padding: 8px 20px;
	border-radius: 100px;
	border: 1px solid var(--vermelho-target, #C21E1E);
	background: var(--vermelho-target, #C21E1E);
	color: var(--branco, #fff);
	cursor: pointer;
	transition: var(--transition-base, 300ms ease);
	gap: 10px;
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 18px;
    margin-top: 20px;
}

.ta-button:hover {
	background: var(--vermelho-target-dark, #9A1717);
	border-color: var(--vermelho-target-dark, #9A1717);
}

.ta-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ta-button--outline {
    min-width: 100px;
	background: transparent;
	color: var(--vermelho-target, #C21E1E);
}

.ta-button--outline:hover {
	background: var(--cinza-100, #F2F3F5);
}

.ta-horarios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 12px);
	margin: var(--space-4, 24px) 0;
}

.ta-horarios__opcao {
	padding: var(--space-2, 12px) var(--space-3, 16px);
	border: 1px solid #CBCBCB;
	border-radius: var(--radius-sm, 4px);
	background: var(--branco, #fff);
	cursor: pointer;
	font-family: var(--font-mono, monospace);
}

.ta-horarios__opcao:hover{
	border-color: var(--vermelho-target, #C21E1E);
	color: var(--vermelho-target, #C21E1E);
}

.ta-horarios__opcao.is-selecionado {
	background: var(--vermelho-target, #C21E1E);
	border-color: var(--vermelho-target, #C21E1E);
	color: var(--branco, #fff);
}

.ta-horarios__vazio {
	color: var(--vermelho-target, #C21E1E);
	font-size: 1.25rem;
}

.ta-countdown {
	font-family: var(--font-mono, monospace);
	font-size: 1.25rem;
	color: var(--branco, #FFFFFF);
	margin-bottom: var(--space-4, 24px);
	background: var(--vermelho-target, #C21E1E);
	padding: 10px 20px;
	text-align: center;
	border-radius: var(--radius-sm, 4px);
}
.ta-metodo-toggle {
	display: flex;
	gap: var(--space-2, 12px);
	margin-bottom: var(--space-4, 24px);
}

.ta-metodo-toggle__opcao {
	flex: 1;
	padding: 20px;
	border: 1px solid var(--linha-clara, #DCDFE3);
	border-radius: var(--radius-sm, 4px);
	background: var(--branco, #fff);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	font-family: var(--font-display, sans-serif);
	font-size: 1.25rem;
	text-transform: uppercase;
	line-height: 1;
}
.ta-metodo-toggle__opcao svg {
	width: 20px;
}
.ta-metodo-toggle__opcao path{
    fill: var(--texto-900, #1A1B1E);
}

.ta-metodo-toggle__opcao.is-active {
	border-color: var(--vermelho-target, #C21E1E);
	color: var(--vermelho-target, #C21E1E);
	font-weight: 600;
}

.ta-metodo-toggle__opcao.is-active path{
    fill: var(--vermelho-target, #C21E1E);
}

.ta-campo-linha {
	display: flex;
	gap: var(--space-3, 16px);
}

.ta-campo-linha .ta-campo {
	flex: 1;
	min-width: 0;
}

.ta-pix-qr {
	display: block;
	max-width: 220px;
	margin: 0 auto var(--space-3, 16px);
}

.ta-pix-copia-cola {
	width: 100%;
	min-height: 4rem;
	font-family: var(--font-mono, monospace);
	font-size: var(--fs-mono-xs, 0.75rem);
	padding: var(--space-2, 12px);
	border: 1px solid var(--linha-clara, #DCDFE3);
	border-radius: var(--radius-sm, 4px);
	margin-bottom: var(--space-3, 16px);
}
.ta-plano-resumo {
	background: var(--branco, #FFFFFF);
	border-radius: var(--radius-md, 8px);
	padding: var(--space-4, 24px);
	border: 1px solid var(--vermelho-target, #C21E1E);
}
.ta-plano-resumo h3{
    font-family: var(--font-display, sans-serif);
    font-size: var(--fs-h4, 1.5rem);
    margin-bottom: 1em;
    text-transform: uppercase;
}
.data-ta-confirmacao-resumo strong{
    font-weight: 600;
}
.ta-agendamento-info {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: inherit;
	font-size: 16px;
	background: #fff;	
	border: 1px solid #C21E1E;
	border-radius: 6px;
	overflow: hidden;
    margin-bottom: 1em;
}
.ta-agendamento-info td {
	padding: 10px 15px;
	border-bottom: 1px solid #C21E1E;
}
.ta-agendamento-info tr:last-child td {
    border-bottom: none;
}
.ta-agendamento-info td:first-child {
	width: 35%;
	background: #F2F3F5;
}
.ta-agendamento-info td:last-child {
    font-weight: 600;    
}
.ta-agendamento-info strong {
    font-weight: 600;
}
/* Primeiro item */
.ta-agendamento-info tr:first-child td:last-child {
    font-size: 17px;
}
.ta-contato-info{
    width: 100%;
    padding: 10px 15px;
	background: #fff;	
	border: 1px solid #C21E1E;
	border-radius: 6px;
    margin-bottom: 1em;
}
.ta-contato-info p{
    margin-bottom: 0;
}

.data-ta-confirmacao-resumo p.assinatura{
    font-size: 18px;
}

/* Mobile */
@media (max-width: 768px) {  
    .ta-booking__passos {        
        justify-content: start;
        flex-wrap: wrap;
        gap: var(--space-2, 12px);       
    }
    .ta-countdown {       
        font-size: 1rem;       
    }
    .ta-metodo-toggle__opcao {       
        padding: 16px 4px;       
        font-size: 1.1rem;           
    }
    .ta-agendamento-info td:first-child {
        width: 40%;
    }
}

@media (prefers-reduced-motion: reduce) {
	.ta-button {
		transition: none;
	}
}