/*
 * Geisha Citas de Servicio — Estilos del formulario
 * Scoped a #gcitas-form-wrap para evitar conflictos con Bricks Builder.
 * Usa CSS custom properties de Bricks con fallbacks seguros.
 * Sin !important, sin @font-face, sin colores hardcoded.
 */

/* ── Variables locales (heredan de Bricks donde existen) ─────────────────── */
#gcitas-form-wrap {
	--gcitas-primary:        var(--bricks-color-accent, #32373c);
	--gcitas-primary-hover:  var(--bricks-color-accent-dark, #1a1e21);
	--gcitas-primary-text:   #ffffff;
	--gcitas-secondary-bg:   transparent;
	--gcitas-secondary-text: var(--bricks-color-text, #32373c);
	--gcitas-border:         var(--bricks-color-grey-300, #cccccc);
	--gcitas-border-focus:   var(--gcitas-primary);
	--gcitas-surface:        var(--bricks-color-grey-100, #f8f8f8);
	--gcitas-text:           var(--bricks-color-text, #1a1a1a);
	--gcitas-text-muted:     var(--bricks-color-grey-600, #666666);
	--gcitas-danger:         #d63638;
	--gcitas-warning-bg:     #fff8e1;
	--gcitas-warning-border: #f0ad4e;
	--gcitas-success-bg:     #edfaec;
	--gcitas-success-border: #46b450;
	--gcitas-radius:         var(--bricks-border-radius-sm, 6px);
	--gcitas-radius-pill:    9999px;
	--gcitas-gap:            1.25rem;
	--gcitas-font:           inherit;
	--gcitas-transition:     0.2s ease;
}

/* ── Contenedor principal ─────────────────────────────────────────────────── */
#gcitas-form-wrap {
	font-family: var(--gcitas-font);
	font-size:   inherit;
	color:       var(--gcitas-text);
	max-width:   720px;
	margin:      0 auto;
}

#gcitas-form-wrap *,
#gcitas-form-wrap *::before,
#gcitas-form-wrap *::after {
	box-sizing: border-box;
}

/* ── Barra de progreso ────────────────────────────────────────────────────── */
.gcitas-progress {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   2rem;
	padding:         0;
	list-style:      none;
	gap:             0;
}

.gcitas-progress-step {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.4rem;
	flex:           0 0 auto;
}

.gcitas-progress-dot {
	position:        relative;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	border:          2px solid var(--gcitas-border);
	background:      #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background var(--gcitas-transition), border-color var(--gcitas-transition);
}

.gcitas-progress-num {
	font-size:   0.8em;
	font-weight: 600;
	color:       var(--gcitas-text-muted);
	transition:  color var(--gcitas-transition);
}

.gcitas-progress-check {
	display:  none;
	color:    #fff;
	font-size: 1em;
}

.gcitas-progress-step.is-active .gcitas-progress-dot {
	background:    var(--gcitas-primary);
	border-color:  var(--gcitas-primary);
}

.gcitas-progress-step.is-active .gcitas-progress-num {
	color: #fff;
}

.gcitas-progress-step.is-completed .gcitas-progress-dot {
	background:   var(--gcitas-primary);
	border-color: var(--gcitas-primary);
}

.gcitas-progress-step.is-completed .gcitas-progress-num {
	display: none;
}

.gcitas-progress-step.is-completed .gcitas-progress-check {
	display: block;
}

.gcitas-progress-label {
	font-size:   0.7em;
	color:       var(--gcitas-text-muted);
	text-align:  center;
	white-space: nowrap;
	transition:  color var(--gcitas-transition);
}

.gcitas-progress-step.is-active .gcitas-progress-label,
.gcitas-progress-step.is-completed .gcitas-progress-label {
	color: var(--gcitas-primary);
}

.gcitas-progress-connector {
	flex:             1;
	height:           2px;
	background:       var(--gcitas-border);
	margin-bottom:    calc(36px / 2 + 0.4rem + 0.7rem / 2); /* alinear con el dot */
	transition:       background var(--gcitas-transition);
}

.gcitas-progress-connector.is-completed {
	background: var(--gcitas-primary);
}

/* ── Pasos del formulario ─────────────────────────────────────────────────── */
.gcitas-step {
	display: none;
}

.gcitas-step.is-active {
	display: block;
}

.gcitas-step-title {
	font-size:     1.2em;
	font-weight:   600;
	margin:        0 0 1.5rem;
	color:         var(--gcitas-text);
	padding-bottom: 0.75rem;
	border-bottom:  1px solid var(--gcitas-border);
}

/* ── Grid de campos ───────────────────────────────────────────────────────── */
.gcitas-fields-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--gcitas-gap);
}

/* ── Campo individual ─────────────────────────────────────────────────────── */
.gcitas-field {
	display:        flex;
	flex-direction: column;
	gap:            0.35rem;
}

.gcitas-field--full-width {
	grid-column: 1 / -1;
}

.gcitas-label {
	font-size:   0.875em;
	font-weight: 500;
	color:       var(--gcitas-text);
}

.gcitas-required {
	color: var(--gcitas-danger);
	margin-left: 2px;
}

.gcitas-optional {
	color:       var(--gcitas-text-muted);
	font-weight: normal;
	font-size:   0.8em;
}

/* ── Inputs y selects ─────────────────────────────────────────────────────── */
.gcitas-input,
.gcitas-select {
	width:       100%;
	padding:     0.6rem 0.9rem;
	font-family: inherit;
	font-size:   inherit;
	color:       var(--gcitas-text);
	background:  #fff;
	border:      1px solid var(--gcitas-border);
	border-radius: var(--gcitas-radius);
	transition:  border-color var(--gcitas-transition), box-shadow var(--gcitas-transition);
	appearance:  auto;
	outline:     none;
}

.gcitas-input:focus,
.gcitas-select:focus {
	border-color: var(--gcitas-border-focus);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--gcitas-primary) 20%, transparent);
}

