/* Odonto Agenda - Formulário público de agendamento
   Layout "card" (widget avulso) e layout "hero" (seção completa de entrada do site).
   v2: card mais largo, espaçamento generoso, visual mais atual. */

.odag-widget {
	--odag-primary: #1FAB89;
	--odag-secondary: #2196F3;
	--odag-bg: #FFFFFF;
	--odag-font: #1B2A2F;
	--odag-button: #1FAB89;
	--odag-button-hover: #178F71;

	--odag-border: color-mix(in srgb, var(--odag-font) 12%, transparent);
	--odag-muted: color-mix(in srgb, var(--odag-font) 56%, transparent);
	--odag-surface: color-mix(in srgb, var(--odag-font) 3%, white);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--odag-font);
}
.odag-widget *,
.odag-widget *::before,
.odag-widget *::after { box-sizing: border-box; }

.odag-layout-card { max-width: 660px; margin: 0 auto; }

/* ---------- HERO LAYOUT ---------- */
.odag-hero {
	display: grid;
	grid-template-columns: 1fr 0.92fr;
	gap: clamp(36px, 6vw, 84px);
	align-items: center;
	max-width: 1360px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 40px);
}
.odag-hero-left { animation: odagSlideIn .6s ease both; }
.odag-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--odag-muted);
	margin-bottom: 20px;
}
.odag-eyebrow-line { width: 26px; height: 2px; background: var(--odag-primary); display: inline-block; }

.odag-hero-title {
	font-size: clamp(34px, 4.8vw, 58px);
	line-height: 1.1;
	font-weight: 750;
	margin: 0 0 22px;
	letter-spacing: -.02em;
}
.odag-highlight { color: var(--odag-primary); }

.odag-hero-subtitle {
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.65;
	color: var(--odag-muted);
	max-width: 48ch;
	margin: 0 0 34px;
}

.odag-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.odag-btn-whatsapp { padding: 17px 30px; }
.odag-rating { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.odag-stars { color: #E8A93B; letter-spacing: 2px; font-size: 15px; }
.odag-muted-inline { color: var(--odag-muted); }

.odag-hero-stats {
	display: flex;
	gap: clamp(28px, 4vw, 60px);
	padding-top: 28px;
	border-top: 1px solid var(--odag-border);
}
.odag-hero-stat strong { display: block; font-size: clamp(24px, 2.6vw, 32px); font-weight: 750; line-height: 1.1; }
.odag-hero-stat span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--odag-muted); }

.odag-hero-right { animation: odagSlideIn .6s .1s ease both; }

@keyframes odagSlideIn {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
	.odag-hero { grid-template-columns: 1fr; }
	.odag-hero-stats { flex-wrap: wrap; row-gap: 18px; }
}

/* ---------- CARD / WIZARD ---------- */
.odag-card {
	position: relative;
	background: var(--odag-bg);
	color: var(--odag-font);
	border-radius: 28px;
	padding: clamp(32px, 4.5vw, 52px);
	box-shadow: 0 1px 2px rgba(20,40,40,.04), 0 24px 64px -12px rgba(20, 40, 40, 0.18);
	border: 1px solid var(--odag-border);
	animation: odagCardIn .5s ease both;
	overflow: hidden;
}
@keyframes odagCardIn {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.odag-availability-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: color-mix(in srgb, var(--odag-primary) 12%, white);
	color: var(--odag-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	padding: 9px 16px;
	border-radius: 999px;
	margin-bottom: 24px;
}
.odag-pulse-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--odag-primary);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--odag-primary) 60%, transparent);
	animation: odagPulse 1.8s infinite;
}
@keyframes odagPulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--odag-primary) 55%, transparent); }
	70% { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.odag-header { margin-bottom: 30px; }
.odag-layout-card .odag-header { text-align: center; }
.odag-logo { max-width: 72px; max-height: 72px; object-fit: contain; margin-bottom: 14px; }
.odag-header h3 { margin: 0; font-size: clamp(21px, 2.4vw, 25px); font-weight: 750; letter-spacing: -.01em; }
.odag-subtitle { color: var(--odag-muted); font-size: 14.5px; margin: 8px 0 0; line-height: 1.55; }

/* ---------- FORMULÁRIO DE PÁGINA ÚNICA (sem etapas) ---------- */
.odag-form-single { display: flex; flex-direction: column; gap: 20px; }

.odag-row { display: flex; gap: 16px; flex-wrap: wrap; }
.odag-row .odag-field { flex: 1; min-width: 180px; }

.odag-field label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 8px;
	color: color-mix(in srgb, var(--odag-font) 82%, transparent);
}
.odag-field input,
.odag-field select,
.odag-field textarea {
	width: 100%;
	padding: 15px 18px;
	border: 1.5px solid #e3e9e7;
	border-radius: 14px;
	font-size: 15px;
	color: var(--odag-font);
	background: var(--odag-surface);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}
