/* ==========================================================================
   Academia — Rediseño del CHECKOUT de Tutor (motor Native)
   Proyecto Polilactics Academy. Paleta corporativa de la referencia.
   TODO va scopeado a .tutor-checkout-page para no afectar el resto del sitio.
   ========================================================================== */

.tutor-checkout-page {
	--aca-navy: #13303F;
	--aca-blue: #5092B4;
	--aca-red: #E60203;
	--aca-red-dark: #C40002;
	--aca-text: #5C7180;
	--aca-border: #E8EDF1;
	--aca-soft: #EAF2F6;
	--aca-bg: #F5F8FC;

	background: var(--aca-bg);
	color: var(--aca-navy);
}

/* --- Contenedor / respiración general --- */
.tutor-checkout-page .tutor-checkout-container {
	padding-top: 8px;
	padding-bottom: 64px;
}

/* --- Las dos columnas como tarjetas --- */
.tutor-checkout-page .tutor-checkout-billing,
.tutor-checkout-page .tutor-checkout-details {
	background: #fff;
	border: 1px solid var(--aca-border);
	border-radius: 16px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(19, 48, 63, .06);
}

/* --- Títulos de sección ("Dirección de facturación", "Detalles del pedido") --- */
.tutor-checkout-page .tutor-checkout-billing > h2,
.tutor-checkout-page .tutor-checkout-billing > h3,
.tutor-checkout-page .tutor-checkout-details-inner > h2,
.tutor-checkout-page .tutor-checkout-details-inner > h3,
.tutor-checkout-page .tutor-fs-5 {
	color: var(--aca-navy);
	font-weight: 700;
}
.tutor-checkout-page .tutor-checkout-billing > h2,
.tutor-checkout-page .tutor-checkout-billing > h3 {
	margin: 0 0 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--aca-border);
	font-size: 20px;
}

/* --- Labels --- */
.tutor-checkout-page .tutor-form-label {
	display: block;
	margin-bottom: 7px;
	color: var(--aca-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}

/* --- Inputs, textarea y selects --- */
.tutor-checkout-page .tutor-form-control,
.tutor-checkout-page input[type="text"],
.tutor-checkout-page input[type="email"],
.tutor-checkout-page input[type="tel"],
.tutor-checkout-page input[type="number"],
.tutor-checkout-page textarea,
.tutor-checkout-page select {
	width: 100%;
	padding: 7px 14px;
	height: auto !important;
	min-height: 0 !important;
	font-size: 15px;
	line-height: 1.35;
	color: var(--aca-navy);
	background: #fff;
	border: 1.5px solid #AFC3D6 !important;
	border-radius: 10px !important;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tutor-checkout-page .tutor-form-control::placeholder,
.tutor-checkout-page input::placeholder,
.tutor-checkout-page textarea::placeholder {
	color: #9AA7B2;
}
.tutor-checkout-page .tutor-form-control:hover,
.tutor-checkout-page select:hover {
	border-color: #CFDBE6;
}
.tutor-checkout-page .tutor-form-control:focus,
.tutor-checkout-page input:focus,
.tutor-checkout-page textarea:focus,
.tutor-checkout-page select:focus {
	outline: none;
	border-color: var(--aca-blue);
	box-shadow: 0 0 0 3px rgba(80, 146, 180, .18);
}

/* Select: flecha propia (chevron) + espacio a la derecha */
.tutor-checkout-page select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM1QzcxODAiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ii8+PC9zdmc+") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px !important;
}

/* Gutter horizontal entre columnas (Tutor usa .tutor-g-0 = pegadas) + separación
   vertical uniforme entre filas. Con box-sizing:border-box el 50% se conserva. */
.tutor-checkout-page .tutor-billing-fields .tutor-row {
	margin-left: -12px;
	margin-right: -12px;
}
.tutor-checkout-page .tutor-billing-fields .tutor-row > [class*="tutor-col"] {
	padding-left: 12px;
	padding-right: 12px;
	margin-bottom: 24px;
}
/* Neutraliza el margen interno de Tutor para que la separación sea uniforme */
.tutor-checkout-page .tutor-billing-fields .tutor-mb-16 {
	margin-bottom: 0 !important;
}

/* --- Botón principal: "Realizar pedido" / "Pagar ahora" --- */
.tutor-checkout-page .tutor-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 6px;
	padding: 14px 22px;
	background: var(--aca-red);
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	box-shadow: 0 8px 18px rgba(230, 2, 3, .22);
	transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.tutor-checkout-page .tutor-btn-primary:hover {
	background: var(--aca-red-dark);
	box-shadow: 0 10px 22px rgba(196, 0, 2, .28);
}
.tutor-checkout-page .tutor-btn-primary:active {
	transform: translateY(1px);
}

/* Botón secundario dentro del checkout (p. ej. aplicar cupón) */
.tutor-checkout-page .tutor-btn-secondary {
	background: var(--aca-navy);
	border: none;
	color: #fff;
	border-radius: 10px;
	padding: 11px 18px;
	font-weight: 600;
}
.tutor-checkout-page .tutor-btn-secondary:hover {
	background: #0d2531;
}

/* --- Resumen del pedido --- */
.tutor-checkout-page .tutor-checkout-summary { width: 100%; }
.tutor-checkout-page .tutor-checkout-summary-item,
.tutor-checkout-page .tutor-checkout-detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	text-align: left;
	gap: 16px;
	padding: 9px 0;
	color: var(--aca-text);
	font-size: 15px;
}
.tutor-checkout-page .tutor-checkout-grand-total,
.tutor-checkout-page .tutor-checkout-grand-total * {
	color: var(--aca-navy);
	font-weight: 700;
	font-size: 20px;
}

