/* XTRAVEL CHECKOUT - Estilos Críticos Optimizados + Secciones Colapsables */

/* --- SCOPE SOLO PARA EL CHECKOUT --- */
.xcheckout, .xcheckout * {
	box-sizing: border-box;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.xcheckout {
	min-height: 100vh;
	background: #f9fafb;
	opacity: 0;
	animation: fadeInPage .3s ease forwards;
}
@keyframes fadeInPage { to { opacity: 1; } }
.xcheckout .loading { opacity: .6; pointer-events: none; }
.xcheckout .x-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 4px;
	padding: 1px 5px;
	font-size: .62rem;
	font-weight: 500;
	background: #e0e7ef;
	color: #4A1D96;
	margin-right: 3px;
}
.xcheckout .xtr-section {
	border-radius: 5px;
	border: 1px solid #e5e7eb;
	background: #fff;
	margin-bottom: 7px;
	transition: box-shadow .2s, border-color .2s, background .2s;
	box-shadow: 0 1px 2px 0 rgba(74,29,150,0.02);
}
.xcheckout .xtr-section.collapsed {
	border-color: #10b981 !important;
	background: linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%) !important;
	box-shadow: 0 1px 2px 0 #10b98122;
}
.xcheckout .xtr-section-header {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	padding: 5px 7px 4px 7px;
	border-radius: 5px 5px 0 0;
	background: none;
	font-size: .68rem;
	font-weight: 600;
	color: #4A1D96;
	border-bottom: 1px solid #f1f5f9;
	transition: background .2s;
}

