/**
 * CITA Plugin - Public Styles
 *
 * @package CitaPlugin
 */

/* ==========================================================================
   Variables & Resets
   ========================================================================== */
:root {
	--cita-primary: #FFCC33;
	--cita-primary-dark: #FFB800;
	--cita-secondary: #64748b;
	--cita-success: #10b981;
	--cita-warning: #f59e0b;
	--cita-error: #ef4444;
	--cita-info: #3b82f6;

	--cita-gray-50: #f9fafb;
	--cita-gray-100: #f3f4f6;
	--cita-gray-200: #e5e7eb;
	--cita-gray-300: #d1d5db;
	--cita-gray-400: #9ca3af;
	--cita-gray-500: #6b7280;
	--cita-gray-600: #4b5563;
	--cita-gray-700: #374151;
	--cita-gray-800: #1f2937;
	--cita-gray-900: #111827;

	--cita-yellow-light: #FFF8E7;

	--cita-text-primary: #000000;
	--cita-line-gray: #C2C2C2;

	/* Seat colors */
	--cita-seat-available-bg: #FEE08E;
	--cita-seat-available-circle: #FFCC33;
	--cita-seat-available-text: #000000;
	--cita-seat-occupied-bg: #EFEFEF;
	--cita-seat-occupied-text: #828282;
	--cita-seat-selected-bg: #FFC6C3;
	--cita-seat-selected-circle: #E62015;
	--cita-seat-selected-text: #E62015;
	--cita-seat-special-bg: #222;
	--cita-seat-special-text: #ffffff;

	--cita-border-radius: 8px;
	--cita-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--cita-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	--cita-transition: all 0.2s ease-in-out;
}

/* Box-sizing only for plugin elements to avoid conflicts with theme */
[class^="cita-"],
[class*=" cita-"],
[class^="cita-"] *,
[class*=" cita-"] * {
	box-sizing: border-box;
}

/* ==========================================================================
   Container - Uses WordPress theme layout values
   ========================================================================== */
.cita-schedule-page .container,
.cita-seat-page .container,
.cita-passenger-page .container,
.cita-checkout-page .container,
.cita-confirm-payment-page .container,
.cita-payment-success .container,
.cita-payment-pending .container,
.cita-payment-error .container {
	max-width: var(--wp--style--global--wide-size, 650px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

/* Wide container variant */
.cita-schedule-page .container--wide,
.cita-seat-page .container--wide {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.cita-schedule-page,
.cita-seat-page,
.cita-passenger-page,
.cita-checkout-page,
.cita-payment-success-page,
.cita-payment-pending-page,
.cita-payment-error-page {
	padding: 75px 0;
}

/* ==========================================================================
   Progress Indicator
   ========================================================================== */
.cita-progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
	padding: 20px;
	background: white;
	border-radius: var(--cita-border-radius);
	box-shadow: var(--cita-box-shadow);
}

.cita-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
}

.cita-progress-step::after {
	content: '';
	position: absolute;
	top: 15px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: var(--cita-gray-200);
	z-index: -1;
}

.cita-progress-step:last-child::after {
	display: none;
}

.cita-progress-number {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cita-gray-200);
	color: var(--cita-gray-600);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
	transition: var(--cita-transition);
}

.cita-progress-label {
	font-size: 12px;
	color: var(--cita-gray-600);
	text-align: center;
}

.cita-progress-step.completed .cita-progress-number {
	background: var(--cita-success);
	color: white;
}

.cita-progress-step.active .cita-progress-number {
	background: var(--cita-primary);
	color: white;
}

.cita-progress-step.completed .cita-progress-label,
.cita-progress-step.active .cita-progress-label {
	color: var(--cita-gray-900);
	font-weight: 600;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.cita-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--cita-transition);
	text-decoration: none;
}

.cita-btn--primary {
	background: var(--cita-primary);
	color: #000000;
}

.cita-btn--primary:hover:not(:disabled) {
	background: var(--cita-primary-dark);
	color: #000000;
}

.cita-btn--secondary {
	background: var(--cita-gray-200);
	color: var(--cita-gray-900);
}

.cita-btn--secondary:hover:not(:disabled) {
	background: var(--cita-gray-300);
}

.cita-btn--outline {
	background: transparent;
	color: var(--cita-primary);
	border: 1px solid var(--cita-primary);
}

.cita-btn--outline:hover:not(:disabled) {
	background: var(--cita-primary);
	color: white;
}

.cita-btn--large {
	padding: 8px 16px;
	font-size: 16px;
}

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

.cita-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.cita-form-group {
	margin-bottom: 20px;
}

/* Document number with verify button layout */
.cita-form-group-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 20px;
}

.cita-form-group-input {
	flex: 1;
}

.cita-form-group-input label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cita-gray-700);
}

.cita-form-group-button {
	flex-shrink: 0;
}

.cita-form-group-button .cita-btn {
	min-width: 120px;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.cita-form-group-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.cita-form-group-button .cita-btn {
		width: 100%;
	}
}

.cita-form-group label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cita-gray-700);
}

.required {
	color: var(--cita-error);
}

.cita-input,
.cita-select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--cita-gray-300);
	border-radius: var(--cita-border-radius);
	font-size: 14px;
	transition: var(--cita-transition);
	box-sizing: border-box;
}

.cita-input:focus,
.cita-select:focus {
	outline: none;
	border-color: var(--cita-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cita-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

/* ==========================================================================
   Cards & Sections
   ========================================================================== */
.cita-card {
	padding: 24px;
	border-radius: var(--cita-border-radius);
	box-shadow: var(--cita-box-shadow);
	margin-bottom: 24px;
}

.cita-schedule-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 30px 27px;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	margin-bottom: 16px;
	transition: var(--cita-transition);
	background: white;
}

.cita-schedule-card:hover {
	border-color: var(--cita-primary);
	box-shadow: var(--cita-box-shadow-lg);
}

.cita-schedule-card:hover .cita-route-line {
	background: var(--cita-primary);
}

.cita-schedule-card:hover .cita-route-line::before,
.cita-schedule-card:hover .cita-route-line::after {
	border-color: var(--cita-primary);
}

/* Selected Schedule Container */
.cita-selected-schedule-container {
	margin-bottom: 24px;
}

/* Selected Schedule Component */
.cita-selected-schedule {
	background: var(--cita-yellow-light);
	border: 1.5px solid var(--cita-primary);
	border-radius: 20px;
	padding: 20px 27px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Inactive state for selected schedule (grayed out) */
.cita-selected-schedule--inactive {
	background: #F1F1F1;
	border: 2px solid #AAAAAA;
}

.cita-selected-schedule--inactive .cita-trip-badge {
	background: #C2C2C2;
	color: #333333;
}

/* Row 1: Header with badge and price */
.cita-selected-schedule__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cita-trip-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--cita-primary);
	border-radius: 12px;
	padding: 4px 11px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cita-text-primary);
}

