@tailwind base;
@tailwind components;
@tailwind utilities;

/* =============================================================================
   BASE LAYER
   ============================================================================= */
@layer base {
	html {
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		background-color: #ffffff;
		font-family: 'Prompt', sans-serif;
		margin: 0;
		padding: 0;
		min-height: 100vh;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	button {
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Smooth focus outline for accessibility */
	:focus-visible {
		outline: 2px solid #0e7490;
		outline-offset: 2px;
	}

	/* Remove default list styles when used in nav / UI */
	ul[role='list'],
	ol[role='list'] {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Typography base for Thai content */
	p,
	li,
	span,
	div {
		line-height: 1.7;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.3;
		font-weight: 700;
		color: #111827;
	}
}

/* =============================================================================
   COMPONENTS LAYER
   ============================================================================= */
@layer components {
	/* ── Navbar ──────────────────────────────────────────────────────────────── */

	/* ── Outer sticky header wrapper ─────────────────────────────────────── */
	.w_navbar {
		position: sticky;
		top: 0;
		z-index: 9999;
		width: 100%;
	}

	/* ── Top contact bar (blue gradient, desktop only) ───────────────────── */
	.luxury-header {
		background: linear-gradient(to right, #1e40af, #2563eb, #1e40af);
		border-bottom: 1px solid #1e40af;
		box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
		position: relative;
		z-index: 999999;
	}

	/* ── White main navigation bar ───────────────────────────────────────── */
	.luxury-nav {
		background: rgba(255, 255, 255, 0.95);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
		border-bottom: 1px solid rgb(229, 231, 235);
		position: relative;
		z-index: 30;
	}

	/* ── Desktop nav link ────────────────────────────────────────────────── */
	.nav-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		padding: 8px 14px;
		color: rgb(55, 65, 81);
		font-weight: 500;
		font-size: 15px;
		transition: all 0.25s ease;
		border-radius: 8px;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		background: none;
		border: none;
	}

	.nav-link:hover {
		background-color: rgba(0, 112, 250, 0.08);
		color: rgb(7, 89, 133);
		transform: translateY(-1px);
		box-shadow: 0 1px 0 rgba(0, 112, 250, 0.06);
	}

	.nav-link.active {
		color: rgb(7, 89, 133);
		background: linear-gradient(to right, #e6f0ff, #dbeafe);
		box-shadow: 0 1px 2px 0 rgba(14, 165, 233, 0.12);
		font-weight: 600;
	}

	/* ── Top-bar contact links ───────────────────────────────────────────── */
	.contact-link {
		display: flex;
		align-items: center;
		color: rgb(209, 213, 219);
		transition: all 0.25s ease;
		font-size: 14px;
		text-decoration: none;
	}

	.contact-link:hover {
		color: #ffffff;
		transform: translateY(-1px);
	}

	/* ── Language selector button in top bar ─────────────────────────────── */
	.language-selector {
		background: rgba(255, 255, 255, 0.1);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		border: 1px solid rgba(255, 255, 255, 0.25);
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.25s ease;
	}

	.language-selector:hover {
		background: rgba(255, 255, 255, 0.22);
	}

	/* ── Desktop dropdown panel ──────────────────────────────────────────── */
	.nav-dropdown {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		z-index: 99999;
		min-width: 220px;
		background: rgba(255, 255, 255, 0.98);
		border: 1px solid rgb(229, 231, 235);
		border-radius: 10px;
		box-shadow: 0 20px 40px -8px rgb(0 0 0 / 0.18);
		overflow: hidden;
	}

	/* ── Dropdown item ───────────────────────────────────────────────────── */
	.nav-dropdown-item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 11px 16px;
		font-size: 14px;
		color: rgb(55, 65, 81);
		text-decoration: none;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.nav-dropdown-item:hover {
		background-color: rgb(249, 250, 251);
		color: rgb(29, 78, 216);
	}

	/* ── Language dropdown (absolute positioned) ─────────────────────────── */
	.lang-dropdown {
		position: absolute !important;
		top: calc(100% + 8px) !important;
		right: 0 !important;
		left: auto !important;
		z-index: 999999 !important;
		min-width: 160px !important;
		background: rgba(255, 255, 255, 0.98) !important;
		border: 1px solid rgb(229, 231, 235) !important;
		border-radius: 10px !important;
		box-shadow: 0 20px 40px -8px rgb(0 0 0 / 0.18) !important;
		overflow: hidden !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* ── Mobile navigation link ──────────────────────────────────────────── */
	.mobile-nav-link {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 12px 14px;
		color: #374151;
		font-size: 15px;
		font-weight: 500;
		border-radius: 10px;
		transition: all 0.2s ease;
		text-decoration: none;
		border: 1px solid transparent;
		background: none;
		cursor: pointer;
	}

	.mobile-nav-link:hover {
		color: white;
		background-color: rgba(37, 99, 235, 0.65);
		border-color: rgba(37, 99, 235, 0.3);
		transform: translateX(3px);
	}

	.mobile-nav-link.active {
		background: #2563eb;
		color: white;
		border-color: rgba(37, 99, 235, 0.5);
		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.12);
	}

	/* ── Mobile sub-item link (accordion children) ───────────────────────── */
	.mobile-sub-link {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 9px 14px;
		color: rgb(107, 114, 128);
		border-radius: 8px;
		font-size: 14px;
		text-decoration: none;
		transition: all 0.18s ease;
	}

	.mobile-sub-link:hover {
		color: white;
		background-color: rgba(37, 99, 235, 0.5);
		transform: translateX(3px);
	}

	/* ── Legacy nav classes kept for compatibility ───────────────────────── */
	.w_nav_body {
		@apply w-full lg:w-[90%] h-[60px] lg:h-[80px] mx-auto flex justify-between items-center px-2 lg:px-0;
	}

	.w_menu_head {
		@apply w-auto h-20 flex justify-center items-center mx-4 px-2 py-1 text-sm border-y-4 border-gray-50 transition-all ease-in-out duration-700 text-gray-600 font-medium uppercase;
	}

	.w_menu_head:hover {
		@apply text-[#14919e];
	}

	.w_menu_head.active {
		@apply border-b-[#14919e] text-[#14919e];
	}

	/* ── Cards ───────────────────────────────────────────────────────────────── */

	.card_slide_car {
		@apply w-[90%] bg-gradient-to-t from-gray-100 to-gray-200 rounded-xl relative box-border overflow-hidden shadow-lg border border-gray-200 mt-1 mb-5;
	}

	.card_slide_brand {
		@apply text-cyan-600 text-3xl font-extrabold italic;
	}

	.card_slide_price {
		@apply text-transparent bg-clip-text bg-gradient-to-b from-cyan-700 to-cyan-500 text-right text-3xl font-bold;
	}

	.card_slide_btn_rent {
		@apply bg-gradient-to-r from-[#18a0a5] to-[#0f7079] text-white w-40 h-10 rounded-full mx-auto;
	}

	/* Car listing card */
	.car_card {
		@apply bg-white rounded-2xl overflow-hidden shadow-md border border-gray-100 hover:shadow-xl hover:border-cyan-200 transition-all duration-300 relative;
	}

	.car_card:hover {
		@apply -translate-y-1;
	}

	.car_card_img {
		@apply w-full h-48 object-cover bg-gray-100;
	}

	.car_card_body {
		@apply p-4;
	}

	.car_card_title {
		@apply text-gray-900 font-bold text-lg leading-tight mb-1;
	}

	.car_card_price {
		@apply text-transparent bg-clip-text bg-gradient-to-b from-cyan-700 to-cyan-500 text-2xl font-bold;
	}

	.car_card_badge {
		@apply absolute top-3 left-3 bg-cyan-600 text-white text-[10px] font-bold uppercase px-2.5 py-1 rounded-full shadow;
	}

	.car_card_badge_ev {
		@apply absolute top-3 right-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white text-[10px] font-bold uppercase px-2.5 py-1 rounded-full shadow;
	}

	/* ── Text Effects ────────────────────────────────────────────────────────── */

	.text_ev {
		@apply text-transparent bg-clip-text bg-gradient-to-b from-cyan-700 to-cyan-500;
	}

	.text_brand {
		@apply text-transparent bg-clip-text bg-gradient-to-b from-[#18a0a5] to-[#0f7079];
	}

	.text_heading_section {
		@apply text-2xl lg:text-4xl font-extrabold text-gray-800;
	}

	/* ── Buttons ─────────────────────────────────────────────────────────────── */

	.btn_rent {
		@apply bg-gradient-to-r from-[#18a0a5] to-[#0f7079] h-6 w-28 text-white text-xs rounded-full font-bold uppercase flex justify-center items-center px-2;
	}

	.btn_rent_lg {
		@apply bg-gradient-to-r from-[#18a0a5] to-[#0f7079] text-white px-8 py-3 rounded-full font-bold text-sm uppercase flex items-center justify-center gap-2 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-200 hover:from-[#0f7079] hover:to-[#18a0a5];
	}

	.btn_primary {
		@apply bg-gradient-to-r from-[#18a0a5] to-[#0f7079] text-white px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-300 hover:opacity-90 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-offset-2;
	}

	.btn_secondary {
		@apply border-2 border-cyan-600 text-cyan-700 px-6 py-2.5 rounded-full font-semibold text-sm bg-transparent transition-all duration-300 hover:bg-cyan-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500 focus-visible:ring-offset-2;
	}

	.btn_ghost {
		@apply text-gray-600 px-6 py-2.5 rounded-full font-medium text-sm bg-gray-100 hover:bg-gray-200 transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400;
	}

	.btn_danger {
		@apply bg-red-600 text-white px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-300 hover:bg-red-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2;
	}

	.btn_sidebar_left {
		@apply w-full h-10 inline-block bg-gray-100 text-gray-800 px-4 py-2 border border-gray-100 rounded-full bg-gradient-to-t from-gray-200 to-gray-50 my-2;
	}

	.btn_sidebar_left.active {
		@apply bg-gradient-to-t from-[#13c3c9] to-[#0E8388] text-white border-transparent;
	}

	/* ── Scroll to top ───────────────────────────────────────────────────────── */

	.scroll_to_top {
		@apply fixed bottom-4 right-2 z-50 w-12 h-12 bg-gray-600 text-white rounded-full transition-all duration-500;
	}

	.scroll_to_top:hover {
		@apply bg-[#0e7490];
	}

	/* ── Modal / Overlay ─────────────────────────────────────────────────────── */

	.modal_promotion {
		@apply fixed top-0 left-0 z-[90] w-full h-full bg-black bg-opacity-70 flex justify-center items-center;
	}

	.box_promotion {
		@apply w-full lg:w-[600px] h-full lg:h-[90%] bg-gray-50 relative rounded-md p-2;
	}

	.modal_overlay {
		@apply fixed inset-0 z-[80] bg-black/70 flex items-center justify-center p-4 backdrop-blur-sm;
	}

	.modal_box {
		@apply bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto relative;
	}

	.modal_header {
		@apply flex items-center justify-between p-5 border-b border-gray-100;
	}

	.modal_close_btn {
		@apply w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400;
	}

	/* ── Footer bottom nav (LINE / mobile) ────────────────────────────────────── */

	.footer_page {
		@apply relative w-full md:w-[70%] lg:w-[900px] h-16 bg-gray-50 rounded-t-2xl border-t-8 border-[#18a6b3] drop-shadow-md mx-auto z-[9999];
	}

	.menu_bottom {
		@apply list-none flex justify-between items-center;
	}

	.menu_bottom li {
		@apply w-[20%] h-16 flex justify-center items-start pt-2 text-[#85c8d3] relative;
	}

	/* ── Search / Map Input ──────────────────────────────────────────────────── */

	.input_search_map {
		@apply w-full h-full bg-transparent outline-none border-none;
	}

	/* ── Loading Page ────────────────────────────────────────────────────────── */

	.content_loading_page {
		@apply fixed top-0 left-0 w-screen h-screen bg-[#2f3f41] flex justify-center items-center;
		z-index: 99999;
	}

	/* ── Car Detail Boxes ────────────────────────────────────────────────────── */

	.info_detail_car_box {
		@apply border-b border-gray-300 text-gray-400 text-xs p-2;
	}

	.box_row_info_cus {
		@apply grid grid-cols-3 px-2 text-xs;
	}

	.box_row_info_rent {
		@apply grid grid-cols-2 px-2 text-xs;
	}

	/* ── Section Layouts ─────────────────────────────────────────────────────── */

	.section_wrapper {
		@apply w-full max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8;
	}

	.section_title {
		@apply text-2xl lg:text-3xl font-extrabold text-gray-800 text-center mb-2;
	}

	.section_subtitle {
		@apply text-sm text-gray-500 text-center mb-8 max-w-xl mx-auto;
	}

	.section_divider {
		@apply w-16 h-1 bg-gradient-to-r from-cyan-600 to-cyan-400 rounded-full mx-auto my-3;
	}

	/* ── Hero Banner ─────────────────────────────────────────────────────────── */

	.hero_banner {
		@apply relative w-full overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-[#0e3d42];
	}

	.hero_content {
		@apply relative z-10 flex flex-col items-center justify-center text-center py-16 lg:py-24 px-4;
	}

	.hero_title {
		@apply text-3xl lg:text-6xl font-extrabold text-white leading-tight mb-4;
	}

	.hero_subtitle {
		@apply text-base lg:text-xl text-gray-300 mb-8 max-w-2xl;
	}

	/* ── Search Form (Date Picker) ───────────────────────────────────────────── */

	.search_box {
		@apply bg-white rounded-2xl shadow-2xl p-5 lg:p-8 w-full max-w-4xl mx-auto;
	}

	.search_label {
		@apply block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5;
	}

	.search_input {
		@apply w-full h-11 bg-gray-50 border border-gray-200 rounded-xl px-4 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 transition-colors duration-200;
	}

	/* ── Filter Sidebar ──────────────────────────────────────────────────────── */

	.sidebar_filter {
		@apply bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sticky top-28;
	}

	.sidebar_title {
		@apply text-sm font-bold text-gray-700 uppercase tracking-wider mb-3 pb-2 border-b border-gray-100 flex items-center gap-2;
	}

	.filter_tag {
		@apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium border border-gray-200 text-gray-600 bg-gray-50 hover:border-cyan-500 hover:text-cyan-700 hover:bg-cyan-50 cursor-pointer transition-all duration-150;
	}

	.filter_tag.active {
		@apply bg-cyan-600 border-cyan-600 text-white hover:bg-cyan-700 hover:text-white;
	}

	/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

	.breadcrumb_nav {
		@apply flex flex-wrap items-center gap-1 text-xs text-gray-500 py-3;
	}

	.breadcrumb_link {
		@apply hover:text-cyan-700 transition-colors duration-150;
	}

	.breadcrumb_sep {
		@apply text-gray-300;
	}

	.breadcrumb_current {
		@apply text-cyan-700 font-medium truncate max-w-[200px];
	}

	/* ── Form Elements ───────────────────────────────────────────────────────── */

	.form_label {
		@apply block text-sm font-medium text-gray-700 mb-1.5;
	}

	.form_input {
		@apply w-full border border-gray-300 rounded-xl px-4 py-2.5 text-sm text-gray-800 bg-white placeholder-gray-400 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition-all duration-200;
	}

	.form_select {
		@apply w-full border border-gray-300 rounded-xl px-4 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition-all duration-200 cursor-pointer;
	}

	.form_textarea {
		@apply w-full border border-gray-300 rounded-xl px-4 py-3 text-sm text-gray-800 bg-white placeholder-gray-400 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition-all duration-200 resize-vertical min-h-[100px];
	}

	.form_error {
		@apply text-red-500 text-xs mt-1 flex items-center gap-1;
	}

	.form_hint {
		@apply text-gray-400 text-xs mt-1;
	}

	/* ── Badge / Chips ───────────────────────────────────────────────────────── */

	.badge {
		@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
	}

	.badge_cyan {
		@apply badge bg-cyan-100 text-cyan-800;
	}

	.badge_green {
		@apply badge bg-green-100 text-green-800;
	}

	.badge_red {
		@apply badge bg-red-100 text-red-800;
	}

	.badge_yellow {
		@apply badge bg-yellow-100 text-yellow-800;
	}

	.badge_gray {
		@apply badge bg-gray-100 text-gray-700;
	}

	.badge_ev {
		@apply badge bg-gradient-to-r from-cyan-100 to-teal-100 text-cyan-800 border border-cyan-200;
	}

	/* ── Booking Status Badges ───────────────────────────────────────────────── */

	.status_pending {
		@apply badge bg-yellow-100 text-yellow-800 border border-yellow-200;
	}

	.status_confirmed {
		@apply badge bg-blue-100 text-blue-800 border border-blue-200;
	}

	.status_active {
		@apply badge bg-green-100 text-green-800 border border-green-200;
	}

	.status_completed {
		@apply badge bg-gray-100 text-gray-700 border border-gray-200;
	}

	.status_cancelled {
		@apply badge bg-red-100 text-red-800 border border-red-200;
	}

	/* ── Alert / Flash Messages ──────────────────────────────────────────────── */

	.alert {
		@apply flex items-start gap-3 p-4 rounded-xl border text-sm;
	}

	.alert_success {
		@apply alert bg-green-50 border-green-200 text-green-800;
	}

	.alert_error {
		@apply alert bg-red-50 border-red-200 text-red-800;
	}

	.alert_warning {
		@apply alert bg-yellow-50 border-yellow-200 text-yellow-800;
	}

	.alert_info {
		@apply alert bg-blue-50 border-blue-200 text-blue-800;
	}

	/* ── Swiper overrides ────────────────────────────────────────────────────── */

	.swiper_car_btn {
		@apply absolute top-1/2 -translate-y-1/2 z-10 w-9 h-9 bg-white/90 rounded-full shadow-md flex items-center justify-center text-cyan-700 hover:bg-cyan-600 hover:text-white transition-all duration-200;
	}

	/* ── Page Section Backgrounds ────────────────────────────────────────────── */

	.section_light {
		@apply bg-gray-50 py-14 lg:py-20;
	}

	.section_white {
		@apply bg-white py-14 lg:py-20;
	}

	.section_dark {
		@apply bg-gray-900 py-14 lg:py-20;
	}

	.section_brand {
		@apply bg-gradient-to-br from-[#0e3d42] to-[#0e7490] py-14 lg:py-20;
	}

	/* ── Line LIFF Specific ──────────────────────────────────────────────────── */

	.line_page_wrapper {
		@apply min-h-screen bg-gray-100 font-prompt;
	}

	.line_card {
		@apply bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-4;
	}

	.line_card_header {
		@apply bg-gradient-to-r from-[#18a0a5] to-[#0f7079] p-4 text-white;
	}

	.line_section_title {
		@apply text-sm font-bold text-gray-700 uppercase tracking-wider mb-3 flex items-center gap-2;
	}

	/* ── Skeleton Loading ────────────────────────────────────────────────────── */

	.skeleton {
		@apply animate-pulse bg-gray-200 rounded;
	}

	.skeleton_text {
		@apply skeleton h-4 w-full mb-2;
	}

	.skeleton_title {
		@apply skeleton h-6 w-3/4 mb-3;
	}

	.skeleton_img {
		@apply skeleton w-full h-48 rounded-xl;
	}

	.skeleton_card {
		@apply bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 p-4 space-y-3;
	}

	/* ── Pagination ──────────────────────────────────────────────────────────── */

	.pagination {
		@apply flex items-center justify-center gap-1 flex-wrap;
	}

	.pagination_btn {
		@apply w-9 h-9 flex items-center justify-center rounded-lg text-sm font-medium text-gray-600 bg-white border border-gray-200 hover:border-cyan-500 hover:text-cyan-700 transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400;
	}

	.pagination_btn.active {
		@apply bg-cyan-600 border-cyan-600 text-white hover:bg-cyan-700 hover:text-white;
	}

	.pagination_btn.disabled {
		@apply opacity-40 pointer-events-none cursor-not-allowed;
	}

	/* ── Back to top (alias) ─────────────────────────────────────────────────── */

	#scroll-to-top {
		display: none;
	}

	#scroll-to-top.visible {
		display: flex;
	}

	/* ── Cookie Banner ───────────────────────────────────────────────────────── */

	#cookie-banner {
		animation: slideUp 0.4s ease;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* ── Flatpickr custom theme ──────────────────────────────────────────────── */

	.flatpickr-day.selected,
	.flatpickr-day.selected:hover {
		background: #0e7490 !important;
		border-color: #0e7490 !important;
	}

	.flatpickr-day.inRange {
		background: #cffafe !important;
		border-color: #cffafe !important;
		box-shadow: -5px 0 0 #cffafe, 5px 0 0 #cffafe;
	}

	.flatpickr-day.today {
		border-color: #14919e !important;
	}

	.flatpickr-day:hover {
		background: #ecfeff !important;
		border-color: #14919e !important;
	}

	/* ── AOS custom defaults ─────────────────────────────────────────────────── */

	[data-aos] {
		pointer-events: none;
	}

	[data-aos].aos-animate {
		pointer-events: auto;
	}

	/* ── Utility: line-clamp helpers (pre Tailwind 3.3) ─────────────────────── */

	.clamp_1 {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.clamp_2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.clamp_3 {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ── Swiper pagination dots custom color ─────────────────────────────────── */

	.swiper-pagination-bullet-active {
		background: #0e7490 !important;
	}

	.swiper-pagination-bullet {
		background: #94a3b8;
		opacity: 1;
	}

	/* ── Custom scrollbar ────────────────────────────────────────────────────── */

	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	::-webkit-scrollbar-track {
		background: #f1f5f9;
	}

	::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 3px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #0e7490;
	}

	/* ── Lazy image fade-in ──────────────────────────────────────────────────── */

	img.lazy {
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	img.lazy.loaded {
		opacity: 1;
	}
}

/* =============================================================================
   UTILITIES LAYER
   ============================================================================= */
@layer utilities {
	/* Font family shorthand */
	.font-prompt {
		font-family: 'Prompt', sans-serif;
	}

	/* Brand gradient text */
	.text-gradient-brand {
		background: linear-gradient(180deg, #18a0a5, #0f7079);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	/* Brand gradient background */
	.bg-gradient-brand {
		background: linear-gradient(135deg, #18a0a5, #0f7079);
	}

	/* Safe area padding for iOS */
	.pb-safe {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.pt-safe {
		padding-top: env(safe-area-inset-top);
	}

	/* Tap highlight removal */
	.no-tap {
		-webkit-tap-highlight-color: transparent;
	}

	/* Full bleed image */
	.img-cover {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	/* Visually hidden (screen reader only) */
	.sr-only-focusable:focus {
		@apply not-sr-only;
	}

	/* Prevent text selection */
	.select-none-all {
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}

	/* ── Promotion Card ────────────────────────────────────────────────── */
	.promotion-card {
		transition: box-shadow 0.3s, transform 0.3s;
	}

	.promotion-card:hover {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		transform: translateY(-2px);
	}

	/* ── Booking / Search Form Container ──────────────────────────────── */
	.rental-booking-form {
		position: relative;
		z-index: 10;
	}

	.booking-container {
		background: linear-gradient(135deg, #f6f9ff 0%, #ffffff 100%);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(52, 124, 255, 0.3);
		backdrop-filter: blur(10px);
	}

	/* ── Booking / Search Form ─────────────────────────────────────────── */
	.booking-content {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.25rem;
		align-items: end;
	}

	.location-section {
		background: rgba(255, 255, 255, 0.95);
		padding: 5px;
		position: relative;
	}

	.location-button {
		width: 100%;
		background: #f3f4f6;
		border: 2px solid #347CFF;
		padding: 0.875rem;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.location-button:hover {
		border-color: #347CFF;
		box-shadow: 0 2px 8px rgba(52, 124, 255, 0.15);
	}

	.location-label {
		display: block;
		font-size: 0.7rem;
		color: #6b7280;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.location-value {
		display: block;
		font-size: 0.875rem;
		color: #1f2937;
		font-weight: 500;
	}

	.location-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		border: 2px solid #e5e7eb;
		border-radius: 8px;
		margin-top: 0.25rem;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		z-index: 50;
		max-height: 300px;
		overflow: hidden;
	}

	.location-item {
		width: 100%;
		padding: 0.75rem;
		text-align: left;
		border: none;
		background: none;
		cursor: pointer;
		font-size: 0.875rem;
		color: #374151;
		transition: background 0.15s;
	}

	.location-item:hover {
		background: #f3f4f6;
	}

	.datetime-section {
		background: rgba(255, 255, 255, 0.95);
		padding: 5px;
		position: relative;
	}

	.datetime-button {
		width: 100%;
		background: #f3f4f6;
		border: 2px solid #347CFF;
		padding: 0.875rem;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.datetime-button:hover {
		box-shadow: 0 2px 8px rgba(52, 124, 255, 0.15);
	}

	.datetime-content {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.datetime-group {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}

	.datetime-icon {
		color: #347CFF;
		font-size: 1rem;
	}

	.datetime-label {
		display: block;
		font-size: 0.7rem;
		color: #6b7280;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.datetime-value {
		display: block;
		font-size: 0.875rem;
		color: #1f2937;
		font-weight: 500;
	}

	.datetime-arrow {
		background-color: #ababab;
		color: #ffffff;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	.calendar-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		border: 2px solid #e5e7eb;
		border-radius: 8px;
		margin-top: 0.5rem;
		padding: 1rem;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		z-index: 40;
	}

	.search-button {
		background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
		color: white;
		border: none;
		padding: 1rem 2rem;
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
		box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
		transition: all 0.3s ease;
		width: 100%;
	}

	.search-button:hover {
		box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
		transform: translateY(-1px);
	}

	.search-container {
		position: relative;
	}

	.search-input {
		width: 100%;
		padding: 0.75rem 2.5rem 0.75rem 0.75rem;
		border: 1px solid #e5e7eb;
		font-size: 0.875rem;
		outline: none;
	}

	.search-icon {
		position: absolute;
		right: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		color: #9ca3af;
	}

	.location-list {
		max-height: 250px;
		overflow-y: auto;
	}
}