/**
 * Cross-border Car Service Base Styles
 * Common styles for cross-border car service pages
 *
 * @package Errand
 */

/* =============================================================================
   CSS Variables for Car Service
   ============================================================================= */

:root {
	/* Car Service Color Palette */
	--car-primary-color: #2563eb;
	--car-primary-dark: #1d4ed8;
	--car-primary-light: #3b82f6;
	--car-accent-color: #f59e0b;
	--car-success-color: #10b981;
	--car-text-primary: #1e293b;
	--car-text-secondary: #64748b;
	--car-text-muted: #94a3b8;
	--car-bg-primary: #ffffff;
	--car-bg-secondary: #f8fafc;
	--car-bg-accent: #f1f5f9;
	--car-border-color: #e2e8f0;
	--car-border-light: #f1f5f9;

	/* Car Service Shadows */
	--car-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--car-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--car-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--car-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--car-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	/* Car Service Border Radius */
	--car-radius-sm: 0.375rem;
	--car-radius-base: 0.5rem;
	--car-radius-md: 0.75rem;
	--car-radius-lg: 1rem;
	--car-radius-xl: 1.5rem;

	/* Car Service Spacing */
	--car-spacing-xs: 0.5rem;
	--car-spacing-sm: 0.75rem;
	--car-spacing-base: 1rem;
	--car-spacing-md: 1.5rem;
	--car-spacing-lg: 2rem;
	--car-spacing-xl: 3rem;
	--car-spacing-2xl: 4rem;

	/* Car Service Transitions */
	--car-transition-fast: 150ms ease-in-out;
	--car-transition-base: 250ms ease-in-out;
	--car-transition-slow: 350ms ease-in-out;
}

/* =============================================================================
   Base Styles
   ============================================================================= */

.cross-border-car-page {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'Noto Sans TC', Roboto, 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: var(--car-text-primary);
}

.cross-border-car-page .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* =============================================================================
   Typography
   ============================================================================= */

.cross-border-car-page h1,
.cross-border-car-page h2,
.cross-border-car-page h3,
.cross-border-car-page h4 {
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: var(--car-spacing-base);
	color: var(--car-text-primary);
}

.cross-border-car-page h1 {
	font-size: 2.5rem;
}

.cross-border-car-page h2 {
	font-size: 2rem;
}

.cross-border-car-page h3 {
	font-size: 1.5rem;
}

.cross-border-car-page p {
	margin-bottom: var(--car-spacing-base);
	color: var(--car-text-secondary);
}

/* =============================================================================
   Buttons
   ============================================================================= */

.cross-border-car-page .btn {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: var(--car-radius-base);
	cursor: pointer;
	transition: all var(--car-transition-base);
	line-height: 1.5;
}

.cross-border-car-page .btn-primary {
	background-color: var(--car-primary-color);
	color: #ffffff;
}

.cross-border-car-page .btn-primary:hover,
.cross-border-car-page .btn-primary:focus {
	background-color: var(--car-primary-dark);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: var(--car-shadow-md);
}

.cross-border-car-page .btn-large {
	padding: 1.125rem 2.25rem;
	font-size: 1.125rem;
}

/* =============================================================================
   Links
   ============================================================================= */

.cross-border-car-page a {
	color: var(--car-primary-color) !important;
	text-decoration: none;
	transition: color var(--car-transition-fast);
}

.cross-border-car-page a:hover,
.cross-border-car-page a:focus {
	color: var(--car-primary-dark) !important;
	text-decoration: underline;
}

/* =============================================================================
   Sections
   ============================================================================= */

.cross-border-car-page .section {
	padding: var(--car-spacing-2xl) 0;
}

.cross-border-car-page .section-title {
	text-align: center;
	margin-bottom: var(--car-spacing-xl);
}

/* =============================================================================
   Cards
   ============================================================================= */

.cross-border-car-page .card {
	background: var(--car-bg-primary);
	border-radius: var(--car-radius-lg);
	box-shadow: var(--car-shadow-base);
	padding: var(--car-spacing-lg);
	transition: all var(--car-transition-base);
}

.cross-border-car-page .card:hover {
	box-shadow: var(--car-shadow-lg);
	transform: translateY(-4px);
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

@media (max-width: 768px) {
	.cross-border-car-page h1 {
		font-size: 2rem;
	}

	.cross-border-car-page h2 {
		font-size: 1.75rem;
	}

	.cross-border-car-page h3 {
		font-size: 1.25rem;
	}

	.cross-border-car-page .container {
		padding: 0 16px;
	}

	.cross-border-car-page .section {
		padding: var(--car-spacing-xl) 0;
	}

	.cross-border-car-page .btn {
		width: 100%;
		padding: 1rem 1.5rem;
	}
}