.cita-trip-badge svg {
	flex-shrink: 0;
}

.cita-trip-badge-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cita-selected-seats {
	font-size: 12px;
	color: var(--cita-text-primary);
}

.cita-selected-price {
	font-size: 32px;
	font-weight: 700;
	color: var(--cita-text-primary);
}



/* Row 2: Schedule details */
.cita-selected-schedule__body {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.cita-selected-schedule__col-1,
.cita-selected-schedule__col-2,
.cita-selected-schedule__col-3 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cita-selected-schedule__col-1 {
	flex: 0 0 auto;
	min-width: 120px;
}

.cita-selected-schedule__col-2 {
	flex: 1 1 100%;
	align-items: center;
	text-align: center;
	padding: 0 20px;
}

.cita-selected-schedule__col-3 {
	flex: 0 0 auto;
	min-width: 120px;
	align-items: flex-end;
	text-align: right;
}

/* Grid variant for selected-schedule-component.php */
.cita-selected-schedule--grid {
	display: grid;
	grid-template-columns: 150px 1fr 150px;
	align-items: center;
}

.cita-selected-schedule--grid .cita-selected-schedule__col-1 {
	justify-self: start;
	min-width: auto;
	flex-direction: row;
	align-items: center;
	flex: none;
}

.cita-selected-schedule--grid .cita-selected-schedule__col-2 {
	text-align: center;
	flex: none;
	padding: 0;
}

.cita-selected-schedule--grid .cita-selected-schedule__col-3 {
	justify-self: end;
	min-width: auto;
	flex: none;
}

.cita-selected-schedule--grid .cita-selected-schedule__col-4,
.cita-selected-schedule--grid .cita-selected-schedule__col-5,
.cita-selected-schedule--grid .cita-selected-schedule__col-6 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cita-selected-schedule--grid .cita-selected-schedule__col-4 {
	justify-self: start;
}

.cita-selected-schedule--grid .cita-selected-schedule__col-5 {
	align-items: center;
	text-align: center;
}

.cita-selected-schedule--grid .cita-selected-schedule__col-6 {
	justify-self: end;
	align-items: flex-end;
	text-align: right;
}

.cita-selected-time {
	font-size: 28px;
	font-weight: 600;
	color: var(--cita-text-primary);
	line-height: 1;
}

.cita-selected-city {
	font-size: 14px;
	font-weight: 400;
	color: var(--cita-gray-500);
}

.cita-selected-service {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: transparent;
	border: 1px solid var(--cita-primary);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cita-text-primary);
	width: fit-content;
}

.cita-selected-route-line {
	position: relative;
	width: 100%;
	height: 3px;
	background: var(--cita-line-gray);
	margin: 12px 0;
}

.cita-selected-route-line::before,
.cita-selected-route-line::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 3px solid var(--cita-line-gray);
	background: transparent;
}

.cita-selected-route-line::before {
	left: -18px;
}

.cita-selected-route-line::after {
	right: -18px;
}

.cita-selected-route-info {
	font-size: 14px;
	color: var(--cita-gray-500);
}

/* Old selected schedule display (deprecated - kept for backwards compatibility) */
.cita-schedule-selected-display {
	cursor: default;
	border-color: var(--cita-primary) !important;
	margin-bottom: 0;
}

.cita-schedule-selected-display:hover {
	border-color: var(--cita-primary) !important;
	box-shadow: none;
}

.cita-schedule-selected-display:hover .cita-route-line {
	background: var(--cita-line-gray);
}

.cita-schedule-selected-display:hover .cita-route-line::before,
.cita-schedule-selected-display:hover .cita-route-line::after {
	border-color: var(--cita-line-gray);
}

.cita-passenger-card {
	padding: 20px;
	border: 1px solid var(--cita-gray-200);
	border-radius: var(--cita-border-radius);
	margin-bottom: 16px;
	transition: var(--cita-transition);
	background: #FBFBFB;
}

.cita-passenger-card.has-errors {
	border: 2px solid #dc3545;
}

.cita-input.has-error,
.cita-select.has-error {
	border-color: #dc3545;
}

/* Schedule Card Columns */
.cita-schedule-card__col-1,
.cita-schedule-card__col-2,
.cita-schedule-card__col-3 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cita-schedule-card__col-1 {
	flex: 0 0 auto;
	min-width: 120px;
}

.cita-schedule-card__col-2 {
	flex: 1 1 100%;
	align-items: center;
	text-align: center;
	padding: 0 20px;
}

.cita-schedule-card__col-3 {
	flex: 0 0 auto;
	min-width: 120px;
	align-items: flex-end;
	text-align: right;
}

.cita-schedule-card__col-4 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex: 0 0 auto;
}

/* Column 1: Departure Info */
.cita-departure-time {
	font-size: 28px;
	font-weight: 600;
	color: var(--cita-text-primary);
	line-height: 1;
}

.cita-origin {
	font-size: 18px;
	font-weight: 400;
	color: var(--cita-gray-500);
}

.cita-duration-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #6b7280;
	width: fit-content;
}

.cita-duration-badge img,
.cita-duration-badge svg {
	flex-shrink: 0;
}

.cita-mobile-duration img {
	flex-shrink: 0;
}

/* Column 2: Route Info */
.cita-trip-type {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	color: #9CA3AF;
	padding: 2px 8px;
	background: #F3F4F6;
	border-radius: 4px;
	white-space: nowrap;
	align-self: center;
	margin-bottom: 8px;
	width: fit-content;
}

.cita-route-line {
	position: relative;
	width: 100%;
	height: 3px;
	background: var(--cita-line-gray);
	margin: 12px 0;
}

.cita-route-line::before,
.cita-route-line::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 3px solid var(--cita-line-gray);
	background: transparent;
}

.cita-route-line::before {
	left: -18px;
}

.cita-route-line::after {
	right: -18px;
}

.cita-route-info {
	font-size: 14px;
	color: var(--cita-gray-400);
	margin-top: 4px;
}

/* Column 3: Arrival Info */
.cita-arrival-time {
	font-size: 28px;
	font-weight: 600;
	color: var(--cita-text-primary);
	line-height: 1;
}

.cita-destination {
	font-size: 18px;
	font-weight: 400;
	color: var(--cita-gray-500);
}

/* Column 4: Price & Action */
.cita-price {
	font-size: 32px;
	font-weight: 700;
	color: var(--cita-text-primary);
	line-height: 1;
	min-width: 200px;
	text-align: end;
}

.cita-select-button {
	width: 60px;
	height: 60px;
	cursor: pointer;
	transition: var(--cita-transition);
	display: block;
	flex-shrink: 0;
}

.cita-select-button:hover:not(.disabled) {
	transform: scale(1.05);
}

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

/* ==========================================================================
   Seat Selection
   ========================================================================== */