.gcitas-input:disabled,
.gcitas-select:disabled {
	background:  var(--gcitas-surface);
	color:       var(--gcitas-text-muted);
	cursor:      not-allowed;
}

.gcitas-input--uppercase {
	text-transform: uppercase;
}

.gcitas-select-wrap {
	position: relative;
}

.gcitas-field.has-error .gcitas-input,
.gcitas-field.has-error .gcitas-select {
	border-color: var(--gcitas-danger);
}

/* ── Spinner de carga de campos ───────────────────────────────────────────── */
.gcitas-field-spinner {
	position:     absolute;
	right:        10px;
	top:          50%;
	transform:    translateY(-50%);
	width:        16px;
	height:       16px;
	border:       2px solid var(--gcitas-border);
	border-top:   2px solid var(--gcitas-primary);
	border-radius: 50%;
	animation:    gcitas-spin 0.7s linear infinite;
}

.gcitas-field-spinner[hidden] {
	display: none;
}

@keyframes gcitas-spin {
	to { transform: translateY(-50%) rotate(360deg); }
}

/* ── Mensajes de error ────────────────────────────────────────────────────── */
.gcitas-error-msg {
	display:     none;
	font-size:   0.8em;
	color:       var(--gcitas-danger);
	margin-top:  2px;
}

/* ── Radio cards (tipo de servicio y contacto) ────────────────────────────── */
.gcitas-radio-group {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	margin-bottom:  1rem;
}

.gcitas-group-legend {
	font-size:   0.875em;
	font-weight: 500;
	color:       var(--gcitas-text);
	margin:      0 0 0.5rem;
}

.gcitas-radio-card {
	display:       flex;
	align-items:   center;
	gap:           0.75rem;
	padding:       0.85rem 1.1rem;
	border:        1.5px solid var(--gcitas-border);
	border-radius: var(--gcitas-radius);
	cursor:        pointer;
	transition:    border-color var(--gcitas-transition), background var(--gcitas-transition);
}

.gcitas-radio-card:hover {
	border-color: var(--gcitas-primary);
	background:   var(--gcitas-surface);
}

.gcitas-radio-card input[type="radio"] {
	width:  18px;
	height: 18px;
	accent-color: var(--gcitas-primary);
	flex-shrink: 0;
}

.gcitas-radio-card:has(input:checked) {
	border-color: var(--gcitas-primary);
	background:   color-mix(in srgb, var(--gcitas-primary) 6%, transparent);
}

.gcitas-radio-card__body {
	display:        flex;
	flex-direction: column;
	gap:            0.2rem;
}

.gcitas-radio-card__title {
	font-weight: 500;
	font-size:   0.95em;
}

.gcitas-radio-card__desc {
	font-size: 0.8em;
	color:     var(--gcitas-text-muted);
}

/* Radio cards inline (contacto) */
.gcitas-radio-group:has(.gcitas-radio-card--inline) {
	flex-direction: row;
	flex-wrap:      wrap;
}

.gcitas-radio-card--inline {
	flex:       1 1 auto;
	min-width:  130px;
	justify-content: center;
	text-align: center;
}

/* ── Resumen del Paso 5 ────────────────────────────────────────────────────── */
.gcitas-summary {
	background:    var(--gcitas-surface);
	border:        1px solid var(--gcitas-border);
	border-radius: var(--gcitas-radius);
	padding:       1.25rem;
	margin-bottom: 1.5rem;
}

.gcitas-summary-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.9em;
}