.odag-field select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%2394a29d' d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%2394a29d' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
}
.odag-field select:disabled { color: var(--odag-muted); cursor: not-allowed; }
.odag-field input:hover,
.odag-field select:hover,
.odag-field textarea:hover { border-color: color-mix(in srgb, var(--odag-primary) 35%, #e3e9e7); }
.odag-field input:focus,
.odag-field select:focus,
.odag-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--odag-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--odag-primary) 15%, transparent);
}
.odag-field input.is-invalid,
.odag-field select.is-invalid,
.odag-row input.is-invalid,
.odag-row select.is-invalid,
input.is-invalid,
select.is-invalid {
	border-color: #d9534f;
}
.odag-field-error {
	display: none;
	color: #a3312f;
	font-size: 12.5px;
	font-weight: 600;
	margin-top: 6px;
}
.odag-field-error.is-visible { display: block; animation: odagCardIn .25s ease both; }

.odag-btn-block { width: 100%; }

.odag-btn {
	position: relative;
	overflow: hidden;
	border: none;
	border-radius: 999px;
	padding: 16px 26px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
	font-family: inherit;
}
.odag-btn-submit {
	background: var(--odag-button);
	color: #fff;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--odag-button) 42%, transparent);
	flex: 1;
}
.odag-btn-submit:hover { background: var(--odag-button-hover); transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--odag-button) 50%, transparent); }
.odag-btn-submit:active { transform: scale(.97); }
.odag-btn-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.odag-btn-ghost {
	background: transparent;
	color: var(--odag-muted);
	padding: 16px 20px;
}
.odag-btn-ghost:hover { color: var(--odag-font); }

.odag-btn-outline-inv {
	background: transparent;
	border: 1.5px solid var(--odag-primary);
	color: var(--odag-primary);
}
.odag-btn-outline-inv:hover { background: color-mix(in srgb, var(--odag-primary) 10%, white); }

.odag-btn-pdf {
	width: 100%;
	margin-bottom: 12px;
	text-decoration: none;
}

.odag-btn-spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
	animation: odagSpin .7s linear infinite;
}
.odag-btn.is-loading .odag-btn-spinner { display: inline-block; }
.odag-btn.is-loading .odag-btn-text { opacity: .85; }
@keyframes odagSpin { to { transform: rotate(360deg); } }

.odag-feedback {
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: 14px;
	font-size: 14px;
	display: none;
	animation: odagCardIn .35s ease both;
}
.odag-feedback.is-success { display: block; background: color-mix(in srgb, var(--odag-primary) 15%, white); color: #10714F; }
.odag-feedback.is-error { display: block; background: #fdeceb; color: #a3312f; }

/* Success state */
.odag-success { text-align: center; padding: 28px 8px 8px; animation: odagCardIn .4s ease both; }
.odag-success-icon {
	width: 64px; height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--odag-primary) 15%, white);
	color: var(--odag-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 28px;
	animation: odagPopIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes odagPopIn {
	from { transform: scale(0); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.odag-success h3 { margin: 0 0 10px; font-size: 21px; }
.odag-success p { color: var(--odag-muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 26px; }

.odag-ripple {
	position: absolute;
	width: 10px; height: 10px;
	background: rgba(255,255,255,.55);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	pointer-events: none;
	animation: odagRipple .5s ease-out forwards;
}
@keyframes odagRipple { to { transform: translate(-50%, -50%) scale(20); opacity: 0; } }

@media (max-width: 560px) {
	.odag-card { padding: 26px 22px; border-radius: 22px; }
	.odag-row { gap: 14px; }
}