.cita-seat {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 15px;
	cursor: pointer;
	transition: var(--cita-transition);
	font-size: 15px;
	font-weight: 600;
	position: relative;
	display: flex;
	padding: 8px;
}

/* Seat number (top-left corner) */
.cita-seat-number {
	position: absolute;
	top: 8px;
	left: 8px;
	line-height: 1;
}

/* Circle indicator (bottom-right corner) */
.cita-seat::after {
	content: '';
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	transition: var(--cita-transition);
}

/* Check mark (for selected seats) */
.cita-seat-selected::before {
	content: '✓';
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 10px;
	font-weight: bold;
	z-index: 1;
}

/* Available seats */
.cita-seat-available {
	background: var(--cita-seat-available-bg);
	color: var(--cita-seat-available-text);
}

.cita-seat-available::after {
	background: var(--cita-seat-available-circle);
}

.cita-seat-available:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Occupied seats */
.cita-seat-occupied {
	background: var(--cita-seat-occupied-bg);
	color: var(--cita-seat-occupied-text);
	cursor: not-allowed;
}

.cita-seat-occupied::after {
	display: none;
	/* No circle for occupied seats */
}

/* Selected seats */
.cita-seat-selected {
	background: var(--cita-seat-selected-bg);
	color: var(--cita-seat-selected-text);
}

.cita-seat-selected::after {
	background: var(--cita-seat-selected-circle);
}

/* Special seats (not selectable - driver area, etc.) */
.cita-seat-special {
	background: var(--cita-seat-special-bg);
	color: var(--cita-seat-special-text);
	cursor: not-allowed;
	pointer-events: none;
}

.cita-seat-special::after {
	display: none;
	/* No circle for special seats */
}

/* Recommended seats (if used) */
.cita-seat-recommended {
	border: 2px solid var(--cita-success);
}

/* Seat map wrapper (container with border) */
.cita-seat-map-wrapper {
	grid-area: asientos;
	background: #FBFBFB;
	border: 2px solid #D6D6D6;
	border-radius: 20px;
	padding: 30px;
}

.cita-floor {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cita-floor-title {
	text-align: start;
}

/* Seat grid layout */
.cita-seat-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: start;
}

.cita-seat-row {
	display: flex;
	gap: 12px;
}

/* Aisle gap (pasillo central) - add space after 2nd column */
.cita-seat-aisle-gap {
	width: 60px;
	/* Same size as seat */
	height: 60px;
	flex-shrink: 0;
}

.cita-seat-empty {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
}

/* ==========================================================================
   Seat Selection Page - New Layout
   ========================================================================== */

/* Page Title */
.cita-seat-page-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--cita-text-primary);
	margin-bottom: 30px;
	margin-top: 20px;
}

/* Two Column Layout - Desktop */
.cita-seat-selection-layout {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas:
		"asientos asciende"
		"asientos referencias"
		"asientos seleccionados"
		"asientos confirmar"
	;
	gap: 30px;
	margin-bottom: 40px;
}

/* Levante (Pickup Point) Section */
.cita-seat-levante {
	grid-area: asciende;
	margin-bottom: 24px;
}

.cita-seat-levante h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--cita-text-primary);
	margin-bottom: 12px;
}

.cita-levante-select {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--cita-gray-300);
	border-radius: 8px;
	font-size: 14px;
	color: var(--cita-text-primary);
	background: white;
	cursor: pointer;
}

.cita-levante-select:focus {
	outline: none;
	border-color: var(--cita-primary);
}

/* Referencias Section */
.cita-seat-references {
	grid-area: referencias;
	background: white;
	border: 1.5px solid var(--cita-gray-300);
	border-radius: 12px;
	padding: 20px;
}

.cita-seat-references h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--cita-text-primary);
	margin-bottom: 16px;
}

.cita-reference-list {
	display: flex;
	flex-direction: row;
	gap: 60px;
	flex-wrap: nowrap;
	justify-content: center;
	font-weight: bold;
}

.cita-reference-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--cita-text-primary);
}

.cita-reference-item .cita-seat-icon {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 15px;
	flex-shrink: 0;
	position: relative;
	cursor: default;
	pointer-events: none;
}

/* Circle indicator for reference icons */
.cita-reference-item .cita-seat-icon::after {
	content: '';
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

/* Check mark for selected reference icon */
.cita-reference-item .cita-seat-selected::before {
	content: '✓';
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 10px;
	font-weight: bold;
	z-index: 1;
}

.cita-reference-item .cita-seat-available {
	background: var(--cita-seat-available-bg);
}

.cita-reference-item .cita-seat-available::after {
	background: var(--cita-seat-available-circle);
}

.cita-reference-item .cita-seat-occupied {
	background: var(--cita-seat-occupied-bg);
}

.cita-reference-item .cita-seat-occupied::after {
	display: none;
}

.cita-reference-item .cita-seat-selected {
	background: var(--cita-seat-selected-bg);
}

.cita-reference-item .cita-seat-selected::after {
	background: var(--cita-seat-selected-circle);
}

.cita-reference-item .cita-seat-special {
	background: var(--cita-seat-special-bg);
	color: var(--cita-seat-special-text);
}

.cita-reference-item .cita-seat-special::after {
	display: none;
}

/* Selected Seats Container */
.cita-selected-seats-container {
	grid-area: seleccionados;
	background: white;
	border: 1.5px solid var(--cita-primary);
	border-radius: 12px;
	padding: 20px;
	margin-top: 24px;
}

.cita-selected-seats-container h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--cita-text-primary);
	margin-bottom: 16px;
}

.cita-selected-seats-row {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 12px;
	margin-bottom: 12px;
}

.cita-selected-seats-row:last-child {
	margin-bottom: 0;
}

.cita-selected-seats-row .cita-trip-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--cita-primary);
	border-radius: 12px;
	padding: 4px 11px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cita-text-primary);
	flex-shrink: 0;
}

.cita-selected-seats-list {
	font-size: 14px;
	color: var(--cita-text-primary);
	font-weight: 500;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cita-selected-seat-component {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--cita-seat-selected-bg);
	border-radius: 8px;
	color: var(--cita-seat-selected-text);
	font-size: 14px;
	font-weight: 600;
}

.cita-seat-confirm-wrapper {
	grid-area: confirmar;
}