.gcitas-summary-table th,
.gcitas-summary-table td {
	padding:     0.45rem 0.6rem;
	text-align:  left;
	border-bottom: 1px solid var(--gcitas-border);
}

.gcitas-summary-table tr:last-child th,
.gcitas-summary-table tr:last-child td {
	border-bottom: none;
}

.gcitas-summary-table th {
	font-weight: 600;
	color:       var(--gcitas-text-muted);
	white-space: nowrap;
	width:       35%;
}

/* ── Avisos / notices ─────────────────────────────────────────────────────── */
.gcitas-notice {
	padding:       0.85rem 1rem;
	border-radius: var(--gcitas-radius);
	font-size:     0.875em;
	margin-top:    0.75rem;
}

.gcitas-notice--error {
	background:   #fdf2f2;
	border:       1px solid var(--gcitas-danger);
	color:        var(--gcitas-danger);
}

.gcitas-notice--warning {
	background:    var(--gcitas-warning-bg);
	border:        1px solid var(--gcitas-warning-border);
	color:         #7a5000;
}

.gcitas-notice p {
	margin: 0;
}

.gcitas-whatsapp-link {
	display:     inline-block;
	margin-top:  0.4rem;
	font-weight: 600;
	color:       #25d366;
	text-decoration: underline;
}

/* ── Navegación de pasos ──────────────────────────────────────────────────── */
.gcitas-step-nav {
	display:        flex;
	justify-content: flex-end;
	gap:            0.75rem;
	margin-top:     1.75rem;
	padding-top:    1rem;
	border-top:     1px solid var(--gcitas-border);
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.gcitas-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           0.4rem;
	padding:       0.65rem 1.4rem;
	font-family:   inherit;
	font-size:     0.95em;
	font-weight:   600;
	border:        2px solid transparent;
	border-radius: var(--gcitas-radius-pill);
	cursor:        pointer;
	transition:    background var(--gcitas-transition), color var(--gcitas-transition),
	               border-color var(--gcitas-transition), opacity var(--gcitas-transition);
	white-space:   nowrap;
	text-decoration: none;
}

.gcitas-btn--primary {
	background:   var(--gcitas-primary);
	color:        var(--gcitas-primary-text);
	border-color: var(--gcitas-primary);
}

.gcitas-btn--primary:hover:not(:disabled) {
	background:   var(--gcitas-primary-hover);
	border-color: var(--gcitas-primary-hover);
}

.gcitas-btn--secondary {
	background:   var(--gcitas-secondary-bg);
	color:        var(--gcitas-secondary-text);
	border-color: var(--gcitas-border);
}

.gcitas-btn--secondary:hover:not(:disabled) {
	background:   var(--gcitas-surface);
	border-color: var(--gcitas-primary);
	color:        var(--gcitas-primary);
}

.gcitas-btn:disabled {
	opacity: 0.45;
	cursor:  not-allowed;
}

.gcitas-btn--submit {
	min-width: 160px;
	justify-content: center;
}

/* Spinner dentro del botón de envío */
.gcitas-btn-spinner {
	width:          16px;
	height:         16px;
	border:         2px solid rgba(255,255,255,0.4);
	border-top:     2px solid #fff;
	border-radius:  50%;
	animation:      gcitas-spin 0.7s linear infinite;
	flex-shrink:    0;
}

.gcitas-btn-spinner[hidden] {
	display: none;
}

/* ── Mensaje de agradecimiento (sin redirect) ──────────────────────────────── */
.gcitas-thank-you {
	text-align:    center;
	padding:       3rem 1.5rem;
	background:    var(--gcitas-success-bg);
	border:        1px solid var(--gcitas-success-border);
	border-radius: var(--gcitas-radius);
}

.gcitas-thank-you h3 {
	font-size:    1.4em;
	font-weight:  600;
	margin:       0 0 0.75rem;
	color:        var(--gcitas-text);
}

.gcitas-thank-you p {
	color:  var(--gcitas-text-muted);
	margin: 0;
}

/* ── Error de configuración del shortcode ─────────────────────────────────── */
.gcitas-config-error {
	padding:       1rem;
	background:    #fdf2f2;
	border:        1px solid var(--gcitas-danger);
	border-radius: var(--gcitas-radius);
	color:         var(--gcitas-danger);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.gcitas-fields-grid {
		grid-template-columns: 1fr;
	}

	.gcitas-progress-label {
		display: none;
	}

	.gcitas-progress-connector {
		margin-bottom: calc(36px / 2);
	}

	.gcitas-step-nav {
		flex-direction: column-reverse;
	}

	.gcitas-btn {
		width:          100%;
		justify-content: center;
	}

	.gcitas-radio-group:has(.gcitas-radio-card--inline) {
		flex-direction: column;
	}
}