/*
Theme Name: Visit Morocco Together
Theme URI: https://visitmoroccotogether.com
Author: Visit Morocco Together
Author URI: https://visitmoroccotogether.com
Description: Custom theme for Visit Morocco Together - Authentic Morocco, Modern Travel. A professional travel agency offering tours, experiences, and private transfers across Morocco.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flavor
Tags: travel, tourism, booking, morocco, custom-theme
*/

/* ========================================
   CSS VARIABLES & DESIGN TOKENS
   ======================================== */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

:root {
    /* Brand Colors */
    --color-sand: #E8DCC4;
    --color-sand-light: #F5F1E8;
    --color-sand-dark: #D4C4A8;
    --color-terracotta: #C65D3B;
    --color-terracotta-dark: #A84B2E;
    --color-terracotta-light: #E07B5A;
    --color-earth: #8B6914;
    --color-earth-dark: #6B5010;
    
    /* Neutrals */
    --color-dark: #1A1A1A;
    --color-dark-soft: #2D2D2D;
    --color-gray-900: #333333;
    --color-gray-700: #555555;
    --color-gray-500: #888888;
    --color-gray-300: #CCCCCC;
    --color-gray-100: #F5F5F5;
    --color-white: #FFFFFF;
    
    /* Semantic Colors */
    --color-success: #2E7D32;
    --color-warning: #ED6C02;
    --color-error: #D32F2F;
    --color-info: #0288D1;
    
    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Layout */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    
    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */

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

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-gray-900);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Ensure all containers fit on mobile */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-2xl {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .section,
    section,
    main {
        max-width: 100vw;
    }
}

@media (max-width: 480px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-2xl {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

/* ========================================
   HOMEPAGE SECTIONS MOBILE FIXES
   Override inline grid styles on mobile
   ======================================== */

@media (max-width: 768px) {
    /* Force single column layout on all inline grid sections */
    .section > .container > div[style*="grid-template-columns: 1fr 1fr"],
    .section > .container > div[style*="grid-template-columns:1fr 1fr"],
    section > .container > div[style*="grid-template-columns: 1fr 1fr"],
    section > .container > div[style*="grid-template-columns:1fr 1fr"] {
        display: block !important;
    }
    
    /* Private Transfers section (bg-dark) fixes */
    .bg-dark > .container > div[style*="grid-template-columns"] {
        display: block !important;
    }
    
    .bg-dark > .container > div[style*="grid-template-columns"] > div:first-child {
        margin-bottom: var(--space-8);
        text-align: center;
    }
    
    .bg-dark > .container > div[style*="grid-template-columns"] > div:first-child h2 {
        font-size: var(--text-3xl) !important;
    }
    
    .bg-dark > .container > div[style*="grid-template-columns"] > div:first-child p {
        font-size: var(--text-base) !important;
    }
    
    .bg-dark > .container > div[style*="grid-template-columns"] > div:first-child ul {
        text-align: left;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .bg-dark > .container > div[style*="grid-template-columns"] > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
    
    /* B2B Partners section (bg-sand) fixes */
    .bg-sand > .container > div[style*="grid-template-columns"] {
        display: block !important;
    }
    
    .bg-sand > .container > div[style*="grid-template-columns"] > div:first-child {
        margin-bottom: var(--space-8);
    }
    
    .bg-sand > .container > div[style*="grid-template-columns"] > div:first-child h2 {
        font-size: var(--text-3xl) !important;
    }
    
    /* Transfer cards responsive */
    .transfer-card {
        margin-bottom: var(--space-4);
        width: 100% !important;
    }
    
    /* Button groups responsive */
    div[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    /* Buttons full width on mobile in sections */
    .bg-dark .btn,
    .bg-sand .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* Smaller padding on very small screens */
    .bg-sand > .container > div[style*="padding"] > div[style*="padding"] {
        padding: var(--space-5) !important;
    }
    
    /* Smaller grid gaps - force single column */
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Smaller headings on mobile */
    .bg-dark h2,
    .bg-sand h2 {
        font-size: var(--text-2xl) !important;
    }
    
    /* Transfer section padding */
    .bg-dark > .container {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

/* ========================================
   GLOBAL FORM INPUTS - Premium Styling
   Always visible borders, elegant focus states
   ======================================== */

/* Base input styling - applies to ALL form fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
    border: 1.5px solid #d1d5db !important;
    background-color: #ffffff !important;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 15px;
    color: #1f2937;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Hover state - subtle enhancement */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Focus state - premium glow effect */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--color-terracotta, #c65d3b) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9 !important;
}

/* Placeholder styling - better contrast */
input::placeholder,
textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

/* Select dropdown arrow styling */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 44px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed;
}

/* Read-only state */
input:read-only:not(:disabled),
textarea:read-only:not(:disabled) {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

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

ul, ol {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

@media (max-width: 768px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl); }
}

.text-display {
    font-family: var(--font-display);
}

.text-body {
    font-family: var(--font-body);
}

/* ========================================
   LAYOUT & CONTAINERS
   ======================================== */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.section-sm {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.section-lg {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-gray-100);
    transition: var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
}

.site-logo img {
    height: 48px;
    width: auto;
}

.site-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-logo-text span:last-child {
    font-size: var(--text-xs);
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-terracotta);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav-menu a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    transition: var(--transition-fast);
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-terracotta);
    transition: var(--transition-base);
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-terracotta);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.nav-dropdown-menu a:hover {
    background: var(--color-sand-light);
}

.nav-dropdown-menu a::after {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.mobile-menu-toggle:hover {
    background: var(--color-sand-light);
}

.hamburger {
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-dark);
    transition: var(--transition-base);
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

.mobile-menu-toggle.active .hamburger span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

@media (max-width: 1024px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
}

/* Mobile header fixes - tablet and below */
@media (max-width: 1024px) {
    .header-inner {
        height: 70px;
    }
    
    .site-logo {
        gap: var(--space-2);
        flex-shrink: 1;
        min-width: 0;
    }
    
    .site-logo img {
        height: 40px;
        flex-shrink: 0;
    }
    
    .site-logo-text {
        overflow: hidden;
    }
    
    .site-logo-text span:first-child {
        font-size: var(--text-base);
        white-space: nowrap;
    }
    
    .site-logo-text span:last-child {
        font-size: 0.65rem;
        white-space: nowrap;
    }
    
    .header-actions {
        gap: var(--space-2);
        flex-shrink: 0;
    }
    
    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
    }
}

/* Hide Contact Us button on mobile - shown in mobile menu instead */
@media (max-width: 768px) {
    .header-actions > .btn,
    .header-actions > a.btn,
    .site-header .header-actions .btn {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    
    .site-logo img {
        height: 36px;
    }
    
    .site-logo-text span:first-child {
        font-size: var(--text-sm);
    }
    
    .site-logo-text span:last-child {
        font-size: 0.6rem;
    }
    
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 375px) {
    .header-inner {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
    
    .site-logo img {
        height: 32px;
    }
    
    .site-logo-text span:last-child {
        display: none;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    z-index: var(--z-modal);
    padding: var(--space-6);
    transform: translateX(100%);
    transition: var(--transition-base);
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mobile-menu-nav a {
    display: block;
    padding: var(--space-4);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-gray-900);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
    background: var(--color-sand-light);
    color: var(--color-terracotta);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.btn-primary {
    background: var(--color-terracotta);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-secondary:hover {
    background: var(--color-dark-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

.btn-outline:hover {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-outline-light {
    background: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

.btn-outline-light:hover {
    background: var(--color-white);
    color: var(--color-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--color-gray-700);
}

.btn-ghost:hover {
    background: var(--color-sand-light);
    color: var(--color-terracotta);
}

.btn-sand {
    background: var(--color-sand);
    color: var(--color-dark);
}

.btn-sand:hover {
    background: var(--color-sand-dark);
}

/* ========================================
   HERO SECTION - Premium A&K Style
   Fully responsive with video support
   ======================================== */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-x: hidden;
    padding-top: 80px;
    width: 100%;
    max-width: 100vw;
}

@media (max-width: 1024px) {
    .hero {
        min-height: 90vh;
        min-height: 90svh;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 60px;
        overflow: hidden;
    }
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-background img:not(.hero-fallback-img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.45) 100%
    );
    z-index: 2;
}

/* ========================================
   HERO VIDEO STYLES
   A&K inspired cinematic video
   ======================================== */

.hero-video .hero-background::after {
    display: none;
}

.hero-fallback-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.8s ease;
}

.hero-video.video-playing .hero-fallback-img {
    opacity: 0;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity;
}

.hero-video.video-playing .hero-video-bg {
    opacity: 1;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.25) 30%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
}

@media (max-width: 1024px) {
    .hero-video-bg,
    .hero-fallback-img {
        object-position: center 40%;
    }
    
    .hero-video-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.28) 30%,
            rgba(0, 0, 0, 0.42) 70%,
            rgba(0, 0, 0, 0.52) 100%
        );
    }
}

@media (max-width: 768px) {
    .hero-video-bg,
    .hero-fallback-img {
        object-position: center 45%;
    }
    
    .hero-video-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.3) 30%,
            rgba(0, 0, 0, 0.45) 70%,
            rgba(0, 0, 0, 0.55) 100%
        );
    }
}

@media (max-width: 480px) {
    .hero-video-bg,
    .hero-fallback-img {
        object-position: center 50%;
    }
    
    .hero-video-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.28) 0%,
            rgba(0, 0, 0, 0.32) 30%,
            rgba(0, 0, 0, 0.48) 70%,
            rgba(0, 0, 0, 0.58) 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-bg {
        animation: none !important;
    }
}

/* ========================================
   HERO CONTENT - A&K Style
   ======================================== */

.hero-content {
    text-align: center;
    color: var(--color-white);
    max-width: 800px;
    width: 100%;
    padding: var(--space-10) var(--space-6);
    margin: 0 auto;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

.hero .hero-content,
.hero-video .hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}

.hero-badge svg {
    opacity: 0.9;
    width: 14px;
    height: 14px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
}

.hero-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--space-10);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.hero-actions .btn {
    min-width: 180px;
    font-size: 0.9375rem;
    padding: 16px 32px;
    letter-spacing: 0.02em;
}

.hero-actions .btn-primary {
    background: var(--color-terracotta);
    border: none;
    box-shadow: 0 4px 20px rgba(198, 93, 59, 0.35);
}

.hero-actions .btn-primary:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(198, 93, 59, 0.4);
}

.hero-actions .btn-outline-light {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
}

.hero-actions .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Tablet hero content */
@media (max-width: 1024px) {
    .hero-content {
        max-width: 680px;
        padding: var(--space-8) var(--space-5);
    }
    
    .hero-title {
        font-size: clamp(2.25rem, 5vw, 3rem);
        margin-bottom: var(--space-5);
    }
    
    .hero-subtitle {
        font-size: 1.05rem;
        max-width: 500px;
        margin-bottom: var(--space-8);
    }
    
    .hero-actions {
        margin-bottom: var(--space-4);
    }
}

/* Mobile hero content */
@media (max-width: 768px) {
    .hero-content {
        padding: var(--space-8) var(--space-5);
        max-width: 100%;
    }
    
    .hero-badge {
        font-size: 0.65rem;
        padding: 8px 16px;
        margin-bottom: var(--space-5);
        letter-spacing: 0.1em;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: var(--space-4);
        line-height: 1.15;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--space-6);
        line-height: 1.6;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }
    
    .hero-actions .btn {
        width: 100%;
        max-width: 260px;
        padding: 14px 24px;
        font-size: 0.9rem;
    }
}

/* Small mobile */
@media (max-width: 390px) {
    .hero-content {
        padding: var(--space-6) var(--space-4);
    }
    
    .hero-badge {
        font-size: 0.6rem;
        padding: 6px 14px;
    }
    
    .hero-title {
        font-size: 1.75rem;
        margin-bottom: var(--space-3);
    }
    
    .hero-subtitle {
        font-size: 0.875rem;
        max-width: 280px;
        margin-bottom: var(--space-5);
    }
    
    .hero-actions .btn {
        max-width: 240px;
        padding: 12px 20px;
        font-size: 0.85rem;
    }
}

/* Hero Search Box - Premium floating style */
.hero-search {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-top: var(--space-8);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    max-width: 820px;
    width: calc(100% - var(--space-8));
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .hero-search {
        margin-top: var(--space-6);
        padding: var(--space-5);
        border-radius: var(--radius-xl);
        width: calc(100% - var(--space-8));
        max-width: calc(100% - var(--space-8));
    }
}

@media (max-width: 480px) {
    .hero-search {
        padding: var(--space-4);
        width: calc(100% - var(--space-6));
        max-width: calc(100% - var(--space-6));
    }
}

.search-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    border-bottom: 2px solid var(--color-gray-100);
    padding-bottom: var(--space-4);
}

.search-tab {
    padding: var(--space-3) var(--space-5);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.search-tab.active {
    background: var(--color-sand);
    color: var(--color-dark);
}

.search-tab:hover:not(.active) {
    color: var(--color-dark);
}

.search-form {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr auto;
    gap: var(--space-3);
    align-items: end;
}

/* Simplified search form (Destination + Tour Type + Button) */
.search-form--simplified {
    grid-template-columns: 1.5fr 1.2fr auto;
    max-width: 800px;
    margin: 0 auto;
}

.search-form--simplified .search-field {
    min-width: 200px;
}

.search-form--simplified button {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

@media (max-width: 1100px) {
    .search-form {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
    
    .search-form .search-field:last-of-type,
    .search-form button {
        grid-column: span 1;
    }
    
    /* Simplified form on tablet */
    .search-form--simplified {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
    }
    
    .search-form--simplified button {
        grid-column: span 2;
        justify-self: center;
        width: 100%;
        max-width: 300px;
        margin-top: var(--space-2);
    }
}

@media (max-width: 600px) {
    .search-form {
        grid-template-columns: 1fr;
    }
    
    /* Simplified form on mobile */
    .search-form--simplified {
        grid-template-columns: 1fr;
    }
    
    .search-form--simplified .search-field {
        min-width: unset;
    }
    
    .search-form--simplified button {
        grid-column: span 1;
        max-width: 100%;
    }
}

.search-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.search-field label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ========================================
   UNIFIED FORM FIELD STYLES
   All dropdowns (Destination, Tour Type, Duration) 
   should look consistent
   ======================================== */

.search-field input,
.search-field select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    padding-right: var(--space-8);
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-dark);
    background: var(--color-white);
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    height: 42px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.search-field input[type="text"],
.search-field input[type="date"] {
    background-image: none;
    padding-right: var(--space-4);
}

.search-field input[type="date"] {
    padding-right: var(--space-10);
}

.search-field input:hover,
.search-field select:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.search-field input:focus,
.search-field select:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9 !important;
}

.search-field select:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.search-field select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C65D3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.search-field select option {
    padding: var(--space-3);
    font-size: var(--text-sm);
}

.search-field select optgroup {
    font-weight: 700;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--color-gray-50);
}

.search-field select optgroup option {
    font-weight: 400;
    text-transform: none;
    color: var(--color-dark);
    background: var(--color-white);
    padding-left: var(--space-4);
}

/* ========================================
   TRANSFER FORM - CUSTOM INPUT FOR "OTHER"
   ======================================== */

.transfer-custom-input {
    margin-top: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-xs) !important;
    color: var(--color-dark);
    background: var(--color-white) !important;
    background-image: none !important;
    transition: all 0.2s ease;
    height: 42px;
}

.transfer-custom-input:hover {
    border-color: var(--color-gray-300) !important;
    background-color: var(--color-gray-50) !important;
}

.transfer-custom-input:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
    background-color: var(--color-white) !important;
}

.transfer-custom-input::placeholder {
    color: var(--color-gray-400);
    font-style: italic;
}

.transfer-custom-input[style*="display: block"] {
    animation: slideDown 0.2s ease-out;
}

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

.transfer-custom-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.transfer-custom-input[type="number"]::-webkit-outer-spin-button,
.transfer-custom-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 768px) {
    .transfer-custom-input {
        font-size: var(--text-sm) !important;
        padding: var(--space-3) var(--space-4) !important;
        height: 48px;
    }
}

/* ========================================
   CARDS
   ======================================== */

.card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background: var(--color-terracotta);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.card-favorite {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.card-favorite:hover {
    background: var(--color-white);
    transform: scale(1.1);
}

.card-favorite svg {
    width: 18px;
    height: 18px;
    color: var(--color-gray-500);
}

.card-favorite.active svg {
    color: var(--color-terracotta);
    fill: var(--color-terracotta);
}

.card-content {
    padding: var(--space-6);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.card-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.card-meta-item svg {
    width: 16px;
    height: 16px;
}

.card-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.card-title a:hover {
    color: var(--color-terracotta);
}

.card-description {
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

.card-price {
    display: flex;
    flex-direction: column;
}

.card-price-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.card-price-label del {
    color: var(--color-gray-400);
    margin-right: 4px;
}

.card-price-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-terracotta);
}

.card-price-value span {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-gray-500);
}

/* ========================================
   GetYourGuide-Style Related Tours
   ======================================== */
.gyg-related-section {
    padding: var(--space-12) 0;
}

/* Ensure section title is visible in related section */
.gyg-related-section .section-title {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.gyg-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1024px) {
    .gyg-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .gyg-related-grid {
        grid-template-columns: 1fr;
    }
}

/* Related Tour Card */
.gyg-related-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

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

/* Card Image Container */
.gyg-related-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.gyg-related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gyg-related-card:hover .gyg-related-card__image img {
    transform: scale(1.08);
}

.gyg-related-card__placeholder {
    background: linear-gradient(135deg, #C65D3B 0%, #8B6914 100%);
    width: 100%;
    height: 100%;
}

/* Top Rated Badge */
.gyg-related-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: #1a4d2e;
    color: white;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    z-index: 2;
}

/* Wishlist Button */
.gyg-wishlist-btn {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    z-index: 2;
}

.gyg-wishlist-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.gyg-wishlist-btn svg {
    color: #1a1a1a;
    transition: all 0.2s ease;
}

.gyg-wishlist-btn:hover svg {
    color: #ff4444;
    fill: #ff4444;
}

/* Card Content */
.gyg-related-card__content {
    padding: var(--space-4);
}

.gyg-related-card__title {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gyg-related-card__title a {
    color: #1a1a1a;
    text-decoration: none;
}

.gyg-related-card__title a:hover {
    color: var(--color-terracotta);
}

/* Card Meta */
.gyg-related-card__meta {
    font-size: var(--text-sm);
    color: #5a5a5a;
    margin-bottom: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.gyg-meta-dot {
    color: #ccc;
}

/* Card Footer */
.gyg-related-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Rating */
.gyg-related-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.gyg-rating-score {
    font-weight: 700;
    font-size: var(--text-sm);
    color: #1a1a1a;
}

.gyg-rating-star {
    color: #ffb800;
    width: 14px;
    height: 14px;
}

.gyg-rating-count {
    font-size: var(--text-xs);
    color: #5a5a5a;
}

/* Price Display */
.gyg-related-card__price {
    text-align: right;
}

.gyg-price-from {
    display: block;
    font-size: 0.75rem;
    color: #5a5a5a;
    margin-bottom: 2px;
}

.gyg-price-strike {
    text-decoration: line-through;
    color: #999;
    margin-left: 2px;
}

.gyg-price-current {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ff5533;
}

/* Price Display Function Styles */
.gyg-price-display {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gyg-price-display .gyg-price-from {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gyg-price-display .gyg-price-current {
    display: inline;
}

.gyg-price-display .gyg-price-unit {
    font-size: var(--text-sm);
    color: #5a5a5a;
    font-weight: 400;
}

/* Destination Card */
.destination-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.destination-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.destination-card:hover img {
    transform: scale(1.1);
}

.destination-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 35%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0) 80%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-6);
    color: var(--color-white);
}

.destination-card-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: #ffffff;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.destination-card-count {
    font-size: var(--text-sm);
    opacity: 1;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ========================================
   DISCOVER MOROCCO BY REGION - Premium Cards
   ======================================== */

.region-section {
    padding: var(--space-20) 0;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-sand-light) 100%);
}

.region-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-12);
}

@media (max-width: 968px) {
    .region-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }
}

@media (max-width: 576px) {
    .region-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.region-card {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 10px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
}

.region-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.12),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

.region-card-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.region-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.region-card:hover .region-card-image img {
    transform: scale(1.1);
}

.region-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-6);
    transition: background 0.4s ease;
}

.region-card:hover .region-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0) 100%
    );
}

.region-card-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 var(--space-1) 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.region-card:hover .region-card-title {
    transform: translateY(-4px);
}

.region-card-subtitle {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
    transform: translateY(0);
    transition: all 0.4s ease;
}

.region-card:hover .region-card-subtitle {
    opacity: 1;
    transform: translateY(-2px);
}

.region-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-earth) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.region-card:hover::after {
    transform: scaleX(1);
}

@media (max-width: 576px) {
    .region-card {
        aspect-ratio: 16 / 10;
    }
    
    .region-card-title {
        font-size: var(--text-xl);
    }
    
    .region-card-overlay {
        padding: var(--space-5);
    }
}

/* ========================================
   TOP DESTINATIONS SECTION - Tile Cards
   ======================================== */

.destinations-section {
    padding: var(--space-20) 0;
    background: var(--color-sand-light);
    position: relative;
}

.destinations-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-terracotta), transparent);
    border-radius: 2px;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-10);
}

@media (max-width: 1024px) {
    .destinations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .destinations-grid {
        grid-template-columns: 1fr;
    }
}

.destination-tile {
    display: block;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.destination-tile:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.08);
}

.destination-tile-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.destination-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.destination-tile:hover .destination-tile-image img {
    transform: scale(1.08);
}

.destination-tile-content {
    padding: var(--space-4) var(--space-5);
    text-align: center;
    background: var(--color-white);
    position: relative;
}

.destination-tile-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 40px;
    height: 2px;
    background: var(--color-terracotta);
    transition: transform 0.35s ease;
}

.destination-tile:hover .destination-tile-content::before {
    transform: translateX(-50%) scaleX(1);
}

.destination-tile-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-1) 0;
    transition: color 0.3s ease;
}

.destination-tile:hover .destination-tile-name {
    color: var(--color-terracotta);
}

.destination-tile-caption {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 576px) {
    .destinations-section {
        padding: var(--space-16) 0;
    }
    
    .destination-tile-content {
        padding: var(--space-3) var(--space-4);
    }
    
    .destination-tile-name {
        font-size: var(--text-base);
    }
}

/* ========================================
   TOP DESTINATIONS PAGE STYLES
   /destinations/ archive page
   ======================================== */

/* Smooth scroll for destinations page */
.dest-page {
    scroll-behavior: smooth;
}

/* Mobile horizontal scroll with swipe support */
@media (max-width: 768px) {
    .dest-top__grid,
    .dest-region__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 16px;
        padding-bottom: 16px;
        gap: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
    }
    
    .dest-top__grid::-webkit-scrollbar,
    .dest-region__grid::-webkit-scrollbar {
        display: none;
    }
    
    .dest-top__grid .dest-card,
    .dest-region__grid .dest-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    
    .dest-top__grid.is-grabbing,
    .dest-region__grid.is-grabbing {
        cursor: grabbing;
        scroll-snap-type: none;
    }
    
    .dest-top__grid.is-grabbing .dest-card,
    .dest-region__grid.is-grabbing .dest-card {
        pointer-events: none;
    }
}

/* Page Hero */
.destinations-hero {
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a3d2c 100%);
    padding: var(--space-20) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.destinations-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
    opacity: 0.5;
}

.destinations-hero .container {
    position: relative;
    z-index: 1;
}

.destinations-hero .hero-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-terracotta-light);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-4);
}

.destinations-hero .hero-title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--space-4) 0;
}

.destinations-hero .hero-description {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .destinations-hero {
        padding: var(--space-12) 0;
    }
    
    .destinations-hero .hero-title {
        font-size: var(--text-3xl);
    }
}

/* Page Section */
.destinations-page-section {
    padding: var(--space-16) 0;
    background: var(--color-sand-light);
}

/* Filter Bar */
.destinations-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-sand-dark);
}

.destinations-count {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    margin: 0;
}

/* Destinations Page Grid - 3 columns */
.destinations-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .destinations-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .destinations-page-grid {
        grid-template-columns: 1fr;
    }
}

/* Destination Page Card */
.destination-page-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.destination-page-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.1),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

.destination-page-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Card Image */
.destination-page-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.destination-page-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.destination-page-card:hover .destination-page-card-image img {
    transform: scale(1.08);
}

/* Tagline Badge */
.destination-tagline-badge {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Card Content */
.destination-page-card-content {
    padding: var(--space-5) var(--space-6);
}

.destination-page-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-2) 0;
    transition: color 0.3s ease;
}

.destination-page-card:hover .destination-page-card-title {
    color: var(--color-terracotta);
}

.destination-page-card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.6;
}

/* Best Time */
.destination-best-time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.destination-best-time svg {
    color: var(--color-terracotta);
}

/* CTA Link */
.destination-page-card-cta {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    transition: all 0.3s ease;
}

.destination-page-card:hover .destination-page-card-cta {
    color: var(--color-earth);
    transform: translateX(4px);
}

/* No Destinations State */
.no-destinations {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-xl);
}

.no-destinations-icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
}

.no-destinations h2 {
    margin-bottom: var(--space-3);
}

.no-destinations p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Transfer Card */
.transfer-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: var(--transition-base);
}

.transfer-card:hover {
    border-color: var(--color-terracotta);
    box-shadow: var(--shadow-lg);
}

.transfer-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.transfer-card-icon {
    width: 60px;
    height: 60px;
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.transfer-card-icon img {
    width: 40px;
    height: 40px;
}

.transfer-card-info h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.transfer-card-info p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.transfer-card-details {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.transfer-card-detail {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.transfer-card-detail svg {
    width: 18px;
    height: 18px;
    color: var(--color-gray-400);
}

.transfer-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.transfer-card-price {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
}

.transfer-card-price span {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-gray-500);
}

/* Transfer Cards Mobile Responsive */
@media (max-width: 768px) {
    .transfer-card {
        padding: var(--space-4);
    }
    
    .transfer-card-header {
        flex-direction: row;
        gap: var(--space-3);
    }
    
    .transfer-card-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
    
    .transfer-card-info h4 {
        font-size: var(--text-base);
    }
    
    .transfer-card-details {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .transfer-card-footer {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .transfer-card-price {
        font-size: var(--text-xl);
    }
    
    /* Override grid-column span */
    .transfer-card[style*="grid-column: span 2"],
    .transfer-card[style*="grid-column:span 2"] {
        grid-column: auto !important;
    }
}

@media (max-width: 480px) {
    .transfer-card {
        padding: var(--space-3);
    }
    
    .transfer-card-icon {
        width: 40px;
        height: 40px;
    }
    
    .transfer-card-info h4 {
        font-size: var(--text-sm);
    }
    
    .transfer-card-info p {
        font-size: var(--text-xs);
    }
    
    .transfer-card-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .transfer-card-footer .btn {
        width: 100%;
    }
}

/* ========================================
   GRID LAYOUTS
   ======================================== */

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.section-header.text-left {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
}

.section-eyebrow {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.1) 0%, rgba(212, 168, 90, 0.1) 100%);
    border-radius: 50px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.section-title {
    margin-bottom: var(--space-4);
}

.section-description {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
}

/* ========================================
   FEATURES & BENEFITS
   ======================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-item {
    text-align: center;
    padding: var(--space-8);
    background: var(--color-sand-light);
    border-radius: var(--radius-xl);
    transition: var(--transition-base);
}

.feature-item:hover {
    background: var(--color-sand);
    transform: translateY(-4px);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-terracotta);
}

.feature-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.feature-description {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.6;
}

/* ========================================
   TRUST BADGES
   ======================================== */

.trust-bar {
    display: block;
    background: var(--color-sand-light);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-sand);
    border-bottom: 1px solid var(--color-sand);
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: 100%;
}

/* Pause animation on hover/touch */
.trust-bar:hover .trust-badges,
.trust-bar:active .trust-badges {
    animation-play-state: paused;
}

.trust-bar-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.trust-bar .trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: nowrap;
    padding: var(--space-2) 0;
    width: auto;
    /* No animation on desktop - static display */
    -webkit-animation: none;
    animation: none;
}

/* Hide duplicate badges on desktop (they're only needed for mobile scroll loop) */
.trust-badge-duplicate,
.trust-bar .trust-badge-duplicate,
.trust-bar .trust-badges .trust-badge-duplicate,
section.trust-bar .trust-badge-duplicate {
    display: none !important;
}

/* Mobile/Tablet only (≤1024px): Enable sliding animation */
@media (max-width: 1024px) {
    .trust-bar .trust-badges {
        justify-content: flex-start;
        width: max-content;
        -webkit-animation: trustBadgeSlide 15s linear infinite;
        animation: trustBadgeSlide 15s linear infinite;
    }
    
    /* Show duplicate badges for seamless scrolling loop on mobile/tablet */
    .trust-badge-duplicate,
    .trust-bar .trust-badge-duplicate,
    .trust-bar .trust-badges .trust-badge-duplicate,
    section.trust-bar .trust-badge-duplicate {
        display: flex !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
    }
}

.trust-bar .trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-radius: 0;
}

.trust-bar .trust-badge svg {
    width: 32px;
    height: 32px;
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.trust-bar .trust-badge span {
    display: block !important;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile & Tablet - Auto-scrolling marquee animation */
@media (max-width: 768px) {
    .trust-bar {
        display: block !important;
        padding: var(--space-4) 0;
        overflow: hidden !important;
        position: relative;
        width: 100%;
    }
    
    .trust-bar-container {
        display: block !important;
        padding: 0;
        max-width: 100%;
        width: 100%;
        overflow: hidden !important;
        position: relative;
    }
    
    .trust-bar .trust-badges {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: var(--space-6);
        padding: var(--space-2) 0;
        width: max-content !important;
        min-width: max-content !important;
        will-change: transform;
        -webkit-animation: trustBadgeSlide 12s linear infinite !important;
        animation: trustBadgeSlide 12s linear infinite !important;
        -webkit-animation-play-state: running !important;
        animation-play-state: running !important;
    }
    
    /* Show duplicate badges for seamless loop on mobile only */
    .trust-badge-duplicate,
    .trust-bar .trust-badge-duplicate,
    .trust-bar .trust-badges .trust-badge-duplicate,
    section.trust-bar .trust-badge-duplicate {
        display: flex !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
        opacity: 1 !important;
    }
    
    .trust-bar .trust-badge {
        flex: 0 0 auto !important;
        min-width: auto;
        padding: var(--space-2) var(--space-4);
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-1);
    }
    
    .trust-bar .trust-badge svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
    
    .trust-bar .trust-badge span {
        font-size: 11px;
        white-space: nowrap !important;
        max-width: none !important;
        line-height: 1.3;
        text-align: center;
    }
    
    /* Pause animation on hover/touch */
    .trust-bar:hover .trust-badges,
    .trust-bar:active .trust-badges,
    .trust-bar:focus-within .trust-badges {
        animation-play-state: paused;
    }
}

/* Trust badges scroll animation - slides from left to right */
@-webkit-keyframes trustBadgeSlide {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes trustBadgeSlide {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

/* Reduce motion preference - commented out to ensure animation works
@media (prefers-reduced-motion: reduce) {
    .trust-bar .trust-badges {
        animation: none !important;
    }
    
    .trust-badge-duplicate,
    .trust-bar .trust-badge-duplicate {
        display: none !important;
        visibility: hidden !important;
    }
}
*/

/* ========================================
   TESTIMONIALS
   ======================================== */

.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.testimonial-rating {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.testimonial-rating svg {
    width: 20px;
    height: 20px;
    color: #F59E0B;
    fill: #F59E0B;
}

.testimonial-content {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial-author-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.testimonial-author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-name {
    font-weight: 600;
    color: var(--color-dark);
}

.testimonial-author-location {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding-top: var(--space-20);
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-12);
    padding-bottom: var(--space-16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer-main {
        grid-template-columns: 1fr;
    }
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.footer-logo img {
    height: 40px;
}

.footer-logo span {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.footer-social {
    display: flex;
    gap: var(--space-3);
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.footer-social a:hover {
    background: var(--color-terracotta);
}

.footer-social svg {
    width: 20px;
    height: 20px;
}

.footer-column h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-6);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.footer-contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-bottom {
    padding: var(--space-6) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-copyright {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
    display: flex;
    gap: var(--space-6);
}

.footer-legal a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    transition: var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--color-white);
}

/* ========================================
   FORMS
   ======================================== */

.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--color-dark);
    background: var(--color-white);
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af !important;
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.form-helper {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-2);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-2);
}

/* ========================================
   TOUR SINGLE PAGE
   ======================================== */

.tour-hero {
    position: relative;
    height: 60vh;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--space-12);
}

.tour-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.tour-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

.tour-hero-content {
    color: var(--color-white);
    max-width: 800px;
}

.tour-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    opacity: 0.8;
}

.tour-hero-breadcrumb a:hover {
    text-decoration: underline;
}

.tour-hero-title {
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 4px 40px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .tour-hero-title {
        font-size: var(--text-3xl);
    }
}

.tour-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.tour-hero-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
}

.tour-hero-meta-item svg {
    width: 20px;
    height: 20px;
}

.tour-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-10);
    padding-top: var(--space-8);
}

@media (max-width: 1024px) {
    .tour-content-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        padding-top: var(--space-10);
    }
}

@media (max-width: 768px) {
    .tour-content-wrapper {
        gap: var(--space-6);
        padding-top: var(--space-8);
    }
}

/* Booking Sidebar */
.booking-sidebar {
    position: sticky;
    top: 100px;
}

.booking-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-gray-100);
}

.booking-card-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-gray-100);
}

.booking-card-price-value {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-dark);
}

.booking-card-price-unit {
    color: var(--color-gray-500);
}

.booking-card-price-original {
    text-decoration: line-through;
    color: var(--color-gray-400);
    font-size: var(--text-lg);
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.booking-form .btn {
    width: 100%;
}

.booking-note {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-4);
}

/* ========================================
   SEARCHABLE SELECT COMPONENT
   ======================================== */

.vmt-searchable-select {
    position: relative;
    width: 100%;
    z-index: 100;
}

.vmt-select-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.vmt-select-input {
    width: 100%;
    padding: var(--space-2) var(--space-3) !important;
    padding-right: var(--space-8) !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-xs) !important;
    color: var(--color-dark);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.25s ease;
    height: 42px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vmt-select-input:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.vmt-select-input:focus {
    cursor: text;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
    background-color: var(--color-white);
}

.vmt-select-arrow {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-gray-500);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    pointer-events: auto;
}

.vmt-searchable-select.is-open .vmt-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.vmt-select-arrow:hover {
    color: var(--color-terracotta);
}

.vmt-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 264px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
}

.vmt-searchable-select.is-open .vmt-select-dropdown {
    display: block;
    animation: vmtDropdownFadeIn 0.15s ease-out;
}

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

.vmt-select-option {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.vmt-select-option:hover,
.vmt-select-option.is-highlighted {
    background: var(--color-sand-light);
    color: var(--color-dark);
}

.vmt-select-option.is-selected {
    background: var(--color-terracotta);
    color: var(--color-white);
    font-weight: 600;
}

.vmt-select-option.is-selected:hover,
.vmt-select-option.is-selected.is-highlighted {
    background: var(--color-earth);
    color: var(--color-white);
}

.vmt-select-option[data-value=""] {
    font-style: italic;
    color: var(--color-gray-500);
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-3);
}

.vmt-select-option[data-value=""]:hover,
.vmt-select-option[data-value=""].is-highlighted {
    color: var(--color-dark);
}

.vmt-select-option[data-value=""].is-selected {
    font-style: normal;
    color: var(--color-white);
}

.vmt-select-option.is-hidden {
    display: none !important;
}

.vmt-select-dropdown.is-empty::after {
    content: 'No destinations found';
    display: block;
    padding: var(--space-4);
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.vmt-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.vmt-select-dropdown::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: 3px;
}

.vmt-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 3px;
}

.vmt-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

@media (max-width: 768px) {
    .vmt-select-dropdown {
        max-height: 240px;
    }
    
    .vmt-select-option {
        padding: var(--space-4);
    }
}

.search-form .vmt-searchable-select {
    min-width: 200px;
}

.tour-filters .vmt-searchable-select {
    min-width: 180px;
}

/* Z-INDEX FIX FOR DROPDOWN VISIBILITY */
/* Note: Hero overflow is handled separately to prevent horizontal scroll */

.search-form {
    overflow: visible !important;
    position: relative;
    z-index: 1000;
}

.search-form .search-field {
    overflow: visible !important;
    position: relative;
}

.tour-filters {
    overflow: visible !important;
    position: relative;
    z-index: 1000;
}

.vmt-searchable-select.is-open {
    z-index: 99998;
}

.search-box {
    position: relative;
    z-index: 1000;
    overflow: visible !important;
}

.hero .container {
    overflow: visible !important;
    max-width: 100%;
}

/* Hero content overflow only visible on desktop for dropdowns */
@media (min-width: 769px) {
    .hero-content {
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .hero-content {
        overflow: hidden;
        max-width: 100%;
    }
}

.search-tabs,
.search-tab-content {
    overflow: visible !important;
}

.trust-bar,
.destinations-section,
.region-section,
.section {
    position: relative;
    z-index: 1;
}

/* ========================================
   TRANSFER RESULTS PAGE
   ======================================== */

.page-header-transfers {
    position: relative;
    padding: var(--space-20) 0;
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.page-header-slide.active {
    opacity: 1;
}

.page-header-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(30, 20, 15, 0.7) 0%, rgba(40, 30, 20, 0.55) 50%, rgba(30, 20, 15, 0.7) 100%);
    z-index: 1;
}

.page-header-transfers .container {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.page-header-transfers h1 {
    color: var(--color-white);
    margin-bottom: var(--space-3);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.2;
}

.page-header-transfers p {
    color: var(--color-white) !important;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-weight: 400;
    margin: 0;
}

/* Responsive hero height for transfers page */
@media (max-width: 768px) {
    .page-header-transfers {
        min-height: 400px;
        padding: var(--space-16) 0;
    }
    
    .page-header-transfers h1 {
        font-size: 1.75rem;
    }
    
    .page-header-transfers p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .page-header-transfers {
        min-height: 350px;
        padding: var(--space-12) 0;
    }
    
    .page-header-transfers h1 {
        font-size: 1.5rem;
    }
}

/* Reduced spacing for transfers page sections - Added for improved layout */
.transfer-routes-section,
.transfer-vehicles-section,
section.bg-sand {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.transfer-routes-section .section-header,
.transfer-vehicles-section .section-header,
section.bg-sand .section-header {
    margin-bottom: var(--space-8);
}

/* Transfer Summary Bar */
.transfer-summary-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
    padding: var(--space-4) 0;
    position: sticky;
    top: 80px;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.transfer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.transfer-summary-route {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.transfer-summary-location {
    display: flex;
    flex-direction: column;
}

.transfer-summary-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.transfer-summary-value {
    font-weight: 600;
    color: var(--color-dark);
}

.transfer-summary-arrow {
    color: var(--color-terracotta);
}

.transfer-summary-details {
    display: flex;
    gap: var(--space-6);
}

.transfer-summary-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.transfer-summary-item svg {
    color: var(--color-gray-400);
}

.transfer-summary-edit {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-terracotta);
    font-weight: 500;
}

.transfer-summary-edit:hover {
    text-decoration: underline;
}

/* Route Info Banner */
.transfer-route-info-section {
    background: var(--color-white);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.transfer-route-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.transfer-route-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.transfer-route-stat svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.transfer-route-stat > div {
    display: flex;
    flex-direction: column;
}

.route-stat-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.route-stat-value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
}

.transfer-route-stat-highlight .route-stat-value {
    color: var(--color-terracotta);
}

/* Vehicle Cards Grid - 4 columns */
.transfer-vehicles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

@media (max-width: 1200px) {
    .transfer-vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .transfer-vehicles-grid {
        grid-template-columns: 1fr;
    }
}

/* Vehicle Card */
.transfer-vehicle-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

.transfer-vehicle-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-lg);
}

.transfer-vehicle-card.recommended {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 4px rgba(198, 93, 59, 0.1);
}

.vehicle-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-terracotta);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vehicle-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    background: var(--color-sand-light);
}

.vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.transfer-vehicle-card:hover .vehicle-image img {
    transform: scale(1.05);
}

.vehicle-info {
    flex: 1;
}

.vehicle-name {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.vehicle-model {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.vehicle-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.vehicle-spec {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.vehicle-spec svg {
    color: var(--color-gray-400);
}

.vehicle-travel-time {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.vehicle-travel-time svg {
    color: var(--color-terracotta);
}

.vehicle-features {
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.vehicle-features li {
    padding: var(--space-1) 0;
    padding-left: var(--space-5);
    position: relative;
}

.vehicle-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-terracotta);
    font-weight: 600;
}

.vehicle-booking {
    margin-top: auto;
    text-align: center;
}

.vehicle-price {
    margin-bottom: var(--space-3);
}

.vehicle-price .price-amount {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-dark);
}

.vehicle-price .price-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-right: var(--space-1);
}

.vehicle-price .price-per {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.price-on-request {
    display: block;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-gray-500);
    font-style: italic;
}

.vehicle-booking .btn {
    width: 100%;
}

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

/* Unsuitable Vehicle */
.transfer-vehicle-card.unsuitable {
    opacity: 0.6;
}

.vehicle-unsuitable-notice {
    text-align: center;
    padding: var(--space-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.vehicle-unsuitable-notice span {
    display: block;
    font-weight: 600;
    color: var(--color-gray-600);
}

.vehicle-unsuitable-notice small {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* Quote Section */
.transfer-quote-section .quote-section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.quote-section-content .quote-section-icon {
    flex-shrink: 0;
}

.quote-section-content .quote-section-text {
    flex: 1;
    min-width: 250px;
}

.quote-section-content .quote-section-text h3 {
    margin-bottom: var(--space-2);
}

.quote-section-content .quote-section-text p {
    color: var(--color-gray-700);
    margin: 0;
}

.quote-section-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .transfer-quote-section .quote-section-content {
        flex-direction: column;
        text-align: center;
    }
    
    .quote-section-actions {
        justify-content: center;
    }
}

/* WhatsApp Button */
.btn-whatsapp {
    background: #25D366;
    color: white;
    border: none;
}

.btn-whatsapp:hover {
    background: #1da851;
    color: white;
}

.btn-whatsapp svg {
    flex-shrink: 0;
}

/* Quote Notice */
.transfer-quote-notice {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border: 2px solid var(--color-sand-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-top: var(--space-8);
}

.quote-notice-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-notice-content {
    flex: 1;
}

.quote-notice-content h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--color-dark);
}

.quote-notice-content p {
    color: var(--color-gray-700);
    margin: 0;
    font-size: var(--text-sm);
}

.quote-notice-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .transfer-quote-notice {
        flex-direction: column;
        text-align: center;
    }
    
    .quote-notice-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .quote-notice-actions .btn {
        width: 100%;
    }
}

/* Help Bar */
.transfer-help-bar {
    background: var(--color-gray-100);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-gray-200);
}

.help-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.help-bar-text {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-700);
    font-weight: 500;
}

.help-bar-text svg {
    color: var(--color-terracotta);
}

.help-bar-contacts {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.help-bar-contact {
    color: var(--color-gray-700);
    font-size: var(--text-sm);
}

.help-bar-contact:hover {
    color: var(--color-terracotta);
}

.help-bar-contact strong {
    color: var(--color-dark);
}

.help-bar-divider {
    color: var(--color-gray-300);
}

@media (max-width: 768px) {
    .help-bar-content {
        flex-direction: column;
        text-align: center;
    }
    
    .help-bar-contacts {
        justify-content: center;
    }
    
    .help-bar-divider {
        display: none;
    }
    
    .transfer-summary {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .transfer-summary-route {
        flex-wrap: wrap;
    }
    
    .transfer-summary-details {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    
    .transfer-route-info {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
}

/* Transfer Search Box */
.transfer-search-section {
    background: var(--color-sand-light);
    padding: var(--space-16) 0;
}

.transfer-search-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
}

.transfer-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: var(--space-4);
    align-items: end;
}

@media (max-width: 1024px) {
    .transfer-search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .transfer-search-grid button {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .transfer-search-grid {
        grid-template-columns: 1fr;
    }
    
    .transfer-search-grid button {
        grid-column: span 1;
    }
}

/* Booking Modal */
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.booking-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.booking-modal-content {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-8);
    box-shadow: var(--shadow-2xl);
}

.booking-modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-400);
    padding: var(--space-2);
    transition: var(--transition-fast);
}

.booking-modal-close:hover {
    color: var(--color-dark);
}

.booking-modal-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.booking-modal-header h3 {
    margin-bottom: var(--space-2);
}

.booking-modal-header p {
    color: var(--color-gray-600);
}

.booking-modal-summary {
    background: var(--color-sand-light);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.booking-summary-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.booking-summary-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (max-width: 480px) {
    .booking-summary-details {
        grid-template-columns: 1fr;
    }
}

.booking-summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2);
    background: var(--color-white);
    border-radius: var(--radius-sm);
}

.summary-label {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

.summary-value {
    font-weight: 600;
}

.booking-summary-total {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-terracotta);
    color: white;
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

.booking-summary-total .summary-label {
    color: rgba(255, 255, 255, 0.9);
}

.booking-summary-total .summary-value {
    font-size: var(--text-xl);
    font-weight: 700;
}

@media (max-width: 480px) {
    .booking-summary-total {
        grid-column: span 1;
    }
}

.booking-modal-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .booking-modal-form .form-row {
        grid-template-columns: 1fr;
    }
}

.booking-modal-form .form-group {
    margin-bottom: var(--space-4);
}

.booking-modal-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--color-gray-700);
}

.booking-modal-form input,
.booking-modal-form textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: var(--transition-fast);
}

.booking-modal-form input:focus,
.booking-modal-form textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.form-agreement {
    margin-bottom: var(--space-6);
}

.form-agreement label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

.form-agreement input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.form-agreement a {
    color: var(--color-terracotta);
}

.btn-block {
    width: 100%;
}

/* ========================================
   TRANSFER ROUTE MAP
   ======================================== */

.transfer-map-section {
    padding: var(--space-4) 0;
    background: var(--color-white);
}

.transfer-map-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
}

/* Mobile Toggle Button */
.map-toggle {
    display: none;
    width: 100%;
    padding: var(--space-4);
    background: var(--color-sand-light);
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-dark);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: var(--transition-fast);
}

.map-toggle:hover {
    background: var(--color-sand);
}

.map-toggle svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.map-toggle-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.map-toggle[aria-expanded="true"] .map-toggle-arrow {
    transform: rotate(180deg);
}

/* Map Container */
.transfer-map-container {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.transfer-route-map {
    width: 100%;
    height: 280px;
    background: var(--color-sand-light);
}

/* Map Legend */
.map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.legend-marker {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

.legend-marker.origin {
    background: var(--color-terracotta);
}

.legend-marker.destination {
    background: var(--color-dark);
}

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

/* Custom Leaflet Markers */
.custom-map-marker {
    background: none;
    border: none;
}

.custom-map-marker .marker-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.origin-marker .marker-inner {
    color: var(--color-terracotta);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.dest-marker .marker-inner {
    color: var(--color-dark);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Leaflet Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
    margin: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* Mobile: Collapsible */
@media (max-width: 768px) {
    .map-toggle {
        display: flex;
    }
    
    .transfer-map-container {
        max-height: 0;
        opacity: 0;
    }
    
    .transfer-map-container.is-visible {
        max-height: 400px;
        opacity: 1;
    }
    
    .transfer-route-map {
        height: 250px;
    }
    
    .map-legend {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

/* Desktop: Always visible */
@media (min-width: 769px) {
    .transfer-map-container {
        max-height: 400px;
        opacity: 1;
    }
    
    .map-toggle {
        display: none !important;
    }
}

/* ========================================
   TRANSFER SEARCH SECTION
   ======================================== */

.transfer-search-section {
    background: var(--color-sand-light);
    padding: var(--space-16) 0;
}

.transfer-search-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
}

.transfer-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: var(--space-4);
    align-items: end;
}

@media (max-width: 1024px) {
    .transfer-search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .transfer-search-grid {
        grid-template-columns: 1fr;
    }
}

.transfer-results {
    margin-top: var(--space-12);
}

.transfer-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.transfer-results-count {
    font-size: var(--text-lg);
    font-weight: 600;
}

.transfer-results-sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.transfer-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ========================================
   CTA SECTIONS
   ======================================== */

.cta-section {
    background: var(--color-terracotta);
    color: var(--color-white);
    text-align: center;
    padding: var(--space-20) 0;
}

.cta-section h2 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.cta-section p {
    font-size: var(--text-lg);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.cta-section .btn {
    background: var(--color-white);
    color: var(--color-terracotta);
}

.cta-section .btn:hover {
    background: var(--color-sand);
}

/* Pattern CTA */
.cta-pattern {
    position: relative;
    background: var(--color-dark);
    overflow: hidden;
}

.cta-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

/* ========================================
   ANIMATIONS & EFFECTS
   ======================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease forwards;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease forwards;
}

.animate-pulse {
    animation: pulse 2s infinite ease-in-out;
}

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; opacity: 0; }
.delay-200 { animation-delay: 0.2s; opacity: 0; }
.delay-300 { animation-delay: 0.3s; opacity: 0; }
.delay-400 { animation-delay: 0.4s; opacity: 0; }
.delay-500 { animation-delay: 0.5s; opacity: 0; }
.delay-600 { animation-delay: 0.6s; opacity: 0; }

/* Hover Effects */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* Shimmer Loading Effect */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-sand-light) 25%,
        var(--color-sand) 50%,
        var(--color-sand-light) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Reveal on Scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Children Animation */
.stagger-children > * {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }

/* ========================================
   ABOUT US PAGE
   ======================================== */

/* About Hero */
/* ========================================
   ABOUT PAGE V2 - PREMIUM REDESIGN
   ======================================== */

/* Hero Section V2 - Split Photo Background */
.about-hero-v2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.about-hero-v2 .hero-photo-collage {
    position: absolute;
    inset: 0;
    display: flex;
}

.about-hero-v2 .hero-photo {
    flex: 1;
    background-size: cover;
    filter: saturate(0.9) brightness(0.85) contrast(1.02);
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* =============================================
   HEAD ALIGNMENT - Precise focal point control
   ============================================= */
.about-hero-v2 .hero-photo-left {
    /* Khalid - positioned to show face clearly */
    background-position: center 20%;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.about-hero-v2 .hero-photo-right {
    /* Bob - show from top of image to align head with Khalid */
    background-position: center top;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -18%;
}

.about-hero-v2 .hero-photo-blend {
    position: absolute;
    left: 32%;
    top: 0;
    bottom: 0;
    width: 36%;
    background: linear-gradient(to right, 
        rgba(26, 46, 28, 0.85) 0%, 
        rgba(26, 46, 28, 0.5) 25%,
        rgba(60, 50, 40, 0.3) 50%,
        rgba(139, 107, 74, 0.5) 75%,
        rgba(139, 107, 74, 0.85) 100%
    );
    z-index: 0;
}

.about-hero-v2 .hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: 
        /* Strong gradient at top for text readability */
        linear-gradient(to bottom, 
            rgba(15, 25, 18, 0.85) 0%, 
            rgba(20, 35, 25, 0.6) 25%,
            rgba(40, 45, 35, 0.25) 50%,
            rgba(60, 50, 40, 0.2) 70%,
            rgba(80, 60, 45, 0.5) 100%
        ),
        /* Center darkening for text contrast */
        radial-gradient(ellipse at 50% 25%, rgba(10, 20, 15, 0.5) 0%, transparent 60%);
    z-index: 1;
}

.about-hero-v2 .hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: calc(80px + var(--space-12)) 0 var(--space-32);
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: calc(80px + var(--space-16));
}

.about-hero-v2 .hero-text-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    /* Keep text in upper portion, away from faces */
    padding-top: var(--space-8);
}

.about-hero-v2 .hero-text-content.animated {
    opacity: 1;
    transform: translateY(0);
}

.about-hero-v2 .hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    color: #faf6f0;
    line-height: 1.18;
    margin-bottom: var(--space-5);
    text-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 2px 15px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
}

.about-hero-v2 .hero-headline span {
    background: linear-gradient(135deg, #f5d89a 0%, #e8c170 50%, #d4a85a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-top: var(--space-2);
    filter: drop-shadow(0 2px 10px rgba(212, 168, 90, 0.3));
}

.about-hero-v2 .hero-description {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: rgba(250, 246, 240, 0.95);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 0 2px 25px rgba(0,0,0,0.5);
    font-weight: 400;
}

/* Hero Scroll Hint - positioned lower */
.about-hero-v2 .hero-scroll-hint {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(250, 246, 240, 0.7);
    font-size: var(--text-sm);
    animation: bounce-subtle 2s infinite;
}

.about-hero-v2 .hero-scroll-hint svg {
    stroke: rgba(250, 246, 240, 0.7);
}

@keyframes bounce-subtle {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ========================================
   FOUNDERS STORY SECTION
   ======================================== */
.founders-story-section {
    padding: var(--space-24) 0;
    background: var(--color-white);
}

.founders-story-section .section-intro {
    text-align: center;
    margin-bottom: var(--space-20);
}

.founders-story-section .section-tag {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #d4a574 100%);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.founders-story-section .section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    color: var(--color-dark);
    margin: 0;
}

/* Founder Row */
.founder-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    margin-bottom: var(--space-20);
}

.founder-row-reverse {
    direction: rtl;
}

.founder-row-reverse > * {
    direction: ltr;
}

/* Founder Text */
.founder-text {
    padding: var(--space-6) 0;
}

.founder-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-4);
    line-height: 1.2;
}

.founder-role-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(196, 149, 106, 0.15) 0%, rgba(212, 165, 116, 0.15) 100%);
    color: var(--color-terracotta);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(196, 149, 106, 0.2);
}

.founder-location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.founder-location svg {
    stroke: var(--color-terracotta);
    flex-shrink: 0;
}

.founder-bio-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.85;
    margin: 0 0 var(--space-5);
}

.founder-bio-text:last-of-type {
    margin-bottom: 0;
}

/* Founder Image Card - Centered */
.founder-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.founder-image-card {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.12),
        0 15px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
}

.founder-image-card.founder-image-centered {
    max-width: 420px;
    width: 100%;
}

.founder-image-card:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow: 
        0 40px 90px rgba(0, 0, 0, 0.18),
        0 20px 40px rgba(0, 0, 0, 0.12);
}

.founder-image-card img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: transform 0.6s ease;
}

.founder-image-card:hover img {
    transform: scale(1.03);
}

/* Secondary Image - Accent */
.founder-image-secondary {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--color-white);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease;
    z-index: 2;
}

.founder-image-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.founder-image-wrapper:hover .founder-image-secondary {
    transform: scale(1.1) rotate(5deg);
}

/* Origin Story - How They Met */
.founders-origin-story {
    background: linear-gradient(145deg, #faf9f6 0%, #f3ede5 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-16);
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: var(--space-8);
    border: 1px solid rgba(196, 149, 106, 0.1);
}

.origin-story-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #d4a574 100%);
    border-radius: 50%;
    margin-bottom: var(--space-6);
    box-shadow: 0 18px 45px rgba(196, 149, 106, 0.4);
}

.origin-story-badge span {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-white);
}

.origin-story-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-6);
}

.origin-story-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.85;
    max-width: 720px;
    margin: 0 auto var(--space-5);
}

.origin-story-text:last-of-type {
    margin-bottom: var(--space-8);
}

/* Founder Circles in Origin Story */
.origin-story-founders {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.origin-founder-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 4px solid var(--color-white);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.origin-founder-circle:first-child {
    transform: translateX(15px);
}

.origin-founder-circle:last-child {
    transform: translateX(-15px);
}

.founders-origin-story:hover .origin-founder-circle:first-child {
    transform: translateX(5px) scale(1.05);
}

.founders-origin-story:hover .origin-founder-circle:last-child {
    transform: translateX(-5px) scale(1.05);
}

/* Scroll Animations */
.reveal-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-fade.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-slide-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-slide-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================
   RESPONSIVE - ABOUT PAGE
   ======================================== */
@media (max-width: 1024px) {
    .founder-row {
        gap: var(--space-10);
    }
    
    .founder-image-card img {
        height: 450px;
    }
}

@media (max-width: 900px) {
    .founder-row {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    
    .founder-row-reverse {
        direction: ltr;
    }
    
    .founder-image-card.founder-image-centered {
        max-width: 380px;
    }
    
    .founder-image-card img {
        height: 420px;
    }
    
    .founder-text {
        order: 2;
        text-align: center;
    }
    
    .founder-location {
        justify-content: center;
    }
    
    .founder-image-wrapper {
        order: 1;
    }
    
    .founder-image-secondary {
        bottom: -15px;
        right: 50%;
        transform: translateX(80px);
    }
    
    .founder-image-wrapper:hover .founder-image-secondary {
        transform: translateX(80px) scale(1.1) rotate(5deg);
    }
    
    .about-hero-v2 .hero-photo-left {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .about-hero-v2 .hero-photo-right {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .about-hero-v2 {
        align-items: flex-start;
    }
    
    .about-hero-v2 .hero-content-wrapper {
        padding: calc(80px + var(--space-10)) var(--space-4) var(--space-20);
        min-height: auto;
    }
    
    .about-hero-v2 .hero-text-content {
        padding-top: var(--space-4);
    }
    
    .about-hero-v2 .hero-photo-left {
        background-position: center 20%;
    }
    
    .about-hero-v2 .hero-photo-right {
        background-position: center top;
    }
}

@media (max-width: 576px) {
    .about-hero-v2 {
        min-height: 100vh;
    }
    
    .about-hero-v2 .hero-photo-collage {
        flex-direction: column;
    }
    
    .about-hero-v2 .hero-photo {
        clip-path: none !important;
        margin-left: 0 !important;
    }
    
    .about-hero-v2 .hero-photo-left {
        background-position: center 20%;
    }
    
    .about-hero-v2 .hero-photo-right {
        background-position: center top;
    }
    
    .about-hero-v2 .hero-photo-blend {
        display: none;
    }
    
    .about-hero-v2 .hero-gradient-overlay {
        background: 
            linear-gradient(to bottom, 
                rgba(15, 25, 18, 0.9) 0%, 
                rgba(20, 35, 25, 0.7) 30%,
                rgba(40, 45, 35, 0.3) 60%,
                rgba(60, 50, 40, 0.4) 100%
            );
    }
    
    .about-hero-v2 .hero-content-wrapper {
        padding: calc(70px + var(--space-8)) var(--space-4) var(--space-16);
    }
    
    .about-hero-v2 .hero-scroll-hint {
        display: none;
    }
    
    .founders-story-section {
        padding: var(--space-16) 0;
    }
    
    .founders-story-section .section-intro {
        margin-bottom: var(--space-12);
    }
    
    .founder-row {
        margin-bottom: var(--space-14);
        gap: var(--space-8);
    }
    
    .founder-image-card.founder-image-centered {
        max-width: 100%;
    }
    
    .founder-image-card img {
        height: 360px;
    }
    
    .founder-image-secondary {
        width: 85px;
        height: 85px;
        border-width: 4px;
        bottom: -12px;
        right: 50%;
        transform: translateX(65px);
    }
    
    .founder-text {
        padding: var(--space-4) 0;
    }
    
    .founder-bio-text {
        font-size: var(--text-base);
    }
    
    .founders-origin-story {
        padding: var(--space-10) var(--space-6);
        margin-top: var(--space-4);
    }
    
    .origin-story-badge {
        width: 75px;
        height: 75px;
    }
    
    .origin-story-badge span {
        font-size: var(--text-xl);
    }
    
    .origin-story-text {
        font-size: var(--text-base);
    }
    
    .origin-founder-circle {
        width: 65px;
        height: 65px;
        border-width: 3px;
    }
    
    .origin-founder-circle:first-child {
        transform: translateX(10px);
    }
    
    .origin-founder-circle:last-child {
        transform: translateX(-10px);
    }
}

/* Old about-hero (kept for compatibility) */
.about-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a3d2c 50%, var(--color-earth) 100%);
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
}

/* Stats */
.stat-number {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-top: var(--space-1);
}

/* Value Cards */
.about-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .about-values {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .about-values {
        grid-template-columns: 1fr;
    }
}

.value-card {
    background: var(--color-white);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.value-card .icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

.value-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

/* Team Cards */
.team-card {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.team-card .avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 3px solid var(--color-terracotta);
}

.team-card .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
}

.team-card .role {
    font-size: var(--text-sm);
    color: var(--color-terracotta);
    font-weight: 600;
}

/* About page responsive grid fix */
@media (max-width: 968px) {
    .about-hero + .section .container > div[style*="grid-template-columns: 1fr 1fr"],
    .about-hero-premium + .section .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-8) !important;
    }
    
    .about-hero + .section .container > div[style*="grid-template-columns: 1fr 1fr"] > div:last-child,
    .about-hero-premium + .section .container > div[style*="grid-template-columns: 1fr 1fr"] > div:last-child {
        order: -1;
    }
}

/* ========================================
   UTILITIES
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-terracotta); }
.text-muted { color: var(--color-gray-500); }

.bg-sand { background-color: var(--color-sand-light); }
.bg-white { background-color: var(--color-white); }
.bg-dark { background-color: var(--color-dark); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   PAGE TEMPLATES
   ======================================== */

.page-header {
    padding: calc(80px + var(--space-16)) 0 var(--space-16);
    background: var(--color-sand-light);
    text-align: center;
}

.page-header h1 {
    margin-bottom: var(--space-4);
}

.page-header p {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    max-width: 600px;
    margin: 0 auto;
}

.page-content {
    padding: var(--space-16) 0;
}

/* WordPress Core Styles */
.wp-block-image img {
    border-radius: var(--radius-lg);
}

.alignwide {
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
    max-width: none;
}

/* ========================================
   B2B PARTNERS PAGE - Premium Design
   ======================================== */

/* Hero Section */
.b2b-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0f1410 0%, #1a2a1c 50%, #2d3b2e 100%);
}

.b2b-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.b2b-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(212, 168, 90, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(196, 107, 65, 0.06) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
    animation: patternShift 30s ease-in-out infinite;
}

@keyframes patternShift {
    0%, 100% { background-position: 0 0, 100% 100%, 0 0; }
    50% { background-position: 50% 50%, 50% 50%, 30px 30px; }
}

.b2b-hero-gradient {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, transparent 0%, rgba(15, 20, 16, 0.3) 100%),
        radial-gradient(ellipse at 30% 0%, rgba(212, 168, 90, 0.1) 0%, transparent 50%);
}

.b2b-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: calc(100px + var(--space-12)) 0 var(--space-16);
}

.b2b-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.b2b-hero-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, rgba(212, 168, 90, 0.2) 0%, rgba(196, 107, 65, 0.2) 100%);
    border: 1px solid rgba(212, 168, 90, 0.3);
    border-radius: 50px;
    color: #d4a85a;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}

.b2b-hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 700;
    color: #faf6f0;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}

.text-gradient {
    background: linear-gradient(135deg, #f5d89a 0%, #e8c170 50%, #d4a85a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-accent {
    color: var(--color-terracotta);
}

.b2b-hero-description {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: rgba(250, 246, 240, 0.8);
    line-height: 1.7;
    margin-bottom: var(--space-8);
    max-width: 540px;
}

.b2b-hero-cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.btn-glow {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-glow svg {
    transition: transform 0.3s ease;
}

.btn-glow:hover svg {
    transform: translateX(3px);
}

.btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #d4a85a, #c46b41, #d4a85a);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(8px);
}

.btn-glow:hover::before {
    opacity: 0.6;
}

.btn-glow:hover {
    filter: brightness(1.1);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* B2B Button Arrow Animation */
.b2b-page .btn svg,
.b2b-page .btn-primary svg {
    transition: transform 0.3s ease;
}

.b2b-page .btn:hover svg,
.b2b-page .btn-primary:hover svg {
    transform: translateX(3px);
}

/* Hero Stats */
.b2b-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px);
}

.b2b-stat-card.stat-animated {
    opacity: 1;
    transform: translateY(0);
}

.b2b-stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 168, 90, 0.4);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.b2b-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, rgba(212, 168, 90, 0.15) 0%, rgba(196, 107, 65, 0.15) 100%);
    border-radius: var(--radius-lg);
    color: #d4a85a;
}

.b2b-stat-number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-1);
}

.b2b-stat-label {
    font-size: var(--text-sm);
    color: rgba(250, 246, 240, 0.6);
}

/* Hero Scroll Indicator */
.b2b-hero-scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: rgba(250, 246, 240, 0.5);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(212, 168, 90, 0.6), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.6); opacity: 0.5; }
}

/* Hero Animations */
.b2b-hero .animate-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.b2b-hero .animate-fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

.b2b-hero .delay-100 { transition-delay: 0.1s; }
.b2b-hero .delay-200 { transition-delay: 0.2s; }
.b2b-hero .delay-300 { transition-delay: 0.3s; }
.b2b-hero .delay-400 { transition-delay: 0.4s; }

/* Section Styles */
.b2b-section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.section-eyebrow {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.1) 0%, rgba(212, 168, 90, 0.1) 100%);
    border-radius: 50px;
    color: var(--color-terracotta);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.section-eyebrow.light {
    background: rgba(255, 255, 255, 0.1);
    color: #d4a85a;
}

.section-title-large {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Partners Section */
.b2b-partners-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, #faf8f5 0%, #fff 100%);
}

.b2b-partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.b2b-partner-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 2px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.b2b-partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-terracotta), #d4a85a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.b2b-partner-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    border-color: rgba(196, 107, 65, 0.3);
}

.b2b-partner-card:hover::before {
    transform: scaleX(1);
}

.partner-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.08) 0%, rgba(212, 168, 90, 0.08) 100%);
    border-radius: var(--radius-lg);
    color: var(--color-terracotta);
    margin-bottom: var(--space-5);
}

.partner-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.partner-card-text {
    color: var(--color-gray-600);
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.partner-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.partner-card-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.partner-card-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-terracotta);
    border-radius: 50%;
}

/* Why Section */
.b2b-why-section {
    position: relative;
    padding: var(--space-24) 0;
    background: #1a2a1c;
    overflow: hidden;
}

.b2b-why-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 0% 50%, rgba(212, 168, 90, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(196, 107, 65, 0.06) 0%, transparent 50%);
}

.b2b-why-section .section-title-large {
    color: white;
}

.b2b-why-section .section-subtitle {
    color: rgba(250, 246, 240, 0.7);
}

.b2b-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.b2b-why-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.b2b-why-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 168, 90, 0.4);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.why-card-number {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(212, 168, 90, 0.3) 0%, rgba(196, 107, 65, 0.3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.why-card-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-3);
}

.why-card-content p {
    color: rgba(250, 246, 240, 0.7);
    font-size: var(--text-base);
    line-height: 1.6;
}

/* Services Section */
.b2b-services-section {
    padding: var(--space-24) 0;
    background: #fff;
}

.b2b-services-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.b2b-service-item {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}

.service-item-visual {
    position: absolute;
    inset: 0;
}

.service-item-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 20, 16, 0.9) 100%);
}

.service-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.b2b-service-item:hover .service-item-visual img {
    transform: scale(1.08);
}

.b2b-service-item:hover .service-item-content {
    transform: translateY(0);
}

.service-item-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-2);
}

.service-item-content p {
    color: rgba(250, 246, 240, 0.8);
    font-size: var(--text-sm);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.1s;
}

.b2b-service-item:hover .service-item-content p {
    opacity: 1;
    transform: translateY(0);
}

/* Service Item Enhanced Hover */
.b2b-service-item {
    border: 2px solid transparent;
    transition: border-color 0.4s ease, transform 0.4s ease;
}

.b2b-service-item:hover {
    border-color: rgba(196, 107, 65, 0.4);
    transform: scale(1.02);
}

/* ============================================
   TRUSTED BY SECTION - Premium Infinite Scroll
   ============================================ */
.b2b-trusted-section {
    position: relative;
    padding: var(--space-10) 0 var(--space-12);
    overflow: hidden;
    background: linear-gradient(180deg, #fefdfb 0%, #f8f6f3 50%, #fefdfb 100%);
}

.trusted-section-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 168, 90, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(196, 107, 65, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(196, 107, 65, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.b2b-trusted-header {
    text-align: center;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

.trusted-label {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-gray-600);
    letter-spacing: 0.02em;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Marquee Wrapper with Fade Edges */
.trusted-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--space-4) 0;
}

.trusted-marquee-wrapper::before,
.trusted-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.trusted-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #f8f6f3 0%, transparent 100%);
}

.trusted-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, #f8f6f3 0%, transparent 100%);
}

/* Marquee Animation Container */
.trusted-marquee {
    display: flex;
    width: max-content;
    animation: marquee-scroll 50s linear infinite;
}

.trusted-marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.trusted-marquee-content {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: 0 var(--space-6);
}

/* Logo Item Styling */
.trusted-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.trusted-logo-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-4px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: rgba(196, 107, 65, 0.15);
}

/* Logo Brand Text */
.logo-brand {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
    transition: color 0.3s ease;
}

.logo-brand svg {
    height: 40px;
    width: auto;
    min-width: 80px;
}

.trusted-logo-item:hover .logo-brand {
    color: var(--color-gray-800);
}

.logo-brand.logo-small-text svg {
    min-width: 140px;
}

/* Badge Items (Ministry of Tourism & Banque Populaire) */
.trusted-badge-item {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(196, 107, 65, 0.12);
}

.trusted-badge-item:hover {
    border-color: rgba(196, 107, 65, 0.25);
}

.logo-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-600);
    transition: color 0.3s ease;
}

.logo-badge .badge-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-terracotta);
    opacity: 0.85;
    transition: all 0.3s ease;
}

.trusted-badge-item:hover .badge-icon {
    opacity: 1;
    transform: scale(1.1);
}

.logo-badge span {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

.trusted-badge-item:hover .logo-badge {
    color: var(--color-gray-800);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .trusted-marquee-wrapper::before,
    .trusted-marquee-wrapper::after {
        width: 80px;
    }
    
    .trusted-marquee-content {
        gap: var(--space-8);
    }
}

@media (max-width: 768px) {
    .b2b-trusted-section {
        padding: var(--space-8) 0 var(--space-10);
    }
    
    .b2b-trusted-header {
        margin-bottom: var(--space-4);
    }
    
    .trusted-label {
        font-size: var(--text-sm);
        padding: 0 var(--space-4);
    }
    
    .trusted-marquee-wrapper {
        padding: var(--space-3) 0;
    }
    
    .trusted-marquee-wrapper::before,
    .trusted-marquee-wrapper::after {
        width: 40px;
    }
    
    .trusted-marquee {
        animation-duration: 35s;
    }
    
    .trusted-marquee-content {
        gap: var(--space-6);
    }
    
    .trusted-logo-item {
        padding: var(--space-3) var(--space-4);
    }
    
    .logo-brand svg {
        height: 36px;
        min-width: 70px;
    }
    
    .logo-brand.logo-small-text svg {
        min-width: 130px;
    }
    
    .logo-badge .badge-icon {
        width: 22px;
        height: 22px;
    }
    
    .logo-badge span {
        font-size: 10px;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .trusted-marquee {
        animation-duration: 30s;
    }
    
    .trusted-logo-item {
        padding: var(--space-2) var(--space-3);
    }
    
    .logo-brand svg {
        height: 32px;
        min-width: 60px;
    }
    
    .logo-badge span {
        font-size: 9px;
    }
    
    .logo-badge .badge-icon {
        width: 18px;
        height: 18px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .trusted-marquee {
        animation: none;
    }
    
    .trusted-marquee-content {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .trusted-marquee-content:nth-child(2) {
        display: none;
    }
}

/* Process Section */
.b2b-process-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, #faf8f5 0%, #fff 100%);
}

.b2b-process-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: var(--space-8);
}

.process-line {
    position: absolute;
    top: calc(var(--space-8) + 28px);
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-terracotta), #d4a85a, var(--color-terracotta));
    opacity: 0.3;
}

/* ========================================
   LUXURY TIMELINE ANIMATION
   Premium Sequential Reveal Effect
   ======================================== */

/* Timeline Container */
.luxury-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: var(--space-8);
}

/* Golden Thread Connector */
.golden-thread {
    position: absolute;
    top: calc(var(--space-8) + 34px);
    left: 12.5%;
    right: 12.5%;
    height: 4px;
    pointer-events: none;
    z-index: 0;
}

.thread-svg {
    width: 100%;
    height: 4px;
    overflow: visible;
}

.thread-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-timeline.activated .thread-path {
    stroke-dashoffset: 0;
    transition-delay: 0.3s;
}

/* Traveling Dot */
.thread-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #d4a85a, #c46b41);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    box-shadow: 0 0 15px rgba(212, 168, 90, 0.6);
}

.luxury-timeline.activated .thread-dot {
    opacity: 1;
    animation: travelDot 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes travelDot {
    0% { left: 0%; opacity: 1; }
    95% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Luxury Step */
.luxury-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Step Glow Effect */
.step-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(212, 168, 90, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.luxury-step.active .step-glow {
    opacity: 1;
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

/* Step Marker */
.step-marker {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-5);
}

/* Marker Ring - Animated border */
.marker-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #e8e0d8;
    opacity: 0;
    transform: scale(0.6) rotate(-90deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.luxury-step.active .marker-ring {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    border-color: #c46b41;
    box-shadow: 0 0 0 4px rgba(196, 107, 65, 0.1);
}

/* Ring animation delays */
.luxury-step[data-step="1"] .marker-ring { transition-delay: 0s; }
.luxury-step[data-step="2"] .marker-ring { transition-delay: 0.6s; }
.luxury-step[data-step="3"] .marker-ring { transition-delay: 1.2s; }
.luxury-step[data-step="4"] .marker-ring { transition-delay: 1.8s; }

/* Marker Inner - Number circle */
.marker-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    width: 56px;
    height: 56px;
    background: linear-gradient(145deg, #c46b41 0%, #b85a35 50%, #d4a85a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
        0 8px 25px rgba(196, 107, 65, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.luxury-step.active .marker-inner {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
}

/* Inner animation delays */
.luxury-step[data-step="1"] .marker-inner { transition-delay: 0.15s; }
.luxury-step[data-step="2"] .marker-inner { transition-delay: 0.75s; }
.luxury-step[data-step="3"] .marker-inner { transition-delay: 1.35s; }
.luxury-step[data-step="4"] .marker-inner { transition-delay: 1.95s; }

/* Marker Number */
.marker-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Step Content */
.step-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-step.active .step-content {
    opacity: 1;
    transform: translateY(0);
}

/* Content animation delays */
.luxury-step[data-step="1"] .step-content { transition-delay: 0.3s; }
.luxury-step[data-step="2"] .step-content { transition-delay: 0.9s; }
.luxury-step[data-step="3"] .step-content { transition-delay: 1.5s; }
.luxury-step[data-step="4"] .step-content { transition-delay: 2.1s; }

.step-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    position: relative;
}

.step-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #c46b41, #d4a85a);
    border-radius: 1px;
    transition: transform 0.4s ease 0.2s;
}

.luxury-step.active .step-title::after {
    transform: translateX(-50%) scaleX(1);
}

.step-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    max-width: 180px;
    margin: 0 auto;
}

/* Hover Effects */
.luxury-step:hover .marker-inner {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 
        0 12px 35px rgba(196, 107, 65, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.luxury-step:hover .marker-ring {
    transform: scale(1.05);
    border-color: #d4a85a;
}

.luxury-step:hover .step-glow {
    opacity: 1;
}

/* ========================================
   WANDERING BACKGROUND AIRPLANE
   Subtle scroll-based animation
   ======================================== */
.wander-airplane {
    position: fixed;
    width: 24px;
    height: 24px;
    color: rgba(196, 107, 65, 0.08);
    pointer-events: none;
    z-index: 0;
    top: 20%;
    right: 5%;
    transform: rotate(-45deg);
    transition: transform 0.15s ease-out, 
                top 0.15s ease-out, 
                right 0.15s ease-out,
                opacity 0.4s ease;
    will-change: transform, top, right;
    opacity: 0;
}

.wander-airplane.visible {
    opacity: 1;
}

.wander-airplane svg {
    width: 100%;
    height: 100%;
}

/* Responsive - Luxury Timeline */
@media (max-width: 1024px) {
    .golden-thread {
        left: 10%;
        right: 10%;
    }
    
    .step-marker {
        width: 64px;
        height: 64px;
    }
    
    .marker-inner {
        width: 48px;
        height: 48px;
    }
    
    .marker-number {
        font-size: var(--text-xl);
    }
    
    .step-glow {
        width: 100px;
        height: 100px;
    }
    
    .wander-airplane {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .golden-thread {
        display: none;
    }
    
    .luxury-timeline {
        flex-direction: column;
        gap: var(--space-10);
        padding-top: var(--space-4);
    }
    
    .luxury-step {
        flex-direction: row;
        text-align: left;
        gap: var(--space-5);
    }
    
    .step-marker {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }
    
    .marker-inner {
        width: 44px;
        height: 44px;
    }
    
    .marker-number {
        font-size: var(--text-lg);
    }
    
    .step-glow {
        display: none;
    }
    
    .step-content {
        text-align: left;
    }
    
    .step-title::after {
        left: 0;
        transform: translateX(0) scaleX(0);
    }
    
    .luxury-step.active .step-title::after {
        transform: translateX(0) scaleX(1);
    }
    
    .step-desc {
        max-width: none;
        margin: 0;
    }
    
    .wander-airplane {
        display: none;
    }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .luxury-step,
    .marker-ring,
    .marker-inner,
    .step-content,
    .step-glow,
    .thread-path,
    .thread-dot {
        transition: none !important;
        animation: none !important;
    }
    
    .luxury-step .marker-ring {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        border-color: #c46b41;
    }
    
    .luxury-step .marker-inner {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    
    .luxury-step .step-content {
        opacity: 1;
        transform: translateY(0);
    }
    
    .luxury-step .step-glow {
        opacity: 0.5;
    }
    
    .thread-path {
        stroke-dashoffset: 0;
    }
    
    .thread-dot {
        display: none;
    }
    
    .wander-airplane {
        display: none;
    }
}

.b2b-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-process-step.step-animated {
    opacity: 1;
    transform: translateY(0);
}

.process-step-marker {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #d4a85a 100%);
    border-radius: 50%;
    margin-bottom: var(--space-6);
    box-shadow: 0 8px 30px rgba(196, 107, 65, 0.3);
}

.step-number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: white;
}

.process-step-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.process-step-content p {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    max-width: 180px;
    line-height: 1.5;
}

/* CTA Section */
.b2b-cta-section {
    position: relative;
    padding: var(--space-24) 0;
    background: linear-gradient(135deg, #0f1410 0%, #1a2a1c 50%, #2d3b2e 100%);
    overflow: hidden;
}

.b2b-cta-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(212, 168, 90, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(196, 107, 65, 0.08) 0%, transparent 50%);
}

.b2b-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-16);
    align-items: start;
    position: relative;
    z-index: 1;
}

.b2b-cta-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: var(--space-5);
}

.b2b-cta-text {
    font-size: var(--text-lg);
    color: rgba(250, 246, 240, 0.8);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.b2b-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: rgba(250, 246, 240, 0.8);
    font-size: var(--text-sm);
}

.trust-badge svg {
    color: #d4a85a;
}

/* Form Card */
.b2b-form-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.b2b-contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.b2b-contact-form .form-group {
    margin-bottom: var(--space-5);
}

.b2b-contact-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.b2b-contact-form input,
.b2b-contact-form select,
.b2b-contact-form textarea {
    width: 100%;
    padding: var(--space-4);
    background: #f8f6f3;
    border: 1px solid #e8e4de;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.b2b-contact-form input:focus,
.b2b-contact-form select:focus,
.b2b-contact-form textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    background: white;
    box-shadow: 0 0 0 3px rgba(196, 107, 65, 0.1);
}

.b2b-contact-form input::placeholder,
.b2b-contact-form textarea::placeholder {
    color: var(--color-gray-400);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-terracotta);
}

.form-checkbox label {
    margin: 0;
    font-weight: normal;
    color: var(--color-gray-600);
}

/* Form Required & Optional Labels */
.b2b-contact-form .required {
    color: var(--color-terracotta);
    font-weight: 600;
}

.b2b-contact-form .optional-label {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: var(--text-xs);
    margin-left: var(--space-1);
}

/* Conditional Field Animation */
.form-group-conditional {
    overflow: hidden;
    transition: all 0.3s ease;
}

.form-group-conditional.form-field-enter {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

/* Form Group Focus State */
.b2b-contact-form .form-group.field-focused label {
    color: var(--color-terracotta);
}

.b2b-contact-form .form-group.field-focused input,
.b2b-contact-form .form-group.field-focused select,
.b2b-contact-form .form-group.field-focused textarea {
    border-color: var(--color-terracotta);
    background: white;
    box-shadow: 0 0 0 3px rgba(196, 107, 65, 0.1);
}

/* Select Dropdown Arrow Styling */
.b2b-contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
    cursor: pointer;
}

.b2b-contact-form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c46b41' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Form Placeholder Improvements */
.b2b-contact-form input::placeholder,
.b2b-contact-form textarea::placeholder {
    color: var(--color-gray-400);
    opacity: 0.8;
}

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

/* ========================================
   Form Success Message - Premium Style
   ======================================== */
.form-success-message {
    text-align: center;
    padding: var(--space-12) var(--space-8);
}

.form-success-message.success-animate {
    animation: successFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes successFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.success-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.15) 0%, rgba(212, 168, 90, 0.1) 100%);
    border-radius: 50%;
    margin-bottom: var(--space-4);
}

.success-icon {
    color: var(--color-terracotta);
}

.success-icon .success-circle {
    stroke-dasharray: 63;
    stroke-dashoffset: 63;
    animation: drawCircle 0.6s ease-out 0.2s forwards;
}

.success-icon .success-check {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: drawCheck 0.4s ease-out 0.7s forwards;
}

@keyframes drawCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

.success-emoji {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s both;
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-4);
    animation: fadeInUp 0.5s ease-out 0.4s both;
}

.success-title span {
    color: var(--color-terracotta);
}

.success-company {
    font-size: var(--text-md);
    color: var(--color-gray-700);
    margin-bottom: var(--space-3);
    animation: fadeInUp 0.5s ease-out 0.5s both;
}

.success-company strong {
    color: var(--color-heading);
    font-weight: 600;
}

.success-text {
    font-size: var(--text-md);
    color: var(--color-gray-600);
    margin-bottom: var(--space-2);
    animation: fadeInUp 0.5s ease-out 0.6s both;
}

.success-text strong {
    color: var(--color-terracotta);
    font-weight: 600;
}

.success-cta {
    font-size: var(--text-md);
    color: var(--color-gray-600);
    font-style: italic;
    margin-bottom: var(--space-6);
    animation: fadeInUp 0.5s ease-out 0.7s both;
}

.success-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
    margin: var(--space-6) 0;
    animation: fadeIn 0.5s ease-out 0.8s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.success-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.5s ease-out 0.9s both;
}

.success-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.success-actions .btn-outline-light {
    background: transparent;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
}

.success-actions .btn-outline-light:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    transform: translateY(-2px);
}

.success-actions .btn-primary {
    background: var(--color-terracotta);
    border: 1px solid var(--color-terracotta);
    color: white;
}

.success-actions .btn-primary:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 107, 65, 0.3);
}

/* Button Loading State */
.btn-loading-state {
    pointer-events: none;
    opacity: 0.85;
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-loading .spinner {
    animation: spin 1s linear infinite;
}

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

/* Form Error State */
.form-group.field-error input,
.form-group.field-error select,
.form-group.field-error textarea {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.03);
}

.form-group.field-error label {
    color: #e74c3c;
}

.form-group.field-error::after {
    content: 'This field is required';
    display: block;
    font-size: var(--text-xs);
    color: #e74c3c;
    margin-top: var(--space-1);
    animation: fadeIn 0.3s ease;
}

/* Responsive Success Message */
@media (max-width: 576px) {
    .form-success-message {
        padding: var(--space-8) var(--space-4);
    }
    
    .success-icon-wrapper {
        width: 64px;
        height: 64px;
    }
    
    .success-icon {
        width: 48px;
        height: 48px;
    }
    
    .success-emoji {
        font-size: 2.5rem;
    }
    
    .success-title {
        font-size: var(--text-xl);
    }
    
    .success-company,
    .success-text,
    .success-cta {
        font-size: var(--text-sm);
    }
    
    .success-actions {
        flex-direction: column;
    }
    
    .success-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Direct Contact */
.b2b-direct-contact {
    margin-top: var(--space-16);
    position: relative;
    z-index: 1;
}

.direct-contact-inner {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    text-align: center;
}

.direct-contact-inner h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-6);
}

.direct-contact-methods {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: rgba(250, 246, 240, 0.9);
    font-size: var(--text-base);
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-method:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 168, 90, 0.3);
    color: white;
    transform: translateY(-2px);
}

.contact-method svg {
    color: #d4a85a;
    flex-shrink: 0;
}

/* Reveal Animations */
.reveal-fade,
.reveal-scale,
.reveal-slide-up {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: var(--delay, 0s);
}

.reveal-fade {
    transform: translateY(30px);
}

.reveal-scale {
    transform: scale(0.95);
}

.reveal-slide-up {
    transform: translateY(40px);
}

.reveal-fade.revealed,
.reveal-scale.revealed,
.reveal-slide-up.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ========================================
   PREMIUM MOTION EFFECTS - B2B Page
   ======================================== */

/* Hero Parallax Effect */
.b2b-hero {
    perspective: 1000px;
}

.b2b-hero-bg {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.b2b-hero-pattern {
    will-change: transform;
}

/* Enhanced Hero Text Animations */
.b2b-hero .animate-fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-hero .animate-fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

.b2b-hero .delay-100 { transition-delay: 0.1s; }
.b2b-hero .delay-200 { transition-delay: 0.2s; }
.b2b-hero .delay-300 { transition-delay: 0.3s; }
.b2b-hero .delay-400 { transition-delay: 0.4s; }

/* Hero Headline Shimmer Effect */
.b2b-hero-headline .text-gradient {
    background-size: 200% auto;
    animation: shimmerGold 4s ease-in-out infinite;
}

@keyframes shimmerGold {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Stats Cards Premium Animation */
.b2b-stat-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-stat-card.stat-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.b2b-stat-card:nth-child(1) { transition-delay: 0s; }
.b2b-stat-card:nth-child(2) { transition-delay: 0.1s; }
.b2b-stat-card:nth-child(3) { transition-delay: 0.2s; }
.b2b-stat-card:nth-child(4) { transition-delay: 0.3s; }

/* Stat Icon Pulse on Hover */
.b2b-stat-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.4s ease;
}

.b2b-stat-card:hover .b2b-stat-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(212, 168, 90, 0.3);
}

/* Partner Cards Staggered Reveal */
.b2b-partner-card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-partner-card.card-revealed {
    opacity: 1;
    transform: translateY(0);
}

.b2b-partner-card:nth-child(1) { transition-delay: 0s; }
.b2b-partner-card:nth-child(2) { transition-delay: 0.15s; }
.b2b-partner-card:nth-child(3) { transition-delay: 0.3s; }

/* Partner Card Icon Animation */
.partner-card-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}

.b2b-partner-card:hover .partner-card-icon {
    transform: translateY(-5px) scale(1.1);
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.15) 0%, rgba(212, 168, 90, 0.15) 100%);
}

.partner-card-icon svg {
    transition: transform 0.3s ease;
}

.b2b-partner-card:hover .partner-card-icon svg {
    transform: scale(1.1);
}

/* Why Cards Animation */
.b2b-why-card {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-why-card.card-revealed {
    opacity: 1;
    transform: translateX(0);
}

.b2b-why-card:nth-child(1) { transition-delay: 0s; }
.b2b-why-card:nth-child(2) { transition-delay: 0.1s; }
.b2b-why-card:nth-child(3) { transition-delay: 0.2s; }
.b2b-why-card:nth-child(4) { transition-delay: 0.3s; }
.b2b-why-card:nth-child(5) { transition-delay: 0.4s; }
.b2b-why-card:nth-child(6) { transition-delay: 0.5s; }

/* Why Card Icon Hover */
.why-card-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.b2b-why-card:hover .why-card-icon {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 10px 30px rgba(212, 168, 90, 0.4);
}

/* Service Items Reveal */
.b2b-service-item {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-service-item.item-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.b2b-service-item:nth-child(1) { transition-delay: 0s; }
.b2b-service-item:nth-child(2) { transition-delay: 0.12s; }
.b2b-service-item:nth-child(3) { transition-delay: 0.24s; }
.b2b-service-item:nth-child(4) { transition-delay: 0.36s; }
.b2b-service-item:nth-child(5) { transition-delay: 0.48s; }
.b2b-service-item:nth-child(6) { transition-delay: 0.6s; }

/* Service Item Image Zoom */
.service-item-visual img {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-service-item:hover .service-item-visual img {
    transform: scale(1.08);
}

/* Process Steps Premium Animation */
.b2b-process-step {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-process-step.step-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Process Step Marker Animation */
.process-step-marker {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.b2b-process-step:hover .process-step-marker {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(196, 107, 65, 0.4);
}

.process-step-marker .step-number {
    transition: transform 0.3s ease;
}

.b2b-process-step:hover .step-number {
    transform: scale(1.1);
}

/* Process Line Animation */
.process-line {
    background: linear-gradient(90deg, 
        var(--color-gray-200) 0%, 
        var(--color-terracotta) var(--progress, 0%), 
        var(--color-gray-200) var(--progress, 0%)
    );
    transition: --progress 0.3s ease;
}

/* Trusted By Logo Hover Effects */
.trusted-logo-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trusted-logo-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.logo-brand svg,
.logo-badge .badge-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trusted-logo-item:hover .logo-brand svg {
    transform: scale(1.08);
}

/* Form Card Premium Entrance */
.b2b-form-card {
    opacity: 0;
    transform: translateY(50px) scale(0.98);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-form-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Form Input Focus Effects */
.b2b-contact-form input:focus,
.b2b-contact-form select:focus,
.b2b-contact-form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(196, 107, 65, 0.15);
}

/* Submit Button Premium Hover */
.b2b-contact-form .btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-contact-form .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.b2b-contact-form .btn-primary:hover::before {
    left: 100%;
}

.b2b-contact-form .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(196, 107, 65, 0.4);
}

/* Contact Method Buttons */
.contact-method {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-method:hover {
    transform: translateY(-4px) scale(1.02);
}

.contact-method svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-method:hover svg {
    transform: scale(1.15) rotate(-5deg);
}

/* Trust Badge Animation */
.trust-badge {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust-badge:hover {
    transform: translateY(-3px);
}

.trust-badge svg {
    transition: transform 0.3s ease;
}

.trust-badge:hover svg {
    transform: scale(1.1);
}

/* Section Eyebrow Animation */
.section-eyebrow {
    position: relative;
    overflow: hidden;
}

.section-eyebrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-terracotta), #d4a85a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-fade.revealed .section-eyebrow::after {
    transform: scaleX(1);
    transition-delay: 0.3s;
}

/* Floating Animation for Decorative Elements */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

/* Pulse Glow for Important Elements */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 107, 65, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(196, 107, 65, 0.2); }
}

/* CTA Section Background Animation */
.b2b-cta-bg {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .b2b-hero-bg,
    .b2b-cta-bg {
        transform: none !important;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .b2b-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }
    
    .b2b-hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .b2b-hero-cta {
        justify-content: center;
    }
    
    .b2b-hero-stats {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .b2b-partners-grid,
    .b2b-why-grid,
    .b2b-services-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .b2b-cta-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    
    .b2b-cta-content {
        text-align: center;
    }
    
    .b2b-trust-badges {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .b2b-hero {
        min-height: auto;
        padding: calc(80px + var(--space-12)) 0 var(--space-16);
    }
    
    .b2b-hero-content {
        padding: var(--space-8) 0;
    }
    
    .b2b-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .b2b-stat-card {
        padding: var(--space-4);
    }
    
    .b2b-hero-scroll {
        display: none;
    }
    
    .b2b-partners-grid,
    .b2b-why-grid,
    .b2b-services-showcase {
        grid-template-columns: 1fr;
    }
    
    .b2b-section-header {
        margin-bottom: var(--space-12);
    }
    
    .b2b-partners-section,
    .b2b-why-section,
    .b2b-services-section,
    .b2b-process-section,
    .b2b-cta-section {
        padding: var(--space-16) 0;
    }
    
    .b2b-process-timeline {
        flex-direction: column;
        gap: var(--space-8);
        align-items: flex-start;
    }
    
    .process-line {
        display: none;
    }
    
    .b2b-process-step {
        flex-direction: row;
        text-align: left;
        gap: var(--space-5);
    }
    
    .process-step-marker {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .process-step-content p {
        max-width: none;
    }
    
    .b2b-contact-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .direct-contact-methods {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contact-method {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .b2b-hero-stats {
        grid-template-columns: 1fr;
    }
    
    .b2b-form-card {
        padding: var(--space-6);
    }
    
    .b2b-trust-badges {
        flex-direction: column;
        align-items: center;
    }
}


/* ========================================
   PRIVACY POLICY PAGE - Premium Design
   ======================================== */

/* Privacy Hero Section */
.privacy-policy-page {
    background: var(--color-white);
}

.privacy-hero {
    position: relative;
    padding: 160px 0 100px;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 50%, #1A1A1A 100%);
    overflow: hidden;
}

.privacy-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(198, 93, 59, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(232, 220, 196, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.privacy-hero-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(255, 255, 255, 0.01) 100px,
            rgba(255, 255, 255, 0.01) 101px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 100px,
            rgba(255, 255, 255, 0.01) 100px,
            rgba(255, 255, 255, 0.01) 101px
        );
}

.privacy-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.privacy-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    border-radius: 24px;
    margin-bottom: var(--space-8);
    animation: heroIconFloat 3s ease-in-out infinite;
}

.privacy-hero-icon svg {
    stroke: white;
}

@keyframes heroIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.privacy-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.privacy-hero-subtitle {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto var(--space-8);
    line-height: 1.6;
}

.privacy-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.privacy-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.privacy-meta-item svg {
    stroke: var(--color-terracotta);
}

/* Commitment Section */
.privacy-commitment {
    padding: var(--space-16) 0;
    background: var(--color-sand-light);
}

.commitment-card {
    background: var(--color-white);
    border-radius: 24px;
    padding: var(--space-12);
    text-align: center;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.commitment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-sand-dark), var(--color-terracotta));
}

.commitment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border-radius: 50%;
    margin-bottom: var(--space-6);
}

.commitment-icon svg {
    stroke: var(--color-terracotta);
}

.commitment-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.commitment-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto var(--space-8);
}

.commitment-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.commitment-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-sand-light);
    border-radius: 100px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
}

.commitment-badge svg {
    stroke: var(--color-terracotta);
}

/* Table of Contents */
.privacy-toc {
    padding: var(--space-12) 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
}

.toc-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.toc-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-dark);
    margin-bottom: var(--space-6);
    text-align: center;
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.toc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4) var(--space-3);
    background: var(--color-sand-light);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.toc-item:hover,
.toc-item.active {
    background: var(--color-terracotta);
    transform: translateY(-2px);
}

.toc-item:hover .toc-number,
.toc-item.active .toc-number {
    color: rgba(255, 255, 255, 0.7);
}

.toc-item:hover .toc-text,
.toc-item.active .toc-text {
    color: var(--color-white);
}

.toc-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
    margin-bottom: var(--space-1);
    transition: color 0.3s ease;
}

.toc-text {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Main Content Sections */
.privacy-content {
    padding: var(--space-16) 0;
}

.privacy-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.privacy-section {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-100);
}

.privacy-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-header-privacy {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    position: relative;
}

.section-number {
    /* Hidden - decorative numbers removed per user request */
    display: none;
}

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    border-radius: 14px;
    flex-shrink: 0;
}

.section-icon svg {
    stroke: white;
}

.section-header-privacy h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin: 0;
}

.section-content-privacy {
    padding-left: 72px;
}

.lead-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-8);
    border-left: 3px solid var(--color-terracotta);
    padding-left: var(--space-5);
}

/* Info Categories */
.info-category {
    margin-bottom: var(--space-8);
}

.info-category h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.info-category p {
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);
}

.styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.styled-list li {
    position: relative;
    padding-left: var(--space-6);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.styled-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    background: var(--color-terracotta);
    border-radius: 50%;
}

.styled-list li strong {
    color: var(--color-dark);
}

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.use-case {
    background: var(--color-sand-light);
    border-radius: 16px;
    padding: var(--space-6);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.use-case:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.use-case-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border-radius: 12px;
    margin-bottom: var(--space-4);
}

.use-case-icon svg {
    stroke: var(--color-terracotta);
}

.use-case h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.use-case p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Highlight Boxes */
.highlight-box {
    border-radius: 16px;
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.highlight-box:last-child {
    margin-bottom: 0;
}

.highlight-box h4 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.highlight-box-sand {
    background: var(--color-sand-light);
    border-left: 4px solid var(--color-sand-dark);
}

.highlight-box-sand h4 {
    color: var(--color-dark);
}

.highlight-box-terracotta {
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.08) 0%, rgba(198, 93, 59, 0.04) 100%);
    border-left: 4px solid var(--color-terracotta);
}

.highlight-box-terracotta h4 {
    color: var(--color-terracotta-dark);
}

/* Cookies Section - Premium Design */

/* Cookie Type Indicator */
.cookie-type-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.cookie-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 50px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
}

.cookie-badge.essential {
    background: linear-gradient(135deg, rgba(139, 162, 135, 0.15) 0%, rgba(139, 162, 135, 0.08) 100%);
    color: var(--color-sage-dark);
    border: 1px solid rgba(139, 162, 135, 0.3);
}

.cookie-badge.essential svg {
    stroke: var(--color-sage);
}

/* Cookies Grid */
.cookies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

/* Cookie Card */
.cookie-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    padding: var(--space-6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cookie-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-sand) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cookie-card:hover {
    border-color: var(--color-sand);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.cookie-card:hover::before {
    opacity: 1;
}

.cookie-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.cookie-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-cream) 100%);
    border-radius: 12px;
}

.cookie-icon svg {
    stroke: var(--color-terracotta);
}

.cookie-duration {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
}

.cookie-duration svg {
    stroke: var(--color-gray-400);
}

.cookie-name {
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
    font-size: var(--text-sm);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.cookie-description {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* No Tracking Banner - Info Note Style */
.no-tracking-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(2, 136, 209, 0.08);
    border-radius: 12px;
    border-left: 3px solid var(--color-info);
}

.no-tracking-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.no-tracking-icon svg {
    stroke: var(--color-info);
    width: 20px;
    height: 20px;
}

.no-tracking-content h4 {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.no-tracking-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
    margin: 0;
}

/* Info Note */
.info-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(2, 136, 209, 0.08);
    border-radius: 12px;
    border-left: 3px solid var(--color-info);
}

.info-note svg {
    stroke: var(--color-info);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-note p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Third Party Grid */
.third-party-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.third-party-item {
    background: var(--color-sand-light);
    border-radius: 16px;
    padding: var(--space-6);
    transition: transform 0.3s ease;
}

.third-party-item:hover {
    transform: translateY(-2px);
}

.third-party-item h4 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.third-party-item p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.third-party-item a {
    font-size: var(--text-sm);
    color: var(--color-terracotta);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.third-party-item a:hover {
    color: var(--color-terracotta-dark);
}

/* Security Features */
.security-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.security-feature {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.security-feature:hover {
    border-color: var(--color-terracotta);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.1);
}

.security-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.security-icon svg {
    stroke: var(--color-terracotta);
}

.security-text h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.security-text p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Rights Grid */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.right-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    padding: var(--space-5);
    text-align: center;
    transition: all 0.3s ease;
}

.right-card:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.right-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    border-radius: 12px;
    margin-bottom: var(--space-4);
}

.right-icon svg {
    stroke: white;
}

.right-card h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.right-card p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

.rights-cta {
    text-align: center;
    padding: var(--space-5);
    background: var(--color-sand-light);
    border-radius: 12px;
}

.rights-cta p {
    margin: 0;
    color: var(--color-gray-700);
}

/* Contact Cards Privacy */
.contact-cards-privacy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.contact-card-privacy {
    background: var(--color-sand-light);
    border-radius: 16px;
    padding: var(--space-6);
    text-align: center;
    transition: transform 0.3s ease;
}

.contact-card-privacy:hover {
    transform: translateY(-4px);
}

.contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-white);
    border-radius: 14px;
    margin-bottom: var(--space-4);
}

.contact-card-icon svg {
    stroke: var(--color-terracotta);
}

.contact-card-privacy h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.contact-card-privacy a,
.contact-card-privacy p {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    text-decoration: none;
    margin: 0;
}

.contact-card-privacy a:hover {
    color: var(--color-terracotta);
}

/* Footer CTA */
.privacy-footer-cta {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    position: relative;
    overflow: hidden;
}

.privacy-footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(198, 93, 59, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(232, 220, 196, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.footer-cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-cta-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.footer-cta-content p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-8);
}

.footer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-cta-buttons .btn-outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.footer-cta-buttons .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

/* Reveal Animations */
.privacy-policy-page .reveal-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.privacy-policy-page .reveal-fade.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Extended TOC Grid */
.toc-grid-extended {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.toc-grid-extended .toc-item {
    padding: var(--space-3) var(--space-2);
}

.toc-grid-extended .toc-number {
    font-size: var(--text-xl);
}

.toc-grid-extended .toc-text {
    font-size: var(--text-xs);
}

/* Data Retention Grid */
.retention-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.retention-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.retention-item:hover {
    border-color: var(--color-terracotta);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.1);
}

.retention-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.retention-icon svg {
    stroke: var(--color-terracotta);
}

.retention-content h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.retention-period {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 100px;
    margin-bottom: var(--space-2);
}

.retention-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Responsive Privacy Policy */
@media (max-width: 992px) {
    .toc-grid,
    .toc-grid-extended {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
    }
    
    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .security-features,
    .retention-grid {
        grid-template-columns: 1fr;
    }
    
    .cookies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .privacy-hero {
        padding: 120px 0 80px;
    }
    
    .privacy-hero-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }
    
    .privacy-hero-icon svg {
        width: 48px;
        height: 48px;
    }
    
    .commitment-card {
        padding: var(--space-8);
    }
    
    .toc-grid,
    .toc-grid-extended {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .toc-grid-extended .toc-text {
        font-size: 10px;
    }
    
    .section-content-privacy {
        padding-left: 0;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .third-party-grid {
        grid-template-columns: 1fr;
    }
    
    .rights-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-cards-privacy {
        grid-template-columns: 1fr;
    }
    
    .retention-grid {
        grid-template-columns: 1fr;
    }
    
    .cookies-grid {
        grid-template-columns: 1fr;
    }
    
    .cookie-card {
        padding: var(--space-5);
    }
    
    .no-tracking-banner {
        padding: var(--space-3);
    }
}

@media (max-width: 480px) {
    .privacy-hero {
        padding: 100px 0 60px;
    }
    
    .privacy-meta {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .commitment-badges {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .toc-grid,
    .toc-grid-extended {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .toc-grid-extended .toc-number {
        font-size: var(--text-lg);
    }
    
    .toc-grid-extended .toc-text {
        font-size: 9px;
    }
    
    .section-header-privacy {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .retention-item {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
}



/* ============================================
   BLOG PAGE - PREMIUM MAGAZINE STYLE
   ============================================ */

.blog-page {
    background: #fff;
}

/* Blog Hero */
.blog-hero {
    position: relative;
    padding: 140px 0 80px;
    background: var(--color-cream, #FAF8F5);
    overflow: hidden;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 60% 50% at 20% 100%, rgba(198, 93, 59, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 0%, rgba(212, 180, 131, 0.08) 0%, transparent 50%);
}

.blog-hero-content {
    position: relative;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.blog-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 20px;
}

.blog-hero-eyebrow svg {
    stroke: var(--color-terracotta);
}

.blog-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 16px;
}

.blog-hero p {
    font-size: 1.125rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Blog Filters */
.blog-filters {
    padding: 24px 0;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 80px;
    z-index: 100;
}

.blog-filters-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.blog-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-gray-100);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 280px;
}

.blog-search svg {
    stroke: var(--color-gray-500);
    flex-shrink: 0;
}

.blog-search input {
    border: none;
    background: transparent;
    font-size: 14px;
    width: 100%;
    color: var(--color-dark);
}

.blog-search input::placeholder {
    color: var(--color-gray-500);
}

.blog-search input:focus {
    outline: none;
}

.blog-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-category-tag {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-700);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-category-tag:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.blog-category-tag.active {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: #fff;
}

/* Featured Post */
.blog-featured {
    padding: 60px 0;
    background: #fff;
}

.featured-article {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}

.featured-image {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-image:hover img {
    transform: scale(1.03);
}

.featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-terracotta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
}

.featured-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-sand) 0%, var(--color-sand-dark) 100%);
}

.featured-content {
    padding: 20px 0;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.featured-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    text-decoration: none;
}

.featured-category:hover {
    text-decoration: underline;
}

.featured-date,
.featured-read-time {
    font-size: 13px;
    color: var(--color-gray-500);
}

.featured-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
}

.featured-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.featured-title a:hover {
    color: var(--color-terracotta);
}

.featured-excerpt {
    font-size: 1rem;
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: 24px;
}

.featured-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-terracotta);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.featured-link:hover {
    gap: 12px;
}

/* Main Blog Layout */
.blog-main {
    padding: 60px 0 80px;
    background: var(--color-gray-100);
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
}

.blog-section-header {
    margin-bottom: 32px;
}

.blog-section-header.centered {
    text-align: center;
}

.blog-section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 12px;
}

.blog-section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.blog-section-header p {
    color: var(--color-gray-500);
    font-size: 0.9375rem;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.blog-card-image {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-sand-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-placeholder svg {
    stroke: var(--color-sand-dark);
}

.blog-card-content {
    padding: 24px;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.blog-card-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    text-decoration: none;
}

.blog-card-category:hover {
    text-decoration: underline;
}

.blog-card-date {
    font-size: 12px;
    color: var(--color-gray-500);
}

.blog-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-card-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card-title a:hover {
    color: var(--color-terracotta);
}

.blog-card-excerpt {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-terracotta);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.blog-card-link:hover {
    gap: 10px;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-700);
    background: #fff;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-pagination .page-numbers:hover {
    background: var(--color-terracotta);
    color: #fff;
}

.blog-pagination .page-numbers.current {
    background: var(--color-terracotta);
    color: #fff;
}

.blog-pagination .prev,
.blog-pagination .next {
    gap: 6px;
}

/* Blog Empty State */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 16px;
}

.blog-empty svg {
    stroke: var(--color-gray-300);
    margin-bottom: 24px;
}

.blog-empty h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.blog-empty p {
    color: var(--color-gray-500);
}

/* Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sidebar-widget {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 20px;
}

.sidebar-title svg {
    stroke: var(--color-terracotta);
}

/* Popular Posts */
.sidebar-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-post {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    padding: 12px;
    margin: -12px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.sidebar-post:hover {
    background: var(--color-gray-100);
}

.sidebar-post-num {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-sand-dark);
    line-height: 1;
}

.sidebar-post-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.sidebar-post:hover .sidebar-post-content h4 {
    color: var(--color-terracotta);
}

.sidebar-post-date {
    font-size: 12px;
    color: var(--color-gray-500);
}

/* Sidebar Categories */
.sidebar-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--color-gray-100);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-category:hover {
    background: var(--color-terracotta);
}

.sidebar-category-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
    transition: color 0.2s ease;
}

.sidebar-category:hover .sidebar-category-name {
    color: #fff;
}

.sidebar-category-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray-500);
    background: #fff;
    padding: 2px 8px;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.sidebar-category:hover .sidebar-category-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Sidebar CTA */
.sidebar-cta {
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #b5533e 100%);
    text-align: center;
    color: #fff;
}

.sidebar-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    margin-bottom: 16px;
}

.sidebar-cta-icon svg {
    stroke: #fff;
}

.sidebar-cta h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.sidebar-cta p {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.sidebar-cta-btn {
    display: inline-block;
    background: #fff;
    color: var(--color-terracotta);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Sidebar Newsletter */
.sidebar-newsletter p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: 16px;
}

.sidebar-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-newsletter-form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    font-size: 14px;
}

.sidebar-newsletter-form input:focus {
    outline: none;
    border-color: var(--color-terracotta);
}

.sidebar-newsletter-form button {
    width: 100%;
    padding: 12px;
    background: var(--color-dark);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sidebar-newsletter-form button:hover {
    background: var(--color-terracotta);
}

/* Destination Guides Section */
.blog-guides {
    padding: 80px 0;
    background: #fff;
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.guide-card {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
}

.guide-card-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.4s ease;
    overflow: hidden;
}

.guide-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.guide-card:hover .guide-card-bg img {
    transform: scale(1.08);
}

.guide-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    color: #fff;
}

.guide-card-content h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.guide-card-content span {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Blog CTA Section */
.blog-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.blog-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 40% 50% at 20% 50%, rgba(198, 93, 59, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 30% 40% at 80% 50%, rgba(212, 180, 131, 0.08) 0%, transparent 50%);
}

.blog-cta-content {
    position: relative;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.blog-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.blog-cta p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
}

.blog-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.blog-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-terracotta);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-cta-primary:hover {
    background: #b5533e;
    transform: translateY(-2px);
}

.blog-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 16px 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   SINGLE ARTICLE - PREMIUM STYLE
   ============================================ */

.single-article {
    background: #fff;
}

/* Article Header */
.article-header {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    padding: 60px 0;
}

.article-header-bg {
    position: absolute;
    inset: 0;
}

.article-header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.article-header-content {
    position: relative;
    max-width: 800px;
}

.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}

.article-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-breadcrumb a:hover {
    color: #fff;
}

.article-breadcrumb span {
    color: rgba(255, 255, 255, 0.4);
}

.article-category {
    display: inline-block;
    background: var(--color-terracotta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    text-decoration: none;
    margin-bottom: 20px;
}

.article-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 24px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.article-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.article-meta-item svg {
    stroke: rgba(255, 255, 255, 0.6);
}

/* Article Body */
.article-body {
    padding: 60px 0;
}

.container-article {
    max-width: 900px;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 40px;
}

.article-content {
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--color-gray-700);
}

.article-content h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 48px 0 20px;
}

.article-content h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 36px 0 16px;
}

.article-content p {
    margin-bottom: 24px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 32px 0;
}

.article-content ul,
.article-content ol {
    margin-bottom: 24px;
    padding-left: 24px;
}

.article-content li {
    margin-bottom: 10px;
}

.article-content blockquote {
    border-left: 4px solid var(--color-terracotta);
    padding: 20px 24px;
    margin: 32px 0;
    background: var(--color-sand-light);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 1.125rem;
}

/* Article Share */
.article-share {
    position: relative;
}

.article-share-sticky {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.article-share-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 8px;
}

.article-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-gray-100);
    border: none;
    border-radius: 50%;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.article-share-btn:hover {
    background: var(--color-terracotta);
    color: #fff;
}

.article-share-whatsapp:hover {
    background: #25D366;
}

.article-share-copy.copied {
    background: var(--color-success);
    color: #fff;
}

/* Article Tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-gray-200);
}

.article-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
}

.article-tags a {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.article-tags a:hover {
    background: var(--color-terracotta);
    color: #fff;
}

/* Article Author */
.article-author {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 48px;
    padding: 32px;
    background: var(--color-sand-light);
    border-radius: 16px;
}

.article-author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}

.article-author-avatar svg {
    stroke: var(--color-terracotta);
}

.article-author-label {
    display: block;
    font-size: 12px;
    color: var(--color-gray-500);
    margin-bottom: 4px;
}

.article-author-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.article-author-bio {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Article CTA */
.article-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    padding: 32px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #b5533e 100%);
    border-radius: 16px;
    color: #fff;
}

.article-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

.article-cta-icon svg {
    stroke: #fff;
}

.article-cta-content {
    flex: 1;
}

.article-cta-content h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.article-cta-content p {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin: 0;
}

.article-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.article-cta-btn-primary {
    display: inline-block;
    background: #fff;
    color: var(--color-terracotta);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.article-cta-btn-primary:hover {
    transform: translateY(-2px);
}

.article-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

.article-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Related Articles */
.related-articles {
    padding: 80px 0;
    background: var(--color-gray-100);
}

.related-header {
    text-align: center;
    margin-bottom: 40px;
}

.related-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.related-header p {
    color: var(--color-gray-500);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.related-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.related-card-image {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card-image img {
    transform: scale(1.05);
}

.related-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-sand-light);
}

.related-card-content {
    padding: 24px;
}

.related-card-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 10px;
}

.related-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.related-card-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.related-card-title a:hover {
    color: var(--color-terracotta);
}

.related-card-date {
    font-size: 13px;
    color: var(--color-gray-500);
}

/* Blog More Section */
.blog-more {
    padding: 60px 0;
    background: #fff;
}

.blog-more-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.blog-more h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 12px;
}

.blog-more p {
    color: var(--color-gray-500);
    margin-bottom: 24px;
}

.blog-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-more-btn:hover {
    background: var(--color-terracotta);
    gap: 12px;
}

/* ============================================
   ARTICLE TABLE OF CONTENTS (SEO)
   ============================================ */

.article-toc {
    background: linear-gradient(135deg, var(--color-sand-light) 0%, rgba(250, 248, 245, 0.8) 100%);
    border: 1px solid rgba(198, 93, 59, 0.15);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 32px 0 40px;
}

.article-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--color-dark);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
}

.article-toc-header svg {
    stroke: var(--color-terracotta);
}

.article-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}

.article-toc-list li {
    counter-increment: toc-counter;
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
}

.article-toc-list li::before {
    content: counter(toc-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    color: var(--color-terracotta);
    font-weight: 600;
    font-size: 0.85rem;
}

.article-toc-list a {
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.article-toc-list a:hover {
    color: var(--color-terracotta);
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

.article-content h2[id],
.article-content h3[id] {
    scroll-margin-top: 100px;
}

/* ============================================
   ENHANCED ARTICLE FEATURES (SEO)
   ============================================ */

/* Key Takeaways Box */
.article-key-takeaways {
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.08) 0%, rgba(198, 93, 59, 0.03) 100%);
    border-left: 4px solid var(--color-terracotta);
    padding: 24px 28px;
    margin: 32px 0;
    border-radius: 0 12px 12px 0;
}

.article-key-takeaways h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-dark);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-key-takeaways h4 svg {
    stroke: var(--color-terracotta);
}

.article-key-takeaways ul {
    margin: 0;
    padding-left: 20px;
}

.article-key-takeaways li {
    margin-bottom: 8px;
    color: var(--color-gray-700);
}

/* Pro Tip Box */
.article-pro-tip {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(46, 125, 50, 0.03) 100%);
    border-left: 4px solid #2E7D32;
    padding: 20px 24px;
    margin: 32px 0;
    border-radius: 0 12px 12px 0;
    display: flex;
    gap: 16px;
}

.article-pro-tip svg {
    flex-shrink: 0;
    stroke: #2E7D32;
}

.article-pro-tip-content {
    flex: 1;
}

.article-pro-tip-content strong {
    display: block;
    color: #2E7D32;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.article-pro-tip-content p {
    margin: 0;
    color: var(--color-gray-700);
}

/* Last Updated Badge */
.article-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-sand-light);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--color-gray-600);
    margin-bottom: 16px;
}

.article-updated svg {
    width: 14px;
    height: 14px;
}

/* Internal Link Styling */
.article-content a:not(.btn):not(.article-cta-btn-primary):not(.article-cta-btn-secondary) {
    color: var(--color-terracotta);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.article-content a:not(.btn):hover {
    color: var(--color-terracotta-dark);
    text-decoration-thickness: 2px;
}

/* Featured Snippet Optimization */
.article-content p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--color-gray-800);
}

/* Definition Lists for Featured Snippets */
.article-content dl {
    margin: 32px 0;
    padding: 0;
}

.article-content dt {
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.article-content dd {
    margin: 0 0 24px;
    color: var(--color-gray-700);
    padding-left: 16px;
    border-left: 2px solid var(--color-sand);
}

/* Quick Facts Box (Featured Snippet optimized) */
.article-quick-facts {
    background: #fff;
    border: 2px solid var(--color-sand);
    border-radius: 16px;
    padding: 24px;
    margin: 32px 0;
}

.article-quick-facts h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-dark);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-sand-light);
}

.article-quick-facts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-quick-facts li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-sand-light);
    font-size: 0.95rem;
}

.article-quick-facts li:last-child {
    border-bottom: none;
}

.article-quick-facts li strong {
    color: var(--color-dark);
}

.article-quick-facts li span {
    color: var(--color-gray-600);
}

/* Related Posts in Content */
.article-related-inline {
    background: var(--color-sand-light);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 32px 0;
}

.article-related-inline h5 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.article-related-inline a {
    display: inline-block;
    color: var(--color-terracotta);
    font-weight: 500;
    text-decoration: none;
}

.article-related-inline a:hover {
    text-decoration: underline;
}

/* Mobile TOC */
@media (max-width: 768px) {
    .article-toc {
        padding: 20px;
    }
    
    .article-toc-list li {
        padding-left: 24px;
    }
    
    .article-content p:first-of-type {
        font-size: 1.1rem;
    }
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */

.blog-newsletter {
    padding: 60px 0;
    background: var(--color-sand-light);
}

.blog-newsletter-card {
    background: #fff;
    border-radius: 20px;
    padding: 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.blog-newsletter-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.1) 0%, rgba(198, 93, 59, 0.05) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-newsletter-icon svg {
    stroke: var(--color-terracotta);
}

.blog-newsletter-content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark);
    margin: 0 0 8px;
}

.blog-newsletter-content p {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    margin: 0;
    max-width: 400px;
}

.blog-newsletter-form {
    display: flex;
    gap: 12px;
}

.blog-newsletter-form input[type="email"] {
    padding: 14px 20px;
    border: 1px solid var(--color-sand);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    min-width: 260px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.blog-newsletter-form button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-terracotta);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.blog-newsletter-form button:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.3);
}

@media (max-width: 1024px) {
    .blog-newsletter-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 36px 28px;
    }
    
    .blog-newsletter-icon {
        margin: 0 auto;
    }
    
    .blog-newsletter-content p {
        max-width: none;
    }
    
    .blog-newsletter-form {
        flex-direction: column;
    }
    
    .blog-newsletter-form input[type="email"] {
        min-width: auto;
        width: 100%;
    }
    
    .blog-newsletter-form button {
        justify-content: center;
    }
}

/* ============================================
   BLOG RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1100px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
    
    .blog-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .guides-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .featured-article {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .article-layout {
        grid-template-columns: 1fr;
    }
    
    .article-share {
        display: none;
    }
    
    .article-cta {
        flex-direction: column;
        text-align: center;
    }
    
    .article-cta-actions {
        width: 100%;
    }
    
    .article-cta-btn-primary,
    .article-cta-btn-secondary {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        padding: 120px 0 60px;
    }
    
    .blog-filters-inner {
        flex-direction: column;
        align-items: stretch;
    }
    
    .blog-search {
        min-width: 100%;
    }
    
    .blog-categories {
        justify-content: center;
    }
    
    .blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .guides-grid {
        grid-template-columns: 1fr;
    }
    
    .article-header {
        min-height: 60vh;
    }
    
    .article-author {
        flex-direction: column;
        text-align: center;
    }
    
    .article-author-avatar {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .blog-hero h1 {
        font-size: 1.75rem;
    }
    
    .blog-category-tag {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .featured-title {
        font-size: 1.25rem;
    }
    
    .blog-card-content {
        padding: 20px;
    }
    
    .sidebar-widget {
        padding: 20px;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .blog-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .blog-cta-primary,
    .blog-cta-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   CUSTOM TRIP REQUEST PAGE - LUXURY REDESIGN
   Premium immersive experience inspired by
   Abercrombie & Kent, Black Tomato, Kuoni
   ======================================== */

/* ----------------------------------------
   CT Global Styles & Variables
   ---------------------------------------- */
.ct-section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: var(--space-4);
}

.ct-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
    line-height: 1.2;
}

.ct-section-desc {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.ct-required {
    color: var(--color-terracotta);
}

/* CT Buttons */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.ct-btn--primary {
    background: var(--color-terracotta);
    color: white;
    border-color: var(--color-terracotta);
}

.ct-btn--primary:hover {
    background: var(--color-terracotta-dark);
    border-color: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(198, 93, 59, 0.3);
}

.ct-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.ct-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.ct-btn--outline {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-gray-300);
}

.ct-btn--outline:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.ct-btn--lg {
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-lg);
}

/* ----------------------------------------
   CT HERO SECTION - Immersive Video
   ---------------------------------------- */
.ct-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ct-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ct-hero__overlay {
    position: absolute;
    inset: 0;
    /* Strong bottom-to-top dark gradient for text readability */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.55) 30%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.ct-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    padding: var(--space-8);
}

.ct-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: var(--space-8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.ct-hero__badge svg {
    color: var(--color-terracotta);
}

.ct-hero__title {
    margin-bottom: var(--space-6);
}

.ct-hero__title-line {
    display: block;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-heading);
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ct-hero__title-line--accent {
    color: #ffd9a8; /* Brighter sand color for contrast */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ct-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #ffffff;
    font-weight: 400;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto var(--space-10);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ct-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.ct-hero__scroll-hint {
    position: absolute;
    bottom: var(--space-10);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ct-hero__scroll-arrow {
    animation: ctBounce 2s infinite;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

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

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

@keyframes ctBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ----------------------------------------
   CT REGIONS SECTION - Morocco Map
   ---------------------------------------- */
.ct-regions {
    background: var(--color-sand-light);
    padding: var(--space-20) 0;
}

.ct-regions__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.ct-regions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

.ct-regions__map {
    position: sticky;
    top: 120px;
}

@keyframes ctFadeRight {
    to { opacity: 1; transform: translateX(0); }
}

.ct-map {
    position: relative;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-map__svg {
    width: 100%;
    max-width: 350px;
    height: auto;
}

.ct-map__outline {
    transition: all 0.4s ease;
}

/* Dot Groups - Hidden by default */
.ct-map__dot-group {
    opacity: 0.3;
    transition: all 0.4s ease;
}

.ct-map__dot-main {
    transition: all 0.3s ease;
}

.ct-map__dot-pulse {
    opacity: 0;
    transition: all 0.3s ease;
}

.ct-map__dot-label {
    font-size: 10px;
    font-weight: 600;
    fill: var(--color-dark);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Route lines - Hidden by default */
.ct-map__route {
    opacity: 0;
    stroke-dashoffset: 100;
    transition: all 0.5s ease;
}

/* Active state when region is hovered/selected */
.ct-map--active-north .ct-map__dot-group--north,
.ct-map--active-imperial .ct-map__dot-group--imperial,
.ct-map--active-coast .ct-map__dot-group--coast,
.ct-map--active-atlas .ct-map__dot-group--atlas,
.ct-map--active-sahara .ct-map__dot-group--sahara {
    opacity: 1;
}

.ct-map--active-north .ct-map__dot-group--north .ct-map__dot-pulse,
.ct-map--active-imperial .ct-map__dot-group--imperial .ct-map__dot-pulse,
.ct-map--active-coast .ct-map__dot-group--coast .ct-map__dot-pulse,
.ct-map--active-atlas .ct-map__dot-group--atlas .ct-map__dot-pulse,
.ct-map--active-sahara .ct-map__dot-group--sahara .ct-map__dot-pulse {
    opacity: 0.4;
    animation: ctPulse 1.5s ease-in-out infinite;
}

.ct-map--active-north .ct-map__dot-group--north .ct-map__dot-label,
.ct-map--active-imperial .ct-map__dot-group--imperial .ct-map__dot-label,
.ct-map--active-coast .ct-map__dot-group--coast .ct-map__dot-label,
.ct-map--active-atlas .ct-map__dot-group--atlas .ct-map__dot-label,
.ct-map--active-sahara .ct-map__dot-group--sahara .ct-map__dot-label {
    opacity: 1;
}

.ct-map--active-north .ct-map__dot-group--north .ct-map__dot-main,
.ct-map--active-imperial .ct-map__dot-group--imperial .ct-map__dot-main,
.ct-map--active-coast .ct-map__dot-group--coast .ct-map__dot-main,
.ct-map--active-atlas .ct-map__dot-group--atlas .ct-map__dot-main,
.ct-map--active-sahara .ct-map__dot-group--sahara .ct-map__dot-main {
    r: 7;
    filter: drop-shadow(0 2px 6px rgba(198, 93, 59, 0.5));
}

/* Show route lines when active */
.ct-map--active-north .ct-map__route--north,
.ct-map--active-imperial .ct-map__route--imperial,
.ct-map--active-coast .ct-map__route--coast,
.ct-map--active-atlas .ct-map__route--atlas,
.ct-map--active-sahara .ct-map__route--sahara {
    opacity: 1;
    stroke-dashoffset: 0;
}

@keyframes ctPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Draw animation for outline */
.ct-map__outline {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: ctDrawMap 2s ease forwards;
}

@keyframes ctDrawMap {
    to { stroke-dashoffset: 0; }
}

/* Region Cards */
.ct-regions__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@keyframes ctFadeLeft {
    to { opacity: 1; transform: translateX(0); }
}

.ct-region-card {
    display: flex;
    gap: var(--space-4);
    background: white;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ct-region-card:hover,
.ct-region-card--active,
.ct-region-card--selected {
    transform: translateX(8px);
    border-color: var(--color-terracotta);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.ct-region-card--selected {
    background: rgba(198, 93, 59, 0.05);
}

.ct-region-card--selected .ct-region-card__icon {
    background: var(--color-terracotta);
}

.ct-region-card--selected .ct-region-card__icon svg {
    color: white;
}

.ct-region-card__icon {
    width: 48px;
    height: 48px;
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-region-card__icon svg {
    color: var(--color-terracotta);
}

.ct-region-card__content h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-region-card__content > p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.ct-region-card__details {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ct-region-card__details li {
    font-size: 11px;
    color: var(--color-gray-600);
    background: var(--color-sand-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* ----------------------------------------
   CT FORM SECTION - Luxury multi-step
   ---------------------------------------- */
.ct-form-section {
    background: linear-gradient(180deg, white 0%, var(--color-sand-light) 100%);
    padding: var(--space-20) 0;
}

.ct-form-section__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.ct-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}

/* Progress Steps */
.ct-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-10);
    padding: 0 var(--space-4);
}

.ct-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.ct-progress__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-sand-light);
    border: 2px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-progress__icon svg {
    color: var(--color-gray-400);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-progress__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover effects for progress steps */
.ct-progress__step:hover .ct-progress__icon {
    transform: scale(1.08);
    border-color: var(--color-terracotta-light);
    box-shadow: 0 4px 15px rgba(198, 93, 59, 0.15);
}

.ct-progress__step:hover .ct-progress__icon svg {
    color: var(--color-terracotta);
}

.ct-progress__step:hover .ct-progress__label {
    color: var(--color-terracotta);
}

/* Active step hover - subtle effect since already highlighted */
.ct-progress__step--active:hover .ct-progress__icon {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(198, 93, 59, 0.25);
}

/* Completed step hover */
.ct-progress__step--completed:hover .ct-progress__icon {
    transform: scale(1.08);
    border-color: var(--color-earth);
    box-shadow: 0 4px 15px rgba(139, 90, 43, 0.2);
}

.ct-progress__step--completed:hover .ct-progress__icon svg {
    color: white;
}

.ct-progress__step--completed:hover .ct-progress__label {
    color: var(--color-earth);
}

.ct-progress__step--active .ct-progress__icon {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-progress__step--active .ct-progress__icon svg {
    color: white;
}

.ct-progress__step--active .ct-progress__label {
    color: var(--color-terracotta);
}

.ct-progress__step--completed .ct-progress__icon {
    background: var(--color-earth);
    border-color: var(--color-earth);
}

.ct-progress__step--completed .ct-progress__icon svg {
    color: white;
}

.ct-progress__step--completed .ct-progress__label {
    color: var(--color-earth);
}

.ct-progress__line {
    width: 60px;
    height: 2px;
    background: var(--color-gray-200);
    margin: 0 var(--space-2);
    margin-bottom: 28px;
    transition: background 0.3s ease;
}

.ct-progress__line--completed {
    background: var(--color-earth);
}

/* Form Steps */
.ct-form__step {
    display: none;
}

.ct-form__step--active {
    display: block;
    animation: ctFadeUp 0.5s ease;
}

.ct-form__step-header {
    margin-bottom: var(--space-8);
}

.ct-form__step-header h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-form__step-header p {
    color: var(--color-gray-600);
}

/* Form Elements */
.ct-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ct-form__group {
    margin-bottom: var(--space-5);
}

.ct-form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-form__hint {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.ct-form__input,
.ct-form__select,
.ct-form__textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: white;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-form__input:hover,
.ct-form__select:hover,
.ct-form__textarea:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-form__input:focus,
.ct-form__select:focus,
.ct-form__textarea:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.ct-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Number Input */
.ct-number-input {
    display: flex;
    align-items: center;
}

.ct-number-input__btn {
    width: 48px;
    height: 48px;
    border: 1.5px solid #d1d5db;
    background: white;
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.25s ease;
}

.ct-number-input__btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
}

.ct-number-input__btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: none;
}

.ct-number-input__btn:hover {
    background: var(--color-sand-light);
    color: var(--color-terracotta);
}

.ct-number-input__field {
    width: 80px;
    height: 48px;
    text-align: center;
    border: 1.5px solid #d1d5db !important;
    border-radius: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    -moz-appearance: textfield;
    box-shadow: none !important;
}

.ct-number-input__field::-webkit-outer-spin-button,
.ct-number-input__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Destination Cards */
/* ----------------------------------------
   PREMIUM DESTINATION CARDS
   Luxury travel brand aesthetic
   ---------------------------------------- */
/* ========================================
   BLACK TOMATO STYLE - YOUR TRIP FORM
   Clean, premium, conversion-optimized
   ======================================== */

/* Trip Form Grid */
.ct-trip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.ct-trip-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ct-trip-field--full {
    grid-column: 1 / -1;
}

.ct-trip-field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: -0.01em;
}

.ct-trip-field__note {
    font-weight: 400;
    color: var(--color-gray-400);
    font-size: 13px;
}

.ct-trip-field__row {
    display: flex;
    gap: var(--space-3);
}

/* Clean Select Inputs */
.ct-trip-select {
    flex: 1;
    padding: 14px 16px;
    padding-right: 44px;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-body);
    color: var(--color-dark);
    background: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-trip-select:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-trip-select:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.ct-trip-select--full {
    width: 100%;
}

/* Multi-Select Dropdown */
.ct-multiselect {
    position: relative;
}

.ct-multiselect__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-multiselect__trigger:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-multiselect--open .ct-multiselect__trigger {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.ct-multiselect__trigger svg {
    color: var(--color-gray-400);
    transition: transform 0.2s ease;
}

.ct-multiselect--open .ct-multiselect__trigger svg {
    transform: rotate(180deg);
}

.ct-multiselect__placeholder {
    font-size: 15px;
    color: var(--color-gray-400);
}

.ct-multiselect__selected {
    font-size: 15px;
    color: var(--color-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 30px);
}

.ct-multiselect__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}

.ct-multiselect--open .ct-multiselect__dropdown {
    display: block;
    animation: dropdownFade 0.2s ease;
}

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

.ct-multiselect__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

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

.ct-multiselect__option input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-300);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--color-terracotta);
}

.ct-multiselect__option span {
    font-size: 14px;
    color: var(--color-dark);
}

.ct-multiselect__option--suggest {
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.ct-multiselect__option--suggest span {
    font-style: italic;
    color: var(--color-terracotta);
}

/* ========================================
   ENHANCED BUDGET SLIDER WITH TIERS
   Premium, modern design
   ======================================== */
.ct-budget-enhanced {
    margin-top: var(--space-4);
}

.ct-budget-enhanced__slider-wrapper {
    position: relative;
    padding-top: 40px; /* Space for floating pill */
    padding-bottom: var(--space-2);
}

/* Floating Value Pill */
.ct-budget-enhanced__value-pill {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-terracotta);
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(198, 93, 59, 0.35);
    transition: left 0.1s ease;
    z-index: 10;
}

.ct-budget-enhanced__value-pill::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-terracotta);
}

/* Track Container */
.ct-budget-enhanced__track {
    position: relative;
    height: 8px;
    background: var(--color-gray-100);
    border-radius: 4px;
}

/* Fill bar */
.ct-budget-enhanced__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, #e07652 100%);
    border-radius: 4px;
    transition: width 0.15s ease;
    pointer-events: none;
}

/* Custom Thumb (positioned by JavaScript) */
.ct-budget-enhanced__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 28px;
    height: 28px;
    background: white;
    border: 3px solid var(--color-terracotta);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    transition: left 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: none;
    z-index: 5;
}

.ct-budget-enhanced__track:hover .ct-budget-enhanced__thumb {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 5px 20px rgba(198, 93, 59, 0.4);
}

/* Slider Input - Hidden but functional */
.ct-budget-enhanced__input {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
}

/* Hide the native track and thumb - they're replaced by custom elements */
.ct-budget-enhanced__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: transparent;
    cursor: pointer;
}

.ct-budget-enhanced__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: grab;
}

.ct-budget-enhanced__input::-moz-range-track {
    width: 100%;
    height: 8px;
    background: transparent;
    cursor: pointer;
}

.ct-budget-enhanced__input::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: grab;
}

/* Range Labels */
.ct-budget-enhanced__range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-budget-enhanced__range-labels span {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-400);
}

/* Budget Tiers Grid - Premium Cards */
.ct-budget-tiers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.ct-budget-tier {
    background: white;
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-4);
    min-height: 160px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Subtle shine effect */
.ct-budget-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.ct-budget-tier:hover::before {
    left: 100%;
}

.ct-budget-tier:hover {
    border-color: var(--color-gray-300);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.ct-budget-tier--active {
    background: linear-gradient(145deg, #fff8f5 0%, #fff2eb 100%);
    border-color: var(--color-terracotta);
    border-width: 2px;
    box-shadow: 0 8px 35px rgba(198, 93, 59, 0.2), inset 0 0 0 1px rgba(198, 93, 59, 0.1);
    transform: translateY(-4px) scale(1.02);
}

/* Checkmark for active state */
.ct-budget-tier--active::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 12px;
    width: 22px;
    height: 22px;
    background: var(--color-terracotta);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkPop 0.3s ease;
}

@keyframes checkPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.ct-budget-tier__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ct-budget-tier__icon {
    font-size: 32px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.ct-budget-tier:hover .ct-budget-tier__icon {
    transform: scale(1.15);
}

.ct-budget-tier__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.ct-budget-tier--active .ct-budget-tier__name {
    color: var(--color-terracotta);
}

.ct-budget-tier__range {
    font-size: 12px;
    color: var(--color-gray-500);
    font-weight: 600;
    margin-top: var(--space-1);
}

.ct-budget-tier--active .ct-budget-tier__range {
    color: var(--color-terracotta);
}

.ct-budget-tier__desc {
    font-size: 12px;
    color: var(--color-gray-500);
    line-height: 1.5;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s ease;
}

.ct-budget-tier--active .ct-budget-tier__desc {
    opacity: 1;
    max-height: 60px;
    margin-top: var(--space-3);
    color: var(--color-gray-600);
}

/* Responsive Budget Tiers */
@media (max-width: 1200px) {
    .ct-budget-tiers {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-3);
    }
    
    .ct-budget-tier {
        min-height: 140px;
        padding: var(--space-5) var(--space-3);
    }
    
    .ct-budget-tier__icon {
        font-size: 28px;
    }
    
    .ct-budget-tier__name {
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    .ct-budget-tiers {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }
    
    .ct-budget-tier {
        min-height: 150px;
        padding: var(--space-5) var(--space-4);
    }
    
    .ct-budget-tier__icon {
        font-size: 30px;
    }
    
    .ct-budget-tier__name {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .ct-budget-tiers {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .ct-budget-tier {
        min-height: 130px;
        padding: var(--space-4) var(--space-3);
    }
    
    .ct-budget-tier__icon {
        font-size: 26px;
    }
    
    .ct-budget-tier__name {
        font-size: 12px;
    }
    
    .ct-budget-tier__range {
        font-size: 11px;
    }
    
    .ct-budget-tier--active::after {
        width: 18px;
        height: 18px;
        font-size: 10px;
        top: 8px;
        right: 8px;
    }
    
    .ct-budget-enhanced__value-pill {
        font-size: 14px;
        padding: 6px 14px;
    }
}

@media (max-width: 480px) {
    .ct-budget-tiers {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .ct-budget-tier {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
        text-align: left;
        min-height: auto;
        padding: var(--space-4) var(--space-5);
    }
    
    .ct-budget-tier__header {
        flex-direction: row;
        margin-bottom: 0;
        flex: 1;
        gap: var(--space-3);
    }
    
    .ct-budget-tier__icon {
        font-size: 28px;
    }
    
    .ct-budget-tier__name {
        font-size: 14px;
    }
    
    .ct-budget-tier__range {
        font-size: 12px;
        font-weight: 600;
        color: var(--color-gray-600);
        margin-left: auto;
        margin-top: 0;
    }
    
    .ct-budget-tier--active .ct-budget-tier__range {
        color: var(--color-terracotta);
    }
    
    .ct-budget-tier__desc {
        display: none;
    }
    
    .ct-budget-tier--active::after {
        top: 50%;
        transform: translateY(-50%);
        right: var(--space-4);
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .ct-trip-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .ct-trip-field--full {
        grid-column: 1;
    }
    
    .ct-trip-field__row {
        flex-direction: row;
    }
    
    .ct-trip-select {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .ct-multiselect__trigger {
        padding: 12px 14px;
    }
    
    .ct-multiselect__placeholder,
    .ct-multiselect__selected {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ct-trip-field__label {
        font-size: 13px;
    }
    
}

/* Fallback Grid for smaller cards */
.ct-destination-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    perspective: 1000px;
}

.ct-destination-card {
    position: relative;
    cursor: pointer;
    opacity: 1;
    transform-style: preserve-3d;
}

/* Elegant staggered entrance animation */
.ct-destination-card:nth-child(1) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.05s forwards; }
.ct-destination-card:nth-child(2) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.1s forwards; }
.ct-destination-card:nth-child(3) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards; }
.ct-destination-card:nth-child(4) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards; }
.ct-destination-card:nth-child(5) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.25s forwards; }
.ct-destination-card:nth-child(6) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards; }
.ct-destination-card:nth-child(7) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.35s forwards; }
.ct-destination-card:nth-child(8) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.4s forwards; }
.ct-destination-card:nth-child(9) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.45s forwards; }

@keyframes ctDestinationReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ct-destination-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ct-destination-card__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    min-height: 150px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
    transition: 
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        border-color 0.3s ease,
        background 0.3s ease;
    overflow: hidden;
    will-change: transform;
}

/* Elegant accent line at top */
.ct-destination-card__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-terracotta) 20%,
        var(--color-terracotta) 80%,
        transparent 100%);
    border-radius: 0 0 4px 4px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Subtle glow effect on hover */
.ct-destination-card__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(198, 93, 59, 0.08) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Premium hover state */
.ct-destination-card:hover .ct-destination-card__inner {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(198, 93, 59, 0.15);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.08),
        0 20px 60px rgba(198, 93, 59, 0.06);
}

.ct-destination-card:hover .ct-destination-card__inner::before {
    transform: translateX(-50%) scaleX(1);
}

.ct-destination-card:hover .ct-destination-card__inner::after {
    opacity: 1;
}

.ct-destination-card:hover .ct-destination-card__icon {
    transform: scale(1.2) translateY(-4px);
}

.ct-destination-card:hover h4 {
    color: var(--color-terracotta);
}

/* Selected/checked state - Luxury highlight */
.ct-destination-card input:checked + .ct-destination-card__inner {
    background: linear-gradient(145deg, #fffaf8 0%, #fff5f0 100%);
    border-color: var(--color-terracotta);
    border-width: 2px;
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
        0 8px 30px rgba(198, 93, 59, 0.12),
        0 16px 50px rgba(198, 93, 59, 0.08),
        inset 0 0 0 1px rgba(198, 93, 59, 0.05);
}

.ct-destination-card input:checked + .ct-destination-card__inner::before {
    transform: translateX(-50%) scaleX(1);
    width: 100%;
    border-radius: 0;
    background: var(--color-terracotta);
}

.ct-destination-card input:checked + .ct-destination-card__inner h4 {
    color: var(--color-terracotta);
}

/* Elegant checkmark indicator */
.ct-destination-card__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 26px;
    height: 26px;
    background: var(--color-terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 3px 10px rgba(198, 93, 59, 0.3);
}

.ct-destination-card__check svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 3;
}

.ct-destination-card input:checked ~ .ct-destination-card__check,
.ct-destination-card input:checked + .ct-destination-card__inner + .ct-destination-card__check {
    opacity: 1;
    transform: scale(1);
}

/* Icon container - Premium styling */
.ct-destination-card__icon {
    font-size: 2.8rem;
    margin-bottom: var(--space-3);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* Title - Refined typography */
.ct-destination-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 4px;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    transition: color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Subtitle - Elegant detail */
.ct-destination-card span {
    font-size: 11px;
    color: var(--color-gray-400);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Special "Surprise Me" card - Luxurious treatment */
.ct-destination-card--special .ct-destination-card__inner {
    background: linear-gradient(145deg, #fdfcfb 0%, #f8f6f3 100%);
    border: 2px dashed rgba(198, 93, 59, 0.25);
    border-radius: 20px;
}

.ct-destination-card--special:hover .ct-destination-card__inner {
    border-color: var(--color-terracotta);
    border-style: dashed;
    background: linear-gradient(145deg, #fffaf8 0%, #fff5f0 100%);
}

.ct-destination-card--special .ct-destination-card__icon {
    animation: ctLuxurySparkle 3s ease-in-out infinite;
}

@keyframes ctLuxurySparkle {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    }
    25% { 
        transform: scale(1.15) rotate(-8deg);
        filter: drop-shadow(0 4px 12px rgba(198, 93, 59, 0.15));
    }
    50% { 
        transform: scale(1.05) rotate(0deg);
        filter: drop-shadow(0 2px 6px rgba(198, 93, 59, 0.1));
    }
    75% { 
        transform: scale(1.15) rotate(8deg);
        filter: drop-shadow(0 4px 12px rgba(198, 93, 59, 0.15));
    }
}

/* Active/focus state for accessibility */
.ct-destination-card:focus-within .ct-destination-card__inner {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .ct-destination-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }
    
    .ct-destination-card__inner {
        min-height: 130px;
        padding: var(--space-5) var(--space-3);
    }
    
    .ct-destination-card__icon {
        font-size: 2.4rem;
    }
    
    .ct-destination-card h4 {
        font-size: 14px;
    }
}

/* Responsive - Large phones / Small tablets */
@media (max-width: 768px) {
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .ct-destination-card__inner {
        min-height: 120px;
        padding: var(--space-4) var(--space-3);
        border-radius: 16px;
    }
    
    .ct-destination-card__icon {
        font-size: 2.2rem;
        margin-bottom: var(--space-2);
    }
    
    .ct-destination-card h4 {
        font-size: 13px;
    }
    
    .ct-destination-card span {
        font-size: 10px;
    }
    
    /* Reduce animation intensity on mobile for performance */
    .ct-destination-card:hover .ct-destination-card__inner {
        transform: translateY(-4px) scale(1.01);
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .ct-destination-card__inner {
        min-height: 100px;
        padding: var(--space-3) var(--space-2);
        border-radius: 14px;
    }
    
    .ct-destination-card__icon {
        font-size: 2rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .ct-destination-card__inner {
        min-height: 110px;
        padding: var(--space-4) var(--space-3);
    }
    
    .ct-destination-card__icon {
        font-size: 1.75rem;
        margin-bottom: var(--space-2);
    }
    
    .ct-destination-card h4 {
        font-size: var(--text-sm);
    }
    
    .ct-destination-card input:checked + .ct-destination-card__inner::after {
        width: 20px;
        height: 20px;
        top: var(--space-2);
        right: var(--space-2);
        background-size: 12px;
    }
}

/* Style Cards */
.ct-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.ct-style-card {
    position: relative;
    cursor: pointer;
}

.ct-style-card input {
    position: absolute;
    opacity: 0;
}

.ct-style-card__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-sand-light);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.ct-style-card:hover .ct-style-card__inner {
    border-color: var(--color-terracotta);
}

.ct-style-card input:checked + .ct-style-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.08);
}

.ct-style-card__icon {
    font-size: 1.5rem;
}

.ct-style-card__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

/* Accommodation Cards */
.ct-accommodation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ct-accommodation-card {
    position: relative;
    cursor: pointer;
}

.ct-accommodation-card input {
    position: absolute;
    opacity: 0;
}

.ct-accommodation-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5);
    background: var(--color-sand-light);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}

.ct-accommodation-card:hover .ct-accommodation-card__inner {
    transform: scale(1.02);
    border-color: var(--color-terracotta);
}

.ct-accommodation-card input:checked + .ct-accommodation-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.08);
}

.ct-accommodation-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.ct-accommodation-card h4 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-accommodation-card p {
    font-size: 11px;
    color: var(--color-gray-500);
}

/* Interest Tags */
.ct-interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-interest-tag {
    position: relative;
    cursor: pointer;
}

.ct-interest-tag input {
    position: absolute;
    opacity: 0;
}

.ct-interest-tag span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-sand-light);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.ct-interest-tag:hover span {
    border-color: var(--color-terracotta);
}

.ct-interest-tag input:checked + span {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

.ct-interest-tag--special span {
    border-style: dashed;
    border-color: var(--color-gray-300);
}

/* Checkbox */
.ct-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    margin-bottom: var(--space-4);
}

.ct-checkbox input {
    display: none;
}

.ct-checkbox__box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ct-checkbox input:checked + .ct-checkbox__box {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-checkbox input:checked + .ct-checkbox__box::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.ct-checkbox__label {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Form Navigation */
.ct-form__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-100);
}

/* Success State */
.ct-success {
    text-align: center;
    padding: var(--space-12);
}

.ct-success__icon {
    width: 80px;
    height: 80px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.ct-success__icon svg {
    color: #22c55e;
}

.ct-success h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.ct-success p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* Spinner */
.ct-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ctSpin 0.8s linear infinite;
}

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

/* ----------------------------------------
   CT WHY SECTION - Trust & Benefits
   ---------------------------------------- */
.ct-why {
    background: white;
    padding: var(--space-16) 0;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.ct-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
}

.ct-why__item {
    text-align: center;
}

.ct-why__icon {
    width: 72px;
    height: 72px;
    background: var(--color-sand-light);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}

.ct-why__icon svg {
    color: var(--color-terracotta);
}

.ct-why__item h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.ct-why__item p {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: 1.7;
    max-width: 280px;
    margin: 0 auto;
}

/* ----------------------------------------
   CT IDEAS SECTION - Trip Inspiration
   ---------------------------------------- */
.ct-ideas {
    background: var(--color-sand-light);
    padding: var(--space-20) 0;
}

.ct-ideas__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.ct-ideas__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.ct-idea-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ct-idea-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.ct-idea-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ct-idea-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ct-idea-card:hover .ct-idea-card__image img {
    transform: scale(1.08);
}

.ct-idea-card__tag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: white;
    color: var(--color-dark);
    font-size: 11px;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-idea-card__content {
    padding: var(--space-5);
}

.ct-idea-card__content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-idea-card__content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.ct-idea-card__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
}

/* ----------------------------------------
   CT FINAL CTA SECTION
   ---------------------------------------- */
.ct-final-cta {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-earth) 100%);
    padding: var(--space-16) 0;
}

.ct-final-cta__content {
    text-align: center;
}

.ct-final-cta h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
}

.ct-final-cta p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-8);
}

/* ----------------------------------------
   CT RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1024px) {
    .ct-hero {
        min-height: 80vh;
    }
    
    .ct-regions__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .ct-regions__map {
        position: static;
        order: 2;
    }
    
    .ct-regions__cards {
        order: 1;
    }
    
    .ct-why__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .ct-ideas__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ct-hero__content {
        padding: var(--space-6);
    }
    
    .ct-hero__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .ct-hero__actions .ct-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .ct-hero__scroll-hint {
        display: none;
    }
    
    .ct-regions {
        padding: var(--space-12) 0;
    }
    
    .ct-map {
        min-height: 300px;
    }
    
    .ct-form-section {
        padding: var(--space-12) 0;
    }
    
    .ct-form-wrapper {
        padding: var(--space-6);
        border-radius: var(--radius-xl);
    }
    
    .ct-progress__label {
        display: none;
    }
    
    .ct-progress__line {
        width: 24px;
        margin-bottom: 0;
    }
    
    .ct-form__row {
        grid-template-columns: 1fr;
    }
    
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-style-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-form__nav {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .ct-form__nav .ct-btn {
        width: 100%;
    }
    
    .ct-form__nav .ct-btn--prev {
        order: 2;
    }
    
    .ct-ideas__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ct-hero__title-line {
        font-size: 2rem;
    }
    
    .ct-hero__badge {
        font-size: 9px;
        padding: var(--space-2) var(--space-3);
    }
    
    .ct-section-title {
        font-size: 1.75rem;
    }
    
    .ct-destination-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-progress__icon {
        width: 40px;
        height: 40px;
    }
    
    .ct-progress__icon svg {
        width: 16px;
        height: 16px;
    }
    
    .ct-progress__line {
        width: 16px;
    }
    
    .ct-region-card {
        flex-direction: column;
        text-align: center;
    }
    
    .ct-region-card__icon {
        margin: 0 auto var(--space-3);
    }
}

.checkbox-card {
    position: relative;
    cursor: pointer;
}

.checkbox-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    text-align: center;
}

.checkbox-icon {
    font-size: 1.5rem;
}

.checkbox-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

.checkbox-card input:checked + .checkbox-content {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.checkbox-card:hover .checkbox-content {
    border-color: var(--color-terracotta);
}

.checkbox-card-full {
    grid-column: span 3;
}

/* Radio Grid */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.radio-card {
    position: relative;
    cursor: pointer;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.radio-icon {
    font-size: 1.25rem;
}

.radio-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

.radio-card input:checked + .radio-content {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.radio-card:hover .radio-content {
    border-color: var(--color-terracotta);
}

/* Interest Tags */
.interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.interest-tag {
    position: relative;
    cursor: pointer;
}

.interest-tag input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.interest-tag span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.interest-tag input:checked + span {
    border-color: var(--color-terracotta);
    background: var(--color-terracotta);
    color: white;
}

.interest-tag:hover span {
    border-color: var(--color-terracotta);
}

.interest-tag-special span {
    background: var(--color-sand-light);
    border-style: dashed;
}

/* Inline Checkbox */
.checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--color-terracotta);
    cursor: pointer;
}

.checkbox-inline span {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Form Navigation */
.form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}

.btn-prev {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-next,
.btn-submit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Success Message */
.form-success {
    text-align: center;
    padding: var(--space-12) var(--space-8);
}

.success-icon {
    width: 80px;
    height: 80px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.success-icon svg {
    color: #22c55e;
}

.form-success h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.form-success p {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.form-success .success-note {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

/* Spinner */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Inspiration Section */
.custom-trip-inspiration {
    background: var(--color-sand-light);
    padding: var(--space-16) 0;
}

.inspiration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.inspiration-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.inspiration-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.inspiration-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.inspiration-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.inspiration-card:hover .inspiration-image img {
    transform: scale(1.08);
}

.inspiration-content {
    padding: var(--space-5);
}

.inspiration-duration {
    display: inline-block;
    background: var(--color-sand);
    color: var(--color-earth);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inspiration-content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.inspiration-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.inspiration-link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
}

/* Trust Strip */
.custom-trip-trust {
    background: var(--color-dark);
    padding: var(--space-8) 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
}

.trust-item svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.trust-item span {
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .custom-trip-hero {
        min-height: 60vh;
    }
    
    .process-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .process-step {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    
    .inspiration-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .custom-trip-hero-content {
        padding: var(--space-12) var(--space-4);
    }
    
    .custom-trip-process {
        padding: var(--space-8) 0;
    }
    
    .custom-trip-form-section {
        padding: var(--space-10) 0;
    }
    
    .custom-trip-form-wrapper {
        padding: var(--space-6);
        border-radius: var(--radius-xl);
    }
    
    .form-progress {
        overflow-x: auto;
        padding-bottom: var(--space-4);
        margin-bottom: var(--space-6);
    }
    
    .progress-step .step-label {
        display: none;
    }
    
    .progress-line {
        width: 24px;
        margin-bottom: 0;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .checkbox-card-full {
        grid-column: span 2;
    }
    
    .radio-grid {
        grid-template-columns: 1fr;
    }
    
    .form-nav {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .form-nav .btn {
        width: 100%;
        justify-content: center;
    }
    
    .btn-prev {
        order: 2;
    }
    
    .btn-next,
    .btn-submit {
        order: 1;
    }
    
    .inspiration-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .inspiration-card {
        display: grid;
        grid-template-columns: 120px 1fr;
    }
    
    .inspiration-image {
        height: 100%;
        min-height: 120px;
    }
    
    .inspiration-content {
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .trust-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .custom-trip-hero h1 {
        font-size: 1.75rem;
    }
    
    .custom-trip-hero .hero-subtitle {
        font-size: var(--text-base);
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-card-full {
        grid-column: span 1;
    }
    
    .checkbox-content {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--space-3);
    }
    
    .checkbox-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .process-icon {
        width: 48px;
        height: 48px;
    }
    
    .process-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .step-header h3 {
        font-size: var(--text-lg);
    }
    
    .custom-trip-form-section .form-header h2 {
        font-size: var(--text-2xl);
    }
}

/* ========================================
   CUSTOM TRIP PAGE - LUXURY REDESIGN
   Premium immersive travel experience
   BEM naming convention
   ======================================== */

/* Container */
.ct-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ----------------------------------------
   CT HERO - Full-screen video hero
   ---------------------------------------- */
.ct-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-hero__video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ct-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ct-hero__overlay {
    position: absolute;
    inset: 0;
    /* Strong bottom-to-top dark gradient for text readability */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.ct-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    padding: var(--space-8);
}

.ct-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-6);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ct-hero__badge svg {
    color: var(--color-terracotta);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.ct-hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-6);
    line-height: 1.1;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6),
                 0 6px 30px rgba(0, 0, 0, 0.4);
}

.ct-hero__title span {
    font-weight: 700;
    font-style: italic;
    color: #ffd9a8; /* Bright sand/gold for contrast */
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6),
                 0 6px 30px rgba(0, 0, 0, 0.4);
}

.ct-hero__subtitle {
    font-size: var(--text-xl);
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: var(--space-10);
    font-weight: 400;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ct-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.ct-hero__scroll-hint {
    position: absolute;
    bottom: var(--space-10);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.ct-hero__scroll-arrow {
    margin-top: var(--space-2);
    animation: ctBounce 2s infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

@keyframes ctBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(8px); }
    60% { transform: translateY(4px); }
}

/* ----------------------------------------
   CT BUTTONS
   ---------------------------------------- */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.ct-btn--primary {
    background: var(--color-terracotta);
    color: white;
    border-color: var(--color-terracotta);
}

.ct-btn--primary:hover {
    background: var(--color-terracotta-dark);
    border-color: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(198, 93, 59, 0.4);
}

.ct-btn--glow {
    box-shadow: 0 4px 20px rgba(198, 93, 59, 0.3);
}

.ct-btn--ghost {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.ct-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.ct-btn--outline {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-gray-300);
}

.ct-btn--outline:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.ct-btn--lg {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-lg);
}

/* ----------------------------------------
   CT ANIMATIONS
   ---------------------------------------- */
.ct-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.ct-animate--fade-down {
    transform: translateY(-30px);
}

.ct-animate--fade-up {
    transform: translateY(30px);
}

.ct-animate--fade-left {
    transform: translateX(30px);
}

.ct-animate--fade-right {
    transform: translateX(-30px);
}

.ct-animate--visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ----------------------------------------
   CT SECTION HEADER
   ---------------------------------------- */
.ct-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.ct-section-header__eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-earth) 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-4);
}

.ct-section-header__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
}

.ct-section-header__desc {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* ----------------------------------------
   CT REGIONS SECTION
   ---------------------------------------- */
.ct-regions {
    padding: var(--space-20) 0;
    background: linear-gradient(180deg, #faf6f0 0%, white 100%);
}

.ct-regions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

.ct-regions__map {
    position: sticky;
    top: 120px;
}

.ct-regions__map-visual {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.ct-regions__map-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.ct-regions__hotspot {
    position: absolute;
    cursor: pointer;
}

.ct-regions__hotspot--north { top: 15%; left: 30%; }
.ct-regions__hotspot--imperial { top: 35%; left: 45%; }
.ct-regions__hotspot--coast { top: 50%; left: 15%; }
.ct-regions__hotspot--atlas { top: 55%; left: 40%; }
.ct-regions__hotspot--sahara { top: 70%; left: 65%; }

.ct-regions__hotspot-pulse {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(198, 93, 59, 0.3);
    border-radius: 50%;
    animation: ctPulse 2s infinite;
    transform: translate(-50%, -50%);
}

.ct-regions__hotspot-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-terracotta);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes ctPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.ct-regions__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ct-region-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ct-region-card:hover,
.ct-region-card--active {
    border-color: var(--color-terracotta);
    box-shadow: 0 8px 30px rgba(198, 93, 59, 0.1);
}

.ct-region-card--active {
    background: rgba(198, 93, 59, 0.03);
}

.ct-region-card__icon {
    width: 48px;
    height: 48px;
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-region-card--active .ct-region-card__icon {
    background: var(--color-terracotta);
}

.ct-region-card--active .ct-region-card__icon svg {
    color: white;
}

.ct-region-card__icon svg {
    color: var(--color-terracotta);
}

.ct-region-card__content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-region-card__content > p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.ct-region-card__features {
    list-style: none;
    display: none;
}

.ct-region-card--active .ct-region-card__features {
    display: block;
}

.ct-region-card__features li {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-1);
}

/* ----------------------------------------
   CT FORM SECTION
   ---------------------------------------- */
.ct-form-section {
    padding: var(--space-20) 0;
    background: white;
}

.ct-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: #faf8f5;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.06);
}

/* Form Progress */
.ct-form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-10);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ct-form-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.ct-form-progress__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ct-form-progress__icon svg {
    color: var(--color-gray-400);
    transition: color 0.3s ease;
}

.ct-form-progress__step span {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-form-progress__step--active .ct-form-progress__icon {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-form-progress__step--active .ct-form-progress__icon svg {
    color: white;
}

.ct-form-progress__step--active span {
    color: var(--color-terracotta);
}

.ct-form-progress__step--completed .ct-form-progress__icon {
    background: var(--color-earth);
    border-color: var(--color-earth);
}

.ct-form-progress__step--completed .ct-form-progress__icon svg {
    color: white;
}

.ct-form-progress__line {
    width: 40px;
    height: 2px;
    background: var(--color-gray-200);
    margin-bottom: 28px;
    transition: background 0.3s ease;
}

.ct-form-progress__line--completed {
    background: var(--color-earth);
}

/* Form Steps */
.ct-form__step {
    display: none;
    animation: ctFadeIn 0.5s ease;
}

.ct-form__step--active {
    display: block;
}

@keyframes ctFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.ct-form__step-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.ct-form__step-header h3 {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-form__step-header p {
    color: var(--color-gray-600);
}

/* Destination Cards */
.ct-destination-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.ct-destination-card {
    cursor: pointer;
}

.ct-destination-card input {
    display: none;
}

.ct-destination-card__inner {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: white;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.ct-destination-card__inner:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.ct-destination-card input:checked + .ct-destination-card__inner {
    border-color: var(--color-terracotta);
}

.ct-destination-card__img {
    height: 120px;
    overflow: hidden;
}

.ct-destination-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ct-destination-card__inner:hover .ct-destination-card__img img {
    transform: scale(1.1);
}

.ct-destination-card__content {
    padding: var(--space-4);
    text-align: center;
}

.ct-destination-card__content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-destination-card__content span {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.ct-destination-card__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 28px;
    height: 28px;
    background: var(--color-terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.ct-destination-card__check svg {
    color: white;
}

.ct-destination-card input:checked + .ct-destination-card__inner .ct-destination-card__check {
    opacity: 1;
    transform: scale(1);
}

.ct-destination-card--suggest .ct-destination-card__inner {
    background: var(--color-sand-light);
    border: 2px dashed var(--color-gray-300);
}

.ct-destination-card--suggest .ct-destination-card__icon-wrap {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-destination-card--suggest .ct-destination-card__icon-wrap svg {
    color: var(--color-gray-400);
}

/* Form Inputs */
.ct-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ct-form__group {
    margin-bottom: var(--space-6);
}

.ct-form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-required {
    color: var(--color-terracotta);
}

.ct-form__input,
.ct-form__select,
.ct-form__textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: white;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-form__input:hover,
.ct-form__select:hover,
.ct-form__textarea:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-form__input:focus,
.ct-form__select:focus,
.ct-form__textarea:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.ct-form__select-wrap {
    position: relative;
}

.ct-form__select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-gray-400);
    pointer-events: none;
}

.ct-form__select {
    appearance: none;
    cursor: pointer;
}

.ct-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Number Input */
.ct-number-input {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ct-number-input__btn {
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    font-size: var(--text-xl);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ct-number-input__btn:hover {
    background: var(--color-sand-light);
    color: var(--color-terracotta);
}

.ct-number-input__field {
    flex: 1;
    text-align: center;
    border: none;
    font-size: var(--text-lg);
    font-weight: 600;
    padding: var(--space-3);
    -moz-appearance: textfield;
}

.ct-number-input__field::-webkit-outer-spin-button,
.ct-number-input__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Style Cards */
.ct-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.ct-style-card {
    cursor: pointer;
}

.ct-style-card input {
    display: none;
}

.ct-style-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    text-align: center;
}

.ct-style-card__inner:hover {
    border-color: var(--color-terracotta);
}

.ct-style-card input:checked + .ct-style-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.ct-style-card__emoji {
    font-size: 1.5rem;
}

.ct-style-card__text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

/* Accommodation Cards */
.ct-accommodation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-accommodation-card {
    cursor: pointer;
}

.ct-accommodation-card input {
    display: none;
}

.ct-accommodation-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    text-align: center;
}

.ct-accommodation-card__inner:hover {
    border-color: var(--color-terracotta);
    transform: scale(1.02);
}

.ct-accommodation-card input:checked + .ct-accommodation-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.ct-accommodation-card__icon {
    font-size: 1.5rem;
}

.ct-accommodation-card__text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

/* Interest Tags */
.ct-interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.ct-interest-tag {
    cursor: pointer;
}

.ct-interest-tag input {
    display: none;
}

.ct-interest-tag span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.ct-interest-tag span:hover {
    border-color: var(--color-terracotta);
}

.ct-interest-tag input:checked + span {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

.ct-interest-tag--special span {
    background: var(--color-sand-light);
    border-style: dashed;
}

/* Checkbox */
.ct-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    margin-bottom: var(--space-6);
}

.ct-form__checkbox input {
    display: none;
}

.ct-form__checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ct-form__checkbox input:checked + .ct-form__checkbox-box {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-form__checkbox input:checked + .ct-form__checkbox-box::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.ct-form__checkbox-text {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Form Navigation */
.ct-form__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}

/* Form Success */
.ct-form__success {
    display: none;
    text-align: center;
    padding: var(--space-12);
}

.ct-form__success-icon {
    width: 80px;
    height: 80px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.ct-form__success-icon svg {
    color: #22c55e;
}

.ct-form__success h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.ct-form__success p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* Spinner */
.ct-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ctSpin 0.8s linear infinite;
}

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

/* ========================================
   PREMIUM BUDGET SELECTION
   ======================================== */
.ct-budget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ct-budget-card {
    position: relative;
    cursor: pointer;
}

.ct-budget-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-budget-card__inner {
    padding: var(--space-5);
    background: white;
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-budget-card__inner:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(198, 93, 59, 0.1);
}

.ct-budget-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.ct-budget-card__range {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-budget-card__label {
    font-size: 12px;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-budget-card input:checked + .ct-budget-card__inner {
    background: linear-gradient(145deg, #fffaf8 0%, #fff5f0 100%);
    border-color: var(--color-terracotta);
    box-shadow: 0 8px 30px rgba(198, 93, 59, 0.15);
}

.ct-budget-card input:checked + .ct-budget-card__inner .ct-budget-card__range {
    color: var(--color-terracotta);
}

/* ========================================
   PREMIUM ACTIVITY TAGS
   ======================================== */
.ct-activity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-activity-tag {
    position: relative;
    cursor: pointer;
}

.ct-activity-tag input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-activity-tag__inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all 0.3s ease;
}

.ct-activity-tag__inner:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.ct-activity-tag__icon {
    font-size: 18px;
}

.ct-activity-tag input:checked + .ct-activity-tag__inner {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

/* ========================================
   SPECIAL REQUESTS TEXTAREA
   ======================================== */
.ct-special-requests {
    margin-bottom: var(--space-6);
}

.ct-special-requests__textarea {
    width: 100%;
    min-height: 140px;
    padding: var(--space-4);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    font-size: 15px;
    font-family: var(--font-body);
    resize: vertical;
    transition: all 0.3s ease;
}

.ct-special-requests__textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 4px rgba(198, 93, 59, 0.1);
}

.ct-special-requests__textarea::placeholder {
    color: var(--color-gray-400);
}

.ct-special-requests__hint {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ct-special-requests__hint svg {
    color: var(--color-terracotta);
}

/* ========================================
   WHATSAPP INTEGRATION
   ======================================== */
.ct-whatsapp-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.ct-whatsapp-option:hover {
    border-color: #22c55e;
}

.ct-whatsapp-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-whatsapp-option__icon {
    width: 48px;
    height: 48px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-whatsapp-option__icon svg {
    color: white;
    width: 24px;
    height: 24px;
}

.ct-whatsapp-option__content {
    flex: 1;
}

.ct-whatsapp-option__title {
    font-size: 15px;
    font-weight: 700;
    color: #166534;
    margin-bottom: var(--space-1);
}

.ct-whatsapp-option__desc {
    font-size: 13px;
    color: #14532d;
    opacity: 0.8;
}

.ct-whatsapp-option__check {
    width: 24px;
    height: 24px;
    border: 2px solid #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ct-whatsapp-option__check svg {
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ct-whatsapp-option input:checked ~ .ct-whatsapp-option__check {
    background: #22c55e;
}

.ct-whatsapp-option input:checked ~ .ct-whatsapp-option__check svg {
    opacity: 1;
}

/* Phone Input with Country Code */
.ct-phone-input {
    display: flex;
    gap: var(--space-2);
}

.ct-phone-input__country {
    width: 120px;
    flex-shrink: 0;
}

.ct-phone-input__number {
    flex: 1;
}

/* Quick WhatsApp CTA */
.ct-whatsapp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: #25D366;
    color: white;
    border-radius: var(--radius-xl);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: var(--space-4);
}

.ct-whatsapp-cta:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}

.ct-whatsapp-cta svg {
    width: 24px;
    height: 24px;
}

/* Responsive Budget */
@media (max-width: 900px) {
    .ct-budget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ct-budget-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-budget-card__inner {
        padding: var(--space-4);
    }
    
    .ct-activity-grid {
        gap: var(--space-2);
    }
    
    .ct-activity-tag__inner {
        padding: var(--space-2) var(--space-3);
        font-size: 13px;
    }
}

/* ----------------------------------------
   CT WHY SECTION
   ---------------------------------------- */
.ct-why {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, white 0%, #faf6f0 100%);
}

.ct-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.ct-why__card {
    text-align: center;
    padding: var(--space-8);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
}

.ct-why__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.08);
}

.ct-why__icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-earth) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}

.ct-why__icon svg {
    color: white;
}

.ct-why__card h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.ct-why__card p {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* ----------------------------------------
   CT INSPIRATION SECTION
   ---------------------------------------- */
.ct-inspiration {
    padding: var(--space-20) 0;
    background: var(--color-sand-light);
}

.ct-inspiration__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.ct-inspiration-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
}

.ct-inspiration-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.ct-inspiration-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ct-inspiration-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ct-inspiration-card:hover .ct-inspiration-card__image img {
    transform: scale(1.1);
}

.ct-inspiration-card__tag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: white;
    color: var(--color-earth);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-inspiration-card__content {
    padding: var(--space-5);
}

.ct-inspiration-card__content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-inspiration-card__content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.ct-inspiration-card__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
}

/* ----------------------------------------
   CT FINAL CTA
   ---------------------------------------- */
.ct-final-cta {
    padding: var(--space-20) 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, #2d2d2d 100%);
    text-align: center;
}

.ct-final-cta__content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
}

.ct-final-cta__content p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-8);
}

/* ----------------------------------------
   CT RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1024px) {
    .ct-regions__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .ct-regions__map {
        position: static;
    }
    
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-style-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-accommodation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-why__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .ct-inspiration__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ct-hero {
        min-height: 90vh;
    }
    
    .ct-hero__content {
        padding: var(--space-6);
    }
    
    .ct-hero__scroll-hint {
        display: none;
    }
    
    .ct-form-wrapper {
        padding: var(--space-6);
    }
    
    .ct-form-progress__step span {
        display: none;
    }
    
    .ct-form-progress__line {
        width: 24px;
        margin-bottom: 0;
    }
    
    .ct-form__row {
        grid-template-columns: 1fr;
    }
    
    .ct-destination-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
    
    .ct-destination-card__img {
        height: 80px;
    }
    
    .ct-style-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .ct-form__nav {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .ct-form__nav .ct-btn {
        width: 100%;
    }
    
    .ct-form__nav .ct-btn--prev {
        order: 2;
    }
    
    .ct-form__nav .ct-btn--next,
    .ct-form__nav .ct-btn--submit {
        order: 1;
    }
    
    .ct-inspiration__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ct-container {
        padding: 0 var(--space-4);
    }
    
    .ct-hero__title {
        font-size: 2rem;
    }
    
    .ct-hero__subtitle {
        font-size: var(--text-base);
    }
    
    .ct-hero__badge {
        font-size: 10px;
        padding: var(--space-2) var(--space-3);
    }
    
    .ct-section-header {
        margin-bottom: var(--space-8);
    }
    
    .ct-section-header__title {
        font-size: 1.75rem;
    }
    
    .ct-regions {
        padding: var(--space-12) 0;
    }
    
    .ct-destination-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-destination-card__img {
        height: 100px;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-form-progress {
        gap: var(--space-1);
    }
    
    .ct-form-progress__icon {
        width: 40px;
        height: 40px;
    }
    
    .ct-form-progress__icon svg {
        width: 16px;
        height: 16px;
    }
    
    .ct-form-progress__line {
        width: 16px;
    }
}

/* ========================================
   MOROCCO LEAFLET MAP COMPONENT
   Real interactive map with OpenStreetMap
   Fully responsive layout
   ======================================== */

.morocco-leaflet-map {
    position: relative;
    width: 100%;
}

.morocco-leaflet-map__wrapper {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.morocco-leaflet-map__container {
    position: relative;
    flex: 1;
}

.morocco-leaflet-map__map {
    width: 100%;
    height: 320px; /* Mobile default */
    z-index: 1;
}

/* Desktop Info Panel - overlay on map bottom-left */
.morocco-leaflet-map__info--desktop {
    display: none; /* Hidden on mobile by default */
}

/* Mobile Info Panel - below map as separate card */
.morocco-leaflet-map__info--mobile {
    display: block; /* Shown on mobile by default */
    background: white;
    padding: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

/* ----------------------------------------
   TABLET STYLES (768px - 1024px)
   ---------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .morocco-leaflet-map__map {
        height: 380px;
    }
    
    .morocco-leaflet-map__info--desktop {
        display: none;
    }
    
    .morocco-leaflet-map__info--mobile {
        display: block;
        padding: var(--space-5);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__distances {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__distance-segment {
        flex: 1 1 calc(50% - var(--space-3));
        min-width: 180px;
    }
}

/* ----------------------------------------
   DESKTOP STYLES (1025px+)
   ---------------------------------------- */
@media (min-width: 1025px) {
    .morocco-leaflet-map__map {
        height: 480px;
    }
    
    /* Show desktop panel overlay */
    .morocco-leaflet-map__info--desktop {
        display: block;
        position: absolute;
        bottom: var(--space-5);
        left: var(--space-5);
        background: white;
        padding: var(--space-4);
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        width: 280px;
        max-height: 220px;
        overflow-y: auto;
    }
    
    /* Hide mobile panel */
    .morocco-leaflet-map__info--mobile {
        display: none !important;
    }
}

/* ----------------------------------------
   LARGE DESKTOP STYLES (1280px+)
   ---------------------------------------- */
@media (min-width: 1280px) {
    .morocco-leaflet-map__map {
        height: 520px;
    }
    
    .morocco-leaflet-map__info--desktop {
        width: 300px;
        max-height: 240px;
        padding: var(--space-5);
        bottom: var(--space-6);
        left: var(--space-6);
    }
}

/* ----------------------------------------
   SMALL MOBILE STYLES (480px-)
   ---------------------------------------- */
@media (max-width: 480px) {
    .morocco-leaflet-map__map {
        height: 280px;
    }
    
    .morocco-leaflet-map__info--mobile {
        padding: var(--space-3);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__info-title {
        font-size: 14px;
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__info-stats {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__stat {
        font-size: 11px;
    }
}

/* Leaflet container overrides */
.morocco-leaflet-map__map .leaflet-container {
    font-family: var(--font-body);
    border-radius: var(--radius-2xl);
}

.morocco-leaflet-map__map .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
    color: var(--color-dark) !important;
    background: white !important;
    border-bottom: 1px solid var(--color-gray-100) !important;
    transition: all 0.2s ease !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a:hover {
    background: var(--color-sand-light) !important;
    color: var(--color-terracotta) !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a:last-child {
    border-bottom: none !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* Custom Map Markers */
.morocco-map-marker {
    background: transparent !important;
    border: none !important;
}

.morocco-map-marker__inner {
    position: relative;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.morocco-map-marker__dot {
    width: 12px;
    height: 12px;
    background: var(--color-terracotta);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(198, 93, 59, 0.4);
    z-index: 2;
    transition: transform 0.3s ease;
}

.morocco-map-marker:hover .morocco-map-marker__dot {
    transform: scale(1.3);
}

.morocco-map-marker__pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--color-terracotta);
    border-radius: 50%;
    opacity: 0.3;
    animation: markerPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes markerPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.morocco-map-marker__label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9),
                 0 0 6px rgba(255, 255, 255, 1),
                 0 0 10px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Smaller labels on tablet/mobile */
@media (max-width: 768px) {
    .morocco-map-marker__label {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .morocco-map-marker__dot {
        width: 10px;
        height: 10px;
    }
    
    .morocco-map-marker__pulse {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .morocco-map-marker__label {
        font-size: 8px;
        padding: 1px 3px;
    }
    
    .morocco-map-marker__dot {
        width: 8px;
        height: 8px;
    }
    
    .morocco-map-marker__pulse {
        width: 16px;
        height: 16px;
    }
}

.morocco-map-marker--start .morocco-map-marker__dot {
    background: var(--color-terracotta);
    width: 16px;
    height: 16px;
}

.morocco-map-marker--end .morocco-map-marker__dot {
    background: var(--color-dark);
}

/* Map Legend */
.morocco-leaflet-map__legend {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

@media (min-width: 1025px) {
    .morocco-leaflet-map__legend {
        top: var(--space-4);
        right: var(--space-4);
        padding: var(--space-3);
        gap: var(--space-2);
    }
}

/* Hide legend on very small screens */
@media (max-width: 400px) {
    .morocco-leaflet-map__legend {
        display: none;
    }
}

.morocco-leaflet-map__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 10px;
    color: var(--color-gray-600);
}

@media (min-width: 1025px) {
    .morocco-leaflet-map__legend-item {
        font-size: 11px;
    }
}

.morocco-leaflet-map__legend-dot {
    width: 10px;
    height: 10px;
    background: var(--color-terracotta);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.morocco-leaflet-map__legend-line {
    width: 24px;
    height: 2px;
    background: var(--color-terracotta);
    border-radius: 1px;
    position: relative;
}

.morocco-leaflet-map__legend-line::before,
.morocco-leaflet-map__legend-line::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 2px;
    background: var(--color-terracotta);
    border-radius: 1px;
}

.morocco-leaflet-map__legend-line::before {
    left: 6px;
    top: 0;
}

.morocco-leaflet-map__legend-line::after {
    left: 14px;
    top: 0;
}

/* Map Info Panel - Shared Styles */
.morocco-leaflet-map__info-header {
    margin-bottom: var(--space-3);
}

.morocco-leaflet-map__info-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: var(--space-1);
}

.morocco-leaflet-map__info-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    font-family: var(--font-heading);
}

.morocco-leaflet-map__info-stats {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}

.morocco-leaflet-map__stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--color-gray-600);
}

.morocco-leaflet-map__stat svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.morocco-leaflet-map__stat svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

/* Distance Segments */
.morocco-leaflet-map__distances {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 120px;
    overflow-y: auto;
}

.morocco-leaflet-map__distance-segment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: var(--space-1) 0;
}

.morocco-leaflet-map__distance-cities {
    color: var(--color-gray-600);
}

.morocco-leaflet-map__distance-km {
    font-weight: 600;
    color: var(--color-dark);
    background: var(--color-sand-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* Leaflet Popup Styling */
.morocco-leaflet-map__map .leaflet-popup-content-wrapper {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.morocco-leaflet-map__map .leaflet-popup-content {
    margin: var(--space-3) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.morocco-leaflet-map__map .leaflet-popup-content strong {
    color: var(--color-dark);
    font-weight: 600;
}

.morocco-leaflet-map__map .leaflet-popup-content small {
    color: var(--color-gray-500);
}

.morocco-leaflet-map__map .leaflet-popup-tip {
    box-shadow: none !important;
}

/* Tablet: Show mobile panel, hide desktop panel */
@media (max-width: 768px) {
    .morocco-leaflet-map__map {
        height: 320px;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    
    .morocco-leaflet-map__container {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    
    /* Hide desktop info panel on tablet/mobile */
    .morocco-leaflet-map__info--desktop {
        display: none !important;
    }
    
    /* Show mobile info panel below map */
    .morocco-leaflet-map__info--mobile {
        display: block;
        background: white;
        padding: var(--space-4);
        border-top: 1px solid var(--color-gray-100);
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }
    
    .morocco-leaflet-map__info-title {
        font-size: 15px;
    }
    
    .morocco-leaflet-map__info-stats {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .morocco-leaflet-map__distances {
        max-height: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        margin-top: var(--space-3);
    }
    
    .morocco-leaflet-map__distance-segment {
        background: var(--color-sand-light);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .morocco-leaflet-map__legend {
        top: var(--space-2);
        right: var(--space-2);
        padding: var(--space-2);
        font-size: 10px;
    }
    
    .morocco-leaflet-map__legend-item {
        font-size: 10px;
    }
}

/* Mobile: Further adjustments */
@media (max-width: 480px) {
    .morocco-leaflet-map__map {
        height: 260px;
    }
    
    .morocco-leaflet-map__legend {
        display: none;
    }
    
    .morocco-leaflet-map__info-header {
        margin-bottom: var(--space-2);
    }
    
    .morocco-leaflet-map__info-stats {
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-2);
    }
    
    .morocco-leaflet-map__distances {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
    
    .morocco-leaflet-map__distance-segment {
        padding: var(--space-2);
    }
}

/* ========================================
   MOROCCO INTERACTIVE MAP COMPONENT (SVG)
   Premium map inspired by Abercrombie & Kent
   ======================================== */

.morocco-map {
    position: relative;
    width: 100%;
    max-width: 450px;
}

.morocco-map__container {
    position: relative;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.morocco-map__svg {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

/* Country outline */
.morocco-map__outline {
    transition: all 0.4s ease;
}

.morocco-map__country-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    fill: #b8a88a;
    text-anchor: middle;
}

/* Region areas - clickable zones */
.morocco-map__region {
    cursor: pointer;
    transition: all 0.3s ease;
}

.morocco-map__region-area {
    transition: all 0.4s ease;
}

.morocco-map__region:hover .morocco-map__region-area,
.morocco-map__region--active .morocco-map__region-area {
    fill: rgba(198, 93, 59, 0.08);
    stroke: var(--color-terracotta);
    stroke-dasharray: 4 2;
}

/* City dots */
.morocco-map__city {
    opacity: 0.4;
    transition: all 0.4s ease;
}

.morocco-map__city-dot {
    fill: var(--color-terracotta);
    transition: all 0.3s ease;
}

.morocco-map__city-pulse {
    fill: url(#pulseGradient);
    opacity: 0;
    transition: all 0.3s ease;
}

.morocco-map__city-label {
    font-size: 10px;
    font-weight: 600;
    fill: var(--color-dark);
    text-anchor: middle;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.morocco-map__city-label--highlight {
    font-size: 11px;
    font-weight: 700;
}

.morocco-map__city-sublabel {
    font-size: 8px;
    font-weight: 500;
    fill: var(--color-gray-500);
    text-anchor: middle;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Route lines */
.morocco-map__route {
    opacity: 0;
    stroke-dashoffset: 100;
    transition: all 0.5s ease;
}

/* Route arrow animation */
.morocco-map__route-arrow {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mountain and dune indicators */
.morocco-map__mountains {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.morocco-map__dunes ellipse {
    transition: all 0.3s ease;
}

/* ----------------------------------------
   ACTIVE STATE - When region is hovered/selected
   ---------------------------------------- */
.morocco-map__region--active .morocco-map__city {
    opacity: 1;
}

.morocco-map__region--active .morocco-map__city-dot {
    filter: drop-shadow(0 2px 4px rgba(198, 93, 59, 0.4));
}

.morocco-map__region--active .morocco-map__city-pulse {
    opacity: 1;
    animation: mapPulse 2s ease-in-out infinite;
}

.morocco-map__region--active .morocco-map__city-label,
.morocco-map__region--active .morocco-map__city-sublabel {
    opacity: 1;
}

.morocco-map__region--active .morocco-map__route {
    opacity: 1;
    stroke-dashoffset: 0;
    animation: mapRouteFlow 2s linear infinite;
}

.morocco-map__region--active .morocco-map__mountains,
.morocco-map__region--active .morocco-map__dunes ellipse {
    opacity: 0.8;
}

/* Dim other regions when one is active */
.morocco-map--has-active .morocco-map__region:not(.morocco-map__region--active) {
    opacity: 0.3;
}

/* ----------------------------------------
   ANIMATIONS
   ---------------------------------------- */
@keyframes mapPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes mapRouteFlow {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes mapArrowMove {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

/* ----------------------------------------
   MAP CONTROLS
   ---------------------------------------- */
.morocco-map__controls {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 10;
}

.morocco-map__control {
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-gray-600);
}

.morocco-map__control:hover {
    background: var(--color-sand-light);
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

/* ----------------------------------------
   MAP INDICATOR
   ---------------------------------------- */
.morocco-map__indicator {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.morocco-map__indicator-dot {
    width: 8px;
    height: 8px;
    background: var(--color-terracotta);
    border-radius: 50%;
    animation: mapPulse 2s ease-in-out infinite;
}

.morocco-map__indicator-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
}

/* ----------------------------------------
   RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1024px) {
    .morocco-map {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .morocco-map {
        max-width: 100%;
    }
    
    .morocco-map__container {
        padding: var(--space-3);
    }
    
    .morocco-map__controls {
        display: none;
    }
    
    .morocco-map__city-label {
        font-size: 9px;
    }
    
    .morocco-map__indicator {
        padding: var(--space-2) var(--space-3);
    }
    
    .morocco-map__indicator-text {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .morocco-map__container {
        padding: var(--space-2);
        border-radius: var(--radius-xl);
    }
    
    .morocco-map__country-label {
        font-size: 12px;
        letter-spacing: 3px;
    }
    
    .morocco-map__indicator {
        bottom: var(--space-2);
        padding: var(--space-1) var(--space-3);
    }
}

/* ========================================
   PREMIUM DESTINATIONS ARCHIVE PAGE
   /destinations/ - Video Hero, Top 12, Regions
   ======================================== */

/* ----------------------------------------
   VIDEO HERO SECTION
   ---------------------------------------- */
.dest-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-hero__video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden; /* Keep video clipped */
}

.dest-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dest-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 1;
}

/* ===== AUTOMATIC IMAGE SLIDESHOW ===== */
.dest-hero__slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.dest-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.8s ease-in-out, transform 2.5s ease-out;
    will-change: opacity, transform;
}

/* First slide shows immediately on page load */
.dest-hero__slide:first-child {
    opacity: 1;
    transform: scale(1);
}

.dest-hero__slide--active {
    opacity: 1;
    transform: scale(1);
    animation: kenBurnsZoom 2.5s ease-out forwards;
}

@keyframes kenBurnsZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

.dest-hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: var(--space-16) 0;
    padding-bottom: var(--space-20); /* Extra space for dropdown */
    text-align: center;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-hero__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: white;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.dest-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 500;
    color: white;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.dest-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-8);
}

/* ----------------------------------------
   SEARCH BOX - Glass Morphism
   ---------------------------------------- */
.dest-search {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1000;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-search__form {
    display: flex;
    flex-direction: row; /* Horizontal on desktop */
    flex-wrap: nowrap; /* Keep all on one line on desktop */
    align-items: flex-end;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1001;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-search__field {
    flex: 1;
    position: relative;
    z-index: 1;
}

.dest-search__field--destination {
    flex: 2;
    z-index: 1002;
    position: relative;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-search__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.dest-search__label svg {
    color: var(--color-terracotta);
}

.dest-search__input,
.dest-search__select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    padding-right: 40px; /* Space for icon */
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: white;
    transition: all var(--transition-fast);
}

/* Add dropdown arrow to destination input */
.dest-search__field--destination::after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-gray-400);
    border-bottom: 2px solid var(--color-gray-400);
    transform: rotate(45deg);
    pointer-events: none;
    transition: all var(--transition-fast);
}

.dest-search__field--destination:focus-within::after {
    border-color: var(--color-terracotta);
    transform: rotate(-135deg);
}

.dest-search__input:focus,
.dest-search__select:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.dest-search__select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.dest-search__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-terracotta);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    align-self: flex-end;
}

.dest-search__btn:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
}

/* Search Suggestions Dropdown */
.dest-search__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 300px; /* ~5-6 items visible on desktop */
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 2147483647; /* Maximum z-index */
    text-align: left;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

.dest-search__suggestions.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Custom scrollbar for suggestions */
.dest-search__suggestions::-webkit-scrollbar {
    width: 6px;
}

.dest-search__suggestions::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
    margin: 6px 0;
}

.dest-search__suggestions::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;
}

.dest-search__suggestions::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.dest-search__suggestion {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    background-color: #ffffff !important;
    text-align: left !important;
    box-sizing: border-box;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.dest-search__suggestion:last-child {
    border-bottom: none;
}

.dest-search__suggestion:hover,
.dest-search__suggestion--active {
    background-color: #faf8f5 !important;
    border-left-color: #C65D3B;
}

.dest-search__suggestion-name {
    display: block !important;
    width: 100% !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    line-height: 1.3 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.dest-search__suggestion-name mark {
    background: rgba(198, 93, 59, 0.2) !important;
    color: #a84b2e !important;
    padding: 0 3px !important;
    border-radius: 2px;
    font-weight: 600 !important;
}

.dest-search__suggestion-tagline {
    display: block !important;
    width: 100% !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #888888 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.dest-search__suggestion:hover .dest-search__suggestion-name,
.dest-search__suggestion--active .dest-search__suggestion-name {
    color: #C65D3B !important;
}

.dest-search__suggestion:hover .dest-search__suggestion-tagline,
.dest-search__suggestion--active .dest-search__suggestion-tagline {
    color: #666666 !important;
}

.dest-search__no-results {
    padding: 20px 16px;
    text-align: center;
    color: #888888;
    font-style: italic;
    font-size: 14px;
}

/* Responsive dropdown styles */
@media (max-width: 768px) {
    .dest-search__suggestions {
        max-height: 200px; /* ~3-4 items on tablet */
        border-radius: 10px;
    }
    
    .dest-search__suggestion {
        padding: 10px 12px !important;
    }
    
    .dest-search__suggestion-name {
        font-size: 14px !important;
    }
    
    .dest-search__suggestion-tagline {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .dest-search__suggestions {
        max-height: 180px; /* Show ~3 items on mobile */
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 8px;
    }
    
    .dest-search__suggestion {
        padding: 8px 12px !important;
    }
    
    .dest-search__suggestion-name {
        font-size: 13px !important;
    }
    
    .dest-search__suggestion-tagline {
        font-size: 10px !important;
        margin-top: 1px;
    }
}

/* Quick Filter Chips */
.dest-search__chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    flex-wrap: wrap;
    position: relative;
    z-index: 1; /* Much lower than the dropdown */
}

.dest-search__chips-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Hide swipe hint on desktop */
.dest-search__swipe-hint {
    display: none;
}

/* Ensure sections below hero don't overlap dropdown */
.dest-top,
.dest-filter,
.dest-regions,
.dest-cta {
    position: relative;
    z-index: 1;
}

.dest-search__chips-label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.dest-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: white;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Touch/hover feedback for chips */
.dest-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dest-chip:active {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Hide duplicate elements on desktop - only show on mobile for marquee */
.dest-chip[aria-hidden="true"],
.dest-filter__pill[aria-hidden="true"] {
    display: none;
}

@media (max-width: 768px) {
    .dest-chip[aria-hidden="true"],
    .dest-filter__pill[aria-hidden="true"] {
        display: inline-flex;
    }
}

/* Keyframe animations for mobile chips */
@keyframes chips-scroll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-15px); }
}

@keyframes chip-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 107, 72, 0); }
    50% { box-shadow: 0 0 15px 5px rgba(196, 107, 72, 0.4); }
}

@keyframes hint-fade {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-search__chips-inner {
        animation: none;
    }
    
    .dest-search__chips .dest-chip:first-of-type {
        animation: none;
    }
    
    .dest-search__swipe-hint {
        animation: none;
        opacity: 1;
    }
    
    .dest-chip {
        transition: none;
    }
    
    /* Filter pills reduced motion */
    .dest-filter__pill {
        transition: none;
    }
}

.dest-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* ----------------------------------------
   TOP DESTINATIONS SECTION
   ---------------------------------------- */
.dest-top {
    padding: var(--space-20) 0;
    background: var(--color-sand-light);
}

.dest-top__grid {
    display: grid;
    gap: 16px;
}

/* First 6 - Equal Grid (All Same Size) */
.dest-top__grid--hero {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
}

.dest-top__grid--hero .dest-card:first-child {
    grid-column: span 1;
    grid-row: span 1;
}

.dest-top__grid--hero .dest-card:first-child .dest-card__image {
    min-height: auto;
}

/* Next 6 - Secondary Grid */
.dest-top__grid--secondary {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 16px;
}

/* ----------------------------------------
   DESTINATION CARD STYLES - PREMIUM AIRBNB STYLE
   Clean, minimal, modern travel cards
   ---------------------------------------- */
.dest-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: white;
    opacity: 0;
    transform: translateY(30px);
    animation: destCardFadeUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease;
}

@keyframes destCardFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation delays for cards */
.dest-top__grid .dest-card:nth-child(1) { animation-delay: 0.1s; }
.dest-top__grid .dest-card:nth-child(2) { animation-delay: 0.15s; }
.dest-top__grid .dest-card:nth-child(3) { animation-delay: 0.2s; }
.dest-top__grid .dest-card:nth-child(4) { animation-delay: 0.25s; }
.dest-top__grid .dest-card:nth-child(5) { animation-delay: 0.3s; }
.dest-top__grid .dest-card:nth-child(6) { animation-delay: 0.35s; }

.dest-region__grid .dest-card:nth-child(1) { animation-delay: 0.05s; }
.dest-region__grid .dest-card:nth-child(2) { animation-delay: 0.1s; }
.dest-region__grid .dest-card:nth-child(3) { animation-delay: 0.15s; }
.dest-region__grid .dest-card:nth-child(4) { animation-delay: 0.2s; }
.dest-region__grid .dest-card:nth-child(5) { animation-delay: 0.25s; }
.dest-region__grid .dest-card:nth-child(6) { animation-delay: 0.3s; }
.dest-region__grid .dest-card:nth-child(7) { animation-delay: 0.35s; }
.dest-region__grid .dest-card:nth-child(8) { animation-delay: 0.4s; }
.dest-region__grid .dest-card:nth-child(9) { animation-delay: 0.45s; }
.dest-region__grid .dest-card:nth-child(10) { animation-delay: 0.5s; }

/* Premium hover effects */
.dest-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.dest-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.dest-card__image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.dest-card--large .dest-card__image {
    aspect-ratio: 4 / 5;
    height: auto;
}

.dest-card--compact .dest-card__image {
    aspect-ratio: 4 / 5;
}

.dest-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dest-card:hover .dest-card__image img {
    transform: scale(1.08);
}

/* ----------------------------------------
   DESTINATION CARD SLIDESHOW
   ---------------------------------------- */
.dest-card__slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

.dest-card__slideshow .dest-card__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.dest-card__slideshow .dest-card__slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* First slide should be visible by default as fallback */
.dest-card__slideshow .dest-card__slide:first-child {
    position: relative;
}

/* Keep overlay above all slides */
.dest-card__slideshow .dest-card__overlay {
    z-index: 3;
}

/* Pause indicator (subtle) */
.dest-card__slideshow.is-paused::before {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    z-index: 10;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Hover effect still works on slides */
.dest-card:hover .dest-card__slideshow .dest-card__slide {
    transform: scale(1.08);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-card__slideshow .dest-card__slide {
        transition: none;
    }
    .dest-card:hover .dest-card__slideshow .dest-card__slide {
        transform: none;
    }
}

/* Soft bottom gradient overlay */
.dest-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        transparent 100%
    );
    transition: opacity 0.3s ease;
    z-index: 2;
}

.dest-card:hover .dest-card__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* Hover Info - Description that appears on hover */
.dest-card__hover-info {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: var(--space-6);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dest-card__description {
    color: white;
    font-size: var(--text-sm);
    line-height: 1.6;
    text-align: center;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dest-card:hover .dest-card__hover-info {
    opacity: 1;
}

/* Arrow icon */
.dest-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.dest-card__arrow svg {
    width: 18px;
    height: 18px;
}

.dest-card:hover .dest-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

.dest-card__arrow:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Card content - clean typography */
.dest-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.dest-card:hover .dest-card__content {
    transform: none;
}

/* Tagline - small uppercase (hidden by default now) */
.dest-card__tagline {
    display: none;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Title - clean and bold */
.dest-card__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    color: #ffffff;
}

.dest-card--large .dest-card__title {
    font-size: 28px;
}

.dest-card--compact .dest-card__title {
    font-size: 18px;
}

.dest-card__cta {
    display: none; /* Hidden - replaced by arrow icon */
}

/* Compact Card Variant (for regions) */
.dest-card--compact .dest-card__image {
    aspect-ratio: 3 / 2;
}

.dest-card--compact .dest-card__content {
    padding: var(--space-4);
}

.dest-card--compact .dest-card__title {
    font-size: var(--text-xl);
}

.dest-card--compact .dest-card__tagline {
    font-size: var(--text-xs);
}

/* ----------------------------------------
   STICKY FILTER BAR
   ---------------------------------------- */
.dest-filter {
    background: white;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
    z-index: var(--z-sticky);
}

.dest-filter.is-sticky {
    position: fixed;
    top: 80px; /* Account for header */
    left: 0;
    right: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dest-filter__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 0 var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.dest-filter__inner::-webkit-scrollbar {
    display: none;
}

.dest-filter__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.dest-filter__pill:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.15);
}

.dest-filter__pill--active {
    transform: scale(1.05);
}

.dest-filter__pill--active {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

.dest-filter__pill--active:hover {
    background: var(--color-terracotta-dark);
    border-color: var(--color-terracotta-dark);
    color: white;
}

.dest-filter__pill svg {
    width: 16px;
    height: 16px;
}

/* Touch feedback for filter pills */
.dest-filter__pill {
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.dest-filter__pill:active {
    transform: scale(1.02);
}

/* ----------------------------------------
   REGIONAL SECTIONS
   ---------------------------------------- */
.dest-regions {
    background: white;
}

.dest-region {
    padding: var(--space-16) 0;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dest-region.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dest-region:nth-child(even) {
    background: var(--color-sand-light);
}

.dest-region__header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    flex-wrap: wrap;
}

.dest-region__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sand);
    border-radius: var(--radius-xl);
    color: var(--color-terracotta);
}

.dest-region__text {
    flex: 1;
    min-width: 300px;
}

.dest-region__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.dest-region__description {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
}

.dest-region__count {
    padding: var(--space-2) var(--space-4);
    background: var(--color-sand);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-earth);
}

.dest-region__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dest-region__divider {
    display: flex;
    justify-content: center;
    padding-top: var(--space-12);
    color: var(--color-gray-300);
}

/* ----------------------------------------
   CTA SECTION
   ---------------------------------------- */
.dest-cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: var(--space-20) 0;
    text-align: center;
    clear: both;
    box-sizing: border-box;
}

.dest-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    z-index: -1;
}

.dest-cta .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.dest-cta__content {
    max-width: 700px;
    margin: 0 auto;
}

.dest-cta__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 500;
    color: white;
    margin-bottom: var(--space-4);
}

.dest-cta__text {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-8);
}

.dest-cta__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-white {
    background: white;
    color: var(--color-terracotta) !important;
}

.btn-white:hover {
    background: var(--color-sand-light);
}

.btn-outline-white {
    background: transparent;
    border: 2px solid white;
    color: white !important;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------
   SCROLL REVEAL ANIMATIONS
   ---------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.reveal-section .reveal {
    transition-delay: 0s;
}

.reveal-section.is-visible .reveal {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section.is-visible .reveal-delay-1 { transition-delay: 0.05s; }
.reveal-section.is-visible .reveal-delay-2 { transition-delay: 0.1s; }
.reveal-section.is-visible .reveal-delay-3 { transition-delay: 0.15s; }
.reveal-section.is-visible .reveal-delay-4 { transition-delay: 0.2s; }
.reveal-section.is-visible .reveal-delay-5 { transition-delay: 0.25s; }
.reveal-section.is-visible .reveal-delay-6 { transition-delay: 0.3s; }

/* ----------------------------------------
   RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1200px) {
    .dest-top__grid--hero .dest-card:first-child .dest-card__image {
        min-height: auto;
    }
    
    .dest-region__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (max-width: 968px) {
    .dest-hero {
        min-height: 80vh;
    }
    
    .dest-search__form {
        flex-wrap: wrap;
    }
    
    .dest-search__field {
        flex: 1 1 45%;
    }
    
    .dest-search__field--destination {
        flex: 1 1 55%;
    }
    
    .dest-search__btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    
    .dest-top__grid--hero {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dest-top__grid--hero .dest-card:first-child {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .dest-top__grid--hero .dest-card:first-child .dest-card__image {
        min-height: auto;
    }
    
    .dest-top__grid--secondary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dest-region__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .dest-filter.is-sticky {
        top: 70px;
    }
}

@media (max-width: 768px) {
    .dest-hero__video {
        display: none;
    }
    
    .dest-hero__video-wrapper {
        background-image: url('../images/destinations/hero-fallback.jpg');
        background-size: cover;
        background-position: center;
    }
    
    .dest-hero__title {
        font-size: var(--text-3xl);
    }
    
    .dest-search__form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: var(--space-4);
        gap: var(--space-2);
    }
    
    .dest-search__field {
        width: 100%;
    }
    
    .dest-search__field--destination {
        grid-column: 1;
    }
    
    .dest-search__field--interests {
        grid-column: 2;
    }
    
    .dest-search__btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
    
    /* ===== MOBILE MARQUEE: Popular Chips - Infinite Scroll ===== */
    .dest-search__chips {
        display: flex;
        align-items: center;
        gap: 0;
        padding-bottom: var(--space-4);
        margin-top: var(--space-6);
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    /* Fixed "Popular:" label on left */
    .dest-search__chips-label {
        position: relative;
        flex-shrink: 0;
        z-index: 2;
        background: linear-gradient(to right, rgba(22, 101, 52, 1) 80%, rgba(22, 101, 52, 0));
        padding-right: var(--space-4);
        padding-left: var(--space-2);
        font-weight: 500;
        color: white;
    }
    
    /* Scrolling container for chips - infinite loop */
    .dest-search__chips-inner {
        display: flex;
        gap: var(--space-3);
        animation: marquee-chips 20s linear infinite;
        white-space: nowrap;
        will-change: transform;
    }
    
    /* Ensure chips don't wrap and stay in line */
    .dest-search__chips-inner .dest-chip {
        flex-shrink: 0;
    }
    
    /* Pause on touch/hover for usability */
    .dest-search__chips:hover .dest-search__chips-inner,
    .dest-search__chips:active .dest-search__chips-inner,
    .dest-search__chips-inner.paused {
        animation-play-state: paused;
    }
    
    @keyframes marquee-chips {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    /* Hide swipe hint on mobile - using marquee instead */
    .dest-search__swipe-hint {
        display: none !important;
    }
    
    .dest-top__grid--hero,
    .dest-top__grid--secondary {
        grid-template-columns: 1fr;
    }
    
    .dest-top__grid--hero .dest-card:first-child {
        grid-column: span 1;
    }
    
    .dest-card--large .dest-card__title {
        font-size: var(--text-2xl);
    }
    
    .dest-region__header {
        flex-direction: column;
        text-align: center;
    }
    
    .dest-region__text {
        min-width: auto;
    }
    
    .dest-region__description {
        max-width: none;
    }
    
    .dest-region__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .dest-cta__title {
        font-size: var(--text-2xl);
    }
    
    .dest-cta__buttons {
        flex-direction: column;
    }
    
    /* ===== MOBILE MARQUEE: Filter Bar Pills ===== */
    .dest-filter {
        position: relative;
        overflow: hidden;
    }
    
    .dest-filter__inner {
        display: flex;
        gap: var(--space-3);
        animation: marquee-pills 15s linear infinite;
        padding-right: var(--space-8);
    }
    
    .dest-filter__pill {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Pause on touch/hover */
    .dest-filter:hover .dest-filter__inner,
    .dest-filter:active .dest-filter__inner,
    .dest-filter__inner.paused {
        animation-play-state: paused;
    }
    
    @keyframes marquee-pills {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    /* Edge gradient fade */
    .dest-filter::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--color-sand-light));
        pointer-events: none;
        z-index: 2;
    }
    
    .dest-filter.is-sticky::after {
        background: linear-gradient(to right, transparent, white);
    }
}

@media (max-width: 480px) {
    .dest-hero {
        min-height: 90vh;
    }
    
    .dest-hero__content {
        padding: var(--space-8) 0;
    }
    
    .dest-hero__title {
        font-size: var(--text-2xl);
    }
    
    .dest-search__form {
        display: flex;
        flex-direction: column;
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        gap: var(--space-2);
    }
    
    .dest-search__field,
    .dest-search__field--destination,
    .dest-search__field--interests,
    .dest-search__btn {
        width: 100%;
        grid-column: unset;
    }
    
    .dest-search__input,
    .dest-search__select {
        padding: var(--space-3);
    }
    
    .dest-chip {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
    
    .dest-top {
        padding: var(--space-12) 0;
    }
    
    .dest-region {
        padding: var(--space-12) 0;
    }
    
    .dest-region__title {
        font-size: var(--text-2xl);
    }
    
    .dest-cta {
        padding: var(--space-12) 0;
    }
}

/* ========================================
   MEGA MENU - Holiday Types Navigation
   ======================================== */

.nav-dropdown--mega {
    position: static;
}

.nav-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-8);
    min-width: 700px;
    max-width: 900px;
    z-index: 1000;
    border: 1px solid var(--color-gray-100);
}

.nav-dropdown--mega:hover .nav-mega-menu,
.nav-dropdown--mega:focus-within .nav-mega-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-mega-column {
    display: flex;
    flex-direction: column;
}

.nav-mega-heading {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-sand);
}

.nav-mega-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nav-mega-column ul li a {
    display: block;
    padding: var(--space-2) 0;
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
}

.nav-mega-column ul li a:hover {
    color: var(--color-terracotta);
    padding-left: var(--space-2);
}

.nav-mega-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.nav-mega-cta:hover {
    gap: var(--space-3);
}

/* Hide mega menu on mobile - show regular dropdown instead */
@media (max-width: 1024px) {
    .nav-mega-menu {
        display: none !important;
    }
}

/* ========================================
   HOLIDAY TYPES PAGE - PREMIUM STYLES
   ======================================== */

.holiday-types-page {
    overflow-x: hidden;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --gold-gradient: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
}

/* Premium Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(198, 93, 59, 0.3); }
    50% { box-shadow: 0 0 40px rgba(198, 93, 59, 0.6); }
}

@keyframes particle-float {
    0%, 100% { 
        transform: translateY(0) translateX(0); 
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(-100vh) translateX(50px); 
        opacity: 0;
    }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
}

/* ========================================
   HERO SECTION - CINEMATIC
   ======================================== */
.ht-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-32) 0 var(--space-16);
    overflow: hidden;
}

.ht-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

.ht-hero__gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(198, 93, 59, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 40%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(198, 93, 59, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(15, 52, 96, 0.8) 0%, transparent 30%);
}

/* Floating Particles */
.ht-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ht-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particle-float 15s linear infinite;
}

.ht-particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.ht-particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 14s; width: 3px; height: 3px; }
.ht-particle:nth-child(3) { left: 35%; animation-delay: 4s; animation-duration: 16s; }
.ht-particle:nth-child(4) { left: 50%; animation-delay: 1s; animation-duration: 13s; width: 5px; height: 5px; }
.ht-particle:nth-child(5) { left: 65%; animation-delay: 3s; animation-duration: 15s; }
.ht-particle:nth-child(6) { left: 75%; animation-delay: 5s; animation-duration: 11s; width: 3px; height: 3px; }
.ht-particle:nth-child(7) { left: 85%; animation-delay: 2.5s; animation-duration: 17s; }
.ht-particle:nth-child(8) { left: 95%; animation-delay: 0.5s; animation-duration: 14s; width: 6px; height: 6px; }

/* Floating Shapes */
.ht-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ht-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: float 20s ease-in-out infinite;
}

.ht-shape--1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.4), transparent);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.ht-shape--2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), transparent);
    bottom: -50px;
    right: -50px;
    animation-delay: -5s;
}

.ht-shape--3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.5), transparent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

/* Hero Content */
.ht-hero__content {
    position: relative;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    will-change: transform, opacity;
    transition: opacity 0.1s ease;
}

/* Eyebrow Badge */
.ht-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-8);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ht-hero__eyebrow-icon {
    color: var(--color-terracotta-light);
    font-size: 10px;
}

/* Title */
.ht-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: var(--space-6);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.ht-hero__title-gradient {
    display: block;
    background: linear-gradient(135deg, #F4A261, #E9C46A, #F4A261);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* Subtitle */
.ht-hero__subtitle {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.7);
    max-width: 650px;
    margin: 0 auto var(--space-12);
    line-height: 1.7;
    font-weight: 400;
}

/* Navigation Cards */
.ht-hero__nav {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-16);
    position: relative;
    z-index: 5;
}

.ht-hero__nav-btn {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-8);
    border-radius: var(--radius-2xl);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
    position: relative;
    overflow: hidden;
}

.ht-hero__nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.ht-hero__nav-btn:hover::before {
    opacity: 1;
}

.ht-hero__nav-btn--group {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--color-white);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ht-hero__nav-btn--group:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.ht-hero__nav-btn--private {
    background: linear-gradient(135deg, #C65D3B, #8B4513, #C65D3B);
    background-size: 200% auto;
    color: var(--color-white);
    border: none;
    box-shadow: 0 8px 32px rgba(198, 93, 59, 0.4);
}

.ht-hero__nav-btn--private:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(198, 93, 59, 0.5);
    animation: pulse-glow 2s ease-in-out infinite;
}

.ht-hero__nav-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    flex-shrink: 0;
}

.ht-hero__nav-btn--private .ht-hero__nav-icon {
    background: rgba(255, 255, 255, 0.2);
}

.ht-hero__nav-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
}

.ht-hero__nav-text strong {
    font-size: var(--text-lg);
    font-weight: 600;
}

.ht-hero__nav-text small {
    font-size: var(--text-sm);
    opacity: 0.7;
}

.ht-hero__nav-arrow {
    font-size: var(--text-xl);
    opacity: 0.5;
    transition: all 0.3s;
}

.ht-hero__nav-btn:hover .ht-hero__nav-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Scroll Indicator */
.ht-hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1;
}

.ht-hero__scroll-text {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ht-hero__scroll-icon {
    animation: bounce-arrow 2s ease-in-out infinite;
}

/* ========================================
   SECTION STYLES - PREMIUM
   ======================================== */
.ht-section {
    padding: var(--space-24) 0;
    position: relative;
}

.ht-section--group {
    background: linear-gradient(180deg, #FDFBF7 0%, #F5F0E8 100%);
    position: relative;
}

.ht-section--group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 93, 59, 0.3), transparent);
}

.ht-section--private {
    background: linear-gradient(180deg, #FFFEF9 0%, #FDF8EF 50%, #F5F0E8 100%);
    position: relative;
}

.ht-section--private::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.ht-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-16);
    flex-wrap: wrap;
}

.ht-section__icon {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(198, 93, 59, 0.1);
    color: var(--color-terracotta);
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.ht-section__icon:hover {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 
        0 8px 30px rgba(198, 93, 59, 0.2),
        0 0 0 1px rgba(198, 93, 59, 0.2);
}

.ht-section__icon--gold {
    background: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
    background-size: 200% auto;
    color: var(--color-white);
    box-shadow: 
        0 4px 20px rgba(212, 175, 55, 0.3),
        0 0 0 1px rgba(212, 175, 55, 0.3);
    animation: shimmer 4s linear infinite;
}

.ht-section__icon--gold:hover {
    box-shadow: 
        0 8px 40px rgba(212, 175, 55, 0.5),
        0 0 0 2px rgba(212, 175, 55, 0.5);
}

.ht-section__text {
    flex: 1;
    min-width: 250px;
}

.ht-section__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ht-section__description {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    max-width: 500px;
}

.ht-section__count {
    background: var(--color-terracotta);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ========================================
   CARD GRID - PREMIUM LAYOUT
   ======================================== */
.ht-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-8);
}

.ht-grid--private {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ========================================
   HOLIDAY TYPE CARD - GLASSMORPHISM
   ======================================== */
.ht-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(40px);
    position: relative;
}

/* Shimmer Effect on Hover */
.ht-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 10;
    pointer-events: none;
}

.ht-card:hover::before {
    left: 100%;
}

.ht-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ht-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(var(--card-color-rgb, 198, 93, 59), 0.2);
}

/* Premium Card Variant */
.ht-card--premium {
    border: none;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
}

.ht-card--premium::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-2xl);
    padding: 2px;
    background: linear-gradient(135deg, var(--card-color), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.ht-card--premium:hover::after {
    opacity: 1;
}

.ht-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.ht-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.03), transparent);
}

.ht-card__icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 70%, black));
    border-radius: var(--radius-xl);
    color: var(--color-white);
    flex-shrink: 0;
    box-shadow: 
        0 4px 12px color-mix(in srgb, var(--card-color) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.ht-card:hover .ht-card__icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 
        0 8px 20px color-mix(in srgb, var(--card-color) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ht-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    flex: 1;
    transition: color 0.3s;
}

.ht-card:hover .ht-card__title {
    color: var(--card-color);
}

.ht-card__badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
    background-size: 200% auto;
    color: #1a1a2e;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    animation: shimmer 3s linear infinite;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.ht-card__content {
    padding: var(--space-6);
    flex: 1;
}

.ht-card__section {
    margin-bottom: var(--space-5);
}

.ht-card__section:last-child {
    margin-bottom: 0;
}

.ht-card__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
}

.ht-card__label svg {
    opacity: 0.6;
    color: var(--card-color);
}

.ht-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ht-card__tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.08), rgba(var(--card-color-rgb, 198, 93, 59), 0.04));
    color: var(--color-gray-700);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid rgba(var(--card-color-rgb, 198, 93, 59), 0.1);
    transition: all 0.3s;
}

.ht-card:hover .ht-card__tag {
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.15), rgba(var(--card-color-rgb, 198, 93, 59), 0.08));
    border-color: rgba(var(--card-color-rgb, 198, 93, 59), 0.2);
}

.ht-card__activities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ht-card__activity {
    display: inline-block;
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
}

.ht-card__activity:not(:last-child)::after {
    content: "•";
    margin-left: 6px;
    color: var(--card-color);
    opacity: 0.5;
}

.ht-card__footer {
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.04), transparent);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    margin-top: auto;
}

.ht-card__cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--card-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ht-card__cta svg {
    transition: transform 0.3s;
}

.ht-card:hover .ht-card__cta {
    gap: var(--space-4);
}

.ht-card:hover .ht-card__cta svg {
    transform: translateX(4px);
}

/* ========================================
   DIVIDER - ELEGANT
   ======================================== */
.ht-divider {
    padding: var(--space-12) 0;
    background: linear-gradient(180deg, #F5F0E8 0%, #FFFEF9 100%);
    position: relative;
}

.ht-divider__content {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    justify-content: center;
}

.ht-divider__line {
    flex: 1;
    max-width: 250px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}

.ht-divider__text {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    font-style: italic;
    white-space: nowrap;
    position: relative;
    padding: 0 var(--space-4);
}

.ht-divider__text::before,
.ht-divider__text::after {
    content: '✦';
    color: rgba(212, 175, 55, 0.5);
    font-size: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ht-divider__text::before {
    left: 0;
}

.ht-divider__text::after {
    right: 0;
}

/* ========================================
   CTA SECTION - PREMIUM
   ======================================== */
.ht-cta {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    padding: var(--space-24) 0;
    position: relative;
    overflow: hidden;
}

.ht-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(198, 93, 59, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(15, 52, 96, 0.3) 0%, transparent 60%);
    pointer-events: none;
}

.ht-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

.ht-cta__content {
    position: relative;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.ht-cta__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-6);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ht-cta__text {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-10);
    line-height: 1.7;
}

.ht-cta__buttons {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-white {
    background: var(--color-white);
    color: var(--color-dark);
    font-weight: 700;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-white:hover {
    background: var(--color-white);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.3);
}

.btn-outline-white {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-weight: 600;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
}

/* ========================================
   REVEAL ANIMATIONS - PREMIUM ENHANCED
   ======================================== */

/* Page Load Animation Keyframes */
@keyframes htSlideUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes htSlideIn {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes htScaleIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes htFadeBlur {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes htGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(198, 93, 59, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(198, 93, 59, 0.4);
    }
}

@keyframes htIconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-3deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.05) rotate(3deg); }
}

@keyframes htCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Hero Page Load Sequence */
.ht-hero__eyebrow {
    animation: htFadeBlur 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.ht-hero__title {
    animation: htSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.ht-hero__subtitle {
    animation: htFadeBlur 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

.ht-hero__nav {
    animation: htScaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

.ht-hero__scroll {
    animation: htFadeBlur 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1.2s both;
}

/* Nav Buttons Hover Enhancement */
.ht-hero__nav-btn {
    will-change: transform, box-shadow;
}

.ht-hero__nav-btn:hover {
    animation: htGlowPulse 2s ease-in-out infinite;
}

/* Reveal Fade with 3D Transform */
.reveal-fade {
    opacity: 0;
    transform: translateY(50px) perspective(1000px) rotateX(5deg);
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-fade.is-visible {
    opacity: 1;
    transform: translateY(0) perspective(1000px) rotateX(0deg);
}

/* Section Headers Animation */
.ht-section__header.is-visible {
    animation: htSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ht-section__header .ht-section__icon {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.ht-section__header.is-visible .ht-section__icon {
    animation: htIconBounce 0.8s ease 0.4s;
}

/* Staggered Card Animation - Enhanced */
.ht-card {
    will-change: opacity, transform;
    transform-style: preserve-3d;
}

.ht-card:nth-child(1) { transition-delay: 0.05s; }
.ht-card:nth-child(2) { transition-delay: 0.1s; }
.ht-card:nth-child(3) { transition-delay: 0.15s; }
.ht-card:nth-child(4) { transition-delay: 0.2s; }
.ht-card:nth-child(5) { transition-delay: 0.25s; }
.ht-card:nth-child(6) { transition-delay: 0.3s; }
.ht-card:nth-child(7) { transition-delay: 0.35s; }
.ht-card:nth-child(8) { transition-delay: 0.4s; }
.ht-card:nth-child(9) { transition-delay: 0.45s; }

/* Card Hover 3D Effect */
.ht-card:hover {
    transform: translateY(-12px) scale(1.02) rotateX(-2deg) rotateY(2deg);
}

/* Card Icon Animation on Hover */
.ht-card:hover .ht-card__icon svg {
    animation: htIconBounce 0.6s ease;
}

/* Card Content Stagger on Hover */
.ht-card__section {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ht-card:hover .ht-card__section:nth-child(1) {
    transform: translateX(5px);
    transition-delay: 0.05s;
}

.ht-card:hover .ht-card__section:nth-child(2) {
    transform: translateX(5px);
    transition-delay: 0.1s;
}

/* CTA Button Hover Effects */
.ht-card__cta {
    position: relative;
    overflow: hidden;
}

.ht-card__cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-color), transparent);
    transform: translateY(-50%) scaleX(0);
    transition: transform 0.4s ease;
}

.ht-card:hover .ht-card__cta::before {
    transform: translateY(-50%) scaleX(1);
}

/* Tags Animation */
.ht-card__tag {
    transition: all 0.3s ease;
}

.ht-card:hover .ht-card__tag {
    transform: scale(1.05);
}

.ht-card:hover .ht-card__tag:nth-child(1) { transition-delay: 0s; }
.ht-card:hover .ht-card__tag:nth-child(2) { transition-delay: 0.05s; }
.ht-card:hover .ht-card__tag:nth-child(3) { transition-delay: 0.1s; }
.ht-card:hover .ht-card__tag:nth-child(4) { transition-delay: 0.15s; }

/* Activity Items Animation */
.ht-card__activity {
    transition: all 0.3s ease;
}

.ht-card:hover .ht-card__activity {
    color: var(--card-color);
}

/* Premium Badge Animation */
.ht-card__badge {
    animation: shimmer 3s linear infinite, htGlowPulse 3s ease-in-out infinite;
}

/* Divider Animation */
.ht-divider__line {
    transition: transform 0.6s ease;
    transform-origin: center;
}

.ht-divider.is-visible .ht-divider__line {
    animation: htExpandLine 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes htExpandLine {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* CTA Section Animation */
.ht-cta__content {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ht-cta__content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* CTA Buttons Stagger */
.ht-cta__buttons .btn:nth-child(1) {
    transition-delay: 0.2s;
}

.ht-cta__buttons .btn:nth-child(2) {
    transition-delay: 0.35s;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .ht-hero__eyebrow,
    .ht-hero__title,
    .ht-hero__subtitle,
    .ht-hero__nav,
    .ht-hero__scroll,
    .reveal-fade,
    .ht-card {
        animation: none !important;
        transition: opacity 0.3s ease !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZED
   ======================================== */
@media (max-width: 768px) {
    .ht-hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding: var(--space-20) 0 var(--space-12);
    }
    
    .ht-hero__eyebrow {
        font-size: 11px;
        padding: var(--space-2) var(--space-4);
    }
    
    .ht-hero__title {
        font-size: 2rem;
    }
    
    .ht-hero__subtitle {
        font-size: var(--text-base);
        margin-bottom: var(--space-8);
    }
    
    .ht-hero__nav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        margin-bottom: var(--space-12);
    }
    
    .ht-hero__nav-btn {
        min-width: unset;
        padding: var(--space-4) var(--space-5);
    }
    
    .ht-hero__nav-icon {
        width: 48px;
        height: 48px;
    }
    
    .ht-hero__scroll {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: var(--space-8);
    }
    
    .ht-particles,
    .ht-shapes {
        opacity: 0.5;
    }
    
    .ht-section {
        padding: var(--space-16) 0;
    }
    
    .ht-section__header {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: var(--space-4);
        margin-bottom: var(--space-10);
    }
    
    .ht-section__icon {
        width: 72px;
        height: 72px;
    }
    
    .ht-section__text {
        text-align: center;
    }
    
    .ht-section__description {
        margin: 0 auto;
    }
    
    .ht-section__count {
        margin-top: var(--space-2);
    }
    
    .ht-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    
    .ht-card__header {
        padding: var(--space-5);
    }
    
    .ht-card__icon {
        width: 50px;
        height: 50px;
    }
    
    .ht-card__title {
        font-size: var(--text-lg);
    }
    
    .ht-card__content {
        padding: var(--space-5);
    }
    
    .ht-card__footer {
        padding: var(--space-4) var(--space-5);
    }
    
    .ht-divider {
        padding: var(--space-8) 0;
    }
    
    .ht-divider__line {
        max-width: 80px;
    }
    
    .ht-divider__text {
        font-size: var(--text-sm);
    }
    
    .ht-cta {
        padding: var(--space-16) 0;
    }
    
    .ht-cta__title {
        font-size: 1.75rem;
    }
    
    .ht-cta__text {
        font-size: var(--text-base);
    }
    
    .ht-cta__buttons {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .ht-cta__buttons .btn,
    .ht-cta__buttons .btn-white,
    .ht-cta__buttons .btn-outline-white {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .ht-hero__nav {
        gap: var(--space-4);
    }
    
    .ht-hero__nav-btn {
        min-width: 260px;
    }
    
    .ht-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Screen Enhancements */
@media (min-width: 1200px) {
    .ht-hero__content {
        max-width: 1000px;
    }
    
    .ht-hero__title {
        font-size: 4.5rem;
    }
    
    .ht-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   DESTINATION PHOTO GALLERY
   Premium gallery with lightbox effect
   ======================================== */

.dest-gallery {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--color-sand-light) 0%, var(--color-white) 100%);
}

.dest-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 280px);
    gap: var(--space-4);
}

.dest-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: pointer;
    background: var(--color-sand);
}

/* First image spans 2 columns and 2 rows */
.dest-gallery__item--large {
    grid-column: span 2;
    grid-row: span 2;
}

.dest-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.dest-gallery__item:hover .dest-gallery__image {
    transform: scale(1.08);
}

.dest-gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dest-gallery__item:hover .dest-gallery__overlay {
    opacity: 1;
}

.dest-gallery__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-terracotta);
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dest-gallery__item:hover .dest-gallery__icon {
    transform: scale(1);
}

/* ========================================
   LIGHTBOX MODAL
   ======================================== */

.dest-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dest-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.dest-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dest-lightbox__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

.dest-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dest-lightbox__image {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.dest-lightbox__caption {
    margin-top: var(--space-4);
    text-align: center;
    color: var(--color-white);
}

.dest-lightbox__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    display: block;
    margin-bottom: var(--space-2);
}

.dest-lightbox__counter {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.dest-lightbox__close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.dest-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.dest-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.dest-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.dest-lightbox__nav--prev {
    left: var(--space-6);
}

.dest-lightbox__nav--next {
    right: var(--space-6);
}

/* Gallery Responsive */
@media (max-width: 1024px) {
    .dest-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 220px);
    }
    
    .dest-gallery__item--large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .dest-gallery__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--space-3);
    }
    
    .dest-gallery__item {
        height: 250px;
    }
    
    .dest-gallery__item--large {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }
    
    .dest-lightbox__nav {
        width: 44px;
        height: 44px;
    }
    
    .dest-lightbox__nav--prev {
        left: var(--space-3);
    }
    
    .dest-lightbox__nav--next {
        right: var(--space-3);
    }
    
    .dest-lightbox__close {
        top: var(--space-4);
        right: var(--space-4);
        width: 40px;
        height: 40px;
    }
}

/* Slideshow card animation for archive page */
.dest-card__slideshow {
    position: relative;
}

.dest-card__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.dest-card__slide.is-active {
    opacity: 1;
    position: relative;
}

.dest-card__slideshow.is-paused .dest-card__slide {
    transition-duration: 0.3s;
}

/* ========================================
   PREMIUM TESTIMONIALS V2 - COMPACT STYLE
   Elegant one-at-a-time testimonial display
   ======================================== */

.testimonials-section-v2 {
    padding: var(--space-12) 0 var(--space-16);
    background: var(--color-white);
}

.testimonial-showcase {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-12);
}

/* Navigation Arrows - Smaller & Closer */
.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.testimonial-arrow svg {
    width: 20px;
    height: 20px;
}

.testimonial-arrow:hover {
    background: var(--color-white);
    border-color: var(--color-gray-300);
    color: var(--color-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.testimonial-arrow--prev {
    left: -8px;
}

.testimonial-arrow--next {
    right: -8px;
}

/* Single Testimonial Card */
.testimonial-single-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}

/* Testimonial Item */
.testimonial-item {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.testimonial-item.active {
    display: flex;
    opacity: 1;
}

/* Slide Animations */
.testimonial-item.slide-out-left {
    animation: slideOutLeft 0.5s ease forwards;
}

.testimonial-item.slide-out-right {
    animation: slideOutRight 0.5s ease forwards;
}

.testimonial-item.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

.testimonial-item.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

@keyframes slideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-20px); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(20px); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Trip Photo - Shorter Height */
.testimonial-trip-photo {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.testimonial-trip-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.testimonial-single-card:hover .testimonial-trip-photo img {
    transform: scale(1.02);
}

/* Circular Traveler Photo - Smaller */
.testimonial-traveler-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-white);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    margin-top: -40px;
    position: relative;
    z-index: 5;
}

.testimonial-traveler-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content - Tighter Spacing */
.testimonial-content-v2 {
    padding: var(--space-3) var(--space-8) var(--space-6);
    max-width: 620px;
}

.testimonial-text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

/* Script Font Name - Smaller */
.testimonial-name-script {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

/* Stars V2 - Smaller */
.testimonial-stars-v2 {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: var(--space-2);
    color: #F59E0B;
}

.testimonial-stars-v2 svg {
    width: 16px;
    height: 16px;
}

/* Meta Info (Date + Rating) */
.testimonial-meta {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .testimonial-showcase {
        padding: 0 var(--space-14);
    }
    
    .testimonial-arrow {
        width: 44px;
        height: 44px;
    }
    
    .testimonial-arrow svg {
        width: 18px;
        height: 18px;
    }
    
    .testimonial-trip-photo {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .testimonials-section-v2 {
        padding: var(--space-10) 0 var(--space-12);
    }
    
    .testimonial-showcase {
        padding: 0 var(--space-12);
    }
    
    .testimonial-arrow {
        width: 40px;
        height: 40px;
    }
    
    .testimonial-arrow--prev {
        left: 0;
    }
    
    .testimonial-arrow--next {
        right: 0;
    }
    
    .testimonial-trip-photo {
        height: 180px;
    }
    
    .testimonial-traveler-photo {
        width: 70px;
        height: 70px;
        margin-top: -35px;
    }
    
    .testimonial-content-v2 {
        padding: var(--space-2) var(--space-5) var(--space-5);
    }
    
    .testimonial-text {
        font-size: var(--text-sm);
        line-height: 1.6;
    }
    
    .testimonial-name-script {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .testimonial-showcase {
        padding: 0 var(--space-10);
    }
    
    .testimonial-trip-photo {
        height: 160px;
    }
    
    .testimonial-arrow {
        width: 36px;
        height: 36px;
    }
    
    .testimonial-arrow svg {
        width: 16px;
        height: 16px;
    }
    
    .testimonial-traveler-photo {
        width: 60px;
        height: 60px;
        margin-top: -30px;
        border-width: 2px;
    }
    
    .testimonial-content-v2 {
        padding: var(--space-2) var(--space-4) var(--space-4);
    }
    
    .testimonial-text {
        font-size: var(--text-xs);
        margin-bottom: var(--space-3);
    }
    
    .testimonial-name-script {
        font-size: var(--text-base);
        margin-bottom: var(--space-1);
    }
    
    .testimonial-stars-v2 svg {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   PREMIUM SINGLE DESTINATION PAGE
   ======================================== */

/* Enhanced Hero Section */
.dest-hero-premium {
    position: relative;
    overflow: hidden;
}

.dest-hero-bg-parallax {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.dest-hero-bg-parallax img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Fixed position to prevent movement */
    transform: none !important;
    will-change: auto;
}

.dest-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
    /* Ensure overlay stays fixed and doesn't move */
    transform: none !important;
    will-change: auto;
}

.dest-hero-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-hero-animate.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Premium Hero Badge for Destination Page */
.dest-hero-premium .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-white);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dest-hero-scroll-hint {
    display: none; /* Hide the scroll hint icon */
}

@keyframes destBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Quick Info Bar */
.dest-quick-info {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-6) 0;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.dest-quick-info.is-sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.dest-quick-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    align-items: center;
}

.dest-quick-info__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
}

.dest-quick-info__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

.dest-quick-info__item svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
    transition: transform 0.3s ease, color 0.3s ease;
}

.dest-quick-info__item:hover svg {
    transform: scale(1.1);
    color: var(--color-terracotta-dark);
}

.dest-quick-info__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.dest-quick-info__value {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
}

/* Image Gallery */
.dest-gallery-section {
    padding: var(--space-12) 0;
}

.dest-gallery-wrapper {
    margin-top: var(--space-6);
    overflow: hidden;
    position: relative;
}

.dest-gallery-wrapper::before,
.dest-gallery-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.dest-gallery-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-white), transparent);
}

.dest-gallery-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-white), transparent);
}

@media (max-width: 768px) {
    .dest-gallery-wrapper::before,
    .dest-gallery-wrapper::after {
        width: 40px;
    }
}

.dest-gallery-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: var(--space-1) 0;
}

.dest-gallery-track {
    display: flex;
    gap: 12px;
    will-change: transform;
}

.dest-gallery-item {
    position: relative;
    flex: 0 0 auto;
    width: 320px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dest-gallery-item:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.dest-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.dest-gallery-item:hover img {
    transform: scale(1.12);
}

.dest-gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 70%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-gallery-item:hover .dest-gallery-item__overlay {
    opacity: 1;
}

.dest-gallery-item__overlay svg {
    display: none; /* Hide the icon - keep only the darkening overlay effect */
}

/* Lightbox Modal */
.dest-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dest-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.dest-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
}

.dest-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.dest-lightbox__image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dest-lightbox__close,
.dest-lightbox__prev,
.dest-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.dest-lightbox__close:hover,
.dest-lightbox__prev:hover,
.dest-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.dest-lightbox__close {
    top: var(--space-4);
    right: var(--space-4);
}

.dest-lightbox__prev {
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.dest-lightbox__next {
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.dest-lightbox__counter {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}

/* Content Section */
.dest-content-section {
    padding: var(--space-16) 0;
}

.dest-content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-12);
}

.dest-content-main {
    min-width: 0;
}

.dest-content-text {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-gray-700);
}

.dest-content-text p {
    margin-bottom: var(--space-6);
}

.dest-content-text h2,
.dest-content-text h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    color: var(--color-dark);
}

/* Highlights Grid */
.dest-highlights {
    margin-top: var(--space-12);
}

.dest-highlights__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.dest-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.dest-highlights__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.dest-highlights__item:hover {
    background: var(--color-terracotta-light);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dest-highlights__item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.dest-highlights__item span {
    color: var(--color-gray-700);
    line-height: 1.6;
}

/* Sidebar */
.dest-sidebar {
    position: relative;
}

.dest-sidebar__box {
    background: var(--color-sand-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: sticky;
    top: 100px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dest-sidebar__box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.dest-sidebar__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.dest-sidebar__btn {
    width: 100%;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all 0.3s ease;
}

.dest-sidebar__btn:last-child {
    margin-bottom: 0;
}

.dest-sidebar__btn:hover {
    transform: translateX(4px);
}

.dest-sidebar__btn svg {
    transition: transform 0.3s ease;
}

.dest-sidebar__btn:hover svg {
    transform: translateX(4px);
}

/* Premium Explore Cards in Sidebar */
.dest-sidebar__box--premium {
    padding: var(--space-6);
}

.dest-explore-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    text-decoration: none;
    margin-bottom: var(--space-3);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.dest-explore-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dest-explore-card:hover::before {
    opacity: 1;
}

/* Tours Card - Warm Terracotta Theme */
.dest-explore-card--tours {
    background: linear-gradient(135deg, #FDF6F0 0%, #FAE8DC 100%);
    border: 1px solid rgba(198, 93, 52, 0.15);
}

.dest-explore-card--tours::before {
    background: linear-gradient(135deg, #FCF0E8 0%, #F5D8C6 100%);
}

.dest-explore-card--tours:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(198, 93, 52, 0.15);
}

.dest-explore-card--tours .dest-explore-card__icon {
    color: var(--color-terracotta);
    background: rgba(198, 93, 52, 0.1);
}

/* Activities Card - Cool Blue Theme */
.dest-explore-card--activities {
    background: linear-gradient(135deg, #F0F7FA 0%, #DCE8F0 100%);
    border: 1px solid rgba(91, 143, 168, 0.15);
}

.dest-explore-card--activities::before {
    background: linear-gradient(135deg, #E8F2F7 0%, #C8DDE8 100%);
}

.dest-explore-card--activities:hover {
    border-color: #5B8FA8;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(91, 143, 168, 0.15);
}

.dest-explore-card--activities .dest-explore-card__icon {
    color: #5B8FA8;
    background: rgba(91, 143, 168, 0.1);
}

.dest-explore-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.dest-explore-card:hover .dest-explore-card__icon {
    transform: scale(1.1);
}

.dest-explore-card__content {
    flex: 1;
    min-width: 0;
}

.dest-explore-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.dest-explore-card__desc {
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

.dest-explore-card__arrow {
    color: var(--color-gray-400);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dest-explore-card--tours:hover .dest-explore-card__arrow {
    color: var(--color-terracotta);
    transform: translateX(4px);
}

.dest-explore-card--activities:hover .dest-explore-card__arrow {
    color: #5B8FA8;
    transform: translateX(4px);
}

/* Secondary Link in Sidebar */
.dest-sidebar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: var(--space-2);
}

.dest-sidebar__link:hover {
    color: var(--color-terracotta);
}

.dest-sidebar__link svg {
    transition: transform 0.3s ease;
}

.dest-sidebar__link:hover svg {
    transform: translateX(4px);
}

/* Activity Card Badge */
.card-badge--activity {
    background: linear-gradient(135deg, #5B8FA8 0%, #4A7A91 100%);
}

/* Tour Card Badge - Warm Terracotta */
.card-badge--tour {
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #B5442E 100%);
}

/* ========================================
   DISTINCT CARD STYLING - TOURS VS ACTIVITIES
   Visual differentiation for clear separation
   ======================================== */

/* Tour Cards - Warm Accent */
.dest-tour-card--tour {
    border-top: 3px solid var(--color-terracotta);
}

.dest-tour-card--tour:hover {
    box-shadow: 0 12px 40px rgba(198, 93, 52, 0.15);
}

.dest-tour-card--tour .card-title a:hover {
    color: var(--color-terracotta);
}

/* Activity Cards - Cool Blue Accent */
.dest-activity-card {
    border-top: 3px solid #5B8FA8;
}

.dest-activity-card:hover {
    box-shadow: 0 12px 40px rgba(91, 143, 168, 0.15);
}

.dest-activity-card .card-title a:hover {
    color: #5B8FA8;
}

/* Button Variants for Tours vs Activities */
.btn-primary--activity {
    background: linear-gradient(135deg, #5B8FA8 0%, #4A7A91 100%);
}

.btn-primary--activity:hover {
    background: linear-gradient(135deg, #4A7A91 0%, #3A6A81 100%);
}

.btn-outline--tour {
    color: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.btn-outline--tour:hover {
    background: var(--color-terracotta);
    color: var(--color-white);
}

.btn-outline--activity {
    color: #5B8FA8;
    border-color: #5B8FA8;
}

.btn-outline--activity:hover {
    background: #5B8FA8;
    color: var(--color-white);
}

/* Tours Section */
.dest-tours-section {
    padding: var(--space-16) 0;
}

.dest-tours-grid {
    margin-top: var(--space-8);
}

.dest-tour-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.98);
}

.dest-tour-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dest-tour-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.dest-tour-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.dest-tours-cta {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: var(--space-8);
    padding: var(--space-8);
}

.dest-tours-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-12);
}

.dest-tours-empty svg {
    color: var(--color-gray-400);
    margin-bottom: var(--space-4);
}

.dest-tours-empty h3 {
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.dest-tours-empty p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* Section Selector Cards - All Destinations */
.dest-section-selector {
    padding: var(--space-6) 0;
    background: var(--color-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: var(--space-8);
}

.dest-selector-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
}

.dest-selector-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xl);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    min-height: 160px;
}

/* Tours Card - Terracotta/Warm tone */
.dest-selector-card--tours {
    background: linear-gradient(135deg, #FDF6F0 0%, #FAE8DC 100%);
    border: 2px solid transparent;
}

.dest-selector-card--tours:hover {
    border-color: var(--color-terracotta);
}

/* Activities Card - Blue/Cool tone */
.dest-selector-card--activities {
    background: linear-gradient(135deg, #F0F7FA 0%, #DCE8F0 100%);
    border: 2px solid transparent;
}

.dest-selector-card--activities:hover {
    border-color: #5B8FA8;
}

/* Hover Effects */
.dest-selector-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Active State */
.dest-selector-card.active {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dest-selector-card--tours.active {
    border-color: var(--color-terracotta);
    background: linear-gradient(135deg, #FCF0E8 0%, #F5D8C6 100%);
}

.dest-selector-card--activities.active {
    border-color: #5B8FA8;
    background: linear-gradient(135deg, #E8F2F7 0%, #C8DDE8 100%);
}

/* Card Content */
.dest-selector-card__content {
    flex: 1;
}

.dest-selector-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.dest-selector-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* CTA Button */
.dest-selector-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    margin-top: var(--space-4);
    transition: all 0.3s ease;
}

.dest-selector-card--tours .dest-selector-card__cta {
    color: var(--color-terracotta);
}

.dest-selector-card--activities .dest-selector-card__cta {
    color: #5B8FA8;
}

.dest-selector-card__cta svg {
    transition: transform 0.3s ease;
}

.dest-selector-card:hover .dest-selector-card__cta svg {
    transform: translateX(4px);
}

/* Active CTA enhancement */
.dest-selector-card.active .dest-selector-card__cta::after {
    content: '✓';
    margin-left: var(--space-2);
    font-size: var(--text-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
    .dest-section-selector {
        padding: var(--space-6) 0;
    }
    
    .dest-selector-cards {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .dest-selector-card {
        padding: var(--space-5) var(--space-6);
        min-height: 140px;
    }
    
    .dest-selector-card__title {
        font-size: var(--text-lg);
    }
    
    .dest-selector-card__subtitle {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .dest-selector-card {
        padding: var(--space-4) var(--space-5);
        min-height: 120px;
    }
}

/* Explore Cards Responsive */
@media (max-width: 1024px) {
    .dest-content-wrapper {
        flex-direction: column;
    }
    
    .dest-sidebar {
        position: static;
        width: 100%;
        margin-top: var(--space-8);
    }
    
    .dest-sidebar__box--premium {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .dest-sidebar__box--premium .dest-sidebar__title {
        grid-column: 1 / -1;
    }
    
    .dest-sidebar__box--premium .dest-sidebar__link {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .dest-sidebar__box--premium {
        grid-template-columns: 1fr;
    }
    
    .dest-explore-card {
        padding: var(--space-4);
    }
    
    .dest-explore-card__icon {
        width: 42px;
        height: 42px;
    }
    
    .dest-explore-card__icon svg {
        width: 20px;
        height: 20px;
    }
    
    .dest-explore-card__title {
        font-size: var(--text-sm);
    }
    
    .dest-highlights__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dest-explore-card {
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    
    .dest-explore-card__icon {
        width: 36px;
        height: 36px;
    }
    
    .dest-explore-card__desc {
        display: none;
    }
}

/* ========================================
   DESTINATION PAGE - PREMIUM ANIMATIONS
   Clean, Elegant, Responsive
   ======================================== */

/* Scroll Progress Bar */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-terracotta);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 10000;
    pointer-events: none;
}

/* ========================================
   SECTION BACKGROUNDS & SEPARATION
   Premium Visual Hierarchy
   ======================================== */

/* Tours Section - Refined Sand Background */
.dest-tours-section {
    background: linear-gradient(180deg, #F9F7F4 0%, #F5F2ED 100%);
    position: relative;
    padding: var(--space-20) 0;
}

/* Activities Section - Refined darker tint for contrast */
.dest-activities-section {
    background: linear-gradient(180deg, #f2f4f8 0%, #f6f7fa 40%, #ffffff 100%);
    position: relative;
    padding: var(--space-20) 0;
    margin-top: 0;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);
}

/* Premium Section Divider - Subtle & Intentional */
.dest-activities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(198, 93, 52, 0.25) 25%, 
        rgba(198, 93, 52, 0.35) 50%, 
        rgba(198, 93, 52, 0.25) 75%, 
        transparent 100%);
    opacity: 0;
    transition: opacity 0.9s var(--ease-luxury);
}

.dest-activities-section.is-visible::before {
    opacity: 1;
}

/* Section Spacing Enhancement */
.dest-tours-section + .dest-activities-section {
    margin-top: 0;
    padding-top: var(--space-24);
}

/* Enhanced Section Transitions - Highlights to Tours to Activities */
.dest-content-section {
    position: relative;
}

.dest-content-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 93, 52, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.dest-content-section.is-visible::after {
    opacity: 1;
}

/* Highlights Grid Animation */
.dest-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.dest-highlights__item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s var(--ease-luxury), 
                transform 0.6s var(--ease-luxury),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.dest-highlights.is-visible .dest-highlights__item,
.dest-highlights__item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.dest-highlights.is-visible .dest-highlights__item:nth-child(1) { transition-delay: 0.1s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(2) { transition-delay: 0.15s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(3) { transition-delay: 0.2s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(4) { transition-delay: 0.25s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(5) { transition-delay: 0.3s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(6) { transition-delay: 0.35s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(7) { transition-delay: 0.4s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(8) { transition-delay: 0.45s; }

/* Explore Cards Stagger Animation */
.dest-explore-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease-luxury), 
                transform 0.5s var(--ease-luxury),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.dest-sidebar__box.is-visible .dest-explore-card {
    opacity: 1;
    transform: translateY(0);
}

.dest-sidebar__box.is-visible .dest-explore-card--tours {
    transition-delay: 0.1s;
}

.dest-sidebar__box.is-visible .dest-explore-card--activities {
    transition-delay: 0.2s;
}

.dest-sidebar__box.is-visible .dest-sidebar__link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.dest-sidebar__link {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease-luxury), transform 0.4s var(--ease-luxury), color 0.3s ease;
}

/* Section Selector Cards Animation */
.dest-selector-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-luxury), 
                transform 0.6s var(--ease-luxury),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.dest-selector-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   Premium Easing & Timing
   ======================================== */

/* Luxury easing curve */
:root {
    --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base fade-up animation - Refined */
.scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-luxury),
                transform 0.9s var(--ease-luxury);
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Legacy support - Enhanced */
.dest-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-luxury),
                transform 0.9s var(--ease-luxury);
}

.dest-reveal.is-visible,
.dest-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Premium Fade-In Animation */
.dest-fade-in {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Premium Slide-In Animation */
.dest-slide-in {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-slide-in.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================
   SECTION HEADER ANIMATIONS
   Refined & Polished
   ======================================== */

.section-title {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s var(--ease-luxury),
                transform 0.9s var(--ease-luxury);
}

.section-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Premium animated underline */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-terracotta);
    border-radius: 1px;
    transition: width 1s var(--ease-luxury);
    transition-delay: 0.3s;
}

.section-title.is-visible::after {
    width: 56px;
}

.section-description {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.85s var(--ease-luxury) 0.2s,
                transform 0.85s var(--ease-luxury) 0.2s;
}

.section-description.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   CARD ANIMATIONS - REFINED STAGGER
   Premium Timing & Easing
   ======================================== */

.dest-tours-grid .card,
.dest-tours-grid article {
    opacity: 0;
    transform: translateY(36px) scale(0.98);
    transition: opacity 0.75s var(--ease-luxury),
                transform 0.75s var(--ease-luxury),
                box-shadow 0.4s var(--ease-smooth);
}

.dest-tours-grid .card.is-visible,
.dest-tours-grid article.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Refined stagger - More controlled rhythm */
.dest-tours-grid .card:nth-child(1),
.dest-tours-grid article:nth-child(1) { transition-delay: 0s; }
.dest-tours-grid .card:nth-child(2),
.dest-tours-grid article:nth-child(2) { transition-delay: 0.1s; }
.dest-tours-grid .card:nth-child(3),
.dest-tours-grid article:nth-child(3) { transition-delay: 0.2s; }
.dest-tours-grid .card:nth-child(4),
.dest-tours-grid article:nth-child(4) { transition-delay: 0.3s; }
.dest-tours-grid .card:nth-child(5),
.dest-tours-grid article:nth-child(5) { transition-delay: 0.4s; }
.dest-tours-grid .card:nth-child(6),
.dest-tours-grid article:nth-child(6) { transition-delay: 0.5s; }
.dest-tours-grid .card:nth-child(7),
.dest-tours-grid article:nth-child(7) { transition-delay: 0.6s; }
.dest-tours-grid .card:nth-child(8),
.dest-tours-grid article:nth-child(8) { transition-delay: 0.7s; }

/* ========================================
   CARD HOVER EFFECTS
   Premium Micro-interactions
   ======================================== */

.dest-tour-card,
.dest-tours-grid .card {
    transition: transform 0.5s var(--ease-luxury),
                box-shadow 0.5s var(--ease-luxury);
    will-change: transform;
}

.dest-tour-card:hover,
.dest-tours-grid .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Refined image zoom with parallax support */
.dest-tour-card .card-image,
.card .card-image {
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dest-tour-card .card-image img,
.card .card-image img {
    transition: transform 0.7s var(--ease-luxury);
    will-change: transform;
    transform-origin: center center;
}

.dest-tour-card:hover .card-image img,
.card:hover .card-image img {
    transform: scale(1.06) !important;
}

/* Premium title underline */
.dest-tour-card .card-title a,
.card .card-title a {
    position: relative;
    text-decoration: none;
}

.dest-tour-card .card-title a::after,
.card .card-title a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-terracotta);
    transition: width 0.5s var(--ease-luxury);
}

.dest-tour-card:hover .card-title a::after,
.card:hover .card-title a::after {
    width: 100%;
}

/* Refined price animation */
.card-price-value {
    transition: color 0.4s var(--ease-smooth),
                transform 0.4s var(--ease-smooth);
    display: inline-block;
}

.dest-tour-card:hover .card-price-value,
.card:hover .card-price-value {
    color: var(--color-terracotta);
    transform: translateX(2px);
}

/* ========================================
   SELECTOR CARDS
   Premium Entrance
   ======================================== */

.dest-selector-card {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.8s var(--ease-luxury),
                transform 0.8s var(--ease-luxury),
                box-shadow 0.4s var(--ease-smooth);
}

.dest-selector-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dest-selector-card:first-child {
    transition-delay: 0s;
}

.dest-selector-card:last-child {
    transition-delay: 0.15s;
}

.dest-selector-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

/* ========================================
   HERO ANIMATIONS
   Premium Entrance
   ======================================== */

.dest-hero-animate {
    opacity: 0;
    transform: translateY(28px);
    animation: heroFadeInUp 0.9s var(--ease-luxury) forwards;
}

.dest-hero-animate[data-delay="0"] {
    animation-delay: 0.15s;
}

.dest-hero-animate[data-delay="100"] {
    animation-delay: 0.35s;
}

.dest-hero-animate[data-delay="500"] {
    animation-delay: 0.7s;
}

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

/* ========================================
   CONTENT SECTION ANIMATIONS
   Refined Timing
   ======================================== */

.dest-content-text,
.dest-highlights,
.dest-sidebar__box {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--ease-luxury),
                transform 0.85s var(--ease-luxury);
}

.dest-content-text.is-visible,
.dest-highlights.is-visible,
.dest-sidebar__box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dest-highlights {
    transition-delay: 0.1s;
}

.dest-sidebar__box {
    transition-delay: 0.2s;
}

/* ========================================
   SECTION HEADER SPACING
   Better Rhythm & Balance
   ======================================== */

.section-header {
    margin-bottom: var(--space-12);
}

.dest-tours-section .section-header {
    margin-bottom: var(--space-14);
}

.dest-activities-section .section-header {
    margin-bottom: var(--space-14);
}

/* ========================================
   RESPONSIVE
   Maintained Premium Feel
   ======================================== */

@media (max-width: 1024px) {
    .dest-tours-section,
    .dest-activities-section {
        padding: var(--space-16) 0;
    }
    
    .dest-tours-section + .dest-activities-section {
        padding-top: var(--space-20);
    }
}

@media (max-width: 768px) {
    .dest-tour-card:hover,
    .dest-tours-grid .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    }
    
    .scroll-reveal,
    .dest-reveal {
        transform: translateY(20px);
    }
    
    .dest-tours-grid .card,
    .dest-tours-grid article {
        transform: translateY(24px) scale(0.99);
    }
    
    .section-title {
        transform: translateY(16px);
    }
    
    .section-description {
        transform: translateY(14px);
    }
    
    .dest-tours-section,
    .dest-activities-section {
        padding: var(--space-12) 0;
    }
    
    .dest-tours-section + .dest-activities-section {
        padding-top: var(--space-16);
    }
    
    .section-header {
        margin-bottom: var(--space-10);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .dest-reveal,
    .dest-tours-grid .card,
    .dest-tours-grid article,
    .dest-selector-card,
    .dest-hero-animate,
    .dest-content-text,
    .dest-highlights,
    .dest-sidebar__box,
    .section-title::after,
    .section-description {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    .scroll-progress-bar {
        display: none;
    }
}

/* Card Badge */
.card-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--color-terracotta);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(198, 93, 52, 0.25);
}

/* Gallery parallax support */
.dest-gallery-item {
    overflow: hidden;
}

.dest-gallery-item img {
    transition: transform 0.3s ease-out;
    will-change: transform;
    transform-origin: center center;
}

/* Card Excerpt */
.card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0 0 var(--space-4) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Meta with Icon */
.card-meta-item svg {
    vertical-align: middle;
    margin-right: var(--space-1);
}

/* CTA Section */
.dest-cta-section {
    padding: var(--space-20) 0;
    position: relative;
}

.dest-cta {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.dest-cta__title {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.dest-cta__text {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin-bottom: var(--space-8);
}

.dest-cta__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Reveal Animations */
.dest-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dest-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .dest-sidebar__box {
        position: relative;
        top: 0;
        margin-top: var(--space-8);
    }
    
}

@media (max-width: 768px) {
    .dest-hero-premium {
        min-height: 50vh;
    }
    
    .dest-quick-info__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .dest-quick-info__item {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-gray-200);
    }
    
    .dest-quick-info__item:last-child {
        border-bottom: none;
    }
    
    .dest-gallery-item {
        width: 280px;
    }
    
    .dest-gallery-track {
        gap: 10px;
    }
    
    .dest-highlights__grid {
        grid-template-columns: 1fr;
    }
    
    .dest-cta__title {
        font-size: var(--text-3xl);
    }
    
    .dest-cta__buttons {
        flex-direction: column;
    }
    
    .dest-cta__buttons .btn {
        width: 100%;
    }
    
    .dest-lightbox__prev,
    .dest-lightbox__next {
        width: 40px;
        height: 40px;
    }
    
    .dest-lightbox__close {
        width: 40px;
        height: 40px;
        top: var(--space-2);
        right: var(--space-2);
    }
}

@media (max-width: 480px) {
    .dest-gallery-item {
        width: 260px;
    }
    
    .dest-gallery-track {
        gap: 8px;
    }
    
    .dest-cta__title {
        font-size: var(--text-2xl);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .dest-hero-animate,
    .dest-reveal,
    .dest-gallery-item,
    .dest-tour-card {
        transition: none;
        animation: none;
    }
    
    .dest-hero-scroll-hint {
        animation: none;
    }
    
    .dest-hero-bg-parallax img {
        transform: none !important;
    }
    
    .dest-gallery-track {
        animation: none !important;
    }
    
    .dest-gallery-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    
    .dest-gallery-item {
        scroll-snap-align: center;
    }
}

/* ========================================
   SINGLE ACTIVITY PAGE STYLES
   ======================================== */

.activity-page {
    background: var(--color-white);
}

/* Activity Hero Section */
.activity-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.activity-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.activity-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-hero__bg--gradient {
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-earth) 50%, var(--color-terracotta-dark) 100%);
}

.activity-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

.activity-hero .container {
    position: relative;
    z-index: 3;
    padding-bottom: var(--space-16);
}

.activity-hero__content {
    max-width: 800px;
}

.activity-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.activity-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.activity-breadcrumb a:hover {
    color: white;
}

.activity-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.4);
}

.activity-breadcrumb .current {
    color: white;
}

.activity-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    color: white;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-4);
}

.activity-hero__badge svg {
    color: var(--color-terracotta-light);
}

.activity-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: white;
    line-height: 1.15;
    margin-bottom: var(--space-6);
}

.activity-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}

.activity-hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
}

.activity-hero__meta-item svg {
    opacity: 0.8;
}

.activity-hero__meta-item--price {
    background: var(--color-terracotta);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    gap: var(--space-3);
}

.activity-hero__meta-item--price .label {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-hero__meta-item--price .price {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
}

.activity-hero__meta-item--price .per {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-hero__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: white;
    opacity: 0.6;
    animation: activityBounce 2s ease-in-out infinite;
}

@keyframes activityBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Activity Main Layout */
.activity-main {
    padding: var(--space-16) 0;
}

.activity-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-12);
    align-items: start;
}

/* Activity Content Sections */
.activity-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.activity-section {
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-gray-100);
}

.activity-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.activity-section__title svg {
    color: var(--color-terracotta);
}

.activity-section__content p {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-gray-700);
}

/* Activity Paragraph Animations */
.activity-paragraph {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: linear-gradient(135deg, rgba(var(--color-terracotta-rgb), 0.03), transparent);
    border-left: 3px solid var(--color-terracotta);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    opacity: 0;
    transform: translateY(20px);
}

.activity-paragraph.reveal-fade-up {
    animation: activityParagraphReveal 0.6s ease forwards;
}

@keyframes activityParagraphReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.activity-paragraph:last-child {
    margin-bottom: 0;
}

/* Activity Highlights */
.activity-highlights__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-4);
}

.activity-highlights__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.activity-highlights__list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-terracotta);
}

/* Activity Inclusions */
.activity-inclusions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.activity-inclusions__col h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.activity-inclusions__col--included h3 {
    color: #059669;
}

.activity-inclusions__col--included h3 svg {
    color: #059669;
}

.activity-inclusions__col--excluded h3 {
    color: #DC2626;
}

.activity-inclusions__col--excluded h3 svg {
    color: #DC2626;
}

.activity-inclusions__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.activity-inclusions__col ul li {
    font-size: var(--text-base);
    color: var(--color-gray-700);
    padding-left: var(--space-6);
    position: relative;
}

.activity-inclusions__col--included ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: 600;
}

.activity-inclusions__col--excluded ul li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #DC2626;
    font-weight: 600;
}

/* Activity Meeting Point */
.activity-meeting__content p {
    font-size: var(--text-base);
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);
}

.activity-meeting__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.activity-meeting__map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12);
    background: var(--color-sand-light);
    color: var(--color-gray-500);
    text-align: center;
}

.activity-meeting__map-placeholder svg {
    opacity: 0.5;
}

/* Activity Policy */
.activity-policy__content {
    background: var(--color-sand-light);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

.activity-policy__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: #D1FAE5;
    color: #059669;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 100px;
    margin-bottom: var(--space-4);
}

.activity-policy__content p {
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin: 0;
}

/* Activity FAQ */
.activity-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.activity-faq__item {
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.activity-faq__item:hover {
    border-color: var(--color-gray-300);
}

.activity-faq__item.active {
    border-color: var(--color-terracotta);
}

.activity-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-5);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-dark);
    transition: background-color 0.2s ease;
}

.activity-faq__question:hover {
    background: var(--color-gray-100);
}

.activity-faq__question svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--color-gray-500);
}

.activity-faq__item.active .activity-faq__question svg {
    transform: rotate(180deg);
    color: var(--color-terracotta);
}

.activity-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.activity-faq__item.active .activity-faq__answer {
    max-height: 500px;
}

.activity-faq__answer p {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin: 0;
}

/* Activity Booking Sidebar */
.activity-sidebar {
    position: sticky;
    top: calc(var(--header-height, 80px) + var(--space-6));
}

.activity-booking-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.activity-booking-card__header {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    color: white;
}

.activity-booking-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.activity-booking-card__price .label {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-booking-card__price .amount {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
}

.activity-booking-card__price .per {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-booking-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.activity-booking-card__rating svg {
    color: #FCD34D;
}

.activity-booking-card__rating .reviews {
    opacity: 0.8;
}

/* Booking Form */
.activity-booking-form {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.activity-booking-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.activity-booking-form label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

.activity-booking-form label svg {
    color: var(--color-gray-500);
}

.activity-booking-form label .optional {
    font-weight: 400;
    color: var(--color-gray-500);
}

.activity-booking-form input[type="text"],
.activity-booking-form input[type="email"],
.activity-booking-form input[type="tel"],
.activity-booking-form input[type="date"],
.activity-booking-form select,
.activity-booking-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--color-dark);
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.activity-booking-form input:focus,
.activity-booking-form select:focus,
.activity-booking-form textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.15);
}

.activity-booking-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
}

.activity-booking-form textarea {
    resize: vertical;
    min-height: 80px;
}

/* Booking Summary */
.activity-booking-card__summary {
    background: var(--color-sand-light);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.summary-row + .summary-row {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-gray-300);
}

.summary-total {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-dark);
}

/* Payment Options */
.activity-booking-card__payment {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.payment-option {
    position: relative;
}

.payment-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.payment-option label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-option input:checked + label {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.payment-option label::before {
    content: '';
    grid-row: span 2;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: 50%;
    align-self: center;
    transition: all 0.2s ease;
}

.payment-option input:checked + label::before {
    border-color: var(--color-terracotta);
    background: var(--color-terracotta);
    box-shadow: inset 0 0 0 4px white;
}

.payment-option__title {
    font-weight: 600;
    color: var(--color-dark);
}

.payment-option__desc {
    grid-column: 2;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.payment-option__amount {
    grid-row: span 2;
    align-self: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--color-terracotta);
}

/* Submit Button */
.activity-booking-card__submit {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
    font-weight: 600;
}

.activity-booking-card__submit .btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.activity-booking-card__submit .spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

.activity-booking-card__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-align: center;
    margin-top: var(--space-3);
}

.activity-booking-card__secure svg {
    color: #059669;
}

/* WhatsApp Quick Contact */
.activity-booking-card__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-gray-100);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.activity-booking-card__whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #25D366;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.activity-booking-card__whatsapp a:hover {
    opacity: 0.8;
}

/* Booking Success Modal */
.activity-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.activity-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.activity-modal__content {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.activity-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.activity-modal__close:hover {
    background: var(--color-gray-100);
    color: var(--color-dark);
}

.activity-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #D1FAE5;
    border-radius: 50%;
    margin-bottom: var(--space-6);
}

.activity-modal__icon svg {
    color: #059669;
}

.activity-modal__content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.activity-modal__ref {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

.activity-modal__ref strong {
    color: var(--color-terracotta);
    font-family: monospace;
    font-size: var(--text-base);
}

.activity-modal__content > p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.activity-modal__details {
    background: var(--color-sand-light);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    text-align: left;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.detail-row:not(:last-child) {
    border-bottom: 1px solid var(--color-sand);
}

.detail-row .label {
    color: var(--color-gray-500);
}

.detail-row .value {
    font-weight: 500;
    color: var(--color-dark);
}

.activity-modal__calendar {
    margin-bottom: var(--space-6);
}

.activity-modal__calendar p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.calendar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.calendar-buttons .btn {
    font-size: var(--text-sm);
}

.activity-modal__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.activity-modal__actions .btn {
    flex: 1;
    max-width: 200px;
}

/* Activity Page Responsive */
@media (max-width: 1024px) {
    .activity-layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .activity-sidebar {
        position: relative;
        top: 0;
        order: -1;
    }
    
    .activity-inclusions__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .activity-hero {
        min-height: 60vh;
    }
    
    .activity-hero__title {
        font-size: var(--text-3xl);
    }
    
    .activity-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    
    .activity-hero__meta-item--price {
        width: 100%;
        justify-content: center;
    }
    
    .activity-main {
        padding: var(--space-10) 0;
    }
    
    .activity-section__title {
        font-size: var(--text-xl);
    }
    
    .activity-booking-card__header {
        padding: var(--space-5);
    }
    
    .activity-booking-form {
        padding: var(--space-5);
    }
    
    .activity-modal__content {
        padding: var(--space-6);
    }
    
    .activity-modal__actions {
        flex-direction: column;
    }
    
    .activity-modal__actions .btn {
        max-width: none;
    }
    
    .calendar-buttons {
        flex-direction: column;
    }
    
    .calendar-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .activity-hero .container {
        padding-bottom: var(--space-10);
    }
    
    .activity-breadcrumb {
        font-size: var(--text-xs);
    }
    
    .activity-hero__badge {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
    }
    
    .payment-option label {
        padding: var(--space-3);
    }
    
    .payment-option__amount {
        font-size: var(--text-base);
    }
}

/* Mobile Booking Bar */
.mobile-booking-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: white;
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.mobile-booking-bar__price {
    display: flex;
    flex-direction: column;
}

.mobile-booking-bar__price .label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.mobile-booking-bar__price .amount {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
}

.mobile-booking-bar__btn {
    padding: var(--space-3) var(--space-8);
}

/* Form error state */
.activity-booking-form input.error,
.activity-booking-form select.error,
.activity-booking-form textarea.error {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.activity-booking-form input.error:focus,
.activity-booking-form select.error:focus,
.activity-booking-form textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

    }
}

@media (max-width: 576px) {
    .region-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.region-card {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 10px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
}

.region-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.12),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

.region-card-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.region-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.region-card:hover .region-card-image img {
    transform: scale(1.1);
}

.region-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-6);
    transition: background 0.4s ease;
}

.region-card:hover .region-card-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0) 100%
    );
}

.region-card-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 var(--space-1) 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.region-card:hover .region-card-title {
    transform: translateY(-4px);
}

.region-card-subtitle {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
    transform: translateY(0);
    transition: all 0.4s ease;
}

.region-card:hover .region-card-subtitle {
    opacity: 1;
    transform: translateY(-2px);
}

.region-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-earth) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.region-card:hover::after {
    transform: scaleX(1);
}

@media (max-width: 576px) {
    .region-card {
        aspect-ratio: 16 / 10;
    }
    
    .region-card-title {
        font-size: var(--text-xl);
    }
    
    .region-card-overlay {
        padding: var(--space-5);
    }
}

/* ========================================
   TOP DESTINATIONS SECTION - Tile Cards
   ======================================== */

.destinations-section {
    padding: var(--space-20) 0;
    background: var(--color-sand-light);
    position: relative;
}

.destinations-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-terracotta), transparent);
    border-radius: 2px;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-10);
}

@media (max-width: 1024px) {
    .destinations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .destinations-grid {
        grid-template-columns: 1fr;
    }
}

.destination-tile {
    display: block;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.destination-tile:hover {
    transform: translateY(-6px);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.08);
}

.destination-tile-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.destination-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.destination-tile:hover .destination-tile-image img {
    transform: scale(1.08);
}

.destination-tile-content {
    padding: var(--space-4) var(--space-5);
    text-align: center;
    background: var(--color-white);
    position: relative;
}

.destination-tile-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 40px;
    height: 2px;
    background: var(--color-terracotta);
    transition: transform 0.35s ease;
}

.destination-tile:hover .destination-tile-content::before {
    transform: translateX(-50%) scaleX(1);
}

.destination-tile-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-1) 0;
    transition: color 0.3s ease;
}

.destination-tile:hover .destination-tile-name {
    color: var(--color-terracotta);
}

.destination-tile-caption {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 576px) {
    .destinations-section {
        padding: var(--space-16) 0;
    }
    
    .destination-tile-content {
        padding: var(--space-3) var(--space-4);
    }
    
    .destination-tile-name {
        font-size: var(--text-base);
    }
}

/* ========================================
   TOP DESTINATIONS PAGE STYLES
   /destinations/ archive page
   ======================================== */

/* Smooth scroll for destinations page */
.dest-page {
    scroll-behavior: smooth;
}

/* Mobile horizontal scroll with swipe support */
@media (max-width: 768px) {
    .dest-top__grid,
    .dest-region__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 16px;
        padding-bottom: 16px;
        gap: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
    }
    
    .dest-top__grid::-webkit-scrollbar,
    .dest-region__grid::-webkit-scrollbar {
        display: none;
    }
    
    .dest-top__grid .dest-card,
    .dest-region__grid .dest-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    
    .dest-top__grid.is-grabbing,
    .dest-region__grid.is-grabbing {
        cursor: grabbing;
        scroll-snap-type: none;
    }
    
    .dest-top__grid.is-grabbing .dest-card,
    .dest-region__grid.is-grabbing .dest-card {
        pointer-events: none;
    }
}

/* Page Hero */
.destinations-hero {
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a3d2c 100%);
    padding: var(--space-20) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.destinations-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
    opacity: 0.5;
}

.destinations-hero .container {
    position: relative;
    z-index: 1;
}

.destinations-hero .hero-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-terracotta-light);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-4);
}

.destinations-hero .hero-title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--space-4) 0;
}

.destinations-hero .hero-description {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .destinations-hero {
        padding: var(--space-12) 0;
    }
    
    .destinations-hero .hero-title {
        font-size: var(--text-3xl);
    }
}

/* Page Section */
.destinations-page-section {
    padding: var(--space-16) 0;
    background: var(--color-sand-light);
}

/* Filter Bar */
.destinations-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-sand-dark);
}

.destinations-count {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    margin: 0;
}

/* Destinations Page Grid - 3 columns */
.destinations-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .destinations-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .destinations-page-grid {
        grid-template-columns: 1fr;
    }
}

/* Destination Page Card */
.destination-page-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.destination-page-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.1),
        0 24px 48px rgba(0, 0, 0, 0.08);
}

.destination-page-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Card Image */
.destination-page-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.destination-page-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.destination-page-card:hover .destination-page-card-image img {
    transform: scale(1.08);
}

/* Tagline Badge */
.destination-tagline-badge {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Card Content */
.destination-page-card-content {
    padding: var(--space-5) var(--space-6);
}

.destination-page-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-2) 0;
    transition: color 0.3s ease;
}

.destination-page-card:hover .destination-page-card-title {
    color: var(--color-terracotta);
}

.destination-page-card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.6;
}

/* Best Time */
.destination-best-time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.destination-best-time svg {
    color: var(--color-terracotta);
}

/* CTA Link */
.destination-page-card-cta {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    transition: all 0.3s ease;
}

.destination-page-card:hover .destination-page-card-cta {
    color: var(--color-earth);
    transform: translateX(4px);
}

/* No Destinations State */
.no-destinations {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-xl);
}

.no-destinations-icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
}

.no-destinations h2 {
    margin-bottom: var(--space-3);
}

.no-destinations p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Transfer Card */
.transfer-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: var(--transition-base);
}

.transfer-card:hover {
    border-color: var(--color-terracotta);
    box-shadow: var(--shadow-lg);
}

.transfer-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.transfer-card-icon {
    width: 60px;
    height: 60px;
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.transfer-card-icon img {
    width: 40px;
    height: 40px;
}

.transfer-card-info h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.transfer-card-info p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.transfer-card-details {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.transfer-card-detail {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.transfer-card-detail svg {
    width: 18px;
    height: 18px;
    color: var(--color-gray-400);
}

.transfer-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.transfer-card-price {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
}

.transfer-card-price span {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-gray-500);
}

/* Transfer Cards Mobile Responsive */
@media (max-width: 768px) {
    .transfer-card {
        padding: var(--space-4);
    }
    
    .transfer-card-header {
        flex-direction: row;
        gap: var(--space-3);
    }
    
    .transfer-card-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
    
    .transfer-card-info h4 {
        font-size: var(--text-base);
    }
    
    .transfer-card-details {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .transfer-card-footer {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .transfer-card-price {
        font-size: var(--text-xl);
    }
    
    /* Override grid-column span */
    .transfer-card[style*="grid-column: span 2"],
    .transfer-card[style*="grid-column:span 2"] {
        grid-column: auto !important;
    }
}

@media (max-width: 480px) {
    .transfer-card {
        padding: var(--space-3);
    }
    
    .transfer-card-icon {
        width: 40px;
        height: 40px;
    }
    
    .transfer-card-info h4 {
        font-size: var(--text-sm);
    }
    
    .transfer-card-info p {
        font-size: var(--text-xs);
    }
    
    .transfer-card-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .transfer-card-footer .btn {
        width: 100%;
    }
}

/* ========================================
   GRID LAYOUTS
   ======================================== */

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.section-header.text-left {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
}

.section-eyebrow {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.1) 0%, rgba(212, 168, 90, 0.1) 100%);
    border-radius: 50px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.section-title {
    margin-bottom: var(--space-4);
}

.section-description {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
}

/* ========================================
   FEATURES & BENEFITS
   ======================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-item {
    text-align: center;
    padding: var(--space-8);
    background: var(--color-sand-light);
    border-radius: var(--radius-xl);
    transition: var(--transition-base);
}

.feature-item:hover {
    background: var(--color-sand);
    transform: translateY(-4px);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-terracotta);
}

.feature-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.feature-description {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.6;
}

/* ========================================
   TRUST BADGES
   ======================================== */

.trust-bar {
    display: block;
    background: var(--color-sand-light);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-sand);
    border-bottom: 1px solid var(--color-sand);
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: 100%;
}

/* Pause animation on hover/touch */
.trust-bar:hover .trust-badges,
.trust-bar:active .trust-badges {
    animation-play-state: paused;
}

.trust-bar-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.trust-bar .trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: nowrap;
    padding: var(--space-2) 0;
    width: auto;
    /* No animation on desktop - static display */
    -webkit-animation: none;
    animation: none;
}

/* Hide duplicate badges on desktop (they're only needed for mobile scroll loop) */
.trust-badge-duplicate,
.trust-bar .trust-badge-duplicate,
.trust-bar .trust-badges .trust-badge-duplicate,
section.trust-bar .trust-badge-duplicate {
    display: none !important;
}

/* Mobile/Tablet only (≤1024px): Enable sliding animation */
@media (max-width: 1024px) {
    .trust-bar .trust-badges {
        justify-content: flex-start;
        width: max-content;
        -webkit-animation: trustBadgeSlide 15s linear infinite;
        animation: trustBadgeSlide 15s linear infinite;
    }
    
    /* Show duplicate badges for seamless scrolling loop on mobile/tablet */
    .trust-badge-duplicate,
    .trust-bar .trust-badge-duplicate,
    .trust-bar .trust-badges .trust-badge-duplicate,
    section.trust-bar .trust-badge-duplicate {
        display: flex !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
    }
}

.trust-bar .trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-radius: 0;
}

.trust-bar .trust-badge svg {
    width: 32px;
    height: 32px;
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.trust-bar .trust-badge span {
    display: block !important;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile & Tablet - Auto-scrolling marquee animation */
@media (max-width: 768px) {
    .trust-bar {
        display: block !important;
        padding: var(--space-4) 0;
        overflow: hidden !important;
        position: relative;
        width: 100%;
    }
    
    .trust-bar-container {
        display: block !important;
        padding: 0;
        max-width: 100%;
        width: 100%;
        overflow: hidden !important;
        position: relative;
    }
    
    .trust-bar .trust-badges {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: var(--space-6);
        padding: var(--space-2) 0;
        width: max-content !important;
        min-width: max-content !important;
        will-change: transform;
        -webkit-animation: trustBadgeSlide 12s linear infinite !important;
        animation: trustBadgeSlide 12s linear infinite !important;
        -webkit-animation-play-state: running !important;
        animation-play-state: running !important;
    }
    
    /* Show duplicate badges for seamless loop on mobile only */
    .trust-badge-duplicate,
    .trust-bar .trust-badge-duplicate,
    .trust-bar .trust-badges .trust-badge-duplicate,
    section.trust-bar .trust-badge-duplicate {
        display: flex !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        left: auto !important;
        opacity: 1 !important;
    }
    
    .trust-bar .trust-badge {
        flex: 0 0 auto !important;
        min-width: auto;
        padding: var(--space-2) var(--space-4);
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-1);
    }
    
    .trust-bar .trust-badge svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
    
    .trust-bar .trust-badge span {
        font-size: 11px;
        white-space: nowrap !important;
        max-width: none !important;
        line-height: 1.3;
        text-align: center;
    }
    
    /* Pause animation on hover/touch */
    .trust-bar:hover .trust-badges,
    .trust-bar:active .trust-badges,
    .trust-bar:focus-within .trust-badges {
        animation-play-state: paused;
    }
}

/* Trust badges scroll animation - slides from left to right */
@-webkit-keyframes trustBadgeSlide {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes trustBadgeSlide {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

/* Reduce motion preference - commented out to ensure animation works
@media (prefers-reduced-motion: reduce) {
    .trust-bar .trust-badges {
        animation: none !important;
    }
    
    .trust-badge-duplicate,
    .trust-bar .trust-badge-duplicate {
        display: none !important;
        visibility: hidden !important;
    }
}
*/

/* ========================================
   TESTIMONIALS
   ======================================== */

.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.testimonial-rating {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.testimonial-rating svg {
    width: 20px;
    height: 20px;
    color: #F59E0B;
    fill: #F59E0B;
}

.testimonial-content {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial-author-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.testimonial-author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-name {
    font-weight: 600;
    color: var(--color-dark);
}

.testimonial-author-location {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    background: var(--color-dark);
    color: var(--color-white);
    padding-top: var(--space-20);
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-12);
    padding-bottom: var(--space-16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer-main {
        grid-template-columns: 1fr;
    }
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.footer-logo img {
    height: 40px;
}

.footer-logo span {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.footer-social {
    display: flex;
    gap: var(--space-3);
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.footer-social a:hover {
    background: var(--color-terracotta);
}

.footer-social svg {
    width: 20px;
    height: 20px;
}

.footer-column h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-6);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.footer-contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-bottom {
    padding: var(--space-6) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-copyright {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
    display: flex;
    gap: var(--space-6);
}

.footer-legal a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
    transition: var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--color-white);
}

/* ========================================
   FORMS
   ======================================== */

.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--color-dark);
    background: var(--color-white);
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af !important;
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.form-helper {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-top: var(--space-2);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-2);
}

/* ========================================
   TOUR SINGLE PAGE
   ======================================== */

.tour-hero {
    position: relative;
    height: 60vh;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--space-12);
}

.tour-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.tour-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

.tour-hero-content {
    color: var(--color-white);
    max-width: 800px;
}

.tour-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    opacity: 0.8;
}

.tour-hero-breadcrumb a:hover {
    text-decoration: underline;
}

.tour-hero-title {
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 4px 40px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .tour-hero-title {
        font-size: var(--text-3xl);
    }
}

.tour-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.tour-hero-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
}

.tour-hero-meta-item svg {
    width: 20px;
    height: 20px;
}

.tour-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-10);
    padding-top: var(--space-8);
}

@media (max-width: 1024px) {
    .tour-content-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        padding-top: var(--space-10);
    }
}

@media (max-width: 768px) {
    .tour-content-wrapper {
        gap: var(--space-6);
        padding-top: var(--space-8);
    }
}

/* Booking Sidebar */
.booking-sidebar {
    position: sticky;
    top: 100px;
}

.booking-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-gray-100);
}

.booking-card-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-gray-100);
}

.booking-card-price-value {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-dark);
}

.booking-card-price-unit {
    color: var(--color-gray-500);
}

.booking-card-price-original {
    text-decoration: line-through;
    color: var(--color-gray-400);
    font-size: var(--text-lg);
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.booking-form .btn {
    width: 100%;
}

.booking-note {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-top: var(--space-4);
}

/* ========================================
   SEARCHABLE SELECT COMPONENT
   ======================================== */

.vmt-searchable-select {
    position: relative;
    width: 100%;
    z-index: 100;
}

.vmt-select-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.vmt-select-input {
    width: 100%;
    padding: var(--space-2) var(--space-3) !important;
    padding-right: var(--space-8) !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-xs) !important;
    color: var(--color-dark);
    background: var(--color-white);
    cursor: pointer;
    transition: all 0.25s ease;
    height: 42px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vmt-select-input:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.vmt-select-input:focus {
    cursor: text;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
    background-color: var(--color-white);
}

.vmt-select-arrow {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-gray-500);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    pointer-events: auto;
}

.vmt-searchable-select.is-open .vmt-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.vmt-select-arrow:hover {
    color: var(--color-terracotta);
}

.vmt-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 264px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
}

.vmt-searchable-select.is-open .vmt-select-dropdown {
    display: block;
    animation: vmtDropdownFadeIn 0.15s ease-out;
}

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

.vmt-select-option {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.vmt-select-option:hover,
.vmt-select-option.is-highlighted {
    background: var(--color-sand-light);
    color: var(--color-dark);
}

.vmt-select-option.is-selected {
    background: var(--color-terracotta);
    color: var(--color-white);
    font-weight: 600;
}

.vmt-select-option.is-selected:hover,
.vmt-select-option.is-selected.is-highlighted {
    background: var(--color-earth);
    color: var(--color-white);
}

.vmt-select-option[data-value=""] {
    font-style: italic;
    color: var(--color-gray-500);
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-1);
    padding-bottom: var(--space-3);
}

.vmt-select-option[data-value=""]:hover,
.vmt-select-option[data-value=""].is-highlighted {
    color: var(--color-dark);
}

.vmt-select-option[data-value=""].is-selected {
    font-style: normal;
    color: var(--color-white);
}

.vmt-select-option.is-hidden {
    display: none !important;
}

.vmt-select-dropdown.is-empty::after {
    content: 'No destinations found';
    display: block;
    padding: var(--space-4);
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--text-sm);
}

.vmt-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.vmt-select-dropdown::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: 3px;
}

.vmt-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 3px;
}

.vmt-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

@media (max-width: 768px) {
    .vmt-select-dropdown {
        max-height: 240px;
    }
    
    .vmt-select-option {
        padding: var(--space-4);
    }
}

.search-form .vmt-searchable-select {
    min-width: 200px;
}

.tour-filters .vmt-searchable-select {
    min-width: 180px;
}

/* Z-INDEX FIX FOR DROPDOWN VISIBILITY */
/* Note: Hero overflow is handled separately to prevent horizontal scroll */

.search-form {
    overflow: visible !important;
    position: relative;
    z-index: 1000;
}

.search-form .search-field {
    overflow: visible !important;
    position: relative;
}

.tour-filters {
    overflow: visible !important;
    position: relative;
    z-index: 1000;
}

.vmt-searchable-select.is-open {
    z-index: 99998;
}

.search-box {
    position: relative;
    z-index: 1000;
    overflow: visible !important;
}

.hero .container {
    overflow: visible !important;
    max-width: 100%;
}

/* Hero content overflow only visible on desktop for dropdowns */
@media (min-width: 769px) {
    .hero-content {
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .hero-content {
        overflow: hidden;
        max-width: 100%;
    }
}

.search-tabs,
.search-tab-content {
    overflow: visible !important;
}

.trust-bar,
.destinations-section,
.region-section,
.section {
    position: relative;
    z-index: 1;
}

/* ========================================
   TRANSFER RESULTS PAGE
   ======================================== */

.page-header-transfers {
    position: relative;
    padding: var(--space-20) 0;
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.page-header-slide.active {
    opacity: 1;
}

.page-header-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(30, 20, 15, 0.7) 0%, rgba(40, 30, 20, 0.55) 50%, rgba(30, 20, 15, 0.7) 100%);
    z-index: 1;
}

.page-header-transfers .container {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.page-header-transfers h1 {
    color: var(--color-white);
    margin-bottom: var(--space-3);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.2;
}

.page-header-transfers p {
    color: var(--color-white) !important;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-weight: 400;
    margin: 0;
}

/* Responsive hero height for transfers page */
@media (max-width: 768px) {
    .page-header-transfers {
        min-height: 400px;
        padding: var(--space-16) 0;
    }
    
    .page-header-transfers h1 {
        font-size: 1.75rem;
    }
    
    .page-header-transfers p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .page-header-transfers {
        min-height: 350px;
        padding: var(--space-12) 0;
    }
    
    .page-header-transfers h1 {
        font-size: 1.5rem;
    }
}

/* Reduced spacing for transfers page sections - Added for improved layout */
.transfer-routes-section,
.transfer-vehicles-section,
section.bg-sand {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.transfer-routes-section .section-header,
.transfer-vehicles-section .section-header,
section.bg-sand .section-header {
    margin-bottom: var(--space-8);
}

/* Transfer Summary Bar */
.transfer-summary-bar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
    padding: var(--space-4) 0;
    position: sticky;
    top: 80px;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.transfer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.transfer-summary-route {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.transfer-summary-location {
    display: flex;
    flex-direction: column;
}

.transfer-summary-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.transfer-summary-value {
    font-weight: 600;
    color: var(--color-dark);
}

.transfer-summary-arrow {
    color: var(--color-terracotta);
}

.transfer-summary-details {
    display: flex;
    gap: var(--space-6);
}

.transfer-summary-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.transfer-summary-item svg {
    color: var(--color-gray-400);
}

.transfer-summary-edit {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-terracotta);
    font-weight: 500;
}

.transfer-summary-edit:hover {
    text-decoration: underline;
}

/* Route Info Banner */
.transfer-route-info-section {
    background: var(--color-white);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.transfer-route-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.transfer-route-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.transfer-route-stat svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.transfer-route-stat > div {
    display: flex;
    flex-direction: column;
}

.route-stat-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.route-stat-value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
}

.transfer-route-stat-highlight .route-stat-value {
    color: var(--color-terracotta);
}

/* Vehicle Cards Grid - 4 columns */
.transfer-vehicles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

@media (max-width: 1200px) {
    .transfer-vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .transfer-vehicles-grid {
        grid-template-columns: 1fr;
    }
}

/* Vehicle Card */
.transfer-vehicle-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

.transfer-vehicle-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-lg);
}

.transfer-vehicle-card.recommended {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 4px rgba(198, 93, 59, 0.1);
}

.vehicle-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-terracotta);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vehicle-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    background: var(--color-sand-light);
}

.vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.transfer-vehicle-card:hover .vehicle-image img {
    transform: scale(1.05);
}

.vehicle-info {
    flex: 1;
}

.vehicle-name {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.vehicle-model {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.vehicle-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.vehicle-spec {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.vehicle-spec svg {
    color: var(--color-gray-400);
}

.vehicle-travel-time {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.vehicle-travel-time svg {
    color: var(--color-terracotta);
}

.vehicle-features {
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.vehicle-features li {
    padding: var(--space-1) 0;
    padding-left: var(--space-5);
    position: relative;
}

.vehicle-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-terracotta);
    font-weight: 600;
}

.vehicle-booking {
    margin-top: auto;
    text-align: center;
}

.vehicle-price {
    margin-bottom: var(--space-3);
}

.vehicle-price .price-amount {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-dark);
}

.vehicle-price .price-label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-right: var(--space-1);
}

.vehicle-price .price-per {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.price-on-request {
    display: block;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-gray-500);
    font-style: italic;
}

.vehicle-booking .btn {
    width: 100%;
}

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

/* Unsuitable Vehicle */
.transfer-vehicle-card.unsuitable {
    opacity: 0.6;
}

.vehicle-unsuitable-notice {
    text-align: center;
    padding: var(--space-4);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.vehicle-unsuitable-notice span {
    display: block;
    font-weight: 600;
    color: var(--color-gray-600);
}

.vehicle-unsuitable-notice small {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

/* Quote Section */
.transfer-quote-section .quote-section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.quote-section-content .quote-section-icon {
    flex-shrink: 0;
}

.quote-section-content .quote-section-text {
    flex: 1;
    min-width: 250px;
}

.quote-section-content .quote-section-text h3 {
    margin-bottom: var(--space-2);
}

.quote-section-content .quote-section-text p {
    color: var(--color-gray-700);
    margin: 0;
}

.quote-section-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .transfer-quote-section .quote-section-content {
        flex-direction: column;
        text-align: center;
    }
    
    .quote-section-actions {
        justify-content: center;
    }
}

/* WhatsApp Button */
.btn-whatsapp {
    background: #25D366;
    color: white;
    border: none;
}

.btn-whatsapp:hover {
    background: #1da851;
    color: white;
}

.btn-whatsapp svg {
    flex-shrink: 0;
}

/* Quote Notice */
.transfer-quote-notice {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border: 2px solid var(--color-sand-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-top: var(--space-8);
}

.quote-notice-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-notice-content {
    flex: 1;
}

.quote-notice-content h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--color-dark);
}

.quote-notice-content p {
    color: var(--color-gray-700);
    margin: 0;
    font-size: var(--text-sm);
}

.quote-notice-actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .transfer-quote-notice {
        flex-direction: column;
        text-align: center;
    }
    
    .quote-notice-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .quote-notice-actions .btn {
        width: 100%;
    }
}

/* Help Bar */
.transfer-help-bar {
    background: var(--color-gray-100);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-gray-200);
}

.help-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.help-bar-text {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-700);
    font-weight: 500;
}

.help-bar-text svg {
    color: var(--color-terracotta);
}

.help-bar-contacts {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.help-bar-contact {
    color: var(--color-gray-700);
    font-size: var(--text-sm);
}

.help-bar-contact:hover {
    color: var(--color-terracotta);
}

.help-bar-contact strong {
    color: var(--color-dark);
}

.help-bar-divider {
    color: var(--color-gray-300);
}

@media (max-width: 768px) {
    .help-bar-content {
        flex-direction: column;
        text-align: center;
    }
    
    .help-bar-contacts {
        justify-content: center;
    }
    
    .help-bar-divider {
        display: none;
    }
    
    .transfer-summary {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .transfer-summary-route {
        flex-wrap: wrap;
    }
    
    .transfer-summary-details {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    
    .transfer-route-info {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
}

/* Transfer Search Box */
.transfer-search-section {
    background: var(--color-sand-light);
    padding: var(--space-16) 0;
}

.transfer-search-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
}

.transfer-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: var(--space-4);
    align-items: end;
}

@media (max-width: 1024px) {
    .transfer-search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .transfer-search-grid button {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .transfer-search-grid {
        grid-template-columns: 1fr;
    }
    
    .transfer-search-grid button {
        grid-column: span 1;
    }
}

/* Booking Modal */
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.booking-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.booking-modal-content {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-8);
    box-shadow: var(--shadow-2xl);
}

.booking-modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-400);
    padding: var(--space-2);
    transition: var(--transition-fast);
}

.booking-modal-close:hover {
    color: var(--color-dark);
}

.booking-modal-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.booking-modal-header h3 {
    margin-bottom: var(--space-2);
}

.booking-modal-header p {
    color: var(--color-gray-600);
}

.booking-modal-summary {
    background: var(--color-sand-light);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.booking-summary-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.booking-summary-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (max-width: 480px) {
    .booking-summary-details {
        grid-template-columns: 1fr;
    }
}

.booking-summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2);
    background: var(--color-white);
    border-radius: var(--radius-sm);
}

.summary-label {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
}

.summary-value {
    font-weight: 600;
}

.booking-summary-total {
    grid-column: span 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-terracotta);
    color: white;
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

.booking-summary-total .summary-label {
    color: rgba(255, 255, 255, 0.9);
}

.booking-summary-total .summary-value {
    font-size: var(--text-xl);
    font-weight: 700;
}

@media (max-width: 480px) {
    .booking-summary-total {
        grid-column: span 1;
    }
}

.booking-modal-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .booking-modal-form .form-row {
        grid-template-columns: 1fr;
    }
}

.booking-modal-form .form-group {
    margin-bottom: var(--space-4);
}

.booking-modal-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--color-gray-700);
}

.booking-modal-form input,
.booking-modal-form textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: var(--transition-fast);
}

.booking-modal-form input:focus,
.booking-modal-form textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.form-agreement {
    margin-bottom: var(--space-6);
}

.form-agreement label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

.form-agreement input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.form-agreement a {
    color: var(--color-terracotta);
}

.btn-block {
    width: 100%;
}

/* ========================================
   TRANSFER ROUTE MAP
   ======================================== */

.transfer-map-section {
    padding: var(--space-4) 0;
    background: var(--color-white);
}

.transfer-map-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
}

/* Mobile Toggle Button */
.map-toggle {
    display: none;
    width: 100%;
    padding: var(--space-4);
    background: var(--color-sand-light);
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-dark);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: var(--transition-fast);
}

.map-toggle:hover {
    background: var(--color-sand);
}

.map-toggle svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.map-toggle-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.map-toggle[aria-expanded="true"] .map-toggle-arrow {
    transform: rotate(180deg);
}

/* Map Container */
.transfer-map-container {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.transfer-route-map {
    width: 100%;
    height: 280px;
    background: var(--color-sand-light);
}

/* Map Legend */
.map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.legend-marker {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

.legend-marker.origin {
    background: var(--color-terracotta);
}

.legend-marker.destination {
    background: var(--color-dark);
}

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

/* Custom Leaflet Markers */
.custom-map-marker {
    background: none;
    border: none;
}

.custom-map-marker .marker-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.origin-marker .marker-inner {
    color: var(--color-terracotta);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.dest-marker .marker-inner {
    color: var(--color-dark);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Leaflet Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
    margin: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* Mobile: Collapsible */
@media (max-width: 768px) {
    .map-toggle {
        display: flex;
    }
    
    .transfer-map-container {
        max-height: 0;
        opacity: 0;
    }
    
    .transfer-map-container.is-visible {
        max-height: 400px;
        opacity: 1;
    }
    
    .transfer-route-map {
        height: 250px;
    }
    
    .map-legend {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

/* Desktop: Always visible */
@media (min-width: 769px) {
    .transfer-map-container {
        max-height: 400px;
        opacity: 1;
    }
    
    .map-toggle {
        display: none !important;
    }
}

/* ========================================
   TRANSFER SEARCH SECTION
   ======================================== */

.transfer-search-section {
    background: var(--color-sand-light);
    padding: var(--space-16) 0;
}

.transfer-search-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
}

.transfer-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: var(--space-4);
    align-items: end;
}

@media (max-width: 1024px) {
    .transfer-search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .transfer-search-grid {
        grid-template-columns: 1fr;
    }
}

.transfer-results {
    margin-top: var(--space-12);
}

.transfer-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.transfer-results-count {
    font-size: var(--text-lg);
    font-weight: 600;
}

.transfer-results-sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.transfer-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ========================================
   CTA SECTIONS
   ======================================== */

.cta-section {
    background: var(--color-terracotta);
    color: var(--color-white);
    text-align: center;
    padding: var(--space-20) 0;
}

.cta-section h2 {
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.cta-section p {
    font-size: var(--text-lg);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.cta-section .btn {
    background: var(--color-white);
    color: var(--color-terracotta);
}

.cta-section .btn:hover {
    background: var(--color-sand);
}

/* Pattern CTA */
.cta-pattern {
    position: relative;
    background: var(--color-dark);
    overflow: hidden;
}

.cta-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

/* ========================================
   ANIMATIONS & EFFECTS
   ======================================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease forwards;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease forwards;
}

.animate-pulse {
    animation: pulse 2s infinite ease-in-out;
}

/* Animation Delays */
.delay-100 { animation-delay: 0.1s; opacity: 0; }
.delay-200 { animation-delay: 0.2s; opacity: 0; }
.delay-300 { animation-delay: 0.3s; opacity: 0; }
.delay-400 { animation-delay: 0.4s; opacity: 0; }
.delay-500 { animation-delay: 0.5s; opacity: 0; }
.delay-600 { animation-delay: 0.6s; opacity: 0; }

/* Hover Effects */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.03);
}

/* Shimmer Loading Effect */
.shimmer {
    background: linear-gradient(
        90deg,
        var(--color-sand-light) 25%,
        var(--color-sand) 50%,
        var(--color-sand-light) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Reveal on Scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Children Animation */
.stagger-children > * {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }

/* ========================================
   ABOUT US PAGE
   ======================================== */

/* About Hero */
/* ========================================
   ABOUT PAGE V2 - PREMIUM REDESIGN
   ======================================== */

/* Hero Section V2 - Split Photo Background */
.about-hero-v2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.about-hero-v2 .hero-photo-collage {
    position: absolute;
    inset: 0;
    display: flex;
}

.about-hero-v2 .hero-photo {
    flex: 1;
    background-size: cover;
    filter: saturate(0.9) brightness(0.85) contrast(1.02);
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* =============================================
   HEAD ALIGNMENT - Precise focal point control
   ============================================= */
.about-hero-v2 .hero-photo-left {
    /* Khalid - positioned to show face clearly */
    background-position: center 20%;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}

.about-hero-v2 .hero-photo-right {
    /* Bob - show from top of image to align head with Khalid */
    background-position: center top;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -18%;
}

.about-hero-v2 .hero-photo-blend {
    position: absolute;
    left: 32%;
    top: 0;
    bottom: 0;
    width: 36%;
    background: linear-gradient(to right, 
        rgba(26, 46, 28, 0.85) 0%, 
        rgba(26, 46, 28, 0.5) 25%,
        rgba(60, 50, 40, 0.3) 50%,
        rgba(139, 107, 74, 0.5) 75%,
        rgba(139, 107, 74, 0.85) 100%
    );
    z-index: 0;
}

.about-hero-v2 .hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: 
        /* Strong gradient at top for text readability */
        linear-gradient(to bottom, 
            rgba(15, 25, 18, 0.85) 0%, 
            rgba(20, 35, 25, 0.6) 25%,
            rgba(40, 45, 35, 0.25) 50%,
            rgba(60, 50, 40, 0.2) 70%,
            rgba(80, 60, 45, 0.5) 100%
        ),
        /* Center darkening for text contrast */
        radial-gradient(ellipse at 50% 25%, rgba(10, 20, 15, 0.5) 0%, transparent 60%);
    z-index: 1;
}

.about-hero-v2 .hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: calc(80px + var(--space-12)) 0 var(--space-32);
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: calc(80px + var(--space-16));
}

.about-hero-v2 .hero-text-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    /* Keep text in upper portion, away from faces */
    padding-top: var(--space-8);
}

.about-hero-v2 .hero-text-content.animated {
    opacity: 1;
    transform: translateY(0);
}

.about-hero-v2 .hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    color: #faf6f0;
    line-height: 1.18;
    margin-bottom: var(--space-5);
    text-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 2px 15px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
}

.about-hero-v2 .hero-headline span {
    background: linear-gradient(135deg, #f5d89a 0%, #e8c170 50%, #d4a85a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-top: var(--space-2);
    filter: drop-shadow(0 2px 10px rgba(212, 168, 90, 0.3));
}

.about-hero-v2 .hero-description {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: rgba(250, 246, 240, 0.95);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 0 2px 25px rgba(0,0,0,0.5);
    font-weight: 400;
}

/* Hero Scroll Hint - positioned lower */
.about-hero-v2 .hero-scroll-hint {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(250, 246, 240, 0.7);
    font-size: var(--text-sm);
    animation: bounce-subtle 2s infinite;
}

.about-hero-v2 .hero-scroll-hint svg {
    stroke: rgba(250, 246, 240, 0.7);
}

@keyframes bounce-subtle {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ========================================
   FOUNDERS STORY SECTION
   ======================================== */
.founders-story-section {
    padding: var(--space-24) 0;
    background: var(--color-white);
}

.founders-story-section .section-intro {
    text-align: center;
    margin-bottom: var(--space-20);
}

.founders-story-section .section-tag {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #d4a574 100%);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.founders-story-section .section-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    color: var(--color-dark);
    margin: 0;
}

/* Founder Row */
.founder-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    margin-bottom: var(--space-20);
}

.founder-row-reverse {
    direction: rtl;
}

.founder-row-reverse > * {
    direction: ltr;
}

/* Founder Text */
.founder-text {
    padding: var(--space-6) 0;
}

.founder-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-4);
    line-height: 1.2;
}

.founder-role-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(196, 149, 106, 0.15) 0%, rgba(212, 165, 116, 0.15) 100%);
    color: var(--color-terracotta);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(196, 149, 106, 0.2);
}

.founder-location {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.founder-location svg {
    stroke: var(--color-terracotta);
    flex-shrink: 0;
}

.founder-bio-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.85;
    margin: 0 0 var(--space-5);
}

.founder-bio-text:last-of-type {
    margin-bottom: 0;
}

/* Founder Image Card - Centered */
.founder-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.founder-image-card {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.12),
        0 15px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
}

.founder-image-card.founder-image-centered {
    max-width: 420px;
    width: 100%;
}

.founder-image-card:hover {
    transform: translateY(-10px) scale(1.015);
    box-shadow: 
        0 40px 90px rgba(0, 0, 0, 0.18),
        0 20px 40px rgba(0, 0, 0, 0.12);
}

.founder-image-card img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: transform 0.6s ease;
}

.founder-image-card:hover img {
    transform: scale(1.03);
}

/* Secondary Image - Accent */
.founder-image-secondary {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--color-white);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease;
    z-index: 2;
}

.founder-image-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.founder-image-wrapper:hover .founder-image-secondary {
    transform: scale(1.1) rotate(5deg);
}

/* Origin Story - How They Met */
.founders-origin-story {
    background: linear-gradient(145deg, #faf9f6 0%, #f3ede5 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-16);
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: var(--space-8);
    border: 1px solid rgba(196, 149, 106, 0.1);
}

.origin-story-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #d4a574 100%);
    border-radius: 50%;
    margin-bottom: var(--space-6);
    box-shadow: 0 18px 45px rgba(196, 149, 106, 0.4);
}

.origin-story-badge span {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-white);
}

.origin-story-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-6);
}

.origin-story-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.85;
    max-width: 720px;
    margin: 0 auto var(--space-5);
}

.origin-story-text:last-of-type {
    margin-bottom: var(--space-8);
}

/* Founder Circles in Origin Story */
.origin-story-founders {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.origin-founder-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 4px solid var(--color-white);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.origin-founder-circle:first-child {
    transform: translateX(15px);
}

.origin-founder-circle:last-child {
    transform: translateX(-15px);
}

.founders-origin-story:hover .origin-founder-circle:first-child {
    transform: translateX(5px) scale(1.05);
}

.founders-origin-story:hover .origin-founder-circle:last-child {
    transform: translateX(-5px) scale(1.05);
}

/* Scroll Animations */
.reveal-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-fade.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-slide-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-slide-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================
   RESPONSIVE - ABOUT PAGE
   ======================================== */
@media (max-width: 1024px) {
    .founder-row {
        gap: var(--space-10);
    }
    
    .founder-image-card img {
        height: 450px;
    }
}

@media (max-width: 900px) {
    .founder-row {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    
    .founder-row-reverse {
        direction: ltr;
    }
    
    .founder-image-card.founder-image-centered {
        max-width: 380px;
    }
    
    .founder-image-card img {
        height: 420px;
    }
    
    .founder-text {
        order: 2;
        text-align: center;
    }
    
    .founder-location {
        justify-content: center;
    }
    
    .founder-image-wrapper {
        order: 1;
    }
    
    .founder-image-secondary {
        bottom: -15px;
        right: 50%;
        transform: translateX(80px);
    }
    
    .founder-image-wrapper:hover .founder-image-secondary {
        transform: translateX(80px) scale(1.1) rotate(5deg);
    }
    
    .about-hero-v2 .hero-photo-left {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .about-hero-v2 .hero-photo-right {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .about-hero-v2 {
        align-items: flex-start;
    }
    
    .about-hero-v2 .hero-content-wrapper {
        padding: calc(80px + var(--space-10)) var(--space-4) var(--space-20);
        min-height: auto;
    }
    
    .about-hero-v2 .hero-text-content {
        padding-top: var(--space-4);
    }
    
    .about-hero-v2 .hero-photo-left {
        background-position: center 20%;
    }
    
    .about-hero-v2 .hero-photo-right {
        background-position: center top;
    }
}

@media (max-width: 576px) {
    .about-hero-v2 {
        min-height: 100vh;
    }
    
    .about-hero-v2 .hero-photo-collage {
        flex-direction: column;
    }
    
    .about-hero-v2 .hero-photo {
        clip-path: none !important;
        margin-left: 0 !important;
    }
    
    .about-hero-v2 .hero-photo-left {
        background-position: center 20%;
    }
    
    .about-hero-v2 .hero-photo-right {
        background-position: center top;
    }
    
    .about-hero-v2 .hero-photo-blend {
        display: none;
    }
    
    .about-hero-v2 .hero-gradient-overlay {
        background: 
            linear-gradient(to bottom, 
                rgba(15, 25, 18, 0.9) 0%, 
                rgba(20, 35, 25, 0.7) 30%,
                rgba(40, 45, 35, 0.3) 60%,
                rgba(60, 50, 40, 0.4) 100%
            );
    }
    
    .about-hero-v2 .hero-content-wrapper {
        padding: calc(70px + var(--space-8)) var(--space-4) var(--space-16);
    }
    
    .about-hero-v2 .hero-scroll-hint {
        display: none;
    }
    
    .founders-story-section {
        padding: var(--space-16) 0;
    }
    
    .founders-story-section .section-intro {
        margin-bottom: var(--space-12);
    }
    
    .founder-row {
        margin-bottom: var(--space-14);
        gap: var(--space-8);
    }
    
    .founder-image-card.founder-image-centered {
        max-width: 100%;
    }
    
    .founder-image-card img {
        height: 360px;
    }
    
    .founder-image-secondary {
        width: 85px;
        height: 85px;
        border-width: 4px;
        bottom: -12px;
        right: 50%;
        transform: translateX(65px);
    }
    
    .founder-text {
        padding: var(--space-4) 0;
    }
    
    .founder-bio-text {
        font-size: var(--text-base);
    }
    
    .founders-origin-story {
        padding: var(--space-10) var(--space-6);
        margin-top: var(--space-4);
    }
    
    .origin-story-badge {
        width: 75px;
        height: 75px;
    }
    
    .origin-story-badge span {
        font-size: var(--text-xl);
    }
    
    .origin-story-text {
        font-size: var(--text-base);
    }
    
    .origin-founder-circle {
        width: 65px;
        height: 65px;
        border-width: 3px;
    }
    
    .origin-founder-circle:first-child {
        transform: translateX(10px);
    }
    
    .origin-founder-circle:last-child {
        transform: translateX(-10px);
    }
}

/* Old about-hero (kept for compatibility) */
.about-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a3d2c 50%, var(--color-earth) 100%);
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
}

/* Stats */
.stat-number {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-top: var(--space-1);
}

/* Value Cards */
.about-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .about-values {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .about-values {
        grid-template-columns: 1fr;
    }
}

.value-card {
    background: var(--color-white);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.value-card .icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

.value-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

/* Team Cards */
.team-card {
    background: var(--color-white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.team-card .avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 3px solid var(--color-terracotta);
}

.team-card .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card h4 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
}

.team-card .role {
    font-size: var(--text-sm);
    color: var(--color-terracotta);
    font-weight: 600;
}

/* About page responsive grid fix */
@media (max-width: 968px) {
    .about-hero + .section .container > div[style*="grid-template-columns: 1fr 1fr"],
    .about-hero-premium + .section .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-8) !important;
    }
    
    .about-hero + .section .container > div[style*="grid-template-columns: 1fr 1fr"] > div:last-child,
    .about-hero-premium + .section .container > div[style*="grid-template-columns: 1fr 1fr"] > div:last-child {
        order: -1;
    }
}

/* ========================================
   UTILITIES
   ======================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-terracotta); }
.text-muted { color: var(--color-gray-500); }

.bg-sand { background-color: var(--color-sand-light); }
.bg-white { background-color: var(--color-white); }
.bg-dark { background-color: var(--color-dark); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   PAGE TEMPLATES
   ======================================== */

.page-header {
    padding: calc(80px + var(--space-16)) 0 var(--space-16);
    background: var(--color-sand-light);
    text-align: center;
}

.page-header h1 {
    margin-bottom: var(--space-4);
}

.page-header p {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    max-width: 600px;
    margin: 0 auto;
}

.page-content {
    padding: var(--space-16) 0;
}

/* WordPress Core Styles */
.wp-block-image img {
    border-radius: var(--radius-lg);
}

.alignwide {
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
    max-width: none;
}

/* ========================================
   B2B PARTNERS PAGE - Premium Design
   ======================================== */

/* Hero Section */
.b2b-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0f1410 0%, #1a2a1c 50%, #2d3b2e 100%);
}

.b2b-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.b2b-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(212, 168, 90, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(196, 107, 65, 0.06) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
    animation: patternShift 30s ease-in-out infinite;
}

@keyframes patternShift {
    0%, 100% { background-position: 0 0, 100% 100%, 0 0; }
    50% { background-position: 50% 50%, 50% 50%, 30px 30px; }
}

.b2b-hero-gradient {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, transparent 0%, rgba(15, 20, 16, 0.3) 100%),
        radial-gradient(ellipse at 30% 0%, rgba(212, 168, 90, 0.1) 0%, transparent 50%);
}

.b2b-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: calc(100px + var(--space-12)) 0 var(--space-16);
}

.b2b-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.b2b-hero-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, rgba(212, 168, 90, 0.2) 0%, rgba(196, 107, 65, 0.2) 100%);
    border: 1px solid rgba(212, 168, 90, 0.3);
    border-radius: 50px;
    color: #d4a85a;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}

.b2b-hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 700;
    color: #faf6f0;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}

.text-gradient {
    background: linear-gradient(135deg, #f5d89a 0%, #e8c170 50%, #d4a85a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-accent {
    color: var(--color-terracotta);
}

.b2b-hero-description {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: rgba(250, 246, 240, 0.8);
    line-height: 1.7;
    margin-bottom: var(--space-8);
    max-width: 540px;
}

.b2b-hero-cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.btn-glow {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-glow svg {
    transition: transform 0.3s ease;
}

.btn-glow:hover svg {
    transform: translateX(3px);
}

.btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #d4a85a, #c46b41, #d4a85a);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(8px);
}

.btn-glow:hover::before {
    opacity: 0.6;
}

.btn-glow:hover {
    filter: brightness(1.1);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* B2B Button Arrow Animation */
.b2b-page .btn svg,
.b2b-page .btn-primary svg {
    transition: transform 0.3s ease;
}

.b2b-page .btn:hover svg,
.b2b-page .btn-primary:hover svg {
    transform: translateX(3px);
}

/* Hero Stats */
.b2b-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px);
}

.b2b-stat-card.stat-animated {
    opacity: 1;
    transform: translateY(0);
}

.b2b-stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 168, 90, 0.4);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.b2b-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, rgba(212, 168, 90, 0.15) 0%, rgba(196, 107, 65, 0.15) 100%);
    border-radius: var(--radius-lg);
    color: #d4a85a;
}

.b2b-stat-number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-1);
}

.b2b-stat-label {
    font-size: var(--text-sm);
    color: rgba(250, 246, 240, 0.6);
}

/* Hero Scroll Indicator */
.b2b-hero-scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: rgba(250, 246, 240, 0.5);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(212, 168, 90, 0.6), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.6); opacity: 0.5; }
}

/* Hero Animations */
.b2b-hero .animate-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.b2b-hero .animate-fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

.b2b-hero .delay-100 { transition-delay: 0.1s; }
.b2b-hero .delay-200 { transition-delay: 0.2s; }
.b2b-hero .delay-300 { transition-delay: 0.3s; }
.b2b-hero .delay-400 { transition-delay: 0.4s; }

/* Section Styles */
.b2b-section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.section-eyebrow {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.1) 0%, rgba(212, 168, 90, 0.1) 100%);
    border-radius: 50px;
    color: var(--color-terracotta);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.section-eyebrow.light {
    background: rgba(255, 255, 255, 0.1);
    color: #d4a85a;
}

.section-title-large {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Partners Section */
.b2b-partners-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, #faf8f5 0%, #fff 100%);
}

.b2b-partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.b2b-partner-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 2px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.b2b-partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-terracotta), #d4a85a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.b2b-partner-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    border-color: rgba(196, 107, 65, 0.3);
}

.b2b-partner-card:hover::before {
    transform: scaleX(1);
}

.partner-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.08) 0%, rgba(212, 168, 90, 0.08) 100%);
    border-radius: var(--radius-lg);
    color: var(--color-terracotta);
    margin-bottom: var(--space-5);
}

.partner-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.partner-card-text {
    color: var(--color-gray-600);
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.partner-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.partner-card-features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.partner-card-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-terracotta);
    border-radius: 50%;
}

/* Why Section */
.b2b-why-section {
    position: relative;
    padding: var(--space-24) 0;
    background: #1a2a1c;
    overflow: hidden;
}

.b2b-why-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 0% 50%, rgba(212, 168, 90, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(196, 107, 65, 0.06) 0%, transparent 50%);
}

.b2b-why-section .section-title-large {
    color: white;
}

.b2b-why-section .section-subtitle {
    color: rgba(250, 246, 240, 0.7);
}

.b2b-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.b2b-why-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.b2b-why-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 168, 90, 0.4);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.why-card-number {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(212, 168, 90, 0.3) 0%, rgba(196, 107, 65, 0.3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.why-card-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-3);
}

.why-card-content p {
    color: rgba(250, 246, 240, 0.7);
    font-size: var(--text-base);
    line-height: 1.6;
}

/* Services Section */
.b2b-services-section {
    padding: var(--space-24) 0;
    background: #fff;
}

.b2b-services-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.b2b-service-item {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}

.service-item-visual {
    position: absolute;
    inset: 0;
}

.service-item-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 20, 16, 0.9) 100%);
}

.service-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.b2b-service-item:hover .service-item-visual img {
    transform: scale(1.08);
}

.b2b-service-item:hover .service-item-content {
    transform: translateY(0);
}

.service-item-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-2);
}

.service-item-content p {
    color: rgba(250, 246, 240, 0.8);
    font-size: var(--text-sm);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease 0.1s;
}

.b2b-service-item:hover .service-item-content p {
    opacity: 1;
    transform: translateY(0);
}

/* Service Item Enhanced Hover */
.b2b-service-item {
    border: 2px solid transparent;
    transition: border-color 0.4s ease, transform 0.4s ease;
}

.b2b-service-item:hover {
    border-color: rgba(196, 107, 65, 0.4);
    transform: scale(1.02);
}

/* ============================================
   TRUSTED BY SECTION - Premium Infinite Scroll
   ============================================ */
.b2b-trusted-section {
    position: relative;
    padding: var(--space-10) 0 var(--space-12);
    overflow: hidden;
    background: linear-gradient(180deg, #fefdfb 0%, #f8f6f3 50%, #fefdfb 100%);
}

.trusted-section-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 168, 90, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(196, 107, 65, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(196, 107, 65, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.b2b-trusted-header {
    text-align: center;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}

.trusted-label {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-gray-600);
    letter-spacing: 0.02em;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Marquee Wrapper with Fade Edges */
.trusted-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: var(--space-4) 0;
}

.trusted-marquee-wrapper::before,
.trusted-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.trusted-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #f8f6f3 0%, transparent 100%);
}

.trusted-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, #f8f6f3 0%, transparent 100%);
}

/* Marquee Animation Container */
.trusted-marquee {
    display: flex;
    width: max-content;
    animation: marquee-scroll 50s linear infinite;
}

.trusted-marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.trusted-marquee-content {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: 0 var(--space-6);
}

/* Logo Item Styling */
.trusted-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.trusted-logo-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-4px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: rgba(196, 107, 65, 0.15);
}

/* Logo Brand Text */
.logo-brand {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
    transition: color 0.3s ease;
}

.logo-brand svg {
    height: 40px;
    width: auto;
    min-width: 80px;
}

.trusted-logo-item:hover .logo-brand {
    color: var(--color-gray-800);
}

.logo-brand.logo-small-text svg {
    min-width: 140px;
}

/* Badge Items (Ministry of Tourism & Banque Populaire) */
.trusted-badge-item {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(196, 107, 65, 0.12);
}

.trusted-badge-item:hover {
    border-color: rgba(196, 107, 65, 0.25);
}

.logo-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-600);
    transition: color 0.3s ease;
}

.logo-badge .badge-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-terracotta);
    opacity: 0.85;
    transition: all 0.3s ease;
}

.trusted-badge-item:hover .badge-icon {
    opacity: 1;
    transform: scale(1.1);
}

.logo-badge span {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

.trusted-badge-item:hover .logo-badge {
    color: var(--color-gray-800);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .trusted-marquee-wrapper::before,
    .trusted-marquee-wrapper::after {
        width: 80px;
    }
    
    .trusted-marquee-content {
        gap: var(--space-8);
    }
}

@media (max-width: 768px) {
    .b2b-trusted-section {
        padding: var(--space-8) 0 var(--space-10);
    }
    
    .b2b-trusted-header {
        margin-bottom: var(--space-4);
    }
    
    .trusted-label {
        font-size: var(--text-sm);
        padding: 0 var(--space-4);
    }
    
    .trusted-marquee-wrapper {
        padding: var(--space-3) 0;
    }
    
    .trusted-marquee-wrapper::before,
    .trusted-marquee-wrapper::after {
        width: 40px;
    }
    
    .trusted-marquee {
        animation-duration: 35s;
    }
    
    .trusted-marquee-content {
        gap: var(--space-6);
    }
    
    .trusted-logo-item {
        padding: var(--space-3) var(--space-4);
    }
    
    .logo-brand svg {
        height: 36px;
        min-width: 70px;
    }
    
    .logo-brand.logo-small-text svg {
        min-width: 130px;
    }
    
    .logo-badge .badge-icon {
        width: 22px;
        height: 22px;
    }
    
    .logo-badge span {
        font-size: 10px;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .trusted-marquee {
        animation-duration: 30s;
    }
    
    .trusted-logo-item {
        padding: var(--space-2) var(--space-3);
    }
    
    .logo-brand svg {
        height: 32px;
        min-width: 60px;
    }
    
    .logo-badge span {
        font-size: 9px;
    }
    
    .logo-badge .badge-icon {
        width: 18px;
        height: 18px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .trusted-marquee {
        animation: none;
    }
    
    .trusted-marquee-content {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .trusted-marquee-content:nth-child(2) {
        display: none;
    }
}

/* Process Section */
.b2b-process-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, #faf8f5 0%, #fff 100%);
}

.b2b-process-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: var(--space-8);
}

.process-line {
    position: absolute;
    top: calc(var(--space-8) + 28px);
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-terracotta), #d4a85a, var(--color-terracotta));
    opacity: 0.3;
}

/* ========================================
   LUXURY TIMELINE ANIMATION
   Premium Sequential Reveal Effect
   ======================================== */

/* Timeline Container */
.luxury-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: var(--space-8);
}

/* Golden Thread Connector */
.golden-thread {
    position: absolute;
    top: calc(var(--space-8) + 34px);
    left: 12.5%;
    right: 12.5%;
    height: 4px;
    pointer-events: none;
    z-index: 0;
}

.thread-svg {
    width: 100%;
    height: 4px;
    overflow: visible;
}

.thread-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-timeline.activated .thread-path {
    stroke-dashoffset: 0;
    transition-delay: 0.3s;
}

/* Traveling Dot */
.thread-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #d4a85a, #c46b41);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    box-shadow: 0 0 15px rgba(212, 168, 90, 0.6);
}

.luxury-timeline.activated .thread-dot {
    opacity: 1;
    animation: travelDot 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes travelDot {
    0% { left: 0%; opacity: 1; }
    95% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Luxury Step */
.luxury-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Step Glow Effect */
.step-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(212, 168, 90, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.luxury-step.active .step-glow {
    opacity: 1;
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

/* Step Marker */
.step-marker {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-5);
}

/* Marker Ring - Animated border */
.marker-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #e8e0d8;
    opacity: 0;
    transform: scale(0.6) rotate(-90deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.luxury-step.active .marker-ring {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    border-color: #c46b41;
    box-shadow: 0 0 0 4px rgba(196, 107, 65, 0.1);
}

/* Ring animation delays */
.luxury-step[data-step="1"] .marker-ring { transition-delay: 0s; }
.luxury-step[data-step="2"] .marker-ring { transition-delay: 0.6s; }
.luxury-step[data-step="3"] .marker-ring { transition-delay: 1.2s; }
.luxury-step[data-step="4"] .marker-ring { transition-delay: 1.8s; }

/* Marker Inner - Number circle */
.marker-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    width: 56px;
    height: 56px;
    background: linear-gradient(145deg, #c46b41 0%, #b85a35 50%, #d4a85a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
        0 8px 25px rgba(196, 107, 65, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.luxury-step.active .marker-inner {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
}

/* Inner animation delays */
.luxury-step[data-step="1"] .marker-inner { transition-delay: 0.15s; }
.luxury-step[data-step="2"] .marker-inner { transition-delay: 0.75s; }
.luxury-step[data-step="3"] .marker-inner { transition-delay: 1.35s; }
.luxury-step[data-step="4"] .marker-inner { transition-delay: 1.95s; }

/* Marker Number */
.marker-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Step Content */
.step-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-step.active .step-content {
    opacity: 1;
    transform: translateY(0);
}

/* Content animation delays */
.luxury-step[data-step="1"] .step-content { transition-delay: 0.3s; }
.luxury-step[data-step="2"] .step-content { transition-delay: 0.9s; }
.luxury-step[data-step="3"] .step-content { transition-delay: 1.5s; }
.luxury-step[data-step="4"] .step-content { transition-delay: 2.1s; }

.step-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    position: relative;
}

.step-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #c46b41, #d4a85a);
    border-radius: 1px;
    transition: transform 0.4s ease 0.2s;
}

.luxury-step.active .step-title::after {
    transform: translateX(-50%) scaleX(1);
}

.step-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    max-width: 180px;
    margin: 0 auto;
}

/* Hover Effects */
.luxury-step:hover .marker-inner {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 
        0 12px 35px rgba(196, 107, 65, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.luxury-step:hover .marker-ring {
    transform: scale(1.05);
    border-color: #d4a85a;
}

.luxury-step:hover .step-glow {
    opacity: 1;
}

/* ========================================
   WANDERING BACKGROUND AIRPLANE
   Subtle scroll-based animation
   ======================================== */
.wander-airplane {
    position: fixed;
    width: 24px;
    height: 24px;
    color: rgba(196, 107, 65, 0.08);
    pointer-events: none;
    z-index: 0;
    top: 20%;
    right: 5%;
    transform: rotate(-45deg);
    transition: transform 0.15s ease-out, 
                top 0.15s ease-out, 
                right 0.15s ease-out,
                opacity 0.4s ease;
    will-change: transform, top, right;
    opacity: 0;
}

.wander-airplane.visible {
    opacity: 1;
}

.wander-airplane svg {
    width: 100%;
    height: 100%;
}

/* Responsive - Luxury Timeline */
@media (max-width: 1024px) {
    .golden-thread {
        left: 10%;
        right: 10%;
    }
    
    .step-marker {
        width: 64px;
        height: 64px;
    }
    
    .marker-inner {
        width: 48px;
        height: 48px;
    }
    
    .marker-number {
        font-size: var(--text-xl);
    }
    
    .step-glow {
        width: 100px;
        height: 100px;
    }
    
    .wander-airplane {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .golden-thread {
        display: none;
    }
    
    .luxury-timeline {
        flex-direction: column;
        gap: var(--space-10);
        padding-top: var(--space-4);
    }
    
    .luxury-step {
        flex-direction: row;
        text-align: left;
        gap: var(--space-5);
    }
    
    .step-marker {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }
    
    .marker-inner {
        width: 44px;
        height: 44px;
    }
    
    .marker-number {
        font-size: var(--text-lg);
    }
    
    .step-glow {
        display: none;
    }
    
    .step-content {
        text-align: left;
    }
    
    .step-title::after {
        left: 0;
        transform: translateX(0) scaleX(0);
    }
    
    .luxury-step.active .step-title::after {
        transform: translateX(0) scaleX(1);
    }
    
    .step-desc {
        max-width: none;
        margin: 0;
    }
    
    .wander-airplane {
        display: none;
    }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .luxury-step,
    .marker-ring,
    .marker-inner,
    .step-content,
    .step-glow,
    .thread-path,
    .thread-dot {
        transition: none !important;
        animation: none !important;
    }
    
    .luxury-step .marker-ring {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        border-color: #c46b41;
    }
    
    .luxury-step .marker-inner {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    
    .luxury-step .step-content {
        opacity: 1;
        transform: translateY(0);
    }
    
    .luxury-step .step-glow {
        opacity: 0.5;
    }
    
    .thread-path {
        stroke-dashoffset: 0;
    }
    
    .thread-dot {
        display: none;
    }
    
    .wander-airplane {
        display: none;
    }
}

.b2b-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-process-step.step-animated {
    opacity: 1;
    transform: translateY(0);
}

.process-step-marker {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #d4a85a 100%);
    border-radius: 50%;
    margin-bottom: var(--space-6);
    box-shadow: 0 8px 30px rgba(196, 107, 65, 0.3);
}

.step-number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: white;
}

.process-step-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.process-step-content p {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    max-width: 180px;
    line-height: 1.5;
}

/* CTA Section */
.b2b-cta-section {
    position: relative;
    padding: var(--space-24) 0;
    background: linear-gradient(135deg, #0f1410 0%, #1a2a1c 50%, #2d3b2e 100%);
    overflow: hidden;
}

.b2b-cta-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(212, 168, 90, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(196, 107, 65, 0.08) 0%, transparent 50%);
}

.b2b-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-16);
    align-items: start;
    position: relative;
    z-index: 1;
}

.b2b-cta-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: var(--space-5);
}

.b2b-cta-text {
    font-size: var(--text-lg);
    color: rgba(250, 246, 240, 0.8);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.b2b-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: rgba(250, 246, 240, 0.8);
    font-size: var(--text-sm);
}

.trust-badge svg {
    color: #d4a85a;
}

/* Form Card */
.b2b-form-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.b2b-contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.b2b-contact-form .form-group {
    margin-bottom: var(--space-5);
}

.b2b-contact-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.b2b-contact-form input,
.b2b-contact-form select,
.b2b-contact-form textarea {
    width: 100%;
    padding: var(--space-4);
    background: #f8f6f3;
    border: 1px solid #e8e4de;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.b2b-contact-form input:focus,
.b2b-contact-form select:focus,
.b2b-contact-form textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    background: white;
    box-shadow: 0 0 0 3px rgba(196, 107, 65, 0.1);
}

.b2b-contact-form input::placeholder,
.b2b-contact-form textarea::placeholder {
    color: var(--color-gray-400);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-terracotta);
}

.form-checkbox label {
    margin: 0;
    font-weight: normal;
    color: var(--color-gray-600);
}

/* Form Required & Optional Labels */
.b2b-contact-form .required {
    color: var(--color-terracotta);
    font-weight: 600;
}

.b2b-contact-form .optional-label {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: var(--text-xs);
    margin-left: var(--space-1);
}

/* Conditional Field Animation */
.form-group-conditional {
    overflow: hidden;
    transition: all 0.3s ease;
}

.form-group-conditional.form-field-enter {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

/* Form Group Focus State */
.b2b-contact-form .form-group.field-focused label {
    color: var(--color-terracotta);
}

.b2b-contact-form .form-group.field-focused input,
.b2b-contact-form .form-group.field-focused select,
.b2b-contact-form .form-group.field-focused textarea {
    border-color: var(--color-terracotta);
    background: white;
    box-shadow: 0 0 0 3px rgba(196, 107, 65, 0.1);
}

/* Select Dropdown Arrow Styling */
.b2b-contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
    cursor: pointer;
}

.b2b-contact-form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c46b41' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Form Placeholder Improvements */
.b2b-contact-form input::placeholder,
.b2b-contact-form textarea::placeholder {
    color: var(--color-gray-400);
    opacity: 0.8;
}

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

/* ========================================
   Form Success Message - Premium Style
   ======================================== */
.form-success-message {
    text-align: center;
    padding: var(--space-12) var(--space-8);
}

.form-success-message.success-animate {
    animation: successFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes successFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.success-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.15) 0%, rgba(212, 168, 90, 0.1) 100%);
    border-radius: 50%;
    margin-bottom: var(--space-4);
}

.success-icon {
    color: var(--color-terracotta);
}

.success-icon .success-circle {
    stroke-dasharray: 63;
    stroke-dashoffset: 63;
    animation: drawCircle 0.6s ease-out 0.2s forwards;
}

.success-icon .success-check {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: drawCheck 0.4s ease-out 0.7s forwards;
}

@keyframes drawCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

.success-emoji {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s both;
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-4);
    animation: fadeInUp 0.5s ease-out 0.4s both;
}

.success-title span {
    color: var(--color-terracotta);
}

.success-company {
    font-size: var(--text-md);
    color: var(--color-gray-700);
    margin-bottom: var(--space-3);
    animation: fadeInUp 0.5s ease-out 0.5s both;
}

.success-company strong {
    color: var(--color-heading);
    font-weight: 600;
}

.success-text {
    font-size: var(--text-md);
    color: var(--color-gray-600);
    margin-bottom: var(--space-2);
    animation: fadeInUp 0.5s ease-out 0.6s both;
}

.success-text strong {
    color: var(--color-terracotta);
    font-weight: 600;
}

.success-cta {
    font-size: var(--text-md);
    color: var(--color-gray-600);
    font-style: italic;
    margin-bottom: var(--space-6);
    animation: fadeInUp 0.5s ease-out 0.7s both;
}

.success-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gray-200), transparent);
    margin: var(--space-6) 0;
    animation: fadeIn 0.5s ease-out 0.8s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.success-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.5s ease-out 0.9s both;
}

.success-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.success-actions .btn-outline-light {
    background: transparent;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
}

.success-actions .btn-outline-light:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    transform: translateY(-2px);
}

.success-actions .btn-primary {
    background: var(--color-terracotta);
    border: 1px solid var(--color-terracotta);
    color: white;
}

.success-actions .btn-primary:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 107, 65, 0.3);
}

/* Button Loading State */
.btn-loading-state {
    pointer-events: none;
    opacity: 0.85;
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-loading .spinner {
    animation: spin 1s linear infinite;
}

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

/* Form Error State */
.form-group.field-error input,
.form-group.field-error select,
.form-group.field-error textarea {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.03);
}

.form-group.field-error label {
    color: #e74c3c;
}

.form-group.field-error::after {
    content: 'This field is required';
    display: block;
    font-size: var(--text-xs);
    color: #e74c3c;
    margin-top: var(--space-1);
    animation: fadeIn 0.3s ease;
}

/* Responsive Success Message */
@media (max-width: 576px) {
    .form-success-message {
        padding: var(--space-8) var(--space-4);
    }
    
    .success-icon-wrapper {
        width: 64px;
        height: 64px;
    }
    
    .success-icon {
        width: 48px;
        height: 48px;
    }
    
    .success-emoji {
        font-size: 2.5rem;
    }
    
    .success-title {
        font-size: var(--text-xl);
    }
    
    .success-company,
    .success-text,
    .success-cta {
        font-size: var(--text-sm);
    }
    
    .success-actions {
        flex-direction: column;
    }
    
    .success-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Direct Contact */
.b2b-direct-contact {
    margin-top: var(--space-16);
    position: relative;
    z-index: 1;
}

.direct-contact-inner {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    text-align: center;
}

.direct-contact-inner h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-6);
}

.direct-contact-methods {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: rgba(250, 246, 240, 0.9);
    font-size: var(--text-base);
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-method:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 168, 90, 0.3);
    color: white;
    transform: translateY(-2px);
}

.contact-method svg {
    color: #d4a85a;
    flex-shrink: 0;
}

/* Reveal Animations */
.reveal-fade,
.reveal-scale,
.reveal-slide-up {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: var(--delay, 0s);
}

.reveal-fade {
    transform: translateY(30px);
}

.reveal-scale {
    transform: scale(0.95);
}

.reveal-slide-up {
    transform: translateY(40px);
}

.reveal-fade.revealed,
.reveal-scale.revealed,
.reveal-slide-up.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ========================================
   PREMIUM MOTION EFFECTS - B2B Page
   ======================================== */

/* Hero Parallax Effect */
.b2b-hero {
    perspective: 1000px;
}

.b2b-hero-bg {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.b2b-hero-pattern {
    will-change: transform;
}

/* Enhanced Hero Text Animations */
.b2b-hero .animate-fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-hero .animate-fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

.b2b-hero .delay-100 { transition-delay: 0.1s; }
.b2b-hero .delay-200 { transition-delay: 0.2s; }
.b2b-hero .delay-300 { transition-delay: 0.3s; }
.b2b-hero .delay-400 { transition-delay: 0.4s; }

/* Hero Headline Shimmer Effect */
.b2b-hero-headline .text-gradient {
    background-size: 200% auto;
    animation: shimmerGold 4s ease-in-out infinite;
}

@keyframes shimmerGold {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Stats Cards Premium Animation */
.b2b-stat-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-stat-card.stat-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.b2b-stat-card:nth-child(1) { transition-delay: 0s; }
.b2b-stat-card:nth-child(2) { transition-delay: 0.1s; }
.b2b-stat-card:nth-child(3) { transition-delay: 0.2s; }
.b2b-stat-card:nth-child(4) { transition-delay: 0.3s; }

/* Stat Icon Pulse on Hover */
.b2b-stat-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.4s ease;
}

.b2b-stat-card:hover .b2b-stat-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(212, 168, 90, 0.3);
}

/* Partner Cards Staggered Reveal */
.b2b-partner-card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-partner-card.card-revealed {
    opacity: 1;
    transform: translateY(0);
}

.b2b-partner-card:nth-child(1) { transition-delay: 0s; }
.b2b-partner-card:nth-child(2) { transition-delay: 0.15s; }
.b2b-partner-card:nth-child(3) { transition-delay: 0.3s; }

/* Partner Card Icon Animation */
.partner-card-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease;
}

.b2b-partner-card:hover .partner-card-icon {
    transform: translateY(-5px) scale(1.1);
    background: linear-gradient(135deg, rgba(196, 107, 65, 0.15) 0%, rgba(212, 168, 90, 0.15) 100%);
}

.partner-card-icon svg {
    transition: transform 0.3s ease;
}

.b2b-partner-card:hover .partner-card-icon svg {
    transform: scale(1.1);
}

/* Why Cards Animation */
.b2b-why-card {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-why-card.card-revealed {
    opacity: 1;
    transform: translateX(0);
}

.b2b-why-card:nth-child(1) { transition-delay: 0s; }
.b2b-why-card:nth-child(2) { transition-delay: 0.1s; }
.b2b-why-card:nth-child(3) { transition-delay: 0.2s; }
.b2b-why-card:nth-child(4) { transition-delay: 0.3s; }
.b2b-why-card:nth-child(5) { transition-delay: 0.4s; }
.b2b-why-card:nth-child(6) { transition-delay: 0.5s; }

/* Why Card Icon Hover */
.why-card-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.b2b-why-card:hover .why-card-icon {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 10px 30px rgba(212, 168, 90, 0.4);
}

/* Service Items Reveal */
.b2b-service-item {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-service-item.item-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.b2b-service-item:nth-child(1) { transition-delay: 0s; }
.b2b-service-item:nth-child(2) { transition-delay: 0.12s; }
.b2b-service-item:nth-child(3) { transition-delay: 0.24s; }
.b2b-service-item:nth-child(4) { transition-delay: 0.36s; }
.b2b-service-item:nth-child(5) { transition-delay: 0.48s; }
.b2b-service-item:nth-child(6) { transition-delay: 0.6s; }

/* Service Item Image Zoom */
.service-item-visual img {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-service-item:hover .service-item-visual img {
    transform: scale(1.08);
}

/* Process Steps Premium Animation */
.b2b-process-step {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-process-step.step-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Process Step Marker Animation */
.process-step-marker {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.b2b-process-step:hover .process-step-marker {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(196, 107, 65, 0.4);
}

.process-step-marker .step-number {
    transition: transform 0.3s ease;
}

.b2b-process-step:hover .step-number {
    transform: scale(1.1);
}

/* Process Line Animation */
.process-line {
    background: linear-gradient(90deg, 
        var(--color-gray-200) 0%, 
        var(--color-terracotta) var(--progress, 0%), 
        var(--color-gray-200) var(--progress, 0%)
    );
    transition: --progress 0.3s ease;
}

/* Trusted By Logo Hover Effects */
.trusted-logo-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trusted-logo-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.logo-brand svg,
.logo-badge .badge-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trusted-logo-item:hover .logo-brand svg {
    transform: scale(1.08);
}

/* Form Card Premium Entrance */
.b2b-form-card {
    opacity: 0;
    transform: translateY(50px) scale(0.98);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-form-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Form Input Focus Effects */
.b2b-contact-form input:focus,
.b2b-contact-form select:focus,
.b2b-contact-form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(196, 107, 65, 0.15);
}

/* Submit Button Premium Hover */
.b2b-contact-form .btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-contact-form .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.b2b-contact-form .btn-primary:hover::before {
    left: 100%;
}

.b2b-contact-form .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(196, 107, 65, 0.4);
}

/* Contact Method Buttons */
.contact-method {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-method:hover {
    transform: translateY(-4px) scale(1.02);
}

.contact-method svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-method:hover svg {
    transform: scale(1.15) rotate(-5deg);
}

/* Trust Badge Animation */
.trust-badge {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust-badge:hover {
    transform: translateY(-3px);
}

.trust-badge svg {
    transition: transform 0.3s ease;
}

.trust-badge:hover svg {
    transform: scale(1.1);
}

/* Section Eyebrow Animation */
.section-eyebrow {
    position: relative;
    overflow: hidden;
}

.section-eyebrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-terracotta), #d4a85a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-fade.revealed .section-eyebrow::after {
    transform: scaleX(1);
    transition-delay: 0.3s;
}

/* Floating Animation for Decorative Elements */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

/* Pulse Glow for Important Elements */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 107, 65, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(196, 107, 65, 0.2); }
}

/* CTA Section Background Animation */
.b2b-cta-bg {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .b2b-hero-bg,
    .b2b-cta-bg {
        transform: none !important;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .b2b-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }
    
    .b2b-hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .b2b-hero-cta {
        justify-content: center;
    }
    
    .b2b-hero-stats {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .b2b-partners-grid,
    .b2b-why-grid,
    .b2b-services-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .b2b-cta-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    
    .b2b-cta-content {
        text-align: center;
    }
    
    .b2b-trust-badges {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .b2b-hero {
        min-height: auto;
        padding: calc(80px + var(--space-12)) 0 var(--space-16);
    }
    
    .b2b-hero-content {
        padding: var(--space-8) 0;
    }
    
    .b2b-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .b2b-stat-card {
        padding: var(--space-4);
    }
    
    .b2b-hero-scroll {
        display: none;
    }
    
    .b2b-partners-grid,
    .b2b-why-grid,
    .b2b-services-showcase {
        grid-template-columns: 1fr;
    }
    
    .b2b-section-header {
        margin-bottom: var(--space-12);
    }
    
    .b2b-partners-section,
    .b2b-why-section,
    .b2b-services-section,
    .b2b-process-section,
    .b2b-cta-section {
        padding: var(--space-16) 0;
    }
    
    .b2b-process-timeline {
        flex-direction: column;
        gap: var(--space-8);
        align-items: flex-start;
    }
    
    .process-line {
        display: none;
    }
    
    .b2b-process-step {
        flex-direction: row;
        text-align: left;
        gap: var(--space-5);
    }
    
    .process-step-marker {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .process-step-content p {
        max-width: none;
    }
    
    .b2b-contact-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .direct-contact-methods {
        flex-direction: column;
        align-items: stretch;
    }
    
    .contact-method {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .b2b-hero-stats {
        grid-template-columns: 1fr;
    }
    
    .b2b-form-card {
        padding: var(--space-6);
    }
    
    .b2b-trust-badges {
        flex-direction: column;
        align-items: center;
    }
}


/* ========================================
   PRIVACY POLICY PAGE - Premium Design
   ======================================== */

/* Privacy Hero Section */
.privacy-policy-page {
    background: var(--color-white);
}

.privacy-hero {
    position: relative;
    padding: 160px 0 100px;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 50%, #1A1A1A 100%);
    overflow: hidden;
}

.privacy-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(198, 93, 59, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(232, 220, 196, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.privacy-hero-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(255, 255, 255, 0.01) 100px,
            rgba(255, 255, 255, 0.01) 101px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 100px,
            rgba(255, 255, 255, 0.01) 100px,
            rgba(255, 255, 255, 0.01) 101px
        );
}

.privacy-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.privacy-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    border-radius: 24px;
    margin-bottom: var(--space-8);
    animation: heroIconFloat 3s ease-in-out infinite;
}

.privacy-hero-icon svg {
    stroke: white;
}

@keyframes heroIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.privacy-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

.privacy-hero-subtitle {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto var(--space-8);
    line-height: 1.6;
}

.privacy-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.privacy-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.privacy-meta-item svg {
    stroke: var(--color-terracotta);
}

/* Commitment Section */
.privacy-commitment {
    padding: var(--space-16) 0;
    background: var(--color-sand-light);
}

.commitment-card {
    background: var(--color-white);
    border-radius: 24px;
    padding: var(--space-12);
    text-align: center;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.commitment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-sand-dark), var(--color-terracotta));
}

.commitment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border-radius: 50%;
    margin-bottom: var(--space-6);
}

.commitment-icon svg {
    stroke: var(--color-terracotta);
}

.commitment-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.commitment-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto var(--space-8);
}

.commitment-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.commitment-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-sand-light);
    border-radius: 100px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-700);
}

.commitment-badge svg {
    stroke: var(--color-terracotta);
}

/* Table of Contents */
.privacy-toc {
    padding: var(--space-12) 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
}

.toc-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.toc-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-dark);
    margin-bottom: var(--space-6);
    text-align: center;
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.toc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4) var(--space-3);
    background: var(--color-sand-light);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.toc-item:hover,
.toc-item.active {
    background: var(--color-terracotta);
    transform: translateY(-2px);
}

.toc-item:hover .toc-number,
.toc-item.active .toc-number {
    color: rgba(255, 255, 255, 0.7);
}

.toc-item:hover .toc-text,
.toc-item.active .toc-text {
    color: var(--color-white);
}

.toc-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
    margin-bottom: var(--space-1);
    transition: color 0.3s ease;
}

.toc-text {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Main Content Sections */
.privacy-content {
    padding: var(--space-16) 0;
}

.privacy-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.privacy-section {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-100);
}

.privacy-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-header-privacy {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    position: relative;
}

.section-number {
    /* Hidden - decorative numbers removed per user request */
    display: none;
}

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    border-radius: 14px;
    flex-shrink: 0;
}

.section-icon svg {
    stroke: white;
}

.section-header-privacy h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin: 0;
}

.section-content-privacy {
    padding-left: 72px;
}

.lead-text {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-8);
    border-left: 3px solid var(--color-terracotta);
    padding-left: var(--space-5);
}

/* Info Categories */
.info-category {
    margin-bottom: var(--space-8);
}

.info-category h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.info-category p {
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);
}

.styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.styled-list li {
    position: relative;
    padding-left: var(--space-6);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.styled-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    background: var(--color-terracotta);
    border-radius: 50%;
}

.styled-list li strong {
    color: var(--color-dark);
}

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.use-case {
    background: var(--color-sand-light);
    border-radius: 16px;
    padding: var(--space-6);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.use-case:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.use-case-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border-radius: 12px;
    margin-bottom: var(--space-4);
}

.use-case-icon svg {
    stroke: var(--color-terracotta);
}

.use-case h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.use-case p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Highlight Boxes */
.highlight-box {
    border-radius: 16px;
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.highlight-box:last-child {
    margin-bottom: 0;
}

.highlight-box h4 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.highlight-box-sand {
    background: var(--color-sand-light);
    border-left: 4px solid var(--color-sand-dark);
}

.highlight-box-sand h4 {
    color: var(--color-dark);
}

.highlight-box-terracotta {
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.08) 0%, rgba(198, 93, 59, 0.04) 100%);
    border-left: 4px solid var(--color-terracotta);
}

.highlight-box-terracotta h4 {
    color: var(--color-terracotta-dark);
}

/* Cookies Section - Premium Design */

/* Cookie Type Indicator */
.cookie-type-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.cookie-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 50px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
}

.cookie-badge.essential {
    background: linear-gradient(135deg, rgba(139, 162, 135, 0.15) 0%, rgba(139, 162, 135, 0.08) 100%);
    color: var(--color-sage-dark);
    border: 1px solid rgba(139, 162, 135, 0.3);
}

.cookie-badge.essential svg {
    stroke: var(--color-sage);
}

/* Cookies Grid */
.cookies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

/* Cookie Card */
.cookie-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    padding: var(--space-6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cookie-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-sand) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cookie-card:hover {
    border-color: var(--color-sand);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.cookie-card:hover::before {
    opacity: 1;
}

.cookie-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.cookie-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-cream) 100%);
    border-radius: 12px;
}

.cookie-icon svg {
    stroke: var(--color-terracotta);
}

.cookie-duration {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    background: var(--color-gray-50);
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
}

.cookie-duration svg {
    stroke: var(--color-gray-400);
}

.cookie-name {
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace);
    font-size: var(--text-sm);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.cookie-description {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* No Tracking Banner - Info Note Style */
.no-tracking-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(2, 136, 209, 0.08);
    border-radius: 12px;
    border-left: 3px solid var(--color-info);
}

.no-tracking-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.no-tracking-icon svg {
    stroke: var(--color-info);
    width: 20px;
    height: 20px;
}

.no-tracking-content h4 {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.no-tracking-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
    margin: 0;
}

/* Info Note */
.info-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(2, 136, 209, 0.08);
    border-radius: 12px;
    border-left: 3px solid var(--color-info);
}

.info-note svg {
    stroke: var(--color-info);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-note p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Third Party Grid */
.third-party-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.third-party-item {
    background: var(--color-sand-light);
    border-radius: 16px;
    padding: var(--space-6);
    transition: transform 0.3s ease;
}

.third-party-item:hover {
    transform: translateY(-2px);
}

.third-party-item h4 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.third-party-item p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.third-party-item a {
    font-size: var(--text-sm);
    color: var(--color-terracotta);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.third-party-item a:hover {
    color: var(--color-terracotta-dark);
}

/* Security Features */
.security-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.security-feature {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.security-feature:hover {
    border-color: var(--color-terracotta);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.1);
}

.security-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.security-icon svg {
    stroke: var(--color-terracotta);
}

.security-text h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.security-text p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Rights Grid */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.right-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    padding: var(--space-5);
    text-align: center;
    transition: all 0.3s ease;
}

.right-card:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.right-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    border-radius: 12px;
    margin-bottom: var(--space-4);
}

.right-icon svg {
    stroke: white;
}

.right-card h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.right-card p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

.rights-cta {
    text-align: center;
    padding: var(--space-5);
    background: var(--color-sand-light);
    border-radius: 12px;
}

.rights-cta p {
    margin: 0;
    color: var(--color-gray-700);
}

/* Contact Cards Privacy */
.contact-cards-privacy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.contact-card-privacy {
    background: var(--color-sand-light);
    border-radius: 16px;
    padding: var(--space-6);
    text-align: center;
    transition: transform 0.3s ease;
}

.contact-card-privacy:hover {
    transform: translateY(-4px);
}

.contact-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-white);
    border-radius: 14px;
    margin-bottom: var(--space-4);
}

.contact-card-icon svg {
    stroke: var(--color-terracotta);
}

.contact-card-privacy h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.contact-card-privacy a,
.contact-card-privacy p {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    text-decoration: none;
    margin: 0;
}

.contact-card-privacy a:hover {
    color: var(--color-terracotta);
}

/* Footer CTA */
.privacy-footer-cta {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
    position: relative;
    overflow: hidden;
}

.privacy-footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(198, 93, 59, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(232, 220, 196, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.footer-cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-cta-content h3 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.footer-cta-content p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-8);
}

.footer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.footer-cta-buttons .btn-outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.footer-cta-buttons .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

/* Reveal Animations */
.privacy-policy-page .reveal-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.privacy-policy-page .reveal-fade.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Extended TOC Grid */
.toc-grid-extended {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.toc-grid-extended .toc-item {
    padding: var(--space-3) var(--space-2);
}

.toc-grid-extended .toc-number {
    font-size: var(--text-xl);
}

.toc-grid-extended .toc-text {
    font-size: var(--text-xs);
}

/* Data Retention Grid */
.retention-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.retention-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.retention-item:hover {
    border-color: var(--color-terracotta);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.1);
}

.retention-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand) 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.retention-icon svg {
    stroke: var(--color-terracotta);
}

.retention-content h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.retention-period {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 100px;
    margin-bottom: var(--space-2);
}

.retention-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Responsive Privacy Policy */
@media (max-width: 992px) {
    .toc-grid,
    .toc-grid-extended {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
    }
    
    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .security-features,
    .retention-grid {
        grid-template-columns: 1fr;
    }
    
    .cookies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .privacy-hero {
        padding: 120px 0 80px;
    }
    
    .privacy-hero-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }
    
    .privacy-hero-icon svg {
        width: 48px;
        height: 48px;
    }
    
    .commitment-card {
        padding: var(--space-8);
    }
    
    .toc-grid,
    .toc-grid-extended {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .toc-grid-extended .toc-text {
        font-size: 10px;
    }
    
    .section-content-privacy {
        padding-left: 0;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .third-party-grid {
        grid-template-columns: 1fr;
    }
    
    .rights-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-cards-privacy {
        grid-template-columns: 1fr;
    }
    
    .retention-grid {
        grid-template-columns: 1fr;
    }
    
    .cookies-grid {
        grid-template-columns: 1fr;
    }
    
    .cookie-card {
        padding: var(--space-5);
    }
    
    .no-tracking-banner {
        padding: var(--space-3);
    }
}

@media (max-width: 480px) {
    .privacy-hero {
        padding: 100px 0 60px;
    }
    
    .privacy-meta {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .commitment-badges {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .toc-grid,
    .toc-grid-extended {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .toc-grid-extended .toc-number {
        font-size: var(--text-lg);
    }
    
    .toc-grid-extended .toc-text {
        font-size: 9px;
    }
    
    .section-header-privacy {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .retention-item {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
}



/* ============================================
   BLOG PAGE - PREMIUM MAGAZINE STYLE
   ============================================ */

.blog-page {
    background: #fff;
}

/* Blog Hero */
.blog-hero {
    position: relative;
    padding: 140px 0 80px;
    background: var(--color-cream, #FAF8F5);
    overflow: hidden;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 60% 50% at 20% 100%, rgba(198, 93, 59, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 0%, rgba(212, 180, 131, 0.08) 0%, transparent 50%);
}

.blog-hero-content {
    position: relative;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.blog-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 20px;
}

.blog-hero-eyebrow svg {
    stroke: var(--color-terracotta);
}

.blog-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 16px;
}

.blog-hero p {
    font-size: 1.125rem;
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Blog Filters */
.blog-filters {
    padding: 24px 0;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 80px;
    z-index: 100;
}

.blog-filters-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.blog-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-gray-100);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 280px;
}

.blog-search svg {
    stroke: var(--color-gray-500);
    flex-shrink: 0;
}

.blog-search input {
    border: none;
    background: transparent;
    font-size: 14px;
    width: 100%;
    color: var(--color-dark);
}

.blog-search input::placeholder {
    color: var(--color-gray-500);
}

.blog-search input:focus {
    outline: none;
}

.blog-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-category-tag {
    display: inline-block;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-700);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-category-tag:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.blog-category-tag.active {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: #fff;
}

/* Featured Post */
.blog-featured {
    padding: 60px 0;
    background: #fff;
}

.featured-article {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}

.featured-image {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-image:hover img {
    transform: scale(1.03);
}

.featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-terracotta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
}

.featured-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-sand) 0%, var(--color-sand-dark) 100%);
}

.featured-content {
    padding: 20px 0;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.featured-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    text-decoration: none;
}

.featured-category:hover {
    text-decoration: underline;
}

.featured-date,
.featured-read-time {
    font-size: 13px;
    color: var(--color-gray-500);
}

.featured-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
}

.featured-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.featured-title a:hover {
    color: var(--color-terracotta);
}

.featured-excerpt {
    font-size: 1rem;
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: 24px;
}

.featured-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-terracotta);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.featured-link:hover {
    gap: 12px;
}

/* Main Blog Layout */
.blog-main {
    padding: 60px 0 80px;
    background: var(--color-gray-100);
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
}

.blog-section-header {
    margin-bottom: 32px;
}

.blog-section-header.centered {
    text-align: center;
}

.blog-section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 12px;
}

.blog-section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.blog-section-header p {
    color: var(--color-gray-500);
    font-size: 0.9375rem;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.blog-card-image {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-sand-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-card-placeholder svg {
    stroke: var(--color-sand-dark);
}

.blog-card-content {
    padding: 24px;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.blog-card-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    text-decoration: none;
}

.blog-card-category:hover {
    text-decoration: underline;
}

.blog-card-date {
    font-size: 12px;
    color: var(--color-gray-500);
}

.blog-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-card-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card-title a:hover {
    color: var(--color-terracotta);
}

.blog-card-excerpt {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-terracotta);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.blog-card-link:hover {
    gap: 10px;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-700);
    background: #fff;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-pagination .page-numbers:hover {
    background: var(--color-terracotta);
    color: #fff;
}

.blog-pagination .page-numbers.current {
    background: var(--color-terracotta);
    color: #fff;
}

.blog-pagination .prev,
.blog-pagination .next {
    gap: 6px;
}

/* Blog Empty State */
.blog-empty {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 16px;
}

.blog-empty svg {
    stroke: var(--color-gray-300);
    margin-bottom: 24px;
}

.blog-empty h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.blog-empty p {
    color: var(--color-gray-500);
}

/* Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sidebar-widget {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 20px;
}

.sidebar-title svg {
    stroke: var(--color-terracotta);
}

/* Popular Posts */
.sidebar-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-post {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    padding: 12px;
    margin: -12px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.sidebar-post:hover {
    background: var(--color-gray-100);
}

.sidebar-post-num {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-sand-dark);
    line-height: 1;
}

.sidebar-post-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.4;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.sidebar-post:hover .sidebar-post-content h4 {
    color: var(--color-terracotta);
}

.sidebar-post-date {
    font-size: 12px;
    color: var(--color-gray-500);
}

/* Sidebar Categories */
.sidebar-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--color-gray-100);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-category:hover {
    background: var(--color-terracotta);
}

.sidebar-category-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
    transition: color 0.2s ease;
}

.sidebar-category:hover .sidebar-category-name {
    color: #fff;
}

.sidebar-category-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray-500);
    background: #fff;
    padding: 2px 8px;
    border-radius: 50px;
    transition: all 0.2s ease;
}

.sidebar-category:hover .sidebar-category-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Sidebar CTA */
.sidebar-cta {
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #b5533e 100%);
    text-align: center;
    color: #fff;
}

.sidebar-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    margin-bottom: 16px;
}

.sidebar-cta-icon svg {
    stroke: #fff;
}

.sidebar-cta h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.sidebar-cta p {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.sidebar-cta-btn {
    display: inline-block;
    background: #fff;
    color: var(--color-terracotta);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Sidebar Newsletter */
.sidebar-newsletter p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: 16px;
}

.sidebar-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-newsletter-form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    font-size: 14px;
}

.sidebar-newsletter-form input:focus {
    outline: none;
    border-color: var(--color-terracotta);
}

.sidebar-newsletter-form button {
    width: 100%;
    padding: 12px;
    background: var(--color-dark);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sidebar-newsletter-form button:hover {
    background: var(--color-terracotta);
}

/* Destination Guides Section */
.blog-guides {
    padding: 80px 0;
    background: #fff;
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.guide-card {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
}

.guide-card-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.4s ease;
    overflow: hidden;
}

.guide-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.guide-card:hover .guide-card-bg img {
    transform: scale(1.08);
}

.guide-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    color: #fff;
}

.guide-card-content h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.guide-card-content span {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Blog CTA Section */
.blog-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.blog-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 40% 50% at 20% 50%, rgba(198, 93, 59, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 30% 40% at 80% 50%, rgba(212, 180, 131, 0.08) 0%, transparent 50%);
}

.blog-cta-content {
    position: relative;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.blog-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.blog-cta p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
}

.blog-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.blog-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-terracotta);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-cta-primary:hover {
    background: #b5533e;
    transform: translateY(-2px);
}

.blog-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 16px 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   SINGLE ARTICLE - PREMIUM STYLE
   ============================================ */

.single-article {
    background: #fff;
}

/* Article Header */
.article-header {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    padding: 60px 0;
}

.article-header-bg {
    position: absolute;
    inset: 0;
}

.article-header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.article-header-content {
    position: relative;
    max-width: 800px;
}

.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}

.article-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-breadcrumb a:hover {
    color: #fff;
}

.article-breadcrumb span {
    color: rgba(255, 255, 255, 0.4);
}

.article-category {
    display: inline-block;
    background: var(--color-terracotta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    text-decoration: none;
    margin-bottom: 20px;
}

.article-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 24px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.article-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.article-meta-item svg {
    stroke: rgba(255, 255, 255, 0.6);
}

/* Article Body */
.article-body {
    padding: 60px 0;
}

.container-article {
    max-width: 900px;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 40px;
}

.article-content {
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--color-gray-700);
}

.article-content h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 48px 0 20px;
}

.article-content h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 36px 0 16px;
}

.article-content p {
    margin-bottom: 24px;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 32px 0;
}

.article-content ul,
.article-content ol {
    margin-bottom: 24px;
    padding-left: 24px;
}

.article-content li {
    margin-bottom: 10px;
}

.article-content blockquote {
    border-left: 4px solid var(--color-terracotta);
    padding: 20px 24px;
    margin: 32px 0;
    background: var(--color-sand-light);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 1.125rem;
}

/* Article Share */
.article-share {
    position: relative;
}

.article-share-sticky {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.article-share-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 8px;
}

.article-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-gray-100);
    border: none;
    border-radius: 50%;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.article-share-btn:hover {
    background: var(--color-terracotta);
    color: #fff;
}

.article-share-whatsapp:hover {
    background: #25D366;
}

.article-share-copy.copied {
    background: var(--color-success);
    color: #fff;
}

/* Article Tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-gray-200);
}

.article-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
}

.article-tags a {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.article-tags a:hover {
    background: var(--color-terracotta);
    color: #fff;
}

/* Article Author */
.article-author {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 48px;
    padding: 32px;
    background: var(--color-sand-light);
    border-radius: 16px;
}

.article-author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}

.article-author-avatar svg {
    stroke: var(--color-terracotta);
}

.article-author-label {
    display: block;
    font-size: 12px;
    color: var(--color-gray-500);
    margin-bottom: 4px;
}

.article-author-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.article-author-bio {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Article CTA */
.article-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    padding: 32px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #b5533e 100%);
    border-radius: 16px;
    color: #fff;
}

.article-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

.article-cta-icon svg {
    stroke: #fff;
}

.article-cta-content {
    flex: 1;
}

.article-cta-content h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.article-cta-content p {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin: 0;
}

.article-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.article-cta-btn-primary {
    display: inline-block;
    background: #fff;
    color: var(--color-terracotta);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.article-cta-btn-primary:hover {
    transform: translateY(-2px);
}

.article-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

.article-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Related Articles */
.related-articles {
    padding: 80px 0;
    background: var(--color-gray-100);
}

.related-header {
    text-align: center;
    margin-bottom: 40px;
}

.related-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.related-header p {
    color: var(--color-gray-500);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.related-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.related-card-image {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card-image img {
    transform: scale(1.05);
}

.related-card-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-sand-light);
}

.related-card-content {
    padding: 24px;
}

.related-card-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 10px;
}

.related-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.related-card-title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.related-card-title a:hover {
    color: var(--color-terracotta);
}

.related-card-date {
    font-size: 13px;
    color: var(--color-gray-500);
}

/* Blog More Section */
.blog-more {
    padding: 60px 0;
    background: #fff;
}

.blog-more-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.blog-more h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 12px;
}

.blog-more p {
    color: var(--color-gray-500);
    margin-bottom: 24px;
}

.blog-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-more-btn:hover {
    background: var(--color-terracotta);
    gap: 12px;
}

/* ============================================
   ARTICLE TABLE OF CONTENTS (SEO)
   ============================================ */

.article-toc {
    background: linear-gradient(135deg, var(--color-sand-light) 0%, rgba(250, 248, 245, 0.8) 100%);
    border: 1px solid rgba(198, 93, 59, 0.15);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 32px 0 40px;
}

.article-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--color-dark);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
}

.article-toc-header svg {
    stroke: var(--color-terracotta);
}

.article-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}

.article-toc-list li {
    counter-increment: toc-counter;
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
}

.article-toc-list li::before {
    content: counter(toc-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    color: var(--color-terracotta);
    font-weight: 600;
    font-size: 0.85rem;
}

.article-toc-list a {
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.article-toc-list a:hover {
    color: var(--color-terracotta);
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

.article-content h2[id],
.article-content h3[id] {
    scroll-margin-top: 100px;
}

/* ============================================
   ENHANCED ARTICLE FEATURES (SEO)
   ============================================ */

/* Key Takeaways Box */
.article-key-takeaways {
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.08) 0%, rgba(198, 93, 59, 0.03) 100%);
    border-left: 4px solid var(--color-terracotta);
    padding: 24px 28px;
    margin: 32px 0;
    border-radius: 0 12px 12px 0;
}

.article-key-takeaways h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-dark);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-key-takeaways h4 svg {
    stroke: var(--color-terracotta);
}

.article-key-takeaways ul {
    margin: 0;
    padding-left: 20px;
}

.article-key-takeaways li {
    margin-bottom: 8px;
    color: var(--color-gray-700);
}

/* Pro Tip Box */
.article-pro-tip {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(46, 125, 50, 0.03) 100%);
    border-left: 4px solid #2E7D32;
    padding: 20px 24px;
    margin: 32px 0;
    border-radius: 0 12px 12px 0;
    display: flex;
    gap: 16px;
}

.article-pro-tip svg {
    flex-shrink: 0;
    stroke: #2E7D32;
}

.article-pro-tip-content {
    flex: 1;
}

.article-pro-tip-content strong {
    display: block;
    color: #2E7D32;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.article-pro-tip-content p {
    margin: 0;
    color: var(--color-gray-700);
}

/* Last Updated Badge */
.article-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-sand-light);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--color-gray-600);
    margin-bottom: 16px;
}

.article-updated svg {
    width: 14px;
    height: 14px;
}

/* Internal Link Styling */
.article-content a:not(.btn):not(.article-cta-btn-primary):not(.article-cta-btn-secondary) {
    color: var(--color-terracotta);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.article-content a:not(.btn):hover {
    color: var(--color-terracotta-dark);
    text-decoration-thickness: 2px;
}

/* Featured Snippet Optimization */
.article-content p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--color-gray-800);
}

/* Definition Lists for Featured Snippets */
.article-content dl {
    margin: 32px 0;
    padding: 0;
}

.article-content dt {
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.article-content dd {
    margin: 0 0 24px;
    color: var(--color-gray-700);
    padding-left: 16px;
    border-left: 2px solid var(--color-sand);
}

/* Quick Facts Box (Featured Snippet optimized) */
.article-quick-facts {
    background: #fff;
    border: 2px solid var(--color-sand);
    border-radius: 16px;
    padding: 24px;
    margin: 32px 0;
}

.article-quick-facts h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-dark);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-sand-light);
}

.article-quick-facts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-quick-facts li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-sand-light);
    font-size: 0.95rem;
}

.article-quick-facts li:last-child {
    border-bottom: none;
}

.article-quick-facts li strong {
    color: var(--color-dark);
}

.article-quick-facts li span {
    color: var(--color-gray-600);
}

/* Related Posts in Content */
.article-related-inline {
    background: var(--color-sand-light);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 32px 0;
}

.article-related-inline h5 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.article-related-inline a {
    display: inline-block;
    color: var(--color-terracotta);
    font-weight: 500;
    text-decoration: none;
}

.article-related-inline a:hover {
    text-decoration: underline;
}

/* Mobile TOC */
@media (max-width: 768px) {
    .article-toc {
        padding: 20px;
    }
    
    .article-toc-list li {
        padding-left: 24px;
    }
    
    .article-content p:first-of-type {
        font-size: 1.1rem;
    }
}

/* ============================================
   NEWSLETTER SECTION
   ============================================ */

.blog-newsletter {
    padding: 60px 0;
    background: var(--color-sand-light);
}

.blog-newsletter-card {
    background: #fff;
    border-radius: 20px;
    padding: 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.blog-newsletter-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.1) 0%, rgba(198, 93, 59, 0.05) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-newsletter-icon svg {
    stroke: var(--color-terracotta);
}

.blog-newsletter-content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark);
    margin: 0 0 8px;
}

.blog-newsletter-content p {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    margin: 0;
    max-width: 400px;
}

.blog-newsletter-form {
    display: flex;
    gap: 12px;
}

.blog-newsletter-form input[type="email"] {
    padding: 14px 20px;
    border: 1px solid var(--color-sand);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    min-width: 260px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.blog-newsletter-form button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-terracotta);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.blog-newsletter-form button:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.3);
}

@media (max-width: 1024px) {
    .blog-newsletter-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 36px 28px;
    }
    
    .blog-newsletter-icon {
        margin: 0 auto;
    }
    
    .blog-newsletter-content p {
        max-width: none;
    }
    
    .blog-newsletter-form {
        flex-direction: column;
    }
    
    .blog-newsletter-form input[type="email"] {
        min-width: auto;
        width: 100%;
    }
    
    .blog-newsletter-form button {
        justify-content: center;
    }
}

/* ============================================
   BLOG RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1100px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
    
    .blog-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .guides-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .featured-article {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .article-layout {
        grid-template-columns: 1fr;
    }
    
    .article-share {
        display: none;
    }
    
    .article-cta {
        flex-direction: column;
        text-align: center;
    }
    
    .article-cta-actions {
        width: 100%;
    }
    
    .article-cta-btn-primary,
    .article-cta-btn-secondary {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        padding: 120px 0 60px;
    }
    
    .blog-filters-inner {
        flex-direction: column;
        align-items: stretch;
    }
    
    .blog-search {
        min-width: 100%;
    }
    
    .blog-categories {
        justify-content: center;
    }
    
    .blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .guides-grid {
        grid-template-columns: 1fr;
    }
    
    .article-header {
        min-height: 60vh;
    }
    
    .article-author {
        flex-direction: column;
        text-align: center;
    }
    
    .article-author-avatar {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .blog-hero h1 {
        font-size: 1.75rem;
    }
    
    .blog-category-tag {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .featured-title {
        font-size: 1.25rem;
    }
    
    .blog-card-content {
        padding: 20px;
    }
    
    .sidebar-widget {
        padding: 20px;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .blog-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .blog-cta-primary,
    .blog-cta-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   CUSTOM TRIP REQUEST PAGE - LUXURY REDESIGN
   Premium immersive experience inspired by
   Abercrombie & Kent, Black Tomato, Kuoni
   ======================================== */

/* ----------------------------------------
   CT Global Styles & Variables
   ---------------------------------------- */
.ct-section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: var(--space-4);
}

.ct-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
    line-height: 1.2;
}

.ct-section-desc {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.ct-required {
    color: var(--color-terracotta);
}

/* CT Buttons */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.ct-btn--primary {
    background: var(--color-terracotta);
    color: white;
    border-color: var(--color-terracotta);
}

.ct-btn--primary:hover {
    background: var(--color-terracotta-dark);
    border-color: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(198, 93, 59, 0.3);
}

.ct-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.ct-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.ct-btn--outline {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-gray-300);
}

.ct-btn--outline:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.ct-btn--lg {
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-lg);
}

/* ----------------------------------------
   CT HERO SECTION - Immersive Video
   ---------------------------------------- */
.ct-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ct-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ct-hero__overlay {
    position: absolute;
    inset: 0;
    /* Strong bottom-to-top dark gradient for text readability */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.55) 30%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.ct-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    padding: var(--space-8);
}

.ct-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: var(--space-8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.ct-hero__badge svg {
    color: var(--color-terracotta);
}

.ct-hero__title {
    margin-bottom: var(--space-6);
}

.ct-hero__title-line {
    display: block;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-heading);
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ct-hero__title-line--accent {
    color: #ffd9a8; /* Brighter sand color for contrast */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ct-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #ffffff;
    font-weight: 400;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto var(--space-10);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ct-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.ct-hero__scroll-hint {
    position: absolute;
    bottom: var(--space-10);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ct-hero__scroll-arrow {
    animation: ctBounce 2s infinite;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

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

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

@keyframes ctBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ----------------------------------------
   CT REGIONS SECTION - Morocco Map
   ---------------------------------------- */
.ct-regions {
    background: var(--color-sand-light);
    padding: var(--space-20) 0;
}

.ct-regions__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.ct-regions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

.ct-regions__map {
    position: sticky;
    top: 120px;
}

@keyframes ctFadeRight {
    to { opacity: 1; transform: translateX(0); }
}

.ct-map {
    position: relative;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-map__svg {
    width: 100%;
    max-width: 350px;
    height: auto;
}

.ct-map__outline {
    transition: all 0.4s ease;
}

/* Dot Groups - Hidden by default */
.ct-map__dot-group {
    opacity: 0.3;
    transition: all 0.4s ease;
}

.ct-map__dot-main {
    transition: all 0.3s ease;
}

.ct-map__dot-pulse {
    opacity: 0;
    transition: all 0.3s ease;
}

.ct-map__dot-label {
    font-size: 10px;
    font-weight: 600;
    fill: var(--color-dark);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Route lines - Hidden by default */
.ct-map__route {
    opacity: 0;
    stroke-dashoffset: 100;
    transition: all 0.5s ease;
}

/* Active state when region is hovered/selected */
.ct-map--active-north .ct-map__dot-group--north,
.ct-map--active-imperial .ct-map__dot-group--imperial,
.ct-map--active-coast .ct-map__dot-group--coast,
.ct-map--active-atlas .ct-map__dot-group--atlas,
.ct-map--active-sahara .ct-map__dot-group--sahara {
    opacity: 1;
}

.ct-map--active-north .ct-map__dot-group--north .ct-map__dot-pulse,
.ct-map--active-imperial .ct-map__dot-group--imperial .ct-map__dot-pulse,
.ct-map--active-coast .ct-map__dot-group--coast .ct-map__dot-pulse,
.ct-map--active-atlas .ct-map__dot-group--atlas .ct-map__dot-pulse,
.ct-map--active-sahara .ct-map__dot-group--sahara .ct-map__dot-pulse {
    opacity: 0.4;
    animation: ctPulse 1.5s ease-in-out infinite;
}

.ct-map--active-north .ct-map__dot-group--north .ct-map__dot-label,
.ct-map--active-imperial .ct-map__dot-group--imperial .ct-map__dot-label,
.ct-map--active-coast .ct-map__dot-group--coast .ct-map__dot-label,
.ct-map--active-atlas .ct-map__dot-group--atlas .ct-map__dot-label,
.ct-map--active-sahara .ct-map__dot-group--sahara .ct-map__dot-label {
    opacity: 1;
}

.ct-map--active-north .ct-map__dot-group--north .ct-map__dot-main,
.ct-map--active-imperial .ct-map__dot-group--imperial .ct-map__dot-main,
.ct-map--active-coast .ct-map__dot-group--coast .ct-map__dot-main,
.ct-map--active-atlas .ct-map__dot-group--atlas .ct-map__dot-main,
.ct-map--active-sahara .ct-map__dot-group--sahara .ct-map__dot-main {
    r: 7;
    filter: drop-shadow(0 2px 6px rgba(198, 93, 59, 0.5));
}

/* Show route lines when active */
.ct-map--active-north .ct-map__route--north,
.ct-map--active-imperial .ct-map__route--imperial,
.ct-map--active-coast .ct-map__route--coast,
.ct-map--active-atlas .ct-map__route--atlas,
.ct-map--active-sahara .ct-map__route--sahara {
    opacity: 1;
    stroke-dashoffset: 0;
}

@keyframes ctPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Draw animation for outline */
.ct-map__outline {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: ctDrawMap 2s ease forwards;
}

@keyframes ctDrawMap {
    to { stroke-dashoffset: 0; }
}

/* Region Cards */
.ct-regions__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@keyframes ctFadeLeft {
    to { opacity: 1; transform: translateX(0); }
}

.ct-region-card {
    display: flex;
    gap: var(--space-4);
    background: white;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ct-region-card:hover,
.ct-region-card--active,
.ct-region-card--selected {
    transform: translateX(8px);
    border-color: var(--color-terracotta);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.ct-region-card--selected {
    background: rgba(198, 93, 59, 0.05);
}

.ct-region-card--selected .ct-region-card__icon {
    background: var(--color-terracotta);
}

.ct-region-card--selected .ct-region-card__icon svg {
    color: white;
}

.ct-region-card__icon {
    width: 48px;
    height: 48px;
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-region-card__icon svg {
    color: var(--color-terracotta);
}

.ct-region-card__content h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-region-card__content > p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.ct-region-card__details {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ct-region-card__details li {
    font-size: 11px;
    color: var(--color-gray-600);
    background: var(--color-sand-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* ----------------------------------------
   CT FORM SECTION - Luxury multi-step
   ---------------------------------------- */
.ct-form-section {
    background: linear-gradient(180deg, white 0%, var(--color-sand-light) 100%);
    padding: var(--space-20) 0;
}

.ct-form-section__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.ct-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}

/* Progress Steps */
.ct-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-10);
    padding: 0 var(--space-4);
}

.ct-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.ct-progress__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-sand-light);
    border: 2px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-progress__icon svg {
    color: var(--color-gray-400);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-progress__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover effects for progress steps */
.ct-progress__step:hover .ct-progress__icon {
    transform: scale(1.08);
    border-color: var(--color-terracotta-light);
    box-shadow: 0 4px 15px rgba(198, 93, 59, 0.15);
}

.ct-progress__step:hover .ct-progress__icon svg {
    color: var(--color-terracotta);
}

.ct-progress__step:hover .ct-progress__label {
    color: var(--color-terracotta);
}

/* Active step hover - subtle effect since already highlighted */
.ct-progress__step--active:hover .ct-progress__icon {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(198, 93, 59, 0.25);
}

/* Completed step hover */
.ct-progress__step--completed:hover .ct-progress__icon {
    transform: scale(1.08);
    border-color: var(--color-earth);
    box-shadow: 0 4px 15px rgba(139, 90, 43, 0.2);
}

.ct-progress__step--completed:hover .ct-progress__icon svg {
    color: white;
}

.ct-progress__step--completed:hover .ct-progress__label {
    color: var(--color-earth);
}

.ct-progress__step--active .ct-progress__icon {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-progress__step--active .ct-progress__icon svg {
    color: white;
}

.ct-progress__step--active .ct-progress__label {
    color: var(--color-terracotta);
}

.ct-progress__step--completed .ct-progress__icon {
    background: var(--color-earth);
    border-color: var(--color-earth);
}

.ct-progress__step--completed .ct-progress__icon svg {
    color: white;
}

.ct-progress__step--completed .ct-progress__label {
    color: var(--color-earth);
}

.ct-progress__line {
    width: 60px;
    height: 2px;
    background: var(--color-gray-200);
    margin: 0 var(--space-2);
    margin-bottom: 28px;
    transition: background 0.3s ease;
}

.ct-progress__line--completed {
    background: var(--color-earth);
}

/* Form Steps */
.ct-form__step {
    display: none;
}

.ct-form__step--active {
    display: block;
    animation: ctFadeUp 0.5s ease;
}

.ct-form__step-header {
    margin-bottom: var(--space-8);
}

.ct-form__step-header h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-form__step-header p {
    color: var(--color-gray-600);
}

/* Form Elements */
.ct-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ct-form__group {
    margin-bottom: var(--space-5);
}

.ct-form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-form__hint {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    margin-bottom: var(--space-2);
}

.ct-form__input,
.ct-form__select,
.ct-form__textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: white;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-form__input:hover,
.ct-form__select:hover,
.ct-form__textarea:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-form__input:focus,
.ct-form__select:focus,
.ct-form__textarea:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.ct-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Number Input */
.ct-number-input {
    display: flex;
    align-items: center;
}

.ct-number-input__btn {
    width: 48px;
    height: 48px;
    border: 1.5px solid #d1d5db;
    background: white;
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.25s ease;
}

.ct-number-input__btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
}

.ct-number-input__btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: none;
}

.ct-number-input__btn:hover {
    background: var(--color-sand-light);
    color: var(--color-terracotta);
}

.ct-number-input__field {
    width: 80px;
    height: 48px;
    text-align: center;
    border: 1.5px solid #d1d5db !important;
    border-radius: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    -moz-appearance: textfield;
    box-shadow: none !important;
}

.ct-number-input__field::-webkit-outer-spin-button,
.ct-number-input__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Destination Cards */
/* ----------------------------------------
   PREMIUM DESTINATION CARDS
   Luxury travel brand aesthetic
   ---------------------------------------- */
/* ========================================
   BLACK TOMATO STYLE - YOUR TRIP FORM
   Clean, premium, conversion-optimized
   ======================================== */

/* Trip Form Grid */
.ct-trip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.ct-trip-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ct-trip-field--full {
    grid-column: 1 / -1;
}

.ct-trip-field__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: -0.01em;
}

.ct-trip-field__note {
    font-weight: 400;
    color: var(--color-gray-400);
    font-size: 13px;
}

.ct-trip-field__row {
    display: flex;
    gap: var(--space-3);
}

/* Clean Select Inputs */
.ct-trip-select {
    flex: 1;
    padding: 14px 16px;
    padding-right: 44px;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-body);
    color: var(--color-dark);
    background: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-trip-select:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-trip-select:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.ct-trip-select--full {
    width: 100%;
}

/* Multi-Select Dropdown */
.ct-multiselect {
    position: relative;
}

.ct-multiselect__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-multiselect__trigger:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-multiselect--open .ct-multiselect__trigger {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.ct-multiselect__trigger svg {
    color: var(--color-gray-400);
    transition: transform 0.2s ease;
}

.ct-multiselect--open .ct-multiselect__trigger svg {
    transform: rotate(180deg);
}

.ct-multiselect__placeholder {
    font-size: 15px;
    color: var(--color-gray-400);
}

.ct-multiselect__selected {
    font-size: 15px;
    color: var(--color-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 30px);
}

.ct-multiselect__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}

.ct-multiselect--open .ct-multiselect__dropdown {
    display: block;
    animation: dropdownFade 0.2s ease;
}

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

.ct-multiselect__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

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

.ct-multiselect__option input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-300);
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--color-terracotta);
}

.ct-multiselect__option span {
    font-size: 14px;
    color: var(--color-dark);
}

.ct-multiselect__option--suggest {
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.ct-multiselect__option--suggest span {
    font-style: italic;
    color: var(--color-terracotta);
}

/* ========================================
   ENHANCED BUDGET SLIDER WITH TIERS
   Premium, modern design
   ======================================== */
.ct-budget-enhanced {
    margin-top: var(--space-4);
}

.ct-budget-enhanced__slider-wrapper {
    position: relative;
    padding-top: 40px; /* Space for floating pill */
    padding-bottom: var(--space-2);
}

/* Floating Value Pill */
.ct-budget-enhanced__value-pill {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-terracotta);
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(198, 93, 59, 0.35);
    transition: left 0.1s ease;
    z-index: 10;
}

.ct-budget-enhanced__value-pill::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-terracotta);
}

/* Track Container */
.ct-budget-enhanced__track {
    position: relative;
    height: 8px;
    background: var(--color-gray-100);
    border-radius: 4px;
}

/* Fill bar */
.ct-budget-enhanced__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, #e07652 100%);
    border-radius: 4px;
    transition: width 0.15s ease;
    pointer-events: none;
}

/* Custom Thumb (positioned by JavaScript) */
.ct-budget-enhanced__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 28px;
    height: 28px;
    background: white;
    border: 3px solid var(--color-terracotta);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    transition: left 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: none;
    z-index: 5;
}

.ct-budget-enhanced__track:hover .ct-budget-enhanced__thumb {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 5px 20px rgba(198, 93, 59, 0.4);
}

/* Slider Input - Hidden but functional */
.ct-budget-enhanced__input {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
}

/* Hide the native track and thumb - they're replaced by custom elements */
.ct-budget-enhanced__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: transparent;
    cursor: pointer;
}

.ct-budget-enhanced__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: grab;
}

.ct-budget-enhanced__input::-moz-range-track {
    width: 100%;
    height: 8px;
    background: transparent;
    cursor: pointer;
}

.ct-budget-enhanced__input::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: grab;
}

/* Range Labels */
.ct-budget-enhanced__range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-budget-enhanced__range-labels span {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-400);
}

/* Budget Tiers Grid - Premium Cards */
.ct-budget-tiers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.ct-budget-tier {
    background: white;
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-4);
    min-height: 160px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Subtle shine effect */
.ct-budget-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.ct-budget-tier:hover::before {
    left: 100%;
}

.ct-budget-tier:hover {
    border-color: var(--color-gray-300);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.ct-budget-tier--active {
    background: linear-gradient(145deg, #fff8f5 0%, #fff2eb 100%);
    border-color: var(--color-terracotta);
    border-width: 2px;
    box-shadow: 0 8px 35px rgba(198, 93, 59, 0.2), inset 0 0 0 1px rgba(198, 93, 59, 0.1);
    transform: translateY(-4px) scale(1.02);
}

/* Checkmark for active state */
.ct-budget-tier--active::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 12px;
    width: 22px;
    height: 22px;
    background: var(--color-terracotta);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkPop 0.3s ease;
}

@keyframes checkPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.ct-budget-tier__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ct-budget-tier__icon {
    font-size: 32px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.ct-budget-tier:hover .ct-budget-tier__icon {
    transform: scale(1.15);
}

.ct-budget-tier__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.ct-budget-tier--active .ct-budget-tier__name {
    color: var(--color-terracotta);
}

.ct-budget-tier__range {
    font-size: 12px;
    color: var(--color-gray-500);
    font-weight: 600;
    margin-top: var(--space-1);
}

.ct-budget-tier--active .ct-budget-tier__range {
    color: var(--color-terracotta);
}

.ct-budget-tier__desc {
    font-size: 12px;
    color: var(--color-gray-500);
    line-height: 1.5;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s ease;
}

.ct-budget-tier--active .ct-budget-tier__desc {
    opacity: 1;
    max-height: 60px;
    margin-top: var(--space-3);
    color: var(--color-gray-600);
}

/* Responsive Budget Tiers */
@media (max-width: 1200px) {
    .ct-budget-tiers {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-3);
    }
    
    .ct-budget-tier {
        min-height: 140px;
        padding: var(--space-5) var(--space-3);
    }
    
    .ct-budget-tier__icon {
        font-size: 28px;
    }
    
    .ct-budget-tier__name {
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    .ct-budget-tiers {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }
    
    .ct-budget-tier {
        min-height: 150px;
        padding: var(--space-5) var(--space-4);
    }
    
    .ct-budget-tier__icon {
        font-size: 30px;
    }
    
    .ct-budget-tier__name {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .ct-budget-tiers {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .ct-budget-tier {
        min-height: 130px;
        padding: var(--space-4) var(--space-3);
    }
    
    .ct-budget-tier__icon {
        font-size: 26px;
    }
    
    .ct-budget-tier__name {
        font-size: 12px;
    }
    
    .ct-budget-tier__range {
        font-size: 11px;
    }
    
    .ct-budget-tier--active::after {
        width: 18px;
        height: 18px;
        font-size: 10px;
        top: 8px;
        right: 8px;
    }
    
    .ct-budget-enhanced__value-pill {
        font-size: 14px;
        padding: 6px 14px;
    }
}

@media (max-width: 480px) {
    .ct-budget-tiers {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .ct-budget-tier {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
        text-align: left;
        min-height: auto;
        padding: var(--space-4) var(--space-5);
    }
    
    .ct-budget-tier__header {
        flex-direction: row;
        margin-bottom: 0;
        flex: 1;
        gap: var(--space-3);
    }
    
    .ct-budget-tier__icon {
        font-size: 28px;
    }
    
    .ct-budget-tier__name {
        font-size: 14px;
    }
    
    .ct-budget-tier__range {
        font-size: 12px;
        font-weight: 600;
        color: var(--color-gray-600);
        margin-left: auto;
        margin-top: 0;
    }
    
    .ct-budget-tier--active .ct-budget-tier__range {
        color: var(--color-terracotta);
    }
    
    .ct-budget-tier__desc {
        display: none;
    }
    
    .ct-budget-tier--active::after {
        top: 50%;
        transform: translateY(-50%);
        right: var(--space-4);
    }
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .ct-trip-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .ct-trip-field--full {
        grid-column: 1;
    }
    
    .ct-trip-field__row {
        flex-direction: row;
    }
    
    .ct-trip-select {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .ct-multiselect__trigger {
        padding: 12px 14px;
    }
    
    .ct-multiselect__placeholder,
    .ct-multiselect__selected {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ct-trip-field__label {
        font-size: 13px;
    }
    
}

/* Fallback Grid for smaller cards */
.ct-destination-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    perspective: 1000px;
}

.ct-destination-card {
    position: relative;
    cursor: pointer;
    opacity: 1;
    transform-style: preserve-3d;
}

/* Elegant staggered entrance animation */
.ct-destination-card:nth-child(1) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.05s forwards; }
.ct-destination-card:nth-child(2) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.1s forwards; }
.ct-destination-card:nth-child(3) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards; }
.ct-destination-card:nth-child(4) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards; }
.ct-destination-card:nth-child(5) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.25s forwards; }
.ct-destination-card:nth-child(6) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards; }
.ct-destination-card:nth-child(7) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.35s forwards; }
.ct-destination-card:nth-child(8) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.4s forwards; }
.ct-destination-card:nth-child(9) { animation: ctDestinationReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.45s forwards; }

@keyframes ctDestinationReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ct-destination-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ct-destination-card__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    min-height: 150px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
    transition: 
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        border-color 0.3s ease,
        background 0.3s ease;
    overflow: hidden;
    will-change: transform;
}

/* Elegant accent line at top */
.ct-destination-card__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--color-terracotta) 20%,
        var(--color-terracotta) 80%,
        transparent 100%);
    border-radius: 0 0 4px 4px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Subtle glow effect on hover */
.ct-destination-card__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(198, 93, 59, 0.08) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Premium hover state */
.ct-destination-card:hover .ct-destination-card__inner {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(198, 93, 59, 0.15);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.08),
        0 20px 60px rgba(198, 93, 59, 0.06);
}

.ct-destination-card:hover .ct-destination-card__inner::before {
    transform: translateX(-50%) scaleX(1);
}

.ct-destination-card:hover .ct-destination-card__inner::after {
    opacity: 1;
}

.ct-destination-card:hover .ct-destination-card__icon {
    transform: scale(1.2) translateY(-4px);
}

.ct-destination-card:hover h4 {
    color: var(--color-terracotta);
}

/* Selected/checked state - Luxury highlight */
.ct-destination-card input:checked + .ct-destination-card__inner {
    background: linear-gradient(145deg, #fffaf8 0%, #fff5f0 100%);
    border-color: var(--color-terracotta);
    border-width: 2px;
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
        0 8px 30px rgba(198, 93, 59, 0.12),
        0 16px 50px rgba(198, 93, 59, 0.08),
        inset 0 0 0 1px rgba(198, 93, 59, 0.05);
}

.ct-destination-card input:checked + .ct-destination-card__inner::before {
    transform: translateX(-50%) scaleX(1);
    width: 100%;
    border-radius: 0;
    background: var(--color-terracotta);
}

.ct-destination-card input:checked + .ct-destination-card__inner h4 {
    color: var(--color-terracotta);
}

/* Elegant checkmark indicator */
.ct-destination-card__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 26px;
    height: 26px;
    background: var(--color-terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 3px 10px rgba(198, 93, 59, 0.3);
}

.ct-destination-card__check svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 3;
}

.ct-destination-card input:checked ~ .ct-destination-card__check,
.ct-destination-card input:checked + .ct-destination-card__inner + .ct-destination-card__check {
    opacity: 1;
    transform: scale(1);
}

/* Icon container - Premium styling */
.ct-destination-card__icon {
    font-size: 2.8rem;
    margin-bottom: var(--space-3);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* Title - Refined typography */
.ct-destination-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 4px;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    transition: color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Subtitle - Elegant detail */
.ct-destination-card span {
    font-size: 11px;
    color: var(--color-gray-400);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Special "Surprise Me" card - Luxurious treatment */
.ct-destination-card--special .ct-destination-card__inner {
    background: linear-gradient(145deg, #fdfcfb 0%, #f8f6f3 100%);
    border: 2px dashed rgba(198, 93, 59, 0.25);
    border-radius: 20px;
}

.ct-destination-card--special:hover .ct-destination-card__inner {
    border-color: var(--color-terracotta);
    border-style: dashed;
    background: linear-gradient(145deg, #fffaf8 0%, #fff5f0 100%);
}

.ct-destination-card--special .ct-destination-card__icon {
    animation: ctLuxurySparkle 3s ease-in-out infinite;
}

@keyframes ctLuxurySparkle {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    }
    25% { 
        transform: scale(1.15) rotate(-8deg);
        filter: drop-shadow(0 4px 12px rgba(198, 93, 59, 0.15));
    }
    50% { 
        transform: scale(1.05) rotate(0deg);
        filter: drop-shadow(0 2px 6px rgba(198, 93, 59, 0.1));
    }
    75% { 
        transform: scale(1.15) rotate(8deg);
        filter: drop-shadow(0 4px 12px rgba(198, 93, 59, 0.15));
    }
}

/* Active/focus state for accessibility */
.ct-destination-card:focus-within .ct-destination-card__inner {
    outline: 2px solid var(--color-terracotta);
    outline-offset: 3px;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .ct-destination-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }
    
    .ct-destination-card__inner {
        min-height: 130px;
        padding: var(--space-5) var(--space-3);
    }
    
    .ct-destination-card__icon {
        font-size: 2.4rem;
    }
    
    .ct-destination-card h4 {
        font-size: 14px;
    }
}

/* Responsive - Large phones / Small tablets */
@media (max-width: 768px) {
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .ct-destination-card__inner {
        min-height: 120px;
        padding: var(--space-4) var(--space-3);
        border-radius: 16px;
    }
    
    .ct-destination-card__icon {
        font-size: 2.2rem;
        margin-bottom: var(--space-2);
    }
    
    .ct-destination-card h4 {
        font-size: 13px;
    }
    
    .ct-destination-card span {
        font-size: 10px;
    }
    
    /* Reduce animation intensity on mobile for performance */
    .ct-destination-card:hover .ct-destination-card__inner {
        transform: translateY(-4px) scale(1.01);
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .ct-destination-card__inner {
        min-height: 100px;
        padding: var(--space-3) var(--space-2);
        border-radius: 14px;
    }
    
    .ct-destination-card__icon {
        font-size: 2rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .ct-destination-card__inner {
        min-height: 110px;
        padding: var(--space-4) var(--space-3);
    }
    
    .ct-destination-card__icon {
        font-size: 1.75rem;
        margin-bottom: var(--space-2);
    }
    
    .ct-destination-card h4 {
        font-size: var(--text-sm);
    }
    
    .ct-destination-card input:checked + .ct-destination-card__inner::after {
        width: 20px;
        height: 20px;
        top: var(--space-2);
        right: var(--space-2);
        background-size: 12px;
    }
}

/* Style Cards */
.ct-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.ct-style-card {
    position: relative;
    cursor: pointer;
}

.ct-style-card input {
    position: absolute;
    opacity: 0;
}

.ct-style-card__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-sand-light);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.ct-style-card:hover .ct-style-card__inner {
    border-color: var(--color-terracotta);
}

.ct-style-card input:checked + .ct-style-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.08);
}

.ct-style-card__icon {
    font-size: 1.5rem;
}

.ct-style-card__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

/* Accommodation Cards */
.ct-accommodation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ct-accommodation-card {
    position: relative;
    cursor: pointer;
}

.ct-accommodation-card input {
    position: absolute;
    opacity: 0;
}

.ct-accommodation-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5);
    background: var(--color-sand-light);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}

.ct-accommodation-card:hover .ct-accommodation-card__inner {
    transform: scale(1.02);
    border-color: var(--color-terracotta);
}

.ct-accommodation-card input:checked + .ct-accommodation-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.08);
}

.ct-accommodation-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.ct-accommodation-card h4 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-accommodation-card p {
    font-size: 11px;
    color: var(--color-gray-500);
}

/* Interest Tags */
.ct-interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-interest-tag {
    position: relative;
    cursor: pointer;
}

.ct-interest-tag input {
    position: absolute;
    opacity: 0;
}

.ct-interest-tag span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-sand-light);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.ct-interest-tag:hover span {
    border-color: var(--color-terracotta);
}

.ct-interest-tag input:checked + span {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

.ct-interest-tag--special span {
    border-style: dashed;
    border-color: var(--color-gray-300);
}

/* Checkbox */
.ct-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    margin-bottom: var(--space-4);
}

.ct-checkbox input {
    display: none;
}

.ct-checkbox__box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ct-checkbox input:checked + .ct-checkbox__box {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-checkbox input:checked + .ct-checkbox__box::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.ct-checkbox__label {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Form Navigation */
.ct-form__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-100);
}

/* Success State */
.ct-success {
    text-align: center;
    padding: var(--space-12);
}

.ct-success__icon {
    width: 80px;
    height: 80px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.ct-success__icon svg {
    color: #22c55e;
}

.ct-success h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.ct-success p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* Spinner */
.ct-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ctSpin 0.8s linear infinite;
}

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

/* ----------------------------------------
   CT WHY SECTION - Trust & Benefits
   ---------------------------------------- */
.ct-why {
    background: white;
    padding: var(--space-16) 0;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.ct-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
}

.ct-why__item {
    text-align: center;
}

.ct-why__icon {
    width: 72px;
    height: 72px;
    background: var(--color-sand-light);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}

.ct-why__icon svg {
    color: var(--color-terracotta);
}

.ct-why__item h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.ct-why__item p {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: 1.7;
    max-width: 280px;
    margin: 0 auto;
}

/* ----------------------------------------
   CT IDEAS SECTION - Trip Inspiration
   ---------------------------------------- */
.ct-ideas {
    background: var(--color-sand-light);
    padding: var(--space-20) 0;
}

.ct-ideas__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.ct-ideas__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.ct-idea-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ct-idea-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.ct-idea-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ct-idea-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ct-idea-card:hover .ct-idea-card__image img {
    transform: scale(1.08);
}

.ct-idea-card__tag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: white;
    color: var(--color-dark);
    font-size: 11px;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-idea-card__content {
    padding: var(--space-5);
}

.ct-idea-card__content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-idea-card__content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.ct-idea-card__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
}

/* ----------------------------------------
   CT FINAL CTA SECTION
   ---------------------------------------- */
.ct-final-cta {
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-earth) 100%);
    padding: var(--space-16) 0;
}

.ct-final-cta__content {
    text-align: center;
}

.ct-final-cta h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
}

.ct-final-cta p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-8);
}

/* ----------------------------------------
   CT RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1024px) {
    .ct-hero {
        min-height: 80vh;
    }
    
    .ct-regions__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .ct-regions__map {
        position: static;
        order: 2;
    }
    
    .ct-regions__cards {
        order: 1;
    }
    
    .ct-why__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .ct-ideas__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ct-hero__content {
        padding: var(--space-6);
    }
    
    .ct-hero__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .ct-hero__actions .ct-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .ct-hero__scroll-hint {
        display: none;
    }
    
    .ct-regions {
        padding: var(--space-12) 0;
    }
    
    .ct-map {
        min-height: 300px;
    }
    
    .ct-form-section {
        padding: var(--space-12) 0;
    }
    
    .ct-form-wrapper {
        padding: var(--space-6);
        border-radius: var(--radius-xl);
    }
    
    .ct-progress__label {
        display: none;
    }
    
    .ct-progress__line {
        width: 24px;
        margin-bottom: 0;
    }
    
    .ct-form__row {
        grid-template-columns: 1fr;
    }
    
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-style-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-form__nav {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .ct-form__nav .ct-btn {
        width: 100%;
    }
    
    .ct-form__nav .ct-btn--prev {
        order: 2;
    }
    
    .ct-ideas__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ct-hero__title-line {
        font-size: 2rem;
    }
    
    .ct-hero__badge {
        font-size: 9px;
        padding: var(--space-2) var(--space-3);
    }
    
    .ct-section-title {
        font-size: 1.75rem;
    }
    
    .ct-destination-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-progress__icon {
        width: 40px;
        height: 40px;
    }
    
    .ct-progress__icon svg {
        width: 16px;
        height: 16px;
    }
    
    .ct-progress__line {
        width: 16px;
    }
    
    .ct-region-card {
        flex-direction: column;
        text-align: center;
    }
    
    .ct-region-card__icon {
        margin: 0 auto var(--space-3);
    }
}

.checkbox-card {
    position: relative;
    cursor: pointer;
}

.checkbox-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    text-align: center;
}

.checkbox-icon {
    font-size: 1.5rem;
}

.checkbox-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

.checkbox-card input:checked + .checkbox-content {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.checkbox-card:hover .checkbox-content {
    border-color: var(--color-terracotta);
}

.checkbox-card-full {
    grid-column: span 3;
}

/* Radio Grid */
.radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.radio-card {
    position: relative;
    cursor: pointer;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.radio-icon {
    font-size: 1.25rem;
}

.radio-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

.radio-card input:checked + .radio-content {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.radio-card:hover .radio-content {
    border-color: var(--color-terracotta);
}

/* Interest Tags */
.interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.interest-tag {
    position: relative;
    cursor: pointer;
}

.interest-tag input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.interest-tag span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.interest-tag input:checked + span {
    border-color: var(--color-terracotta);
    background: var(--color-terracotta);
    color: white;
}

.interest-tag:hover span {
    border-color: var(--color-terracotta);
}

.interest-tag-special span {
    background: var(--color-sand-light);
    border-style: dashed;
}

/* Inline Checkbox */
.checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--color-terracotta);
    cursor: pointer;
}

.checkbox-inline span {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Form Navigation */
.form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}

.btn-prev {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-next,
.btn-submit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Success Message */
.form-success {
    text-align: center;
    padding: var(--space-12) var(--space-8);
}

.success-icon {
    width: 80px;
    height: 80px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.success-icon svg {
    color: #22c55e;
}

.form-success h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.form-success p {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.form-success .success-note {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

/* Spinner */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Inspiration Section */
.custom-trip-inspiration {
    background: var(--color-sand-light);
    padding: var(--space-16) 0;
}

.inspiration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.inspiration-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.inspiration-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.inspiration-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.inspiration-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.inspiration-card:hover .inspiration-image img {
    transform: scale(1.08);
}

.inspiration-content {
    padding: var(--space-5);
}

.inspiration-duration {
    display: inline-block;
    background: var(--color-sand);
    color: var(--color-earth);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inspiration-content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.inspiration-content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.inspiration-link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
}

/* Trust Strip */
.custom-trip-trust {
    background: var(--color-dark);
    padding: var(--space-8) 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
}

.trust-item svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.trust-item span {
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .custom-trip-hero {
        min-height: 60vh;
    }
    
    .process-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .process-step {
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    
    .inspiration-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .custom-trip-hero-content {
        padding: var(--space-12) var(--space-4);
    }
    
    .custom-trip-process {
        padding: var(--space-8) 0;
    }
    
    .custom-trip-form-section {
        padding: var(--space-10) 0;
    }
    
    .custom-trip-form-wrapper {
        padding: var(--space-6);
        border-radius: var(--radius-xl);
    }
    
    .form-progress {
        overflow-x: auto;
        padding-bottom: var(--space-4);
        margin-bottom: var(--space-6);
    }
    
    .progress-step .step-label {
        display: none;
    }
    
    .progress-line {
        width: 24px;
        margin-bottom: 0;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .checkbox-card-full {
        grid-column: span 2;
    }
    
    .radio-grid {
        grid-template-columns: 1fr;
    }
    
    .form-nav {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .form-nav .btn {
        width: 100%;
        justify-content: center;
    }
    
    .btn-prev {
        order: 2;
    }
    
    .btn-next,
    .btn-submit {
        order: 1;
    }
    
    .inspiration-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .inspiration-card {
        display: grid;
        grid-template-columns: 120px 1fr;
    }
    
    .inspiration-image {
        height: 100%;
        min-height: 120px;
    }
    
    .inspiration-content {
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .trust-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .custom-trip-hero h1 {
        font-size: 1.75rem;
    }
    
    .custom-trip-hero .hero-subtitle {
        font-size: var(--text-base);
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-card-full {
        grid-column: span 1;
    }
    
    .checkbox-content {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--space-3);
    }
    
    .checkbox-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .process-icon {
        width: 48px;
        height: 48px;
    }
    
    .process-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .step-header h3 {
        font-size: var(--text-lg);
    }
    
    .custom-trip-form-section .form-header h2 {
        font-size: var(--text-2xl);
    }
}

/* ========================================
   CUSTOM TRIP PAGE - LUXURY REDESIGN
   Premium immersive travel experience
   BEM naming convention
   ======================================== */

/* Container */
.ct-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ----------------------------------------
   CT HERO - Full-screen video hero
   ---------------------------------------- */
.ct-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-hero__video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ct-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ct-hero__overlay {
    position: absolute;
    inset: 0;
    /* Strong bottom-to-top dark gradient for text readability */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.ct-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    padding: var(--space-8);
}

.ct-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-6);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ct-hero__badge svg {
    color: var(--color-terracotta);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.ct-hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-6);
    line-height: 1.1;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6),
                 0 6px 30px rgba(0, 0, 0, 0.4);
}

.ct-hero__title span {
    font-weight: 700;
    font-style: italic;
    color: #ffd9a8; /* Bright sand/gold for contrast */
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6),
                 0 6px 30px rgba(0, 0, 0, 0.4);
}

.ct-hero__subtitle {
    font-size: var(--text-xl);
    color: #ffffff;
    line-height: 1.7;
    margin-bottom: var(--space-10);
    font-weight: 400;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ct-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.ct-hero__scroll-hint {
    position: absolute;
    bottom: var(--space-10);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.ct-hero__scroll-arrow {
    margin-top: var(--space-2);
    animation: ctBounce 2s infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

@keyframes ctBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(8px); }
    60% { transform: translateY(4px); }
}

/* ----------------------------------------
   CT BUTTONS
   ---------------------------------------- */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.ct-btn--primary {
    background: var(--color-terracotta);
    color: white;
    border-color: var(--color-terracotta);
}

.ct-btn--primary:hover {
    background: var(--color-terracotta-dark);
    border-color: var(--color-terracotta-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(198, 93, 59, 0.4);
}

.ct-btn--glow {
    box-shadow: 0 4px 20px rgba(198, 93, 59, 0.3);
}

.ct-btn--ghost {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.ct-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.ct-btn--outline {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-gray-300);
}

.ct-btn--outline:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.ct-btn--lg {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-lg);
}

/* ----------------------------------------
   CT ANIMATIONS
   ---------------------------------------- */
.ct-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.ct-animate--fade-down {
    transform: translateY(-30px);
}

.ct-animate--fade-up {
    transform: translateY(30px);
}

.ct-animate--fade-left {
    transform: translateX(30px);
}

.ct-animate--fade-right {
    transform: translateX(-30px);
}

.ct-animate--visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ----------------------------------------
   CT SECTION HEADER
   ---------------------------------------- */
.ct-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.ct-section-header__eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-earth) 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-4);
}

.ct-section-header__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
}

.ct-section-header__desc {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* ----------------------------------------
   CT REGIONS SECTION
   ---------------------------------------- */
.ct-regions {
    padding: var(--space-20) 0;
    background: linear-gradient(180deg, #faf6f0 0%, white 100%);
}

.ct-regions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

.ct-regions__map {
    position: sticky;
    top: 120px;
}

.ct-regions__map-visual {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.ct-regions__map-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.ct-regions__hotspot {
    position: absolute;
    cursor: pointer;
}

.ct-regions__hotspot--north { top: 15%; left: 30%; }
.ct-regions__hotspot--imperial { top: 35%; left: 45%; }
.ct-regions__hotspot--coast { top: 50%; left: 15%; }
.ct-regions__hotspot--atlas { top: 55%; left: 40%; }
.ct-regions__hotspot--sahara { top: 70%; left: 65%; }

.ct-regions__hotspot-pulse {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(198, 93, 59, 0.3);
    border-radius: 50%;
    animation: ctPulse 2s infinite;
    transform: translate(-50%, -50%);
}

.ct-regions__hotspot-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-terracotta);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes ctPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.ct-regions__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ct-region-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ct-region-card:hover,
.ct-region-card--active {
    border-color: var(--color-terracotta);
    box-shadow: 0 8px 30px rgba(198, 93, 59, 0.1);
}

.ct-region-card--active {
    background: rgba(198, 93, 59, 0.03);
}

.ct-region-card__icon {
    width: 48px;
    height: 48px;
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-region-card--active .ct-region-card__icon {
    background: var(--color-terracotta);
}

.ct-region-card--active .ct-region-card__icon svg {
    color: white;
}

.ct-region-card__icon svg {
    color: var(--color-terracotta);
}

.ct-region-card__content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-region-card__content > p {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-3);
}

.ct-region-card__features {
    list-style: none;
    display: none;
}

.ct-region-card--active .ct-region-card__features {
    display: block;
}

.ct-region-card__features li {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-1);
}

/* ----------------------------------------
   CT FORM SECTION
   ---------------------------------------- */
.ct-form-section {
    padding: var(--space-20) 0;
    background: white;
}

.ct-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: #faf8f5;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.06);
}

/* Form Progress */
.ct-form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-10);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ct-form-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.ct-form-progress__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ct-form-progress__icon svg {
    color: var(--color-gray-400);
    transition: color 0.3s ease;
}

.ct-form-progress__step span {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-form-progress__step--active .ct-form-progress__icon {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-form-progress__step--active .ct-form-progress__icon svg {
    color: white;
}

.ct-form-progress__step--active span {
    color: var(--color-terracotta);
}

.ct-form-progress__step--completed .ct-form-progress__icon {
    background: var(--color-earth);
    border-color: var(--color-earth);
}

.ct-form-progress__step--completed .ct-form-progress__icon svg {
    color: white;
}

.ct-form-progress__line {
    width: 40px;
    height: 2px;
    background: var(--color-gray-200);
    margin-bottom: 28px;
    transition: background 0.3s ease;
}

.ct-form-progress__line--completed {
    background: var(--color-earth);
}

/* Form Steps */
.ct-form__step {
    display: none;
    animation: ctFadeIn 0.5s ease;
}

.ct-form__step--active {
    display: block;
}

@keyframes ctFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.ct-form__step-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.ct-form__step-header h3 {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-form__step-header p {
    color: var(--color-gray-600);
}

/* Destination Cards */
.ct-destination-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.ct-destination-card {
    cursor: pointer;
}

.ct-destination-card input {
    display: none;
}

.ct-destination-card__inner {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: white;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.ct-destination-card__inner:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.ct-destination-card input:checked + .ct-destination-card__inner {
    border-color: var(--color-terracotta);
}

.ct-destination-card__img {
    height: 120px;
    overflow: hidden;
}

.ct-destination-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ct-destination-card__inner:hover .ct-destination-card__img img {
    transform: scale(1.1);
}

.ct-destination-card__content {
    padding: var(--space-4);
    text-align: center;
}

.ct-destination-card__content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-destination-card__content span {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.ct-destination-card__check {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 28px;
    height: 28px;
    background: var(--color-terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.ct-destination-card__check svg {
    color: white;
}

.ct-destination-card input:checked + .ct-destination-card__inner .ct-destination-card__check {
    opacity: 1;
    transform: scale(1);
}

.ct-destination-card--suggest .ct-destination-card__inner {
    background: var(--color-sand-light);
    border: 2px dashed var(--color-gray-300);
}

.ct-destination-card--suggest .ct-destination-card__icon-wrap {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-destination-card--suggest .ct-destination-card__icon-wrap svg {
    color: var(--color-gray-400);
}

/* Form Inputs */
.ct-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ct-form__group {
    margin-bottom: var(--space-6);
}

.ct-form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-required {
    color: var(--color-terracotta);
}

.ct-form__input,
.ct-form__select,
.ct-form__textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: white;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ct-form__input:hover,
.ct-form__select:hover,
.ct-form__textarea:hover {
    border-color: #9ca3af !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ct-form__input:focus,
.ct-form__select:focus,
.ct-form__textarea:focus {
    outline: none;
    border-color: var(--color-terracotta) !important;
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #fffbf9;
}

.ct-form__select-wrap {
    position: relative;
}

.ct-form__select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-gray-400);
    pointer-events: none;
}

.ct-form__select {
    appearance: none;
    cursor: pointer;
}

.ct-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Number Input */
.ct-number-input {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ct-number-input__btn {
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    font-size: var(--text-xl);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ct-number-input__btn:hover {
    background: var(--color-sand-light);
    color: var(--color-terracotta);
}

.ct-number-input__field {
    flex: 1;
    text-align: center;
    border: none;
    font-size: var(--text-lg);
    font-weight: 600;
    padding: var(--space-3);
    -moz-appearance: textfield;
}

.ct-number-input__field::-webkit-outer-spin-button,
.ct-number-input__field::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Style Cards */
.ct-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.ct-style-card {
    cursor: pointer;
}

.ct-style-card input {
    display: none;
}

.ct-style-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    text-align: center;
}

.ct-style-card__inner:hover {
    border-color: var(--color-terracotta);
}

.ct-style-card input:checked + .ct-style-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.ct-style-card__emoji {
    font-size: 1.5rem;
}

.ct-style-card__text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

/* Accommodation Cards */
.ct-accommodation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-accommodation-card {
    cursor: pointer;
}

.ct-accommodation-card input {
    display: none;
}

.ct-accommodation-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    text-align: center;
}

.ct-accommodation-card__inner:hover {
    border-color: var(--color-terracotta);
    transform: scale(1.02);
}

.ct-accommodation-card input:checked + .ct-accommodation-card__inner {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.ct-accommodation-card__icon {
    font-size: 1.5rem;
}

.ct-accommodation-card__text {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

/* Interest Tags */
.ct-interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.ct-interest-tag {
    cursor: pointer;
}

.ct-interest-tag input {
    display: none;
}

.ct-interest-tag span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
    transition: all 0.3s ease;
}

.ct-interest-tag span:hover {
    border-color: var(--color-terracotta);
}

.ct-interest-tag input:checked + span {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

.ct-interest-tag--special span {
    background: var(--color-sand-light);
    border-style: dashed;
}

/* Checkbox */
.ct-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    margin-bottom: var(--space-6);
}

.ct-form__checkbox input {
    display: none;
}

.ct-form__checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ct-form__checkbox input:checked + .ct-form__checkbox-box {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.ct-form__checkbox input:checked + .ct-form__checkbox-box::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.ct-form__checkbox-text {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Form Navigation */
.ct-form__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}

/* Form Success */
.ct-form__success {
    display: none;
    text-align: center;
    padding: var(--space-12);
}

.ct-form__success-icon {
    width: 80px;
    height: 80px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.ct-form__success-icon svg {
    color: #22c55e;
}

.ct-form__success h3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
}

.ct-form__success p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* Spinner */
.ct-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ctSpin 0.8s linear infinite;
}

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

/* ========================================
   PREMIUM BUDGET SELECTION
   ======================================== */
.ct-budget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ct-budget-card {
    position: relative;
    cursor: pointer;
}

.ct-budget-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-budget-card__inner {
    padding: var(--space-5);
    background: white;
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.ct-budget-card__inner:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(198, 93, 59, 0.1);
}

.ct-budget-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.ct-budget-card__range {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-1);
}

.ct-budget-card__label {
    font-size: 12px;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-budget-card input:checked + .ct-budget-card__inner {
    background: linear-gradient(145deg, #fffaf8 0%, #fff5f0 100%);
    border-color: var(--color-terracotta);
    box-shadow: 0 8px 30px rgba(198, 93, 59, 0.15);
}

.ct-budget-card input:checked + .ct-budget-card__inner .ct-budget-card__range {
    color: var(--color-terracotta);
}

/* ========================================
   PREMIUM ACTIVITY TAGS
   ======================================== */
.ct-activity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.ct-activity-tag {
    position: relative;
    cursor: pointer;
}

.ct-activity-tag input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-activity-tag__inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all 0.3s ease;
}

.ct-activity-tag__inner:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.ct-activity-tag__icon {
    font-size: 18px;
}

.ct-activity-tag input:checked + .ct-activity-tag__inner {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

/* ========================================
   SPECIAL REQUESTS TEXTAREA
   ======================================== */
.ct-special-requests {
    margin-bottom: var(--space-6);
}

.ct-special-requests__textarea {
    width: 100%;
    min-height: 140px;
    padding: var(--space-4);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    font-size: 15px;
    font-family: var(--font-body);
    resize: vertical;
    transition: all 0.3s ease;
}

.ct-special-requests__textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 4px rgba(198, 93, 59, 0.1);
}

.ct-special-requests__textarea::placeholder {
    color: var(--color-gray-400);
}

.ct-special-requests__hint {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ct-special-requests__hint svg {
    color: var(--color-terracotta);
}

/* ========================================
   WHATSAPP INTEGRATION
   ======================================== */
.ct-whatsapp-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.ct-whatsapp-option:hover {
    border-color: #22c55e;
}

.ct-whatsapp-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-whatsapp-option__icon {
    width: 48px;
    height: 48px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-whatsapp-option__icon svg {
    color: white;
    width: 24px;
    height: 24px;
}

.ct-whatsapp-option__content {
    flex: 1;
}

.ct-whatsapp-option__title {
    font-size: 15px;
    font-weight: 700;
    color: #166534;
    margin-bottom: var(--space-1);
}

.ct-whatsapp-option__desc {
    font-size: 13px;
    color: #14532d;
    opacity: 0.8;
}

.ct-whatsapp-option__check {
    width: 24px;
    height: 24px;
    border: 2px solid #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ct-whatsapp-option__check svg {
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ct-whatsapp-option input:checked ~ .ct-whatsapp-option__check {
    background: #22c55e;
}

.ct-whatsapp-option input:checked ~ .ct-whatsapp-option__check svg {
    opacity: 1;
}

/* Phone Input with Country Code */
.ct-phone-input {
    display: flex;
    gap: var(--space-2);
}

.ct-phone-input__country {
    width: 120px;
    flex-shrink: 0;
}

.ct-phone-input__number {
    flex: 1;
}

/* Quick WhatsApp CTA */
.ct-whatsapp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: #25D366;
    color: white;
    border-radius: var(--radius-xl);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: var(--space-4);
}

.ct-whatsapp-cta:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}

.ct-whatsapp-cta svg {
    width: 24px;
    height: 24px;
}

/* Responsive Budget */
@media (max-width: 900px) {
    .ct-budget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ct-budget-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-budget-card__inner {
        padding: var(--space-4);
    }
    
    .ct-activity-grid {
        gap: var(--space-2);
    }
    
    .ct-activity-tag__inner {
        padding: var(--space-2) var(--space-3);
        font-size: 13px;
    }
}

/* ----------------------------------------
   CT WHY SECTION
   ---------------------------------------- */
.ct-why {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, white 0%, #faf6f0 100%);
}

.ct-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.ct-why__card {
    text-align: center;
    padding: var(--space-8);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
}

.ct-why__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.08);
}

.ct-why__icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-earth) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}

.ct-why__icon svg {
    color: white;
}

.ct-why__card h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.ct-why__card p {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* ----------------------------------------
   CT INSPIRATION SECTION
   ---------------------------------------- */
.ct-inspiration {
    padding: var(--space-20) 0;
    background: var(--color-sand-light);
}

.ct-inspiration__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.ct-inspiration-card {
    background: white;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
}

.ct-inspiration-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.ct-inspiration-card__image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.ct-inspiration-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ct-inspiration-card:hover .ct-inspiration-card__image img {
    transform: scale(1.1);
}

.ct-inspiration-card__tag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: white;
    color: var(--color-earth);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ct-inspiration-card__content {
    padding: var(--space-5);
}

.ct-inspiration-card__content h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ct-inspiration-card__content p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.ct-inspiration-card__link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
}

/* ----------------------------------------
   CT FINAL CTA
   ---------------------------------------- */
.ct-final-cta {
    padding: var(--space-20) 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, #2d2d2d 100%);
    text-align: center;
}

.ct-final-cta__content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: white;
    margin-bottom: var(--space-4);
    font-family: var(--font-heading);
}

.ct-final-cta__content p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-8);
}

/* ----------------------------------------
   CT RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1024px) {
    .ct-regions__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .ct-regions__map {
        position: static;
    }
    
    .ct-destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-style-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-accommodation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ct-why__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .ct-inspiration__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ct-hero {
        min-height: 90vh;
    }
    
    .ct-hero__content {
        padding: var(--space-6);
    }
    
    .ct-hero__scroll-hint {
        display: none;
    }
    
    .ct-form-wrapper {
        padding: var(--space-6);
    }
    
    .ct-form-progress__step span {
        display: none;
    }
    
    .ct-form-progress__line {
        width: 24px;
        margin-bottom: 0;
    }
    
    .ct-form__row {
        grid-template-columns: 1fr;
    }
    
    .ct-destination-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
    
    .ct-destination-card__img {
        height: 80px;
    }
    
    .ct-style-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .ct-form__nav {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .ct-form__nav .ct-btn {
        width: 100%;
    }
    
    .ct-form__nav .ct-btn--prev {
        order: 2;
    }
    
    .ct-form__nav .ct-btn--next,
    .ct-form__nav .ct-btn--submit {
        order: 1;
    }
    
    .ct-inspiration__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ct-container {
        padding: 0 var(--space-4);
    }
    
    .ct-hero__title {
        font-size: 2rem;
    }
    
    .ct-hero__subtitle {
        font-size: var(--text-base);
    }
    
    .ct-hero__badge {
        font-size: 10px;
        padding: var(--space-2) var(--space-3);
    }
    
    .ct-section-header {
        margin-bottom: var(--space-8);
    }
    
    .ct-section-header__title {
        font-size: 1.75rem;
    }
    
    .ct-regions {
        padding: var(--space-12) 0;
    }
    
    .ct-destination-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-destination-card__img {
        height: 100px;
    }
    
    .ct-accommodation-grid {
        grid-template-columns: 1fr;
    }
    
    .ct-form-progress {
        gap: var(--space-1);
    }
    
    .ct-form-progress__icon {
        width: 40px;
        height: 40px;
    }
    
    .ct-form-progress__icon svg {
        width: 16px;
        height: 16px;
    }
    
    .ct-form-progress__line {
        width: 16px;
    }
}

/* ========================================
   MOROCCO LEAFLET MAP COMPONENT
   Real interactive map with OpenStreetMap
   Fully responsive layout
   ======================================== */

.morocco-leaflet-map {
    position: relative;
    width: 100%;
}

.morocco-leaflet-map__wrapper {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.morocco-leaflet-map__container {
    position: relative;
    flex: 1;
}

.morocco-leaflet-map__map {
    width: 100%;
    height: 320px; /* Mobile default */
    z-index: 1;
}

/* Desktop Info Panel - overlay on map bottom-left */
.morocco-leaflet-map__info--desktop {
    display: none; /* Hidden on mobile by default */
}

/* Mobile Info Panel - below map as separate card */
.morocco-leaflet-map__info--mobile {
    display: block; /* Shown on mobile by default */
    background: white;
    padding: var(--space-4);
    border-top: 1px solid var(--color-gray-100);
}

/* ----------------------------------------
   TABLET STYLES (768px - 1024px)
   ---------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .morocco-leaflet-map__map {
        height: 380px;
    }
    
    .morocco-leaflet-map__info--desktop {
        display: none;
    }
    
    .morocco-leaflet-map__info--mobile {
        display: block;
        padding: var(--space-5);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__distances {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__distance-segment {
        flex: 1 1 calc(50% - var(--space-3));
        min-width: 180px;
    }
}

/* ----------------------------------------
   DESKTOP STYLES (1025px+)
   ---------------------------------------- */
@media (min-width: 1025px) {
    .morocco-leaflet-map__map {
        height: 480px;
    }
    
    /* Show desktop panel overlay */
    .morocco-leaflet-map__info--desktop {
        display: block;
        position: absolute;
        bottom: var(--space-5);
        left: var(--space-5);
        background: white;
        padding: var(--space-4);
        border-radius: var(--radius-xl);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        width: 280px;
        max-height: 220px;
        overflow-y: auto;
    }
    
    /* Hide mobile panel */
    .morocco-leaflet-map__info--mobile {
        display: none !important;
    }
}

/* ----------------------------------------
   LARGE DESKTOP STYLES (1280px+)
   ---------------------------------------- */
@media (min-width: 1280px) {
    .morocco-leaflet-map__map {
        height: 520px;
    }
    
    .morocco-leaflet-map__info--desktop {
        width: 300px;
        max-height: 240px;
        padding: var(--space-5);
        bottom: var(--space-6);
        left: var(--space-6);
    }
}

/* ----------------------------------------
   SMALL MOBILE STYLES (480px-)
   ---------------------------------------- */
@media (max-width: 480px) {
    .morocco-leaflet-map__map {
        height: 280px;
    }
    
    .morocco-leaflet-map__info--mobile {
        padding: var(--space-3);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__info-title {
        font-size: 14px;
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__info-stats {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .morocco-leaflet-map__info--mobile .morocco-leaflet-map__stat {
        font-size: 11px;
    }
}

/* Leaflet container overrides */
.morocco-leaflet-map__map .leaflet-container {
    font-family: var(--font-body);
    border-radius: var(--radius-2xl);
}

.morocco-leaflet-map__map .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
    color: var(--color-dark) !important;
    background: white !important;
    border-bottom: 1px solid var(--color-gray-100) !important;
    transition: all 0.2s ease !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a:hover {
    background: var(--color-sand-light) !important;
    color: var(--color-terracotta) !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.morocco-leaflet-map__map .leaflet-control-zoom a:last-child {
    border-bottom: none !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* Custom Map Markers */
.morocco-map-marker {
    background: transparent !important;
    border: none !important;
}

.morocco-map-marker__inner {
    position: relative;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.morocco-map-marker__dot {
    width: 12px;
    height: 12px;
    background: var(--color-terracotta);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(198, 93, 59, 0.4);
    z-index: 2;
    transition: transform 0.3s ease;
}

.morocco-map-marker:hover .morocco-map-marker__dot {
    transform: scale(1.3);
}

.morocco-map-marker__pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--color-terracotta);
    border-radius: 50%;
    opacity: 0.3;
    animation: markerPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes markerPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.morocco-map-marker__label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9),
                 0 0 6px rgba(255, 255, 255, 1),
                 0 0 10px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Smaller labels on tablet/mobile */
@media (max-width: 768px) {
    .morocco-map-marker__label {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .morocco-map-marker__dot {
        width: 10px;
        height: 10px;
    }
    
    .morocco-map-marker__pulse {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .morocco-map-marker__label {
        font-size: 8px;
        padding: 1px 3px;
    }
    
    .morocco-map-marker__dot {
        width: 8px;
        height: 8px;
    }
    
    .morocco-map-marker__pulse {
        width: 16px;
        height: 16px;
    }
}

.morocco-map-marker--start .morocco-map-marker__dot {
    background: var(--color-terracotta);
    width: 16px;
    height: 16px;
}

.morocco-map-marker--end .morocco-map-marker__dot {
    background: var(--color-dark);
}

/* Map Legend */
.morocco-leaflet-map__legend {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

@media (min-width: 1025px) {
    .morocco-leaflet-map__legend {
        top: var(--space-4);
        right: var(--space-4);
        padding: var(--space-3);
        gap: var(--space-2);
    }
}

/* Hide legend on very small screens */
@media (max-width: 400px) {
    .morocco-leaflet-map__legend {
        display: none;
    }
}

.morocco-leaflet-map__legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 10px;
    color: var(--color-gray-600);
}

@media (min-width: 1025px) {
    .morocco-leaflet-map__legend-item {
        font-size: 11px;
    }
}

.morocco-leaflet-map__legend-dot {
    width: 10px;
    height: 10px;
    background: var(--color-terracotta);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.morocco-leaflet-map__legend-line {
    width: 24px;
    height: 2px;
    background: var(--color-terracotta);
    border-radius: 1px;
    position: relative;
}

.morocco-leaflet-map__legend-line::before,
.morocco-leaflet-map__legend-line::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 2px;
    background: var(--color-terracotta);
    border-radius: 1px;
}

.morocco-leaflet-map__legend-line::before {
    left: 6px;
    top: 0;
}

.morocco-leaflet-map__legend-line::after {
    left: 14px;
    top: 0;
}

/* Map Info Panel - Shared Styles */
.morocco-leaflet-map__info-header {
    margin-bottom: var(--space-3);
}

.morocco-leaflet-map__info-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: var(--space-1);
}

.morocco-leaflet-map__info-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    font-family: var(--font-heading);
}

.morocco-leaflet-map__info-stats {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}

.morocco-leaflet-map__stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--color-gray-600);
}

.morocco-leaflet-map__stat svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.morocco-leaflet-map__stat svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

/* Distance Segments */
.morocco-leaflet-map__distances {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 120px;
    overflow-y: auto;
}

.morocco-leaflet-map__distance-segment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: var(--space-1) 0;
}

.morocco-leaflet-map__distance-cities {
    color: var(--color-gray-600);
}

.morocco-leaflet-map__distance-km {
    font-weight: 600;
    color: var(--color-dark);
    background: var(--color-sand-light);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* Leaflet Popup Styling */
.morocco-leaflet-map__map .leaflet-popup-content-wrapper {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.morocco-leaflet-map__map .leaflet-popup-content {
    margin: var(--space-3) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.morocco-leaflet-map__map .leaflet-popup-content strong {
    color: var(--color-dark);
    font-weight: 600;
}

.morocco-leaflet-map__map .leaflet-popup-content small {
    color: var(--color-gray-500);
}

.morocco-leaflet-map__map .leaflet-popup-tip {
    box-shadow: none !important;
}

/* Tablet: Show mobile panel, hide desktop panel */
@media (max-width: 768px) {
    .morocco-leaflet-map__map {
        height: 320px;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    
    .morocco-leaflet-map__container {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    
    /* Hide desktop info panel on tablet/mobile */
    .morocco-leaflet-map__info--desktop {
        display: none !important;
    }
    
    /* Show mobile info panel below map */
    .morocco-leaflet-map__info--mobile {
        display: block;
        background: white;
        padding: var(--space-4);
        border-top: 1px solid var(--color-gray-100);
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }
    
    .morocco-leaflet-map__info-title {
        font-size: 15px;
    }
    
    .morocco-leaflet-map__info-stats {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
    .morocco-leaflet-map__distances {
        max-height: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        margin-top: var(--space-3);
    }
    
    .morocco-leaflet-map__distance-segment {
        background: var(--color-sand-light);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .morocco-leaflet-map__legend {
        top: var(--space-2);
        right: var(--space-2);
        padding: var(--space-2);
        font-size: 10px;
    }
    
    .morocco-leaflet-map__legend-item {
        font-size: 10px;
    }
}

/* Mobile: Further adjustments */
@media (max-width: 480px) {
    .morocco-leaflet-map__map {
        height: 260px;
    }
    
    .morocco-leaflet-map__legend {
        display: none;
    }
    
    .morocco-leaflet-map__info-header {
        margin-bottom: var(--space-2);
    }
    
    .morocco-leaflet-map__info-stats {
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-2);
    }
    
    .morocco-leaflet-map__distances {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
    
    .morocco-leaflet-map__distance-segment {
        padding: var(--space-2);
    }
}

/* ========================================
   MOROCCO INTERACTIVE MAP COMPONENT (SVG)
   Premium map inspired by Abercrombie & Kent
   ======================================== */

.morocco-map {
    position: relative;
    width: 100%;
    max-width: 450px;
}

.morocco-map__container {
    position: relative;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--space-4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.morocco-map__svg {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

/* Country outline */
.morocco-map__outline {
    transition: all 0.4s ease;
}

.morocco-map__country-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    fill: #b8a88a;
    text-anchor: middle;
}

/* Region areas - clickable zones */
.morocco-map__region {
    cursor: pointer;
    transition: all 0.3s ease;
}

.morocco-map__region-area {
    transition: all 0.4s ease;
}

.morocco-map__region:hover .morocco-map__region-area,
.morocco-map__region--active .morocco-map__region-area {
    fill: rgba(198, 93, 59, 0.08);
    stroke: var(--color-terracotta);
    stroke-dasharray: 4 2;
}

/* City dots */
.morocco-map__city {
    opacity: 0.4;
    transition: all 0.4s ease;
}

.morocco-map__city-dot {
    fill: var(--color-terracotta);
    transition: all 0.3s ease;
}

.morocco-map__city-pulse {
    fill: url(#pulseGradient);
    opacity: 0;
    transition: all 0.3s ease;
}

.morocco-map__city-label {
    font-size: 10px;
    font-weight: 600;
    fill: var(--color-dark);
    text-anchor: middle;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.morocco-map__city-label--highlight {
    font-size: 11px;
    font-weight: 700;
}

.morocco-map__city-sublabel {
    font-size: 8px;
    font-weight: 500;
    fill: var(--color-gray-500);
    text-anchor: middle;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Route lines */
.morocco-map__route {
    opacity: 0;
    stroke-dashoffset: 100;
    transition: all 0.5s ease;
}

/* Route arrow animation */
.morocco-map__route-arrow {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Mountain and dune indicators */
.morocco-map__mountains {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.morocco-map__dunes ellipse {
    transition: all 0.3s ease;
}

/* ----------------------------------------
   ACTIVE STATE - When region is hovered/selected
   ---------------------------------------- */
.morocco-map__region--active .morocco-map__city {
    opacity: 1;
}

.morocco-map__region--active .morocco-map__city-dot {
    filter: drop-shadow(0 2px 4px rgba(198, 93, 59, 0.4));
}

.morocco-map__region--active .morocco-map__city-pulse {
    opacity: 1;
    animation: mapPulse 2s ease-in-out infinite;
}

.morocco-map__region--active .morocco-map__city-label,
.morocco-map__region--active .morocco-map__city-sublabel {
    opacity: 1;
}

.morocco-map__region--active .morocco-map__route {
    opacity: 1;
    stroke-dashoffset: 0;
    animation: mapRouteFlow 2s linear infinite;
}

.morocco-map__region--active .morocco-map__mountains,
.morocco-map__region--active .morocco-map__dunes ellipse {
    opacity: 0.8;
}

/* Dim other regions when one is active */
.morocco-map--has-active .morocco-map__region:not(.morocco-map__region--active) {
    opacity: 0.3;
}

/* ----------------------------------------
   ANIMATIONS
   ---------------------------------------- */
@keyframes mapPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes mapRouteFlow {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes mapArrowMove {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

/* ----------------------------------------
   MAP CONTROLS
   ---------------------------------------- */
.morocco-map__controls {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 10;
}

.morocco-map__control {
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-gray-600);
}

.morocco-map__control:hover {
    background: var(--color-sand-light);
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

/* ----------------------------------------
   MAP INDICATOR
   ---------------------------------------- */
.morocco-map__indicator {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.morocco-map__indicator-dot {
    width: 8px;
    height: 8px;
    background: var(--color-terracotta);
    border-radius: 50%;
    animation: mapPulse 2s ease-in-out infinite;
}

.morocco-map__indicator-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-dark);
    white-space: nowrap;
}

/* ----------------------------------------
   RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1024px) {
    .morocco-map {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .morocco-map {
        max-width: 100%;
    }
    
    .morocco-map__container {
        padding: var(--space-3);
    }
    
    .morocco-map__controls {
        display: none;
    }
    
    .morocco-map__city-label {
        font-size: 9px;
    }
    
    .morocco-map__indicator {
        padding: var(--space-2) var(--space-3);
    }
    
    .morocco-map__indicator-text {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .morocco-map__container {
        padding: var(--space-2);
        border-radius: var(--radius-xl);
    }
    
    .morocco-map__country-label {
        font-size: 12px;
        letter-spacing: 3px;
    }
    
    .morocco-map__indicator {
        bottom: var(--space-2);
        padding: var(--space-1) var(--space-3);
    }
}

/* ========================================
   PREMIUM DESTINATIONS ARCHIVE PAGE
   /destinations/ - Video Hero, Top 12, Regions
   ======================================== */

/* ----------------------------------------
   VIDEO HERO SECTION
   ---------------------------------------- */
.dest-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-hero__video-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden; /* Keep video clipped */
}

.dest-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dest-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 1;
}

/* ===== AUTOMATIC IMAGE SLIDESHOW ===== */
.dest-hero__slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.dest-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.8s ease-in-out, transform 2.5s ease-out;
    will-change: opacity, transform;
}

/* First slide shows immediately on page load */
.dest-hero__slide:first-child {
    opacity: 1;
    transform: scale(1);
}

.dest-hero__slide--active {
    opacity: 1;
    transform: scale(1);
    animation: kenBurnsZoom 2.5s ease-out forwards;
}

@keyframes kenBurnsZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

.dest-hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: var(--space-16) 0;
    padding-bottom: var(--space-20); /* Extra space for dropdown */
    text-align: center;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-hero__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: white;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.dest-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 500;
    color: white;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.dest-hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-8);
}

/* ----------------------------------------
   SEARCH BOX - Glass Morphism
   ---------------------------------------- */
.dest-search {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1000;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-search__form {
    display: flex;
    flex-direction: row; /* Horizontal on desktop */
    flex-wrap: nowrap; /* Keep all on one line on desktop */
    align-items: flex-end;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1001;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-search__field {
    flex: 1;
    position: relative;
    z-index: 1;
}

.dest-search__field--destination {
    flex: 2;
    z-index: 1002;
    position: relative;
    overflow: visible; /* Allow dropdown to overflow */
}

.dest-search__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.dest-search__label svg {
    color: var(--color-terracotta);
}

.dest-search__input,
.dest-search__select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    padding-right: 40px; /* Space for icon */
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: white;
    transition: all var(--transition-fast);
}

/* Add dropdown arrow to destination input */
.dest-search__field--destination::after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-gray-400);
    border-bottom: 2px solid var(--color-gray-400);
    transform: rotate(45deg);
    pointer-events: none;
    transition: all var(--transition-fast);
}

.dest-search__field--destination:focus-within::after {
    border-color: var(--color-terracotta);
    transform: rotate(-135deg);
}

.dest-search__input:focus,
.dest-search__select:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

.dest-search__select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.dest-search__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-terracotta);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    align-self: flex-end;
}

.dest-search__btn:hover {
    background: var(--color-terracotta-dark);
    transform: translateY(-2px);
}

/* Search Suggestions Dropdown */
.dest-search__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 300px; /* ~5-6 items visible on desktop */
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 2147483647; /* Maximum z-index */
    text-align: left;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
}

.dest-search__suggestions.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Custom scrollbar for suggestions */
.dest-search__suggestions::-webkit-scrollbar {
    width: 6px;
}

.dest-search__suggestions::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
    margin: 6px 0;
}

.dest-search__suggestions::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;
}

.dest-search__suggestions::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.dest-search__suggestion {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    background-color: #ffffff !important;
    text-align: left !important;
    box-sizing: border-box;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.dest-search__suggestion:last-child {
    border-bottom: none;
}

.dest-search__suggestion:hover,
.dest-search__suggestion--active {
    background-color: #faf8f5 !important;
    border-left-color: #C65D3B;
}

.dest-search__suggestion-name {
    display: block !important;
    width: 100% !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    line-height: 1.3 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.dest-search__suggestion-name mark {
    background: rgba(198, 93, 59, 0.2) !important;
    color: #a84b2e !important;
    padding: 0 3px !important;
    border-radius: 2px;
    font-weight: 600 !important;
}

.dest-search__suggestion-tagline {
    display: block !important;
    width: 100% !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #888888 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.dest-search__suggestion:hover .dest-search__suggestion-name,
.dest-search__suggestion--active .dest-search__suggestion-name {
    color: #C65D3B !important;
}

.dest-search__suggestion:hover .dest-search__suggestion-tagline,
.dest-search__suggestion--active .dest-search__suggestion-tagline {
    color: #666666 !important;
}

.dest-search__no-results {
    padding: 20px 16px;
    text-align: center;
    color: #888888;
    font-style: italic;
    font-size: 14px;
}

/* Responsive dropdown styles */
@media (max-width: 768px) {
    .dest-search__suggestions {
        max-height: 200px; /* ~3-4 items on tablet */
        border-radius: 10px;
    }
    
    .dest-search__suggestion {
        padding: 10px 12px !important;
    }
    
    .dest-search__suggestion-name {
        font-size: 14px !important;
    }
    
    .dest-search__suggestion-tagline {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .dest-search__suggestions {
        max-height: 180px; /* Show ~3 items on mobile */
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 8px;
    }
    
    .dest-search__suggestion {
        padding: 8px 12px !important;
    }
    
    .dest-search__suggestion-name {
        font-size: 13px !important;
    }
    
    .dest-search__suggestion-tagline {
        font-size: 10px !important;
        margin-top: 1px;
    }
}

/* Quick Filter Chips */
.dest-search__chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    flex-wrap: wrap;
    position: relative;
    z-index: 1; /* Much lower than the dropdown */
}

.dest-search__chips-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Hide swipe hint on desktop */
.dest-search__swipe-hint {
    display: none;
}

/* Ensure sections below hero don't overlap dropdown */
.dest-top,
.dest-filter,
.dest-regions,
.dest-cta {
    position: relative;
    z-index: 1;
}

.dest-search__chips-label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
}

.dest-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: white;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Touch/hover feedback for chips */
.dest-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dest-chip:active {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Hide duplicate elements on desktop - only show on mobile for marquee */
.dest-chip[aria-hidden="true"],
.dest-filter__pill[aria-hidden="true"] {
    display: none;
}

@media (max-width: 768px) {
    .dest-chip[aria-hidden="true"],
    .dest-filter__pill[aria-hidden="true"] {
        display: inline-flex;
    }
}

/* Keyframe animations for mobile chips */
@keyframes chips-scroll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-15px); }
}

@keyframes chip-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 107, 72, 0); }
    50% { box-shadow: 0 0 15px 5px rgba(196, 107, 72, 0.4); }
}

@keyframes hint-fade {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-search__chips-inner {
        animation: none;
    }
    
    .dest-search__chips .dest-chip:first-of-type {
        animation: none;
    }
    
    .dest-search__swipe-hint {
        animation: none;
        opacity: 1;
    }
    
    .dest-chip {
        transition: none;
    }
    
    /* Filter pills reduced motion */
    .dest-filter__pill {
        transition: none;
    }
}

.dest-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* ----------------------------------------
   TOP DESTINATIONS SECTION
   ---------------------------------------- */
.dest-top {
    padding: var(--space-20) 0;
    background: var(--color-sand-light);
}

.dest-top__grid {
    display: grid;
    gap: 16px;
}

/* First 6 - Equal Grid (All Same Size) */
.dest-top__grid--hero {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
}

.dest-top__grid--hero .dest-card:first-child {
    grid-column: span 1;
    grid-row: span 1;
}

.dest-top__grid--hero .dest-card:first-child .dest-card__image {
    min-height: auto;
}

/* Next 6 - Secondary Grid */
.dest-top__grid--secondary {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 16px;
}

/* ----------------------------------------
   DESTINATION CARD STYLES - PREMIUM AIRBNB STYLE
   Clean, minimal, modern travel cards
   ---------------------------------------- */
.dest-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: white;
    opacity: 0;
    transform: translateY(30px);
    animation: destCardFadeUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease;
}

@keyframes destCardFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation delays for cards */
.dest-top__grid .dest-card:nth-child(1) { animation-delay: 0.1s; }
.dest-top__grid .dest-card:nth-child(2) { animation-delay: 0.15s; }
.dest-top__grid .dest-card:nth-child(3) { animation-delay: 0.2s; }
.dest-top__grid .dest-card:nth-child(4) { animation-delay: 0.25s; }
.dest-top__grid .dest-card:nth-child(5) { animation-delay: 0.3s; }
.dest-top__grid .dest-card:nth-child(6) { animation-delay: 0.35s; }

.dest-region__grid .dest-card:nth-child(1) { animation-delay: 0.05s; }
.dest-region__grid .dest-card:nth-child(2) { animation-delay: 0.1s; }
.dest-region__grid .dest-card:nth-child(3) { animation-delay: 0.15s; }
.dest-region__grid .dest-card:nth-child(4) { animation-delay: 0.2s; }
.dest-region__grid .dest-card:nth-child(5) { animation-delay: 0.25s; }
.dest-region__grid .dest-card:nth-child(6) { animation-delay: 0.3s; }
.dest-region__grid .dest-card:nth-child(7) { animation-delay: 0.35s; }
.dest-region__grid .dest-card:nth-child(8) { animation-delay: 0.4s; }
.dest-region__grid .dest-card:nth-child(9) { animation-delay: 0.45s; }
.dest-region__grid .dest-card:nth-child(10) { animation-delay: 0.5s; }

/* Premium hover effects */
.dest-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.dest-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.dest-card__image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.dest-card--large .dest-card__image {
    aspect-ratio: 4 / 5;
    height: auto;
}

.dest-card--compact .dest-card__image {
    aspect-ratio: 4 / 5;
}

.dest-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dest-card:hover .dest-card__image img {
    transform: scale(1.08);
}

/* ----------------------------------------
   DESTINATION CARD SLIDESHOW
   ---------------------------------------- */
.dest-card__slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

.dest-card__slideshow .dest-card__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.dest-card__slideshow .dest-card__slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* First slide should be visible by default as fallback */
.dest-card__slideshow .dest-card__slide:first-child {
    position: relative;
}

/* Keep overlay above all slides */
.dest-card__slideshow .dest-card__overlay {
    z-index: 3;
}

/* Pause indicator (subtle) */
.dest-card__slideshow.is-paused::before {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    z-index: 10;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Hover effect still works on slides */
.dest-card:hover .dest-card__slideshow .dest-card__slide {
    transform: scale(1.08);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-card__slideshow .dest-card__slide {
        transition: none;
    }
    .dest-card:hover .dest-card__slideshow .dest-card__slide {
        transform: none;
    }
}

/* Soft bottom gradient overlay */
.dest-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        transparent 100%
    );
    transition: opacity 0.3s ease;
    z-index: 2;
}

.dest-card:hover .dest-card__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* Hover Info - Description that appears on hover */
.dest-card__hover-info {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: var(--space-6);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dest-card__description {
    color: white;
    font-size: var(--text-sm);
    line-height: 1.6;
    text-align: center;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dest-card:hover .dest-card__hover-info {
    opacity: 1;
}

/* Arrow icon */
.dest-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: white;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.dest-card__arrow svg {
    width: 18px;
    height: 18px;
}

.dest-card:hover .dest-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

.dest-card__arrow:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Card content - clean typography */
.dest-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.dest-card:hover .dest-card__content {
    transform: none;
}

/* Tagline - small uppercase (hidden by default now) */
.dest-card__tagline {
    display: none;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Title - clean and bold */
.dest-card__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    color: #ffffff;
}

.dest-card--large .dest-card__title {
    font-size: 28px;
}

.dest-card--compact .dest-card__title {
    font-size: 18px;
}

.dest-card__cta {
    display: none; /* Hidden - replaced by arrow icon */
}

/* Compact Card Variant (for regions) */
.dest-card--compact .dest-card__image {
    aspect-ratio: 3 / 2;
}

.dest-card--compact .dest-card__content {
    padding: var(--space-4);
}

.dest-card--compact .dest-card__title {
    font-size: var(--text-xl);
}

.dest-card--compact .dest-card__tagline {
    font-size: var(--text-xs);
}

/* ----------------------------------------
   STICKY FILTER BAR
   ---------------------------------------- */
.dest-filter {
    background: white;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
    z-index: var(--z-sticky);
}

.dest-filter.is-sticky {
    position: fixed;
    top: 80px; /* Account for header */
    left: 0;
    right: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dest-filter__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 0 var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.dest-filter__inner::-webkit-scrollbar {
    display: none;
}

.dest-filter__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.dest-filter__pill:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.15);
}

.dest-filter__pill--active {
    transform: scale(1.05);
}

.dest-filter__pill--active {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: white;
}

.dest-filter__pill--active:hover {
    background: var(--color-terracotta-dark);
    border-color: var(--color-terracotta-dark);
    color: white;
}

.dest-filter__pill svg {
    width: 16px;
    height: 16px;
}

/* Touch feedback for filter pills */
.dest-filter__pill {
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.dest-filter__pill:active {
    transform: scale(1.02);
}

/* ----------------------------------------
   REGIONAL SECTIONS
   ---------------------------------------- */
.dest-regions {
    background: white;
}

.dest-region {
    padding: var(--space-16) 0;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dest-region.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dest-region:nth-child(even) {
    background: var(--color-sand-light);
}

.dest-region__header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    flex-wrap: wrap;
}

.dest-region__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sand);
    border-radius: var(--radius-xl);
    color: var(--color-terracotta);
}

.dest-region__text {
    flex: 1;
    min-width: 300px;
}

.dest-region__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.dest-region__description {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 600px;
}

.dest-region__count {
    padding: var(--space-2) var(--space-4);
    background: var(--color-sand);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-earth);
}

.dest-region__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dest-region__divider {
    display: flex;
    justify-content: center;
    padding-top: var(--space-12);
    color: var(--color-gray-300);
}

/* ----------------------------------------
   CTA SECTION
   ---------------------------------------- */
.dest-cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: var(--space-20) 0;
    text-align: center;
    clear: both;
    box-sizing: border-box;
}

.dest-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    z-index: -1;
}

.dest-cta .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.dest-cta__content {
    max-width: 700px;
    margin: 0 auto;
}

.dest-cta__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 500;
    color: white;
    margin-bottom: var(--space-4);
}

.dest-cta__text {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-8);
}

.dest-cta__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-white {
    background: white;
    color: var(--color-terracotta) !important;
}

.btn-white:hover {
    background: var(--color-sand-light);
}

.btn-outline-white {
    background: transparent;
    border: 2px solid white;
    color: white !important;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------
   SCROLL REVEAL ANIMATIONS
   ---------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.reveal-section .reveal {
    transition-delay: 0s;
}

.reveal-section.is-visible .reveal {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section.is-visible .reveal-delay-1 { transition-delay: 0.05s; }
.reveal-section.is-visible .reveal-delay-2 { transition-delay: 0.1s; }
.reveal-section.is-visible .reveal-delay-3 { transition-delay: 0.15s; }
.reveal-section.is-visible .reveal-delay-4 { transition-delay: 0.2s; }
.reveal-section.is-visible .reveal-delay-5 { transition-delay: 0.25s; }
.reveal-section.is-visible .reveal-delay-6 { transition-delay: 0.3s; }

/* ----------------------------------------
   RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1200px) {
    .dest-top__grid--hero .dest-card:first-child .dest-card__image {
        min-height: auto;
    }
    
    .dest-region__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (max-width: 968px) {
    .dest-hero {
        min-height: 80vh;
    }
    
    .dest-search__form {
        flex-wrap: wrap;
    }
    
    .dest-search__field {
        flex: 1 1 45%;
    }
    
    .dest-search__field--destination {
        flex: 1 1 55%;
    }
    
    .dest-search__btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    
    .dest-top__grid--hero {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dest-top__grid--hero .dest-card:first-child {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .dest-top__grid--hero .dest-card:first-child .dest-card__image {
        min-height: auto;
    }
    
    .dest-top__grid--secondary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dest-region__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .dest-filter.is-sticky {
        top: 70px;
    }
}

@media (max-width: 768px) {
    .dest-hero__video {
        display: none;
    }
    
    .dest-hero__video-wrapper {
        background-image: url('../images/destinations/hero-fallback.jpg');
        background-size: cover;
        background-position: center;
    }
    
    .dest-hero__title {
        font-size: var(--text-3xl);
    }
    
    .dest-search__form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: var(--space-4);
        gap: var(--space-2);
    }
    
    .dest-search__field {
        width: 100%;
    }
    
    .dest-search__field--destination {
        grid-column: 1;
    }
    
    .dest-search__field--interests {
        grid-column: 2;
    }
    
    .dest-search__btn {
        grid-column: 1 / -1;
        justify-content: center;
    }
    
    /* ===== MOBILE MARQUEE: Popular Chips - Infinite Scroll ===== */
    .dest-search__chips {
        display: flex;
        align-items: center;
        gap: 0;
        padding-bottom: var(--space-4);
        margin-top: var(--space-6);
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    /* Fixed "Popular:" label on left */
    .dest-search__chips-label {
        position: relative;
        flex-shrink: 0;
        z-index: 2;
        background: linear-gradient(to right, rgba(22, 101, 52, 1) 80%, rgba(22, 101, 52, 0));
        padding-right: var(--space-4);
        padding-left: var(--space-2);
        font-weight: 500;
        color: white;
    }
    
    /* Scrolling container for chips - infinite loop */
    .dest-search__chips-inner {
        display: flex;
        gap: var(--space-3);
        animation: marquee-chips 20s linear infinite;
        white-space: nowrap;
        will-change: transform;
    }
    
    /* Ensure chips don't wrap and stay in line */
    .dest-search__chips-inner .dest-chip {
        flex-shrink: 0;
    }
    
    /* Pause on touch/hover for usability */
    .dest-search__chips:hover .dest-search__chips-inner,
    .dest-search__chips:active .dest-search__chips-inner,
    .dest-search__chips-inner.paused {
        animation-play-state: paused;
    }
    
    @keyframes marquee-chips {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    /* Hide swipe hint on mobile - using marquee instead */
    .dest-search__swipe-hint {
        display: none !important;
    }
    
    .dest-top__grid--hero,
    .dest-top__grid--secondary {
        grid-template-columns: 1fr;
    }
    
    .dest-top__grid--hero .dest-card:first-child {
        grid-column: span 1;
    }
    
    .dest-card--large .dest-card__title {
        font-size: var(--text-2xl);
    }
    
    .dest-region__header {
        flex-direction: column;
        text-align: center;
    }
    
    .dest-region__text {
        min-width: auto;
    }
    
    .dest-region__description {
        max-width: none;
    }
    
    .dest-region__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .dest-cta__title {
        font-size: var(--text-2xl);
    }
    
    .dest-cta__buttons {
        flex-direction: column;
    }
    
    /* ===== MOBILE MARQUEE: Filter Bar Pills ===== */
    .dest-filter {
        position: relative;
        overflow: hidden;
    }
    
    .dest-filter__inner {
        display: flex;
        gap: var(--space-3);
        animation: marquee-pills 15s linear infinite;
        padding-right: var(--space-8);
    }
    
    .dest-filter__pill {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Pause on touch/hover */
    .dest-filter:hover .dest-filter__inner,
    .dest-filter:active .dest-filter__inner,
    .dest-filter__inner.paused {
        animation-play-state: paused;
    }
    
    @keyframes marquee-pills {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    
    /* Edge gradient fade */
    .dest-filter::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--color-sand-light));
        pointer-events: none;
        z-index: 2;
    }
    
    .dest-filter.is-sticky::after {
        background: linear-gradient(to right, transparent, white);
    }
}

@media (max-width: 480px) {
    .dest-hero {
        min-height: 90vh;
    }
    
    .dest-hero__content {
        padding: var(--space-8) 0;
    }
    
    .dest-hero__title {
        font-size: var(--text-2xl);
    }
    
    .dest-search__form {
        display: flex;
        flex-direction: column;
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        gap: var(--space-2);
    }
    
    .dest-search__field,
    .dest-search__field--destination,
    .dest-search__field--interests,
    .dest-search__btn {
        width: 100%;
        grid-column: unset;
    }
    
    .dest-search__input,
    .dest-search__select {
        padding: var(--space-3);
    }
    
    .dest-chip {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
    
    .dest-top {
        padding: var(--space-12) 0;
    }
    
    .dest-region {
        padding: var(--space-12) 0;
    }
    
    .dest-region__title {
        font-size: var(--text-2xl);
    }
    
    .dest-cta {
        padding: var(--space-12) 0;
    }
}

/* ========================================
   MEGA MENU - Holiday Types Navigation
   ======================================== */

.nav-dropdown--mega {
    position: static;
}

.nav-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-8);
    min-width: 700px;
    max-width: 900px;
    z-index: 1000;
    border: 1px solid var(--color-gray-100);
}

.nav-dropdown--mega:hover .nav-mega-menu,
.nav-dropdown--mega:focus-within .nav-mega-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-mega-column {
    display: flex;
    flex-direction: column;
}

.nav-mega-heading {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-sand);
}

.nav-mega-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nav-mega-column ul li a {
    display: block;
    padding: var(--space-2) 0;
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
}

.nav-mega-column ul li a:hover {
    color: var(--color-terracotta);
    padding-left: var(--space-2);
}

.nav-mega-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-terracotta);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.nav-mega-cta:hover {
    gap: var(--space-3);
}

/* Hide mega menu on mobile - show regular dropdown instead */
@media (max-width: 1024px) {
    .nav-mega-menu {
        display: none !important;
    }
}

/* ========================================
   HOLIDAY TYPES PAGE - PREMIUM STYLES
   ======================================== */

.holiday-types-page {
    overflow-x: hidden;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --gold-gradient: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
}

/* Premium Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(198, 93, 59, 0.3); }
    50% { box-shadow: 0 0 40px rgba(198, 93, 59, 0.6); }
}

@keyframes particle-float {
    0%, 100% { 
        transform: translateY(0) translateX(0); 
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(-100vh) translateX(50px); 
        opacity: 0;
    }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
}

/* ========================================
   HERO SECTION - CINEMATIC
   ======================================== */
.ht-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-32) 0 var(--space-16);
    overflow: hidden;
}

.ht-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

.ht-hero__gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(198, 93, 59, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 40%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(198, 93, 59, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(15, 52, 96, 0.8) 0%, transparent 30%);
}

/* Floating Particles */
.ht-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ht-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particle-float 15s linear infinite;
}

.ht-particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.ht-particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 14s; width: 3px; height: 3px; }
.ht-particle:nth-child(3) { left: 35%; animation-delay: 4s; animation-duration: 16s; }
.ht-particle:nth-child(4) { left: 50%; animation-delay: 1s; animation-duration: 13s; width: 5px; height: 5px; }
.ht-particle:nth-child(5) { left: 65%; animation-delay: 3s; animation-duration: 15s; }
.ht-particle:nth-child(6) { left: 75%; animation-delay: 5s; animation-duration: 11s; width: 3px; height: 3px; }
.ht-particle:nth-child(7) { left: 85%; animation-delay: 2.5s; animation-duration: 17s; }
.ht-particle:nth-child(8) { left: 95%; animation-delay: 0.5s; animation-duration: 14s; width: 6px; height: 6px; }

/* Floating Shapes */
.ht-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ht-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: float 20s ease-in-out infinite;
}

.ht-shape--1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.4), transparent);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.ht-shape--2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), transparent);
    bottom: -50px;
    right: -50px;
    animation-delay: -5s;
}

.ht-shape--3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.5), transparent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

/* Hero Content */
.ht-hero__content {
    position: relative;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    will-change: transform, opacity;
    transition: opacity 0.1s ease;
}

/* Eyebrow Badge */
.ht-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-8);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ht-hero__eyebrow-icon {
    color: var(--color-terracotta-light);
    font-size: 10px;
}

/* Title */
.ht-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: var(--space-6);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.ht-hero__title-gradient {
    display: block;
    background: linear-gradient(135deg, #F4A261, #E9C46A, #F4A261);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* Subtitle */
.ht-hero__subtitle {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.7);
    max-width: 650px;
    margin: 0 auto var(--space-12);
    line-height: 1.7;
    font-weight: 400;
}

/* Navigation Cards */
.ht-hero__nav {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-16);
    position: relative;
    z-index: 5;
}

.ht-hero__nav-btn {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-8);
    border-radius: var(--radius-2xl);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
    position: relative;
    overflow: hidden;
}

.ht-hero__nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.ht-hero__nav-btn:hover::before {
    opacity: 1;
}

.ht-hero__nav-btn--group {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--color-white);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ht-hero__nav-btn--group:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.ht-hero__nav-btn--private {
    background: linear-gradient(135deg, #C65D3B, #8B4513, #C65D3B);
    background-size: 200% auto;
    color: var(--color-white);
    border: none;
    box-shadow: 0 8px 32px rgba(198, 93, 59, 0.4);
}

.ht-hero__nav-btn--private:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(198, 93, 59, 0.5);
    animation: pulse-glow 2s ease-in-out infinite;
}

.ht-hero__nav-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    flex-shrink: 0;
}

.ht-hero__nav-btn--private .ht-hero__nav-icon {
    background: rgba(255, 255, 255, 0.2);
}

.ht-hero__nav-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
}

.ht-hero__nav-text strong {
    font-size: var(--text-lg);
    font-weight: 600;
}

.ht-hero__nav-text small {
    font-size: var(--text-sm);
    opacity: 0.7;
}

.ht-hero__nav-arrow {
    font-size: var(--text-xl);
    opacity: 0.5;
    transition: all 0.3s;
}

.ht-hero__nav-btn:hover .ht-hero__nav-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Scroll Indicator */
.ht-hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1;
}

.ht-hero__scroll-text {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ht-hero__scroll-icon {
    animation: bounce-arrow 2s ease-in-out infinite;
}

/* ========================================
   SECTION STYLES - PREMIUM
   ======================================== */
.ht-section {
    padding: var(--space-24) 0;
    position: relative;
}

.ht-section--group {
    background: linear-gradient(180deg, #FDFBF7 0%, #F5F0E8 100%);
    position: relative;
}

.ht-section--group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 93, 59, 0.3), transparent);
}

.ht-section--private {
    background: linear-gradient(180deg, #FFFEF9 0%, #FDF8EF 50%, #F5F0E8 100%);
    position: relative;
}

.ht-section--private::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.ht-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-16);
    flex-wrap: wrap;
}

.ht-section__icon {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(198, 93, 59, 0.1);
    color: var(--color-terracotta);
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.ht-section__icon:hover {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 
        0 8px 30px rgba(198, 93, 59, 0.2),
        0 0 0 1px rgba(198, 93, 59, 0.2);
}

.ht-section__icon--gold {
    background: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
    background-size: 200% auto;
    color: var(--color-white);
    box-shadow: 
        0 4px 20px rgba(212, 175, 55, 0.3),
        0 0 0 1px rgba(212, 175, 55, 0.3);
    animation: shimmer 4s linear infinite;
}

.ht-section__icon--gold:hover {
    box-shadow: 
        0 8px 40px rgba(212, 175, 55, 0.5),
        0 0 0 2px rgba(212, 175, 55, 0.5);
}

.ht-section__text {
    flex: 1;
    min-width: 250px;
}

.ht-section__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.ht-section__description {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    max-width: 500px;
}

.ht-section__count {
    background: var(--color-terracotta);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ========================================
   CARD GRID - PREMIUM LAYOUT
   ======================================== */
.ht-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-8);
}

.ht-grid--private {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ========================================
   HOLIDAY TYPE CARD - GLASSMORPHISM
   ======================================== */
.ht-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(40px);
    position: relative;
}

/* Shimmer Effect on Hover */
.ht-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.6s ease;
    z-index: 10;
    pointer-events: none;
}

.ht-card:hover::before {
    left: 100%;
}

.ht-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ht-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(var(--card-color-rgb, 198, 93, 59), 0.2);
}

/* Premium Card Variant */
.ht-card--premium {
    border: none;
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
}

.ht-card--premium::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-2xl);
    padding: 2px;
    background: linear-gradient(135deg, var(--card-color), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.ht-card--premium:hover::after {
    opacity: 1;
}

.ht-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.ht-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.03), transparent);
}

.ht-card__icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 70%, black));
    border-radius: var(--radius-xl);
    color: var(--color-white);
    flex-shrink: 0;
    box-shadow: 
        0 4px 12px color-mix(in srgb, var(--card-color) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.ht-card:hover .ht-card__icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 
        0 8px 20px color-mix(in srgb, var(--card-color) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ht-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    flex: 1;
    transition: color 0.3s;
}

.ht-card:hover .ht-card__title {
    color: var(--card-color);
}

.ht-card__badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: linear-gradient(135deg, #D4AF37, #FFD700, #B8860B);
    background-size: 200% auto;
    color: #1a1a2e;
    font-size: 10px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    animation: shimmer 3s linear infinite;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.ht-card__content {
    padding: var(--space-6);
    flex: 1;
}

.ht-card__section {
    margin-bottom: var(--space-5);
}

.ht-card__section:last-child {
    margin-bottom: 0;
}

.ht-card__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
}

.ht-card__label svg {
    opacity: 0.6;
    color: var(--card-color);
}

.ht-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ht-card__tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.08), rgba(var(--card-color-rgb, 198, 93, 59), 0.04));
    color: var(--color-gray-700);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid rgba(var(--card-color-rgb, 198, 93, 59), 0.1);
    transition: all 0.3s;
}

.ht-card:hover .ht-card__tag {
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.15), rgba(var(--card-color-rgb, 198, 93, 59), 0.08));
    border-color: rgba(var(--card-color-rgb, 198, 93, 59), 0.2);
}

.ht-card__activities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ht-card__activity {
    display: inline-block;
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
}

.ht-card__activity:not(:last-child)::after {
    content: "•";
    margin-left: 6px;
    color: var(--card-color);
    opacity: 0.5;
}

.ht-card__footer {
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, rgba(var(--card-color-rgb, 198, 93, 59), 0.04), transparent);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    margin-top: auto;
}

.ht-card__cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--card-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ht-card__cta svg {
    transition: transform 0.3s;
}

.ht-card:hover .ht-card__cta {
    gap: var(--space-4);
}

.ht-card:hover .ht-card__cta svg {
    transform: translateX(4px);
}

/* ========================================
   DIVIDER - ELEGANT
   ======================================== */
.ht-divider {
    padding: var(--space-12) 0;
    background: linear-gradient(180deg, #F5F0E8 0%, #FFFEF9 100%);
    position: relative;
}

.ht-divider__content {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    justify-content: center;
}

.ht-divider__line {
    flex: 1;
    max-width: 250px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
}

.ht-divider__text {
    font-size: var(--text-base);
    color: var(--color-gray-500);
    font-style: italic;
    white-space: nowrap;
    position: relative;
    padding: 0 var(--space-4);
}

.ht-divider__text::before,
.ht-divider__text::after {
    content: '✦';
    color: rgba(212, 175, 55, 0.5);
    font-size: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ht-divider__text::before {
    left: 0;
}

.ht-divider__text::after {
    right: 0;
}

/* ========================================
   CTA SECTION - PREMIUM
   ======================================== */
.ht-cta {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 30%, #16213e 60%, #0f3460 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    padding: var(--space-24) 0;
    position: relative;
    overflow: hidden;
}

.ht-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(198, 93, 59, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(15, 52, 96, 0.3) 0%, transparent 60%);
    pointer-events: none;
}

.ht-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

.ht-cta__content {
    position: relative;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.ht-cta__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-6);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ht-cta__text {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-10);
    line-height: 1.7;
}

.ht-cta__buttons {
    display: flex;
    gap: var(--space-5);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-white {
    background: var(--color-white);
    color: var(--color-dark);
    font-weight: 700;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-white:hover {
    background: var(--color-white);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.3);
}

.btn-outline-white {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-weight: 600;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
}

/* ========================================
   REVEAL ANIMATIONS - PREMIUM ENHANCED
   ======================================== */

/* Page Load Animation Keyframes */
@keyframes htSlideUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes htSlideIn {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes htScaleIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes htFadeBlur {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes htGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(198, 93, 59, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(198, 93, 59, 0.4);
    }
}

@keyframes htIconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-3deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.05) rotate(3deg); }
}

@keyframes htCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Hero Page Load Sequence */
.ht-hero__eyebrow {
    animation: htFadeBlur 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.ht-hero__title {
    animation: htSlideUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.ht-hero__subtitle {
    animation: htFadeBlur 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

.ht-hero__nav {
    animation: htScaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

.ht-hero__scroll {
    animation: htFadeBlur 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1.2s both;
}

/* Nav Buttons Hover Enhancement */
.ht-hero__nav-btn {
    will-change: transform, box-shadow;
}

.ht-hero__nav-btn:hover {
    animation: htGlowPulse 2s ease-in-out infinite;
}

/* Reveal Fade with 3D Transform */
.reveal-fade {
    opacity: 0;
    transform: translateY(50px) perspective(1000px) rotateX(5deg);
    transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-fade.is-visible {
    opacity: 1;
    transform: translateY(0) perspective(1000px) rotateX(0deg);
}

/* Section Headers Animation */
.ht-section__header.is-visible {
    animation: htSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.ht-section__header .ht-section__icon {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.ht-section__header.is-visible .ht-section__icon {
    animation: htIconBounce 0.8s ease 0.4s;
}

/* Staggered Card Animation - Enhanced */
.ht-card {
    will-change: opacity, transform;
    transform-style: preserve-3d;
}

.ht-card:nth-child(1) { transition-delay: 0.05s; }
.ht-card:nth-child(2) { transition-delay: 0.1s; }
.ht-card:nth-child(3) { transition-delay: 0.15s; }
.ht-card:nth-child(4) { transition-delay: 0.2s; }
.ht-card:nth-child(5) { transition-delay: 0.25s; }
.ht-card:nth-child(6) { transition-delay: 0.3s; }
.ht-card:nth-child(7) { transition-delay: 0.35s; }
.ht-card:nth-child(8) { transition-delay: 0.4s; }
.ht-card:nth-child(9) { transition-delay: 0.45s; }

/* Card Hover 3D Effect */
.ht-card:hover {
    transform: translateY(-12px) scale(1.02) rotateX(-2deg) rotateY(2deg);
}

/* Card Icon Animation on Hover */
.ht-card:hover .ht-card__icon svg {
    animation: htIconBounce 0.6s ease;
}

/* Card Content Stagger on Hover */
.ht-card__section {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ht-card:hover .ht-card__section:nth-child(1) {
    transform: translateX(5px);
    transition-delay: 0.05s;
}

.ht-card:hover .ht-card__section:nth-child(2) {
    transform: translateX(5px);
    transition-delay: 0.1s;
}

/* CTA Button Hover Effects */
.ht-card__cta {
    position: relative;
    overflow: hidden;
}

.ht-card__cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-color), transparent);
    transform: translateY(-50%) scaleX(0);
    transition: transform 0.4s ease;
}

.ht-card:hover .ht-card__cta::before {
    transform: translateY(-50%) scaleX(1);
}

/* Tags Animation */
.ht-card__tag {
    transition: all 0.3s ease;
}

.ht-card:hover .ht-card__tag {
    transform: scale(1.05);
}

.ht-card:hover .ht-card__tag:nth-child(1) { transition-delay: 0s; }
.ht-card:hover .ht-card__tag:nth-child(2) { transition-delay: 0.05s; }
.ht-card:hover .ht-card__tag:nth-child(3) { transition-delay: 0.1s; }
.ht-card:hover .ht-card__tag:nth-child(4) { transition-delay: 0.15s; }

/* Activity Items Animation */
.ht-card__activity {
    transition: all 0.3s ease;
}

.ht-card:hover .ht-card__activity {
    color: var(--card-color);
}

/* Premium Badge Animation */
.ht-card__badge {
    animation: shimmer 3s linear infinite, htGlowPulse 3s ease-in-out infinite;
}

/* Divider Animation */
.ht-divider__line {
    transition: transform 0.6s ease;
    transform-origin: center;
}

.ht-divider.is-visible .ht-divider__line {
    animation: htExpandLine 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes htExpandLine {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* CTA Section Animation */
.ht-cta__content {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ht-cta__content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* CTA Buttons Stagger */
.ht-cta__buttons .btn:nth-child(1) {
    transition-delay: 0.2s;
}

.ht-cta__buttons .btn:nth-child(2) {
    transition-delay: 0.35s;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .ht-hero__eyebrow,
    .ht-hero__title,
    .ht-hero__subtitle,
    .ht-hero__nav,
    .ht-hero__scroll,
    .reveal-fade,
    .ht-card {
        animation: none !important;
        transition: opacity 0.3s ease !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZED
   ======================================== */
@media (max-width: 768px) {
    .ht-hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding: var(--space-20) 0 var(--space-12);
    }
    
    .ht-hero__eyebrow {
        font-size: 11px;
        padding: var(--space-2) var(--space-4);
    }
    
    .ht-hero__title {
        font-size: 2rem;
    }
    
    .ht-hero__subtitle {
        font-size: var(--text-base);
        margin-bottom: var(--space-8);
    }
    
    .ht-hero__nav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        margin-bottom: var(--space-12);
    }
    
    .ht-hero__nav-btn {
        min-width: unset;
        padding: var(--space-4) var(--space-5);
    }
    
    .ht-hero__nav-icon {
        width: 48px;
        height: 48px;
    }
    
    .ht-hero__scroll {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: var(--space-8);
    }
    
    .ht-particles,
    .ht-shapes {
        opacity: 0.5;
    }
    
    .ht-section {
        padding: var(--space-16) 0;
    }
    
    .ht-section__header {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: var(--space-4);
        margin-bottom: var(--space-10);
    }
    
    .ht-section__icon {
        width: 72px;
        height: 72px;
    }
    
    .ht-section__text {
        text-align: center;
    }
    
    .ht-section__description {
        margin: 0 auto;
    }
    
    .ht-section__count {
        margin-top: var(--space-2);
    }
    
    .ht-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    
    .ht-card__header {
        padding: var(--space-5);
    }
    
    .ht-card__icon {
        width: 50px;
        height: 50px;
    }
    
    .ht-card__title {
        font-size: var(--text-lg);
    }
    
    .ht-card__content {
        padding: var(--space-5);
    }
    
    .ht-card__footer {
        padding: var(--space-4) var(--space-5);
    }
    
    .ht-divider {
        padding: var(--space-8) 0;
    }
    
    .ht-divider__line {
        max-width: 80px;
    }
    
    .ht-divider__text {
        font-size: var(--text-sm);
    }
    
    .ht-cta {
        padding: var(--space-16) 0;
    }
    
    .ht-cta__title {
        font-size: 1.75rem;
    }
    
    .ht-cta__text {
        font-size: var(--text-base);
    }
    
    .ht-cta__buttons {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .ht-cta__buttons .btn,
    .ht-cta__buttons .btn-white,
    .ht-cta__buttons .btn-outline-white {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .ht-hero__nav {
        gap: var(--space-4);
    }
    
    .ht-hero__nav-btn {
        min-width: 260px;
    }
    
    .ht-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Screen Enhancements */
@media (min-width: 1200px) {
    .ht-hero__content {
        max-width: 1000px;
    }
    
    .ht-hero__title {
        font-size: 4.5rem;
    }
    
    .ht-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   DESTINATION PHOTO GALLERY
   Premium gallery with lightbox effect
   ======================================== */

.dest-gallery {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--color-sand-light) 0%, var(--color-white) 100%);
}

.dest-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 280px);
    gap: var(--space-4);
}

.dest-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: pointer;
    background: var(--color-sand);
}

/* First image spans 2 columns and 2 rows */
.dest-gallery__item--large {
    grid-column: span 2;
    grid-row: span 2;
}

.dest-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.dest-gallery__item:hover .dest-gallery__image {
    transform: scale(1.08);
}

.dest-gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dest-gallery__item:hover .dest-gallery__overlay {
    opacity: 1;
}

.dest-gallery__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-terracotta);
    transform: scale(0.8);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dest-gallery__item:hover .dest-gallery__icon {
    transform: scale(1);
}

/* ========================================
   LIGHTBOX MODAL
   ======================================== */

.dest-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dest-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.dest-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dest-lightbox__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

.dest-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dest-lightbox__image {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.dest-lightbox__caption {
    margin-top: var(--space-4);
    text-align: center;
    color: var(--color-white);
}

.dest-lightbox__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    display: block;
    margin-bottom: var(--space-2);
}

.dest-lightbox__counter {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.dest-lightbox__close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.dest-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.dest-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.dest-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.dest-lightbox__nav--prev {
    left: var(--space-6);
}

.dest-lightbox__nav--next {
    right: var(--space-6);
}

/* Gallery Responsive */
@media (max-width: 1024px) {
    .dest-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 220px);
    }
    
    .dest-gallery__item--large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .dest-gallery__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--space-3);
    }
    
    .dest-gallery__item {
        height: 250px;
    }
    
    .dest-gallery__item--large {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }
    
    .dest-lightbox__nav {
        width: 44px;
        height: 44px;
    }
    
    .dest-lightbox__nav--prev {
        left: var(--space-3);
    }
    
    .dest-lightbox__nav--next {
        right: var(--space-3);
    }
    
    .dest-lightbox__close {
        top: var(--space-4);
        right: var(--space-4);
        width: 40px;
        height: 40px;
    }
}

/* Slideshow card animation for archive page */
.dest-card__slideshow {
    position: relative;
}

.dest-card__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.dest-card__slide.is-active {
    opacity: 1;
    position: relative;
}

.dest-card__slideshow.is-paused .dest-card__slide {
    transition-duration: 0.3s;
}

/* ========================================
   PREMIUM TESTIMONIALS V2 - COMPACT STYLE
   Elegant one-at-a-time testimonial display
   ======================================== */

.testimonials-section-v2 {
    padding: var(--space-12) 0 var(--space-16);
    background: var(--color-white);
}

.testimonial-showcase {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-12);
}

/* Navigation Arrows - Smaller & Closer */
.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.testimonial-arrow svg {
    width: 20px;
    height: 20px;
}

.testimonial-arrow:hover {
    background: var(--color-white);
    border-color: var(--color-gray-300);
    color: var(--color-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.testimonial-arrow--prev {
    left: -8px;
}

.testimonial-arrow--next {
    right: -8px;
}

/* Single Testimonial Card */
.testimonial-single-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}

/* Testimonial Item */
.testimonial-item {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.testimonial-item.active {
    display: flex;
    opacity: 1;
}

/* Slide Animations */
.testimonial-item.slide-out-left {
    animation: slideOutLeft 0.5s ease forwards;
}

.testimonial-item.slide-out-right {
    animation: slideOutRight 0.5s ease forwards;
}

.testimonial-item.slide-in-right {
    animation: slideInRight 0.5s ease forwards;
}

.testimonial-item.slide-in-left {
    animation: slideInLeft 0.5s ease forwards;
}

@keyframes slideOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-20px); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(20px); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Trip Photo - Shorter Height */
.testimonial-trip-photo {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.testimonial-trip-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.testimonial-single-card:hover .testimonial-trip-photo img {
    transform: scale(1.02);
}

/* Circular Traveler Photo - Smaller */
.testimonial-traveler-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-white);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    margin-top: -40px;
    position: relative;
    z-index: 5;
}

.testimonial-traveler-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content - Tighter Spacing */
.testimonial-content-v2 {
    padding: var(--space-3) var(--space-8) var(--space-6);
    max-width: 620px;
}

.testimonial-text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

/* Script Font Name - Smaller */
.testimonial-name-script {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-style: italic;
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

/* Stars V2 - Smaller */
.testimonial-stars-v2 {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: var(--space-2);
    color: #F59E0B;
}

.testimonial-stars-v2 svg {
    width: 16px;
    height: 16px;
}

/* Meta Info (Date + Rating) */
.testimonial-meta {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .testimonial-showcase {
        padding: 0 var(--space-14);
    }
    
    .testimonial-arrow {
        width: 44px;
        height: 44px;
    }
    
    .testimonial-arrow svg {
        width: 18px;
        height: 18px;
    }
    
    .testimonial-trip-photo {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .testimonials-section-v2 {
        padding: var(--space-10) 0 var(--space-12);
    }
    
    .testimonial-showcase {
        padding: 0 var(--space-12);
    }
    
    .testimonial-arrow {
        width: 40px;
        height: 40px;
    }
    
    .testimonial-arrow--prev {
        left: 0;
    }
    
    .testimonial-arrow--next {
        right: 0;
    }
    
    .testimonial-trip-photo {
        height: 180px;
    }
    
    .testimonial-traveler-photo {
        width: 70px;
        height: 70px;
        margin-top: -35px;
    }
    
    .testimonial-content-v2 {
        padding: var(--space-2) var(--space-5) var(--space-5);
    }
    
    .testimonial-text {
        font-size: var(--text-sm);
        line-height: 1.6;
    }
    
    .testimonial-name-script {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .testimonial-showcase {
        padding: 0 var(--space-10);
    }
    
    .testimonial-trip-photo {
        height: 160px;
    }
    
    .testimonial-arrow {
        width: 36px;
        height: 36px;
    }
    
    .testimonial-arrow svg {
        width: 16px;
        height: 16px;
    }
    
    .testimonial-traveler-photo {
        width: 60px;
        height: 60px;
        margin-top: -30px;
        border-width: 2px;
    }
    
    .testimonial-content-v2 {
        padding: var(--space-2) var(--space-4) var(--space-4);
    }
    
    .testimonial-text {
        font-size: var(--text-xs);
        margin-bottom: var(--space-3);
    }
    
    .testimonial-name-script {
        font-size: var(--text-base);
        margin-bottom: var(--space-1);
    }
    
    .testimonial-stars-v2 svg {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   PREMIUM SINGLE DESTINATION PAGE
   ======================================== */

/* Enhanced Hero Section */
.dest-hero-premium {
    position: relative;
    overflow: hidden;
}

.dest-hero-bg-parallax {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.dest-hero-bg-parallax img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Fixed position to prevent movement */
    transform: none !important;
    will-change: auto;
}

.dest-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
    /* Ensure overlay stays fixed and doesn't move */
    transform: none !important;
    will-change: auto;
}

.dest-hero-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-hero-animate.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Premium Hero Badge for Destination Page */
.dest-hero-premium .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-white);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dest-hero-scroll-hint {
    display: none; /* Hide the scroll hint icon */
}

@keyframes destBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Quick Info Bar */
.dest-quick-info {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-6) 0;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.dest-quick-info.is-sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

.dest-quick-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    align-items: center;
}

.dest-quick-info__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
}

.dest-quick-info__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

.dest-quick-info__item svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
    transition: transform 0.3s ease, color 0.3s ease;
}

.dest-quick-info__item:hover svg {
    transform: scale(1.1);
    color: var(--color-terracotta-dark);
}

.dest-quick-info__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.dest-quick-info__value {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
}

/* Image Gallery */
.dest-gallery-section {
    padding: var(--space-12) 0;
}

.dest-gallery-wrapper {
    margin-top: var(--space-6);
    overflow: hidden;
    position: relative;
}

.dest-gallery-wrapper::before,
.dest-gallery-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.dest-gallery-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-white), transparent);
}

.dest-gallery-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-white), transparent);
}

@media (max-width: 768px) {
    .dest-gallery-wrapper::before,
    .dest-gallery-wrapper::after {
        width: 40px;
    }
}

.dest-gallery-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: var(--space-1) 0;
}

.dest-gallery-track {
    display: flex;
    gap: 12px;
    will-change: transform;
}

.dest-gallery-item {
    position: relative;
    flex: 0 0 auto;
    width: 320px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dest-gallery-item:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.dest-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.dest-gallery-item:hover img {
    transform: scale(1.12);
}

.dest-gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 70%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-gallery-item:hover .dest-gallery-item__overlay {
    opacity: 1;
}

.dest-gallery-item__overlay svg {
    display: none; /* Hide the icon - keep only the darkening overlay effect */
}

/* Lightbox Modal */
.dest-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dest-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.dest-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
}

.dest-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.dest-lightbox__image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dest-lightbox__close,
.dest-lightbox__prev,
.dest-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.dest-lightbox__close:hover,
.dest-lightbox__prev:hover,
.dest-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.dest-lightbox__close {
    top: var(--space-4);
    right: var(--space-4);
}

.dest-lightbox__prev {
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.dest-lightbox__next {
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.dest-lightbox__counter {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}

/* Content Section */
.dest-content-section {
    padding: var(--space-16) 0;
}

.dest-content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-12);
}

.dest-content-main {
    min-width: 0;
}

.dest-content-text {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-gray-700);
}

.dest-content-text p {
    margin-bottom: var(--space-6);
}

.dest-content-text h2,
.dest-content-text h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    color: var(--color-dark);
}

/* Highlights Grid */
.dest-highlights {
    margin-top: var(--space-12);
}

.dest-highlights__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.dest-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.dest-highlights__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-sand-light);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.dest-highlights__item:hover {
    background: var(--color-terracotta-light);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dest-highlights__item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.dest-highlights__item span {
    color: var(--color-gray-700);
    line-height: 1.6;
}

/* Sidebar */
.dest-sidebar {
    position: relative;
}

.dest-sidebar__box {
    background: var(--color-sand-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: sticky;
    top: 100px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dest-sidebar__box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.dest-sidebar__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.dest-sidebar__btn {
    width: 100%;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all 0.3s ease;
}

.dest-sidebar__btn:last-child {
    margin-bottom: 0;
}

.dest-sidebar__btn:hover {
    transform: translateX(4px);
}

.dest-sidebar__btn svg {
    transition: transform 0.3s ease;
}

.dest-sidebar__btn:hover svg {
    transform: translateX(4px);
}

/* Premium Explore Cards in Sidebar */
.dest-sidebar__box--premium {
    padding: var(--space-6);
}

.dest-explore-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    text-decoration: none;
    margin-bottom: var(--space-3);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.dest-explore-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dest-explore-card:hover::before {
    opacity: 1;
}

/* Tours Card - Warm Terracotta Theme */
.dest-explore-card--tours {
    background: linear-gradient(135deg, #FDF6F0 0%, #FAE8DC 100%);
    border: 1px solid rgba(198, 93, 52, 0.15);
}

.dest-explore-card--tours::before {
    background: linear-gradient(135deg, #FCF0E8 0%, #F5D8C6 100%);
}

.dest-explore-card--tours:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(198, 93, 52, 0.15);
}

.dest-explore-card--tours .dest-explore-card__icon {
    color: var(--color-terracotta);
    background: rgba(198, 93, 52, 0.1);
}

/* Activities Card - Cool Blue Theme */
.dest-explore-card--activities {
    background: linear-gradient(135deg, #F0F7FA 0%, #DCE8F0 100%);
    border: 1px solid rgba(91, 143, 168, 0.15);
}

.dest-explore-card--activities::before {
    background: linear-gradient(135deg, #E8F2F7 0%, #C8DDE8 100%);
}

.dest-explore-card--activities:hover {
    border-color: #5B8FA8;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(91, 143, 168, 0.15);
}

.dest-explore-card--activities .dest-explore-card__icon {
    color: #5B8FA8;
    background: rgba(91, 143, 168, 0.1);
}

.dest-explore-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.dest-explore-card:hover .dest-explore-card__icon {
    transform: scale(1.1);
}

.dest-explore-card__content {
    flex: 1;
    min-width: 0;
}

.dest-explore-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.dest-explore-card__desc {
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

.dest-explore-card__arrow {
    color: var(--color-gray-400);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dest-explore-card--tours:hover .dest-explore-card__arrow {
    color: var(--color-terracotta);
    transform: translateX(4px);
}

.dest-explore-card--activities:hover .dest-explore-card__arrow {
    color: #5B8FA8;
    transform: translateX(4px);
}

/* Secondary Link in Sidebar */
.dest-sidebar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: var(--space-2);
}

.dest-sidebar__link:hover {
    color: var(--color-terracotta);
}

.dest-sidebar__link svg {
    transition: transform 0.3s ease;
}

.dest-sidebar__link:hover svg {
    transform: translateX(4px);
}

/* Activity Card Badge */
.card-badge--activity {
    background: linear-gradient(135deg, #5B8FA8 0%, #4A7A91 100%);
}

/* Tour Card Badge - Warm Terracotta */
.card-badge--tour {
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #B5442E 100%);
}

/* ========================================
   DISTINCT CARD STYLING - TOURS VS ACTIVITIES
   Visual differentiation for clear separation
   ======================================== */

/* Tour Cards - Warm Accent */
.dest-tour-card--tour {
    border-top: 3px solid var(--color-terracotta);
}

.dest-tour-card--tour:hover {
    box-shadow: 0 12px 40px rgba(198, 93, 52, 0.15);
}

.dest-tour-card--tour .card-title a:hover {
    color: var(--color-terracotta);
}

/* Activity Cards - Cool Blue Accent */
.dest-activity-card {
    border-top: 3px solid #5B8FA8;
}

.dest-activity-card:hover {
    box-shadow: 0 12px 40px rgba(91, 143, 168, 0.15);
}

.dest-activity-card .card-title a:hover {
    color: #5B8FA8;
}

/* Button Variants for Tours vs Activities */
.btn-primary--activity {
    background: linear-gradient(135deg, #5B8FA8 0%, #4A7A91 100%);
}

.btn-primary--activity:hover {
    background: linear-gradient(135deg, #4A7A91 0%, #3A6A81 100%);
}

.btn-outline--tour {
    color: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.btn-outline--tour:hover {
    background: var(--color-terracotta);
    color: var(--color-white);
}

.btn-outline--activity {
    color: #5B8FA8;
    border-color: #5B8FA8;
}

.btn-outline--activity:hover {
    background: #5B8FA8;
    color: var(--color-white);
}

/* Tours Section */
.dest-tours-section {
    padding: var(--space-16) 0;
}

.dest-tours-grid {
    margin-top: var(--space-8);
}

.dest-tour-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.98);
}

.dest-tour-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dest-tour-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.dest-tour-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.dest-tours-cta {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: var(--space-8);
    padding: var(--space-8);
}

.dest-tours-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-12);
}

.dest-tours-empty svg {
    color: var(--color-gray-400);
    margin-bottom: var(--space-4);
}

.dest-tours-empty h3 {
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.dest-tours-empty p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

/* Section Selector Cards - All Destinations */
.dest-section-selector {
    padding: var(--space-6) 0;
    background: var(--color-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: var(--space-8);
}

.dest-selector-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
}

.dest-selector-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xl);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    min-height: 160px;
}

/* Tours Card - Terracotta/Warm tone */
.dest-selector-card--tours {
    background: linear-gradient(135deg, #FDF6F0 0%, #FAE8DC 100%);
    border: 2px solid transparent;
}

.dest-selector-card--tours:hover {
    border-color: var(--color-terracotta);
}

/* Activities Card - Blue/Cool tone */
.dest-selector-card--activities {
    background: linear-gradient(135deg, #F0F7FA 0%, #DCE8F0 100%);
    border: 2px solid transparent;
}

.dest-selector-card--activities:hover {
    border-color: #5B8FA8;
}

/* Hover Effects */
.dest-selector-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Active State */
.dest-selector-card.active {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dest-selector-card--tours.active {
    border-color: var(--color-terracotta);
    background: linear-gradient(135deg, #FCF0E8 0%, #F5D8C6 100%);
}

.dest-selector-card--activities.active {
    border-color: #5B8FA8;
    background: linear-gradient(135deg, #E8F2F7 0%, #C8DDE8 100%);
}

/* Card Content */
.dest-selector-card__content {
    flex: 1;
}

.dest-selector-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.3;
}

.dest-selector-card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* CTA Button */
.dest-selector-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    margin-top: var(--space-4);
    transition: all 0.3s ease;
}

.dest-selector-card--tours .dest-selector-card__cta {
    color: var(--color-terracotta);
}

.dest-selector-card--activities .dest-selector-card__cta {
    color: #5B8FA8;
}

.dest-selector-card__cta svg {
    transition: transform 0.3s ease;
}

.dest-selector-card:hover .dest-selector-card__cta svg {
    transform: translateX(4px);
}

/* Active CTA enhancement */
.dest-selector-card.active .dest-selector-card__cta::after {
    content: '✓';
    margin-left: var(--space-2);
    font-size: var(--text-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
    .dest-section-selector {
        padding: var(--space-6) 0;
    }
    
    .dest-selector-cards {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .dest-selector-card {
        padding: var(--space-5) var(--space-6);
        min-height: 140px;
    }
    
    .dest-selector-card__title {
        font-size: var(--text-lg);
    }
    
    .dest-selector-card__subtitle {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .dest-selector-card {
        padding: var(--space-4) var(--space-5);
        min-height: 120px;
    }
}

/* Explore Cards Responsive */
@media (max-width: 1024px) {
    .dest-content-wrapper {
        flex-direction: column;
    }
    
    .dest-sidebar {
        position: static;
        width: 100%;
        margin-top: var(--space-8);
    }
    
    .dest-sidebar__box--premium {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .dest-sidebar__box--premium .dest-sidebar__title {
        grid-column: 1 / -1;
    }
    
    .dest-sidebar__box--premium .dest-sidebar__link {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .dest-sidebar__box--premium {
        grid-template-columns: 1fr;
    }
    
    .dest-explore-card {
        padding: var(--space-4);
    }
    
    .dest-explore-card__icon {
        width: 42px;
        height: 42px;
    }
    
    .dest-explore-card__icon svg {
        width: 20px;
        height: 20px;
    }
    
    .dest-explore-card__title {
        font-size: var(--text-sm);
    }
    
    .dest-highlights__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dest-explore-card {
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    
    .dest-explore-card__icon {
        width: 36px;
        height: 36px;
    }
    
    .dest-explore-card__desc {
        display: none;
    }
}

/* ========================================
   DESTINATION PAGE - PREMIUM ANIMATIONS
   Clean, Elegant, Responsive
   ======================================== */

/* Scroll Progress Bar */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-terracotta);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 10000;
    pointer-events: none;
}

/* ========================================
   SECTION BACKGROUNDS & SEPARATION
   Premium Visual Hierarchy
   ======================================== */

/* Tours Section - Refined Sand Background */
.dest-tours-section {
    background: linear-gradient(180deg, #F9F7F4 0%, #F5F2ED 100%);
    position: relative;
    padding: var(--space-20) 0;
}

/* Activities Section - Refined darker tint for contrast */
.dest-activities-section {
    background: linear-gradient(180deg, #f2f4f8 0%, #f6f7fa 40%, #ffffff 100%);
    position: relative;
    padding: var(--space-20) 0;
    margin-top: 0;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.03);
}

/* Premium Section Divider - Subtle & Intentional */
.dest-activities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(198, 93, 52, 0.25) 25%, 
        rgba(198, 93, 52, 0.35) 50%, 
        rgba(198, 93, 52, 0.25) 75%, 
        transparent 100%);
    opacity: 0;
    transition: opacity 0.9s var(--ease-luxury);
}

.dest-activities-section.is-visible::before {
    opacity: 1;
}

/* Section Spacing Enhancement */
.dest-tours-section + .dest-activities-section {
    margin-top: 0;
    padding-top: var(--space-24);
}

/* Enhanced Section Transitions - Highlights to Tours to Activities */
.dest-content-section {
    position: relative;
}

.dest-content-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 93, 52, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.dest-content-section.is-visible::after {
    opacity: 1;
}

/* Highlights Grid Animation */
.dest-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.dest-highlights__item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s var(--ease-luxury), 
                transform 0.6s var(--ease-luxury),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.dest-highlights.is-visible .dest-highlights__item,
.dest-highlights__item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.dest-highlights.is-visible .dest-highlights__item:nth-child(1) { transition-delay: 0.1s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(2) { transition-delay: 0.15s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(3) { transition-delay: 0.2s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(4) { transition-delay: 0.25s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(5) { transition-delay: 0.3s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(6) { transition-delay: 0.35s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(7) { transition-delay: 0.4s; }
.dest-highlights.is-visible .dest-highlights__item:nth-child(8) { transition-delay: 0.45s; }

/* Explore Cards Stagger Animation */
.dest-explore-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease-luxury), 
                transform 0.5s var(--ease-luxury),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.dest-sidebar__box.is-visible .dest-explore-card {
    opacity: 1;
    transform: translateY(0);
}

.dest-sidebar__box.is-visible .dest-explore-card--tours {
    transition-delay: 0.1s;
}

.dest-sidebar__box.is-visible .dest-explore-card--activities {
    transition-delay: 0.2s;
}

.dest-sidebar__box.is-visible .dest-sidebar__link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.dest-sidebar__link {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease-luxury), transform 0.4s var(--ease-luxury), color 0.3s ease;
}

/* Section Selector Cards Animation */
.dest-selector-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-luxury), 
                transform 0.6s var(--ease-luxury),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.dest-selector-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   Premium Easing & Timing
   ======================================== */

/* Luxury easing curve */
:root {
    --ease-luxury: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base fade-up animation - Refined */
.scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-luxury),
                transform 0.9s var(--ease-luxury);
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Legacy support - Enhanced */
.dest-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-luxury),
                transform 0.9s var(--ease-luxury);
}

.dest-reveal.is-visible,
.dest-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Premium Fade-In Animation */
.dest-fade-in {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Premium Slide-In Animation */
.dest-slide-in {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-slide-in.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================
   SECTION HEADER ANIMATIONS
   Refined & Polished
   ======================================== */

.section-title {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s var(--ease-luxury),
                transform 0.9s var(--ease-luxury);
}

.section-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Premium animated underline */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-terracotta);
    border-radius: 1px;
    transition: width 1s var(--ease-luxury);
    transition-delay: 0.3s;
}

.section-title.is-visible::after {
    width: 56px;
}

.section-description {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.85s var(--ease-luxury) 0.2s,
                transform 0.85s var(--ease-luxury) 0.2s;
}

.section-description.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   CARD ANIMATIONS - REFINED STAGGER
   Premium Timing & Easing
   ======================================== */

.dest-tours-grid .card,
.dest-tours-grid article {
    opacity: 0;
    transform: translateY(36px) scale(0.98);
    transition: opacity 0.75s var(--ease-luxury),
                transform 0.75s var(--ease-luxury),
                box-shadow 0.4s var(--ease-smooth);
}

.dest-tours-grid .card.is-visible,
.dest-tours-grid article.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Refined stagger - More controlled rhythm */
.dest-tours-grid .card:nth-child(1),
.dest-tours-grid article:nth-child(1) { transition-delay: 0s; }
.dest-tours-grid .card:nth-child(2),
.dest-tours-grid article:nth-child(2) { transition-delay: 0.1s; }
.dest-tours-grid .card:nth-child(3),
.dest-tours-grid article:nth-child(3) { transition-delay: 0.2s; }
.dest-tours-grid .card:nth-child(4),
.dest-tours-grid article:nth-child(4) { transition-delay: 0.3s; }
.dest-tours-grid .card:nth-child(5),
.dest-tours-grid article:nth-child(5) { transition-delay: 0.4s; }
.dest-tours-grid .card:nth-child(6),
.dest-tours-grid article:nth-child(6) { transition-delay: 0.5s; }
.dest-tours-grid .card:nth-child(7),
.dest-tours-grid article:nth-child(7) { transition-delay: 0.6s; }
.dest-tours-grid .card:nth-child(8),
.dest-tours-grid article:nth-child(8) { transition-delay: 0.7s; }

/* ========================================
   CARD HOVER EFFECTS
   Premium Micro-interactions
   ======================================== */

.dest-tour-card,
.dest-tours-grid .card {
    transition: transform 0.5s var(--ease-luxury),
                box-shadow 0.5s var(--ease-luxury);
    will-change: transform;
}

.dest-tour-card:hover,
.dest-tours-grid .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Refined image zoom with parallax support */
.dest-tour-card .card-image,
.card .card-image {
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dest-tour-card .card-image img,
.card .card-image img {
    transition: transform 0.7s var(--ease-luxury);
    will-change: transform;
    transform-origin: center center;
}

.dest-tour-card:hover .card-image img,
.card:hover .card-image img {
    transform: scale(1.06) !important;
}

/* Premium title underline */
.dest-tour-card .card-title a,
.card .card-title a {
    position: relative;
    text-decoration: none;
}

.dest-tour-card .card-title a::after,
.card .card-title a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-terracotta);
    transition: width 0.5s var(--ease-luxury);
}

.dest-tour-card:hover .card-title a::after,
.card:hover .card-title a::after {
    width: 100%;
}

/* Refined price animation */
.card-price-value {
    transition: color 0.4s var(--ease-smooth),
                transform 0.4s var(--ease-smooth);
    display: inline-block;
}

.dest-tour-card:hover .card-price-value,
.card:hover .card-price-value {
    color: var(--color-terracotta);
    transform: translateX(2px);
}

/* ========================================
   SELECTOR CARDS
   Premium Entrance
   ======================================== */

.dest-selector-card {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.8s var(--ease-luxury),
                transform 0.8s var(--ease-luxury),
                box-shadow 0.4s var(--ease-smooth);
}

.dest-selector-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dest-selector-card:first-child {
    transition-delay: 0s;
}

.dest-selector-card:last-child {
    transition-delay: 0.15s;
}

.dest-selector-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

/* ========================================
   HERO ANIMATIONS
   Premium Entrance
   ======================================== */

.dest-hero-animate {
    opacity: 0;
    transform: translateY(28px);
    animation: heroFadeInUp 0.9s var(--ease-luxury) forwards;
}

.dest-hero-animate[data-delay="0"] {
    animation-delay: 0.15s;
}

.dest-hero-animate[data-delay="100"] {
    animation-delay: 0.35s;
}

.dest-hero-animate[data-delay="500"] {
    animation-delay: 0.7s;
}

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

/* ========================================
   CONTENT SECTION ANIMATIONS
   Refined Timing
   ======================================== */

.dest-content-text,
.dest-highlights,
.dest-sidebar__box {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--ease-luxury),
                transform 0.85s var(--ease-luxury);
}

.dest-content-text.is-visible,
.dest-highlights.is-visible,
.dest-sidebar__box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dest-highlights {
    transition-delay: 0.1s;
}

.dest-sidebar__box {
    transition-delay: 0.2s;
}

/* ========================================
   SECTION HEADER SPACING
   Better Rhythm & Balance
   ======================================== */

.section-header {
    margin-bottom: var(--space-12);
}

.dest-tours-section .section-header {
    margin-bottom: var(--space-14);
}

.dest-activities-section .section-header {
    margin-bottom: var(--space-14);
}

/* ========================================
   RESPONSIVE
   Maintained Premium Feel
   ======================================== */

@media (max-width: 1024px) {
    .dest-tours-section,
    .dest-activities-section {
        padding: var(--space-16) 0;
    }
    
    .dest-tours-section + .dest-activities-section {
        padding-top: var(--space-20);
    }
}

@media (max-width: 768px) {
    .dest-tour-card:hover,
    .dest-tours-grid .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    }
    
    .scroll-reveal,
    .dest-reveal {
        transform: translateY(20px);
    }
    
    .dest-tours-grid .card,
    .dest-tours-grid article {
        transform: translateY(24px) scale(0.99);
    }
    
    .section-title {
        transform: translateY(16px);
    }
    
    .section-description {
        transform: translateY(14px);
    }
    
    .dest-tours-section,
    .dest-activities-section {
        padding: var(--space-12) 0;
    }
    
    .dest-tours-section + .dest-activities-section {
        padding-top: var(--space-16);
    }
    
    .section-header {
        margin-bottom: var(--space-10);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .dest-reveal,
    .dest-tours-grid .card,
    .dest-tours-grid article,
    .dest-selector-card,
    .dest-hero-animate,
    .dest-content-text,
    .dest-highlights,
    .dest-sidebar__box,
    .section-title::after,
    .section-description {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    .scroll-progress-bar {
        display: none;
    }
}

/* Card Badge */
.card-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--color-terracotta);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(198, 93, 52, 0.25);
}

/* Gallery parallax support */
.dest-gallery-item {
    overflow: hidden;
}

.dest-gallery-item img {
    transition: transform 0.3s ease-out;
    will-change: transform;
    transform-origin: center center;
}

/* Card Excerpt */
.card-excerpt {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0 0 var(--space-4) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Meta with Icon */
.card-meta-item svg {
    vertical-align: middle;
    margin-right: var(--space-1);
}

/* CTA Section */
.dest-cta-section {
    padding: var(--space-20) 0;
    position: relative;
}

.dest-cta {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.dest-cta__title {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

.dest-cta__text {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin-bottom: var(--space-8);
}

.dest-cta__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Reveal Animations */
.dest-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.dest-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dest-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .dest-sidebar__box {
        position: relative;
        top: 0;
        margin-top: var(--space-8);
    }
    
}

@media (max-width: 768px) {
    .dest-hero-premium {
        min-height: 50vh;
    }
    
    .dest-quick-info__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .dest-quick-info__item {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-gray-200);
    }
    
    .dest-quick-info__item:last-child {
        border-bottom: none;
    }
    
    .dest-gallery-item {
        width: 280px;
    }
    
    .dest-gallery-track {
        gap: 10px;
    }
    
    .dest-highlights__grid {
        grid-template-columns: 1fr;
    }
    
    .dest-cta__title {
        font-size: var(--text-3xl);
    }
    
    .dest-cta__buttons {
        flex-direction: column;
    }
    
    .dest-cta__buttons .btn {
        width: 100%;
    }
    
    .dest-lightbox__prev,
    .dest-lightbox__next {
        width: 40px;
        height: 40px;
    }
    
    .dest-lightbox__close {
        width: 40px;
        height: 40px;
        top: var(--space-2);
        right: var(--space-2);
    }
}

@media (max-width: 480px) {
    .dest-gallery-item {
        width: 260px;
    }
    
    .dest-gallery-track {
        gap: 8px;
    }
    
    .dest-cta__title {
        font-size: var(--text-2xl);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .dest-hero-animate,
    .dest-reveal,
    .dest-gallery-item,
    .dest-tour-card {
        transition: none;
        animation: none;
    }
    
    .dest-hero-scroll-hint {
        animation: none;
    }
    
    .dest-hero-bg-parallax img {
        transform: none !important;
    }
    
    .dest-gallery-track {
        animation: none !important;
    }
    
    .dest-gallery-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    
    .dest-gallery-item {
        scroll-snap-align: center;
    }
}

/* ========================================
   SINGLE ACTIVITY PAGE STYLES
   ======================================== */

.activity-page {
    background: var(--color-white);
}

/* Activity Hero Section */
.activity-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.activity-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.activity-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-hero__bg--gradient {
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-earth) 50%, var(--color-terracotta-dark) 100%);
}

.activity-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

.activity-hero .container {
    position: relative;
    z-index: 3;
    padding-bottom: var(--space-16);
}

.activity-hero__content {
    max-width: 800px;
}

.activity-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.activity-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.activity-breadcrumb a:hover {
    color: white;
}

.activity-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.4);
}

.activity-breadcrumb .current {
    color: white;
}

.activity-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    color: white;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-4);
}

.activity-hero__badge svg {
    color: var(--color-terracotta-light);
}

.activity-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: white;
    line-height: 1.15;
    margin-bottom: var(--space-6);
}

.activity-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}

.activity-hero__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
}

.activity-hero__meta-item svg {
    opacity: 0.8;
}

.activity-hero__meta-item--price {
    background: var(--color-terracotta);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    gap: var(--space-3);
}

.activity-hero__meta-item--price .label {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-hero__meta-item--price .price {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
}

.activity-hero__meta-item--price .per {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-hero__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: white;
    opacity: 0.6;
    animation: activityBounce 2s ease-in-out infinite;
}

@keyframes activityBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Activity Main Layout */
.activity-main {
    padding: var(--space-16) 0;
}

.activity-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-12);
    align-items: start;
}

/* Activity Content Sections */
.activity-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.activity-section {
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-gray-100);
}

.activity-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-6);
}

.activity-section__title svg {
    color: var(--color-terracotta);
}

.activity-section__content p {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-gray-700);
}

/* Activity Paragraph Animations */
.activity-paragraph {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: linear-gradient(135deg, rgba(var(--color-terracotta-rgb), 0.03), transparent);
    border-left: 3px solid var(--color-terracotta);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    opacity: 0;
    transform: translateY(20px);
}

.activity-paragraph.reveal-fade-up {
    animation: activityParagraphReveal 0.6s ease forwards;
}

@keyframes activityParagraphReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.activity-paragraph:last-child {
    margin-bottom: 0;
}

/* Activity Highlights */
.activity-highlights__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-4);
}

.activity-highlights__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.activity-highlights__list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-terracotta);
}

/* Activity Inclusions */
.activity-inclusions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.activity-inclusions__col h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.activity-inclusions__col--included h3 {
    color: #059669;
}

.activity-inclusions__col--included h3 svg {
    color: #059669;
}

.activity-inclusions__col--excluded h3 {
    color: #DC2626;
}

.activity-inclusions__col--excluded h3 svg {
    color: #DC2626;
}

.activity-inclusions__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.activity-inclusions__col ul li {
    font-size: var(--text-base);
    color: var(--color-gray-700);
    padding-left: var(--space-6);
    position: relative;
}

.activity-inclusions__col--included ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: 600;
}

.activity-inclusions__col--excluded ul li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #DC2626;
    font-weight: 600;
}

/* Activity Meeting Point */
.activity-meeting__content p {
    font-size: var(--text-base);
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);
}

.activity-meeting__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.activity-meeting__map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12);
    background: var(--color-sand-light);
    color: var(--color-gray-500);
    text-align: center;
}

.activity-meeting__map-placeholder svg {
    opacity: 0.5;
}

/* Activity Policy */
.activity-policy__content {
    background: var(--color-sand-light);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

.activity-policy__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: #D1FAE5;
    color: #059669;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 100px;
    margin-bottom: var(--space-4);
}

.activity-policy__content p {
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin: 0;
}

/* Activity FAQ */
.activity-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.activity-faq__item {
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.activity-faq__item:hover {
    border-color: var(--color-gray-300);
}

.activity-faq__item.active {
    border-color: var(--color-terracotta);
}

.activity-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-5);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-dark);
    transition: background-color 0.2s ease;
}

.activity-faq__question:hover {
    background: var(--color-gray-100);
}

.activity-faq__question svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--color-gray-500);
}

.activity-faq__item.active .activity-faq__question svg {
    transform: rotate(180deg);
    color: var(--color-terracotta);
}

.activity-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.activity-faq__item.active .activity-faq__answer {
    max-height: 500px;
}

.activity-faq__answer p {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin: 0;
}

/* Activity Booking Sidebar */
.activity-sidebar {
    position: sticky;
    top: calc(var(--header-height, 80px) + var(--space-6));
}

.activity-booking-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.activity-booking-card__header {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
    color: white;
}

.activity-booking-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.activity-booking-card__price .label {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-booking-card__price .amount {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
}

.activity-booking-card__price .per {
    font-size: var(--text-sm);
    opacity: 0.9;
}

.activity-booking-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.activity-booking-card__rating svg {
    color: #FCD34D;
}

.activity-booking-card__rating .reviews {
    opacity: 0.8;
}

/* Booking Form */
.activity-booking-form {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.activity-booking-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.activity-booking-form label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark);
}

.activity-booking-form label svg {
    color: var(--color-gray-500);
}

.activity-booking-form label .optional {
    font-weight: 400;
    color: var(--color-gray-500);
}

.activity-booking-form input[type="text"],
.activity-booking-form input[type="email"],
.activity-booking-form input[type="tel"],
.activity-booking-form input[type="date"],
.activity-booking-form select,
.activity-booking-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--color-dark);
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.activity-booking-form input:focus,
.activity-booking-form select:focus,
.activity-booking-form textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.15);
}

.activity-booking-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
}

.activity-booking-form textarea {
    resize: vertical;
    min-height: 80px;
}

/* Booking Summary */
.activity-booking-card__summary {
    background: var(--color-sand-light);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}

.summary-row + .summary-row {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-gray-300);
}

.summary-total {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-dark);
}

/* Payment Options */
.activity-booking-card__payment {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.payment-option {
    position: relative;
}

.payment-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.payment-option label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-option input:checked + label {
    border-color: var(--color-terracotta);
    background: rgba(198, 93, 59, 0.05);
}

.payment-option label::before {
    content: '';
    grid-row: span 2;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: 50%;
    align-self: center;
    transition: all 0.2s ease;
}

.payment-option input:checked + label::before {
    border-color: var(--color-terracotta);
    background: var(--color-terracotta);
    box-shadow: inset 0 0 0 4px white;
}

.payment-option__title {
    font-weight: 600;
    color: var(--color-dark);
}

.payment-option__desc {
    grid-column: 2;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

.payment-option__amount {
    grid-row: span 2;
    align-self: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--color-terracotta);
}

/* Submit Button */
.activity-booking-card__submit {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
    font-weight: 600;
}

.activity-booking-card__submit .btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.activity-booking-card__submit .spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

.activity-booking-card__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-align: center;
    margin-top: var(--space-3);
}

.activity-booking-card__secure svg {
    color: #059669;
}

/* WhatsApp Quick Contact */
.activity-booking-card__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-gray-100);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.activity-booking-card__whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #25D366;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.activity-booking-card__whatsapp a:hover {
    opacity: 0.8;
}

/* Booking Success Modal */
.activity-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.activity-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.activity-modal__content {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.activity-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.activity-modal__close:hover {
    background: var(--color-gray-100);
    color: var(--color-dark);
}

.activity-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #D1FAE5;
    border-radius: 50%;
    margin-bottom: var(--space-6);
}

.activity-modal__icon svg {
    color: #059669;
}

.activity-modal__content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.activity-modal__ref {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

.activity-modal__ref strong {
    color: var(--color-terracotta);
    font-family: monospace;
    font-size: var(--text-base);
}

.activity-modal__content > p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.activity-modal__details {
    background: var(--color-sand-light);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    text-align: left;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.detail-row:not(:last-child) {
    border-bottom: 1px solid var(--color-sand);
}

.detail-row .label {
    color: var(--color-gray-500);
}

.detail-row .value {
    font-weight: 500;
    color: var(--color-dark);
}

.activity-modal__calendar {
    margin-bottom: var(--space-6);
}

.activity-modal__calendar p {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.calendar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.calendar-buttons .btn {
    font-size: var(--text-sm);
}

.activity-modal__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.activity-modal__actions .btn {
    flex: 1;
    max-width: 200px;
}

/* Activity Page Responsive */
@media (max-width: 1024px) {
    .activity-layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .activity-sidebar {
        position: relative;
        top: 0;
        order: -1;
    }
    
    .activity-inclusions__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .activity-hero {
        min-height: 60vh;
    }
    
    .activity-hero__title {
        font-size: var(--text-3xl);
    }
    
    .activity-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    
    .activity-hero__meta-item--price {
        width: 100%;
        justify-content: center;
    }
    
    .activity-main {
        padding: var(--space-10) 0;
    }
    
    .activity-section__title {
        font-size: var(--text-xl);
    }
    
    .activity-booking-card__header {
        padding: var(--space-5);
    }
    
    .activity-booking-form {
        padding: var(--space-5);
    }
    
    .activity-modal__content {
        padding: var(--space-6);
    }
    
    .activity-modal__actions {
        flex-direction: column;
    }
    
    .activity-modal__actions .btn {
        max-width: none;
    }
    
    .calendar-buttons {
        flex-direction: column;
    }
    
    .calendar-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .activity-hero .container {
        padding-bottom: var(--space-10);
    }
    
    .activity-breadcrumb {
        font-size: var(--text-xs);
    }
    
    .activity-hero__badge {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
    }
    
    .payment-option label {
        padding: var(--space-3);
    }
    
    .payment-option__amount {
        font-size: var(--text-base);
    }
}

/* Mobile Booking Bar */
.mobile-booking-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: white;
    border-top: 1px solid var(--color-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.mobile-booking-bar__price {
    display: flex;
    flex-direction: column;
}

.mobile-booking-bar__price .label {
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.mobile-booking-bar__price .amount {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
}

.mobile-booking-bar__btn {
    padding: var(--space-3) var(--space-8);
}

/* Form error state */
.activity-booking-form input.error,
.activity-booking-form select.error,
.activity-booking-form textarea.error {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

.activity-booking-form input.error:focus,
.activity-booking-form select.error:focus,
.activity-booking-form textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* ========================================
   PREMIUM ANIMATIONS & DESIGN ENHANCEMENTS
   For Chefchaouen & All Destination Pages
   ======================================== */

/* Premium Section Header Animations */
.dest-section-header-premium {
    position: relative;
    padding: var(--space-8) 0;
    margin-bottom: var(--space-16) !important;
}

.dest-section-header-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-terracotta), transparent);
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.dest-section-header-premium.is-visible::before {
    opacity: 1;
}

.dest-title-premium {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-gray-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.dest-title-premium.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dest-title-premium::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-terracotta-dark));
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
    box-shadow: 0 2px 8px rgba(180, 85, 65, 0.3);
}

.dest-title-premium.is-visible::after {
    width: 80px;
}

.dest-description-premium {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    line-height: 1.8;
    color: var(--color-gray-600);
    max-width: 800px;
    margin: var(--space-6) auto 0;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
                transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.dest-description-premium.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Premium CTA Button Enhancements */
.dest-cta__buttons {
    margin-top: var(--space-8);
    position: relative;
}

.dest-cta__buttons .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dest-cta__buttons .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.dest-cta__buttons .btn:hover::before {
    left: 100%;
}

.dest-cta__buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.dest-cta__buttons .btn:active {
    transform: translateY(-1px);
}

.dest-cta__buttons .btn > * {
    position: relative;
    z-index: 2;
}

/* White Button for Plan Custom Trip - Premium Style */
.btn-white,
.btn-premium-cta {
    background: #ffffff !important;
    color: var(--color-terracotta) !important;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2),
                0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-white:hover,
.btn-premium-cta:hover {
    background: var(--color-sand-light) !important;
    color: var(--color-terracotta-dark) !important;
    border-color: var(--color-sand-light);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px) scale(1.02);
}

.btn-white:active,
.btn-premium-cta:active {
    transform: translateY(-2px) scale(1.01);
}

/* Enhanced Primary Button in CTA */
.dest-cta__buttons .btn-primary {
    box-shadow: 0 4px 16px rgba(180, 85, 65, 0.3);
}

.dest-cta__buttons .btn-primary:hover {
    box-shadow: 0 8px 28px rgba(180, 85, 65, 0.4);
}

/* Enhanced Outline Button in CTA */
.dest-cta__buttons .btn-outline {
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dest-cta__buttons .btn-outline:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Enhanced Page-Wide Premium Animations */
.dest-gallery-wrapper {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.dest-gallery-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Premium Card Hover Effects */
.dest-tour-card,
.dest-activity-card {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.dest-tour-card:hover,
.dest-activity-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Responsive Design for Premium Animations */
@media (max-width: 768px) {
    .dest-title-premium {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
    
    .dest-description-premium {
        font-size: clamp(1rem, 3vw, 1.15rem);
    }
    
    .dest-section-header-premium {
        padding: var(--space-6) 0;
        margin-bottom: var(--space-12) !important;
    }
    
    .dest-cta__buttons {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .dest-cta__buttons .btn {
        width: 100%;
    }
    
    .dest-title-premium::after {
        width: 60px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-section-header-premium::before,
    .dest-title-premium,
    .dest-description-premium,
    .dest-gallery-wrapper,
    .dest-cta__buttons .btn {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================
   DESTINATION CONTENT ENHANCEMENT
   SEO-Friendly & Readable Content Styling
   ======================================== */

.dest-content-enhanced {
    line-height: 1.8;
    color: var(--color-gray-700);
    font-size: 1.125rem;
}

.dest-content-enhanced p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.dest-content-enhanced p:first-child {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.dest-content-enhanced p:first-child::first-letter {
    font-size: 3.5rem;
    font-weight: 700;
    float: left;
    line-height: 1;
    margin: 0.1em 0.1em 0 0;
    color: var(--color-terracotta);
    font-family: var(--font-display, serif);
}

.dest-content-enhanced strong,
.dest-content-enhanced b {
    font-weight: 600;
    color: var(--color-dark);
}

.dest-content-enhanced em,
.dest-content-enhanced i {
    font-style: italic;
    color: var(--color-gray-600);
}

.dest-content-enhanced a {
    color: var(--color-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.dest-content-enhanced a:hover {
    color: var(--color-terracotta-dark);
    text-decoration-thickness: 2px;
}

.dest-content-enhanced ul,
.dest-content-enhanced ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.dest-content-enhanced li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.dest-content-enhanced h2,
.dest-content-enhanced h3,
.dest-content-enhanced h4 {
    font-family: var(--font-display);
    color: var(--color-dark);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.dest-content-enhanced h2 {
    font-size: 2rem;
}

.dest-content-enhanced h3 {
    font-size: 1.75rem;
}

.dest-content-enhanced h4 {
    font-size: 1.5rem;
}

.dest-content-text {
    max-width: none;
}

/* Responsive content styling */
@media (max-width: 768px) {
    .dest-content-enhanced {
        font-size: 1rem;
    }
    
    .dest-content-enhanced p:first-child {
        font-size: 1.125rem;
    }
    
    .dest-content-enhanced p:first-child::first-letter {
        font-size: 2.5rem;
    }
    
    .dest-content-enhanced h2 {
        font-size: 1.75rem;
    }
    
    .dest-content-enhanced h3 {
        font-size: 1.5rem;
    }
    
    .dest-content-enhanced h4 {
        font-size: 1.25rem;
    }
}

/* ========================================
   HIDE REPETITIVE SIDEBAR ON MOBILE/TABLET
   When section selector is present (Chefchaouen)
   ======================================== */

/* Hide sidebar on tablet and mobile when section selector exists */
@media (max-width: 1024px) {
    .dest-sidebar--has-selector {
        display: none;
    }
}

/* Ensure section selector is visible on all devices */
.dest-section-selector {
    display: block;
}

/* Keep desktop layout unchanged - sidebar visible on desktop */
@media (min-width: 1025px) {
    .dest-sidebar--has-selector {
        display: block;
    }
}

/* ========================================
   PREMIUM QUICK INFO CARDS ANIMATIONS
   Luxury fade-up, scale, glow & icon illumination
   ======================================== */

/* Enhanced initial state for premium load animation */
.dest-quick-info__item {
    /* Initial state for fade-up + scale animation */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Enhanced styling */
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    
    /* Subtle initial shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

/* Animated state when visible */
.dest-quick-info__item.is-visible,
.dest-quick-info__item.dest-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Premium hover effects with gentle glow */
.dest-quick-info__item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(180, 85, 65, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(180, 85, 65, 0.1);
    background: rgba(250, 246, 240, 0.8);
}

/* Icon container for illumination effect */
.dest-quick-info__item svg {
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(180, 85, 65, 0.2));
}

/* Icon illumination on hover */
.dest-quick-info__item:hover svg {
    transform: scale(1.15) rotate(5deg);
    color: var(--color-terracotta-dark);
    filter: drop-shadow(0 4px 12px rgba(180, 85, 65, 0.4))
            drop-shadow(0 0 8px rgba(180, 85, 65, 0.3));
}

/* Subtle background glow effect on hover */
.dest-quick-info__item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 85, 65, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.dest-quick-info__item:hover::before {
    width: 200px;
    height: 200px;
}

/* Ensure text stays above glow effect */
.dest-quick-info__item > div {
    position: relative;
    z-index: 1;
}

/* Responsive adjustments for premium animations */
@media (max-width: 768px) {
    .dest-quick-info__item {
        padding: var(--space-3) var(--space-3);
        transform: translateY(15px) scale(0.96);
    }
    
    .dest-quick-info__item.is-visible,
    .dest-quick-info__item.dest-fade-in.is-visible {
        transform: translateY(0) scale(1);
    }
    
    .dest-quick-info__item:hover {
        transform: translateY(-2px) scale(1.01);
    }
    
    .dest-quick-info__item:hover svg {
        transform: scale(1.1) rotate(3deg);
    }
    
    .dest-quick-info__item:hover::before {
        width: 150px;
        height: 150px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-quick-info__item {
        opacity: 1 !important;
        transform: none !important;
        transition: box-shadow 0.3s ease, background 0.3s ease !important;
    }
    
    .dest-quick-info__item:hover {
        transform: none !important;
    }
    
    .dest-quick-info__item svg {
        transition: color 0.3s ease !important;
        filter: none !important;
    }
    
    .dest-quick-info__item:hover svg {
        transform: none !important;
        filter: none !important;
    }
    
    .dest-quick-info__item::before {
        display: none;
    }
}

/* ========================================
   AUTOMATIC GLOW & PULSE ANIMATIONS
   For Quick Info Cards - Premium & Elegant
   ======================================== */

/* Keyframes for soft pulse animation */
@keyframes premiumPulse {
    0% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
                    0 0 0 0 rgba(180, 85, 65, 0.1);
    }
    50% {
        box-shadow: 0 4px 16px rgba(180, 85, 65, 0.12),
                    0 0 0 8px rgba(180, 85, 65, 0.05);
    }
    100% {
        box-shadow: 0 3px 12px rgba(180, 85, 65, 0.08),
                    0 0 0 4px rgba(180, 85, 65, 0.03);
    }
}

/* Keyframes for icon glow pulse */
@keyframes iconGlow {
    0% {
        filter: drop-shadow(0 2px 4px rgba(180, 85, 65, 0.2));
    }
    50% {
        filter: drop-shadow(0 4px 12px rgba(180, 85, 65, 0.35))
                drop-shadow(0 0 6px rgba(180, 85, 65, 0.25));
    }
    100% {
        filter: drop-shadow(0 3px 8px rgba(180, 85, 65, 0.25))
                drop-shadow(0 0 4px rgba(180, 85, 65, 0.15));
    }
}

/* Enhanced quick info item with automatic glow */
.dest-quick-info__item.is-visible,
.dest-quick-info__item.dest-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    
    /* Automatic subtle glow on viewport entry */
    box-shadow: 0 3px 12px rgba(180, 85, 65, 0.08),
                0 0 0 4px rgba(180, 85, 65, 0.03);
    
    /* Soft pulse animation that gently settles */
    animation: premiumPulse 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Icon automatic glow when visible */
.dest-quick-info__item.is-visible svg,
.dest-quick-info__item.dest-fade-in.is-visible svg {
    filter: drop-shadow(0 3px 8px rgba(180, 85, 65, 0.25))
            drop-shadow(0 0 4px rgba(180, 85, 65, 0.15));
    
    /* Icon glow pulse animation */
    animation: iconGlow 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced hover - builds upon automatic glow */
.dest-quick-info__item.is-visible:hover,
.dest-quick-info__item.dest-fade-in.is-visible:hover {
    transform: translateY(-4px) scale(1.02);
    
    /* Enhanced glow on hover - builds upon automatic glow */
    box-shadow: 0 10px 28px rgba(180, 85, 65, 0.2),
                0 6px 16px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(180, 85, 65, 0.15),
                0 0 0 6px rgba(180, 85, 65, 0.05);
    
    background: rgba(250, 246, 240, 0.9);
    
    /* Pause pulse animation on hover */
    animation-play-state: paused;
}

/* Enhanced icon glow on hover */
.dest-quick-info__item.is-visible:hover svg,
.dest-quick-info__item.dest-fade-in.is-visible:hover svg {
    transform: scale(1.15) rotate(5deg);
    color: var(--color-terracotta-dark);
    
    /* Enhanced icon glow on hover */
    filter: drop-shadow(0 6px 16px rgba(180, 85, 65, 0.5))
            drop-shadow(0 0 12px rgba(180, 85, 65, 0.4))
            drop-shadow(0 0 6px rgba(180, 85, 65, 0.3));
    
    /* Pause icon glow animation on hover */
    animation-play-state: paused;
}

/* Enhanced background glow on hover - builds upon automatic */
.dest-quick-info__item.is-visible:hover::before,
.dest-quick-info__item.dest-fade-in.is-visible:hover::before {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(180, 85, 65, 0.15) 0%, transparent 70%);
}

/* Responsive adjustments for automatic glow */
@media (max-width: 768px) {
    @keyframes premiumPulse {
        0% {
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04),
                        0 0 0 0 rgba(180, 85, 65, 0.08);
        }
        50% {
            box-shadow: 0 3px 12px rgba(180, 85, 65, 0.1),
                        0 0 0 6px rgba(180, 85, 65, 0.04);
        }
        100% {
            box-shadow: 0 2px 8px rgba(180, 85, 65, 0.06),
                        0 0 0 3px rgba(180, 85, 65, 0.02);
        }
    }
    
    .dest-quick-info__item.is-visible,
    .dest-quick-info__item.dest-fade-in.is-visible {
        box-shadow: 0 2px 8px rgba(180, 85, 65, 0.06),
                    0 0 0 3px rgba(180, 85, 65, 0.02);
    }
    
    .dest-quick-info__item.is-visible:hover,
    .dest-quick-info__item.dest-fade-in.is-visible:hover {
        box-shadow: 0 8px 20px rgba(180, 85, 65, 0.15),
                    0 4px 12px rgba(0, 0, 0, 0.08),
                    0 0 0 1px rgba(180, 85, 65, 0.12),
                    0 0 0 5px rgba(180, 85, 65, 0.04);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-quick-info__item.is-visible,
    .dest-quick-info__item.dest-fade-in.is-visible {
        animation: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    
    .dest-quick-info__item.is-visible svg,
    .dest-quick-info__item.dest-fade-in.is-visible svg {
        animation: none !important;
        filter: drop-shadow(0 2px 4px rgba(180, 85, 65, 0.2)) !important;
    }
}

/* ========================================
   SEQUENTIAL GLOW LOOP ANIMATION
   Guided Highlight Effect - Premium & Elegant
   ======================================== */

/* Keyframes for sequential glow loop */
@keyframes sequentialGlow {
    0%, 100% {
        box-shadow: 0 3px 12px rgba(180, 85, 65, 0.08),
                    0 0 0 4px rgba(180, 85, 65, 0.03);
        transform: scale(1);
    }
    33.33% {
        box-shadow: 0 6px 20px rgba(180, 85, 65, 0.18),
                    0 0 0 6px rgba(180, 85, 65, 0.08),
                    0 0 20px rgba(180, 85, 65, 0.1);
        transform: scale(1.01);
    }
    66.66% {
        box-shadow: 0 3px 12px rgba(180, 85, 65, 0.08),
                    0 0 0 4px rgba(180, 85, 65, 0.03);
        transform: scale(1);
    }
}

/* Keyframes for icon glow in sequence */
@keyframes sequentialIconGlow {
    0%, 100% {
        filter: drop-shadow(0 3px 8px rgba(180, 85, 65, 0.25))
                drop-shadow(0 0 4px rgba(180, 85, 65, 0.15));
        transform: scale(1);
    }
    33.33% {
        filter: drop-shadow(0 5px 14px rgba(180, 85, 65, 0.4))
                drop-shadow(0 0 8px rgba(180, 85, 65, 0.3))
                drop-shadow(0 0 12px rgba(180, 85, 65, 0.2));
        transform: scale(1.08);
    }
    66.66% {
        filter: drop-shadow(0 3px 8px rgba(180, 85, 65, 0.25))
                drop-shadow(0 0 4px rgba(180, 85, 65, 0.15));
        transform: scale(1);
    }
}

/* Sequential glow animation for visible cards */
.dest-quick-info__item.is-visible,
.dest-quick-info__item.dest-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    
    /* Base glow state */
    box-shadow: 0 3px 12px rgba(180, 85, 65, 0.08),
                0 0 0 4px rgba(180, 85, 65, 0.03);
    
    /* Sequential glow loop - will be controlled by JavaScript */
    animation: sequentialGlow 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Staggered delays for sequential effect */
.dest-quick-info__item.is-visible:nth-child(1),
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(1) {
    animation-delay: 0s;
}

.dest-quick-info__item.is-visible:nth-child(2),
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(2) {
    animation-delay: 1.5s;
}

.dest-quick-info__item.is-visible:nth-child(3),
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(3) {
    animation-delay: 3s;
}

/* Icon sequential glow */
.dest-quick-info__item.is-visible svg,
.dest-quick-info__item.dest-fade-in.is-visible svg {
    filter: drop-shadow(0 3px 8px rgba(180, 85, 65, 0.25))
            drop-shadow(0 0 4px rgba(180, 85, 65, 0.15));
    
    animation: sequentialIconGlow 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

}

.dest-quick-info__item.is-visible:nth-child(2) svg,
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(2) svg {
    animation-delay: 1.5s;
}

.dest-quick-info__item.is-visible:nth-child(3) svg,
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(3) svg {
    animation-delay: 3s;
}

/* Pause animation on hover */
.dest-quick-info__item.is-visible:hover,
.dest-quick-info__item.dest-fade-in.is-visible:hover {
    animation-play-state: paused;
    transform: translateY(-4px) scale(1.03);
    
    /* Enhanced glow on hover */
    box-shadow: 0 10px 28px rgba(180, 85, 65, 0.25),
                0 6px 16px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(180, 85, 65, 0.15),
                0 0 0 8px rgba(180, 85, 65, 0.08),
                0 0 30px rgba(180, 85, 65, 0.15);
    
    background: rgba(250, 246, 240, 0.95);
}

/* Enhanced icon glow on hover */
.dest-quick-info__item.is-visible:hover svg,
.dest-quick-info__item.dest-fade-in.is-visible:hover svg {
    animation-play-state: paused;
    transform: scale(1.18) rotate(5deg);
    color: var(--color-terracotta-dark);
    
    filter: drop-shadow(0 6px 16px rgba(180, 85, 65, 0.55))
            drop-shadow(0 0 12px rgba(180, 85, 65, 0.45))
            drop-shadow(0 0 8px rgba(180, 85, 65, 0.35))
            drop-shadow(0 0 4px rgba(180, 85, 65, 0.25));
}

/* Enhanced background glow on hover */
.dest-quick-info__item.is-visible:hover::before,
.dest-quick-info__item.dest-fade-in.is-visible:hover::before {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(180, 85, 65, 0.18) 0%, transparent 70%);
}

/* Responsive adjustments for sequential glow */
@media (max-width: 768px) {
    .dest-quick-info__item.is-visible,
    .dest-quick-info__item.dest-fade-in.is-visible {
        animation-duration: 4s;
    }
    
    .dest-quick-info__item.is-visible:nth-child(2),
    .dest-quick-info__item.dest-fade-in.is-visible:nth-child(2) {
        animation-delay: 1.33s;
    }
    
    .dest-quick-info__item.is-visible:nth-child(3),
    .dest-quick-info__item.dest-fade-in.is-visible:nth-child(3) {
        animation-delay: 2.66s;
    }
    
    .dest-quick-info__item.is-visible:hover,
    .dest-quick-info__item.dest-fade-in.is-visible:hover {
        transform: translateY(-2px) scale(1.02);
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dest-quick-info__item.is-visible,
    .dest-quick-info__item.dest-fade-in.is-visible {
        animation: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    
    .dest-quick-info__item.is-visible svg,
    .dest-quick-info__item.dest-fade-in.is-visible svg {
        animation: none !important;
        filter: drop-shadow(0 2px 4px rgba(180, 85, 65, 0.2)) !important;
    }
}

/* Fix icon animation selectors - SVG is direct child of item */
.dest-quick-info__item.is-visible:nth-child(1) svg,
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(1) svg {
    animation-delay: 0s;
}

.dest-quick-info__item.is-visible:nth-child(2) svg,
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(2) svg {
    animation-delay: 1.5s;
}

.dest-quick-info__item.is-visible:nth-child(3) svg,
.dest-quick-info__item.dest-fade-in.is-visible:nth-child(3) svg {
    animation-delay: 3s;
}

/* ========================================
   CARD FOOTER BUTTON RESPONSIVE FIX
   Make View/Book buttons compact on mobile/tablet
   ======================================== */

/* Tablet adjustments */
@media (max-width: 1024px) {
    .card-footer .btn,
    .dest-tours-grid .card-footer .btn,
    .dest-activities-section .card-footer .btn {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
        min-width: auto;
        white-space: nowrap;
    }
}

/* Mobile adjustments - make buttons more compact */
@media (max-width: 768px) {
    .card-footer {
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
    }
    
    .card-footer .btn,
    .dest-tours-grid .card-footer .btn,
    .dest-activities-section .card-footer .btn {
        padding: 6px var(--space-3);
        font-size: var(--text-xs);
        min-width: auto;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Ensure consistent sizing for both View and Book buttons */
    .card-footer .btn-primary.btn-sm,
    .card-footer .btn-primary.btn-sm.btn-primary--activity {
        padding: 6px var(--space-3);
        font-size: 11px;
        line-height: 1.4;
    }
    
    /* Keep price and button balanced */
    .card-price {
        flex: 1;
        min-width: 0;
    }
    
    .card-footer .btn {
        margin-left: auto;
    }
}

/* Fix View/View Details buttons on tour listing and destination pages - mobile */
@media (max-width: 768px) {
    /* Override full-width rule for card-footer buttons on tour archive and destination pages */
    .card-footer .btn-primary.btn-sm,
    .grid .card-footer .btn-primary.btn-sm,
    article .card-footer .btn-primary.btn-sm,
    section .card-footer .btn-primary.btn-sm {
        width: auto !important;
        max-width: none !important;
        padding: 6px 16px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    
    /* Ensure card-footer uses flex with proper alignment */
    .card-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}

/* Extra fix for phones (480px and below) */
@media (max-width: 480px) {
    /* Make buttons even more compact on phones */
    .card-footer .btn-primary.btn-sm,
    .grid .card-footer .btn-primary.btn-sm,
    article .card-footer .btn-primary.btn-sm,
    section .card-footer .btn-primary.btn-sm {
        padding: 5px 14px !important;
        font-size: 10px !important;
    }
}

/* ========================================
   PREMIUM TIMELINE / ITINERARY SYSTEM
   ======================================== */

.tour-timeline-section {
    position: relative;
}

.tour-timeline-title {
    font-size: var(--text-2xl, 2rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-8);
    position: relative;
    padding-bottom: var(--space-4);
}

.tour-timeline-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-terracotta-light));
    border-radius: 2px;
}

/* Sticky Progress Indicator */
.tour-timeline-progress {
    position: sticky;
    top: 80px;
    z-index: 10;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
    margin-bottom: var(--space-8);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tour-timeline-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-terracotta-light));
    width: 0%;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

/* Timeline Container */
.tour-timeline-container {
    position: relative;
    padding-left: 90px; /* Compact space for marker */
}

/* Timeline Step */
.tour-timeline-step {
    position: relative;
    margin-bottom: var(--space-8);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered animation delays for wave effect */
.tour-timeline-step:nth-child(1) { transition-delay: 0s; }
.tour-timeline-step:nth-child(2) { transition-delay: 0.1s; }
.tour-timeline-step:nth-child(3) { transition-delay: 0.2s; }
.tour-timeline-step:nth-child(4) { transition-delay: 0.3s; }
.tour-timeline-step:nth-child(5) { transition-delay: 0.4s; }
.tour-timeline-step:nth-child(6) { transition-delay: 0.5s; }
.tour-timeline-step:nth-child(7) { transition-delay: 0.6s; }
.tour-timeline-step:nth-child(8) { transition-delay: 0.7s; }
.tour-timeline-step:nth-child(n+9) { transition-delay: 0.8s; }

.tour-timeline-step.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.tour-timeline-step:last-child {
    margin-bottom: 0;
}

/* Vertical connecting line between steps */
.tour-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -40px; /* Centered under the icon */
    top: 70px; /* Start below icon + label */
    width: 2px;
    height: calc(100% - 30px);
    background: var(--color-terracotta-light);
    border-radius: 2px;
    z-index: 1;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    opacity: 0;
}

.tour-timeline-step:not(:last-child).is-visible::after {
    transform: scaleY(1);
    opacity: 1;
}

/* 1-Day Tour Timeline - Shorter connecting lines for laptop/tablet */
.tour-timeline-single-day .tour-timeline-step:not(:last-child)::after {
    top: 115px !important; /* Start well below the time text */
    height: calc(100% - 140px) !important; /* Much shorter line with clear gaps */
}

.tour-timeline-step:last-child .tour-timeline-step-marker::after {
    display: none;
}

/* Timeline Marker - Compact vertical layout */
.tour-timeline-step-marker {
    position: absolute;
    left: -75px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 2;
    width: 60px;
    text-align: center;
}

.tour-timeline-step-icon {
    width: 44px;
    height: 44px;
    background: var(--color-terracotta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 3px 10px rgba(198, 93, 59, 0.25);
    position: relative;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid white;
    flex-shrink: 0;
}

.tour-timeline-step-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

/* Day number inside icon (for multi-day tours) */
.tour-timeline-day-num {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    color: white;
    line-height: 1;
}

.tour-timeline-step:hover .tour-timeline-step-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(198, 93, 59, 0.4);
}

.tour-timeline-step.is-active .tour-timeline-step-icon {
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(198, 93, 59, 0.5);
    animation: timelinePulse 2s ease-in-out infinite;
}

@keyframes timelinePulse {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(198, 93, 59, 0.5);
    }
    50% {
        box-shadow: 0 8px 32px rgba(198, 93, 59, 0.7);
    }
}

/* Timeline Label & Time - Stacked below icon */
.tour-timeline-step-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    margin-top: var(--space-1);
}

.tour-timeline-time-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-terracotta);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tour-timeline-time-value {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-gray-700);
    white-space: nowrap;
}

/* Timeline Content - Card positioned to the right of marker */
.tour-timeline-step-content {
    padding-left: var(--space-4);
    /* Removed duplicate border - using only the vertical timeline line */
}

.tour-timeline-step-card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-terracotta);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4) var(--space-5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-timeline-step:hover .tour-timeline-step-card {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tour-timeline-step.is-active .tour-timeline-step-card {
    box-shadow: 0 4px 16px rgba(198, 93, 59, 0.12);
}

.tour-timeline-step-title {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.tour-timeline-step-description {
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.tour-timeline-step-description p {
    margin-bottom: var(--space-3);
}

.tour-timeline-step-description p:last-child {
    margin-bottom: 0;
}

.tour-timeline-step-location {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-sand-light);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-700);
    font-weight: 500;
}

.tour-timeline-step-location svg {
    width: 16px;
    height: 16px;
    color: var(--color-terracotta);
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .tour-timeline-progress {
        top: 60px;
    }
    
    .tour-timeline-container {
        padding-left: 80px;
    }
    
    /* Line segments for tablet */
    .tour-timeline-step:not(:last-child)::after {
        left: -38px;
        top: 65px;
        height: calc(100% - 40px);
    }
    
    /* 1-Day Tour Timeline - Shorter lines on tablet */
    .tour-timeline-single-day .tour-timeline-step:not(:last-child)::after {
        top: 110px !important; /* Start well below the time text */
        height: calc(100% - 135px) !important; /* Much shorter line with clear gaps */
    }
    
    .tour-timeline-step-marker {
        left: -65px;
        width: 55px;
    }
    
    .tour-timeline-step-icon {
        width: 38px;
        height: 38px;
        border: 2px solid white;
    }
    
    .tour-timeline-step-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .tour-timeline-step-content {
        padding-left: var(--space-3);
    }
}

@media (max-width: 768px) {
    .tour-timeline-title {
        font-size: var(--text-xl, 1.5rem);
        margin-bottom: var(--space-6);
    }
    
    .tour-timeline-progress {
        top: 50px;
        height: 3px;
        margin-bottom: var(--space-6);
    }
    
    .tour-timeline-container {
        padding-left: 0;
    }
    
    /* No vertical line on mobile - simplified layout */
    .tour-timeline-step:not(:last-child)::after {
        display: none;
    }
    
    .tour-timeline-step {
        margin-bottom: var(--space-6);
        padding-left: 0;
    }
    
    .tour-timeline-step-marker {
        position: relative;
        left: 0;
        flex-direction: row;
        align-items: center;
        width: auto;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }
    
    .tour-timeline-step-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .tour-timeline-step-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .tour-timeline-step-time {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
    }
    
    .tour-timeline-time-label {
        font-size: 10px;
    }
    
    .tour-timeline-time-value {
        font-size: var(--text-sm, 0.875rem);
    }
    
    .tour-timeline-step-content {
        padding-left: 0;
        margin-left: 0;
    }
    
    .tour-timeline-step-card {
        padding: var(--space-3) var(--space-4);
        border-left: 3px solid var(--color-terracotta);
    }
    
    .tour-timeline-step:hover .tour-timeline-step-card {
        transform: translateY(-2px);
    }
    
    .tour-timeline-step-title {
        font-size: var(--text-lg, 1.125rem);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .tour-timeline-step {
        transition: none;
    }
    
    .tour-timeline-step-icon {
        transition: none;
    }
    
    .tour-timeline-step-card {
        transition: none;
    }
    
    .tour-timeline-progress-bar {
        transition: none;
    }
    
    .tour-timeline-step.is-active .tour-timeline-step-icon {
        animation: none;
    }
}

/* ========================================
   PREMIUM TOUR PAGE STYLING
   ======================================== */

/* Premium Hero Section */
.tour-hero-premium {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.tour-hero-bg-premium {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tour-hero-bg-premium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tour-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(26, 26, 26, 0.4) 100%);
    z-index: 2;
}

.tour-hero-content-premium {
    position: relative;
    z-index: 3;
    color: white;
    padding: var(--space-8) 0 0 0;
    max-width: 800px;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    margin-bottom: var(--space-2);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tour-hero-breadcrumb-premium {
    display: none;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
    color: rgba(255, 255, 255, 0.9);
}

.tour-hero-breadcrumb-premium a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.tour-hero-breadcrumb-premium a:hover {
    color: white;
}

.tour-hero-breadcrumb-premium span {
    color: rgba(255, 255, 255, 0.6);
}

.hero-badge-premium {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-terracotta);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.3);
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

/* GetYourGuide-style badge variants */
.hero-badge-premium.hero-badge--toprated {
    background: #2d8a3e;
    box-shadow: 0 4px 12px rgba(45, 138, 62, 0.3);
}

.hero-badge-premium.hero-badge--bestseller {
    background: #f5a623;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

.hero-badge-premium.hero-badge--popular {
    background: #5856d6;
    box-shadow: 0 4px 12px rgba(88, 86, 214, 0.3);
}

.hero-badge-premium.hero-badge--new {
    background: #0071eb;
    box-shadow: 0 4px 12px rgba(0, 113, 235, 0.3);
}

.hero-badge-premium.hero-badge--signature {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

.tour-hero-title-premium {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: white;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 4px 40px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
    letter-spacing: -0.02em;
}

.tour-hero-meta-premium {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: 0;
    margin-bottom: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.tour-hero-meta-item-premium {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 500;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.tour-hero-meta-item-premium:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.tour-hero-meta-item-premium svg {
    flex-shrink: 0;
}

/* Premium Section Styling */
.tour-section-premium {
    margin-bottom: var(--space-10);
}

.tour-section-title-premium {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-5);
    position: relative;
    padding-bottom: var(--space-3);
    line-height: 1.3;
}

.tour-section-title-premium::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-terracotta-light));
    border-radius: 2px;
}

.tour-description-premium {
    font-size: 1.0625rem; /* 17px */
    line-height: 1.75;
    color: var(--color-gray-700);
    max-width: 800px;
    letter-spacing: 0.01em;
}

.tour-description-premium p {
    margin-bottom: var(--space-5);
}

.tour-description-premium p:last-child {
    margin-bottom: 0;
}

/* Premium Highlights Grid */
/* Premium Highlights List */
.tour-highlights-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tour-highlights-list-premium {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tour-highlight-item-premium {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-gray-700);
    background: #F5F5F0;
    border-radius: 12px;
    padding: var(--space-5) var(--space-6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(198, 93, 59, 0.1);
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.tour-highlight-item-premium.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tour-highlight-item-premium:hover {
    background: var(--color-terracotta);
    color: white;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(198, 93, 59, 0.35);
    border-color: var(--color-terracotta);
}

.tour-highlight-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.tour-highlight-text {
    flex: 1;
}

@media (max-width: 768px) {
    .tour-highlight-item-premium {
        padding: var(--space-4) var(--space-5);
        font-size: 1rem;
        gap: var(--space-3);
    }
    
    .tour-highlight-icon {
        width: 20px;
        height: 20px;
    }
}

/* Fix sticky context for booking sidebar - ensure parents don't break sticky */
@media (min-width: 769px) {
    .section:has(.tour-content-wrapper),
    section:has(.tour-content-wrapper),
    .section:has(.booking-sidebar-premium),
    section:has(.booking-sidebar-premium) {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .tour-content-wrapper {
        overflow: visible !important;
    }
    
    .container:has(.tour-content-wrapper) {
        overflow: visible !important;
    }
}

/* Premium Booking Sidebar - Desktop Sticky */
@media (min-width: 769px) {
    .tour-content-wrapper > .booking-sidebar-premium,
.booking-sidebar-premium {
    position: -webkit-sticky !important;
    position: sticky !important;
        top: 100px !important;
        align-self: start !important;
        height: fit-content !important;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    z-index: 10;
        flex-shrink: 0;
    }
}

.booking-card-premium {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-6);
}

.booking-card-price-premium {
    text-align: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid var(--color-gray-100);
}

.booking-card-price-value-premium {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--color-terracotta);
    display: block;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.booking-card-price-unit-premium {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    font-weight: 500;
}

.booking-price-breakdown-premium {
    background: var(--color-sand-light);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.booking-price-row-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-gray-700);
}

.booking-price-row-premium:last-child {
    margin-bottom: 0;
}

.booking-price-row-surcharge {
    color: var(--color-warning);
    font-weight: 600;
}

.booking-price-row-total {
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 2px solid var(--color-sand);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-dark);
}

.btn-booking-premium {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-terracotta-light));
    border: none;
    box-shadow: 0 4px 16px rgba(198, 93, 59, 0.3);
    transition: all 0.3s ease;
}

.btn-booking-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(198, 93, 59, 0.4);
}

.booking-note-premium {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-top: var(--space-4);
    line-height: 1.6;
}

.booking-contact-premium {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-100);
    text-align: center;
}

.booking-contact-text-premium {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-4);
}

.btn-whatsapp-premium {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-sand);
    color: var(--color-dark);
    border: 1px solid var(--color-sand-dark);
    transition: all 0.3s ease;
}

.btn-whatsapp-premium:hover {
    background: var(--color-sand-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.booking-trust-premium {
    padding: var(--space-6);
    background: var(--color-sand-light);
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.booking-trust-item-premium {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    font-weight: 500;
}

.booking-trust-item-premium:last-child {
    margin-bottom: 0;
}

.booking-trust-item-premium svg {
    flex-shrink: 0;
}

/* ========================================
   GETYOURGUIDE-STYLE BOOKING FORM
   ======================================== */

.gyg-booking-card {
    padding: var(--space-4);
}

/* Price Header */
.gyg-booking-price {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-2);
}

.gyg-price-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem;
    line-height: 1.2;
}

.gyg-price-from {
    font-size: var(--text-sm);
    color: #5a5a5a;
    margin-right: 0.15rem;
}

.gyg-price-original {
    font-size: 0.9rem;
    color: #5a5a5a;
    text-decoration: line-through;
    margin-right: 0.2rem;
}

.gyg-price-main {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0;
}

.gyg-price-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.2;
}

.gyg-price-unit {
    font-size: var(--text-sm);
    color: #5a5a5a;
}

/* Booking Form */
.gyg-booking-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Dropdown Base */
.gyg-dropdown {
    position: relative;
}

.gyg-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: white;
    border: 1px solid #1a1a1a;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--text-base);
    color: #1a1a1a;
    text-align: left;
}

.gyg-dropdown-trigger svg:first-child {
    color: #1a1a1a;
}

.gyg-dropdown-trigger:hover {
    border-color: #1a1a1a;
}

.gyg-dropdown-trigger:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
}

.gyg-dropdown.is-open .gyg-dropdown-trigger {
    border-color: #1a1a1a;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.gyg-dropdown-label {
    flex: 1;
    font-weight: 500;
    color: #1a1a1a;
}

.gyg-dropdown-arrow {
    transition: transform 0.2s ease;
    color: #1a1a1a;
}

.gyg-dropdown.is-open .gyg-dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.gyg-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-terracotta);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--space-4);
    z-index: 100;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.gyg-dropdown.is-open .gyg-dropdown-panel {
    display: block;
    animation: slideDown 0.2s ease;
}

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

/* Traveler Rows */
.gyg-traveler-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.gyg-traveler-row:last-child {
    border-bottom: none;
}

.gyg-traveler-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gyg-traveler-type {
    font-weight: 600;
    color: var(--color-dark);
    font-size: var(--text-base);
}

.gyg-traveler-age {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

/* Counter */
.gyg-counter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.gyg-counter-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-300);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-gray-600);
}

.gyg-counter-btn:hover:not(:disabled) {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
    background: var(--color-sand-light);
}

.gyg-counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gyg-counter-value {
    width: 32px;
    text-align: center;
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-dark);
}

/* Calendar Panel */
.gyg-calendar-panel {
    padding: var(--space-4);
    left: -50%;
    right: auto;
    width: 580px;
    max-width: 95vw;
}

.gyg-calendar-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.gyg-calendar-month {
    min-width: 0;
}

.gyg-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.gyg-calendar-title {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-dark);
}

.gyg-calendar-nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-gray-600);
}

.gyg-calendar-nav:hover {
    background: var(--color-sand-light);
    color: var(--color-terracotta);
}

.gyg-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--space-2);
}

.gyg-calendar-weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    padding: var(--space-2) 0;
}

.gyg-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.gyg-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border: none;
    background: transparent;
    color: var(--color-dark);
}

.gyg-calendar-day:hover:not(.gyg-day-disabled):not(.gyg-day-empty) {
    background: var(--color-sand-light);
}

.gyg-calendar-day.gyg-day-selected {
    background: var(--color-terracotta);
    color: white;
    font-weight: 600;
}

.gyg-calendar-day.gyg-day-today {
    font-weight: 700;
    border: 2px solid var(--color-terracotta);
}

.gyg-calendar-day.gyg-day-disabled {
    color: var(--color-gray-300);
    cursor: not-allowed;
}

.gyg-calendar-day.gyg-day-empty {
    cursor: default;
}

.gyg-calendar-day.gyg-day-offer::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-terracotta);
}

.gyg-calendar-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
}

.gyg-special-offer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}

.gyg-special-offer svg {
    color: var(--color-terracotta);
}

/* Language Panel */
.gyg-language-panel {
    padding: var(--space-2);
}

.gyg-language-option {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--color-gray-700);
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.gyg-language-option:hover {
    background: var(--color-sand-light);
}

.gyg-language-option.active {
    background: var(--color-terracotta);
    color: white;
    font-weight: 500;
}

/* Submit Button - GetYourGuide Blue */
.gyg-submit-btn {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    margin-top: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: white;
    background: #0071eb;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gyg-submit-btn:hover {
    background: #005bc4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 235, 0.3);
}

/* Trust Badges */
.gyg-trust-badges {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-gray-100);
}

.gyg-trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gyg-trust-item:last-child {
    margin-bottom: 0;
}

.gyg-trust-icon {
    flex-shrink: 0;
    color: #22c55e;
    margin-top: 2px;
}

.gyg-trust-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gyg-trust-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-dark);
}

.gyg-trust-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    line-height: 1.5;
}

.gyg-trust-link {
    color: var(--color-terracotta);
    text-decoration: underline;
    font-weight: 500;
}

.gyg-trust-link:hover {
    color: var(--color-terracotta-dark, #b54d2f);
}

/* Modal Overlay */
.gyg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gyg-modal-overlay.is-open {
    display: flex;
    opacity: 1;
}

.gyg-modal {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.gyg-modal-overlay.is-open .gyg-modal {
    transform: translateY(0);
}

.gyg-modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--color-gray-500);
    transition: color 0.2s ease;
    border-radius: 50%;
}

.gyg-modal-close:hover {
    color: var(--color-dark);
    background: var(--color-gray-100);
}

.gyg-modal-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-4);
    padding-right: var(--space-8);
}

.gyg-modal-text {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Responsive Calendar */
@media (max-width: 768px) {
    .gyg-calendar-panel {
        left: 0;
        width: 100%;
        position: fixed;
        top: auto;
        bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .gyg-calendar-container {
        grid-template-columns: 1fr;
    }
    
    .gyg-calendar-month:last-child {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-gray-100);
    }
}

/* Overall Layout Improvements */

/* CRITICAL: Ensure parent containers don't break sticky positioning */
@media (min-width: 769px) {
    /* All possible parent containers that might have overflow:hidden */
    body.single-vmt_tour,
    .single-vmt_tour .section,
    .single-vmt_tour section,
    .single-vmt_tour .container,
    .single-vmt_tour main,
    .single-vmt_tour #page,
    .single-vmt_tour .site-content,
    .single-vmt_tour .site-main,
    .single-vmt_tour #content,
    .single-vmt_tour #main,
    .single-vmt_tour .content-area,
    .single-vmt_tour .entry-content,
    .section:has(.tour-content-wrapper),
    section:has(.tour-content-wrapper),
    .container:has(.tour-content-wrapper) {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* Ensure the tour content wrapper itself doesn't clip */
    .tour-content-wrapper {
        overflow: visible !important;
    }
}

.tour-content-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 360px !important;
    gap: var(--space-8) !important;
    margin-top: var(--space-6);
    align-items: start !important; /* Critical for sticky to work */
    overflow: visible !important; /* Ensure sticky works */
}

/* First section - reduce top spacing */
.tour-content-wrapper > .tour-main-content > .tour-section-premium:first-child {
    margin-top: 0;
    padding-top: 0;
}

.tour-main-content {
    max-width: 100%;
}

/* Scroll Reveal Animations */
.tour-section-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-section-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tour-highlight-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-highlight-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Design - Tablet/Laptop */
@media (max-width: 1024px) {
    .tour-content-wrapper {
        grid-template-columns: 1fr 300px !important; /* Keep 2-column layout on tablet/laptop */
        gap: var(--space-5) !important;
        margin-top: var(--space-4);
        align-items: start !important;
    }
    
    /* Keep sidebar sticky on tablet/laptop */
    .booking-sidebar-premium {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 80px !important;
        align-self: flex-start !important;
    }
    
    .tour-description-premium {
        font-size: 1.0625rem; /* 17px */
        line-height: 1.85;
    }
    
    .tour-highlight-item-premium {
        font-size: 1rem; /* 16px */
    }
}

/* Mobile - Single column */
@media (max-width: 768px) {
    .tour-content-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-bottom: 100px; /* Space for mobile booking bar */
    }
    
    .booking-sidebar-premium {
        display: none; /* Hide on mobile - use sticky bottom bar instead */
    }
}

@media (max-width: 768px) {
    .tour-hero-premium {
        min-height: 50vh;
    }
    
    .tour-hero-content-premium {
        padding: var(--space-6) 0 0 0;
        margin-bottom: var(--space-2);
    }
    
    .tour-hero-title-premium {
        font-size: clamp(2rem, 6vw, 2.5rem);
        margin-top: 0;
        margin-bottom: var(--space-4);
    }
    
    .tour-hero-meta-premium {
        flex-direction: column;
        gap: var(--space-3);
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .tour-hero-meta-item-premium {
        width: 100%;
        justify-content: center;
    }
    
    .tour-section-premium {
        margin-bottom: var(--space-12);
    }
    
    .tour-section-title-premium {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: var(--space-6);
    }
    
    .tour-description-premium {
        font-size: 1rem; /* 16px */
        line-height: 1.8;
        max-width: 100%;
    }
    
    .tour-highlight-text-premium {
        font-size: 1rem; /* 16px */
    }
    
    .booking-card-premium {
        padding: var(--space-6);
    }
    
    .tour-highlights-list-premium {
        gap: var(--space-3);
    }
    
    .tour-highlight-item-premium {
        font-size: 1rem;
        padding: var(--space-3);
    }
    
    .tour-highlight-icon {
        width: 18px;
        height: 18px;
    }
}

/* ========================================
   TOUR MOBILE BOOKING BAR (GetYourGuide-style)
   ======================================== */

/* Hide on desktop, show on mobile */
.tour-mobile-booking-bar {
    display: none;
}

@media (max-width: 768px) {
    .tour-mobile-booking-bar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

/* Overlay for expanded state */
.tour-mobile-booking-bar__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: -1;
}

.tour-mobile-booking-bar.is-expanded .tour-mobile-booking-bar__overlay {
    opacity: 1;
    visibility: visible;
}

/* Container */
.tour-mobile-booking-bar__container {
    background: white;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

/* Collapsed State */
.tour-mobile-booking-bar__collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
}

.tour-mobile-booking-bar.is-expanded .tour-mobile-booking-bar__collapsed {
    display: none;
}

.tour-mobile-booking-bar__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tour-mobile-booking-bar__price-label {
    font-size: 12px;
    color: #666;
}

.tour-mobile-booking-bar__price-value {
    font-size: 20px;
    font-weight: 700;
    color: #0071eb;
    line-height: 1.2;
}

.tour-mobile-booking-bar__price-unit {
    font-size: 12px;
    color: #666;
}

.tour-mobile-booking-bar__free-cancel {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #16a34a;
    font-weight: 500;
    margin-top: 2px;
}

.tour-mobile-booking-bar__free-cancel svg {
    flex-shrink: 0;
}

.tour-mobile-booking-bar__btn {
    flex-shrink: 0;
    padding: 14px 24px;
    background: #0071eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tour-mobile-booking-bar__btn:hover {
    background: #005bc4;
}

.tour-mobile-booking-bar__btn:active {
    transform: scale(0.98);
}

/* Expanded State */
.tour-mobile-booking-bar__expanded {
    display: none;
    max-height: 85vh;
    overflow-y: auto;
}

.tour-mobile-booking-bar.is-expanded .tour-mobile-booking-bar__expanded {
    display: block;
    animation: slideUp 0.3s ease;
}

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

.tour-mobile-booking-bar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.tour-mobile-booking-bar__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
}

.tour-mobile-booking-bar__close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #666;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.tour-mobile-booking-bar__close:hover {
    background: #f5f5f5;
}

.tour-mobile-booking-bar__body {
    padding: 20px;
}

/* Price Display in expanded */
.tour-mobile-booking-bar__price-display {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.tour-mobile-booking-bar__price-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.tour-mobile-booking-bar__from {
    font-size: 14px;
    color: #666;
}

.tour-mobile-booking-bar__amount {
    font-size: 28px;
    font-weight: 700;
    color: #0071eb;
}

.tour-mobile-booking-bar__per {
    font-size: 14px;
    color: #666;
}

/* Field Styling */
.tour-mobile-booking-bar__field {
    margin-bottom: 20px;
}

.tour-mobile-booking-bar__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.tour-mobile-booking-bar__label svg {
    color: #666;
}

.tour-mobile-booking-bar__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    color: #1a1a1a;
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tour-mobile-booking-bar__input:focus {
    outline: none;
    border-color: var(--color-terracotta, #c65d3b);
    box-shadow: 0 0 0 3px rgba(198, 93, 59, 0.1);
}

/* Travelers Selection */
.tour-mobile-booking-bar__travelers {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 4px;
}

.tour-mobile-booking-bar__traveler-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: white;
    border-radius: 8px;
    margin-bottom: 4px;
}

.tour-mobile-booking-bar__traveler-row:last-child {
    margin-bottom: 0;
}

.tour-mobile-booking-bar__traveler-row span {
    font-size: 15px;
    color: #1a1a1a;
}

.tour-mobile-booking-bar__counter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tour-mobile-booking-bar__counter-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: white;
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-mobile-booking-bar__counter-btn:hover {
    border-color: var(--color-terracotta, #c65d3b);
    color: var(--color-terracotta, #c65d3b);
}

.tour-mobile-booking-bar__counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tour-mobile-booking-bar__counter-value {
    font-size: 18px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

/* Total Price */
.tour-mobile-booking-bar__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 2px solid #eee;
    margin-top: 16px;
}

.tour-mobile-booking-bar__total-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.tour-mobile-booking-bar__total-value {
    font-size: 24px;
    font-weight: 700;
    color: #0071eb;
}

/* Footer */
.tour-mobile-booking-bar__footer {
    padding: 16px 20px 24px;
    background: white;
    border-top: 1px solid #eee;
}

.tour-mobile-booking-bar__submit {
    width: 100%;
    padding: 16px 24px;
    background: #0071eb;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tour-mobile-booking-bar__submit:hover {
    background: #005bc4;
}

.tour-mobile-booking-bar__submit:active {
    transform: scale(0.98);
}

.tour-mobile-booking-bar__note {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-top: 12px;
    margin-bottom: 0;
}

/* Safe area for iOS notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .tour-mobile-booking-bar__footer {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    
    .tour-mobile-booking-bar__collapsed {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* Tour Date Picker (Horizontal Week Picker) */
.tour-date-picker {
    margin-bottom: var(--space-4);
}

.date-picker-header {
    margin-bottom: var(--space-3);
}

.date-picker-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-picker-week {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--space-2);
}

.date-picker-week::-webkit-scrollbar {
    display: none;
}

.date-option {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: var(--space-2) var(--space-2);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.date-option:hover {
    border-color: var(--color-terracotta);
    background: var(--color-sand-light);
}

.date-option--selected,
.date-option.is-selected {
    border-color: var(--color-terracotta);
    background: var(--color-terracotta);
    color: white;
}

.date-option--selected .day-name,
.date-option.is-selected .day-name,
.date-option--selected .month,
.date-option.is-selected .month {
    color: rgba(255, 255, 255, 0.85);
}

.date-option--today {
    border-color: var(--color-sand);
    background: var(--color-sand-light);
}

.date-option .day-name {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.date-option .day-number {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.2;
}

.date-option.is-selected .day-number {
    color: white;
}

.date-option .month {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.date-calendar-btn {
    background: var(--color-gray-100);
    border-color: var(--color-gray-200);
    min-width: 54px;
}

.date-calendar-btn svg {
    color: var(--color-gray-600);
    margin-bottom: 2px;
}

.date-calendar-btn:hover {
    background: var(--color-sand-light);
    border-color: var(--color-terracotta);
}

.date-calendar-btn:hover svg {
    color: var(--color-terracotta);
}

.calendar-btn-text {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-gray-600);
    text-transform: uppercase;
}

.date-picker-fallback {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.date-picker-selected {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-sand-light);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
}

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

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

.change-date-btn {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-terracotta);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.change-date-btn:hover {
    color: var(--color-terracotta-dark);
}

@media (max-width: 480px) {
    .date-option {
        min-width: 48px;
        padding: var(--space-2) 6px;
    }
    
    .date-option .day-number {
        font-size: 1rem;
    }
    
    .date-calendar-btn {
        min-width: 48px;
    }
}

/* ==========================================================================
   CHECKOUT PAGE STYLES
   ========================================================================== */

.checkout-page {
    background: var(--color-sand-light);
    min-height: 100vh;
    padding-bottom: var(--space-12);
}

/* Urgency Banner */
.checkout-urgency-banner {
    background: linear-gradient(135deg, var(--color-terracotta-dark) 0%, var(--color-terracotta) 100%);
    color: white;
    padding: var(--space-3) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.urgency-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 500;
}

.urgency-timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.checkout-urgency-banner.expired {
    background: var(--color-gray-600);
}

.checkout-urgency-banner.expired .urgency-timer {
    color: var(--color-red-400);
}

/* Checkout Layout */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
    padding-top: var(--space-8);
    align-items: start;
}

@media (max-width: 1024px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .checkout-summary-column {
        order: -1;
    }
}

/* Form Column */
.checkout-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Security Badge */
.checkout-security-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2e7d32;
    width: fit-content;
}

.checkout-security-badge svg {
    stroke: #2e7d32;
}

/* Tour Summary Card */
.checkout-tour-summary {
    display: flex;
    gap: var(--space-4);
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.tour-summary-image {
    width: 120px;
    height: 90px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.tour-summary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-summary-info {
    flex: 1;
    min-width: 0;
}

.tour-summary-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.tour-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.tour-summary-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.tour-summary-meta svg {
    stroke: var(--color-terracotta);
}

/* Customer Form */
.checkout-customer-form {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-gray-200);
}

.form-section-title:not(:first-child) {
    margin-top: var(--space-6);
}

.form-row {
    display: flex;
    gap: var(--space-4);
}

.form-row-half {
    margin-bottom: var(--space-4);
}

.form-row-half .form-group {
    flex: 1;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .form-row-half {
        flex-direction: column;
        gap: var(--space-4);
    }
}

.checkout-customer-form .form-group {
    margin-bottom: var(--space-4);
}

.checkout-customer-form .form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    margin-bottom: var(--space-1);
}

.checkout-customer-form .form-input,
.checkout-customer-form .form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-customer-form .form-input:focus,
.checkout-customer-form .form-textarea:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(188, 102, 60, 0.15);
}

.checkout-customer-form .form-textarea {
    resize: vertical;
    min-height: 80px;
}

.checkout-customer-form .form-helper {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-top: var(--space-1);
}

/* Stripe Card Element */
.stripe-card-element {
    padding: 14px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    background: white;
    min-height: 50px;
}

.stripe-card-element.StripeElement--focus {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(188, 102, 60, 0.15);
}

.stripe-card-element.StripeElement--invalid {
    border-color: #dc2626;
}

.card-errors {
    color: #dc2626;
    font-size: 0.8125rem;
    margin-top: var(--space-2);
    min-height: 20px;
}

/* Terms Checkbox */
.checkout-terms {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-400);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
    margin-top: 2px;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.5;
}

.checkbox-text a {
    color: var(--color-terracotta);
    text-decoration: underline;
}

/* Submit Button */
.btn-checkout {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-loading .spinner {
    width: 20px;
    height: 20px;
    animation: spinner-rotate 1s linear infinite;
}

.btn-loading .spinner circle {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    animation: spinner-dash 1.5s ease-in-out infinite;
}

@keyframes spinner-rotate {
    100% { transform: rotate(360deg); }
}

@keyframes spinner-dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* Summary Column */
.checkout-summary-column {
    position: sticky;
    top: 80px;
}

.checkout-summary-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.summary-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-5);
}

/* Tour Preview */
.summary-tour-preview {
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-4);
}

.summary-tour-preview img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.preview-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.3;
    margin-bottom: 4px;
}

.preview-info .preview-date {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

/* Summary Options */
.summary-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-4);
}

.summary-option {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.summary-option .option-label {
    color: var(--color-gray-600);
}

.summary-option .option-value {
    color: var(--color-gray-900);
    font-weight: 500;
}

/* Price Breakdown */
.summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9375rem;
    color: var(--color-gray-700);
}

.breakdown-row.surcharge {
    color: var(--color-terracotta);
}

.breakdown-row.total {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--space-2);
}

/* Payment Toggle */
.payment-toggle {
    margin-bottom: var(--space-5);
}

.payment-toggle-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--space-3);
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: var(--space-2);
}

.payment-option:hover {
    border-color: var(--color-gray-300);
}

.payment-option.active {
    border-color: var(--color-terracotta);
    background: rgba(188, 102, 60, 0.05);
}

.payment-option-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-400);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.payment-option.active .payment-option-radio {
    border-color: var(--color-terracotta);
}

.radio-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
}

.payment-option.active .radio-circle {
    background: var(--color-terracotta);
}

.payment-option-content {
    flex: 1;
}

.payment-option-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
}

.payment-option-amount {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-top: 2px;
}

.payment-option-note {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-top: 4px;
}

/* Due Today */
.summary-due-today {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-sand) 0%, var(--color-sand-dark) 100%);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.due-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-800);
}

.due-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-terracotta-dark);
}

/* Trust Badges */
.summary-trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.summary-trust .trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.summary-trust svg {
    stroke: var(--color-terracotta);
    flex-shrink: 0;
}

/* Help Section */
.checkout-help {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    text-align: center;
    margin-top: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.checkout-help p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.checkout-help .btn {
    width: 100%;
}

/* Good to Know Section */
.tour-good-to-know-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.tour-good-to-know-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-sand-light, #f7f5f2);
    border-radius: var(--radius-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tour-good-to-know-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tour-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-terracotta);
    border-radius: 50%;
    color: white;
    flex-shrink: 0;
}

.tour-info-icon svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   IMPORTANT INFORMATION SECTION
   ======================================== */
.tour-important-info {
    margin-top: var(--space-12);
}

.important-info-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.important-info-item {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.important-info-item:hover {
    border-color: var(--color-terracotta);
    box-shadow: 0 4px 16px rgba(198, 93, 59, 0.08);
}

.important-info-item[open] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.important-info-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.2s ease;
}

.important-info-header::-webkit-details-marker {
    display: none;
}

.important-info-header:hover {
    background: var(--color-sand-light, #faf8f5);
}

.important-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.important-info-icon--warning {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
}

.important-info-icon--bring {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #2563eb;
}

.important-info-icon--know {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.important-info-title {
    flex: 1;
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-gray-900);
}

.important-info-chevron {
    width: 20px;
    height: 20px;
    color: var(--color-gray-400);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.important-info-item[open] .important-info-chevron {
    transform: rotate(180deg);
}

.important-info-content {
    padding: 0 var(--space-5) var(--space-5);
    padding-left: calc(var(--space-5) + 36px + var(--space-3));
}

.important-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-2);
}

.important-info-list li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.important-info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.important-info-list--warning li::before {
    background: #fca5a5;
}

.important-info-list--bring li::before {
    background: #93c5fd;
}

.important-info-list--know li::before {
    background: #fcd34d;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .important-info-header {
        padding: var(--space-3) var(--space-4);
    }
    
    .important-info-icon {
        width: 32px;
        height: 32px;
    }
    
    .important-info-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .important-info-content {
        padding: 0 var(--space-4) var(--space-4);
        padding-left: var(--space-4);
    }
    
    .important-info-list {
        grid-template-columns: 1fr;
    }
}

/* Day-by-Day Itinerary */
.tour-day-timeline {
    position: relative;
    padding-left: var(--space-8);
}

.tour-day-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 40px;
    width: 3px;
    background: linear-gradient(to bottom, var(--color-terracotta), var(--color-terracotta-light, #d4826e));
    border-radius: 2px;
}

.tour-day-card {
    position: relative;
    margin-bottom: var(--space-8);
    padding-left: var(--space-6);
}

.tour-day-card:last-child {
    margin-bottom: 0;
}

.tour-day-number {
    position: absolute;
    left: -24px;
    top: 0;
    width: 40px;
    height: 40px;
    background: var(--color-terracotta);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(198, 93, 59, 0.3);
    z-index: 1;
}

.tour-day-content {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tour-day-card:hover .tour-day-content {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.tour-day-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-3);
}

.tour-day-description {
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.tour-day-overnight {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(135deg, rgba(198, 93, 59, 0.08), rgba(198, 93, 59, 0.03));
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-terracotta);
    font-weight: 600;
}

.tour-day-overnight svg {
    width: 16px;
    height: 16px;
}

/* FAQ Item Animation */
.tour-faq-item {
    opacity: 0;
    transform: translateY(20px);
}

.tour-faq-item.is-visible {
    animation: fadeUp 0.5s ease-out forwards;
}

@media (max-width: 768px) {
    .tour-good-to-know-grid {
        grid-template-columns: 1fr;
    }
    
    .tour-day-timeline {
        padding-left: var(--space-6);
    }
    
    .tour-day-timeline::before {
        left: 15px;
    }
    
    .tour-day-number {
        left: -21px;
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    .tour-day-content {
        padding: var(--space-4);
    }
    
    .tour-day-title {
        font-size: var(--text-lg);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .tour-hero-content-premium,
    .hero-badge-premium,
    .tour-hero-title-premium,
    .tour-hero-meta-premium {
        animation: none;
    }
    
    .btn-booking-premium,
    .btn-whatsapp-premium {
        transition: none;
    }
    
    .tour-section-reveal,
    .tour-highlight-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .tour-good-to-know-item,
    .tour-day-card,
    .tour-faq-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================
   SCROLL REVEAL ANIMATIONS - HOME PAGE
   ======================================== */

/* Section Reveal Animation */
.reveal-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header Stagger Animation */
.reveal-header-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-header.is-visible .reveal-header-item {
    opacity: 1;
    transform: translateY(0);
}

.reveal-header.is-visible .reveal-header-item[data-delay="0"] {
    transition-delay: 0ms;
}

.reveal-header.is-visible .reveal-header-item[data-delay="100"] {
    transition-delay: 100ms;
}

.reveal-header.is-visible .reveal-header-item[data-delay="200"] {
    transition-delay: 200ms;
}

/* Card Stack Animation - Layered Progressive Reveal */
.reveal-card {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal-section,
    .reveal-header-item,
    .reveal-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .reveal-section.is-visible,
    .reveal-header.is-visible .reveal-header-item,
    .reveal-card.is-visible {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Mobile optimization - slightly faster animations */
@media (max-width: 768px) {
    .reveal-section {
        transform: translateY(20px);
    }
    
    .reveal-card {
        transform: translateY(15px) scale(0.97);
    }
}


/* ========================================
   ABOUT THIS ACTIVITY SECTION (GetYourGuide Style)
   ======================================== */

.tour-about-activity {
    background: #fff;
    border-bottom: 1px solid var(--color-gray-200);
}

.section-compact {
    padding: var(--space-6) 0;
}

/* Section Animations */
.section-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduce gap between About sections */
.tour-about-activity + .section {
    padding-top: var(--space-4);
}

/* Reduce top margin for first content inside main tour section */
.tour-section-premium:first-child {
    margin-top: 0;
}

.tour-main-content > .tour-section-premium:first-child {
    margin-top: 0;
    padding-top: 0;
}

.tour-about-activity__title {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-6);
}

.tour-about-activity__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* Info Badge Cards (GetYourGuide Style) */
.tour-info-badge {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-sand-light, #faf8f5);
    border-radius: var(--radius-lg, 12px);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.tour-info-badge:hover {
    background: white;
    border-color: var(--color-gray-200);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.tour-info-badge__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    color: var(--color-terracotta);
}

.tour-info-badge__icon svg {
    width: 24px;
    height: 24px;
}

.tour-info-badge__content {
    flex: 1;
    min-width: 0;
}

.tour-info-badge__title {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
}

.tour-info-badge__desc {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Expandable Badge Variant */
.tour-info-badge--expandable {
    cursor: pointer;
}

.tour-info-badge__desc--preview {
    display: block;
}

.tour-info-badge__desc--full {
    display: none;
}

.tour-info-badge--expanded .tour-info-badge__desc--preview {
    display: none;
}

.tour-info-badge--expanded .tour-info-badge__desc--full {
    display: block;
}

.tour-info-badge__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: 0;
    background: none;
    border: none;
    color: var(--color-terracotta);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.tour-info-badge__toggle:hover {
    color: var(--color-terracotta-dark, #a84a2d);
}

.tour-info-badge__toggle svg {
    transition: transform 0.3s ease;
}

.tour-info-badge--expanded .tour-info-badge__toggle svg {
    transform: rotate(180deg);
}

.tour-info-badge__toggle-text::after {
    content: '';
}

.tour-info-badge--expanded .tour-info-badge__toggle-text::before {
    content: 'Show less';
}

.tour-info-badge--expanded .tour-info-badge__toggle-text {
    font-size: 0;
}

.tour-info-badge--expanded .tour-info-badge__toggle-text::before {
    font-size: var(--text-sm, 0.875rem);
}

/* Responsive Design for About Activity */
@media (max-width: 768px) {
    .section-compact {
        padding: var(--space-6) 0;
    }
    
    .tour-about-activity__title {
        font-size: var(--text-lg, 1.125rem);
        margin-bottom: var(--space-4);
    }
    
    .tour-about-activity__grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .tour-info-badge {
        padding: var(--space-3);
        gap: var(--space-3);
    }
    
    .tour-info-badge__icon {
        width: 40px;
        height: 40px;
    }
    
    .tour-info-badge__icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   SHORT DESCRIPTION SECTION (After Hero)
   ======================================== */

.tour-short-description {
    padding: var(--space-8) 0;
    background: white;
}

.tour-short-description__text {
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.7;
    color: var(--color-gray-700);
    max-width: 800px;
}

.tour-short-description__text:first-letter {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-terracotta);
}

@media (max-width: 768px) {
    .tour-short-description {
        padding: var(--space-6) 0;
    }
    
    .tour-short-description__text {
        font-size: var(--text-base, 1rem);
    }
}


/* ========================================
   DAY-BY-DAY ITINERARY WITH ANIMATIONS
   ======================================== */

.itinerary-section {
    margin-top: var(--space-12);
    padding: var(--space-10) 0;
    background: linear-gradient(135deg, #faf8f5 0%, #fff 100%);
    border-radius: var(--radius-xl, 16px);
    position: relative;
}

.itinerary-section__title {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-10);
    text-align: center;
    position: relative;
}

.itinerary-section__title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, #e8a85c 100%);
    border-radius: 2px;
    margin: var(--space-4) auto 0;
}

/* Timeline Container */
.itinerary-timeline {
    position: relative;
    padding: 0 var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}

/* Day Item */
.itinerary-day {
    display: flex;
    gap: var(--space-6);
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.itinerary-day.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered Animation Delays */
.itinerary-day[data-index="0"] { transition-delay: 0ms; }
.itinerary-day[data-index="1"] { transition-delay: 100ms; }
.itinerary-day[data-index="2"] { transition-delay: 200ms; }
.itinerary-day[data-index="3"] { transition-delay: 300ms; }
.itinerary-day[data-index="4"] { transition-delay: 400ms; }
.itinerary-day[data-index="5"] { transition-delay: 500ms; }
.itinerary-day[data-index="6"] { transition-delay: 600ms; }
.itinerary-day[data-index="7"] { transition-delay: 700ms; }

/* Day Marker (Number + Line) */
.itinerary-day__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 60px;
}

/* Day Number Circle */
.itinerary-day__number {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-terracotta) 0%, #e8a85c 100%);
    color: white;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(198, 93, 59, 0.35),
                0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
    position: relative;
    z-index: 2;
}

.itinerary-day:hover .itinerary-day__number {
    transform: scale(1.1) rotate(-3deg);
    box-shadow: 0 8px 24px rgba(198, 93, 59, 0.45),
                0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Connecting Line */
.itinerary-day__line {
    width: 3px;
    flex: 1;
    min-height: 40px;
    background: linear-gradient(180deg, 
        var(--color-terracotta) 0%, 
        rgba(198, 93, 59, 0.3) 50%,
        var(--color-terracotta) 100%);
    border-radius: 2px;
    margin: var(--space-3) 0;
    position: relative;
    overflow: hidden;
}

/* Animated Line Pulse */
.itinerary-day__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%);
    animation: linePulse 2s ease-in-out infinite;
}

@keyframes linePulse {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Day Content */
.itinerary-day__content {
    flex: 1;
    padding-bottom: var(--space-8);
    min-width: 0;
}

/* Day Card */
.itinerary-day__card {
    background: white;
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-6);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}

.itinerary-day:hover .itinerary-day__card {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.05);
    border-color: rgba(198, 93, 59, 0.15);
}

/* Day Title */
.itinerary-day__title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    color: var(--color-terracotta);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.3;
}

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

/* Description */
.itinerary-day__desc {
    font-size: var(--text-base, 1rem);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin: 0;
}

/* Overnight Badge */
.itinerary-day__overnight {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
}

.itinerary-day__overnight svg {
    color: #fbbf24;
}

/* ========================================
   HOURLY TIMELINE (Single Day Tours)
   ======================================== */

.itinerary-section--hourly {
    background: #fff;
}

.itinerary-timeline--hourly {
    max-width: 700px;
}

/* Step Item */
.itinerary-step {
    display: flex;
    gap: var(--space-5);
    position: relative;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.itinerary-step.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.itinerary-step[data-index="0"] { transition-delay: 0ms; }
.itinerary-step[data-index="1"] { transition-delay: 80ms; }
.itinerary-step[data-index="2"] { transition-delay: 160ms; }
.itinerary-step[data-index="3"] { transition-delay: 240ms; }
.itinerary-step[data-index="4"] { transition-delay: 320ms; }
.itinerary-step[data-index="5"] { transition-delay: 400ms; }

/* Step Marker */
.itinerary-step__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 80px;
}

/* Time Badge */
.itinerary-step__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-2);
}

.itinerary-step__time-value {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    color: var(--color-gray-800);
}

.itinerary-step__time-label {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.itinerary-step__time--highlight .itinerary-step__time-value {
    color: var(--color-terracotta);
}

/* Step Dot */
.itinerary-step__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--color-gray-300);
    flex-shrink: 0;
    transition: transform 0.3s ease, border-color 0.3s ease;
    z-index: 2;
}

.itinerary-step__dot--filled {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    box-shadow: 0 2px 8px rgba(198, 93, 59, 0.3);
}

.itinerary-step:hover .itinerary-step__dot {
    transform: scale(1.3);
    border-color: var(--color-terracotta);
}

/* Step Line */
.itinerary-step__line {
    width: 2px;
    flex: 1;
    min-height: 30px;
    background: repeating-linear-gradient(
        to bottom,
        var(--color-gray-300) 0px,
        var(--color-gray-300) 5px,
        transparent 5px,
        transparent 10px
    );
    margin: var(--space-2) 0;
}

/* Step Content */
.itinerary-step__content {
    flex: 1;
    padding-bottom: var(--space-6);
    min-width: 0;
}

.itinerary-step__card {
    background: #faf8f5;
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4);
    transition: background 0.3s ease;
}

.itinerary-step:hover .itinerary-step__card {
    background: #f5f0eb;
}

.itinerary-step__title {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2) 0;
}

.itinerary-step__desc {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

.itinerary-step__location {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-gray-500);
}

.itinerary-step__location svg {
    color: var(--color-terracotta);
}

/* Responsive */
@media (max-width: 768px) {
    .itinerary-section {
        margin-top: var(--space-8);
        padding: var(--space-6) var(--space-2);
        border-radius: var(--radius-lg, 12px);
    }
    
    .itinerary-section__title {
        font-size: var(--text-xl, 1.25rem);
        margin-bottom: var(--space-6);
    }
    
    .itinerary-day {
        gap: var(--space-4);
    }
    
    .itinerary-day__marker {
        width: 50px;
    }
    
    .itinerary-day__number {
        width: 44px;
        height: 44px;
        font-size: var(--text-base, 1rem);
    }
    
    .itinerary-day__card {
        padding: var(--space-4);
    }
    
    .itinerary-day__title {
        font-size: var(--text-base, 1rem);
    }
    
    .itinerary-day__desc {
        font-size: var(--text-sm, 0.875rem);
    }
    
    .itinerary-step__marker {
        width: 60px;
    }
    
    .itinerary-step__time-value {
        font-size: var(--text-xs, 0.75rem);
    }
}


/* ========================================
   SCHEDULE SECTION (Matching Live Site)
   ======================================== */

.schedule-section {
    margin-top: var(--space-12);
    padding: var(--space-8) 0;
}

.schedule-title {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
}

/* Progress Bar */
.schedule-progress {
    position: relative;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 3px;
    margin-bottom: var(--space-10);
    overflow: hidden;
}

.schedule-progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, #e8a85c 100%);
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* Timeline Container */
.schedule-timeline {
    position: relative;
}

/* Schedule Item */
.schedule-item {
    display: flex;
    gap: var(--space-6);
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.schedule-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Delays */
.schedule-item[data-index="0"] { transition-delay: 0ms; }
.schedule-item[data-index="1"] { transition-delay: 100ms; }
.schedule-item[data-index="2"] { transition-delay: 200ms; }
.schedule-item[data-index="3"] { transition-delay: 300ms; }
.schedule-item[data-index="4"] { transition-delay: 400ms; }
.schedule-item[data-index="5"] { transition-delay: 500ms; }
.schedule-item[data-index="6"] { transition-delay: 600ms; }
.schedule-item[data-index="7"] { transition-delay: 700ms; }

/* Left Marker Column */
.schedule-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    flex-shrink: 0;
    position: relative;
}

/* Icon Circle */
.schedule-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.schedule-icon--filled {
    background: var(--color-terracotta);
    color: white;
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.3);
}

.schedule-icon--outline {
    background: white;
    color: var(--color-terracotta);
    border: 2px solid var(--color-terracotta);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.schedule-icon svg {
    width: 22px;
    height: 22px;
}

.schedule-item:hover .schedule-icon {
    transform: scale(1.1);
}

.schedule-item:hover .schedule-icon--filled {
    box-shadow: 0 6px 16px rgba(198, 93, 59, 0.4);
}

/* Label (PICKUP, ARRIVAL, etc.) */
.schedule-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-2);
    text-align: center;
}

/* Time */
.schedule-time {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-top: var(--space-1);
    text-align: center;
}

/* Connecting Line */
.schedule-line {
    width: 3px;
    flex: 1;
    min-height: 40px;
    background: linear-gradient(180deg, var(--color-terracotta) 0%, rgba(198, 93, 59, 0.3) 100%);
    border-radius: 2px;
    margin: var(--space-3) 0;
    position: relative;
}

/* Content Card */
.schedule-card {
    flex: 1;
    background: white;
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    border-left: 4px solid var(--color-terracotta);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.schedule-item:hover .schedule-card {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.05);
}

.schedule-card__title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2) 0;
}

.schedule-card__desc {
    font-size: var(--text-base, 1rem);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Location Badge */
.schedule-location {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: #faf8f5;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-200);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.schedule-location:hover {
    background: #f5f0eb;
    border-color: var(--color-terracotta);
}

.schedule-location svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .schedule-section {
        margin-top: var(--space-8);
        padding: var(--space-6) 0;
    }
    
    .schedule-title {
        font-size: var(--text-xl, 1.25rem);
        margin-bottom: var(--space-3);
    }
    
    .schedule-progress {
        margin-bottom: var(--space-6);
    }
    
    .schedule-item {
        gap: var(--space-4);
    }
    
    .schedule-marker {
        width: 70px;
    }
    
    .schedule-icon {
        width: 40px;
        height: 40px;
    }
    
    .schedule-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .schedule-label {
        font-size: 10px;
    }
    
    .schedule-time {
        font-size: var(--text-xs, 0.75rem);
    }
    
    .schedule-card {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    .schedule-card__title {
        font-size: var(--text-base, 1rem);
    }
    
    .schedule-card__desc {
        font-size: var(--text-sm, 0.875rem);
    }
    
    .schedule-location {
        font-size: var(--text-xs, 0.75rem);
        padding: var(--space-1) var(--space-2);
    }
}


/* ========================================
   UNIFIED TOUR SCHEDULE (Matching Live Site)
   Works for both multi-day and single-day
   ======================================== */

.tour-schedule {
    margin-top: var(--space-12);
    padding: var(--space-8) 0;
}

.tour-schedule__title {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-4);
    font-family: var(--font-display, 'Playfair Display', serif);
}

/* Progress Bar */
.tour-schedule__progress {
    position: relative;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 3px;
    margin-bottom: var(--space-10);
    overflow: hidden;
}

.tour-schedule__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, #e8a85c 100%);
    border-radius: 3px;
}

/* Timeline Container */
.tour-schedule__timeline {
    position: relative;
}

/* Schedule Item */
.tour-schedule__item {
    display: flex;
    gap: var(--space-5);
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.tour-schedule__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Delays */
.tour-schedule__item[data-index="0"] { transition-delay: 0ms; }
.tour-schedule__item[data-index="1"] { transition-delay: 100ms; }
.tour-schedule__item[data-index="2"] { transition-delay: 200ms; }
.tour-schedule__item[data-index="3"] { transition-delay: 300ms; }
.tour-schedule__item[data-index="4"] { transition-delay: 400ms; }
.tour-schedule__item[data-index="5"] { transition-delay: 500ms; }
.tour-schedule__item[data-index="6"] { transition-delay: 600ms; }
.tour-schedule__item[data-index="7"] { transition-delay: 700ms; }
.tour-schedule__item[data-index="8"] { transition-delay: 800ms; }
.tour-schedule__item[data-index="9"] { transition-delay: 900ms; }

/* Left Marker Column */
.tour-schedule__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    flex-shrink: 0;
    position: relative;
}

/* Icon Circle */
.tour-schedule__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.tour-schedule__icon--filled {
    background: var(--color-terracotta);
    color: white;
    box-shadow: 0 4px 12px rgba(198, 93, 59, 0.3);
}

.tour-schedule__icon--outline {
    background: white;
    color: var(--color-terracotta);
    border: 2px solid var(--color-terracotta);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tour-schedule__icon svg {
    width: 22px;
    height: 22px;
}

/* Day Number inside circle */
.tour-schedule__day-num {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 800;
    line-height: 1;
}

.tour-schedule__item:hover .tour-schedule__icon {
    transform: scale(1.08);
}

.tour-schedule__item:hover .tour-schedule__icon--filled {
    box-shadow: 0 6px 20px rgba(198, 93, 59, 0.4);
}

/* Label (DAY 1, PICKUP, ARRIVAL, etc.) */
.tour-schedule__label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-2);
    text-align: center;
}

/* Time */
.tour-schedule__time {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-top: var(--space-1);
    text-align: center;
    background: white;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-200);
}

/* Connecting Line */
.tour-schedule__line {
    width: 3px;
    flex: 1;
    min-height: 50px;
    background: linear-gradient(180deg, var(--color-terracotta) 0%, rgba(198, 93, 59, 0.3) 100%);
    border-radius: 2px;
    margin: var(--space-3) 0;
    position: relative;
}

/* Content Card */
.tour-schedule__card {
    flex: 1;
    background: white;
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    border-left: 4px solid var(--color-terracotta);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tour-schedule__item:hover .tour-schedule__card {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.05);
}

.tour-schedule__card-title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-display, 'Playfair Display', serif);
}

.tour-schedule__card-desc {
    font-size: var(--text-base, 1rem);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin: 0;
}

/* Location Badge */
.tour-schedule__location {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: #faf8f5;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-200);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.tour-schedule__location:hover {
    background: #f5f0eb;
    border-color: var(--color-terracotta);
}

.tour-schedule__location svg {
    color: var(--color-terracotta);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .tour-schedule {
        margin-top: var(--space-8);
        padding: var(--space-6) 0;
    }
    
    .tour-schedule__title {
        font-size: var(--text-xl, 1.25rem);
        margin-bottom: var(--space-3);
    }
    
    .tour-schedule__progress {
        margin-bottom: var(--space-6);
    }
    
    .tour-schedule__item {
        gap: var(--space-3);
    }
    
    .tour-schedule__marker {
        width: 80px;
    }
    
    .tour-schedule__icon {
        width: 44px;
        height: 44px;
    }
    
    .tour-schedule__icon svg {
        width: 18px;
        height: 18px;
    }
    
    .tour-schedule__day-num {
        font-size: var(--text-lg, 1.125rem);
    }
    
    .tour-schedule__label {
        font-size: 10px;
    }
    
    .tour-schedule__time {
        font-size: var(--text-xs, 0.75rem);
        padding: 2px 6px;
    }
    
    .tour-schedule__card {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    .tour-schedule__card-title {
        font-size: var(--text-base, 1rem);
    }
    
    .tour-schedule__card-desc {
        font-size: var(--text-sm, 0.875rem);
    }
    
    .tour-schedule__location {
        font-size: var(--text-xs, 0.75rem);
        padding: var(--space-1) var(--space-2);
    }
}


/* ========================================
   GETYOURGUIDE-STYLE FAQ ACCORDION
   ======================================== */

.gyg-faq {
    margin-top: var(--space-12);
    padding: var(--space-8) 0;
}

.gyg-faq__title {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--space-6);
    position: relative;
    padding-bottom: var(--space-3);
}

.gyg-faq__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--color-terracotta);
    border-radius: 2px;
}

.gyg-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* FAQ Item */
.gyg-faq__item {
    border-bottom: 1px solid var(--color-gray-200);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.gyg-faq__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gyg-faq__item:first-child {
    border-top: 1px solid var(--color-gray-200);
}

/* Question Button */
.gyg-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.gyg-faq__question:hover {
    background: var(--color-gray-50, #f9fafb);
    margin: 0 calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.gyg-faq__question-text {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.4;
}

/* Chevron */
.gyg-faq__chevron {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    transition: transform 0.3s ease, color 0.2s ease;
}

.gyg-faq__item.is-open .gyg-faq__chevron {
    transform: rotate(180deg);
    color: var(--color-terracotta);
}

/* Answer */
.gyg-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}

.gyg-faq__item.is-open .gyg-faq__answer {
    max-height: 500px;
    transition: max-height 0.4s ease-in;
}

.gyg-faq__answer-inner {
    padding: 0 0 var(--space-5) 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-600);
    line-height: 1.7;
}

.gyg-faq__answer-inner p {
    margin: 0;
}

.gyg-faq__answer-inner p + p {
    margin-top: var(--space-3);
}

/* Responsive - Mobile FAQ Layout Fix */
@media (max-width: 768px) {
    .gyg-faq {
        margin-top: var(--space-8);
        padding: var(--space-4) 0;
    }
    
    .gyg-faq__title {
        font-size: var(--text-xl, 1.25rem);
        margin-bottom: var(--space-4);
    }
    
    .gyg-faq__list {
        gap: 0;
    }
    
    .gyg-faq__item {
        border-bottom: 1px solid var(--color-gray-200);
    }
    
    .gyg-faq__question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-4) var(--space-2);
        gap: var(--space-3);
        text-align: left;
    }
    
    .gyg-faq__question:hover {
        margin: 0;
        padding: var(--space-4) var(--space-2);
        background: transparent;
    }
    
    .gyg-faq__question-text {
        flex: 1;
        min-width: 0;
        font-size: var(--text-sm, 0.875rem);
        font-weight: 600;
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: var(--color-gray-900);
    }
    
    .gyg-faq__chevron {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .gyg-faq__chevron svg {
        width: 18px;
        height: 18px;
    }
    
    .gyg-faq__answer {
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: max-height 0.35s ease-out, visibility 0s 0.35s, opacity 0.2s ease;
    }
    
    .gyg-faq__item.is-open .gyg-faq__answer {
        max-height: 1000px;
        visibility: visible;
        opacity: 1;
        transition: max-height 0.4s ease-in, visibility 0s 0s, opacity 0.3s ease;
    }
    
    .gyg-faq__answer-inner {
        padding: 0 var(--space-2) var(--space-4) var(--space-2);
        font-size: var(--text-sm, 0.875rem);
        line-height: 1.7;
        color: var(--color-gray-600);
    }
    
    .gyg-faq__answer-inner p {
        margin: 0 0 var(--space-2) 0;
    }
    
    .gyg-faq__answer-inner p:last-child {
        margin-bottom: 0;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .gyg-timeline__item,
    .gyg-timeline__travel,
    .gyg-faq__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .gyg-faq__answer {
        transition: none;
    }
    
    .gyg-faq__chevron {
        transition: none;
    }
}

/* ========================================
   WHAT TRAVELERS ARE SAYING - Reviews Section
   GetYourGuide Style
   ======================================== */

/* Reviews Section Container */
#reviews {
    margin-bottom: var(--space-8);
    overflow: hidden; /* Prevent horizontal overflow */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Reviews Carousel Wrapper */
.reviews-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Critical: clip overflowing cards */
}

/* Reviews Carousel */
.reviews-carousel {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: var(--space-2) 0;
    width: 100%;
    max-width: calc(100% - 100px); /* Account for navigation arrows */
}

.reviews-carousel::-webkit-scrollbar {
    display: none;
}

/* Review Card - Show exactly 2 cards */
.review-card {
    flex: 0 0 calc(50% - 8px);
    min-width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4);
    scroll-snap-align: start;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.review-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* All review cards visible - scrollable carousel */

/* Review Rating */
.review-card__rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.review-star {
    width: 18px;
    height: 18px;
    color: #e0e0e0;
}

.review-star.filled {
    color: #ffc107;
    fill: #ffc107;
}

.review-score {
    font-weight: 700;
    font-size: var(--text-lg);
    color: #1a1a1a;
    margin-left: var(--space-2);
}

/* Review Author */
.review-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--text-base);
    flex-shrink: 0;
}

.review-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-author-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: #1a1a1a;
}

.review-date {
    font-size: var(--text-xs);
    color: #666;
}

.review-verified {
    color: #666;
}

/* Review Text */
.review-card__text {
    position: relative;
}

.review-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.review-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-read-more-btn {
    background: none;
    border: none;
    color: #1a73e8;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0;
    margin-top: var(--space-2);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.review-read-more-btn:hover {
    color: #155db1;
}

/* Navigation Buttons */
.reviews-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    z-index: 5;
}

.reviews-nav-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.reviews-nav-btn:active {
    transform: scale(0.95);
}

.reviews-nav-btn:disabled,
.reviews-nav-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.reviews-nav-btn svg {
    width: 20px;
    height: 20px;
    color: #333;
}

/* Reviews Footer */
.reviews-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
}

.see-more-reviews-btn {
    background: none;
    border: none;
    color: #1a73e8;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-2) 0;
    transition: all 0.2s ease;
    text-decoration: underline;
}

.see-more-reviews-btn:hover {
    color: #155db1;
}

/* ========================================
   Reviews Modal
   ======================================== */

.reviews-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: var(--space-4);
}

.reviews-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.reviews-modal {
    background: white;
    border-radius: var(--radius-xl, 16px);
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.reviews-modal-overlay.is-open .reviews-modal {
    transform: translateY(0) scale(1);
}

.reviews-modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 10;
}

.reviews-modal-close:hover {
    background: #e0e0e0;
}

.reviews-modal-close svg {
    width: 20px;
    height: 20px;
    color: #333;
}

.reviews-modal-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    padding: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #e8e8e8;
    margin: 0;
}

.reviews-modal-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-bottom: 1px solid #e8e8e8;
}

.reviews-modal-rating .review-star {
    width: 24px;
    height: 24px;
}

.reviews-modal-score {
    font-size: var(--text-lg);
    font-weight: 700;
    color: #1a1a1a;
    margin-left: var(--space-2);
}

/* Modal Review List */
.reviews-modal-list {
    overflow-y: auto;
    padding: var(--space-5);
    flex: 1;
}

.reviews-modal-item {
    padding: var(--space-4) 0;
}

.reviews-modal-item .review-card__rating {
    margin-bottom: var(--space-3);
}

.reviews-modal-item .review-card__author {
    margin-bottom: var(--space-3);
}

.review-full-text {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: #333;
    margin: 0;
}

.reviews-modal-divider {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: var(--space-4) 0 0 0;
}

/* ========================================
   Reviews Section - Responsive Design
   ======================================== */

/* Tablet: 2 cards with scroll and navigation arrows */
@media (max-width: 1024px) and (min-width: 769px) {
    .reviews-carousel-wrapper {
        position: relative;
    }
    
    .reviews-nav-btn {
        display: flex; /* Show arrows on tablet */
    }
    
    .reviews-carousel {
        max-width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .review-card {
        flex: 0 0 calc(50% - 8px);
        min-width: calc(50% - 8px);
        max-width: calc(50% - 8px);
        scroll-snap-align: start;
    }
}

/* Mobile: 1 card at a time with horizontal swipe */
@media (max-width: 768px) {
    #reviews {
        overflow: hidden !important;
    }
    
    .reviews-carousel-wrapper {
        overflow: hidden !important;
        flex-direction: row;
        position: relative;
    }
    
    .reviews-nav-btn {
        display: none !important;
    }
    
    .reviews-carousel {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        max-width: 100% !important;
        padding: var(--space-2) 0 !important;
        gap: var(--space-4) !important;
    }
    
    .reviews-carousel::-webkit-scrollbar {
        display: none !important;
    }
    
    .review-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
    }
    
    .reviews-modal {
        max-height: 90vh !important;
        border-radius: var(--radius-lg, 12px) !important;
        margin: var(--space-3) !important;
        max-width: calc(100% - var(--space-6)) !important;
        width: calc(100% - var(--space-6)) !important;
    }
    
    .reviews-modal-title {
        font-size: var(--text-lg) !important;
        padding: var(--space-5) !important;
        padding-bottom: var(--space-3) !important;
    }
    
    .reviews-footer {
        padding: 0 var(--space-2) !important;
    }
}

/* Small mobile: vertical stack refinements */
@media (max-width: 480px) {
    .review-card {
        padding: var(--space-4) !important;
    }
    
    .review-avatar {
        width: 38px !important;
        height: 38px !important;
        font-size: var(--text-base) !important;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .reviews-modal-overlay,
    .reviews-modal,
    .review-card,
    .reviews-nav-btn {
        transition: none;
    }
}

/* ========================================
   TOUR PAGE - FULL WIDTH RESPONSIVE FIX
   ======================================== */

/* Mobile Full Width Fix */
@media (max-width: 768px) {
    /* Force no horizontal overflow */
    body.single-vmt_tour {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Tour page container - full width */
    .tour-page-wrapper,
    .tour-hero-section,
    .tour-content-section,
    .single-vmt_tour .container,
    .single-vmt_tour section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Tour content wrapper - single column, full width */
    .tour-content-wrapper {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
        padding: var(--space-3) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Main content - full width */
    .tour-main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Tour sections - proper padding */
    .tour-section-premium {
        padding: var(--space-4) !important;
        margin-bottom: var(--space-4) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Premium container adjustments */
    .tour-premium-container {
        padding-left: var(--space-3) !important;
        padding-right: var(--space-3) !important;
        max-width: 100% !important;
    }
    
    /* Hero section mobile */
    .tour-hero-premium {
        padding: var(--space-4) var(--space-3) !important;
    }
    
    .tour-hero-premium .tour-title-premium {
        font-size: var(--text-xl) !important;
        line-height: 1.3;
        word-wrap: break-word !important;
    }
    
    /* Info badges - horizontal scroll on mobile */
    .tour-info-badges {
        display: flex !important;
        overflow-x: auto !important;
        gap: var(--space-2) !important;
        padding-bottom: var(--space-2) !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    
    .tour-info-badges::-webkit-scrollbar {
        display: none;
    }
    
    .tour-info-badge {
        flex-shrink: 0 !important;
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--text-xs) !important;
    }
    
    /* About section cards */
    .gyg-about-activity {
        padding: var(--space-3) !important;
    }
    
    .gyg-about-activity__cards {
        flex-direction: column !important;
        gap: var(--space-2) !important;
    }
    
    .gyg-about-activity__card {
        flex-direction: row !important;
        text-align: left !important;
        padding: var(--space-3) !important;
        gap: var(--space-3) !important;
    }
    
    .gyg-about-activity__card-icon {
        margin-bottom: 0 !important;
    }
    
    /* Timeline/Itinerary mobile */
    .tour-timeline-container {
        padding: var(--space-3) !important;
    }
    
    .tour-timeline-step {
        padding-left: var(--space-8) !important;
    }
    
    .tour-timeline-step::before {
        left: var(--space-2) !important;
    }
    
    .tour-timeline-step::after {
        left: calc(var(--space-2) + 9px) !important;
    }
    
    .tour-timeline-step__title {
        font-size: var(--text-sm) !important;
    }
    
    .tour-timeline-step__content {
        font-size: var(--text-sm) !important;
    }
    
    /* Highlights list */
    .tour-highlights-list-premium {
        gap: var(--space-2) !important;
    }
    
    .tour-highlight-item-premium {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--text-sm) !important;
    }
    
    /* FAQ Accordion */
    .gyg-faq {
        gap: var(--space-2) !important;
    }
    
    .gyg-faq__question {
        padding: var(--space-3) !important;
        font-size: var(--text-sm) !important;
    }
    
    .gyg-faq__answer {
        padding: 0 var(--space-3) var(--space-3) !important;
        font-size: var(--text-sm) !important;
    }
    
    /* Important Info sections */
    .gyg-important-info__section {
        padding: var(--space-3) !important;
    }
    
    .gyg-important-info__list {
        gap: var(--space-2) !important;
    }
    
    .gyg-important-info__item {
        font-size: var(--text-sm) !important;
    }
    
    /* Booking card mobile */
    .booking-card-premium {
        margin: 0 !important;
        padding: var(--space-4) !important;
        border-radius: var(--radius-lg) !important;
    }
    
    .booking-card-premium .gyg-price-header {
        margin-bottom: var(--space-3) !important;
    }
    
    /* Reviews section mobile */
    #reviews {
        padding: var(--space-3) 0 !important;
    }
    
    .tour-section-title-premium {
        font-size: var(--text-lg) !important;
    }
    
    /* Related tours grid */
    .gyg-related-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
    
    .gyg-related-section {
        padding: var(--space-6) var(--space-3) !important;
    }
    
    .gyg-related-section .container {
        padding: 0 !important;
    }
    
    .gyg-related-section .section-header {
        padding: 0 !important;
    }
    
    /* Section titles */
    .section-title {
        font-size: var(--text-xl) !important;
    }
}

/* Very small screens (480px and below) */
@media (max-width: 480px) {
    .tour-content-wrapper {
        padding: var(--space-2) !important;
    }
    
    .tour-section-premium {
        padding: var(--space-3) !important;
        margin-bottom: var(--space-3) !important;
    }
    
    .tour-hero-premium .tour-title-premium {
        font-size: var(--text-lg) !important;
    }
    
    .tour-section-title-premium {
        font-size: var(--text-base) !important;
    }
    
    .tour-info-badge {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    .gyg-about-activity__card {
        padding: var(--space-2) !important;
    }
    
    .booking-card-premium {
        padding: var(--space-3) !important;
    }
}

.single-vmt_tour {
    overflow-x: hidden !important;
}

/* ========================================
   CHECK AVAILABILITY PAGE STYLES
   ======================================== */

.availability-page {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 100vh;
    padding-bottom: 100px;
}

/* Promo Banner */
.availability-promo-banner {
    background: linear-gradient(135deg, #0071eb 0%, #005bc4 100%);
    padding: 12px 0;
}

.promo-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.promo-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.2);
    padding: 6px 14px;
    border-radius: 20px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.promo-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

.timer-display {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background: rgba(0,0,0,0.2);
    padding: 4px 12px;
    border-radius: 6px;
}

/* Breadcrumb */
.availability-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    font-size: 14px;
    color: var(--color-gray-500);
}

.availability-breadcrumb a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color 0.2s;
}

.availability-breadcrumb a:hover {
    color: #0071eb;
}

.availability-breadcrumb svg {
    opacity: 0.5;
}

/* Layout */
.availability-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

/* Tour Card */
.availability-tour-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.tour-card-image {
    position: relative;
    width: 180px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.tour-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.7);
    color: #fbbf24;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.tour-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tour-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 12px;
    line-height: 1.3;
}

.tour-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tour-card-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-gray-600);
    font-size: 14px;
}

/* Selection Section */
.availability-selection {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.selection-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--color-dark);
}

.selection-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.selection-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
}

.selection-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f4fd;
    border-radius: 12px;
    color: #0071eb;
}

.selection-details {
    flex: 1;
}

.selection-label {
    display: block;
    font-size: 12px;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.selection-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark);
}

.selection-edit {
    color: #0071eb;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.selection-edit:hover {
    text-decoration: underline;
}

/* Pricing Section */
.availability-pricing {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.pricing-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--color-dark);
}

.pricing-breakdown {
    margin-bottom: 20px;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.pricing-description {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gray-700);
    font-size: 15px;
}

.pricing-original {
    text-decoration: line-through;
    color: var(--color-gray-400);
    font-size: 14px;
}

.pricing-badge {
    background: #dcfce7;
    color: #16a34a;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.pricing-amount {
    font-weight: 600;
    color: var(--color-dark);
}

.pricing-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

.pricing-row.pricing-savings {
    background: #f0fdf4;
    margin: 0 -24px;
    padding: 12px 24px;
}

.pricing-row.pricing-savings .pricing-description {
    color: #16a34a;
    font-weight: 600;
}

.savings-amount {
    color: #16a34a !important;
    font-weight: 700;
}

.pricing-row.pricing-total {
    border-top: 2px solid var(--color-dark);
    margin-top: 12px;
    padding-top: 16px;
}

.pricing-row.pricing-total .pricing-description {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
}

.pricing-total-value {
    text-align: right;
}

.total-original {
    display: block;
    text-decoration: line-through;
    color: var(--color-gray-400);
    font-size: 14px;
}

.total-current {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-dark);
}

/* Savings Highlight */
.savings-highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #86efac;
}

.savings-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    border-radius: 50%;
    color: #fff;
}

.savings-text strong {
    display: block;
    font-size: 16px;
    color: #166534;
}

.savings-text span {
    font-size: 14px;
    color: #15803d;
}

/* What's Included */
.availability-included {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.included-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--color-dark);
}

.included-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.included-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-gray-700);
}

.included-item svg {
    color: #16a34a;
    flex-shrink: 0;
}

/* Sidebar - Urgency Card */
.availability-sidebar {
    position: sticky;
    top: 100px;
}

.availability-urgency-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.urgency-scarcity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-radius: 12px;
    margin-bottom: 16px;
}

.scarcity-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f59e0b;
    border-radius: 50%;
    color: #fff;
}

.scarcity-icon.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.scarcity-text strong {
    display: block;
    color: #92400e;
    font-size: 15px;
}

.scarcity-text span {
    color: #a16207;
    font-size: 13px;
}

.urgency-activity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--color-gray-700);
}

.activity-dot {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.urgency-booked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f0fdf4;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #16a34a;
}

/* CTA Button */
.availability-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    background: #0071eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

.availability-cta-btn:hover {
    background: #005bc4;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,113,235,0.3);
}

.urgency-price {
    text-align: center;
    padding: 12px 0;
    border-top: 1px solid #e5e7eb;
}

.urgency-price-label {
    display: block;
    font-size: 13px;
    color: var(--color-gray-500);
    margin-bottom: 4px;
}

.urgency-price-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-dark);
}

/* Trust Badges */
.availability-trust {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.trust-item:last-child {
    border-bottom: none;
}

.trust-item svg {
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 2px;
}

.trust-content strong {
    display: block;
    font-size: 14px;
    color: var(--color-dark);
}

.trust-content span {
    font-size: 13px;
    color: var(--color-gray-500);
}

/* Payment Methods */
.availability-payments {
    text-align: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;
}

.payments-label {
    display: block;
    font-size: 13px;
    color: var(--color-gray-500);
    margin-bottom: 10px;
}

.payments-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.payments-icons img {
    height: 24px;
    width: auto;
}

/* Help Card */
.availability-help {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.help-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f4fd;
    border-radius: 12px;
    color: #0071eb;
}

.help-content strong {
    display: block;
    font-size: 15px;
    color: var(--color-dark);
    margin-bottom: 4px;
}

.help-content p {
    font-size: 13px;
    color: var(--color-gray-500);
    margin: 0 0 10px;
}

.help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0071eb;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.help-link:hover {
    text-decoration: underline;
}

/* Mobile CTA Bar */
.availability-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 16px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 100;
}

.availability-mobile-cta .mobile-cta-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-price-label {
    font-size: 12px;
    color: var(--color-gray-500);
}

.mobile-price-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-dark);
}

.mobile-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #0071eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

/* ========================================
   CHECKOUT PAGE ENHANCED STYLES
   ======================================== */

.checkout-page-enhanced {
    background: #f8f9fa;
    padding-bottom: 120px;
}

/* Progress Indicator */
.checkout-progress {
    background: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.step-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-weight: 600;
    font-size: 14px;
}

.progress-step.active .step-number,
.progress-step.completed .step-number {
    background: #0071eb;
    color: #fff;
}

.step-label {
    font-size: 13px;
    color: #9ca3af;
}

.progress-step.active .step-label,
.progress-step.completed .step-label {
    color: #0071eb;
    font-weight: 600;
}

.progress-line {
    width: 80px;
    height: 3px;
    background: #e5e7eb;
    margin: 0 10px;
    margin-bottom: 24px;
}

.progress-line.completed,
.progress-line.active {
    background: #0071eb;
}

/* Urgency Banner */
.checkout-urgency-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    padding: 12px 0;
}

.urgency-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
}

.urgency-timer {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 700;
    font-size: 18px;
    background: rgba(0,0,0,0.2);
    padding: 4px 10px;
    border-radius: 6px;
}

/* Checkout Layout */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    padding: 40px 0;
    align-items: start;
}

.checkout-form-column {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Security Badge - Enhanced Visibility */
.checkout-security-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    margin-bottom: 24px;
    color: #047857;
    font-size: 14px;
    font-weight: 600;
}

.checkout-security-badge svg {
    stroke: #047857;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Tour Summary - Enhanced Design */
.checkout-tour-summary {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tour-summary-image {
    width: 100px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tour-summary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-summary-info {
    flex: 1;
    min-width: 0;
}

.tour-summary-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1e293b;
    line-height: 1.3;
}

.tour-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.tour-summary-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.tour-summary-meta .meta-item svg {
    stroke: #94a3b8;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Error Container */
.checkout-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Express Checkout */
.checkout-express {
    margin-bottom: 28px;
}

.express-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--color-dark);
}

.payment-request-button {
    min-height: 48px;
    margin-bottom: 16px;
}

.express-unavailable {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f3f4f6;
    border-radius: 8px;
    color: var(--color-gray-500);
    font-size: 13px;
    margin-bottom: 16px;
}

.express-divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
}

.express-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
}

.express-divider span {
    position: relative;
    background: #fff;
    padding: 0 16px;
    color: var(--color-gray-500);
    font-size: 14px;
}

/* Form Sections */
.form-section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--color-dark);
}

.form-row {
    margin-bottom: 16px;
}

.form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.form-label .optional {
    font-weight: 400;
    color: var(--color-gray-500);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    color: var(--color-dark);
    background: #fff;
    transition: all 0.2s;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #0071eb;
    box-shadow: 0 0 0 3px rgba(0,113,235,0.1);
}

.form-input.invalid {
    border-color: #dc2626;
    background: #fef2f2;
}

.form-helper {
    font-size: 13px;
    color: var(--color-gray-500);
    margin: 8px 0 0;
}

/* Payment Cards */
.payment-cards-accepted {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-gray-500);
}

.card-icons {
    display: flex;
    gap: 8px;
}

/* Stripe Card Element */
.stripe-card-container {
    margin-bottom: 24px;
}

.stripe-card-element {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s;
}

.stripe-card-element.StripeElement--focus {
    border-color: #0071eb;
    box-shadow: 0 0 0 3px rgba(0,113,235,0.1);
}

.card-errors {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
    display: none;
}

.stripe-not-configured {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #fef3c7;
    border-radius: 10px;
    color: #92400e;
    margin-bottom: 24px;
}

/* Terms Checkbox */
.checkout-terms {
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #0071eb;
}

.checkbox-text {
    font-size: 14px;
    color: var(--color-gray-700);
    line-height: 1.5;
}

.checkbox-text a {
    color: #0071eb;
    text-decoration: none;
}

.checkbox-text a:hover {
    text-decoration: underline;
}

/* Submit Button */
.btn-checkout {
    width: 100%;
    padding: 18px 24px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-checkout .btn-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-checkout .btn-loading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-checkout .spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

.btn-checkout .spinner circle {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 80px, 200px;
    stroke-dashoffset: 0;
}

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

.checkout-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--color-gray-500);
}

/* Summary Column */
.checkout-summary-column {
    position: sticky;
    top: 100px;
}

.checkout-summary-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

.summary-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--color-dark);
}

.summary-tour-preview {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.summary-tour-preview img {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.preview-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--color-dark);
}

.preview-date {
    font-size: 13px;
    color: var(--color-gray-500);
    margin: 0;
}

/* Summary Options */
.summary-options {
    border-top: 1px solid #f3f4f6;
    padding-top: 16px;
    margin-bottom: 16px;
}

.summary-option {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.option-label {
    color: var(--color-gray-500);
}

.option-value {
    color: var(--color-dark);
    font-weight: 500;
}

/* Breakdown */
.summary-breakdown {
    border-top: 1px solid #f3f4f6;
    padding-top: 16px;
    margin-bottom: 16px;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.breakdown-row.savings {
    color: #16a34a;
}

.breakdown-row.total {
    border-top: 2px solid var(--color-dark);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 700;
}

/* Payment Toggle - Enhanced Clickable */
.payment-toggle {
    margin-bottom: 24px;
}

.payment-toggle-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
    color: #1e293b;
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    background: #fff;
    user-select: none;
}

.payment-option:hover {
    border-color: #0071eb;
    background: #f8fbff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 113, 235, 0.1);
}

.payment-option.active {
    border-color: #0071eb;
    background: #f0f7ff;
    box-shadow: 0 0 0 3px rgba(0, 113, 235, 0.15);
}

.payment-option-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.25s ease;
}

.payment-option:hover .payment-option-radio {
    border-color: #0071eb;
}

.payment-option.active .payment-option-radio {
    border-color: #0071eb;
    background: #0071eb;
}

.radio-circle {
    width: 8px;
    height: 8px;
    background: transparent;
    border-radius: 50%;
    transition: all 0.25s ease;
}

.payment-option.active .radio-circle {
    background: #fff;
}

.payment-option-content {
    flex: 1;
}

.payment-option-label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 4px;
}

.payment-option-amount {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #0071eb;
}

.payment-option-note {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-top: 6px;
}

.payment-option-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #0071eb 0%, #0059bf 100%);
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0, 113, 235, 0.3);
}

/* Due Today */
.summary-due-today {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f0f7ff;
    border-radius: 10px;
    margin-bottom: 20px;
}

.due-label {
    font-weight: 600;
    color: var(--color-dark);
}

.due-amount {
    font-size: 24px;
    font-weight: 800;
    color: #0071eb;
}

/* Summary Trust - Enhanced Visibility */
.summary-trust {
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-top: 8px;
}

.summary-trust .trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    border-bottom: none;
}

.summary-trust .trust-item svg {
    stroke: #16a34a;
    color: #16a34a;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.summary-trust .trust-item span {
    color: #374151;
}

/* Help Section */
.checkout-help {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.checkout-help p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--color-gray-600);
}

/* ================================
   Pickup Location Selector
   ================================ */
.pickup-selector {
    margin-bottom: 24px;
}

.pickup-option {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: visible;
    transition: all 0.25s ease;
    background: #fff;
    position: relative;
}

.pickup-option:hover {
    border-color: #cbd5e1;
}

.pickup-option.active {
    border-color: #0071eb;
    box-shadow: 0 0 0 2px rgba(0, 113, 235, 0.1);
    z-index: 1000;
}

.pickup-option-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
}

.pickup-option-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.pickup-option:hover .pickup-option-radio {
    border-color: #0071eb;
}

.pickup-option.active .pickup-option-radio {
    border-color: #0071eb;
    background: #0071eb;
}

.pickup-option-radio .radio-circle {
    width: 8px;
    height: 8px;
    background: transparent;
    border-radius: 50%;
    transition: all 0.25s ease;
}

.pickup-option.active .pickup-option-radio .radio-circle {
    background: #fff;
}

.pickup-option-label {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.pickup-option-content {
    padding: 0 20px 20px 56px;
    display: none;
    position: relative;
    overflow: visible;
}

.pickup-option.active .pickup-option-content {
    display: block;
}

/* "Yes" option - only show content when active */
.pickup-option[data-option="yes"] .pickup-option-content {
    display: none;
}

.pickup-option[data-option="yes"].active .pickup-option-content {
    display: block;
}

/* "No" option - always show content when active */
.pickup-option[data-option="no"] .pickup-option-content {
    display: none;
}

.pickup-option[data-option="no"].active .pickup-option-content {
    display: block;
}

.pickup-hint {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 12px;
    line-height: 1.5;
}

.pickup-search {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1000;
}

.pickup-search svg {
    position: absolute;
    left: 14px;
    stroke: #9ca3af;
    pointer-events: none;
}

/* Base pickup input - overridden by later definition */

.pickup-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 10px;
    font-size: 14px;
    color: #1e40af;
    line-height: 1.5;
}

.pickup-info-box svg {
    stroke: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pickup-option-header {
        padding: 16px;
        gap: 12px;
    }
    
    .pickup-option-content {
        padding: 0 16px 16px 50px;
    }
    
    .pickup-option-label {
        font-size: 14px;
    }
    
    .pickup-search-input {
        height: 48px;
        padding: 0 14px;
        font-size: 15px;
        line-height: 1.4;
    }
    
    .pickup-info-box {
        padding: 14px;
        font-size: 13px;
    }
    
    .nominatim-dropdown {
        max-height: 220px;
    }
}

/* Mobile Bar */
.checkout-mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 16px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 100;
    justify-content: space-between;
    align-items: center;
}

.mobile-bar-price {
    display: flex;
    flex-direction: column;
}

.mobile-bar-btn {
    padding: 14px 28px;
    background: #0071eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

/* Checkout Success Inline */
.checkout-success {
    text-align: center;
    padding: 40px 20px;
}

.checkout-success .success-icon {
    margin-bottom: 20px;
}

.checkout-success h2 {
    font-size: 24px;
    color: #10b981;
    margin: 0 0 16px;
}

.checkout-success p {
    color: var(--color-gray-600);
    margin: 0 0 8px;
}

/* ========================================
   BOOKING SUCCESS PAGE STYLES
   ======================================== */

.success-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    padding: 60px 20px;
}

.success-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Animated Checkmark */
.success-animation {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
}

.success-checkmark {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #16a34a;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #16a34a;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #16a34a;
    fill: none;
    animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}

@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 50px #dcfce7; }
}

/* Confetti */
.success-confetti {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    pointer-events: none;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0071eb;
    opacity: 0;
    animation: confetti 1s ease-out forwards;
}

.confetti-piece:nth-child(1) { left: 20%; animation-delay: 0.1s; background: #0071eb; }
.confetti-piece:nth-child(2) { left: 35%; animation-delay: 0.2s; background: #16a34a; }
.confetti-piece:nth-child(3) { left: 50%; animation-delay: 0.15s; background: #f59e0b; }
.confetti-piece:nth-child(4) { left: 65%; animation-delay: 0.25s; background: #ec4899; }
.confetti-piece:nth-child(5) { left: 80%; animation-delay: 0.1s; background: #8b5cf6; }
.confetti-piece:nth-child(6) { left: 25%; animation-delay: 0.3s; background: #06b6d4; }
.confetti-piece:nth-child(7) { left: 55%; animation-delay: 0.2s; background: #ef4444; }
.confetti-piece:nth-child(8) { left: 75%; animation-delay: 0.35s; background: #22c55e; }

@keyframes confetti {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

/* Success Header */
.success-header {
    text-align: center;
    margin-bottom: 32px;
}

.success-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.success-subtitle {
    font-size: 18px;
    color: var(--color-gray-600);
    margin: 0;
}

/* Reference Card */
.success-reference-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.reference-header {
    margin-bottom: 16px;
}

.reference-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
}

.reference-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 3px;
    font-family: 'SF Mono', 'Monaco', monospace;
}

.reference-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    margin: 0;
}

.reference-note strong {
    color: #fff;
}

/* Booking Card */
.success-booking-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 32px;
}

.booking-card-header {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
}

.booking-card-image {
    width: 100px;
    height: 75px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.booking-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-card-info {
    flex: 1;
}

.booking-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 10px;
}

.booking-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.booking-card-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-gray-600);
}

.booking-card-details {
    padding: 20px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

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

.detail-label {
    color: var(--color-gray-500);
    font-size: 14px;
}

.detail-value {
    font-weight: 600;
    color: var(--color-dark);
}

.detail-paid {
    color: #16a34a;
}

.detail-balance {
    color: #f59e0b;
}

.balance-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #f59e0b;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.booking-card-pickup {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e5e7eb;
}

.pickup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gray-500);
    font-size: 14px;
}

.pickup-value {
    font-weight: 600;
    color: var(--color-dark);
}

/* Next Steps */
.success-next-steps {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin-bottom: 32px;
}

.next-steps-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 24px;
}

.next-steps-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-item {
    display: flex;
    gap: 16px;
}

.step-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f4fd;
    border-radius: 12px;
    color: #0071eb;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 4px;
}

.step-content p {
    font-size: 14px;
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Success Actions */
.success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.success-actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
}

.success-actions .btn-primary {
    background: #0071eb;
    color: #fff;
}

.success-actions .btn-outline {
    background: transparent;
    border: 2px solid #e5e7eb;
    color: var(--color-dark);
}

/* Success Help */
.success-help {
    text-align: center;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 16px;
}

.success-help p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--color-gray-600);
}

.success-help .help-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #25D366;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

/* ========================================
   RESPONSIVE - AVAILABILITY, CHECKOUT, SUCCESS
   ======================================== */

@media (max-width: 1024px) {
    .availability-layout {
        grid-template-columns: 1fr 360px;
        gap: 30px;
    }
    
    .checkout-layout {
        grid-template-columns: 1fr 380px;
        gap: 30px;
    }
}

@media (max-width: 900px) {
    .availability-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    
    .availability-sidebar,
    .checkout-summary-column {
        position: static;
        order: -1;
    }
    
    .availability-mobile-cta {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .checkout-mobile-bar {
        display: flex;
    }
    
    .checkout-page-enhanced {
        padding-bottom: 100px;
    }
    
    .availability-page {
        padding-bottom: 120px;
    }
}

@media (max-width: 768px) {
    .promo-content {
        flex-direction: column;
        gap: 10px;
    }
    
    .availability-tour-card {
        flex-direction: column;
    }
    
    .tour-card-image {
        width: 100%;
        height: 180px;
    }
    
    .included-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row-half {
        grid-template-columns: 1fr;
    }
    
    .checkout-form-column {
        padding: 20px;
    }
    
    .checkout-summary-card {
        padding: 20px;
    }
    
    .progress-line {
        width: 40px;
    }
    
    .success-title {
        font-size: 26px;
    }
    
    .reference-number {
        font-size: 22px;
        letter-spacing: 2px;
    }
    
    .booking-card-header {
        flex-direction: column;
    }
    
    .booking-card-image {
        width: 100%;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .availability-breadcrumb {
        display: none;
    }
    
    .urgency-content {
        font-size: 12px;
        gap: 6px;
    }
    
    .urgency-timer {
        font-size: 14px;
        padding: 3px 8px;
    }
    
    .selection-item {
        flex-wrap: wrap;
    }
    
    .selection-edit {
        width: 100%;
        text-align: right;
        margin-top: 8px;
    }
    
    .pricing-row {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .pricing-row.pricing-savings {
        margin: 0 -20px;
        padding: 12px 20px;
    }
    
    .availability-cta-btn {
        font-size: 16px;
        padding: 16px 20px;
    }
    
    .success-checkmark {
        width: 80px;
        height: 80px;
    }
    
    .checkmark {
        width: 80px;
        height: 80px;
    }
}

/* ==========================================================================
   CHECKOUT PAGE IMPROVEMENTS - ADDED FOR VISIBILITY AND PROFESSIONAL DESIGN
   ========================================================================== */

/* Progress Steps - Fixed for full visibility */
.checkout-progress {
    background: #fff;
    padding: 20px 0 16px 0;
    border-bottom: 1px solid #e5e7eb;
    overflow: visible !important;
    margin-top: 80px; /* Account for fixed header */
}

/* Reduce header margin on mobile where header is smaller */
@media (max-width: 1024px) {
    .checkout-progress {
        margin-top: 70px;
        padding: 16px 0 12px 0;
    }
    
    /* Override hidden labels for checkout progress */
    .checkout-progress .progress-step .step-label {
        display: block !important;
    }
}

.checkout-progress .container {
    overflow: visible !important;
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 80px;
}

.step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.progress-step.completed .step-number {
    background: #10b981;
    color: #fff;
}

.progress-step.active .step-number {
    background: #0071eb;
    color: #fff;
}

.step-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.progress-step.active .step-label {
    color: #0071eb;
    font-weight: 700;
}

.progress-step.completed .step-label {
    color: #10b981;
    font-weight: 600;
}

.progress-line {
    width: 80px;
    height: 3px;
    background: #e5e7eb;
    margin: 0 16px;
    margin-bottom: 28px;
    flex-shrink: 0;
    border-radius: 2px;
}

.progress-line.completed {
    background: #10b981;
}

.progress-line.active {
    background: linear-gradient(90deg, #10b981 0%, #0071eb 100%);
}

/* Tablet responsive for progress steps */
@media (max-width: 768px) {
    .checkout-progress .progress-step {
        min-width: 60px;
        gap: 6px;
    }
    
    .checkout-progress .step-number {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .checkout-progress .step-label {
        font-size: 11px;
        font-weight: 600;
        display: block !important;
    }
    
    .checkout-progress .progress-line {
        width: 40px;
        margin: 0 6px;
        margin-bottom: 20px;
    }
}

/* Mobile responsive for progress steps */
@media (max-width: 480px) {
    .checkout-progress .progress-step {
        min-width: 50px;
        gap: 4px;
    }
    
    .checkout-progress .step-number {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    .checkout-progress .step-number svg {
        width: 14px;
        height: 14px;
    }
    
    .checkout-progress .step-label {
        font-size: 10px;
        font-weight: 600;
        display: block !important;
    }
    
    .checkout-progress .progress-line {
        width: 24px;
        margin: 0 4px;
        margin-bottom: 16px;
    }
}

/* Terms Checkbox - Fixed visibility */
.checkout-terms {
    margin: 24px 0;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    position: relative;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-custom {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid #6b7280;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 0;
}

.checkbox-label:hover .checkbox-custom {
    border-color: #0071eb;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: #0071eb;
    border-color: #0071eb;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.checkbox-text a {
    color: #0071eb;
    text-decoration: underline;
    font-weight: 500;
}

.checkbox-text a:hover {
    color: #0057b8;
}

/* Security Badge - Professional redesign */
.checkout-security-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    margin-bottom: 24px;
}

.checkout-security-badge svg {
    color: #059669;
    flex-shrink: 0;
}

.checkout-security-badge span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkout-security-badge .badge-title {
    font-size: 14px;
    font-weight: 600;
    color: #047857;
}

.checkout-security-badge .badge-subtitle {
    font-size: 12px;
    color: #059669;
}

/* For single line security badge */
.checkout-security-badge span:not(.badge-title):not(.badge-subtitle) {
    font-size: 14px;
    font-weight: 600;
    color: #047857;
}

/* Tour Summary Card - Improved visual design */
.checkout-tour-summary {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tour-summary-image {
    width: 120px;
    height: 90px;
    min-width: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.tour-summary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-summary-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tour-summary-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    line-height: 1.3;
}

.tour-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tour-summary-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.tour-summary-meta .meta-item svg {
    color: #9ca3af;
}

/* Trust badges - Fixed visibility */
.summary-trust {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    margin-top: 16px;
}

.summary-trust .trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
}

.summary-trust .trust-item svg {
    color: #10b981;
    flex-shrink: 0;
}

/* Summary Badges - Two Line Format */
.summary-badge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #fafafa;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
}

.summary-badge .badge-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    border-radius: 50%;
    color: #10b981;
}

.summary-badge .badge-icon-yellow {
    background: #fef3c7;
    color: #f59e0b;
}

.summary-badge .badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-badge .badge-title {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

.summary-badge .badge-subtitle {
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}

/* Tour Summary Image - Responsive */
.tour-summary-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 120px;
    max-height: 200px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.tour-summary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tour Summary Image Desktop */
@media (min-width: 769px) {
    .checkout-tour-summary .tour-summary-image {
        width: 140px;
        min-width: 140px;
        height: 100px;
        aspect-ratio: auto;
        margin-bottom: 0;
    }
}

/* Tour Summary Image Tablet */
@media (max-width: 768px) and (min-width: 481px) {
    .tour-summary-image {
        max-height: 180px;
    }
}

/* Tour Summary Image Mobile */
@media (max-width: 480px) {
    .tour-summary-image {
        max-height: 160px;
    }
}

/* Free Cancellation Section */
.checkout-cancellation {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    margin-bottom: 16px;
}

.checkout-cancellation svg {
    color: #059669;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkout-cancellation .cancellation-content {
    flex: 1;
}

.checkout-cancellation .cancellation-title {
    font-size: 15px;
    font-weight: 600;
    color: #047857;
    margin: 0 0 4px 0;
}

.checkout-cancellation .cancellation-deadline {
    font-size: 13px;
    color: #059669;
    margin: 0;
}

/* Great Value Badge */
.checkout-value-badge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    margin-bottom: 24px;
}

.checkout-value-badge svg {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkout-value-badge .value-content {
    flex: 1;
}

.checkout-value-badge .value-title {
    font-size: 15px;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 4px 0;
}

.checkout-value-badge .value-rating {
    font-size: 13px;
    color: #b45309;
    margin: 0;
}

/* Pickup Location Input - Clean GetYourGuide-style */
.pickup-search-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #1f2937;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.pickup-search-input:focus {
    outline: none;
    border-color: #0071eb;
    box-shadow: 0 0 0 4px rgba(0, 113, 235, 0.12);
}

.pickup-search-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
    opacity: 1;
    line-height: 1.4;
}

/* Nominatim Autocomplete Dropdown Styling */
.nominatim-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 999999;
    display: none;
}

.nominatim-dropdown.active {
    display: block;
    animation: dropdownFade 0.2s ease;
}

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

.nominatim-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
}

.nominatim-item:last-child {
    border-bottom: none;
}

.nominatim-item:hover,
.nominatim-item.focused,
.nominatim-item.highlighted {
    background: #f8fafc;
}

.nominatim-item-icon {
    display: none;
}

.nominatim-item-content {
    flex: 1;
    min-width: 0;
}

.nominatim-item-main,
.nominatim-item-name {
    font-weight: 500;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.3;
}

.nominatim-item-secondary,
.nominatim-item-address {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nominatim-item-type {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    text-transform: capitalize;
}

.nominatim-loading {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nominatim-loading-spinner,
.nominatim-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #0071eb;
    border-radius: 50%;
    animation: nominatimSpin 0.6s linear infinite;
}

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

.nominatim-no-results {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

.nominatim-error {
    padding: 16px;
    text-align: center;
    color: #ef4444;
    font-size: 14px;
}

/* Pickup input wrapper for dropdown positioning */
.pickup-input-wrapper {
    position: relative;
    width: 100%;
    z-index: 999999;
}

/* Google Places Autocomplete Dropdown Styling */
.pac-container {
    z-index: 999999 !important;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    font-family: inherit;
    background: #fff;
    overflow: hidden;
}

.pac-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    border-top: 1px solid #f3f4f6;
}

.pac-item:first-child {
    border-top: none;
}

.pac-item:hover,
.pac-item-selected {
    background: #f8fafc;
}

.pac-item-query {
    font-weight: 600;
    color: #1f2937;
}

.pac-icon {
    margin-right: 12px;
}

.pac-matched {
    font-weight: 700;
}

/* Place selected animation */
.pickup-search-input.place-selected {
    border-color: #10b981 !important;
    background-color: #f0fdf4;
    animation: placeSelectedPulse 0.3s ease;
}

@keyframes placeSelectedPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

/* Mobile Responsive for Checkout */
@media (max-width: 768px) {
    .checkout-tour-summary {
        flex-direction: column;
    }
    
    .tour-summary-image {
        width: 100%;
        height: 160px;
    }
    
    .checkout-cancellation,
    .checkout-value-badge {
        padding: 14px;
    }
    
    .checkout-terms {
        padding: 14px;
    }
    
    .pickup-search-input {
        height: 48px;
        padding: 0 14px;
        font-size: 15px;
        line-height: 1.4;
    }
    
    .pac-container {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
    }
}

/* Small screens */
@media (max-width: 480px) {
    .pickup-search-input {
        height: 46px;
        padding: 0 12px;
        font-size: 14px;
        line-height: 1.4;
        border-radius: 8px;
    }
    
    .nominatim-dropdown {
        max-height: 200px;
    }
    
    .nominatim-item {
        padding: 10px 14px;
    }
}

/* ==========================================================================
   LEGAL PAGES - TERMS & CONDITIONS, CANCELLATION POLICY
   ========================================================================== */

.legal-page {
    background: #f8fafc;
    min-height: 100vh;
    padding-bottom: 80px;
}

.legal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    padding: 60px 0;
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.legal-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #fff;
}

.legal-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.legal-section {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.legal-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.legal-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 24px 0 12px 0;
}

.legal-section p {
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-section ul,
.legal-section ol {
    color: #4b5563;
    line-height: 1.8;
    padding-left: 24px;
    margin-bottom: 16px;
}

.legal-section li {
    margin-bottom: 8px;
}

/* Policy Highlight Box */
.policy-highlight {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #10b981;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    text-align: center;
}

.highlight-icon {
    margin-bottom: 16px;
}

.highlight-icon svg {
    width: 48px;
    height: 48px;
    stroke: #10b981;
}

.policy-highlight h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #065f46;
    margin: 0 0 12px 0;
    border: none;
    padding: 0;
}

.policy-highlight p {
    color: #047857;
    font-size: 1.125rem;
    margin: 0;
}

/* Cancellation Timeline */
.cancellation-timeline {
    position: relative;
    padding-left: 40px;
    margin: 24px 0;
}

.cancellation-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -33px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #10b981;
}

.timeline-item.warning .timeline-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px #f59e0b;
}

.timeline-item.danger .timeline-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px #ef4444;
}

.timeline-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.timeline-content p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Refund Percentage Badge */
.refund-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-left: 8px;
}

.refund-badge.full {
    background: #d1fae5;
    color: #065f46;
}

.refund-badge.partial {
    background: #fef3c7;
    color: #92400e;
}

.refund-badge.none {
    background: #fee2e2;
    color: #991b1b;
}

/* Contact Card */
.contact-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-item svg {
    stroke: #3b82f6;
}

.contact-item span {
    color: #1f2937;
    font-weight: 500;
}

.contact-item a {
    color: #3b82f6;
    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}

/* Legal Page Mobile Responsive */
@media (max-width: 768px) {
    .legal-header {
        padding: 40px 20px;
    }
    
    .legal-title {
        font-size: 1.75rem;
    }
    
    .legal-section {
        padding: 20px;
    }
    
    .legal-section h2 {
        font-size: 1.25rem;
    }
    
    .policy-highlight {
        padding: 24px 20px;
    }
    
    .policy-highlight h2 {
        font-size: 1.375rem;
    }
    
    .contact-card {
        flex-direction: column;
        gap: 16px;
    }
}

/* ========================================
   MOBILE DESTINATION PAGE FIXES
   ======================================== */

/* Fix destination card clicks on mobile */
.dest-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(198, 93, 59, 0.2);
    touch-action: manipulation;
}

/* Ensure overlay doesn't block clicks */
.dest-card__overlay {
    pointer-events: none !important;
}

.dest-card__hover-info {
    pointer-events: none !important;
}

/* Mobile tap feedback */
@media (max-width: 768px) {
    .dest-card {
        -webkit-tap-highlight-color: transparent;
    }
    
    .dest-card__link {
        position: relative;
        z-index: 1;
    }
    
    .dest-card__link:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* Ensure all child elements don't block clicks */
    .dest-card__image,
    .dest-card__content,
    .dest-card__title,
    .dest-card__arrow {
        pointer-events: none;
    }
    
    /* Make the link the only clickable element */
    .dest-card__link {
        pointer-events: auto !important;
    }
}

/* ========================================
   REGION FILTER BAR - INFINITE SCROLL
   ======================================== */

/* Infinite scroll animation for mobile filter bar */
@keyframes filterScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    /* Make filter bar scrollable with marquee effect */
    .dest-filter__inner {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        overflow: hidden;
        padding: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        animation: filterScroll 20s linear infinite;
        width: max-content;
    }
    
    /* Pause animation on hover/touch */
    .dest-filter__inner:hover,
    .dest-filter__inner:active {
        animation-play-state: paused;
    }
    
    /* Filter pills for mobile */
    .dest-filter__pill {
        flex-shrink: 0;
        padding: var(--space-2) var(--space-3);
        font-size: 13px;
        white-space: nowrap;
    }
    
    /* "All" button styling - make it stand out */
    .dest-filter__pill[data-region="all"] {
        background: var(--color-terracotta);
        color: white;
        border-color: var(--color-terracotta);
    }
    
    .dest-filter__pill[data-region="all"]:hover {
        background: var(--color-terracotta-dark, #a84832);
    }
    
    /* Active state for all pills */
    .dest-filter__pill--active {
        background: var(--color-terracotta) !important;
        color: white !important;
        border-color: var(--color-terracotta) !important;
        transform: scale(1.05);
    }
    
    /* Container for infinite scroll */
    .dest-filter .container {
        overflow: hidden;
        padding: 0 var(--space-4);
    }
}

/* Phone-specific (smaller screens) */
@media (max-width: 480px) {
    .dest-filter__inner {
        animation-duration: 15s;
    }
    
    .dest-filter__pill {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .dest-filter__pill svg {
        width: 14px;
        height: 14px;
    }
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dest-filter__inner {
        animation: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================
   MOBILE SCROLL PERFORMANCE OPTIMIZATION
   Fix scroll blocking and improve smoothness
   ======================================== */

@media (max-width: 768px) {
    html, body {
        -webkit-overflow-scrolling: touch;
    }

    .reveal,
    .reveal-section,
    .reveal-card,
    .reveal-header,
    .reveal-fade,
    .ht-card {
        transition-duration: 0.3s !important;
        transition-timing-function: ease-out !important;
        transform: none !important;
    }
    
    .reveal.is-visible,
    .reveal-section.is-visible,
    .reveal-card.is-visible,
    .reveal-header.is-visible,
    .reveal-fade.is-visible,
    .ht-card.is-visible {
        opacity: 1 !important;
        transform: none !important;
    }
    
    .reveal-section,
    .dest-region {
        opacity: 1 !important;
        transform: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .reveal-section.is-visible,
    .dest-region.is-visible {
        opacity: 1 !important;
    }
    
    .card,
    .tour-card,
    .dest-card,
    .ht-card {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Simplify hover effects on mobile */
    .card:hover,
    .tour-card:hover,
    .dest-card:hover,
    .ht-card:hover {
        transform: none !important;
    }
    
    /* Improve section rendering */
    section {
        contain: layout style;
        content-visibility: auto;
        contain-intrinsic-size: auto 500px;
    }
    
    /* Hero section - instant load */
    .hero,
    .hero-video,
    .dest-hero {
        content-visibility: visible;
        contain-intrinsic-size: none;
    }
    
    /* Optimize trust badges marquee */
    .trust-badges-wrapper {
        will-change: auto;
    }
    
    /* Reduce box-shadow animations */
    .card,
    .tour-card,
    .dest-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        transition: opacity 0.2s ease !important;
    }
}

/* Phone-specific scroll optimizations */
@media (max-width: 480px) {
    /* Even simpler animations on phones */
    .reveal,
    .reveal-section,
    .reveal-card,
    .reveal-header {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Instant visibility on phones */
    .reveal.is-visible,
    .reveal-section.is-visible,
    .reveal-card.is-visible,
    .reveal-header.is-visible {
        opacity: 1 !important;
    }
    
    /* Disable transform animations completely */
    section,
    .section,
    article {
        transform: none !important;
    }
}

/* ========================================
   MARKETING BADGES - Attractive Colors & Icons
   Tour card marketing badges with medals/icons
   ======================================== */
.card-marketing-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: badgePulse 2s ease-in-out infinite;
    z-index: 10;
}

.card-marketing-badge-icon {
    font-size: 13px;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Best Seller - Golden Yellow with Trophy */
.card-marketing-badge--bestseller {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/* Top Rated - Emerald Green with Star */
.card-marketing-badge--toprated {
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}

/* Popular - Vibrant Orange with Fire */
.card-marketing-badge--popular {
    background: linear-gradient(135deg, #FF6B35 0%, #E55100 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

/* Signature - Royal Purple with Diamond */
.card-marketing-badge--signature {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}

/* Default badge - Ocean Blue */
.card-marketing-badge--default {
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

/* Hover effect for marketing badges */
.card:hover .card-marketing-badge {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .card-marketing-badge {
        padding: 4px 10px;
        font-size: 10px;
    }
    .card-marketing-badge-icon {
        font-size: 11px;
    }
}