.cita-seat-confirm-wrapper .cita-btn {
	background-color: var(--cita-primary);
	color: black;
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */
.cita-status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.cita-status-confirmed {
	background: rgba(16, 185, 129, 0.1);
	color: var(--cita-success);
}

.cita-status-pending {
	background: rgba(245, 158, 11, 0.1);
	color: var(--cita-warning);
}

.cita-status-failed {
	background: rgba(239, 68, 68, 0.1);
	color: var(--cita-error);
}

/* ==========================================================================
   Icons & Messages
   ========================================================================== */
.cita-success-icon,
.cita-pending-icon,
.cita-error-icon {
	text-align: center;
	margin-bottom: 24px;
}

.cita-success-icon svg {
	stroke: var(--cita-success);
}

.cita-pending-icon svg {
	stroke: var(--cita-warning);
}

.cita-error-icon svg {
	stroke: var(--cita-error);
}

.cita-info-card {
	padding: 20px;
	border-radius: var(--cita-border-radius);
	margin-bottom: 24px;
	display: flex;
	gap: 16px;
}

.cita-info-warning {
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid var(--cita-warning);
}

.cita-info-error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid var(--cita-error);
}

.cita-info-success {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid var(--cita-success);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Custom Search Form Styles (Figma Design)
   ========================================================================== */

/* Section 1: Trip Type Toggle */
.cita-trip-type-section {
	margin-bottom: 24px;
}

.cita-trip-type-toggle {
	display: inline-flex;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--cita-primary);
}

.cita-trip-type-btn {
	padding: 10px 24px;
	background: transparent;
	border: none;
	border-right: 1px solid var(--cita-primary);
	border-radius: 0;
	font-size: 14px;
	font-weight: 400;
	color: #000000;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
	white-space: nowrap;
}

.cita-trip-type-btn:last-child {
	border-right: none;
}

.cita-trip-type-btn.active {
	background: #FFEEC0;
	font-weight: 700;
}

.cita-trip-type-btn:hover {
	background: #FFF8E6;
}

/* Section 2: Form Fields */
.cita-form-fields-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 35px;
	margin-bottom: 24px;
}

.cita-form-field {
	display: flex;
	flex-direction: column;
	background: #F1F1F1;
	border-radius: 8px;
	padding: 10px 20px;
	position: relative;
	min-width: 0;
	/* Fix for grid overflow */
	max-height: 65px;
}

.cita-form-field label {
	font-size: 14px;
	font-weight: 600;
	color: #000000;
	margin-bottom: 8px;
	display: block;
}

.cita-custom-input,
.cita-custom-select {
	background: transparent;
	border: none;
	font-size: 14px;
	color: #9E9E9E;
	padding: 0;
	width: 100%;
	outline: none;
	font-family: inherit;
}

.cita-custom-select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239E9E9E' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 20px;
}

/* Select2 Custom Styling */
.cita-form-field .select2-container {
	width: 100% !important;
	left: 0 !important;
}

/* Hide the default select */
.cita-form-field .select2-container+select {
	display: none;
}

/* Select2 Selection (the main visible part) */
.cita-form-field .select2-container--default .select2-selection--single {
	background: transparent;
	border: none;
	height: auto;
	padding: 0;
	outline: none;
}

.cita-form-field .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #000000;
	padding: 0;
	line-height: normal;
	font-size: 14px;
	font-family: inherit;
}

.cita-form-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #9E9E9E;
}

/* Hide the default arrow */
.cita-form-field .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

/* Dropdown container */
.select2-container--default .select2-dropdown {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	margin-top: 4px;
}

/* Make dropdown match the form field width */
.select2-dropdown {
	width: auto !important;
}

/* Ensure dropdown matches parent width */
.cita-form-field .select2-container {
	position: relative;
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
	width: 100% !important;
	left: 0 !important;
}

/* Dropdown results container */
.select2-container--default .select2-results__options {
	max-height: 250px;
	overflow-y: auto;
}

/* Individual option items */
.select2-container--default .select2-results__option {
	padding: 15px 10px;
	background: white;
	color: #000000;
	font-size: 14px;
	font-family: inherit;
}

/* Option hover state */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
	background: #FFEEC0 !important;
	color: #000000 !important;
}

/* Option selected state */
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: #FFEEC0;
	color: #000000;
}

/* Scrollbar styling for dropdown */
.select2-container--default .select2-results__options::-webkit-scrollbar {
	width: 6px;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
	background: var(--cita-primary);
	border-radius: 3px;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-thumb:hover {
	background: var(--cita-primary-dark);
}

.cita-custom-input:focus,
.cita-custom-select:focus {
	color: #000000;
}

.cita-custom-input::placeholder {
	color: #9E9E9E;
}

/* Section 3: Search Button */
.cita-search-button-section {
	display: flex;
	justify-content: flex-start;
}

.cita-search-btn {
	background: var(--cita-primary);
	border: none;
	border-radius: 10px;
	padding: 12px 100px;
	font-size: 16px;
	font-weight: 600;
	color: #000000;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
}

.cita-search-btn:hover:not(:disabled) {
	background: var(--cita-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 204, 51, 0.4);
}

.cita-search-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Search Form Wrapper */
.cita-search-form-wrapper {
	background: white;
	border-radius: 12px;
}

/* Flatpickr Custom Styles */
.cita-custom-input.flatpickr-input {
	cursor: pointer;
}

.cita-form-field .flatpickr-input[readonly] {
	background: transparent;
	cursor: pointer;
}

.cita-form-field input.flatpickr-input:focus {
	color: #000000;
}

/* Hide the real input, show the alt input */
.cita-form-field input.flatpickr-input.flatpickr-mobile {
	display: none;
}

.cita-form-field input.flatpickr-input+input {
	background: transparent;
	border: none;
	font-size: 14px;
	color: #000000;
	padding: 0;
	width: 100%;
	outline: none;
	font-family: inherit;
	cursor: pointer;
}

.cita-form-field input.flatpickr-input+input::placeholder {
	color: #9E9E9E;
}

/* Flatpickr calendar customization */
.flatpickr-calendar {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border: 1px solid #e5e7eb;
}

.flatpickr-day.selected {
	background: var(--cita-primary);
	border-color: var(--cita-primary);
	color: #000000;
}

.flatpickr-day.selected:hover {
	background: var(--cita-primary-dark);
	border-color: var(--cita-primary-dark);
}

.flatpickr-day:hover:not(.selected) {
	background: #FFF8E6;
	border-color: var(--cita-primary);
}

/* ==========================================================================
   Schedule Page - Search Info Container
   ========================================================================== */
.cita-search-info-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	gap: 40px;
	padding: 30px;
	border-radius: 20px;
	border: 3px solid var(--cita-primary);
	background: white;
	margin-bottom: 30px;
}

.cita-search-info-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: baseline;
}

.cita-search-info-label {
	font-size: 18px;
	font-weight: 600;
	color: #6b7280;
}

.cita-search-info-value {
	font-size: 21px;
	font-weight: 400;
	color: #000000;
}

/* ==========================================================================
   Schedule Page - Trip Tabs (Ida/Vuelta)
   ========================================================================== */
.cita-trip-tabs {
	display: flex;
	width: 100%;
	margin-bottom: 30px;
}

.cita-trip-tab {
	flex: 1;
	padding: 16px 0;
	background: transparent;
	border: none;
	border-bottom: 5px solid #EDEDED;
	font-size: 18px;
	font-weight: 600;
	color: #828282;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
}