/* Cursos dentro del resumen */
.tutor-checkout-page .tutor-checkout-course-item {
	padding: 14px 0;
	border-bottom: 1px solid var(--aca-border);
}
.tutor-checkout-page .tutor-checkout-course-title {
	color: var(--aca-navy);
	font-weight: 600;
}

/* --- Cupón --- */
.tutor-checkout-page .tutor-have-a-coupon {
	color: var(--aca-text);
	font-size: 14px;
}
.tutor-checkout-page .tutor-btn-link {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--aca-blue);
	font-weight: 600;
	text-decoration: none;
	padding: 0 2px;
}
.tutor-checkout-page .tutor-btn-link:hover {
	color: var(--aca-navy);
	text-decoration: underline;
}
.tutor-checkout-page .tutor-btn-link:focus,
.tutor-checkout-page .tutor-btn-link:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.tutor-checkout-page .tutor-checkout-coupon-badge {
	background: var(--aca-soft);
	color: var(--aca-navy);
	border-radius: 8px;
	padding: 4px 10px;
	font-weight: 600;
}

/* --- Métodos de pago --- */
.tutor-checkout-page .tutor-checkout-payment-item {
	border: 1px solid var(--aca-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tutor-checkout-page .tutor-checkout-payment-item:hover {
	border-color: var(--aca-blue);
	box-shadow: 0 6px 16px rgba(19, 48, 63, .06);
}

/* --- Alertas / estado vacío --- */
.tutor-checkout-page .tutor-alert {
	border-radius: 12px;
	border: 1px solid var(--aca-border);
	background: var(--aca-soft);
	color: var(--aca-navy);
}

/* ==========================================================================
   Responsive — móvil, tablet, desktop y ultrawide.
   El contenedor .tutor-checkout-container ya limita a 1032px, así que en
   ultrawide queda centrado y no se estira. Aquí ajustamos tablet/móvil.
   ========================================================================== */

/* Tablet y menor: las dos columnas se apilan → separación + menos padding */
@media (max-width: 767px) {
	.tutor-checkout-page .tutor-checkout-billing,
	.tutor-checkout-page .tutor-checkout-details {
		padding: 24px 20px;
		margin-bottom: 20px;
	}
}

/* Móvil: tarjetas más compactas y botón cómodo para el pulgar */
@media (max-width: 480px) {
	.tutor-checkout-page .tutor-checkout-billing,
	.tutor-checkout-page .tutor-checkout-details {
		padding: 20px 16px;
		border-radius: 14px;
	}
	.tutor-checkout-page .tutor-btn-primary {
		padding: 14px 16px;
	}
}

/* ==========================================================================
   FIX de contornos: Tutor colapsa el borde inferior de los campos del checkout
   con `.tutor-col-12:not(:last-of-type) .tutor-form-control { border-bottom:none }`
   (look de "tabla"), lo que deja las cajas sin cerrar por abajo/derecha. Aquí se
   restauran los 4 lados. El selector duplica `.tutor-checkout-page` para llegar a
   especificidad 0,6,0 y ganarle a Tutor (0,5,0) sin depender del orden de carga.
   ========================================================================== */
.tutor-checkout-page.tutor-checkout-page .tutor-checkout-billing .tutor-billing-fields .tutor-col-12 .tutor-form-control,
.tutor-checkout-page.tutor-checkout-page .tutor-checkout-billing .tutor-billing-fields .tutor-col-12 select,
.tutor-checkout-page.tutor-checkout-page .tutor-checkout-billing .tutor-billing-fields .tutor-col-12 input {
	border: 1.5px solid #AFC3D6 !important;
	border-radius: 10px !important;
}