/* Combined CSS from both files - Mobile First Approach */
        :root {
            --primary: #48831f;
            --primary-color: #48831f;
            --background-light: #F9FAFB;
            --text-light-primary: #1A1A1A;
            --text-light-secondary: #6B7280;
            --border-light: #E5E7EB;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
            --white: #ffffff;
            --black: #000000;
            --border-radius: 1rem;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Hide placeholder on focus for country inputs */
        #origin-desktop:focus::placeholder,
        #destination-desktop:focus::placeholder,
        #origin-input-field:focus::placeholder,
        #destination-input-field:focus::placeholder {
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        html {
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            color: var(--gray-900);
            min-height: max(884px, 100dvh);
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
        }

        /* Custom Tooltip Notification Styles */
        .custom-tooltip-notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-100px);
            background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
            color: #ffffff;
            padding: 14px 24px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 500;
            z-index: 999999;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 90%;
            width: auto;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .custom-tooltip-notification.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .custom-tooltip-notification.error {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .custom-tooltip-notification.success {
            background: linear-gradient(135deg, #48831f 0%, #3d6e1a 100%);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .custom-tooltip-notification.warning {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .custom-tooltip-notification .tooltip-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .custom-tooltip-notification .tooltip-message {
            flex: 1;
            line-height: 1.4;
        }

        .custom-tooltip-notification .tooltip-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: #ffffff;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: background 0.2s ease;
            flex-shrink: 0;
        }

        .custom-tooltip-notification .tooltip-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        @media (max-width: 480px) {
            .custom-tooltip-notification {
                top: 10px;
                padding: 12px 16px;
                font-size: 0.85rem;
                max-width: 95%;
            }
        }

        /* Header Styles */
        header:not(.brand-filter-title) {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2001;
            height: 4rem;
            width: 100%;
            max-width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            overflow-x: hidden;
            transform: translateY(0);
            transition: transform 0.25s ease-out;
            will-change: transform;
        }

        header:not(.brand-filter-title).hidden {
            transform: translateY(-100%);
        }

        .header-wrapper {
            width: 100%;
            height: 100%;
            padding: 0 0.75rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        @media (min-width: 640px) {
            .header-wrapper {
                padding: 0 1rem;
            }
        }

        @media (min-width: 768px) {
            .header-wrapper {
                padding: 0 2rem;
                justify-content: space-between;
            }
        }

        @media (min-width: 1024px) {
            .header-wrapper {
                padding: 0 2rem;
            }
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-shrink: 1;
            justify-content: flex-start;
            min-width: 0;
            max-width: calc(100% - 4rem);
            overflow: visible;
        }

        .logo-icon-wrapper {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: 2px solid #48831f;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }

        .logo-icon {
            width: 100% !important;
            height: 100% !important;
            border-radius: 50% !important;
            object-fit: cover !important;
            object-position: center !important;
            display: block !important;
            transform: scale(1.15) !important;
            border: none !important;
        }

        .logo-text {
            font-size: 1.5rem;
            font-weight: 900;
            line-height: 1;
            text-transform: uppercase;
            font-family: 'Yeseva One', 'Playfair Display', serif;
            white-space: nowrap;
            position: relative;
            display: inline-block;
            background: linear-gradient(120deg, #7B3F00 0%, #7B3F00 32%, #fff 36%, #ffd700 40%, #fff 44%, #7B3F00 48%, #7B3F00 100%);
            background-size: 200% auto;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            animation: shimmer-wave 16s linear infinite;
            flex-shrink: 1;
            margin: 0;
            min-width: 0;
        }

        /* Logo Motto Banner - replaces text */
        .logo-motto-banner-wrapper {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .logo-motto-banner {
            height: 42px;
            max-width: 200px;
            object-fit: contain;
            flex-shrink: 1;
            min-width: 0;
            display: block;
        }

        .logo-motto-banner-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 80%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.6) 50%,
                transparent 100%
            );
            animation: shimmer-banner 14s ease-in-out infinite;
        }

        @keyframes shimmer-banner {
            0% {
                left: -100%;
            }
            50%, 100% {
                left: 150%;
            }
        }

        @media (min-width: 768px) {
            .logo-motto-banner {
                height: 48px;
                max-width: 220px;
            }
        }

        @media (min-width: 1280px) {
            .logo-motto-banner {
                height: 52px;
                max-width: 240px;
            }
        }

        @keyframes shimmer-wave {
            0% {
                background-position: 400% 0;
            }
            100% {
                background-position: 0% 0;
            }
        }

        @media (min-width: 1280px) {
            .logo-text {
                font-size: 1.75rem;
            }
        }

        /* Header Auth Buttons - Desktop Only */
        .header-auth-buttons {
            display: none;
            align-items: center;
            gap: 0.75rem;
            margin-left: auto;
        }

        .header-banner-img {
            height: 3.3rem;
            width: auto;
            object-fit: contain;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .header-banner-img:hover {
            transform: scale(1.02);
        }

        /* Coming Soon Tooltip for Banners */
        .banner-tooltip {
            position: fixed;
            background: #FFD700;
            color: #333;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            white-space: nowrap;
            z-index: 9999;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-5px);
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
            max-width: calc(100vw - 20px);
        }

        .banner-tooltip.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .banner-tooltip::after {
            content: '';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0 8px 8px 8px;
            border-style: solid;
            border-color: transparent transparent #FFD700 transparent;
        }

        .header-auth-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.875rem;
            font-size: 0.8125rem;
            font-weight: 500;
            text-decoration: none;
            border-radius: 999px;
            transition: all 0.2s ease;
            white-space: nowrap;
            background-color: transparent;
            border: 1.5px solid #7B3F00;
            color: #7B3F00;
        }

        .header-auth-btn .material-symbols-outlined {
            font-size: 1rem;
        }

        .header-login-btn:hover {
            background-color: rgba(123, 63, 0, 0.1);
        }

        .header-signup-btn {
            background-color: #7B3F00;
            color: #ffffff;
            border-color: #7B3F00;
        }

        .header-signup-btn:hover {
            background-color: #5a2e00;
            border-color: #5a2e00;
        }

        /* Show auth buttons on desktop */
        @media (min-width: 1280px) {
            .header-auth-buttons {
                display: flex;
            }
        }

        /* Header Auth Buttons Animation - fade out when navbar hides */
        .header-auth-buttons {
            transition: opacity 0.25s ease-out, transform 0.25s ease-out;
        }

        header.hidden .header-auth-buttons {
            opacity: 0;
            transform: translateY(-10px);
        }

        /* Tab Bar Styles */
        .tab-bar {
            display: none;
            position: fixed;
            top: 4rem;
            left: 0;
            right: 0;
            z-index: 2000;
            width: 100%;
            height: 3.5rem;
            border-top: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
            backdrop-filter: blur(4px);
            margin: 0;
            padding: 0;
            transform: translateY(0);
            transition: transform 0.25s ease-out, background-color 0.3s ease-out, border-bottom-color 0.3s ease-out;
            will-change: transform, background-color;
        }

        .tab-bar.navbar-hidden {
            transform: translateY(-4rem);
            background-color: #ffffff;
            border-bottom-color: rgba(0, 0, 0, 0.1);
        }

        @media (min-width: 1280px) {
            .tab-bar {
                display: block;
            }
        }

        .tab-bar .container {
            padding-top: 0;
            padding-bottom: 0;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .tab-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            padding: 0.5rem 1rem;
            height: 3.5rem;
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .tab-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            height: auto;
            padding: 0.25rem 1rem;
            color: #000000;
            text-decoration: none;
            font-size: 0.8125rem;
            font-weight: 500;
            transition: all 0.3s ease-out;
            border: 2px solid #000000;
            border-radius: 9999px;
            background-color: #ffffff;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .tab-link .material-icons-outlined {
            font-size: 1.125rem;
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            color: #48831f;
            transition: color 0.3s ease-out;
        }

        .tab-link:hover {
            color: #00D100;
            background-color: #ffffff;
            border-color: #00D100;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .tab-link:hover .material-icons-outlined {
            color: #00D100;
        }

        .tab-link.active {
            background-color: #00D100;
            color: #ffffff;
            border-color: #00D100;
        }

        .tab-link.active .material-icons-outlined {
            color: #ffffff;
        }

        .tab-link.active:hover {
            background-color: #00B800;
            border-color: #00B800;
            color: #ffffff;
        }

        /* Tab Bar Banner - Hidden by default, appears when navbar hides */
        .tab-banner {
            position: absolute;
            right: 14.5rem;
            top: 50%;
            transform: translateY(-50%) translateX(20px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
            pointer-events: none;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .tab-banner-img {
            height: 2.75rem;
            width: auto;
            object-fit: contain;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .tab-banner-img:hover {
            transform: scale(1.02);
        }

        /* Tab Bar Banner - appear when navbar hides */
        .tab-bar.navbar-hidden .tab-banner {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
            visibility: visible;
            pointer-events: auto;
        }

        .tab-bar.navbar-hidden .tab-banner-img {
            pointer-events: auto;
            position: relative;
            z-index: 100;
        }

        /* Compact banner for 1440px screen width */
        @media (min-width: 1400px) and (max-width: 1500px) {
            .tab-banner-img {
                height: 2.5rem;
                max-width: 140px;
            }

            .tab-banner {
                right: 15rem;
            }
        }

        /* Compact banner on smaller desktops to prevent overlap */
        @media (min-width: 768px) and (max-width: 1400px) {
            .tab-banner-img {
                height: 1.75rem;
                max-width: 80px;
            }

            .tab-banner {
                right: 15rem;
            }
        }

        /* Tab Bar Auth Buttons - Hidden by default, appear when navbar hides */
        .tab-auth-buttons {
            position: absolute;
            right: 2rem;
            top: 50%;
            transform: translateY(-50%) translateX(20px);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
            pointer-events: none;
        }

        .tab-auth-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.875rem;
            font-size: 0.8125rem;
            font-weight: 500;
            border-radius: 999px;
            text-decoration: none;
            transition: all 0.2s ease;
            white-space: nowrap;
            background-color: transparent;
            border: 1.5px solid #7B3F00;
            color: #7B3F00;
        }

        .tab-auth-btn .material-symbols-outlined {
            font-size: 1rem;
        }

        .tab-login-btn:hover {
            background-color: rgba(123, 63, 0, 0.1);
        }

        .tab-signup-btn {
            background-color: #7B3F00;
            color: #ffffff;
            border-color: #7B3F00;
        }

        .tab-signup-btn:hover {
            background-color: #5a2e00;
            border-color: #5a2e00;
        }

        /* Tab Bar Auth Buttons - appear when navbar hides */
        .tab-bar.navbar-hidden .tab-auth-buttons {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
            visibility: visible;
            pointer-events: auto;
        }

        /* Mobile Menu Button */
        .mobile-menu-button {
            display: block;
            padding: 0.5rem;
            border-radius: 0.375rem;
            color: var(--text-light-secondary);
            background: none;
            border: none;
            cursor: pointer;
        }

        @media (min-width: 1024px) {
            .mobile-menu-button {
                display: none;
            }
        }

        .mobile-menu-icon {
            font-size: 1.875rem;
        }

        /* Sidebar Overlay */
        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 3000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .sidebar-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Main Sidebar Container */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: min(320px, 85vw);
            height: 100vh;
            height: 100dvh;
            background: #ffffff;
            z-index: 3001;
            transform: translateX(-100%);
            transition: transform 0.35s ease-out;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        .sidebar.open {
            transform: translateX(0);
        }

        /* Subtle top accent line */
        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #48831f 0%, #65a830 50%, #48831f 100%);
            z-index: 10;
        }

        /* Close Button */
        .sidebar-close-btn {
            position: absolute;
            top: 1.25rem;
            right: 1rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid #e5e7eb;
            color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            z-index: 10;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .sidebar-close-btn:hover {
            background: #fee2e2;
            border-color: #ef4444;
            color: #ef4444;
            transform: scale(1.05);
        }

        .sidebar-close-btn:active {
            transform: scale(0.95);
        }

        .sidebar-close-btn .material-symbols-outlined {
            font-size: 1.125rem;
            font-weight: 600;
        }

        /* Brand Header Section */
        .sidebar-brand {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.875rem;
            padding: 1.5rem 1.25rem 1.25rem;
            border-bottom: 1px solid #000000;
            background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
        }

        .sidebar-brand-logo {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            overflow: hidden;
            flex-shrink: 0;
            background: #ffffff;
            border: 2px solid #48831f;
            box-shadow: 0 2px 8px rgba(72, 131, 31, 0.15);
        }

        .sidebar-brand-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sidebar-brand-text {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .sidebar-brand-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: #000000;
            letter-spacing: -0.01em;
            line-height: 1.2;
            font-family: 'Public Sans', sans-serif;
        }

        .sidebar-brand-tagline {
            font-size: 0.5rem;
            color: #000000;
            font-weight: 600;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }

        /* Navigation Section */
        .sidebar-nav {
            flex: 1;
            padding: 1rem 0.875rem;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .sidebar-nav-label {
            font-size: 0.6875rem;
            font-weight: 600;
            color: #000000;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0 0.625rem;
            margin-bottom: 0.625rem;
        }

        /* Navigation Items */
        .sidebar-nav-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 0.875rem;
            margin-bottom: 0.25rem;
            border-radius: 12px;
            text-decoration: none;
            color: #374151;
            background: transparent;
            border: 1px solid transparent;
            transition: background 0.2s ease, border-color 0.2s ease;
            position: relative;
        }

        /* Nav Item Hover State */
        .sidebar-nav-item:hover {
            background: #f8fafc;
            border-color: #e5e7eb;
            color: #111827;
        }

        /* Nav Item Active State */
        .sidebar-nav-item.active {
            background: linear-gradient(135deg, rgba(72, 131, 31, 0.08) 0%, rgba(72, 131, 31, 0.04) 100%);
            border-color: rgba(72, 131, 31, 0.2);
            color: #1e293b;
        }

        .sidebar-nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 24px;
            background: linear-gradient(180deg, #48831f 0%, #65a830 100%);
            border-radius: 0 3px 3px 0;
        }

        /* Nav Icon */
        .sidebar-nav-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            flex-shrink: 0;
        }

        .sidebar-nav-item:hover .sidebar-nav-icon {
            background: #e5e7eb;
            border-color: #d1d5db;
        }

        .sidebar-nav-item.active .sidebar-nav-icon {
            background: #48831f;
            border-color: #48831f;
            box-shadow: 0 2px 8px rgba(72, 131, 31, 0.3);
        }

        .sidebar-nav-icon .material-symbols-outlined {
            font-size: 1.25rem;
            color: #000000;
        }

        .sidebar-nav-item:hover .sidebar-nav-icon .material-symbols-outlined {
            color: #000000;
        }

        .sidebar-nav-item.active .sidebar-nav-icon .material-symbols-outlined {
            color: #ffffff;
        }

        .sidebar-nav-item.active .sidebar-nav-icon svg {
            fill: #ffffff;
        }

        /* Nav Content */
        .sidebar-nav-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.0625rem;
        }

        .sidebar-nav-title {
            font-size: 0.9375rem;
            font-weight: 700;
            color: #000000;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-nav-item:hover .sidebar-nav-title,
        .sidebar-nav-item.active .sidebar-nav-title {
            color: #000000;
        }

        .sidebar-nav-subtitle {
            font-size: 0.625rem;
            color: #000000;
            font-weight: 400;
            white-space: nowrap;
        }

        .sidebar-nav-item:hover .sidebar-nav-subtitle {
            color: #000000;
        }

        .sidebar-nav-item.active .sidebar-nav-subtitle {
            color: #48831f;
        }

        /* Nav Badge */
        .sidebar-nav-badge {
            padding: 0.25rem 0.5rem;
            font-size: 0.5625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-radius: 5px;
            flex-shrink: 0;
            margin-left: auto;
        }

        .sidebar-nav-badge.new {
            background: #FFBF00;
            color: #000000;
            box-shadow: 0 2px 6px rgba(255, 191, 0, 0.35);
        }

        /* Nav Arrow */
        .sidebar-nav-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-left: auto;
            padding-left: 1rem;
        }

        .sidebar-nav-arrow .material-symbols-outlined {
            font-size: 1.125rem;
            color: #9ca3af;
        }

        .sidebar-nav-item:hover .sidebar-nav-arrow .material-symbols-outlined {
            color: #6b7280;
        }

        .sidebar-nav-item.active .sidebar-nav-arrow .material-symbols-outlined {
            color: #48831f;
        }

        /* Sidebar Banner */
        .sidebar-banner {
            padding: 0.75rem 1rem;
            margin-top: 0.5rem;
            cursor: pointer;
            position: relative;
        }

        .sidebar-banner-img {
            width: 100%;
            max-height: 50px;
            border-radius: 6px;
            object-fit: contain;
        }

        .sidebar-banner-tooltip {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #fbbf24;
            color: #000;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
            z-index: 9999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: tooltipFadeIn 0.2s ease;
        }

        .sidebar-banner-tooltip::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: #fbbf24;
        }

        /* Footer Section */
        .sidebar-footer {
            padding: 0.875rem 1rem 1.25rem;
            margin-top: auto;
            background: #f9fafb;
            border-top: 1px solid #e5e7eb;
        }

        .sidebar-footer-divider {
            display: none;
        }

        .sidebar-footer-link {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.625rem 0.75rem;
            margin-bottom: 0.125rem;
            border-radius: 8px;
            text-decoration: none;
            color: #000000;
            font-size: 0.8125rem;
            font-weight: 500;
        }

        .sidebar-footer-link:hover {
            color: #000000;
            background: #f3f4f6;
        }

        .sidebar-footer-link .material-symbols-outlined {
            font-size: 1.125rem;
            color: #6b7280;
        }

        .sidebar-footer-link:hover .material-symbols-outlined {
            color: #4b5563;
        }

        .sidebar-footer-version {
            text-align: center;
            font-size: 0.6875rem;
            color: #9ca3af;
            margin-top: 0.75rem;
            letter-spacing: 0.02em;
            font-weight: 500;
        }

        /* Hide Sidebar on Desktop (1280px+) */
        @media (min-width: 1280px) {
            .sidebar,
            .sidebar-overlay,
            .mobile-menu-button {
                display: none !important;
            }
        }

        .material-icons-outlined {
            font-family: 'Material Icons Outlined';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            font-feature-settings: 'liga';
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }

        /* Mobile Layout Container */
        .mobile-container {
            max-width: 28rem;
            margin: 0 auto;
            padding: 0;
            padding-top: 4rem;
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        /* Mobile Hero Section with Grid */
        .hero-section-mobile {
            position: relative;
            min-height: 60vh;
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/images/home.jpg');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 0.5rem 0;
            margin-top: 0;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

        .hero-section-mobile::before {
            display: none;
        }

        .hero-content-mobile {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0 0.75rem;
            padding-top: 0.5rem;
            box-sizing: border-box;
            margin: 0;
        }

        .hero-title-mobile {
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: 700;
            text-align: center;
            margin: 0;
            margin-top: 1.5rem;
        }

        .hero-subtitle-mobile {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.75rem;
            text-align: center;
            margin: 0.5rem 0 0.75rem 0;
            line-height: 1.4;
        }

        .card-mobile {
            background-color: var(--white);
            padding: 1rem;
            border-radius: 0.75rem;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12);
            border: none !important;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            margin-top: 0.75rem;
        }

        .grid-container-mobile {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            max-width: 100%;
        }

        .grid-item-mobile {
            padding: 0.75rem;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            position: relative;
        }

        .grid-item-mobile.col-span-1 {
            grid-column: span 1;
        }

        .grid-item-mobile.col-span-2 {
            grid-column: span 2;
        }

        .grid-item-mobile.rounded-tl {
            border-top-left-radius: 0.75rem;
        }

        .grid-item-mobile.rounded-tr {
            border-top-right-radius: 0.75rem;
        }

        .grid-item-mobile.rounded-b {
            border-bottom-left-radius: 0.75rem;
            border-bottom-right-radius: 0.75rem;
        }

        .grid-item-mobile::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #000000;
        }

        .grid-item-mobile:not(.col-span-2)::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            background-color: #000000;
        }

        .grid-item-mobile:nth-child(2)::before,
        .grid-item-mobile:nth-child(5)::before {
            display: none;
        }

        .grid-item-mobile:last-child::after {
            display: none;
        }

        #activities-grid-item::after {
            display: block !important;
        }

        #activities-grid-item::before {
            display: none !important;
        }

        .icon-mobile {
            font-size: 24px;
            color: var(--primary-color);
            flex-shrink: 0;
        }

        .label-mobile {
            font-size: 0.625rem;
            font-weight: 500;
            color: var(--text-light-secondary);
            margin: 0;
            white-space: nowrap;
        }

        .value-mobile {
            font-size: 0.875rem;
            font-weight: 600;
            white-space: nowrap;
            color: var(--text-light-primary);
            margin: 0;
            margin-top: 0.25rem;
        }

        .submit-button-mobile {
            width: 100%;
            background-color: var(--primary-color);
            color: white;
            font-weight: bold;
            padding: 1rem;
            border: none;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(72, 131, 31, 0.3), 0 2px 4px -1px rgba(72, 131, 31, 0.2);
            cursor: pointer;
            transition: opacity 0.2s;
            margin-top: 1.5rem;
            font-size: 1rem;
        }

        .submit-button-mobile:hover {
            opacity: 0.9;
        }

        /* Desktop Layout Container */
        .desktop-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Visibility Classes */
        .mobile-only {
            display: block;
        }

        .desktop-only {
            display: none;
        }

        @media (min-width: 768px) {
            .mobile-only {
                display: none !important;
            }

            .desktop-only {
                display: block;
            }

            .desktop-container {
                padding: 0 4rem;
            }
        }

        @media (min-width: 1024px) {
            .header {
                padding: 1rem 4rem;
            }
        }

        /* Mobile Form Styles */
        h2 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        section {
            margin-bottom: 2rem;
        }

        label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--gray-600);
            margin-bottom: 0.25rem;
        }

        .input-container {
            position: relative;
        }

        /* Mobile input styles - only apply to mobile layout */
        .mobile-container input:not(.form-input) {
            width: 100%;
            padding: 0.875rem 1rem;
            padding-right: 3rem;
            background-color: var(--gray-100);
            border: 1px solid #000000;
            border-radius: var(--border-radius);
            color: var(--gray-900);
            font-family: inherit;
            font-size: 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
            min-height: 3rem;
            box-sizing: border-box;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .mobile-container input:not(.form-input):focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 1px var(--primary);
        }

        .mobile-container input:not(.form-input)::placeholder {
            color: var(--gray-400);
            font-size: 1.0625rem;
        }

        .input-icon {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
        }

        .destination-icon {
            width: 1.5rem;
            height: 1.5rem;
        }

        .counter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
            padding: 0.5rem;
            border-radius: 0.5rem;
        }

        .counter:hover {
            background-color: var(--gray-50);
        }

        .counter-info p:first-child {
            font-size: 1rem;
            color: var(--gray-900);
        }

        .counter-info p:last-child {
            font-size: 0.875rem;
            color: var(--gray-500);
        }

        .counter-controls {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .counter-button {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
            border: 2px solid var(--gray-300);
            background-color: var(--white);
            color: var(--gray-700);
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .counter-button:hover:not(:disabled) {
            border-color: var(--primary);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .counter-button:disabled {
            background-color: var(--gray-200);
            color: var(--gray-400);
            cursor: not-allowed;
            box-shadow: none;
            border-color: var(--gray-300);
        }

        .counter-button.active {
            background-color: var(--primary);
            color: var(--white);
            border-color: var(--primary);
            box-shadow: 0 4px 8px rgba(72, 131, 31, 0.3);
        }

        /* Minus button (first button) should have black icon when active */
        .counter-controls .counter-button:first-child.active {
            background-color: var(--white);
            color: var(--black);
            border-color: var(--gray-300);
        }

        .counter-controls .counter-button:first-child.active svg {
            fill: var(--black);
        }

        .counter-value {
            font-size: 1.125rem;
            font-weight: 600;
            width: 1.5rem;
            text-align: center;
            color: var(--gray-900);
        }

        .interest-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .interest-tag {
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            border: 1px solid var(--gray-300);
            background-color: transparent;
            color: var(--gray-800);
            font-family: inherit;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s;
        }

        .interest-tag.active {
            background-color: var(--primary);
            border-color: var(--primary);
            color: var(--white);
        }

        .budget-option {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: var(--border-radius);
            background-color: var(--gray-100);
            border: 1px solid transparent;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: border-color 0.2s;
        }

        .budget-option.active {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary);
        }

        .budget-icon {
            font-size: 1.875rem;
            margin-right: 1rem;
        }

        .budget-info {
            flex-grow: 1;
            text-align: left;
        }

        .budget-info p:first-child {
            font-weight: 600;
            color: var(--gray-900);
        }

        .budget-info p:last-child {
            font-size: 0.875rem;
            color: var(--gray-500);
        }

        .budget-option.active .budget-info p:first-child {
            color: var(--primary);
        }

        .budget-radio {
            margin-left: auto;
            color: var(--gray-300);
        }

        .budget-option.active .budget-radio {
            color: var(--primary);
        }

        .activities-button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1rem;
            border-radius: var(--border-radius);
            border: 2px dashed rgba(72, 131, 31, 0.5);
            background-color: transparent;
            color: var(--primary);
            font-family: inherit;
            cursor: pointer;
        }

        .generate-button {
            width: 100%;
            background-color: var(--primary);
            color: var(--white);
            font-weight: 700;
            padding: 1rem;
            border-radius: 9999px;
            border: none;
            font-size: 1.125rem;
            margin-top: 1rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .generate-button:hover {
            opacity: 0.9;
        }

        .material-symbols-outlined {
            font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
        }

        .material-symbols-outlined.filled {
            font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
        }

        /* Link Buttons Styles - Mobile Only */
        .category-filters {
            margin-bottom: 1rem;
        }

        .filter-container {
            width: 100%;
            position: relative;
            display: block;
        }

        @media (min-width: 768px) {
            .filter-container {
                display: none;
            }
        }

        .link-buttons {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-bottom: 0.5rem;
            scroll-behavior: smooth;
        }

        .link-buttons::-webkit-scrollbar {
            display: none;
        }

        .link-button {
            padding: 0.625rem 1.25rem;
            border-radius: 9999px;
            font-weight: 500;
            font-size: 1rem;
            border: 2px solid #FFD700;
            background-color: var(--white);
            color: #000000;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
        }

        .link-button:hover {
            border-color: var(--primary);
        }

        .link-button.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* Make link buttons more compact on mobile */
        @media (max-width: 767px) {
            .link-button {
                padding: 0.5625rem 0.9375rem;
                font-size: 0.875rem;
                line-height: 1.5;
                gap: 0.375rem;
            }

            .link-button .material-icons-outlined {
                font-size: 1.125rem;
                color: #48831f;
            }

            .link-button.active .material-icons-outlined {
                color: white;
            }

            .link-buttons {
                gap: 0.5rem;
            }
        }

        .blue-icon {
            color: #60a5fa;
        }

        .yellow-icon {
            color: #f59e0b;
        }

        .green-icon {
            color: #10b981;
        }

        /* Desktop Hero Section - Full Width */
        .hero {
            position: relative;
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/images/home.jpg');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            overflow: hidden; /* Keep hidden on mobile to prevent horizontal scroll */
        }

        @media (min-width: 768px) {
            .hero {
                width: 100vw;
                margin-left: calc(-50vw + 50%);
                margin-right: calc(-50vw + 50%);
                overflow: visible; /* Allow modal to extend beyond hero on desktop/tablet */
                margin-top: 4rem;
                background-size: 100% 100%;
                background-position: center;
            }
        }

        @media (min-width: 1024px) {
            .hero {
                margin-top: 4rem;
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                min-height: 700px;
                padding: 2rem 0;
            }
        }

        .hero-bg {
            display: none;
        }

        .hero-bg img {
            display: none;
        }

        .hero-bg-overlay {
            display: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        @media (min-width: 640px) {
            .container {
                padding: 0 1.5rem;
            }
        }

        @media (min-width: 1024px) {
            .hero .container {
                max-width: 100%;
                padding: 0 4rem;
            }
        }

        .hero-content {
            position: relative;
            padding: 4rem 1.5rem 2.5rem;
            padding-top: 5rem;
            text-align: center;
        }

        @media (min-width: 640px) {
            .hero-content {
                padding: 5rem 1.5rem 3rem;
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .hero-content {
                padding: 1rem 1.5rem 1rem;
                padding-top: 5rem;
            }
        }

        @media (min-width: 1024px) {
            .hero-content {
                padding: 1.5rem 1.5rem 5rem;
                padding-top: 4rem;
                min-height: auto;
                box-sizing: border-box;
            }
        }

        /* Hero Header - Desktop Only */
        .hero-header-desktop {
            display: none;
        }

        @media (min-width: 1024px) {
            .hero-header-desktop {
                display: block;
                text-align: center;
                margin-top: 2rem;
                margin-bottom: 1rem;
            }

            .hero-header-title {
                font-size: 2rem;
                font-weight: 700;
                color: #ffffff;
                margin: 0 0 0.5rem 0;
            }

            .hero-header-subtitle {
                font-size: 1rem;
                color: rgba(255, 255, 255, 0.85);
                margin: 0;
            }
        }

        /* Hero Navigation Links - Desktop Only */
        .hero-nav-links {
            display: none;
        }

        @media (min-width: 1024px) {
            .hero-nav-links {
                display: flex;
                justify-content: center;
                gap: 2.5rem;
                margin-bottom: 0.75rem;
            }

            .hero-nav-link {
                display: flex;
                align-items: center;
                gap: 0.35rem;
                font-size: 0.95rem;
                font-weight: 400;
                color: #000000;
                text-decoration: none;
                padding: 0.5rem 0;
                position: relative;
                transition: color 0.2s ease;
            }

            .hero-nav-link .material-icons {
                font-size: 1.1rem;
            }

            .hero-nav-link:hover {
                color: #48831f;
            }

            .hero-nav-link::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background-color: #48831f;
                transition: width 0.2s ease;
            }

            .hero-nav-link:hover::after {
                width: 100%;
            }

            .hero-nav-link.active {
                background-color: #48831f;
                color: #ffffff;
                padding: 0.4rem 0.9rem;
                border-radius: 50px;
                border: none;
            }

            .hero-nav-link.active:hover {
                color: #ffffff;
            }

            .hero-nav-link.active::after {
                display: none;
            }

            .hero-nav-link:not(.active) {
                background-color: #ffffff;
                color: #000000;
                padding: 0.4rem 0.9rem;
                border-radius: 50px;
                border: 2px solid #ffd700;
            }

            .hero-nav-link:not(.active) .material-icons {
                color: #48831f;
            }

            .hero-nav-link:not(.active):hover {
                color: #000000;
                opacity: 0.85;
            }

            .hero-nav-link:not(.active)::after {
                display: none;
            }
        }

        .hero-title {
            font-size: 2.25rem;
            font-weight: 800;
            color: #1f2937;
            letter-spacing: -0.025em;
            line-height: 1.1;
        }

        @media (min-width: 1024px) {
            .hero-title {
                margin-top: -2rem;
            }

            .hero-subtitle {
                margin-bottom: 2rem;
            }
        }

        .hero-subtitle {
            margin-top: 1rem;
            max-width: 42rem;
            margin-left: auto;
            margin-right: auto;
            font-size: 1.125rem;
            color: #4b5563;
            line-height: 1.5;
        }

        .hero-subtitle-small {
            font-size: 0.875rem;
            display: inline;
            color: #6b7280;
        }

        .search-form {
            margin-top: 2rem;
            background-color: white;
            padding: 0.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
            border: none !important;
            text-align: left;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            overflow: visible; /* Allow modals to extend beyond form */
        }

        @media (min-width: 768px) {
            .search-form {
                border: none !important;
            }
        }

        @media (min-width: 1024px) {
            .search-form {
                max-width: 92%;
                width: 92%;
                margin: 0.5rem auto 0;
                border: none !important;
            }
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        .form-fields {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            overflow: visible; /* Allow modals to extend beyond form fields */
        }

        .form-field {
            position: relative;
            padding: 0.5rem 1rem 0.75rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: visible;
        }

        /* Vertical divider lines between form fields - Desktop only - exact match to car-rental */
        @media (min-width: 1024px) {
            .form-field:not(:last-child)::after {
                content: '' !important;
                position: absolute !important;
                right: 0 !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: 3px !important;
                height: 44px !important;
                background: linear-gradient(180deg,
                    transparent 0%,
                    rgba(72, 131, 31, 0.4) 15%,
                    rgba(72, 131, 31, 0.7) 50%,
                    rgba(72, 131, 31, 0.4) 85%,
                    transparent 100%
                ) !important;
                border-radius: 1px !important;
                z-index: 100 !important;
                display: block !important;
            }
        }

        .form-field-date-container {
            position: relative;
        }

        .form-field-tablet-only {
            display: none;
        }

        .form-field-desktop-only {
            display: flex;
        }

        .form-label {
            font-size: 0.625rem;
            font-weight: 600;
            color: #6b7280;
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .form-label svg {
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
            vertical-align: middle;
        }

        .form-input, .form-select {
            width: 100%;
            border: 0;
            background: transparent;
            padding: 0;
            font-size: 0.875rem;
            color: #1f2937;
            outline: none;
            font-weight: 600;
        }
        
        /* Ensure desktop form inputs have no styling - exactly like desktop layout */
        .desktop-container .form-input,
        .desktop-container .form-select {
            border: 0 !important;
            background: transparent !important;
            padding: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            min-height: auto !important;
            box-sizing: border-box !important;
            outline: none !important;
        }

        .desktop-container .form-input:focus,
        .desktop-container .form-input:active,
        .desktop-container .form-select:focus,
        .desktop-container .form-select:active {
            outline: none !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        #activities-desktop {
            background-image: none !important;
            cursor: pointer !important;
        }

        #activities-field-container .select-icon,
        #activities-field-container::after {
            display: none !important;
        }

        .form-input::placeholder, .form-select option {
            color: #1f2937;
            font-weight: 600;
        }

        /* Hide placeholders on desktop/tablet - only show vertical separators */
        @media (min-width: 768px) {
            .form-input::placeholder {
                color: transparent;
                opacity: 0;
            }
            
            /* Show placeholder for destination, origin, and date fields on desktop/tablet */
            #destination-desktop::placeholder,
            #origin-desktop::placeholder,
            #date-range::placeholder,
            #arrival-date::placeholder,
            #return-date::placeholder {
                color: #1f2937;
                opacity: 1;
                font-weight: 600;
            }
            
            .form-field-date-container {
                cursor: pointer;
            }
            
            #guests-desktop {
                cursor: pointer;
            }
            
            .form-field-date-container .form-input {
                cursor: pointer;
            }
            
            #date-range,
            #arrival-date,
            #return-date {
                cursor: pointer;
            }

            #date-range {
                font-size: 0.75rem !important;
                letter-spacing: -0.01em;
                white-space: nowrap;
            }

            #date-range::placeholder {
                font-size: 0.875rem !important;
                letter-spacing: normal;
            }
        }

        .form-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding-right: 1.5rem;
        }

        .select-icon {
            position: absolute;
            right: 0.5rem;
            bottom: 0.875rem;
            color: #9ca3af;
            pointer-events: none;
        }

        /* Budget Modal Styles (Desktop/Tablet Only) */
        @media (min-width: 768px) {
            .budget-modal-overlay {
                display: none; /* Not needed - we'll handle clicks via document listener */
            }

            .budget-modal {
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                margin-top: 0.75rem;
                z-index: 2001;
                width: auto;
                min-width: 16rem;
                max-width: 16rem;
                background-color: var(--white);
                border-radius: 0.75rem;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
                border: 1px solid var(--border-light);
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                overflow: visible;
            }

            .budget-modal.show {
                opacity: 1 !important;
                visibility: visible !important;
            }

            .budget-modal::before {
                content: '';
                position: absolute;
                top: -8px;
                left: var(--pointer-left, 50%);
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid white;
                z-index: 2002;
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
            }

            .budget-modal-content {
                padding: 0.75rem;
            }

            .budget-modal-header {
                padding-bottom: 0.5rem;
                border-bottom: 1px solid var(--border-light);
                margin-bottom: 0.625rem;
            }

            .budget-modal-title {
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--gray-900);
            }

            .budget-options-list {
                display: flex;
                flex-direction: column;
                gap: 0.375rem;
            }

            .budget-option-item {
                display: flex;
                align-items: flex-start;
                padding: 0.5rem 0.625rem;
                border: 1px solid var(--border-light);
                border-radius: 0.375rem;
                cursor: pointer;
                transition: all 0.2s;
            }

            .budget-option-item:hover {
                border-color: var(--primary);
                background-color: rgba(72, 131, 31, 0.05);
            }

            .budget-option-item.selected {
                border-color: var(--primary);
                border-width: 2px;
                background-color: rgba(72, 131, 31, 0.1);
            }

            .budget-radio-container {
                position: relative;
                width: 1rem;
                height: 1rem;
                flex-shrink: 0;
                margin-top: 0.125rem;
            }

            .budget-custom-radio {
                appearance: none;
                width: 100%;
                height: 100%;
                border: 2px solid #d1d5db;
                border-radius: 50%;
                position: relative;
                cursor: pointer;
                transition: all 0.2s;
            }

            .budget-custom-radio:checked {
                border-color: var(--primary);
            }

            .budget-custom-radio:checked::after {
                content: '';
                display: block;
                width: 0.375rem;
                height: 0.375rem;
                border-radius: 50%;
                background-color: var(--primary);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .budget-option-content {
                margin-left: 0.5rem;
            }

            .budget-option-title {
                font-weight: 500;
                font-size: 0.75rem;
                margin-bottom: 0;
                color: var(--gray-900);
                line-height: 1.3;
            }

            .budget-option-description {
                font-size: 0.625rem;
                color: var(--gray-500);
                line-height: 1.3;
            }

            .budget-option-item.selected .budget-option-title {
                color: var(--primary);
            }

            /* Budget input styling for desktop */
            .budget-input-field {
                width: 100%;
                border: 0;
                background: transparent;
                padding: 0;
                font-size: 0.875rem;
                color: #1f2937;
                outline: none;
                cursor: pointer;
            }

            .budget-input-field::placeholder {
                color: #1f2937;
                font-weight: 600;
            }

            /* Position budget modal relative to form field container */
            #budget-field-container {
                position: relative;
                overflow: visible;
            }
        }

        /* Hide budget modal on mobile */
        @media (max-width: 767px) {
            .budget-modal-overlay,
            .budget-modal {
                display: none !important;
            }
        }

        .form-submit {
            padding: 0.25rem;
            align-self: center;
        }

        .submit-btn {
            width: 100%;
            min-width: 84px;
            height: 3.5rem;
            padding: 0 1.5rem;
            font-size: 1rem;
            white-space: nowrap;
        }

        .btn {
            display: flex;
            min-width: 84px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 0.5rem;
            height: 2.5rem;
            padding: 0 1.25rem;
            font-size: 0.875rem;
            font-weight: bold;
            letter-spacing: 0.025em;
            transition: background-color 0.2s;
            border: none;
        }

        .btn-primary {
            background-color: #48831f;
            color: white;
            box-shadow: 0 4px 6px -1px rgba(72, 131, 31, 0.3), 0 2px 4px -1px rgba(72, 131, 31, 0.2);
        }

        .btn-primary:hover {
            background-color: #3a6f1a;
            box-shadow: 0 6px 12px -1px rgba(72, 131, 31, 0.4), 0 4px 6px -1px rgba(72, 131, 31, 0.3);
        }

        /* Calendar Modal Styles - Combined from both files */
        .calendar-backdrop {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .calendar-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        .calendar-modal-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1001;
            width: 100%;
            max-width: 42rem;
            padding: 0.75rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        }

        .calendar-modal-container.active {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        @media (min-width: 768px) {
            .calendar-backdrop {
                display: none !important;
            }
            
            .calendar-modal-container {
                position: absolute;
                top: auto;
                left: 50%;
                transform: translateX(-50%);
                margin-top: 1rem;
                z-index: 9;
                width: auto;
                min-width: 42rem;
                max-width: 42rem;
                padding: 0;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
            }
            
            .calendar-modal-container.active {
                opacity: 1;
                visibility: visible;
            }
            
            .calendar-modal-container::before {
                content: '';
                position: absolute;
                top: -8px;
                left: var(--pointer-left, 50%);
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid white;
                z-index: 1002;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
            }
            
            .calendar-layout-container {
                box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 8px 16px -4px rgba(0, 0, 0, 0.15);
            }
        }

        .calendar-layout-container {
            display: flex;
            width: 100%;
            flex-direction: column;
            border-radius: 0.75rem;
            background-color: white;
            box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35), 0 10px 20px -5px rgba(0, 0, 0, 0.2);
            max-height: 85vh;
            overflow-y: auto;
        }

        .calendar-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .calendar-modal-title {
            font-size: 1rem;
            font-weight: bold;
            color: #1f2937;
        }

        .calendar-close-btn {
            padding: 0.25rem;
            color: #6b7280;
            border-radius: 9999px;
            background: none;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        .calendar-close-btn:hover {
            color: #374151;
            background-color: #f3f4f6;
        }

        .calendar-modal-content {
            padding: 0.75rem;
        }

        @media (min-width: 640px) {
            .calendar-modal-content {
                padding: 1rem;
            }
        }

        .date-picker-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 1rem;
        }

        @media (min-width: 768px) {
            .date-picker-container {
                flex-direction: row;
            }
        }

        .date-summary {
            width: 100%;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            position: relative;
        }

        @media (min-width: 768px) {
            .date-summary {
                width: 170px;
            }
        }

        .date-field {
            margin-bottom: 0.125rem;
            position: relative;
        }

        .date-label {
            font-size: 0.6875rem;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 0.125rem;
        }

        .date-display {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            border-radius: 0.375rem;
            border: 1px solid #e5e7eb;
            padding: 0.375rem 0.5rem;
            background-color: #f9fafb;
        }

        .date-icon {
            color: #48831f;
            font-size: 1rem;
        }

        .date-value {
            font-size: 0.875rem;
            font-weight: 600;
            color: #1f2937;
        }

        .duration-info {
            display: none;
            flex-direction: column;
            gap: 0.375rem;
            padding-top: 0.5rem;
            border-top: 1px solid #e5e7eb;
        }

        @media (min-width: 768px) {
            .duration-info {
                display: flex;
            }
        }

        .duration-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: #374151;
        }

        .duration-value {
            font-size: 1.25rem;
            font-weight: bold;
            color: #48831f;
        }

        .duration-days {
            font-size: 0.9375rem;
            font-weight: 600;
        }

        .duration-range {
            font-size: 0.6875rem;
            color: #6b7280;
        }

        .calendar-container {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        @media (min-width: 768px) {
            .calendar-container {
                flex-direction: row;
            }
        }

        .calendar {
            width: 100%;
            max-width: 250px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        /* Desktop Calendar Header */
        .calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.125rem;
            margin-bottom: 0.125rem;
        }

        .calendar-nav-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.75rem;
            width: 1.75rem;
            color: #4b5563;
            border-radius: 9999px;
            background: none;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .calendar-nav-btn:hover {
            background-color: #f3f4f6;
        }

        /* Mobile Calendar Header - matches trip planner */
        .date-modal .calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding: 0;
        }

        .date-modal .nav-button {
            padding: 0.5rem;
            border-radius: 50%;
            border: none;
            background-color: transparent;
            color: var(--gray-600);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .date-modal .nav-button:hover {
            background-color: var(--gray-100);
        }

        .date-modal .calendar-month {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .calendar-title {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            color: #1f2937;
            font-size: 0.8125rem;
            font-weight: bold;
            line-height: 1.25;
        }

        .calendar-year {
            color: #6b7280;
            font-weight: 500;
            font-size: 0.75rem;
        }

        /* Desktop Calendar Grid */
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .weekday-header {
            font-size: 0.6875rem;
            font-weight: bold;
            text-transform: uppercase;
            color: #48831f;
            display: flex;
            height: 1.75rem;
            width: 100%;
            align-items: center;
            justify-content: center;
        }

        .calendar-day {
            height: 1.75rem;
            width: 100%;
            font-size: 0.6875rem;
            font-weight: 500;
            line-height: 1.5;
            border: none;
            background: none;
            cursor: pointer;
            transition: background-color 0.2s;
            color: #1f2937;
        }

        .calendar-day:not(.disabled):not(.in-range):not(.range-start):not(.range-end):hover {
            background-color: #f3f4f6;
            border-radius: 0.5rem;
        }

        .calendar-day.disabled {
            color: #9ca3af;
            cursor: not-allowed;
        }

        .calendar-day.in-range {
            background-color: rgba(72, 131, 31, 0.2);
            color: #1f2937;
        }

        .calendar-day.range-start, .calendar-day.range-end {
            color: white;
        }

        .calendar-day.range-start > div, .calendar-day.range-end > div {
            display: flex;
            height: 100%;
            width: 100%;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            background-color: #48831f;
            font-weight: 600;
        }

        .calendar-day.range-start {
            border-top-left-radius: 9999px;
            border-bottom-left-radius: 9999px;
        }

        .calendar-day.range-end {
            border-top-right-radius: 9999px;
            border-bottom-right-radius: 9999px;
        }

        /* Compact calendar height on desktop only */
        @media (min-width: 1024px) {
            .calendar-modal-content {
                padding: 0.5rem !important;
            }

            .calendar {
                gap: 0.0625rem;
            }

            .calendar-header {
                padding: 0.0625rem;
                margin-bottom: 0.0625rem;
            }

            .calendar-nav-btn {
                height: 1.25rem;
                width: 1.25rem;
            }

            .weekday-header {
                height: 1.25rem;
                font-size: 0.625rem;
            }

            .calendar-day {
                height: 1.25rem;
                font-size: 0.625rem;
            }

            .calendar-title {
                font-size: 0.75rem;
            }

            .calendar-year {
                font-size: 0.6875rem;
            }

            .calendar-layout-container {
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.2) !important;
            }

            .calendar-modal-container::before {
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) !important;
            }
        }

        /* Mobile Calendar Grid - matches trip planner */
        .date-modal .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.25rem 0;
            text-align: center;
        }

        .date-modal .calendar-day {
            padding: 0.5rem 0;
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 2.25rem;
        }

        .date-modal .calendar-day span {
            width: 2.25rem;
            height: 2.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 auto;
            color: var(--gray-900);
            position: relative;
            z-index: 1;
        }

        .date-modal .calendar-day.selected span {
            background-color: var(--primary);
            color: var(--white);
            z-index: 2;
        }

        .date-modal .calendar-day.in-range {
            background-color: rgba(72, 131, 31, 0.1);
        }

        /* Ensure selected dates don't show in-range background - only show the circular green */
        .date-modal .calendar-day.selected.in-range {
            background-color: transparent;
        }

        /* Make in-range background fill the full cell - ensure it covers the entire cell including numbers */
        .date-modal .calendar-day.in-range:not(.selected) {
            background-color: rgba(72, 131, 31, 0.1);
            margin: 0;
            padding: 0.375rem 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .date-modal .calendar-day.in-range:not(.selected):first-child {
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .date-modal .calendar-day.in-range:not(.selected):last-child {
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .date-modal .calendar-day.empty {
            color: var(--gray-400);
            cursor: default;
        }

        /* Days Selection Modal Styles - Mobile Only */
        .days-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-light);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .days-modal-overlay.active {
            display: flex;
        }

        .days-modal {
            background-color: var(--background-light);
            width: 100%;
            max-width: 28rem;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .days-modal-header {
            flex-shrink: 0;
            padding: 1rem;
        }

        .days-modal-back-button {
            padding: 0.5rem;
            border-radius: 50%;
            background-color: var(--gray-100);
            color: var(--gray-800);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .days-modal-main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 1.5rem;
            text-align: center;
        }

        .days-modal-title {
            font-size: 1.875rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--gray-900);
        }

        .days-modal-subtitle {
            color: var(--gray-600);
            margin-bottom: 3rem;
        }

        .days-counter-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
        }

        .days-counter-button {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            font-size: 2.25rem;
            font-weight: 300;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .days-counter-button svg {
            width: 2rem;
            height: 2rem;
        }

        .days-decrement-button {
            background-color: var(--gray-200);
            color: var(--gray-700);
        }

        .days-decrement-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .days-decrement-button:active:not(:disabled) {
            background-color: var(--gray-300);
        }

        .days-increment-button {
            background-color: var(--primary);
            color: var(--white);
        }

        .days-increment-button:active {
            opacity: 0.9;
        }

        .days-counter-value {
            font-size: 6rem;
            font-weight: 700;
            width: 8rem;
            text-align: center;
            color: var(--gray-900);
        }

        .days-modal-footer {
            flex-shrink: 0;
            padding: 1.5rem;
        }

        .days-confirm-button {
            width: 100%;
            background-color: var(--primary);
            color: var(--white);
            font-weight: 700;
            padding: 1rem;
            border-radius: 9999px;
            border: none;
            font-size: 1.125rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .days-confirm-button:hover {
            opacity: 0.9;
        }

        /* Hide days modal on tablet and desktop */
        @media (min-width: 768px) {
            .days-modal-overlay {
                display: none !important;
            }
        }

        /* Guests Selector Modal Styles - Desktop/Tablet Only */
        .guests-modal-overlay {
            position: fixed;
            inset: 0;
            background-color: transparent;
            z-index: 3000;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .guests-modal-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Hide dark backdrop on desktop/tablet - modal should appear as dropdown without darkening page */
        @media (min-width: 768px) {
            .guests-modal-overlay.active::before {
                display: none;
            }

            /* CRITICAL: On desktop, overlay must not block clicks to the modal */
            .guests-modal-overlay.active {
                pointer-events: none;
            }
        }

        .guests-modal {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 1rem;
            z-index: 3001;
            pointer-events: auto;
            width: auto;
            min-width: 28rem;
            max-width: 28rem;
            display: flex;
            flex-direction: column;
            border-radius: 0.75rem;
            background-color: var(--white);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: auto;
            overflow: visible; /* Ensure modal content is not clipped */
        }

        .guests-modal-overlay.active .guests-modal,
        .guests-modal.show {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .guests-modal::before {
            content: '';
            position: absolute;
            top: -8px;
            left: var(--pointer-left, 50%);
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid white;
            z-index: 2002;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
        }

        .guests-modal-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--gray-200);
            padding: 1rem;
        }

        .guests-modal-title {
            color: var(--gray-900);
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .guests-close-btn {
            display: flex;
            height: 2rem;
            width: 2rem;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            color: var(--gray-500);
            cursor: pointer;
            transition: all 0.2s;
            background: none;
            border: none;
        }

        .guests-close-btn:hover {
            background-color: var(--gray-200);
        }

        .guests-close-icon {
            font-size: 1.25rem;
        }

        .guests-modal-content {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 1rem;
        }

        .guests-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 0.5rem;
        }

        .guests-icon-container {
            display: flex;
            height: 2.5rem;
            width: 2.5rem;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            background-color: rgba(72, 131, 31, 0.2);
            color: var(--primary);
        }

        .guests-details {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
        }

        .guests-type {
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.5;
            color: var(--gray-900);
        }

        .guests-age {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--gray-500);
        }

        .guests-counter {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            gap: 0.75rem;
            color: var(--gray-900);
        }

        .guests-counter-btn {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
            border: 2px solid var(--gray-300);
            background-color: var(--white);
            color: var(--gray-700);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 0;
        }
        
        .guests-counter-btn svg {
            width: 16px;
            height: 16px;
            display: block;
        }

        .guests-counter-btn:hover:not(:disabled) {
            border-color: var(--primary);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .guests-counter-btn:disabled {
            background-color: var(--gray-200);
            color: var(--gray-400);
            cursor: not-allowed;
            box-shadow: none;
            border-color: var(--gray-300);
        }

        .guests-counter-btn.active {
            background-color: var(--primary);
            color: var(--white);
            border-color: var(--primary);
            box-shadow: 0 4px 8px rgba(72, 131, 31, 0.3);
        }

        /* Minus button (first button) should have black icon when active */
        .guests-counter .guests-counter-btn:first-child.active {
            background-color: var(--white);
            color: var(--black);
            border-color: var(--gray-300);
        }

        .guests-counter-value {
            width: 1.5rem;
            text-align: center;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.5;
            color: var(--gray-900);
        }

        .guests-modal-footer {
            display: flex;
            justify-content: center;
            padding: 1rem;
        }

        .guests-apply-btn {
            display: flex;
            height: 3rem;
            flex: 1;
            max-width: 30rem;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 0.75rem;
            background-color: var(--primary);
            color: var(--white);
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: 0.015em;
            transition: all 0.2s;
            border: none;
        }

        .guests-apply-btn:hover {
            background-color: #3a6f1a;
        }

        .guests-apply-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Hide guests modal on mobile */
        @media (max-width: 767px) {
            .guests-modal-overlay {
                display: none !important;
            }
        }

        /* Adjust guests modal position on tablets - move to the right and compact */
        @media (min-width: 768px) and (max-width: 1023px) {
            .guests-modal {
                left: 80% !important;
                min-width: 18rem !important;
                max-width: 18rem !important;
            }
            
            .guests-modal-header {
                padding: 0.75rem !important;
            }
            
            .guests-modal-title {
                font-size: 0.9375rem !important;
            }
            
            .guests-close-btn {
                height: 1.5rem !important;
                width: 1.5rem !important;
            }
            
            .guests-modal-content {
                padding: 0.75rem !important;
                gap: 0.375rem !important;
            }
            
            .guests-item {
                padding: 0.5rem 0.375rem !important;
                gap: 0.75rem !important;
            }
            
            .guests-icon-container {
                height: 2rem !important;
                width: 2rem !important;
            }
            
            .guests-type {
                font-size: 0.875rem !important;
            }
            
            .guests-age {
                font-size: 0.75rem !important;
            }
            
            .guests-counter {
                gap: 0.5rem !important;
            }
            
            .guests-counter-btn {
                width: 2rem !important;
                height: 2rem !important;
            }
            
            .guests-counter-btn svg {
                width: 14px !important;
                height: 14px !important;
            }
            
            .guests-counter-value {
                font-size: 0.875rem !important;
            }
            
            .guests-modal-footer {
                padding: 0.75rem !important;
            }
            
            .guests-apply-btn {
                height: 2.5rem !important;
                font-size: 0.875rem !important;
            }
        }

        /* Position guests modal relative to form field container */
        #guests-field-container {
            position: relative;
            overflow: visible; /* Allow modal to extend beyond container */
        }

        /* Reduce guests modal width on desktop only and compact */
        @media (min-width: 1024px) {
            .guests-modal {
                min-width: 16rem;
                max-width: 16rem;
                margin-top: 0.75rem;
                border-radius: 0.625rem;
            }

            .guests-modal-header {
                padding: 0.5rem 0.625rem;
            }

            .guests-modal-title {
                font-size: 0.8125rem;
            }

            .guests-close-btn {
                height: 1.25rem;
                width: 1.25rem;
            }

            .guests-close-icon {
                font-size: 0.875rem;
            }

            .guests-modal-content {
                padding: 0.5rem 0.625rem;
                gap: 0.25rem;
            }

            .guests-item {
                padding: 0.375rem 0.25rem;
                gap: 0.5rem;
            }

            .guests-icon-container {
                height: 1.5rem;
                width: 1.5rem;
                border-radius: 0.375rem;
            }

            .guests-icon-container .material-symbols-outlined {
                font-size: 0.875rem;
            }

            .guests-type {
                font-size: 0.75rem;
                line-height: 1.3;
            }

            .guests-age {
                font-size: 0.625rem;
                line-height: 1.3;
            }

            .guests-counter {
                gap: 0.375rem;
            }

            .guests-counter-btn {
                width: 1.625rem;
                height: 1.625rem;
            }

            .guests-counter-btn svg {
                width: 12px;
                height: 12px;
            }

            .guests-counter-value {
                font-size: 0.75rem;
                width: 1.25rem;
            }

            .guests-modal-footer {
                padding: 0.5rem 0.625rem;
            }

            .guests-apply-btn {
                height: 2rem;
                font-size: 0.75rem;
                border-radius: 0.375rem;
            }
        }

        @media (max-width: 640px) {
            .days-modal-title {
                font-size: 1.5rem;
            }
            
            .days-counter-value {
                font-size: 5rem;
            }
        }

        @media (max-width: 480px) {
            .days-modal-title {
                font-size: 1.375rem;
            }
            
            .days-counter-value {
                font-size: 4.5rem;
            }
        }

        .calendar-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            border-top: 1px solid #e5e7eb;
        }

        .calendar-footer-btn {
            display: flex;
            min-width: 70px;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 0.375rem;
            height: 2rem;
            padding: 0 0.875rem;
            font-size: 0.8125rem;
            font-weight: bold;
            letter-spacing: 0.015em;
            border: none;
            transition: all 0.2s;
        }

        .calendar-btn-clear {
            background-color: transparent;
            color: #374151;
        }

        .calendar-btn-clear:hover {
            background-color: #f3f4f6;
        }

        .calendar-btn-apply {
            background-color: #48831f;
            color: white;
            box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
        }

        .calendar-btn-apply:hover {
            background-color: #3a6b19;
            box-shadow: 0 20px 25px -5px rgba(72, 131, 31, 0.4);
        }

        /* Mobile Date Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-light);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .modal-overlay.active {
            display: flex;
        }

        .date-modal {
            background-color: var(--background-light);
            width: 100%;
            max-width: 28rem;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .modal-overlay {
                display: none !important;
            }
        }

        .modal-header {
            display: flex;
            align-items: center;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .modal-close-button {
            padding: 0.5rem;
            border-radius: 50%;
            background-color: var(--gray-100);
            color: var(--gray-800);
            border: none;
            margin-right: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--gray-900);
        }

        .modal-content {
            padding: 0 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .toggle-container {
            background-color: var(--gray-100);
            border-radius: var(--border-radius);
            padding: 0.25rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .toggle-button {
            width: 50%;
            padding: 0.5rem;
            border-radius: 0.5rem;
            border: none;
            background-color: transparent;
            color: var(--gray-500);
            cursor: pointer;
        }

        .toggle-button.active {
            background-color: var(--white);
            color: var(--primary);
        }

        .duration-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .duration-button {
            padding: 0.75rem 0.5rem;
            border-radius: var(--border-radius);
            border: 1px solid var(--gray-200);
            background-color: var(--white);
            color: var(--gray-800);
            cursor: pointer;
        }

        .duration-button.active {
            border: 2px solid var(--primary);
            background-color: rgba(72, 131, 31, 0.1);
            color: var(--primary);
        }

        /* Mobile Calendar Weekdays - matches trip planner */
        .date-modal .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.5rem 0;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--gray-500);
            margin-bottom: 0.5rem;
        }

        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.5rem 0;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--gray-500);
            margin-bottom: 0.5rem;
        }

        .calendar-month {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .modal-footer {
            margin-top: auto;
            padding: 1rem;
            padding-top: 1rem;
        }

        .date-range {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .date-info {
            text-align: left;
        }

        .date-label {
            font-size: 0.875rem;
            color: var(--gray-500);
        }

        .date-value {
            font-weight: 600;
            color: var(--gray-900);
        }

        .arrow-icon {
            color: var(--gray-400);
        }

        .days-count {
            text-align: center;
        }

        .days-number {
            font-weight: 700;
            font-size: 1.125rem;
            color: var(--primary);
        }

        .days-label {
            font-size: 0.875rem;
            color: var(--gray-500);
        }

        .action-buttons {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .confirm-button {
            width: 100%;
            background-color: var(--primary);
            color: var(--white);
            font-weight: 700;
            padding: 1rem;
            border-radius: 9999px;
            border: none;
            font-size: 1.125rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .confirm-button:hover {
            opacity: 0.9;
        }

        .reset-button {
            flex-shrink: 0;
            background-color: var(--gray-200);
            color: var(--gray-600);
            padding: 1rem 1.5rem;
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 1rem;
        }

        /* Additional Mobile Modal Styles */
        .days-modal-overlay,
        .travelers-modal-overlay,
        .budget-modal-overlay,
        .activities-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-light);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .days-modal-overlay.active,
        .travelers-modal-overlay.active,
        .budget-modal-overlay.active,
        .budget-modal-overlay-mobile.active,
        .activities-modal-overlay.active,
        .destination-input-modal-overlay.active {
            display: flex;
        }

        /* Destination Input Modal Styles - Mobile Only */
        .destination-input-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-light);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .destination-input-modal {
            background-color: var(--background-light);
            width: 100%;
            max-width: 28rem;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow-x: hidden;
            overflow-y: auto;
            box-sizing: border-box;
        }

        .destination-input-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            border-bottom: 1px solid var(--gray-200);
        }

        .destination-input-modal-header h2 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-dark);
            flex: 1;
            text-align: center;
        }

        .destination-input-modal-close {
            padding: 0.5rem;
            border-radius: 50%;
            background-color: var(--gray-100);
            color: var(--gray-800);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }

        .destination-input-modal-close:hover {
            background-color: var(--gray-200);
        }

        .destination-input-modal-content {
            flex: 1;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        .destination-search-container {
            position: relative;
            width: 100%;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }

        .destination-search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-500);
            font-size: 1.5rem;
            pointer-events: none;
            z-index: 2;
        }

        .destination-input-field {
            width: 100%;
            padding: 1rem 4.5rem 1rem 3.5rem;
            border: 1px solid var(--gray-300);
            border-radius: 0.5rem;
            font-size: 1rem;
            font-family: inherit;
            color: var(--text-dark);
            background-color: white;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            position: relative;
        }

        .destination-clear-btn {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #137fec;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            z-index: 3;
            transition: opacity 0.2s;
            white-space: nowrap;
        }

        .destination-clear-btn:hover {
            opacity: 0.8;
        }

        .destination-clear-btn:active {
            opacity: 0.6;
        }

        .destination-input-field:focus {
            outline: none;
            border-color: #48831f;
            box-shadow: 0 0 0 3px rgba(72, 131, 31, 0.1);
        }

        /* Error states for input validation */
        .destination-input-field.error,
        .form-input.error {
            border-color: #dc2626 !important;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
            background-color: #fef2f2;
        }

        .destination-input-field.error:focus,
        .form-input.error:focus {
            border-color: #dc2626 !important;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
        }

        .validation-error-message {
            color: #dc2626;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .validation-error-message::before {
            content: '⚠️';
            font-size: 1rem;
        }

        .validation-error-message.hidden {
            display: none;
        }

        /* Desktop/Tablet Autocomplete Styles */
        @media (min-width: 768px) {
            .desktop-autocomplete-wrapper {
                position: relative;
                width: 100%;
                overflow: visible;
            }

            #destination-desktop,
            #origin-desktop,
            #destination-desktop:focus,
            #origin-desktop:focus,
            #destination-desktop:active,
            #origin-desktop:active,
            #destination-desktop:hover,
            #origin-desktop:hover {
                outline: none !important;
                outline-offset: 0 !important;
                border: none !important;
                border-width: 0 !important;
                box-shadow: none !important;
                -webkit-appearance: none !important;
                -moz-appearance: none !important;
                appearance: none !important;
            }

            .desktop-autocomplete-wrapper:focus-within,
            .desktop-autocomplete-wrapper:focus,
            .form-field:focus-within,
            .form-field:has(#destination-desktop:focus),
            .form-field:has(#origin-desktop:focus) {
                outline: none !important;
                box-shadow: none !important;
                /* Preserve vertical separator borders - only remove top/bottom borders */
                border-top: none !important;
                border-bottom: none !important;
            }

            .desktop-autocomplete-dropdown {
                position: absolute;
                top: calc(100% + 1rem) !important;
                left: -1rem !important;
                right: auto !important;
                width: 180px !important;
                max-width: 180px !important;
                min-width: 180px !important;
                background: white;
                border: 1px solid var(--gray-300);
                border-radius: 0.5rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                max-height: 300px;
                overflow-y: auto;
                z-index: 10000;
                display: none;
                margin-top: 0.5rem !important;
                box-sizing: border-box !important;
            }

            .desktop-autocomplete-dropdown.show {
                display: block;
            }

            .desktop-autocomplete-list {
                padding: 0.5rem 0;
            }

            .desktop-autocomplete-item {
                padding: 0.75rem 1rem;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 0.75rem;
                transition: background-color 0.2s;
            }

            .desktop-autocomplete-item:hover {
                background-color: var(--gray-100);
            }

            .desktop-autocomplete-item-icon {
                width: 20px;
                height: 20px;
                flex-shrink: 0;
            }

            .desktop-autocomplete-item-name {
                font-size: 0.8125rem;
                color: var(--text-dark);
                font-weight: 500;
            }

            .desktop-autocomplete-no-results {
                padding: 1rem;
                text-align: center;
                color: var(--gray-600);
                font-size: 0.875rem;
            }
        }

        .trending-destinations-section {
            width: 100%;
        }

        .trending-destinations-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 1rem 0;
        }

        .trending-destinations-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .trending-destination-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
            border-radius: 0.5rem;
            gap: 1rem;
        }

        .trending-destination-item:active {
            background-color: var(--gray-100);
        }

        .destination-icon {
            color: var(--gray-600);
            font-size: 1.5rem;
            flex-shrink: 0;
            width: 24px;
            height: 24px;
        }

        .destination-icon svg {
            width: 100%;
            height: 100%;
        }

        .trending-destination-info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .trending-destination-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-dark);
            margin: 0;
        }

        /* Activities Selection Modal Styles - Mobile Only */
        .activities-modal {
            background-color: var(--background-light);
            width: 100%;
            max-width: 28rem;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .activities-modal-header {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            margin-bottom: 0.75rem;
            flex-shrink: 0;
        }

        .activities-modal-back-button {
            padding: 0.5rem;
            border-radius: 50%;
            background-color: var(--gray-100);
            color: var(--gray-800);
            border: none;
            margin-right: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .activities-modal-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--gray-900);
            margin: 0;
        }

        .activities-modal-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0 1rem;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .activities-scrollable {
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding-top: 0.75rem;
            padding-right: 0.5rem;
            margin-right: -0.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
        }

        .activities-scrollable::-webkit-scrollbar {
            width: 4px;
        }

        .activities-scrollable::-webkit-scrollbar-track {
            background: transparent;
        }

        .activities-scrollable::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 2px;
        }

        .activity-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.375rem;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            justify-items: stretch;
            padding: 0.125rem;
        }

        .activity-button-modal {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            padding: 0.3rem 0.375rem;
            border-radius: 0.5rem;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border: 2px solid #d1d5db;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            gap: 0.25rem;
            min-width: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .activity-button-modal:hover {
            border-color: rgba(72, 131, 31, 0.4);
            box-shadow: 0 2px 8px rgba(72, 131, 31, 0.12);
        }

        .activity-button-modal:active {
            transform: scale(0.98);
        }

        .activity-button-modal.active {
            background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
            border-color: #E6B800;
            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
        }

        .activity-icon {
            font-size: 0.75rem;
            color: #000000;
            flex-shrink: 0;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 1rem;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 0.2rem;
        }

        .activity-button-modal:hover .activity-icon {
            color: #48831f;
            background: rgba(72, 131, 31, 0.1);
        }

        .activity-button-modal.active .activity-icon {
            color: #000000;
            background: rgba(0, 0, 0, 0.1);
        }

        .activity-name {
            font-size: 0.5625rem;
            font-weight: 600;
            text-align: left;
            color: #000000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
            transition: color 0.2s ease;
            letter-spacing: -0.03em;
            line-height: 1.1;
        }

        .activity-button-modal:hover .activity-name {
            color: #1f2937;
        }

        .activity-button-modal.active .activity-name {
            color: #000000;
            font-weight: 600;
        }

        .activities-custom-section {
            margin-top: -1.5rem;
            margin-bottom: 1rem;
        }

        .activities-details-group {
            list-style: none;
            background: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            border: 1px solid rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .activities-details-group:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            border-color: rgba(72, 131, 31, 0.2);
        }

        .activities-details-group[open] {
            border-color: rgba(72, 131, 31, 0.3);
            box-shadow: 0 4px 20px rgba(72, 131, 31, 0.12);
        }

        .activities-details-group + .activities-details-group {
            margin-top: 1rem;
        }

        .activities-details-summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, #f8faf6 0%, #ffffff 100%);
            transition: all 0.2s ease;
        }

        .activities-details-summary:hover {
            background: linear-gradient(135deg, #f0f5ed 0%, #f8faf6 100%);
        }

        .activities-details-group[open] .activities-details-summary {
            background: linear-gradient(135deg, #48831f 0%, #5a9c2a 100%);
            border-bottom: 1px solid rgba(72, 131, 31, 0.2);
        }

        .activities-details-group[open] .activities-details-summary span {
            color: #ffffff;
        }

        .activities-details-summary::-webkit-details-marker {
            display: none;
        }

        .activities-details-summary span:first-child {
            font-weight: 600;
            font-size: 0.9375rem;
            color: var(--gray-800);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .activities-details-summary span:first-child::before {
            content: '';
            width: 4px;
            height: 4px;
            background-color: #48831f;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .activities-details-group[open] .activities-details-summary span:first-child::before {
            background-color: #ffffff;
        }

        .activities-details-summary .material-symbols-outlined:last-child {
            transition: transform 0.3s ease;
            font-size: 1.25rem;
            color: #48831f;
            background: rgba(72, 131, 31, 0.1);
            border-radius: 50%;
            padding: 0.25rem;
        }

        .activities-details-group[open] .activities-details-summary .material-symbols-outlined:last-child {
            transform: rotate(180deg);
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .activities-details-content {
            padding: 1rem 1.25rem 1.25rem;
            background: #ffffff;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .activities-custom-textarea {
            width: 100%;
            padding: 1rem;
            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
            border: 2px solid #e5e7eb;
            border-radius: 0.875rem;
            color: var(--gray-900);
            font-family: inherit;
            font-size: 0.9375rem;
            resize: none;
            height: 6rem;
            min-height: 6rem;
            max-height: 6rem;
            overflow-y: auto;
            line-height: 1.6;
            box-sizing: border-box;
            transition: all 0.2s ease;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .activities-custom-textarea::-webkit-scrollbar {
            display: none;
        }

        .activities-custom-textarea:hover {
            border-color: #d1d5db;
            background: #ffffff;
        }

        .activities-custom-textarea::placeholder {
            color: #9ca3af;
            font-style: italic;
        }

        .activities-custom-textarea:focus {
            outline: none;
            border-color: #48831f;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(72, 131, 31, 0.1);
        }

        .activities-custom-textarea:focus::placeholder {
            opacity: 0.6;
        }

        .activities-modal-footer {
            flex-shrink: 0;
            padding: 1rem;
            padding-top: 1rem;
        }

        .activities-confirm-button {
            width: 100%;
            background-color: var(--primary);
            color: var(--white);
            font-weight: 700;
            padding: 1rem;
            border-radius: 9999px;
            font-size: 1.125rem;
            border: none;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .activities-confirm-button:hover {
            opacity: 0.9;
        }

        /* Hide activities modal on desktop/tablet */
        @media (min-width: 768px) {
            .activities-modal-overlay {
                display: none !important;
            }
        }

        /* Desktop/Tablet Activities Selection Modal Styles */
        .activities-modal-desktop-overlay {
            display: none; /* Not needed - we'll handle clicks via document listener */
        }

        .activities-modal-desktop-container {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 1rem;
            z-index: 2001;
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            border-radius: 0.75rem;
            background-color: var(--background-light);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid var(--border-light);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .activities-modal-desktop-container.show {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .activities-modal-desktop-container::before {
            content: '';
            position: absolute;
            top: -8px;
            left: var(--pointer-left, 50%);
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid white;
            z-index: 2002;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        /* Position activities modal relative to search form container */
        #search-form-container {
            position: relative;
            overflow: visible;
        }

        #activities-field-container {
            position: relative;
            overflow: visible;
        }

        .activities-modal-desktop-close-btn {
            position: absolute;
            right: 1rem;
            top: 1rem;
            z-index: 10;
            display: flex;
            height: 2rem;
            width: 2rem;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            background-color: rgba(229, 231, 235, 0.5);
            color: #4b5563;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .activities-modal-desktop-close-btn:hover {
            background-color: rgba(209, 213, 219, 0.7);
        }

        .activities-modal-desktop-close-btn .material-symbols-outlined {
            font-size: 1.25rem;
        }

        .activities-modal-desktop-content {
            padding: 0.75rem 1.5rem 0.5rem;
        }

        .activities-modal-desktop-title {
            font-size: 1.25rem;
            font-weight: 900;
            line-height: 1.1;
            color: var(--text-dark);
            margin-bottom: 0.15rem;
        }

        .activities-modal-desktop-subtitle {
            font-size: 0.7rem;
            font-weight: 400;
            color: #617589;
        }

        .activities-modal-desktop-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.375rem;
            padding: 0.125rem 1.5rem;
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .activities-modal-desktop-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 0.3rem;
            }
        }

        @media (min-width: 1024px) {
            .activities-modal-desktop-grid {
                grid-template-columns: repeat(8, 1fr);
            }
        }

        .activities-modal-desktop-item {
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: flex-start;
            gap: 0.325rem;
            border-radius: 0.5rem;
            border: 2px solid #d1d5db;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            padding: 0.375rem 0.5rem;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            min-width: 0;
        }

        .activities-modal-desktop-item:hover {
            border-color: rgba(72, 131, 31, 0.4);
            box-shadow: 0 2px 8px rgba(72, 131, 31, 0.12);
        }

        .activities-modal-desktop-item:active {
            transform: scale(0.98);
        }

        .activities-modal-desktop-item.selected {
            background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
            border-color: #E6B800;
            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
            color: #000000;
        }

        .activities-modal-desktop-item .material-symbols-outlined {
            font-size: 0.875rem;
            color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.25rem;
            height: 1.25rem;
            background: rgba(0, 0, 0, 0.06);
            border-radius: 0.25rem;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }

        .activities-modal-desktop-item:hover .material-symbols-outlined {
            color: #48831f;
            background: rgba(72, 131, 31, 0.1);
        }

        .activities-modal-desktop-item.selected .material-symbols-outlined {
            color: #000000;
            background: rgba(0, 0, 0, 0.1);
        }

        .activities-modal-desktop-text {
            font-size: 0.625rem;
            font-weight: 600;
            line-height: 1.1;
            letter-spacing: -0.03em;
            color: #000000;
            transition: color 0.2s ease;
        }

        .activities-modal-desktop-item:hover .activities-modal-desktop-text {
            color: #1f2937;
        }

        .activities-modal-desktop-item.selected .activities-modal-desktop-text {
            color: #000000;
            font-weight: 600;
        }

        /* Tablet specific - even more compact */
        @media (min-width: 768px) and (max-width: 1023px) {
            .activities-modal-desktop-item {
                padding: 0.3rem 0.4rem;
                gap: 0.25rem;
            }

            .activities-modal-desktop-item .material-symbols-outlined {
                font-size: 0.75rem;
                width: 1rem;
                height: 1rem;
            }

            .activities-modal-desktop-text {
                font-size: 0.5625rem;
            }
        }

        .activities-modal-desktop-footer {
            margin-top: 0.4rem;
            flex-shrink: 0;
            border-top: 1px solid #d1d5db;
            background-color: rgba(255, 255, 255, 0.5);
            padding: 0.35rem;
            backdrop-filter: blur(4px);
        }

        .activities-modal-desktop-footer-content {
            margin: 0 auto;
            width: 100%;
            max-width: 80rem;
            display: flex !important;
            flex-direction: column !important;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
        }

        /* Single row with all 4 elements */
        .activities-footer-single-row {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 0.5rem;
            width: 100%;
            flex-wrap: nowrap;
        }

        .activities-footer-link {
            display: inline-flex !important;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem !important;
            font-weight: 600 !important;
            letter-spacing: -0.01em;
            color: #1f2937 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
            border: 2px solid #d1d5db !important;
            border-radius: 0.5rem !important;
            cursor: pointer !important;
            transition: all 0.3s ease;
            white-space: nowrap;
            padding: 0.625rem 1rem;
            text-decoration: none;
            font-family: inherit;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }

        .activities-footer-link:hover {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
            border-color: #48831f !important;
            color: #48831f !important;
            box-shadow: 0 4px 12px rgba(72, 131, 31, 0.15);
            transform: translateY(-1px);
            text-decoration: none !important;
        }

        .activities-footer-link.active {
            background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%) !important;
            border-color: #E6B800 !important;
            color: #000000 !important;
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        }

        .activities-footer-count {
            display: inline-block !important;
            font-size: 0.625rem !important;
            font-weight: 700 !important;
            color: #1f2937 !important;
            margin: 0 !important;
            margin-left: auto !important;
            white-space: nowrap;
            padding: 0.25rem 0;
        }

        .activities-footer-apply-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 2rem;
            min-width: 70px;
            padding: 0 1rem;
            border-radius: 0.5rem;
            background-color: #48831f !important;
            color: #ffffff !important;
            font-size: 0.8rem !important;
            font-weight: 700 !important;
            font-family: inherit;
            border: none !important;
            cursor: pointer !important;
            transition: background-color 0.2s ease;
            flex-shrink: 0;
        }

        .activities-footer-apply-btn:hover {
            background-color: #3a6f1a !important;
        }

        /* Textareas row - side by side */
        .activities-footer-textareas-row {
            display: flex !important;
            flex-direction: row !important;
            gap: 0.5rem;
            width: auto;
            margin-top: 0.375rem;
        }

        /* Textarea wrappers */
        .activities-footer-textarea-wrapper {
            display: none;
            flex: none;
            width: 280px;
            max-width: 280px;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .activities-footer-textarea-wrapper.visible {
            display: block !important;
        }

        .activities-footer-textarea {
            display: block !important;
            width: 100% !important;
            height: 3.5rem;
            min-height: 3.5rem;
            max-height: 3.5rem;
            border-radius: 0.625rem;
            border: 2px solid #e5e7eb !important;
            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem !important;
            color: #1f2937 !important;
            font-family: inherit;
            line-height: 1.4;
            resize: none;
            transition: all 0.3s ease;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .activities-footer-textarea::-webkit-scrollbar {
            display: none;
        }

        .activities-footer-textarea:focus {
            outline: none !important;
            border-color: #48831f !important;
            background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
            box-shadow: 0 0 0 4px rgba(72, 131, 31, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        }

        .activities-footer-textarea::placeholder {
            color: #9ca3af;
            font-size: 0.6875rem;
            font-style: italic;
        }

        /* Hide desktop activities modal on mobile */
        @media (max-width: 767px) {
            .activities-modal-desktop-overlay {
                display: none !important;
            }
        }

        /* Desktop/Tablet Number of Days Dropdown Selector */
        @media (min-width: 768px) {
            .days-selector-desktop {
                position: relative;
                width: 100%;
                overflow: visible;
            }

            .form-field:has(.days-selector-desktop) {
                overflow: visible !important;
            }

            .form-grid:has(.days-selector-desktop) {
                overflow: visible !important;
            }

            .search-form:has(.days-selector-desktop) {
                overflow: visible !important;
            }

            .days-trigger-desktop {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                text-align: left;
                background-color: transparent;
                border: none;
                padding: 0;
                color: var(--text-light-primary);
                cursor: pointer;
                transition: opacity 0.2s;
            }

            .days-trigger-desktop:focus {
                outline: none;
            }

            .days-trigger-desktop .material-icons-outlined {
                color: var(--primary);
                font-size: 1rem;
            }

            .days-value-desktop {
                font-weight: 600;
                font-size: 0.875rem;
                color: var(--text-light-primary);
            }

            .days-dropdown-panel-desktop {
                position: absolute;
                z-index: 1000;
                margin-top: 0.75rem;
                left: 0;
                width: 100%;
                max-width: 24rem;
                min-width: 20rem;
                background-color: var(--white);
                border-radius: 0.75rem;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 12px 24px -6px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
                padding: 1.5rem;
                border: 1px solid var(--gray-200);
                display: none;
                opacity: 0;
                transform: scale(0.95);
                transition: opacity 0.1s ease-out, transform 0.1s ease-out;
            }

            .days-dropdown-panel-desktop.open {
                display: block;
                opacity: 1;
                transform: scale(1);
            }

            .days-dropdown-arrow-desktop {
                position: absolute;
                top: -0.5rem;
                left: 0.75rem;
                width: 1rem;
                height: 1rem;
                background-color: var(--white);
                transform: rotate(45deg);
                border-left: 1px solid var(--gray-200);
                border-top: 1px solid var(--gray-200);
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
            }

            /* Tablet-specific: Position arrow and panel on the right side */
            @media (min-width: 768px) and (max-width: 1023px) {
                .days-dropdown-panel-desktop {
                    left: auto;
                    right: 0;
                }
                
                .days-dropdown-arrow-desktop {
                    left: auto;
                    right: 0.75rem;
                }
            }

            .days-panel-header-desktop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 1.5rem;
            }

            .days-panel-title-desktop {
                font-size: 1rem;
                font-weight: 500;
                color: var(--gray-800);
            }

            .days-counter-controls-desktop {
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            .days-counter-btn-desktop {
                width: 2.5rem;
                height: 2.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 9999px;
                border: none;
                cursor: pointer;
                transition: background-color 0.2s;
            }

            .days-counter-btn-desktop svg {
                width: 1.25rem;
                height: 1.25rem;
            }

            .days-counter-btn-desktop.decrement {
                background-color: var(--gray-100);
                color: var(--gray-500);
            }

            .days-counter-btn-desktop.decrement:hover:not(:disabled) {
                background-color: var(--gray-200);
            }

            .days-counter-btn-desktop.decrement:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            .days-counter-btn-desktop.increment {
                background-color: var(--gray-800);
                color: var(--white);
            }

            .days-counter-btn-desktop.increment:hover {
                background-color: var(--gray-700);
            }

            .days-counter-value-desktop {
                font-size: 1.25rem;
                font-weight: 700;
                width: 2rem;
                text-align: center;
                color: var(--gray-900);
            }

            .days-panel-footer-desktop {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 0.5rem;
            }

            .days-action-btn-desktop {
                padding: 0.625rem 1.25rem;
                border-radius: 0.5rem;
                font-size: 0.875rem;
                font-weight: 500;
                border: none;
                cursor: pointer;
                transition: background-color 0.2s, opacity 0.2s;
            }

            .days-reset-btn-desktop {
                background-color: var(--gray-100);
                color: var(--gray-800);
            }

            .days-reset-btn-desktop:hover {
                background-color: var(--gray-200);
            }

            .days-apply-btn-desktop {
                background-color: #558B2F;
                color: var(--white);
            }

            .days-apply-btn-desktop:hover {
                opacity: 0.9;
            }

            @media (min-width: 1024px) {
                .days-dropdown-panel-desktop {
                    margin-top: 2rem;
                }
            }
        }

        /* Hide on mobile */
        @media (max-width: 767px) {
            .days-selector-desktop {
                display: none !important;
            }
        }

        /* Travelers/Guests Selection Modal Styles - Mobile Only */
        .travelers-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-light);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .travelers-modal-overlay.active {
            display: flex;
        }

        .travelers-modal {
            background-color: var(--background-light);
            width: 100%;
            max-width: 28rem;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .travelers-modal-header {
            flex-shrink: 0;
            padding: 1rem;
            display: flex;
            align-items: center;
        }

        .travelers-back-button {
            padding: 0.5rem;
            border-radius: 50%;
            background-color: var(--gray-100);
            color: var(--gray-800);
            border: none;
            margin-right: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .travelers-modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--gray-900);
        }

        .travelers-main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 3rem;
            padding: 0 1rem;
        }

        .travelers-counter-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .travelers-counter-info {
            text-align: left;
        }

        .travelers-counter-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gray-900);
        }

        .travelers-counter-description {
            font-size: 1rem;
            color: var(--gray-500);
            margin-top: 0.25rem;
        }

        .travelers-counter-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .travelers-counter-button {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
            border: 2px solid var(--gray-300);
            color: var(--gray-700);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            background-color: var(--white);
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .travelers-counter-button svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .travelers-counter-button:hover:not(:disabled) {
            border-color: var(--primary);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            transform: translateY(-1px);
        }

        .travelers-counter-button:disabled {
            background-color: var(--gray-200);
            color: var(--gray-400);
            box-shadow: none;
            border-color: var(--gray-300);
            cursor: not-allowed;
        }

        .travelers-counter-button.primary {
            border-color: var(--primary);
            color: var(--primary);
        }

        .travelers-counter-button.primary:hover {
            background-color: rgba(72, 131, 31, 0.1);
        }

        .travelers-counter-value {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--gray-900);
            width: 2.5rem;
            text-align: center;
        }

        .travelers-modal-footer {
            flex-shrink: 0;
            padding: 1.5rem;
        }

        .travelers-confirm-button {
            width: 100%;
            background-color: var(--primary);
            color: var(--white);
            font-weight: 700;
            padding: 1rem;
            border-radius: 9999px;
            border: none;
            font-size: 1.125rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .travelers-confirm-button:hover {
            opacity: 0.9;
        }

        /* Hide travelers modal on desktop/tablet */
        @media (min-width: 768px) {
            .travelers-modal-overlay {
                display: none !important;
            }
        }

        /* Budget Selection Modal Styles - Mobile Only */
        .budget-modal-overlay-mobile {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-light);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .budget-modal-overlay-mobile.active {
            display: flex;
        }

        .budget-modal-mobile {
            background-color: var(--background-light);
            width: 100%;
            max-width: 28rem;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .budget-modal-header-mobile {
            flex-shrink: 0;
            padding: 1rem;
            display: flex;
            align-items: center;
            position: relative;
        }

        .budget-back-button-mobile {
            display: flex;
            width: 2.5rem;
            height: 2.5rem;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            border: none;
            cursor: pointer;
        }

        .budget-back-icon-mobile {
            font-size: 1.5rem;
            color: var(--gray-700);
        }

        .budget-modal-title-mobile {
            width: 100%;
            text-align: center;
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.015em;
            color: var(--gray-800);
        }

        .budget-placeholder-mobile {
            width: 2.5rem;
            height: 2.5rem;
            flex-shrink: 0;
        }

        .budget-main-mobile {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
        }

        .budget-content-mobile {
            padding: 4rem 1rem 0;
        }

        .budget-description-mobile {
            padding-bottom: 2rem;
            text-align: center;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--gray-600);
            margin-top: 1rem;
        }

        .budget-options-grid-mobile {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .budget-modal-option-mobile {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 0.75rem;
            border-radius: 0.75rem;
            border: 1px solid var(--gray-200);
            background-color: var(--white);
            padding: 1rem;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .budget-modal-option-mobile:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }

        .budget-modal-option-mobile.selected {
            border: 2px solid var(--primary);
            background-color: rgba(72, 131, 31, 0.1);
        }

        .budget-modal-icon-mobile {
            color: var(--primary);
        }

        .budget-modal-option-content-mobile {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .budget-modal-option-title-mobile {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
            color: var(--gray-800);
        }

        .budget-modal-option-description-mobile {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--gray-600);
        }

        .budget-modal-footer-mobile {
            position: sticky;
            bottom: 0;
            width: 100%;
            background-color: rgba(249, 250, 251, 0.8);
            padding: 1rem;
            padding-bottom: 1.5rem;
            backdrop-filter: blur(4px);
        }

        .budget-continue-button-mobile {
            width: 100%;
            border-radius: 0.75rem;
            background-color: var(--primary);
            padding: 1rem 0;
            text-align: center;
            font-size: 1rem;
            font-weight: 700;
            color: var(--white);
            border: none;
            cursor: pointer;
            box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3);
            transition: all 0.2s ease;
        }

        .budget-continue-button-mobile:hover {
            background-color: #3a6f1a;
            box-shadow: 0 15px 20px -3px rgba(72, 131, 31, 0.4);
            transform: translateY(-2px);
        }

        .budget-continue-button-mobile:active {
            transform: translateY(0);
        }

        /* Hide budget modal mobile on desktop/tablet */
        @media (min-width: 768px) {
            .budget-modal-overlay-mobile {
                display: none !important;
            }
        }

        /* Itinerary Page Styles - Mobile Only */
        .itinerary-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-light);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .itinerary-page.active {
            display: flex;
        }

        .itinerary-app {
            max-width: 28rem;
            margin: 0 auto;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .itinerary-header {
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            background-color: rgba(249, 250, 251, 0.8);
            backdrop-filter: blur(4px);
            z-index: 10;
        }

        .itinerary-header-button {
            color: var(--gray-900);
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .itinerary-header-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .itinerary-main {
            flex-grow: 1;
            padding: 0 1rem 7rem;
            overflow-y: auto;
        }

        .itinerary-hero {
            margin-bottom: 2rem;
        }

        /* Move itinerary hero closer to navbar on desktop and tablets */
        @media (min-width: 768px) {
            .itinerary-main {
                padding-top: 0.25rem;
            }
            
            .itinerary-hero {
                margin-top: -1rem;
            }
        }

        @media (min-width: 1024px) {
            .itinerary-main {
                padding-top: 0;
            }
            
            .itinerary-hero {
                margin-top: -1.25rem;
            }
        }

        .itinerary-hero-title {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--gray-900);
        }

        .itinerary-hero-subtitle {
            color: var(--gray-600);
            margin-top: 0.25rem;
        }

        .itinerary-tags {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .itinerary-tag {
            display: flex;
            align-items: center;
            background-color: var(--gray-200);
            color: var(--gray-700);
            padding: 0.375rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .itinerary-tag-icon {
            font-size: 1.125rem;
            color: var(--gray-500);
            margin-right: 0.375rem;
        }

        .itinerary-days {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .itinerary-day {
            border-bottom: 1px solid var(--gray-200);
        }

        .itinerary-day-summary {
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            cursor: pointer;
        }

        .itinerary-day-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .itinerary-day-icon {
            color: var(--gray-500);
            transition: transform 0.2s;
        }

        .itinerary-day[open] .itinerary-day-icon {
            transform: rotate(180deg);
        }

        .itinerary-day-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-top: 0.5rem;
        }

        .itinerary-activity {
            background-color: var(--white);
            border-radius: 0.75rem;
            padding: 0.75rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .itinerary-activity-image-container {
            background-color: var(--gray-100);
            padding: 0.5rem;
            border-radius: 0.5rem;
        }

        .itinerary-activity-image {
            width: 100%;
            height: 10rem;
            object-fit: cover;
            border-radius: 0.375rem;
        }

        .itinerary-activity-details {
            padding: 0 0.25rem;
            padding-top: 0.75rem;
        }

        .itinerary-activity-title {
            font-weight: 600;
            color: var(--gray-800);
        }

        .itinerary-activity-info {
            margin-top: 0.75rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--gray-600);
        }

        .itinerary-activity-info-item {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .itinerary-activity-info-icon {
            font-size: 1.125rem;
            color: var(--gray-400);
            margin-top: 0.125rem;
        }

        .itinerary-activity-description {
            font-size: 0.875rem;
            color: var(--gray-600);
            margin-top: 0.75rem;
        }

        .itinerary-customization {
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid var(--gray-200);
        }

        .itinerary-customization-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .itinerary-customization-description {
            margin-top: 0.5rem;
            color: var(--gray-600);
        }

        .itinerary-customization-options {
            margin-top: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .itinerary-customization-option {
            width: 100%;
            text-align: left;
            background-color: var(--white);
            padding: 1rem;
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .itinerary-customization-option:hover {
            background-color: var(--gray-50);
        }

        .itinerary-customization-option-text {
            font-weight: 500;
            color: var(--gray-700);
        }

        .itinerary-customization-option-icon {
            color: var(--gray-400);
        }

        .itinerary-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1rem;
            max-width: 28rem;
            margin: 0 auto;
            background: linear-gradient(to top, var(--background-light), transparent);
        }

        .itinerary-confirm-button {
            width: 100%;
            background-color: var(--primary);
            color: var(--white);
            font-weight: 700;
            padding: 1rem 1.5rem;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 1.125rem;
            border: none;
            cursor: pointer;
            box-shadow: 0 20px 25px -5px rgba(72, 131, 31, 0.3);
            transition: opacity 0.2s;
        }

        .itinerary-confirm-button:hover {
            opacity: 0.9;
        }

        /* Hide itinerary page on desktop/tablet */
        @media (min-width: 768px) {
            .itinerary-page {
                display: none !important;
            }
        }

        /* Tablet and Desktop Form Layout */
        @media (min-width: 768px) {
            .form-grid {
                grid-template-columns: 8fr 1fr;
            }
            
            .form-fields {
                grid-template-columns: repeat(7, 1fr);
            }
            
            .form-field:nth-child(1) {
                grid-column: span 2;
            }
            
            .form-field:nth-child(2) {
                grid-column: span 2;
            }
            
            .form-field:nth-child(3) {
                grid-column: span 2;
            }
            
            .form-field:nth-child(4) {
                grid-column: span 1;
            }
            
            .form-field:nth-child(5) {
                grid-column: span 2;
            }
            
            .form-field:nth-child(6) {
                grid-column: span 2;
            }
            
            .form-field:nth-child(7) {
                grid-column: span 2;
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .hero-content {
                padding: 1rem 1.5rem 1rem;
            }

            .form-grid {
                grid-template-columns: 1fr !important;
                gap: 0.5rem;
            }

            /* 12-column grid for flexible row layout */
            .form-fields {
                grid-template-columns: repeat(12, 1fr) !important;
                gap: 0 !important;
            }

            /* All form fields span 4 columns (3 fields per row) */
            .form-field {
                grid-column: span 4 !important;
            }

            /* Row 1: Add horizontal border under first row */
            .form-field:nth-child(1),
            .form-field:nth-child(2),
            .form-field:nth-child(3) {
                border-bottom: 1px solid #000000 !important;
                padding-bottom: 0.75rem;
            }

            /* Row 1: Vertical lines between fields */
            .form-field:nth-child(1),
            .form-field:nth-child(2) {
                border-right: 1px solid #000000 !important;
                padding-right: 0.75rem;
            }

            /* Row 2: Add horizontal border under second row (Guests, Budget, Activities) */
            .form-field:nth-child(6),
            .form-field:nth-child(7),
            .form-field:nth-child(8) {
                border-bottom: 1px solid #000000 !important;
                border-top: 1px solid #000000 !important;
                padding-bottom: 0.75rem;
                padding-top: 0.75rem;
            }

            /* Row 2: Vertical lines between fields */
            .form-field:nth-child(6),
            .form-field:nth-child(7) {
                border-right: 1px solid #000000 !important;
                padding-right: 0.75rem;
            }

            /* Preserve borders on focus for tablet grid */
            .form-field:focus-within,
            .form-field:has(input:focus),
            .form-field:has(select:focus) {
                border-bottom: 1px solid #000000 !important;
            }

            .form-field:nth-child(1):focus-within,
            .form-field:nth-child(2):focus-within,
            .form-field:nth-child(1):has(input:focus),
            .form-field:nth-child(2):has(input:focus) {
                border-right: 1px solid #000000 !important;
            }

            .form-field:nth-child(6):focus-within,
            .form-field:nth-child(7):focus-within,
            .form-field:nth-child(6):has(input:focus),
            .form-field:nth-child(7):has(input:focus) {
                border-right: 1px solid #000000 !important;
                border-top: 1px solid #000000 !important;
            }

            .form-field:nth-child(8):focus-within,
            .form-field:nth-child(8):has(select:focus) {
                border-top: 1px solid #000000 !important;
            }

            /* Show combined date field on tablets (like desktop) */
            .form-field-desktop-only {
                display: flex !important;
            }

            /* Hide separate date fields on tablets */
            .form-field-tablet-only {
                display: none !important;
            }
            
            /* Move submit button to next row on tablets - centered with reduced width */
            .form-submit {
                width: 100%;
                padding: 0.5rem 0;
                margin-top: 0.5rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .form-submit .submit-btn {
                width: auto;
                min-width: 200px;
                max-width: 300px;
            }
        }

        @media (min-width: 1024px) {
            .hero-content {
                padding: 1.5rem 1.5rem 5rem;
                padding-top: 4rem;
                min-height: auto;
                box-sizing: border-box;
            }

            .hero .container {
                max-width: 100%;
                padding: 0 4rem;
            }

            .search-form {
                max-width: 92%;
                width: 92%;
                margin: 0.5rem auto 0;
                border: none !important;
            }

            .form-field {
                border-right: none !important;
                position: relative !important;
            }

            /* Vertical divider lines between form fields - exact match to car-rental */
            .form-field:not(:last-child)::after {
                content: '' !important;
                position: absolute !important;
                right: 0 !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: 3px !important;
                height: 44px !important;
                background: linear-gradient(180deg,
                    transparent 0%,
                    rgba(72, 131, 31, 0.4) 15%,
                    rgba(72, 131, 31, 0.7) 50%,
                    rgba(72, 131, 31, 0.4) 85%,
                    transparent 100%
                ) !important;
                border-radius: 1px !important;
                z-index: 100 !important;
                display: block !important;
            }

            .form-grid {
                grid-template-columns: 8fr 1fr;
            }
            
            .form-fields {
                grid-template-columns: repeat(4, 1fr);
            }

            .form-field:nth-child(1) {
                grid-column: span 1;
            }

            .form-field:nth-child(2) {
                grid-column: span 1;
            }

            .form-field:nth-child(3) {
                grid-column: span 1;
            }

            .form-field:nth-child(4) {
                grid-column: span 1;
            }

            .form-field:nth-child(5) {
                grid-column: span 1;
            }

            .form-field:nth-child(6) {
                grid-column: span 1;
            }

            /* Budget and Activities stretch to fill the gap left by hidden days field */
            .form-field:nth-child(7) {
                grid-column: span 2;
            }

            .form-field:nth-child(8) {
                grid-column: span 2;
            }

            .form-field-desktop-only {
                display: flex;
            }

            .form-field-tablet-only {
                display: none;
            }
        }

        @media (min-width: 1280px) {
            /* 6 columns for 6 visible fields (days field hidden) */
            .form-fields {
                grid-template-columns: repeat(6, 1fr);
            }

            /* Ensure vertical dividers on 1280px+ screens - exact match to car-rental */
            .form-field {
                border-right: none !important;
                position: relative !important;
            }

            .form-field:not(:last-child)::after {
                content: '' !important;
                position: absolute !important;
                right: 0 !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: 3px !important;
                height: 44px !important;
                background: linear-gradient(180deg,
                    transparent 0%,
                    rgba(72, 131, 31, 0.4) 15%,
                    rgba(72, 131, 31, 0.7) 50%,
                    rgba(72, 131, 31, 0.4) 85%,
                    transparent 100%
                ) !important;
                border-radius: 1px !important;
                z-index: 100 !important;
                display: block !important;
            }

            .form-field:nth-child(1) {
                grid-column: span 1;
            }

            .form-field:nth-child(2) {
                grid-column: span 1;
            }

            .form-field:nth-child(3) {
                grid-column: span 1;
            }

            .form-field:nth-child(4) {
                grid-column: span 1;
            }

            .form-field:nth-child(5) {
                grid-column: span 1;
            }

            .form-field:nth-child(6) {
                grid-column: span 1;
            }

            .form-field:nth-child(7) {
                grid-column: span 1;
            }

            .form-field:nth-child(8) {
                grid-column: span 1;
            }
        }

        /* Hide number input spinners */
        .desktop-container input[type=number]::-webkit-inner-spin-button,
        .desktop-container input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .desktop-container input[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
        }
        
        /* Mobile number input spinners */
        .mobile-container input[type=number]::-webkit-inner-spin-button,
        .mobile-container input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .mobile-container input[type=number] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        /* Guide Cards Section Styles */
        .guide-section {
            padding: 3rem 1.5rem;
            background-color: #ffffff;
            margin-top: 0;
        }

        .guide-section-title {
            text-align: center;
            font-size: 2rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }

        .guide-section-subtitle {
            text-align: center;
            font-size: 1.125rem;
            color: #6b7280;
            margin-bottom: 2.5rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .guide-cards-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .guide-card {
            width: 100%;
            height: min-content;
            transition: transform 0.2s ease;
            position: relative;
            border-radius: 0.5rem 2rem;
            box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            contain: layout style;
        }

        .guide-card:hover {
            transform: scale(1.03);
            will-change: transform;
        }

        .guide-card-img-container {
            display: grid;
            border-radius: 0.5rem 2rem;
            height: 270px;
            overflow: hidden;
            position: relative;
        }

        @media (min-width: 1024px) {
            .guide-card-img-container {
                height: 350px;
            }
        }

        /* Footer Styles */
        .footer {
            background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 50%, #3b641a 100%);
            color: #fff;
            padding: 60px 0 0;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #ffd700, #ffaa00, #ffd700);
            z-index: 1;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            padding: 0 20px;
            position: relative;
            z-index: 2;
        }

        .footer-section h3 {
            color: #ffd700;
            font-size: 1.4rem;
            margin-bottom: 20px;
            font-family: "Playfair Display", "Georgia", "Times New Roman", serif;
            position: relative;
            padding-bottom: 12px;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 2px;
            background: #ffd700;
        }

        .footer-section p {
            line-height: 1.6;
            margin-bottom: 20px;
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.85);
        }

        .footer-section ul {
            list-style: none;
            padding: 0;
        }

        .footer-section ul li {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.3s ease;
        }

        .footer-section ul li:hover {
            transform: translateX(5px);
        }

        .footer-section ul li a {
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .footer-section ul li a:hover {
            color: #ffd700;
        }

        .footer-section ul li i {
            color: #ffd700;
            width: 16px;
            font-size: 1rem;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }

        .social-links a {
            transition: all 0.3s ease;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .social-links a.facebook {
            background: #1877F2;
        }

        .social-links a.twitter {
            background: #1DA1F2;
        }

        .social-links a.instagram {
            background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
        }

        .social-links a.linkedin {
            background: #0A66C2;
        }

        .social-links a i {
            color: #fff;
            font-size: 1rem;
        }

        .social-links a:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .newsletter-form {
            display: flex;
            gap: 8px;
            margin-top: 15px;
            position: relative;
            max-width: 320px;
            width: 100%;
        }

        .newsletter-form input {
            flex: 1;
            padding: 8px 12px;
            height: 36px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .newsletter-form input:focus {
            border-color: rgba(255, 215, 0, 0.5);
            background: rgba(255, 255, 255, 0.08);
            outline: none;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.15);
        }

        .newsletter-form input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .newsletter-form button {
            padding: 0 16px;
            height: 36px;
            border: none;
            border-radius: 18px;
            background: linear-gradient(135deg, #ffd700, #ffaa00);
            color: #000;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .newsletter-form button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            padding-bottom: 20px;
            margin-top: 30px;
            position: relative;
            z-index: 2;
        }

        .footer-bottom::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
        }

        .footer-bottom p {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

        @media (max-width: 768px) {
            .footer {
                padding: 40px 0 0;
            }
            .footer-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .footer-section {
                text-align: center;
            }
            .footer-section h3::after {
                left: 50%;
                transform: translateX(-50%);
            }
            .social-links {
                justify-content: center;
            }
            .footer-section ul li {
                justify-content: center;
            }
            .footer-section ul li:hover {
                transform: translateY(-3px);
            }
            .newsletter-form {
                max-width: 90%;
                margin-left: auto;
                margin-right: auto;
            }
        }

        @media (max-width: 480px) {
            .newsletter-form {
                flex-direction: column;
            }
            .newsletter-form input {
                text-align: center;
            }
            .newsletter-form button {
                width: 100%;
                justify-content: center;
            }
        }

        .guide-card-img {
            transition: transform 0.2s ease;
            background: transparent;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .guide-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
            image-rendering: auto;
            z-index: 1;
        }

        .guide-card-img img[src=""],
        .guide-card-img img:not([src]) {
            opacity: 0;
        }

        .guide-card-img .guide-card-icon {
            position: relative;
            z-index: 1;
        }

        .guide-card:hover .guide-card-img {
            transform: scale(1.3) translateZ(0);
        }

        .guide-card:hover .guide-card-img img {
            opacity: 1;
        }

        .guide-card-icon {
            width: 4rem;
            height: 4rem;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .guide-card-icon svg,
        .guide-card-icon .material-icons-outlined {
            color: white;
            font-size: 2rem;
        }

        .guide-card-description {
            position: absolute;
            bottom: 0.5rem;
            left: 0.5rem;
            text-align: start;
            padding: 0.75rem 1rem;
            width: calc(100% - 1rem);
            transition: transform 0.2s ease;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 0.5rem 2rem;
            z-index: 2;
        }

        .guide-card:hover .guide-card-description {
            transform: translateX(7px);
            will-change: transform;
        }

        .guide-card-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: white;
            margin-bottom: 0.5rem;
        }

        .guide-card-text {
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.5;
            margin-bottom: 0.5rem;
        }

        .guide-card-example {
            background-color: rgba(255, 255, 255, 0.15);
            border-left: 3px solid white;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            margin-top: 0.5rem;
        }

        .guide-card-example-label {
            font-size: 0.6875rem;
            font-weight: 600;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .guide-card-example-text {
            font-size: 0.8125rem;
            color: white;
            font-weight: 500;
        }

        @media (min-width: 768px) {
            .guide-cards-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .guide-section {
                padding: 4rem 2rem;
            }

            .guide-cards-container {
                grid-template-columns: repeat(3, 1fr);
            }

            .guide-section-title {
                font-size: 2.5rem;
            }
        }

        /* Mobile: 2 cards per row with compact text */
        @media (max-width: 767px) {
            .guide-section {
                padding: 1.5rem 0.5rem !important;
            }

            .guide-section .container {
                padding: 0 0.5rem !important;
                max-width: 100% !important;
            }

            .guide-cards-container {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.5rem !important;
                max-width: 100% !important;
                padding: 0 !important;
            }

            .guide-card {
                height: 220px !important;
            }

            .guide-card-img-container {
                height: 100% !important;
            }

            .guide-card-description {
                padding: 6px 8px !important;
                bottom: 4px !important;
                left: 4px !important;
                width: calc(100% - 8px) !important;
                background-color: rgba(0, 0, 0, 0.65) !important;
            }

            .guide-card-title {
                font-size: 0.7rem !important;
                margin-bottom: 3px !important;
                line-height: 1.2 !important;
                font-weight: 700 !important;
            }

            .guide-card-text {
                font-size: 0.55rem !important;
                line-height: 1.3 !important;
                margin-bottom: 4px !important;
            }

            .guide-card-example {
                padding: 4px 6px !important;
                margin-top: 4px !important;
                border-left-width: 2px !important;
            }

            .guide-card-example-label {
                font-size: 0.5rem !important;
                margin-bottom: 2px !important;
            }

            .guide-card-example-text {
                font-size: 0.55rem !important;
            }
        }

        /* Results Display Styles (All Devices) */
        .results-display-container {
            position: relative;
            background-color: #F5F5F7;
            width: 100%;
            overflow: hidden;
            padding: 0.5rem 0.5rem 2rem 0.5rem;
            padding-top: 5rem;
        }

        @media (max-width: 767px) {
            .results-display-container {
                background-color: #F5F5F7;
                padding: 0.5rem calc(0.5rem - 1px) 2rem calc(0.5rem - 1px);
                padding-top: 5rem;
                overflow-x: visible;
                overflow-y: visible;
            }
        }

        @media (min-width: 768px) {
            .results-display-container {
                background-color: #F5F5F7;
                width: 100vw;
                margin-left: calc(-50vw + 50%);
                margin-right: calc(-50vw + 50%);
                padding: 0.25rem 1rem 2rem 1rem;
                padding-top: 5rem;
                margin-top: 0;
            }
        }
        
        @media (min-width: 1024px) {
            .results-display-container {
                background-color: #F5F5F7;
                padding: 0 1rem 2rem 1rem;
                padding-top: 8rem;
                margin-top: 0;
            }
        }

        .results-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0.5rem 0.5rem 1.25rem 0.5rem;
        }

        @media (max-width: 767px) {
            .results-container {
                padding: 0.5rem calc(0.5rem - 1px) 1.25rem calc(0.5rem - 1px);
            }
        }

        @media (min-width: 640px) {
            .results-container {
                padding: 0.25rem 1.5rem;
            }
        }

        @media (min-width: 1024px) {
            .results-container {
                max-width: 100%;
                padding: 0 4rem;
            }
        }

        .results-layout-content {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            flex: 1;
        }

        .results-page-title {
            color: var(--text-light-primary);
            letter-spacing: -0.025em;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.25;
            padding: 0 0.5rem;
            text-align: center;
            padding-bottom: 0.25rem;
            padding-top: 0.5rem;
            margin: 0;
        }

        @media (min-width: 768px) {
            .results-page-title {
                font-size: 1.875rem;
                padding: 0 1rem;
                padding-top: 0.25rem;
                margin-top: 0.5rem;
            }
        }

        @media (min-width: 1024px) {
            .results-page-title {
                padding-top: 0;
                margin-top: 0.25rem;
            }
        }

        .results-page-subtitle {
            color: var(--text-light-secondary);
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            padding: 0 0.5rem;
            padding-bottom: 1rem;
            margin: 0;
        }

        @media (min-width: 768px) {
            .results-page-subtitle {
                padding: 0 1rem;
            }
        }

        .results-trip-summary {
            padding: 1rem 0.5rem;
        }

        @media (min-width: 768px) {
            .results-trip-summary {
                padding: 1rem;
            }
        }

        .results-summary-card {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border-radius: 0.75rem;
            border: 1px solid var(--gray-200);
            background-color: var(--white);
            padding: 0.5rem;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
        }

        @media (min-width: 640px) {
            .results-summary-card {
                flex-wrap: nowrap;
                gap: 0.5rem;
                padding: 0.625rem;
            }
        }

        .results-summary-item {
            display: flex;
            width: calc(50% - 0.25rem);
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            background-color: var(--background-light);
            border: 1px solid var(--gray-200);
        }

        @media (min-width: 640px) {
            .results-summary-item {
                flex: 1;
                width: auto;
                flex-direction: row;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 0.625rem;
            }
        }

        .results-summary-icon {
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .results-summary-icon .material-symbols-outlined {
            font-size: 1.25rem;
        }

        .results-summary-icon svg {
            width: 1.25rem;
            height: 1.25rem;
        }

        .results-summary-icon svg path {
            fill: var(--primary);
        }

        .results-summary-content {
            display: flex;
            flex-direction: column;
            gap: 0;
            flex: 1;
        }

        .results-summary-content h2 {
            color: var(--text-light-primary);
            font-size: 0.5rem;
            font-weight: 600;
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.7;
            margin: 0;
        }

        .results-summary-content p {
            color: var(--text-light-primary);
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.2;
            margin: 0;
        }

        .results-itinerary {
            display: flex;
            flex-direction: column;
            padding: 1rem 0.5rem;
            gap: 1rem;
        }

        @media (max-width: 767px) {
            .results-itinerary {
                padding: 1rem calc(0.5rem - 1px);
            }
        }

        @media (min-width: 768px) {
            .results-itinerary {
                padding: 1rem;
            }
        }

        .results-day-section {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding: 1rem 0.5rem;
            border-bottom: 1px solid var(--gray-200);
            border-radius: 0.5rem;
            background-color: var(--white);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
        }

        @media (max-width: 767px) {
            .results-day-section {
                padding: 1rem calc(0.5rem - 1px);
            }
        }

        @media (min-width: 768px) {
            .results-day-section {
                padding: 1rem;
            }
        }

        .results-day-section:last-child {
            border-bottom: none;
        }

        .results-day-title {
            color: var(--text-light-primary);
            font-size: 1.125rem;
            font-weight: 700;
            margin: 0;
            cursor: default;
        }

        @media (max-width: 767px) {
            .results-day-title {
                font-size: 0.875rem;
            }
        }

        .results-day-title.collapsible {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            user-select: none;
            transition: color 0.2s ease;
        }

        .results-day-title.collapsible:hover {
            color: var(--primary);
        }

        .results-day-title-icon {
            font-size: 1.5rem;
            transition: transform 0.3s ease;
            transform: rotate(180deg);
        }

        .results-day-title-icon.expanded {
            transform: rotate(0deg);
        }

        .results-activities {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
            max-height: 5000px;
            opacity: 1;
        }

        .results-activities.collapsed {
            max-height: 0;
            opacity: 0;
            gap: 0;
            margin: 0;
        }

        .results-activity {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--gray-200);
        }

        .results-activity:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        @media (min-width: 640px) {
            .results-activity {
                flex-direction: row;
                gap: 1rem;
            }
        }

        .results-activity-image-container {
            width: 100%;
            aspect-ratio: 16/9;
            position: relative;
            border-radius: 0.5rem;
            overflow: hidden;
            background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
            background-size: 200% 100%;
            animation: imageShimmer 1.2s ease-in-out infinite;
        }

        @keyframes imageShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .results-activity-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }

        .results-activity-image-container img.loaded {
            opacity: 1;
        }

        /* Stop shimmer when image loads */
        .results-activity-image-container.image-loaded {
            animation: none;
            background: var(--gray-100);
        }
        
        @media (min-width: 640px) {
            .results-activity-image-container {
                width: 33.333%;
                min-width: 180px;
                height: 150px;
                aspect-ratio: auto;
            }
        }
        
        /* Keep carousel styles for backward compatibility but hide carousel elements */
        .results-activity-image-carousel {
            width: 100%;
            aspect-ratio: 16/9;
            position: relative;
            border-radius: 0.5rem;
            overflow: hidden;
        }

        @media (min-width: 640px) {
            .results-activity-image-carousel {
                width: 33.333%;
                min-width: 180px;
                height: 150px;
                aspect-ratio: auto;
            }
        }

        .results-carousel-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            overflow: hidden;
        }

        .results-carousel-slide {
            min-width: 100%;
            height: 100%;
            flex-shrink: 0;
            transition: transform 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .results-carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            background-color: var(--gray-100);
            min-height: 100%;
        }

        .results-carousel-slide img:not([src]),
        .results-carousel-slide img[src=""],
        .results-carousel-slide img[src*="data:image/svg"] {
            background-color: var(--gray-200);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .results-carousel-slide img.loaded {
            opacity: 1;
        }

        @media (min-width: 640px) {
            .results-carousel-slide img {
                image-rendering: -webkit-optimize-contrast;
                -ms-interpolation-mode: bicubic;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
            }

            /* Ensure placeholder SVG doesn't scale up unnecessarily */
            .results-carousel-slide img[src*="data:image/svg"] {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }
        }

        .results-carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }

        .results-carousel-arrow.prev {
            left: 0.5rem;
        }

        .results-carousel-arrow.next {
            right: 0.5rem;
        }

        .results-carousel-arrow .material-symbols-outlined {
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.95);
        }

        .results-activity-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
        }

        .results-activity-time {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.8125rem;
            color: var(--text-light-secondary);
        }

        .results-time-value {
            font-weight: 600;
            color: var(--primary);
        }

        .results-duration {
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .results-activity-name {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-light-primary);
            margin: 0;
        }

        .results-activity-location {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-size: 0.875rem;
            color: var(--text-light-secondary);
        }

        .results-activity-description {
            font-size: 0.8125rem;
            color: #000000;
            margin: 0;
            line-height: 1.6;
            font-weight: 700;
        }
        
        .results-activity-description p {
            margin: 0 0 0.75rem 0;
            line-height: 1.6;
            color: #000000;
            font-weight: 700;
        }
        
        .results-activity-description p:last-child {
            margin-bottom: 0;
        }

        /* Trip Customization Modal (All Devices) */
        .trip-customization-modal-desktop {
            position: relative;
            width: 100%;
            max-width: 32rem;
            margin: 2rem auto;
            overflow: hidden;
            background-color: white;
            border-radius: 1rem;
            border: 1px solid #000000;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            z-index: 1; /* Lower than navbar (z-index: 10) to ensure it stays below when scrolling */
        }

        @media (max-width: 767px) {
            /* Make modal touch edges by breaking out of all parent containers */
            .trip-customization-modal-desktop {
                margin: 1rem 0 !important;
                padding: 1rem;
                max-width: none !important;
                width: 100vw !important;
                border-radius: 0;
                border-left: none;
                border-right: none;
                position: relative;
                left: 50% !important;
                right: auto !important;
                transform: translateX(-50%) !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            
            /* Break out of parent containers using viewport-based positioning */
            .results-layout-content .trip-customization-modal-desktop {
                margin-left: calc(-50vw + 50%) !important;
                margin-right: calc(-50vw + 50%) !important;
                left: auto !important;
                transform: none !important;
            }
            
            /* Allow modal to extend beyond container - prevent clipping */
            .results-container {
                overflow-x: visible !important;
                overflow-y: visible;
            }
        }

        .trip-customization-modal-container {
            position: relative;
        }

        .trip-customization-circle-top {
            position: absolute;
            top: -4rem;
            left: -4rem;
            width: 12rem;
            height: 12rem;
            background-color: rgba(19, 146, 236, 0.1);
            border-radius: 50%;
        }

        .trip-customization-circle-bottom {
            position: absolute;
            bottom: -5rem;
            right: -4rem;
            width: 14rem;
            height: 14rem;
            background-color: rgba(19, 146, 236, 0.05);
            border-radius: 50%;
        }

        .trip-customization-modal-content {
            position: relative;
            z-index: 1; /* Lower than navbar (z-index: 10) to prevent overlay */
        }

        .trip-customization-modal-body {
            display: flex;
            flex-direction: column;
            padding: 2rem;
            text-align: center;
        }

        @media (min-width: 640px) {
            .trip-customization-modal-body {
                padding: 2.5rem;
            }
        }

        .trip-customization-layout-content-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .trip-customization-modal-title {
            color: rgb(17, 24, 39);
            font-size: 1.375rem;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.015em;
            padding-bottom: 0.75rem;
            padding-top: 1.25rem;
        }

        .trip-customization-modal-description {
            color: rgb(75, 85, 99);
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            padding-bottom: 2rem;
        }

        .trip-customization-button-group {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1rem;
        }

        .trip-customization-button {
            display: flex;
            min-width: 5.25rem;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            overflow: hidden;
            border-radius: 0.5rem;
            height: 3.5rem;
            padding: 0 1.5rem;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: 0.015em;
            transition: all 0.2s;
            border: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .trip-customization-button:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .trip-customization-button:focus {
            outline: 2px solid #1392ec;
            outline-offset: 2px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .trip-customization-button-secondary {
            background-color: rgb(243, 244, 246);
            color: rgb(31, 41, 55);
            border: 1px solid #000000;
        }

        .trip-customization-button-secondary:hover {
            background-color: rgb(229, 231, 235);
            border: 1px solid #000000;
        }

        .trip-customization-button-primary {
            background-color: #48831f;
            color: white;
            box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3), 0 4px 6px -2px rgba(72, 131, 31, 0.1);
        }

        .trip-customization-button-primary:hover {
            opacity: 0.9;
            box-shadow: 0 20px 25px -5px rgba(72, 131, 31, 0.3), 0 10px 10px -5px rgba(72, 131, 31, 0.1);
        }

        .trip-customization-button-primary:focus {
            box-shadow: 0 20px 25px -5px rgba(72, 131, 31, 0.3), 0 10px 10px -5px rgba(72, 131, 31, 0.1);
        }

        /* Reduce font size for text inside secondary buttons on mobile */
        @media (max-width: 767px) {
            .trip-customization-button-secondary .truncate {
                font-size: 0.75rem !important;
            }
        }

        .trip-customization-button-icon {
            width: 1.5rem;
            height: 1.5rem;
            color: rgb(107, 114, 128);
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .trip-customization-button:hover .trip-customization-button-icon {
            transform: scale(1.1);
        }

        .trip-customization-button-primary .trip-customization-button-icon {
            color: white;
        }

        .trip-customization-textarea {
            width: 100%;
            text-align: left;
            background-color: white;
            border: 1px solid rgb(209, 213, 219);
            border-radius: 0.5rem;
            padding: 0.75rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            color: rgb(31, 41, 55);
            font-family: inherit;
            font-size: 1rem;
            resize: vertical;
            display: none;
        }

        .trip-customization-textarea.visible {
            display: block;
        }

        .trip-customization-textarea:focus {
            outline: 2px solid #1392ec;
            outline-offset: 0;
            border-color: #1392ec;
        }

        .trip-customization-textarea::placeholder {
            color: rgb(156, 163, 175);
        }

        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Submit Plan Modal (All Devices) */
        .submit-plan-modal-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(17, 24, 39, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .submit-plan-modal-container {
            position: relative;
            width: 100%;
            max-width: 28rem;
            overflow-x: hidden;
        }

        .submit-plan-form-container {
            position: relative;
            border-radius: 0.75rem;
            border: 1px solid var(--gray-200);
            background-color: white;
            padding: 1.5rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            overflow-x: visible;
            overflow-y: visible;
            max-width: 100%;
        }

        @media (min-width: 640px) {
            .submit-plan-form-container {
                padding: 2rem;
            }
        }

        .submit-plan-close-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: var(--gray-400);
            background: none;
            border: none;
            cursor: pointer;
        }

        .submit-plan-close-button:hover {
            color: var(--gray-600);
        }

        .submit-plan-close-icon {
            font-size: 1.875rem;
        }

        .submit-plan-form-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 2rem;
        }

        .submit-plan-user-icon {
            font-size: 2.25rem;
            color: #1f2937;
        }

        .submit-plan-form-title {
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.25;
            color: #111827;
            letter-spacing: -0.025em;
        }

        @media (min-width: 640px) {
            .submit-plan-form-title {
                font-size: 1.875rem;
            }
        }

        .submit-plan-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .submit-plan-form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .submit-plan-form-label {
            font-size: 1rem;
            font-weight: 700;
            color: var(--gray-700);
        }

        .submit-plan-form-input {
            height: 3rem;
            width: 100%;
            border-radius: 0.5rem;
            border: 1px solid #000000;
            background-color: white;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            color: #111827;
            box-shadow: none;
        }

        .submit-plan-form-input::placeholder {
            color: var(--gray-400);
        }

        .submit-plan-form-input:focus {
            border-color: #000000;
            outline: none;
            box-shadow: none;
        }

        .submit-plan-phone-input-container {
            position: relative;
            z-index: 1;
            overflow: visible;
        }

        .submit-plan-phone-input-wrapper {
            display: flex;
            align-items: stretch;
            border-radius: 0.5rem;
            background-color: white;
            border: 1px solid #000000;
            box-shadow: none;
            width: 100%;
            min-width: 0;
            overflow: visible;
            gap: 0;
        }

        .submit-plan-phone-input-wrapper:focus-within {
            border: 1px solid #000000;
            box-shadow: none;
        }

        /* Country Selector Styles (matches car-rental.html) */
        .submit-plan-country-selector {
            position: relative;
            flex-shrink: 0;
        }

        .submit-plan-country-selector-btn {
            height: 3rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0 0.75rem;
            border: none;
            background-color: transparent;
            cursor: pointer;
            border-radius: 0.5rem 0 0 0.5rem;
            border-right: 1px solid #000000;
        }

        .submit-plan-country-selector-btn:hover {
            background-color: rgba(0, 0, 0, 0.02);
        }

        .submit-plan-country-flag {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .submit-plan-country-flag img {
            width: 24px;
            height: 18px;
            object-fit: cover;
            border-radius: 2px;
        }

        .submit-plan-country-arrow {
            font-size: 1.25rem;
            color: #6d7a89;
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .submit-plan-country-selector.open .submit-plan-country-arrow {
            transform: rotate(180deg);
        }

        .submit-plan-country-dropdown {
            position: absolute;
            bottom: 100%;
            left: 0;
            background: white;
            border: 1px solid var(--gray-300);
            border-radius: 0.5rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            z-index: 10000;
            min-width: 280px;
            max-width: 320px;
            max-height: 20rem;
            overflow: hidden;
            overflow-x: hidden;
            display: none;
            flex-direction: column;
            margin-bottom: 0.25rem;
        }

        .submit-plan-country-selector.open .submit-plan-country-dropdown {
            display: flex;
        }

        .submit-plan-country-search-wrapper {
            position: relative;
            padding: 0.5rem;
            border-bottom: 1px solid var(--gray-200);
            overflow-x: hidden;
        }

        .submit-plan-search-icon {
            position: absolute;
            left: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.25rem;
            color: var(--gray-400);
            flex-shrink: 0;
            pointer-events: none;
            z-index: 1;
        }

        .submit-plan-country-search {
            flex: 1;
            width: 100%;
            padding: 0.5rem 0.5rem 0.5rem 3rem;
            border: 1px solid var(--gray-300);
            border-radius: 0.375rem;
            font-size: 0.875rem;
            min-width: 0;
            box-sizing: border-box;
        }

        .submit-plan-country-search:focus {
            outline: none;
            border-color: var(--primary);
        }

        .submit-plan-country-list {
            overflow-y: auto;
            overflow-x: hidden;
            max-height: 16rem;
        }

        .submit-plan-country-item {
            padding: 0.875rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.875rem;
            cursor: pointer;
            font-size: 0.875rem;
            color: #111827;
            transition: background-color 0.15s;
            min-height: 3rem;
        }

        .submit-plan-country-item:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .submit-plan-country-item-flag {
            flex-shrink: 0;
        }

        .submit-plan-country-item-flag img {
            width: 24px;
            height: 18px;
            object-fit: cover;
            border-radius: 2px;
        }

        .submit-plan-country-item-name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        .submit-plan-country-item-dial {
            font-weight: 500;
            color: var(--gray-600);
            flex-shrink: 0;
        }

        /* Phone Number Input Wrapper (matches car-rental.html) */
        .submit-plan-phone-number-input-wrapper {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
            border-radius: 0 0.5rem 0.5rem 0;
        }

        .submit-plan-dial-code {
            padding: 0 0.5rem 0 0.75rem;
            font-size: 1rem;
            font-weight: 500;
            color: #111827;
            flex-shrink: 0;
            border-right: 1px solid #e5e7eb;
        }

        .submit-plan-phone-input {
            height: 3rem;
            flex: 1;
            min-width: 0;
            border: none;
            background-color: transparent;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            color: #111827;
        }

        .submit-plan-phone-input::placeholder {
            color: var(--gray-400);
        }

        .submit-plan-phone-input:focus {
            outline: none;
        }

        .submit-plan-phone-tooltip {
            pointer-events: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-bottom: 0.5rem;
            width: max-content;
            max-width: 20rem;
            transform: translateX(-50%);
            border-radius: 0.375rem;
            background-color: #111827;
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
            text-align: center;
            color: white;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .submit-plan-phone-input-container:hover .submit-plan-phone-tooltip,
        .submit-plan-phone-input-container:focus-within .submit-plan-phone-tooltip {
            opacity: 1;
        }

        .submit-plan-tooltip-arrow {
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            border-left: 0.5rem solid transparent;
            border-right: 0.5rem solid transparent;
            border-top: 0.5rem solid #111827;
        }

        .submit-plan-submit-button {
            display: flex;
            height: 3rem;
            width: 100%;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            border-radius: 0.5rem;
            border: none;
            background-color: #48831f;
            padding: 0 1.25rem;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3), 0 4px 6px -2px rgba(72, 131, 31, 0.1);
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 0.5rem;
        }

        .submit-plan-submit-button:hover {
            opacity: 0.9;
            box-shadow: 0 20px 25px -5px rgba(72, 131, 31, 0.3), 0 10px 10px -5px rgba(72, 131, 31, 0.1);
        }

        .submit-plan-submit-button:focus {
            outline: none;
            box-shadow: 0 20px 25px -5px rgba(72, 131, 31, 0.3), 0 10px 10px -5px rgba(72, 131, 31, 0.1);
        }

        .submit-plan-submit-button:active {
            transform: scale(0.98);
        }

        .submit-plan-send-icon {
            transform: rotate(-45deg);
        }

        .pt-2 {
            padding-top: 0.5rem;
        }

        /* Thank You Modal (All Devices) */
        .thank-you-modal-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(17, 24, 39, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 4000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .thank-you-modal-overlay.active {
            display: flex;
        }

        .thank-you-modal-container {
            position: relative;
            width: 100%;
            max-width: 32rem;
            animation: zoomIn 0.3s ease-out;
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @media (min-width: 1024px) {
            .thank-you-modal-container {
                max-width: 26rem;
            }
        }

        .thank-you-card {
            position: relative;
            width: 100%;
            text-align: center;
            background-color: white;
            border-radius: 0.75rem;
            padding: 2rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        @media (min-width: 640px) {
            .thank-you-card {
                padding: 3rem;
            }
        }

        @media (min-width: 1024px) {
            .thank-you-card {
                padding: 1.5rem;
            }
        }

        .thank-you-close-button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: #617589;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.2s;
        }

        .thank-you-close-button:hover {
            color: #333333;
        }

        .thank-you-success-icon-container {
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: center;
        }

        @media (min-width: 1024px) {
            .thank-you-success-icon-container {
                margin-bottom: 1rem;
            }
        }

        .thank-you-success-icon {
            display: flex;
            height: 4rem;
            width: 4rem;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(16, 185, 129, 0.2);
        }

        @media (min-width: 1024px) {
            .thank-you-success-icon {
                height: 3rem;
                width: 3rem;
            }
        }

        .thank-you-success-icon-symbol {
            font-size: 2.25rem;
            color: #10B981;
        }

        @media (min-width: 1024px) {
            .thank-you-success-icon-symbol {
                font-size: 1.75rem;
            }
        }

        .thank-you-content {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        @media (min-width: 1024px) {
            .thank-you-content {
                gap: 0.5rem;
            }
        }

        .thank-you-title {
            font-size: 2.25rem;
            font-weight: 900;
            line-height: 1.25;
            letter-spacing: -0.033em;
            color: #333333;
        }

        @media (min-width: 640px) {
            .thank-you-title {
                font-size: 3rem;
            }
        }

        @media (min-width: 1024px) {
            .thank-you-title {
                font-size: 2rem;
            }
        }

        .thank-you-message {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #617589;
        }

        @media (min-width: 1024px) {
            .thank-you-message {
                font-size: 0.875rem;
            }
        }

        .thank-you-download-button-container {
            display: flex;
            padding: 2rem 0 1rem 0;
            justify-content: center;
        }

        @media (min-width: 1024px) {
            .thank-you-download-button-container {
                padding: 1.5rem 0 0.5rem 0;
            }
        }

        .thank-you-download-button {
            display: flex;
            width: 100%;
            max-width: 20rem;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 0.5rem;
            height: 3rem;
            padding: 0 1.25rem;
            background-color: #48831f;
            color: white;
            gap: 0.625rem;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: 0.015em;
            border: none;
            transition: opacity 0.2s;
            box-shadow: 0 10px 15px -3px rgba(72, 131, 31, 0.3), 0 4px 6px -2px rgba(72, 131, 31, 0.1);
        }

        @media (min-width: 1024px) {
            .thank-you-download-button {
                max-width: 16rem;
                height: 2.75rem;
                font-size: 0.75rem;
                padding: 0 1rem;
            }
        }

        .thank-you-download-button:hover {
            opacity: 0.9;
        }

        .thank-you-download-button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

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

/* =====================================================
   SKELETON LOADER WITH SHIMMER EFFECT
   Professional loading animation for trip generation
   Facebook/LinkedIn style ghost loading
   ===================================================== */

/* Progress Bar Loader - Fixed at top */
.skeleton-progress-container {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    height: 5px;
    background-color: #e0e0e0;
    z-index: 9999;
    overflow: hidden;
}

.skeleton-progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #48831f, #6bb52a, #8dd35f, #6bb52a, #48831f);
    background-size: 200% 100%;
    border-radius: 0 4px 4px 0;
    animation: progress-move 2s ease-in-out infinite, progress-shimmer 1s linear infinite;
}

@keyframes progress-move {
    0% { transform: translateX(-100%); width: 30%; }
    50% { transform: translateX(150%); width: 50%; }
    100% { transform: translateX(400%); width: 30%; }
}

@keyframes progress-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading Status Text */
.skeleton-loading-status {
    text-align: center;
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
}

.skeleton-loading-status-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.skeleton-loading-status-subtext {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

/* Generation Spinner with Timer */
.generation-spinner {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 1.25rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.generation-spinner::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid rgba(72, 131, 31, 0.15);
    border-top: 3px solid #48831f;
    border-right: 3px solid transparent;
    animation: generation-spin 0.8s linear infinite;
}

.generation-timer {
    position: relative;
    z-index: 10;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
    color: #48831f;
    letter-spacing: 1px;
}

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

/* Skeleton Base Styles - The Shimmer Effect */
.skeleton {
    background: linear-gradient(
        90deg,
        #e5e7eb 0%,
        #e5e7eb 40%,
        #f3f4f6 50%,
        #e5e7eb 60%,
        #e5e7eb 100%
    );
    background-size: 200% 100%;
    animation: shimmer-wave 1.5s ease-in-out infinite;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

@keyframes shimmer-wave {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Alternative shimmer with pseudo-element for stronger effect */
.skeleton-shimmer {
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.skeleton-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: shimmer-slide 1.5s ease-in-out infinite;
}

@keyframes shimmer-slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Skeleton Loading Container */
.skeleton-loading-wrapper {
    padding: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .skeleton-loading-wrapper {
        padding: 2rem;
    }
}

/* Skeleton Page Title */
.skeleton-page-title {
    width: 280px;
    max-width: 80%;
    height: 36px;
    margin: 0 auto 0.75rem;
    display: block;
}

.skeleton-page-subtitle {
    width: 220px;
    max-width: 60%;
    height: 20px;
    margin: 0 auto 1.5rem;
    display: block;
}

/* Skeleton Summary Card */
.skeleton-summary-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
    .skeleton-summary-card {
        grid-template-columns: repeat(4, 1fr);
        padding: 1.5rem;
    }
}

.skeleton-summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
}

.skeleton-summary-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-summary-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.skeleton-summary-label {
    width: 70%;
    height: 12px;
    min-height: 12px;
}

.skeleton-summary-value {
    width: 90%;
    height: 16px;
    min-height: 16px;
}

/* Skeleton Day Section */
.skeleton-day-section {
    margin-bottom: 1.5rem;
}

.skeleton-day-title {
    height: 28px;
    min-height: 28px;
    margin-bottom: 1rem;
    max-width: 250px;
}

/* Skeleton Activity Card - Main Card */
.skeleton-activity {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    border: 1px solid #f0f0f0;
}

@media (min-width: 768px) {
    .skeleton-activity {
        gap: 1.25rem;
        padding: 1.25rem;
    }
}

/* Skeleton Activity Image - THE IMAGE PLACEHOLDER */
.skeleton-activity-image {
    width: 110px;
    min-width: 110px;
    height: 90px;
    min-height: 90px;
    border-radius: 8px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .skeleton-activity-image {
        width: 160px;
        min-width: 160px;
        height: 120px;
        min-height: 120px;
    }
}

/* Skeleton Activity Details */
.skeleton-activity-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.skeleton-activity-time {
    width: 70px;
    height: 14px;
    min-height: 14px;
}

.skeleton-activity-title {
    width: 75%;
    height: 20px;
    min-height: 20px;
}

.skeleton-activity-location {
    width: 55%;
    height: 14px;
    min-height: 14px;
}

.skeleton-activity-description {
    width: 100%;
    height: 32px;
    min-height: 32px;
}

.skeleton-activity-description-2 {
    width: 85%;
    height: 14px;
    min-height: 14px;
}

/* ========================================
   FOOTER MODERN STYLES
   ======================================== */

/* INSTANT FOOTER RENDERING - Prevent "bits and pieces" loading */
.footer-modern {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    width: 100%;
    overflow: hidden;
    /* Reserve minimum height to prevent layout shift */
    min-height: 450px;
    /* Contain layout to isolate rendering */
    contain: layout style;
    /* Ensure footer renders as complete block */
    content-visibility: visible;
}

/* Footer image placeholders - show background while images load */
.footer-modern img {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Logo image - fixed dimensions to prevent shift */
.footer-logo-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* Payment logos - fill edges */
.payment-logo {
    object-fit: contain;
    padding: 0;
}

/* Banner images - responsive */
.footer-brand-banner,
.footer-brand-banner-desktop {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Wave decoration */
.footer-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    color: #f8fafc;
    transform: translateY(-100%);
    line-height: 0;
    pointer-events: none;
}

.footer-wave svg {
    width: 100%;
    height: 100%;
}

/* Main footer content */
.footer-main {
    padding: 80px 0 50px;
    position: relative;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 48px;
}

/* Brand column */
.footer-brand {
    padding-right: 24px;
    overflow: visible !important;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer-logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.footer-logo .logo-text {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
    text-transform: uppercase;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: none !important;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        #ffd700,
        #22c55e,
        #16a34a,
        #15803d,
        #22c55e,
        #ffd700
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: footerGradientMove 4s ease-in-out infinite;
}

.footer-logo .logo-accent {
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes footerGradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.footer-tagline {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 28px;
}

/* Social buttons */
.footer-social {
    display: flex;
    gap: 12px;
}

.social-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.social-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.social-btn-x {
    background: #fff;
    border-color: #fff;
}

.social-btn-x:hover {
    background: #f0f0f0;
    border-color: #f0f0f0;
}

/* Footer headings */
.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 12px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 2px;
}

/* Footer links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.925rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.footer-links a .link-arrow {
    color: #22c55e;
    font-size: 0.875rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.25s ease;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-links a:hover .link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Contact column */
.footer-contact-list {
    margin-bottom: 28px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 0.925rem;
    color: #94a3b8;
}

.contact-icon {
    width: 36px;
    height: 36px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    flex-shrink: 0;
}

/* Newsletter */
.footer-newsletter {
    margin-top: 8px;
}

.newsletter-label {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

.newsletter-form-modern {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.newsletter-form-modern:focus-within {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.newsletter-form-modern input {
    flex: 1;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
}

.newsletter-form-modern input::placeholder {
    color: #64748b;
}

.newsletter-form-modern button {
    padding: 14px 20px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-form-modern button:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* Footer Banner - Desktop (inside brand section) */
.footer-brand-banner-desktop {
    display: block;
    width: 450px;
    max-width: none !important;
    height: auto;
    margin-top: 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    object-fit: contain;
}

/* Footer Banner Wrapper - Full Width Mobile */
.footer-banner-wrapper {
    display: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.footer-brand-banner {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Bottom bar */
.footer-bottom-bar {
    background: rgba(0, 0, 0, 0.2);
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-legal a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.25s ease;
}

.footer-legal a:hover {
    color: #22c55e;
}

.footer-legal .divider {
    color: #475569;
}

.footer-payment {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-label {
    font-size: 0.8rem;
    color: #64748b;
}

.payment-icons {
    display: flex;
    gap: 10px;
}

.payment-icons i {
    font-size: 1.5rem;
    color: #64748b;
    transition: color 0.25s ease;
}

.payment-icons i:hover {
    color: #94a3b8;
}

.payment-logo {
    height: 32px;
    width: 100%;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    padding: 0;
}

/* Tablet responsive */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: span 2;
        padding-right: 0;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-tagline {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .footer-main {
        padding: 60px 0 40px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .footer-brand {
        grid-column: span 1;
    }

    .footer-logo {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-logo-img {
        height: 45px;
    }

    .footer-logo .logo-text {
        font-size: 1.5rem;
    }

    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links a {
        justify-content: center;
    }

    .footer-links a .link-arrow {
        display: none;
    }

    .contact-item {
        justify-content: center;
    }

    .newsletter-form-modern {
        max-width: 320px;
        margin: 0 auto;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-payment {
        flex-direction: column;
        gap: 8px;
    }

    /* Hide desktop banner on mobile */
    .footer-brand-banner-desktop {
        display: none;
    }

    /* Show full-width banner wrapper on mobile */
    .footer-banner-wrapper {
        display: block;
    }

    .footer-brand-banner {
        width: 100%;
        border-radius: 0;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .footer-main {
        padding: 48px 0 32px;
    }

    .footer-container {
        padding: 0 16px;
        gap: 32px;
    }

    .footer-logo-img {
        height: 40px;
    }

    .footer-logo .logo-text {
        font-size: 1.25rem;
    }

    .payment-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 220px;
    }

    .payment-logo {
        height: 28px;
        width: 100%;
    }
}