.cita-trip-tab.active {
	border-bottom-color: var(--cita-primary);
	color: #000000;
}

.cita-trip-tab:hover:not(.active):not(.disabled):not(:disabled) {
	color: #666666;
}

.cita-trip-tab.disabled,
.cita-trip-tab:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	color: #CCCCCC;
}

.cita-trip-tab.disabled:hover,
.cita-trip-tab:disabled:hover {
	color: #CCCCCC;
}

/* ==========================================================================
   Stepward Navigation
   ========================================================================== */

/* Container */
.cita-stepward-navigation {
	margin-bottom: 40px;
	padding: 20px 0;
}

/* Step Indicator */
.cita-step-indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	margin-bottom: 30px;
	position: relative;
}

.cita-step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
}

.cita-step-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cita-gray-200);
	color: var(--cita-gray-500);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
	transition: var(--cita-transition);
	border: 2px solid transparent;
}

.cita-step-item.active .cita-step-number {
	background: var(--cita-primary);
	color: var(--cita-text-primary);
	border-color: var(--cita-primary);
}

.cita-step-item.completed .cita-step-number {
	background: var(--cita-success);
	color: white;
	border-color: var(--cita-success);
}

.cita-step-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--cita-gray-500);
	transition: var(--cita-transition);
}

.cita-step-item.active .cita-step-label {
	color: var(--cita-text-primary);
	font-weight: 600;
}

.cita-step-item.completed .cita-step-label {
	color: var(--cita-success);
}

/* Line between steps */
.cita-step-item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 20px;
	left: 100%;
	width: 40px;
	height: 2px;
	background: var(--cita-gray-300);
	transition: var(--cita-transition);
}

.cita-step-item.completed:not(:last-child)::after {
	background: var(--cita-success);
}

/* Navigation Buttons */
.cita-navigation-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cita-nav-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: white;
	border: 1.5px solid var(--cita-gray-300);
	border-radius: 8px;
	color: var(--cita-text-primary);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	transition: var(--cita-transition);
	cursor: pointer;
}

.cita-nav-button:hover {
	background: var(--cita-gray-50);
	border-color: var(--cita-primary);
	color: var(--cita-text-primary);
}

.cita-nav-button svg {
	flex-shrink: 0;
}

.cita-nav-back {
	margin-right: auto;
}

.cita-nav-forward {
	margin-left: auto;
	background: var(--cita-primary);
	border-color: var(--cita-primary);
}

.cita-nav-forward:hover {
	background: var(--cita-primary-dark);
	border-color: var(--cita-primary-dark);
}

/* ==========================================================================
   Desktop/Mobile Toggle Classes
   ========================================================================== */
/* Show desktop, hide mobile by default */
.cita-desktop-only {
	display: flex;
}

.cita-mobile-only {
	display: none;
}

/* Row 1: Times and Service with Line */
.cita-mobile-row-1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.cita-mobile-time {
	font-size: 18px;
	font-weight: 700;
	color: var(--cita-text-primary);
	flex: 0 0 auto;
}

.cita-mobile-service-wrapper {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

.cita-mobile-route-line {
	position: relative;
	width: 50%;
	height: 2px;
	background: var(--cita-line-gray);
	margin-left: 70px;
	margin-right: 70px;
}

.cita-mobile-route-line::before,
.cita-mobile-route-line::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 2px solid var(--cita-line-gray);
	background: transparent;
}

.cita-mobile-route-line::before {
	left: -8px;
}

.cita-mobile-route-line::after {
	right: -8px;
}

/* Row 2: Cities and route info */
.cita-mobile-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	width: 100%;
	gap: 8px;
}

.cita-mobile-city {
	font-size: 13px;
	color: #6B7280;
}

.cita-mobile-city:last-child {
	text-align: right;
}

.cita-mobile-route-info {
	font-size: 11px;
	color: var(--cita-gray-400);
	text-align: center;
}

.cita-mobile-route-info.cita-no-seats {
	color: var(--cita-error);
}

/* Row 3: Duration and Price */
.cita-mobile-row-3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.cita-mobile-duration {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: var(--cita-gray-100);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cita-text-primary);
}