/* =============== Scoped utility shims (solo checkout) =============== */
/* Layout base */
.xcheckout .relative{position:relative}
.xcheckout .fixed{position:fixed}
.xcheckout .sticky{position:sticky}
.xcheckout .inset-0{top:0;right:0;bottom:0;left:0}
.xcheckout .z-\[100\]{z-index:100}
.xcheckout .mx-auto{margin-left:auto;margin-right:auto}
.xcheckout .max-w-7xl{max-width:80rem}
.xcheckout .max-w-md{max-width:28rem}
.xcheckout .max-w-xl{max-width:36rem}
.xcheckout .w-full{width:100%}
.xcheckout .h-12{height:3rem}
.xcheckout .w-12{width:3rem}
.xcheckout .size-6{width:1.5rem;height:1.5rem}
.xcheckout .size-7{width:1.75rem;height:1.75rem}
.xcheckout .size-10{width:2.5rem;height:2.5rem}
.xcheckout .flex{display:flex}
.xcheckout .inline-flex{display:inline-flex}
.xcheckout .flex-col{flex-direction:column}
.xcheckout .items-center{align-items:center}
.xcheckout .items-start{align-items:flex-start}
.xcheckout .items-end{align-items:flex-end}
.xcheckout .justify-center{justify-content:center}
.xcheckout .justify-between{justify-content:space-between}
.xcheckout .gap-1{gap:.25rem}
.xcheckout .gap-1\.5{gap:.375rem}
.xcheckout .gap-2{gap:.5rem}
.xcheckout .gap-2\.5{gap:.625rem}
.xcheckout .gap-3{gap:.75rem}
.xcheckout .gap-4{gap:1rem}
.xcheckout .grid{display:grid}
.xcheckout .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.xcheckout .px-3{padding-left:.75rem;padding-right:.75rem}
.xcheckout .px-4{padding-left:1rem;padding-right:1rem}
.xcheckout .px-5{padding-left:1.25rem;padding-right:1.25rem}
.xcheckout .px-6{padding-left:1.5rem;padding-right:1.5rem}
.xcheckout .py-1{padding-top:.25rem;padding-bottom:.25rem}
.xcheckout .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.xcheckout .py-2{padding-top:.5rem;padding-bottom:.5rem}
.xcheckout .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.xcheckout .py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.xcheckout .py-8{padding-top:2rem;padding-bottom:2rem}
.xcheckout .p-4{padding:1rem}
.xcheckout .pt-5{padding-top:1.25rem}
.xcheckout .pb-6{padding-bottom:1.5rem}
.xcheckout .mb-5{margin-bottom:1.25rem}
.xcheckout .mb-6{margin-bottom:1.5rem}
.xcheckout .mb-8{margin-bottom:2rem}
.xcheckout .mt-1{margin-top:.25rem}
.xcheckout .mt-2{margin-top:.5rem}
.xcheckout .mt-3{margin-top:.75rem}
.xcheckout .mt-4{margin-top:1rem}
.xcheckout .mt-5{margin-top:1.25rem}
.xcheckout .mt-6{margin-top:1.5rem}
.xcheckout .space-y-3>*+*{margin-top:.75rem}
.xcheckout .space-y-4>*+*{margin-top:1rem}
.xcheckout .space-y-6>*+*{margin-top:1.5rem}
.xcheckout .rounded-md{border-radius:.375rem}
.xcheckout .rounded-lg{border-radius:.5rem}
.xcheckout .rounded-xl{border-radius:.75rem}
.xcheckout .rounded-full{border-radius:9999px}
.xcheckout .rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
.xcheckout .rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}
.xcheckout .border{border:1px solid #e5e7eb}
.xcheckout .border-dashed{border-style:dashed}
.xcheckout .border-gray-200{border-color:#e5e7eb}
.xcheckout .border-gray-300{border-color:#d1d5db}
.xcheckout .bg-white{background:#fff}
.xcheckout .bg-gray-50{background:#f9fafb}
.xcheckout .bg-gray-100{background:#f3f4f6}
.xcheckout .bg-emerald-100{background:#d1fae5}
.xcheckout .bg-black\/70{background:rgba(0,0,0,.7)}
.xcheckout .text-center{text-align:center}
.xcheckout .text-xs{font-size:.65rem;line-height:.9rem}
.xcheckout .text-sm{font-size:.75rem;line-height:1.1rem}
.xcheckout .text-base{font-size:.85rem;line-height:1.3rem}
.xcheckout .text-lg{font-size:.95rem;line-height:1.5rem}
.xcheckout .text-xl{font-size:1.1rem;line-height:1.5rem}
.xcheckout .text-2xl{font-size:1.3rem;line-height:1.7rem}
.xcheckout .text-5xl{font-size:2.5rem;line-height:1}
.xcheckout .font-medium{font-weight:500}
.xcheckout .font-semibold{font-weight:600}
.xcheckout .font-bold{font-weight:700}
.xcheckout .font-extrabold{font-weight:800}
.xcheckout .uppercase{text-transform:uppercase}
.xcheckout .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.xcheckout .text-gray-500{color:#6b7280}
.xcheckout .text-gray-600{color:#4b5563}
.xcheckout .text-gray-700{color:#374151}
.xcheckout .text-gray-900{color:#111827}
.xcheckout .text-orange-600{color:#ea580c}
.xcheckout .text-emerald-600{color:#059669}
.xcheckout .hidden{display:none!important}
.xcheckout .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.xcheckout .sticky{position:sticky}
.xcheckout .top-6{top:1.5rem}
.xcheckout .backdrop-blur-sm{backdrop-filter:blur(4px)}

/* Grid responsivo */
@media (min-width:640px){
	.xcheckout .sm\:flex-row{flex-direction:row}
	.xcheckout .sm\:items-center{align-items:center}
	.xcheckout .sm\:justify-between{justify-content:space-between}
	.xcheckout .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.xcheckout .sm\:col-span-2{grid-column:span 2/span 2}
	.xcheckout .sm\:h-20{height:5rem}
	.xcheckout .sm\:w-20{width:5rem}
}
@media (min-width:768px){
	.xcheckout .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.xcheckout .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
	.xcheckout .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
	.xcheckout .lg\:col-span-8{grid-column:span 8/span 8}
	.xcheckout .lg\:col-span-4{grid-column:span 4/span 4}
}
.xcheckout .xtr-section-header:hover {
	background: #f9fafb;
}
.xcheckout .xtr-section-title {
	color: #4A1D96 !important;
	font-weight: 600 !important;
}
.xcheckout .xtr-toggle-icon {
	transition: transform .2s, color .2s;
	color: #4A1D96;
	font-size: .95rem;
}
.xcheckout .xtr-section.collapsed .xtr-toggle-icon {
	transform: rotate(-90deg);
	color: #10b981;
}
.xcheckout .xtr-check-icon {
	display: none;
	color: #10b981;
	font-weight: 700;
	font-size: .8rem;
}
.xcheckout .xtr-section.collapsed .xtr-check-icon {
	display: inline-flex;
}
.xcheckout .xtr-section.collapsed .xtr-section-title {
	color: #10b981 !important;
	font-size: .7rem !important;
}
.xcheckout .xtr-section-body {
	padding: 5px 7px 7px 7px;
	transition: max-height .2s, opacity .15s, padding .2s;
	max-height: 3000px;
	opacity: 1;
}
.xcheckout .xtr-section.collapsed .xtr-section-body {
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.xcheckout [data-section] > .xtr-section-header{position:relative}
.xcheckout .xtr-compact-summary {
.xcheckout .xtr-compact-summary {
	display: none;
	font-size: .7rem;
	color: #6b7280;
	margin-top: .15rem;
	font-weight: 500;
}
.xcheckout .xtr-section.collapsed .xtr-compact-summary {
	display: block;
}

/* Toggle de desglose en resumen */
.xcheckout .xtr-breakdown-toggle{
	margin-top:.2rem; display:inline-flex; align-items:center; gap:.3rem;
	font-size:.7rem; font-weight:600; color:#4A1D96; background:transparent; border:none; padding:0;
}
.xcheckout .xtr-breakdown-toggle:hover{ text-decoration: underline; }

.xcheckout input, .xcheckout textarea, .xcheckout select {
	border-radius: 3px;
	border: 1px solid #d1d5db;
	background: #f9fafb;
	padding: 3px 5px;
	font-size: .68rem;
	color: #22223b;
	width: 100%;
	margin-bottom: 2px;
	transition: border-color .2s;
}
.xcheckout input:focus, .xcheckout textarea:focus, .xcheckout select:focus {
	border-color: #4A1D96;
	outline: none;
}
.xcheckout input:invalid:not(:placeholder-shown) {
	border-color: #dc2626;
}
.xcheckout input[type="tel"] {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.xcheckout label {
	font-size: .65rem;
	font-weight: 500;
	color: #22223b;
	margin-bottom: 1px;
	display: block;
}
.xcheckout .x-badge {
	background: #e0e7ef;
	color: #4A1D96;
}
.xcheckout .xtr-section .xtr-section-body > .grid {
	display: grid;
	gap: 5px;
}
.xcheckout .xtr-section .xtr-section-body > .grid.sm-grid-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.xcheckout .xtr-section .xtr-section-body > .grid.md-grid-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.xcheckout .xtr-section .xtr-section-body > .grid.sm-col-span-2 {
	grid-column: span 2;
}
.xcheckout .rounded-xl { border-radius: 5px; }
.xcheckout .rounded-lg { border-radius: 8px; }
.xcheckout .rounded-md { border-radius: 6px; }
.xcheckout .rounded { border-radius: 4px; }
.xcheckout .border { border: 1px solid #e5e7eb; }
.xcheckout .border-gray-200 { border-color: #e5e7eb; }
.xcheckout .border-gray-300 { border-color: #d1d5db; }
.xcheckout .bg-white { background: #fff; }
.xcheckout .bg-gray-50 { background: #f9fafb; }
.xcheckout .bg-gray-100 { background: #f3f4f6; }
.xcheckout .text-gray-900 { color: #22223b; }
.xcheckout .text-gray-500 { color: #6b7280; }
.xcheckout .text-gray-700 { color: #374151; }
.xcheckout .text-green-600 { color: #059669; }
.xcheckout .text-blue-600 { color: #2563eb; }
.xcheckout .text-emerald-800 { color: #065f46; }
.xcheckout .text-emerald-600 { color: #059669; }
.xcheckout .text-emerald-50 { color: #ecfdf5; }
.xcheckout .text-red-600 { color: #dc2626; }
.xcheckout .text-xs { font-size: .82rem; }
.xcheckout .text-sm { font-size: .95rem; }
.xcheckout .text-base { font-size: 1.05rem; }
.xcheckout .font-bold { font-weight: 700; }
.xcheckout .font-semibold { font-weight: 600; }
.xcheckout .font-medium { font-weight: 500; }
.xcheckout .font-mono { font-family: 'Fira Mono', 'Consolas', monospace; }
.xcheckout .flex { display: flex; }
.xcheckout .flex-col { flex-direction: column; }
.xcheckout .flex-row { flex-direction: row; }
.xcheckout .items-center { align-items: center; }
.xcheckout .justify-between { justify-content: space-between; }
.xcheckout .justify-center { justify-content: center; }
.xcheckout .gap-2 { gap: 8px; }
.xcheckout .gap-3 { gap: 12px; }
.xcheckout .gap-4 { gap: 16px; }
.xcheckout .gap-5 { gap: 20px; }
.xcheckout .w-full { width: 100%; }
.xcheckout .hidden { display: none !important; }
.xcheckout .relative { position: relative; }
.xcheckout .absolute { position: absolute; }
.xcheckout .mx-auto { margin-left: auto; margin-right: auto; }
.xcheckout .text-center { text-align: center; }
.xcheckout .text-right { text-align: right; }
.xcheckout .mt-1 { margin-top: 4px; }
.xcheckout .mt-2 { margin-top: 8px; }
.xcheckout .mt-3 { margin-top: 12px; }
.xcheckout .mt-4 { margin-top: 16px; }
.xcheckout .mt-5 { margin-top: 20px; }
.xcheckout .mb-1 { margin-bottom: 4px; }
.xcheckout .mb-2 { margin-bottom: 8px; }
.xcheckout .mb-3 { margin-bottom: 12px; }
.xcheckout .mb-4 { margin-bottom: 16px; }
.xcheckout .mb-5 { margin-bottom: 20px; }
.xcheckout .mb-6 { margin-bottom: 24px; }
.xcheckout .mb-8 { margin-bottom: 32px; }
.xcheckout .py-8 { padding-top: 32px; padding-bottom: 32px; }
.xcheckout .px-4 { padding-left: 16px; padding-right: 16px; }
.xcheckout .px-3 { padding-left: 12px; padding-right: 12px; }
.xcheckout .px-5 { padding-left: 20px; padding-right: 20px; }
.xcheckout .px-6 { padding-left: 24px; padding-right: 24px; }
.xcheckout .py-2 { padding-top: 8px; padding-bottom: 8px; }
.xcheckout .py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.xcheckout .py-3 { padding-top: 12px; padding-bottom: 12px; }
.xcheckout .py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.xcheckout .py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.xcheckout .pt-0 { padding-top: 0; }
.xcheckout .pt-3 { padding-top: 12px; }
.xcheckout .pt-5 { padding-top: 20px; }
.xcheckout .pb-6 { padding-bottom: 24px; }
.xcheckout .max-w-7xl { max-width: 1280px; }
.xcheckout .max-w-md { max-width: 420px; }
.xcheckout .w-56 { width: 224px; }
.xcheckout .w-12 { width: 48px; }
.xcheckout .h-12 { height: 48px; }
.xcheckout .h-24 { height: 96px; }
.xcheckout .size-10 { width: 40px; height: 40px; }
.xcheckout .rounded-xl { border-radius: 14px; }
.xcheckout .rounded-lg { border-radius: 8px; }
.xcheckout .rounded-md { border-radius: 6px; }
.xcheckout .rounded { border-radius: 4px; }
.xcheckout .shadow-sm { box-shadow: 0 1px 2px 0 #0001; }
.xcheckout .shadow-lg { box-shadow: 0 8px 24px 0 #0002; }
.xcheckout .shadow { box-shadow: 0 2px 8px 0 #0001; }
.xcheckout .border-dashed { border-style: dashed; }
.xcheckout .inline-flex { display: inline-flex; }
.xcheckout .inline-block { display: inline-block; }
.xcheckout .overflow-hidden { overflow: hidden; }
.xcheckout .object-cover { object-fit: cover; }
.xcheckout .font-extrabold { font-weight: 800; }
.xcheckout .tracking-tight { letter-spacing: -0.01em; }
.xcheckout .uppercase { text-transform: uppercase; }
.xcheckout .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.xcheckout .has-\[\:checked\]\:border-\[\#4A1D96\]:has(:checked) { border-color: #4A1D96 !important; }
.xcheckout .has-\[\:checked\]\:ring-2:has(:checked) { box-shadow: 0 0 0 2px #C3DDFD; }
.xcheckout .has-\[\:checked\]\:ring-\[\#C3DDFD\]:has(:checked) { box-shadow: 0 0 0 2px #C3DDFD; }
.xcheckout .bg-blue-50 { background: #eff6ff; }
.xcheckout .bg-red-50 { background: #fef2f2; }
.xcheckout .bg-emerald-50 { background: #ecfdf5; }
.xcheckout .bg-blue-600 { background: #2563eb; }
.xcheckout .bg-green-600 { background: #059669; }
.xcheckout .bg-gray-200 { background: #e5e7eb; }
.xcheckout .bg-gray-300 { background: #d1d5db; }
.xcheckout .bg-gray-700 { background: #374151; }
.xcheckout .bg-slate-50 { background: #f8fafc; }
.xcheckout .bg-slate-200 { background: #e2e8f0; }
.xcheckout .bg-slate-700 { background: #334155; }
.xcheckout .bg-slate-900 { background: #0f172a; }
.xcheckout .text-slate-900 { color: #0f172a; }
.xcheckout .text-slate-100 { color: #f1f5f9; }
.xcheckout .text-slate-400 { color: #94a3b8; }
.xcheckout .text-slate-500 { color: #64748b; }
.xcheckout .text-slate-600 { color: #475569; }
.xcheckout .text-slate-800 { color: #1e293b; }
.xcheckout .text-rose-600 { color: #e11d48; }
.xcheckout .text-rose-700 { color: #be123c; }
.xcheckout .bg-rose-50 { background: #fff1f2; }
.xcheckout .bg-rose-200 { background: #fecdd3; }
.xcheckout .border-rose-200 { border-color: #fecdd3; }
.xcheckout .border-rose-300 { border-color: #fda4af; }

/* ========================
   Métodos de pago (nativo)
   ======================== */
.xcheckout #payment-methods{display:grid;gap:.5rem}
.xcheckout #payment-methods label{
	display:flex;align-items:center;gap:.5rem;
	border:1px solid #d1d5db;border-radius:.4rem;padding:.5rem .65rem;
	background:#f9fafb;cursor:pointer;
	transition:border-color .2s, box-shadow .2s, background-color .2s, transform .08s ease-in-out;
}
.xcheckout #payment-methods label:hover{border-color:#4A1D96;background:#fff;box-shadow:0 0 0 2px #C3DDFD55}
.xcheckout #payment-methods label:active{transform:scale(.995)}
/* Seleccionado (moderno) */
.xcheckout #payment-methods label:has(input:checked){border-color:#4A1D96;box-shadow:0 0 0 2px #C3DDFD;background:#fff}
/* Seleccionado (fallback JS .is-checked) */
.xcheckout #payment-methods label.is-checked{border-color:#4A1D96;box-shadow:0 0 0 2px #C3DDFD;background:#fff}
.xcheckout #payment-methods label:has(input:focus-visible),
.xcheckout #payment-methods label.is-focused{outline:2px solid #C3DDFD;outline-offset:2px}
.xcheckout #payment-methods input[type="radio"]{width:.95rem;height:.95rem}
/* Iconos de pago sin opacidad */
.xcheckout #payment-methods i{opacity:1 !important}
.xcheckout #payment-methods .fa-brands{opacity:1 !important}
/* Tipografía compacta dentro de la tarjeta del método */
.xcheckout #payment-methods label > div > p:first-child{font-weight:700;color:#111827;line-height:.95rem;font-size:.8rem}
.xcheckout #payment-methods label > div > p:nth-child(2){font-size:.6rem;color:#D61F69;line-height:.85rem;margin-top:.1rem}
}