.cita-mobile-price-action {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cita-mobile-price {
	font-size: 22px;
	font-weight: 700;
	color: var(--cita-text-primary);
}

.cita-mobile-only .cita-select-button {
	width: 40px;
	height: 40px;
}

/* ==========================================================================
   Passenger Page - Selected Schedules
   ========================================================================== */
/* Container for IDA and VUELTA schedules stacked */
.cita-selected-schedules-container {
	display: flex;
	flex-direction: column;
	gap: 0;
	/* No gap - components pegados */
	margin-bottom: 30px;
}

/* Only apply stacked styles when there are multiple schedules (IDA + VUELTA) */
.cita-selected-schedules-container .cita-selected-schedule:first-child:not(:only-child) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.cita-selected-schedules-container .cita-selected-schedule:last-child:not(:only-child) {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none;
	/* Remove top border to avoid double border */
}

/* Passenger form submit button */
#cita-passenger-submit {
	width: 100%;
	padding: 16px 22px;
	border-radius: 10px;
	cursor: pointer;
	transition: var(--cita-transition);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.cita-form-fields-section {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	/* Search info container - wrap items */
	.cita-search-info-container {
		flex-wrap: wrap;
		gap: 24px;
		padding: 24px;
	}

	/* Seat Selection - maintain two columns on tablets */
	.cita-seat-selection-layout {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.cita-seat-map-wrapper {
		padding: 24px;
	}

	/* Selected schedule - tablet adjustments */
	.cita-selected-schedule {
		padding: 24px;
	}

	/* Passenger cards - tablet */
	.cita-passenger-card {
		padding: 24px;
	}
}

@media (max-width: 768px) {

	/* Hide desktop version, show mobile version */
	.cita-desktop-only {
		display: none !important;
	}

	.cita-mobile-only,
	.cita-seat-selection-mobile.cita-mobile-only {
		display: flex !important;
		flex-direction: column;
		gap: 12px;
		padding: 20px;
		border: 1.5px solid rgba(0, 0, 0, 0.1);
		border-radius: 20px;
		margin-bottom: 16px;
		background: white;
	}

	.cita-selected-schedule--grid {
		grid-template-columns: 80px 1fr 80px;
	}

	.cita-progress {
		flex-wrap: wrap;
		gap: 20px;
	}

	.cita-progress-step::after {
		display: none;
	}

	/* Stepward Navigation - Tablet/Mobile */
	.cita-stepward-navigation {
		margin-bottom: 24px;
		padding: 16px 0;
	}

	.cita-step-indicator {
		gap: 0;
		justify-content: space-between;
		width: 100%;
		padding: 0;
	}

	.cita-step-item {
		flex: 1;
		max-width: none;
	}

	.cita-step-number {
		width: 38px;
		height: 38px;
		font-size: 15px;
	}

	.cita-step-label {
		font-size: 13px;
	}

	/* Adjust line between steps for mobile */
	.cita-step-item:not(:last-child)::after {
		top: 19px;
		left: calc(50% + 19px);
		width: calc(100% - 38px);
		right: auto;
	}

	/* Navigation Buttons - Tablet/Mobile */
	.cita-navigation-buttons {
		gap: 12px;
	}

	.cita-nav-button {
		padding: 10px 16px;
		font-size: 14px;
		gap: 6px;
	}

	.cita-nav-button svg {
		width: 18px;
		height: 18px;
	}

	.cita-form-row {
		grid-template-columns: 1fr;
	}

	/* Mobile: Single column for all form fields */
	.cita-form-fields-section {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Trip type toggle stays horizontal */
	.cita-trip-type-toggle {
		display: flex;
		width: 100%;
	}

	.cita-trip-type-btn {
		flex: 1;
	}

	.cita-search-form-wrapper {
		padding: 20px;
	}

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

	.cita-search-button-section {
		justify-content: stretch;
	}

	/* Search info container - mobile layout */
	.cita-search-info-container {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px;
	}

	.cita-search-info-item {
		font-size: 16px;
		flex-direction: row;
		width: 100%;
	}

	/* Trip tabs - mobile */
	.cita-trip-tab {
		font-size: 16px;
		padding: 14px 0;
	}

	.cita-departure-time,
	.cita-arrival-time {
		font-size: 24px;
	}

	.cita-origin,
	.cita-destination {
		font-size: 16px;
	}

	.cita-price {
		font-size: 28px;
	}

	/* Seat Selection - mobile layout */
	.cita-seat-selection-layout {
		grid-template-areas:
			"asciende asciende"
			"referencias referencias"
			"asientos asientos"
			"confirmar confirmar"
		;
		gap: 24px;
	}

	/* Hide seat page title in mobile */
	.cita-seat-page-title {
		display: none;
	}

	/* Mobile seat selection layout */
	.cita-seat-selection-mobile.cita-mobile-only {
		display: flex !important;
		flex-direction: column;
		gap: 24px;
	}

	/* Hide selected seats container in mobile */
	.cita-selected-seats-container {
		display: none;
	}

	/* Remove visual separations - no borders, no backgrounds */
	.cita-seat-map-wrapper {
		background: transparent;
		border: none;
		padding: 0;
	}

	.cita-seat-references {
		background: transparent;
		border: none;
		padding: 0;
	}

	.cita-seat-references h3 {
		margin-bottom: 12px;
	}

	/* Reference list - mobile horizontal */
	.cita-reference-list {
		flex-direction: row;
		justify-content: space-around;
		gap: 12px;
	}

	.cita-reference-item {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	/* Reference icons - 40x40px in mobile */
	.cita-seat-icon {
		width: 40px;
		height: 40px;
	}

	/* Adjust circle indicator size for mobile */
	.cita-reference-item .cita-seat-icon::after {
		bottom: 5px;
		right: 5px;
		width: 12px;
		height: 12px;
	}

	/* Adjust check mark size for mobile */
	.cita-reference-item .cita-seat-selected::before {
		bottom: 5px;
		right: 5px;
		width: 12px;
		height: 12px;
		font-size: 8px;
	}

	/* Passenger cards - mobile */
	.cita-passenger-card {
		padding: 20px;
	}

	.cita-passenger-card-body {
		gap: 16px;
	}

	/* Selected schedule component - mobile */
	.cita-selected-schedule {
		padding: 20px;
	}

	.cita-selected-schedule__body {
		gap: 12px;
	}

	.cita-selected-schedule__col-1,
	.cita-selected-schedule__col-2,
	.cita-selected-schedule__col-3 {
		min-width: 0;
		flex: 1 1 33%;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	.cita-selected-schedule__col-2 {
		padding: 0 8px;
	}

	.cita-selected-price {
		font-size: 16px;
	}

	.cita-selected-time {
		font-size: 16px;
		word-break: break-word;
	}

	.cita-selected-city {
		font-size: 16px;
		word-break: break-word;
	}

	.cita-selected-service {
		font-size: 12px;
		padding: 3px 8px;
		white-space: normal;
		text-align: center;
	}

	.cita-selected-route-info {
		font-size: 12px;
		word-break: break-word;
	}

	.cita-selected-route-line::before,
	.cita-selected-route-line::after {
		width: 7px;
		height: 7px;
		border: 2px solid var(--cita-line-gray);
	}

	.cita-selected-route-line::before {
		left: -8px;
	}

	.cita-selected-route-line::after {
		right: -8px;
	}
}

@media (max-width: 480px) {
	.cita-form-field {
		padding: 8px 16px;
	}

	.cita-trip-type-btn {
		padding: 8px 16px;
	}

	.cita-search-btn {
		padding: 10px 24px;
		font-size: 14px;
	}

	/* Force single column in very small screens */
	.cita-form-fields-section {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}

	/* Select2 mobile adjustments */
	.select2-container--default .select2-results__option {
		padding: 12px 8px;
		font-size: 13px;
	}

	.select2-container--default .select2-dropdown {
		max-width: 100vw;
	}

	/* Search info container - smaller mobile */
	.cita-search-info-container {
		padding: 16px;
		gap: 12px;
	}

	.cita-search-info-label {
		font-size: 16px;
	}

	.cita-search-info-value {
		font-size: 18px;
	}

	/* Trip tabs - small mobile */
	.cita-trip-tab {
		font-size: 14px;
		padding: 12px 0;
		border-bottom-width: 4px;
	}

	/* Trip selected - schedule selected component */
	.cita-selected-schedule--grid .cita-selected-schedule__col-1 {
		flex-direction: column;
		align-items: start;
	}

	/* Seat map - smaller padding on small screens */
	.cita-seat-map-wrapper {
		padding: 16px;
		border-radius: 16px;
	}

	/* Seats - slightly smaller on small screens */
	.cita-seat,
	.cita-reference-item .cita-seat-icon {
		width: 50px;
		height: 50px;
		font-size: 13px;
	}

	.cita-seat::after,
	.cita-seat-selected::before,
	.cita-reference-item .cita-seat-icon::after {
		width: 14px;
		height: 14px;
		bottom: 6px;
		right: 6px;
	}

	.cita-seat-selected::before {
		font-size: 9px;
	}

	.cita-seat-aisle-gap {
		width: 50px;
		/* Same size as seat in mobile */
	}

	/* Passenger cards - smaller padding */
	.cita-passenger-card {
		padding: 16px;
	}

	.cita-passenger-card-header h3 {
		font-size: 16px;
	}

	/* Submit button styles inherited from classes */

	/* Selected schedule - smaller */
	.cita-selected-schedule {
		padding: 16px;
	}

	.cita-selected-schedule--grid .cita-selected-city {
		font-size: 12px;
	}

	.cita-selected-schedule--grid .cita-trip-badge {
		font-size: 12px;
	}

	/* Stepward Navigation - Small Mobile */
	.cita-stepward-navigation {
		margin-bottom: 20px;
		padding: 12px 0;
	}

	.cita-step-number {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}

	.cita-step-label {
		font-size: 11px;
		max-width: 70px;
		text-align: center;
		line-height: 1.2;
	}

	.cita-step-item {
		gap: 5px;
	}

	/* Adjust line for smaller step numbers */
	.cita-step-item:not(:last-child)::after {
		top: 17px;
		left: calc(50% + 17px);
		width: calc(100% - 34px);
	}

	/* Navigation Buttons - Small Mobile */
	.cita-nav-button {
		padding: 10px 12px;
		font-size: 13px;
	}

	.cita-nav-button svg {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 425px) {

	/* Ensure single column below 425px */
	.cita-form-fields-section {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}

	/* Stepward Navigation - Very Small Mobile */
	.cita-step-number {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.cita-step-label {
		font-size: 10px;
		max-width: 55px;
	}

	.cita-step-item {
		gap: 4px;
	}

	/* Adjust line for even smaller step numbers */
	.cita-step-item:not(:last-child)::after {
		top: 15px;
		left: calc(50% + 15px);
		width: calc(100% - 30px);
	}

	/* Navigation Buttons - Very Small Mobile */
	.cita-navigation-buttons {
		flex-wrap: wrap;
		gap: 10px;
	}

	.cita-nav-button {
		padding: 10px;
		font-size: 12px;
		flex: 1;
		justify-content: center;
		min-width: 0;
	}

	.cita-nav-button svg {
		width: 14px;
		height: 14px;
	}

	/* Stack buttons if needed */
	.cita-nav-back,
	.cita-nav-forward {
		margin: 0;
	}
}

/* ==========================================================================
   Custom Toast Styles
   ========================================================================== */
#toast-container {
	z-index: 999999;
}

#toast-container>.cita-toast {
	background: white;
	border: 2px solid var(--cita-primary);
	border-radius: 10px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	padding: 16px;
	margin-bottom: 20px;
	min-width: 320px;
	max-width: 500px;
	opacity: 1;
	color: var(--cita-text-primary);
	font-size: 15px;
	animation: cita-toast-slide-up 0.3s ease-out;
	display: flex;
	align-items: center;
	gap: 12px;
}

@keyframes cita-toast-slide-up {
	from {
		transform: translateY(100px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

#toast-container>.cita-toast:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Toast container bottom-center */
#toast-container.toast-bottom-center {
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
}

/* Close button */
#toast-container>.cita-toast .toast-close-button {
	position: absolute;
	top: 8px;
	right: 8px;
	color: var(--cita-gray-500);
	opacity: 0.8;
	font-size: 18px;
	font-weight: bold;
}

#toast-container>.cita-toast .toast-close-button:hover {
	color: var(--cita-gray-700);
	opacity: 1;
}

/* Progress bar */
#toast-container>.cita-toast .toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	background: var(--cita-primary);
	opacity: 0.8;
	border-radius: 0 0 10px 10px;
}

/* Error toast - yellow accent */
#toast-container>.cita-toast.cita-toast-error {
	border-color: var(--cita-primary);
	background-color: #FFF8E7;
	color: #000000;
}

#toast-container>.cita-toast.cita-toast-error .toast-progress {
	background: var(--cita-primary);
}

#toast-container>.cita-toast.cita-toast-error .toast-close-button {
	color: #000000;
	opacity: 0.6;
}

#toast-container>.cita-toast.cita-toast-error .toast-close-button:hover {
	color: #000000;
	opacity: 1;
}

#toast-container>.cita-toast.cita-toast-error .toast-message {
	color: #000000;
}

/* Success toast - green accent */
#toast-container>.cita-toast.cita-toast-success {
	border-color: var(--cita-success);
}

#toast-container>.cita-toast.cita-toast-success .toast-progress {
	background: var(--cita-success);
}

/* Warning toast - yellow accent */
#toast-container>.cita-toast.cita-toast-warning {
	border-color: var(--cita-warning);
}

#toast-container>.cita-toast.cita-toast-warning .toast-progress {
	background: var(--cita-warning);
}

/* Info toast - blue accent */
#toast-container>.cita-toast.cita-toast-info {
	border-color: var(--cita-info);
}

#toast-container>.cita-toast.cita-toast-info .toast-progress {
	background: var(--cita-info);
}

/* Toast message */
#toast-container>.cita-toast .toast-message {
	font-weight: 500;
	line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
	#toast-container.toast-bottom-center {
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
	}

	#toast-container>.cita-toast {
		width: 100%;
		max-width: 100%;
		margin: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
}

/* ==========================================================================
   Payment Confirmation Page - Separated IDA/VUELTA
   ========================================================================== */

/* Override stacked styles for confirm payment page only */
.cita-confirm-payment-page .cita-selected-schedules-container {
	gap: 20px;
}

.cita-confirm-payment-page .cita-selected-schedules-container .cita-selected-schedule:first-child:not(:only-child) {
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.cita-confirm-payment-page .cita-selected-schedules-container .cita-selected-schedule:last-child:not(:only-child) {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-top: 1.5px solid var(--cita-primary);
}

/* ==========================================================================
   Payment Confirmation Page
   ========================================================================== */
.cita-payment-summary {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cita-payment-summary h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--cita-gray-900);
	margin: 0;
}

.cita-payment-info-container {
	display: flex;
	flex-direction: column;
	background: #F1F1F1;
	padding: 17px 20px;
	gap: 17px;
	border-radius: 10px;
}

.cita-payment-info-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	color: var(--cita-gray-900);
}

.cita-payment-info-passengers {
	justify-content: flex-start;
	gap: 12px;
}

.cita-payment-info-icon {
	display: flex;
	align-items: center;
	color: var(--cita-gray-700);
}

.cita-payment-info-icon svg {
	width: 20px;
	height: 20px;
}

.cita-payment-price {
	font-weight: 600;
	color: var(--cita-gray-900);
}

.cita-payment-info-total {
	font-size: 18px;
	font-weight: 700;
	padding-top: 10px;
	border-top: 2px solid var(--cita-gray-300);
}

.cita-payment-info-total .cita-payment-price {
	font-size: 20px;
}

#cita-confirm-payment-btn {
	width: 100%;
	padding: 16px 22px;
	border-radius: 10px;
}

/* ==========================================================================
   Fullscreen Spinner
   ========================================================================== */
#cita-fullscreen-spinner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	z-index: 9999;
}

.cita-spinner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

.cita-spinner-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
	z-index: 10000;
}

.cita-spinner {
	width: 60px;
	height: 60px;
	border: 4px solid rgba(255, 204, 51, 0.3);
	border-top-color: var(--cita-primary);
	border-radius: 50%;
	animation: cita-spinner-spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes cita-spinner-spin {
	to {
		transform: rotate(360deg);
	}
}

.cita-spinner-content p {
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	color: white;
}

/* ==========================================================================
   Payment Success Page (Mobile-First)
   ========================================================================== */

.cita-payment-success {
	max-width: 570px;
	margin: 75px auto 0;
	padding: 40px 20px;
	background: #fff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

/* Card contenedor (icono + titulo + detalle) */
.cita-success-card {
	width: 100%;
	max-width: 375px;
	padding: 30px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Contenedor icono */
.cita-success-icon {
	margin-bottom: 24px;
	text-align: center;
}

.cita-success-icon svg {
	width: 80px;
	height: 80px;
}

/* Contenedor titulo */
.cita-success-title {
	text-align: center;
	margin-bottom: 32px;
}

.cita-success-title h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--cita-text-primary);
	margin: 0 0 8px 0;
	line-height: 1.3;
}

.cita-success-title p {
	font-size: 16px;
	font-weight: 400;
	color: var(--cita-gray-500);
	margin: 0;
	line-height: 1.5;
}

/* Contenedor detalle */
.cita-success-detail {
	width: 100%;
	background: #fff;
	border: 3px solid var(--cita-primary);
	border-radius: 16px;
	padding: 24px 20px;
}

.cita-detail-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--cita-text-primary);
	margin: 0 0 20px 0;
}

.cita-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--cita-gray-100);
}

.cita-detail-row:last-child {
	border-bottom: none;
}

.cita-detail-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--cita-seat-occupied-text);
	flex-shrink: 0;
	margin-right: 16px;
}

.cita-detail-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--cita-text-primary);
	text-align: right;
	word-break: break-word;
}

.cita-payment-method {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}

/* Contenedor políticas y condiciones */
.cita-success-policies {
	width: 100%;
	background: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 16px;
	padding: 24px 20px;
	margin-top: 20px;
}

.cita-policies-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--cita-text-primary);
	margin: 0 0 20px 0;
}

.cita-policy-item {
	margin-bottom: 16px;
}

.cita-policy-item:last-child {
	margin-bottom: 0;
}

.cita-policy-subtitle {
	font-size: 14px;
	font-weight: 700;
	color: var(--cita-text-primary);
	margin: 0 0 4px 0;
}

.cita-policy-description {
	font-size: 14px;
	font-weight: 400;
	color: var(--cita-gray-500);
	margin: 0;
	line-height: 1.5;
}

/* Contenedor botones */
.cita-success-buttons {
	width: 100%;
	max-width: 375px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cita-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 600;
	border-radius: var(--cita-border-radius);
	text-decoration: none;
	transition: var(--cita-transition);
	cursor: pointer;
	border: none;
	width: 100%;
	text-align: center;
}

.cita-btn-primary {
	background: var(--cita-primary);
	color: var(--cita-text-primary);
	border: 2px solid var(--cita-primary);
}

.cita-btn-primary:hover {
	background: var(--cita-primary-dark);
	border-color: var(--cita-primary-dark);
}

.cita-btn-outline {
	background: transparent;
	color: var(--cita-text-primary);
	border: 2px solid var(--cita-primary);
}

.cita-btn-outline:hover {
	background: var(--cita-yellow-light);
	border-color: var(--cita-primary-dark);
}

/* Media queries para tablets y desktop */
@media (min-width: 768px) {
	.cita-payment-success {
		padding: 60px 40px;
	}

	.cita-success-card {
		max-width: 480px;
		padding: 40px 32px;
	}

	.cita-success-title h1 {
		font-size: 32px;
	}

	.cita-success-title p {
		font-size: 18px;
	}

	.cita-success-detail {
		padding: 32px 28px;
	}

	.cita-success-policies {
		padding: 32px 28px;
	}

	.cita-success-buttons {
		max-width: 480px;
	}
}

/* ==========================================================================
   Payment Error Page
   ========================================================================== */

.cita-payment-error {
	max-width: 570px;
	margin: 75px auto 0;
	padding: 40px 20px;
	background: #fff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

/* Card contenedor (icono + titulo) */
.cita-error-card {
	width: 100%;
	max-width: 375px;
	padding: 30px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Contenedor icono */
.cita-error-icon {
	margin-bottom: 24px;
	text-align: center;
}

.cita-error-icon svg {
	width: 80px;
	height: 80px;
}

/* Contenedor titulo */
.cita-error-title {
	text-align: center;
}

.cita-error-title h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--cita-text-primary);
	margin: 0 0 8px 0;
	line-height: 1.3;
}

.cita-error-title p {
	font-size: 16px;
	font-weight: 400;
	color: var(--cita-gray-500);
	margin: 0;
	line-height: 1.5;
}

/* Contenedor botones */
.cita-error-buttons {
	width: 100%;
	max-width: 375px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Media queries para tablets y desktop - Error */
@media (min-width: 768px) {
	.cita-payment-error {
		padding: 60px 40px;
	}

	.cita-error-card {
		max-width: 480px;
		padding: 40px 32px;
	}

	.cita-error-title h1 {
		font-size: 32px;
	}

	.cita-error-title p {
		font-size: 18px;
	}

	.cita-error-buttons {
		max-width: 480px;
	}
}

/* ==========================================================================
   Payment Pending Page
   ========================================================================== */

.cita-payment-pending {
	max-width: 570px;
	margin: 75px auto 0;
	padding: 40px 20px;
	background: #fff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

/* Card contenedor (icono + titulo) */
.cita-pending-card {
	width: 100%;
	max-width: 375px;
	padding: 30px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Contenedor icono */
.cita-pending-icon {
	margin-bottom: 24px;
	text-align: center;
}

.cita-pending-icon svg {
	width: 80px;
	height: 80px;
}

/* Contenedor titulo */
.cita-pending-title {
	text-align: center;
}

.cita-pending-title h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--cita-text-primary);
	margin: 0 0 8px 0;
	line-height: 1.3;
}

.cita-pending-title p {
	font-size: 16px;
	font-weight: 400;
	color: var(--cita-gray-500);
	margin: 0;
	line-height: 1.5;
}

/* Contenedor botones */
.cita-pending-buttons {
	width: 100%;
	max-width: 375px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Media queries para tablets y desktop - Pending */
@media (min-width: 768px) {
	.cita-payment-pending {
		padding: 60px 40px;
	}

	.cita-pending-card {
		max-width: 480px;
		padding: 40px 32px;
	}

	.cita-pending-title h1 {
		font-size: 32px;
	}

	.cita-pending-title p {
		font-size: 18px;
	}

	.cita-pending-buttons {
		max-width: 480px;
	}
}