/* ============================================
   MODERN GLASSMORPHISM THEME
   Professionieviaggi.it - 2026 Redesign
   ============================================ */

/* Fix for fixed header covering content when navigating to anchors */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 130px; /* Accounts for fixed two-row header height */
}

/* Add scroll margin to all anchor targets — compensates for the fixed
   two-row site header so #anchor jumps don't end up under it. */
[id] {
    scroll-margin-top: 130px;
}

/* …but defeat that rule inside Bootstrap modals. Modal bodies are
   internally-scrollable (overflow-y: auto) and live above the fixed
   header anyway; the 130px offset there causes the modal body to
   open scrolled partway down (hiding badge/title) whenever Bootstrap's
   show.bs.modal focuses anything inside. */
.modal [id] {
    scroll-margin-top: 0;
}

/* Specific sections that are navigation targets */
#home,
#ricerca,
#destinazioni,
#offerte_speciali_offerte,
#locandine_offerte,
#tourop,
#touron,
#conferma,
#richiesta_informazioni,
#div_informazioni_2 {
    scroll-margin-top: 130px;
}

/* Mobile: smaller header, adjust scroll padding */
@media (max-width: 992px) {
    html {
        scroll-padding-top: 80px;
    }
    
    [id] {
        scroll-margin-top: 80px;
    }
    
    #home,
    #ricerca,
    #destinazioni,
    #offerte_speciali_offerte,
    #locandine_offerte,
    #tourop,
    #touron,
    #conferma,
    #richiesta_informazioni,
    #div_informazioni_2 {
        scroll-margin-top: 80px;
    }
}

/* CSS Custom Properties (Design Tokens) */
:root {
    /* Primary Colors */
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-bg-light: rgba(255, 255, 255, 0.18);
    --glass-bg-dark: rgba(0, 0, 0, 0.25);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-border-subtle: rgba(255, 255, 255, 0.1);
    
    /* Accent Colors */
    --accent-primary: #ff4757;
    --accent-primary-glow: rgba(255, 71, 87, 0.4);
    --accent-secondary: #2ed573;
    --accent-tertiary: #1e90ff;
    
    /* Gradients */
    --gradient-sunset: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);
    --gradient-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-forest: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dark: #1a1a2e;
    
    /* Shadows */
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glass-hover: 0 16px 48px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 40px var(--accent-primary-glow);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    
    /* Blur Effects */
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;
    --blur-xl: 40px;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Typography */
    --font-display: 'Outfit', 'Poppins', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* ============================================
   GLASSMORPHISM BASE COMPONENTS
   ============================================ */

/* Glass Card */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    transition: all var(--transition-normal);
}

.glass-card:hover {
    background: var(--glass-bg-light);
    box-shadow: var(--shadow-glass-hover);
    transform: translateY(-4px);
}

/* Glass Card Dark Variant */
.glass-card-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

/* ============================================
   MODERN HOME SECTION
   ============================================ */

.home-modern {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
}

/* Animated Background Gradient */
.home-modern .home_background {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 50%, rgba(255, 71, 87, 0.8) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" fill-opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    background-size: 200% 200%, 100px 100px;
    animation: gradientShift 15s ease infinite;
    z-index: -1;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%, 0 0; }
    50% { background-position: 100% 50%, 0 0; }
}

/* Floating Orbs Background Effect */
.home-modern::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    top: -100px;
    right: -100px;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

.home-modern::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 71, 87, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -50px;
    left: -50px;
    animation: float 10s ease-in-out infinite reverse;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -20px) scale(1.05); }
    66% { transform: translate(-10px, 10px) scale(0.95); }
}

/* ============================================
   MODERN SEARCH FORM
   ============================================ */

.search-container-modern {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.search-glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 2.5rem 3rem;
    transition: all var(--transition-normal);
}

.search-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Search Title */
.search-title {
    text-align: center;
    margin-bottom: 2rem;
}

.search-title h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.search-title h2::before {
    content: '🔍';
    font-size: 1.5rem;
}

.search-title-accent {
    background: var(--gradient-fire);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Search Form Layout */
.search-form-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
}

/* Form Item Container */
.form-item-modern {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
}

/* Modern Select Styling */
.select-modern {
    position: relative;
}

.select-modern select,
.select-modern .select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-md) !important;
    padding: 0 1.25rem !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transition: all var(--transition-normal) !important;
    cursor: pointer !important;
}

.select-modern select:hover,
.select-modern .select2-container--default .select2-selection--single:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.12),
        0 0 0 4px rgba(255, 71, 87, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    transform: translateY(-2px);
}

.select-modern select:focus,
.select-modern .select2-container--default.select2-container--focus .select2-selection--single,
.select-modern .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 0 0 4px rgba(255, 71, 87, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Select2 Customization */
.select-modern .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 52px !important;
    padding-left: 0 !important;
    color: var(--text-dark) !important;
}

.select-modern .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 54px !important;
    right: 12px !important;
}

.select-modern .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--accent-primary) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
}

/* Custom multi-column dropdown for Select2 */
.two-column-dropdown .select2-results__options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px;
    padding: 8px !important;
}
.two-column-dropdown .select2-results__option {
    white-space: normal;
    word-break: break-word;
    border-radius: 4px;
    padding: 6px 12px !important;
}
@media (max-width: 768px) {
    .two-column-dropdown .select2-results__options {
        grid-template-columns: 1fr !important; /* Single column on mobile for better usability */
    }
}

/* Modern Buttons */
.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 56px;
    min-width: 140px;
    padding: 0 2rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    white-space: nowrap;
}

/* Primary Button (Find) */
.btn-modern-primary {
    background: var(--gradient-fire);
    color: white;
    box-shadow: 
        0 8px 25px rgba(241, 39, 17, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-modern-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 12px 35px rgba(241, 39, 17, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-modern-primary:active {
    transform: translateY(-1px) scale(0.98);
}

/* Secondary Button (Reset) */
.btn-modern-secondary {
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent-primary);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.btn-modern-secondary:hover {
    background: white;
    color: #d63031;
    transform: translateY(-3px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Button Icons */
.btn-modern i {
    font-size: 1.1rem;
}

/* Button Group */
.btn-group-modern {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 992px) {
    .search-glass {
        padding: 2rem;
    }
    
    .search-title h2 {
        font-size: 1.6rem;
    }
    
    .form-item-modern {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    .home-modern {
        padding: 1.5rem 1rem;
        min-height: auto;
    }
    
    .search-glass {
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }
    
    .search-title h2 {
        font-size: 1.3rem;
    }
    
    .search-title h2::before {
        font-size: 1.2rem;
    }
    
    .btn-modern {
        height: 50px;
        min-width: 120px;
        padding: 0 1.5rem;
        font-size: 0.9rem;
    }
    
    .select-modern select,
    .select-modern .select2-container--default .select2-selection--single {
        height: 50px !important;
    }
}

@media (max-width: 480px) {
    .search-glass {
        padding: 1.25rem;
    }
    
    .search-title h2 {
        font-size: 1.1rem;
    }
    
    .btn-group-modern {
        width: 100%;
    }
    
    .btn-modern {
        flex: 1;
        min-width: 0;
    }
}

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

.section-header-modern {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-header-modern h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem 0;
    position: relative;
    display: inline-block;
}

.section-header-modern h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-fire);
    border-radius: var(--radius-full);
}

.section-header-modern p {
    color: #666;
    font-size: 1.1rem;
    margin: 1rem 0 0 0;
}

/* ============================================
   MODERN CARDS FOR OFFERS
   ============================================ */

.offer-card-modern {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-normal);
}

.offer-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.offer-card-modern .image-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

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

.offer-card-modern:hover .image-wrapper img {
    transform: scale(1.08);
}

.offer-card-modern .card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--gradient-fire);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(241, 39, 17, 0.3);
}

.offer-card-modern .card-content {
    padding: 1.5rem;
}

.offer-card-modern .card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.offer-card-modern .card-location {
    color: #666;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.offer-card-modern .card-location i {
    color: var(--accent-primary);
}

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

/* Subtle entrance animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s var(--transition-normal) forwards;
}

/* Staggered animation delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Shimmer effect for loading states */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-gradient {
    background: var(--gradient-fire);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: var(--gradient-ocean);
}

.bg-gradient-accent {
    background: var(--gradient-fire);
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.rounded-modern {
    border-radius: var(--radius-lg);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* ============================================
   MODERN HEADER / NAVIGATION
   ============================================ */

.header-modern {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Navigation Links */
.nav-link-modern {
    position: relative;
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: #333 !important;
    text-decoration: none;
    transition: color var(--transition-normal);
    border-radius: var(--radius-sm);
}

.nav-link-modern::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-fire);
    transition: all var(--transition-normal);
    transform: translateX(-50%);
    border-radius: var(--radius-full);
}

.nav-link-modern:hover {
    color: var(--accent-primary) !important;
}

.nav-link-modern:hover::before {
    width: 80%;
}

.nav-link-modern.active::before {
    width: 100%;
}

/* Phone/Contact Badge */
.contact-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: var(--radius-full);
    font-weight: 600;
    color: #667eea;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.contact-badge-modern:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.contact-badge-modern i {
    font-size: 1rem;
}

/* ============================================
   MODERN CARDS & COMPONENTS
   ============================================ */

/* Enhanced Grid Containers */
.grid-modern {
    display: grid;
    gap: 1.5rem;
}

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

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

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

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

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

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

/* Modern Input Styles */
.input-modern {
    width: 100%;
    height: 56px;
    padding: 0 1.25rem;
    background: white;
    border: 2px solid #e8e8e8;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-dark);
    transition: all var(--transition-normal);
}

.input-modern:hover {
    border-color: #d0d0d0;
}

.input-modern:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(255, 71, 87, 0.1);
}

.input-modern::placeholder {
    color: #999;
}

/* Modern Textarea */
.textarea-modern {
    min-height: 120px;
    padding: 1rem 1.25rem;
    resize: vertical;
}

/* Input with Icon */
.input-group-modern {
    position: relative;
}

.input-group-modern .input-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    transition: color var(--transition-normal);
}

.input-group-modern .input-modern {
    padding-left: 3rem;
}

.input-group-modern:focus-within .input-icon {
    color: var(--accent-primary);
}

/* ============================================
   MODERN FORM STYLES
   ============================================ */

.form-modern {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.form-title-modern {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-row-modern {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row-modern > * {
    flex: 1;
}

@media (max-width: 768px) {
    .form-row-modern {
        flex-direction: column;
    }
    
    .form-modern {
        padding: 1.5rem;
    }
}

/* ============================================
   MODERN MODAL ENHANCEMENTS
   ============================================ */

.modal-modern .modal-content {
    background: white;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.modal-modern .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 1.5rem 2rem;
}

.modal-modern .modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
}

.modal-modern .modal-body {
    padding: 2rem;
}

.modal-modern .modal-footer {
    border-top: 1px solid #eee;
    padding: 1.25rem 2rem;
}

.modal-modern .close {
    color: white;
    opacity: 0.8;
    text-shadow: none;
}

.modal-modern .close:hover {
    opacity: 1;
}

/* ============================================
   LOADING STATES
   ============================================ */

.skeleton-modern {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e8e8e8 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-image {
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
}

/* ============================================
   TOOLTIP MODERN
   ============================================ */

.tooltip-modern {
    position: absolute;
    background: var(--text-dark);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1000;
}

.tooltip-modern::before {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

.tooltip-modern.show {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-fire);
    z-index: 9999;
    transition: width 0.1s;
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top-modern {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--gradient-ocean);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    z-index: 999;
}

.back-to-top-modern.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
}

/* ============================================
   NOTIFICATION / TOAST MODERN
   ============================================ */

.toast-modern {
    position: fixed;
    top: 2rem;
    right: 2rem;
    min-width: 300px;
    background: white;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    transition: transform var(--transition-normal);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.toast-modern.show {
    transform: translateX(0);
}

.toast-modern-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-modern-success .toast-modern-icon {
    background: rgba(46, 213, 115, 0.15);
    color: #2ed573;
}

.toast-modern-error .toast-modern-icon {
    background: rgba(255, 71, 87, 0.15);
    color: var(--accent-primary);
}

.toast-modern-content {
    flex: 1;
}

.toast-modern-title {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.toast-modern-message {
    font-size: 0.9rem;
    color: #666;
}

/* ============================================
   WELCOME TOAST
   ============================================ */

.welcome-toast {
    position: fixed;
    top: 5.5rem;
    right: 1.5rem;
    width: 340px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 10001;
    overflow: hidden;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.welcome-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.welcome-toast-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.welcome-toast-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
}

.welcome-toast-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.75rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}

.welcome-toast-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.welcome-toast-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 1.5rem;
}

.welcome-toast-greeting {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.welcome-toast-subtitle {
    font-size: 0.85rem;
    color: #059669;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.welcome-toast-subtitle i {
    font-size: 0.75rem;
}

.welcome-toast-body {
    padding: 1rem 1.5rem 1.25rem;
}

.welcome-toast-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 0.6rem;
}

.welcome-toast-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.welcome-toast-features li {
    font-size: 0.85rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.welcome-toast-features li i {
    font-size: 0.75rem;
    color: #22c55e;
    width: 16px;
    text-align: center;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .welcome-toast {
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
        top: 4.5rem;
    }
    
    .welcome-toast-features {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MODERN FILTER SECTION
   ============================================ */

.filter-section-modern {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin: 2rem auto;
    max-width: 1200px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.filter-title-modern {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.filter-title-modern i {
    color: var(--accent-primary);
}

.filter-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.filter-item-modern {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label-modern {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-select-modern {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all var(--transition-normal);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.filter-select-modern:hover {
    border-color: #d1d5db;
}

.filter-select-modern:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

/* AI Toggle Modern */
.ai-toggle-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-radius: var(--radius-full);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.ai-toggle-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}

.ai-toggle-label.active {
    color: #667eea;
}

.ai-toggle-switch-modern {
    position: relative;
    width: 52px;
    height: 28px;
}

.ai-toggle-switch-modern input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ai-toggle-slider-modern {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e0e0e0;
    border-radius: 28px;
    transition: all var(--transition-normal);
}

.ai-toggle-slider-modern::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ai-toggle-switch-modern input:checked + .ai-toggle-slider-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ai-toggle-switch-modern input:checked + .ai-toggle-slider-modern::before {
    transform: translateX(24px);
}

/* ============================================
   SECTION TITLES ENHANCED
   ============================================ */

.section-title-modern {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 1rem 0;
}

.section-title-modern h2 {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    display: inline-block;
}

.section-title-modern h2 .accent {
    color: var(--accent-primary);
}

.section-title-modern h3 {
    font-size: 1.1rem;
    font-weight: 400;
    color: #666;
    margin-top: 0.75rem;
}

/* Underline decoration */
.section-title-modern h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-fire);
    border-radius: var(--radius-full);
}

/* ============================================
   ENHANCED CARD HOVER EFFECTS
   ============================================ */

.card-hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.card-hover-glow {
    transition: all var(--transition-normal);
}

.card-hover-glow:hover {
    box-shadow: 0 0 30px rgba(255, 71, 87, 0.15);
}

/* Image zoom on hover */
.img-zoom-container {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.img-zoom {
    transition: transform var(--transition-slow);
}

.img-zoom-container:hover .img-zoom {
    transform: scale(1.08);
}

/* ============================================
   PAGINATION MODERN
   ============================================ */

.pagination-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.pagination-btn-modern {
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn-modern:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
}

.pagination-btn-modern.active {
    background: var(--gradient-fire);
    border-color: transparent;
    color: white;
}

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

.pagination-dots-modern {
    padding: 0 0.5rem;
    color: #999;
}

/* ============================================
   BADGE MODERN
   ============================================ */

.badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.badge-primary {
    background: var(--gradient-fire);
    color: white;
}

.badge-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.badge-info {
    background: var(--gradient-ocean);
    color: white;
}

.badge-warning {
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    color: white;
}

.badge-ai {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* ============================================
   CHIP / TAG MODERN
   ============================================ */

.chip-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    transition: all var(--transition-normal);
}

.chip-modern:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.chip-modern.selected {
    background: rgba(255, 71, 87, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.chip-close {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.chip-close:hover {
    opacity: 1;
}

/* ============================================
   TRANSPARENT HOME VARIANT (No Background)
   ============================================ */

.home-modern.home-transparent {
    min-height: auto;
    padding: 2rem 1rem;
}

.home-modern.home-transparent .home_background {
    display: none;
}

.home-modern.home-transparent::before,
.home-modern.home-transparent::after {
    display: none;
}

.home-modern.home-transparent .search-glass {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.home-modern.home-transparent .search-glass:hover {
    background: white;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.12),
        0 10px 30px rgba(0, 0, 0, 0.08);
}

.home-modern.home-transparent .search-title h2 {
    color: var(--text-dark);
    text-shadow: none;
}

.home-modern.home-transparent .search-title h2::before {
    content: none;
}

/* Legacy responsive.css applies `.home_content { top: 5rem !important }` at
   max-width 991px (it was designed for the old hero-image layout). The modern
   home centers its child via flex, so that 80px nudge pushes the search card
   below the parent's overflow:hidden boundary — clipping the TROVA button. */
.home-modern .home_content {
    top: 0 !important;
}

/* ============================================
   MODERN GLASSMORPHISM HEADER
   ============================================ */

.header-glass {
    background: linear-gradient(135deg, 
        var(--header-glass-color-1, rgba(102, 126, 234, 0.95)) 0%, 
        var(--header-glass-color-2, rgba(118, 75, 162, 0.95)) 50%,
        var(--header-glass-color-3, rgba(155, 89, 182, 0.95)) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        0 8px 32px var(--header-glass-shadow, rgba(102, 126, 234, 0.25)),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-glass-dark {
    background: linear-gradient(135deg, 
        rgba(26, 26, 46, 0.97) 0%, 
        rgba(45, 45, 80, 0.97) 100%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Fix for modal-open padding shift on fixed header */
body.modal-open .header {
    padding-right: 15px;
}

/* Header Container Modern */
.header-container-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
    gap: 2rem;
}

/* Logo Modern */
.logo-modern {
    flex-shrink: 0;
}

.logo-modern img {
    height: clamp(45px, 5vw, 60px);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    transition: all var(--transition-normal);
}

.logo-modern:hover img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    transform: scale(1.02);
}

/* Navigation Modern */
.nav-modern {
    display: flex;
    align-items: center;
    gap: 0.02rem;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.nav-modern a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    position: relative;
    white-space: nowrap;
}

.nav-modern a:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.nav-modern a.active {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

.nav-modern a i {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Navigation Pill Style */
.nav-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full) !important;
    padding: 0.5rem 1.25rem !important;
}

.nav-pill:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.25);
}

/* CTA Button in Nav */
.nav-cta {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #667eea !important;
    border-radius: var(--radius-full) !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nav-cta:hover {
    background: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Hide hamburger on desktop */
@media (min-width: 993px) {
    .hamburger-btn-modern {
        display: none !important;
    }
}

/* Header Actions */
.header-actions-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Contact Info Modern */
.contact-info-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.contact-btn-modern:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: white;
    text-decoration: none;
}

.contact-btn-modern i {
    font-size: 1rem;
}

/* Phone Badge Accent */
.phone-badge-modern {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)) !important;
    color: #667eea !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
}

.phone-badge-modern:hover {
    background: white !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
}

/* Tutorial Button in Header */
.tutorial-btn-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(232, 168, 25, 0.15), rgba(232, 168, 25, 0.08));
    border: 1px solid rgba(232, 168, 25, 0.4);
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tutorial-btn-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232, 168, 25, 0.2), transparent);
    transition: left 0.5s ease;
}

.tutorial-btn-header:hover {
    background: linear-gradient(135deg, rgba(232, 168, 25, 0.25), rgba(232, 168, 25, 0.15));
    border-color: #e8a819;
    color: #fff;
    box-shadow: 0 4px 20px rgba(232, 168, 25, 0.3);
    transform: translateY(-1px);
}

.tutorial-btn-header:hover::before {
    left: 100%;
}

.tutorial-btn-header i {
    font-size: 0.9rem;
    animation: gentleBounce 2s ease-in-out infinite;
}

@keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.tutorial-btn-header .tutorial-btn-label {
    letter-spacing: 0.3px;
}

/* Mobile version - icon only */
.tutorial-btn-header.mobile {
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
}

.tutorial-btn-header.mobile .tutorial-btn-label {
    display: none;
}

/* Hide label on smaller screens */
@media (max-width: 1100px) {
    .tutorial-btn-header .tutorial-btn-label {
        display: none;
    }
    
    .tutorial-btn-header {
        padding: 8px;
        border-radius: 50%;
        width: 38px;
        height: 38px;
        justify-content: center;
    }
}

/* ============================================
   MODERN SLIDE-OUT MENU (Mobile & Desktop)
   ============================================ */

.menu-overlay-modern {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

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

.menu-container-modern {
    position: fixed;
    top: 0;
    right: -100%;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99999;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
}

.menu-overlay-modern.active .menu-container-modern {
    right: 0;
}

/* Menu Header */
.menu-header-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Add safe-area top so the highlighted first row doesn't clip under the
       dynamic island / notch on iPhones (mobile audit Phase 2). */
    padding: calc(1.5rem + env(safe-area-inset-top)) 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.menu-header-modern .menu-logo {
    height: 45px;
    width: auto;
    filter: brightness(0) invert(1);
}

.menu-close-modern {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.menu-close-modern:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

/* Menu Content */
.menu-content-modern {
    padding: 1rem 0;
}

.menu-section-modern {
    padding: 0.5rem 0;
}

.menu-section-title {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ca3af;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.25rem;
}

.menu-item-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all var(--transition-normal);
}

.menu-item-modern:hover {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, transparent 100%);
    color: #667eea;
    border-left-color: #667eea;
    transform: translateX(4px);
}

.menu-item-modern i {
    width: 20px;
    font-size: 1rem;
    color: #667eea;
    text-align: center;
    flex-shrink: 0;
}

.menu-item-modern.highlight {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(255, 71, 87, 0.05) 100%);
    color: var(--accent-primary);
    font-weight: 600;
}

.menu-item-modern.highlight i {
    color: var(--accent-primary);
}

/* Menu Divider */
.menu-divider-modern {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: 0.75rem 1.5rem;
}

/* Menu Contact Card */
.menu-contact-card {
    margin: 1rem 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: var(--radius-lg);
}

.menu-contact-card a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    color: #374151;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.menu-contact-card a:hover {
    color: #667eea;
}

.menu-contact-card a i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #667eea;
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
}

/* ============================================
   HAMBURGER MENU BUTTON MODERN
   ============================================ */

.hamburger-btn-modern {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    padding: 0;
}

.hamburger-btn-modern:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hamburger-btn-modern span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all var(--transition-normal);
}

.hamburger-btn-modern.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-btn-modern.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.hamburger-btn-modern.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   HEADER TWO-ROW LAYOUT
   ============================================ */

.header-row-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-row-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 2rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-row-secondary a {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

/* ============================================
   RESPONSIVE HEADER
   ============================================ */

@media (max-width: 1200px) {
    .header-container-modern {
        padding: 0.5rem 1.5rem;
    }
    
    .nav-modern a {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 992px) {
    .nav-modern {
        display: none;
    }
    
    .header-actions-modern .contact-btn-modern:not(.phone-badge-modern) {
        display: none;
    }
}

@media (max-width: 768px) {
    .header-container-modern {
        padding: 0.5rem 1rem;
    }
    
    .header-row-unified {
        padding: 0.5rem 1rem;
    }
    
    .logo-modern img {
        height: 45px;
    }
    
    .contact-info-modern {
        gap: 0.5rem;
    }
    
    .phone-badge-modern {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8rem;
    }
    
    .phone-badge-modern span {
        display: none;
    }
}

@media (max-width: 480px) {
    .logo-modern img {
        height: 38px;
    }
    
    .hamburger-btn-modern {
        width: 42px;
        height: 42px;
    }
    
    .header-row-unified {
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   MODERN DROPDOWN NAVIGATION
   ============================================ */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    cursor: pointer;
    border: none;
    background: transparent;
}

.nav-dropdown-trigger:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.nav-dropdown-trigger .dropdown-arrow {
    font-size: 0.7rem;
    transition: transform var(--transition-normal);
    opacity: 0.7;
}

.nav-dropdown:hover .nav-dropdown-trigger .dropdown-arrow,
.nav-dropdown.active .nav-dropdown-trigger .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    min-width: 220px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.2),
        0 10px 25px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1000;
}

/* Arrow/triangle on top of dropdown */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.98);
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
}

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

/* Dropdown Items - Higher specificity to override .nav-modern a */
.nav-dropdown-menu .nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #374151 !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    white-space: nowrap;
    background: transparent;
}

.nav-dropdown-menu .nav-dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
    color: #667eea !important;
    transform: translateX(4px);
}

.nav-dropdown-menu .nav-dropdown-item i {
    width: 18px;
    font-size: 0.9rem;
    color: #667eea;
    text-align: center;
    flex-shrink: 0;
}

/* Dropdown section label */
.nav-dropdown-label {
    padding: 0.4rem 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Login required hint for menu items */
.login-required-hint {
    display: block;
    font-size: 0.65rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 0.15rem;
    font-weight: 400;
}

/* Hide hint when user is logged in (uses user-logged class from website_cc.js) */
/* Auth-pill swap: both Account and Registrati render in the DOM;
   we hide whichever doesn't match body.user-logged. AJAX login/logout
   toggles that class via fixBodyClass() so the pill flips instantly
   without rebuilding the DOM. Server-side render of the body tag
   includes/excludes .user-logged so there's no flash on initial load. */
.auth-pill-account                    { display: none; }
body.user-logged .auth-pill-account   { display: inline-flex; }
body.user-logged .auth-pill-registrati{ display: none; }

body.user-logged .login-required-hint {
    display: none;
}

/* Azienda required hint for menu items */
.azienda-required-hint {
    display: block;
    font-size: 0.65rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 0.15rem;
    font-weight: 400;
}

/* Hide hint when user is logged in as azienda (uses azienda-logged class from website_cc.js) */
body.azienda-logged .azienda-required-hint {
    display: none;
}

/* Richiedi-preventivo is open to everyone (the form has its own
   nome/email fields). No login-state styling — always clickable, never
   muted. */
.richiedi-preventivo-link {
    cursor: pointer;
}

.nav-dropdown-menu .nav-dropdown-item.highlight {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.08) 0%, rgba(255, 71, 87, 0.04) 100%);
    color: var(--accent-primary) !important;
}

.nav-dropdown-menu .nav-dropdown-item.highlight i {
    color: var(--accent-primary);
}

.nav-dropdown-menu .nav-dropdown-item.highlight:hover {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.15) 0%, rgba(255, 71, 87, 0.08) 100%) !important;
}

/* Dropdown Divider */
.nav-dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: 0.4rem 0.75rem;
}

/* Dropdown Header */
.nav-dropdown-header {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

/* Keep dropdown open when hovering menu */
.nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
}

/* Unified Single-Row Header Layout (wraps naturally into sub-rows) */
.header-row-unified {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Logo stays on left */
.header-row-unified .logo-modern {
    order: 1;
}

/* Navigation in center (wraps naturally) */
.header-row-unified .nav-modern {
    order: 2;
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0; /* Allow shrinking */
}

/* Actions on right */
.header-row-unified .header-actions-top {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Hamburger last */
.header-row-unified .hamburger-btn-modern {
    order: 4;
}

/* Sub-rows within actions */
.header-subrow {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 0.75vw, 0.75rem);
}

.header-subrow .tutorial-btn-header,
.header-subrow .phone-badge-modern {
    padding: clamp(0.4rem, 0.5vw, 0.5rem) clamp(0.8rem, 1vw, 1rem);
    font-size: clamp(0.8rem, 0.85vw, 0.9rem);
    white-space: nowrap;
}

.header-subrow .nav-pill,
.header-subrow .nav-cta {
    padding: clamp(0.4rem, 0.5vw, 0.5rem) clamp(1rem, 1.25vw, 1.25rem) !important;
    font-size: clamp(0.8rem, 0.85vw, 0.9rem) !important;
}

/* Navigation Sections */
.nav-section {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
}

/* Navigation Separator */
.nav-separator {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Row break — a zero-height, full-width flex item that forces a wrap
   between the two explicit nav rows. Works because the parent
   .nav-modern is display: flex; flex-wrap: wrap. */
.nav-modern .nav-row-break {
    flex-basis: 100%;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    display: block;
}

/* Responsive font sizing for navigation. The two-row layout (forced by
   .nav-row-break) needs ~6 items in row 1 and ~5 items in row 2 to all
   stay on a single line each — at narrower viewports the per-item
   clamp ranges below shrink the items further before any media query
   kicks in. Specific breakpoints below add extra compression where
   the natural clamp isn't enough to prevent a third row of wraps. */
.header-row-unified .nav-modern a,
.header-row-unified .nav-dropdown-trigger {
    padding: clamp(0.35rem, 0.45vw, 0.6rem) clamp(0.55rem, 0.85vw, 0.85rem);
    font-size: clamp(0.74rem, 0.8vw, 0.9rem);
    transition: all var(--transition-normal);
    gap: 0.28rem;
    white-space: nowrap;
    /* Uppercase the top-nav links across all brands. Source text in
       header_menu.html stays mixed-case so the Italian copy remains readable
       for editors. */
    text-transform: uppercase;
}

/* Highlighted nav items */
.nav-item-highlight {
    background: rgba(255, 255, 255, 0.08) !important;
    font-weight: 700 !important;
}

.nav-item-highlight:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Yellow accent: thin amber border, kept subtle so it reads as a CTA without
   shouting against the glass header background. Pairs with .nav-item-highlight. */
.nav-item-accent-yellow {
    border: 1.5px solid #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25) inset;
}
.nav-item-accent-yellow:hover {
    border-color: #f59e0b !important;
    background: rgba(251, 191, 36, 0.15) !important;
}

/* Compact "soft" pill — used for the Richieste links promoted to the top-right
   actions area. Less visually loud than .nav-cta but still clickable as a button. */
.nav-cta.nav-cta-soft {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-weight: 600 !important;
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
}
.nav-cta.nav-cta-soft:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

/* Responsive adjustments for unified header */
@media (max-width: 1600px) {
    .header-row-unified .nav-modern {
        gap: 0.35rem;
    }
    
    .nav-section {
        gap: 0.1rem;
    }
    
    .nav-separator {
        margin: 0 0.15rem;
    }
}

@media (max-width: 1400px) {
    .header-row-unified {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .header-row-unified .nav-modern {
        gap: 0.2rem;
    }

    .nav-section {
        gap: 0.05rem;
    }

    .nav-separator {
        height: 18px;
        margin: 0 0.1rem;
    }

    /* Shrink the nav items further than the base clamp allows so two
       rows of 5–6 items each can still fit in this viewport without
       wrapping a third time. */
    .header-row-unified .nav-modern a,
    .header-row-unified .nav-dropdown-trigger {
        padding: 0.32rem 0.55rem;
        font-size: 0.76rem;
        gap: 0.22rem;
        letter-spacing: 0;
    }

    .header-row-unified .nav-modern a i,
    .header-row-unified .nav-dropdown-trigger i:not(.dropdown-arrow) {
        font-size: 0.72rem;
    }
}

@media (max-width: 1300px) {
    /* Separator pixels add up across ~10 of them per nav. Drop them in
       this range so the items have the breathing room they need to
       fit on two lines. The .nav-section grouping still provides
       visual grouping via the gap. */
    .header-row-unified .nav-separator {
        display: none;
    }

    .header-row-unified .nav-modern {
        gap: 0.15rem;
    }

    .header-row-unified .nav-modern a,
    .header-row-unified .nav-dropdown-trigger {
        padding: 0.28rem 0.48rem;
        font-size: 0.73rem;
    }
}

@media (max-width: 1200px) {
    .header-row-unified {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header-actions-top {
        gap: 0.4rem;
    }

    .header-subrow {
        gap: 0.5rem;
    }

    .header-subrow .tutorial-btn-header .tutorial-btn-label {
        display: none;
    }

    .header-subrow .phone-badge-modern span {
        display: none;
    }

    .header-subrow .tutorial-btn-header,
    .header-subrow .phone-badge-modern {
        padding: 0.5rem;
        width: 38px;
        height: 38px;
        justify-content: center;
        border-radius: 50%;
    }

    /* Phone/Scrivici/FAQ collapse to icon-only at this size — drop the
       FAQ label too so the right column doesn't push the nav narrower. */
    .header-subrow .phone-badge-modern { padding: 0 !important; }

    .header-row-unified .nav-modern a,
    .header-row-unified .nav-dropdown-trigger {
        padding: 0.25rem 0.4rem;
        font-size: 0.7rem;
        gap: 0.18rem;
    }

    .header-row-unified .nav-modern a i,
    .header-row-unified .nav-dropdown-trigger i:not(.dropdown-arrow) {
        font-size: 0.68rem;
    }
}

@media (max-width: 1100px) {
    /* Hide icons to recover the last bit of width before the
       hamburger takeover at <=992px. */
    .header-row-unified .nav-modern a i,
    .header-row-unified .nav-dropdown-trigger i:not(.dropdown-arrow) {
        display: none;
    }

    .header-row-unified .nav-modern a,
    .header-row-unified .nav-dropdown-trigger {
        padding: 0.22rem 0.35rem;
        font-size: 0.68rem;
    }
}

/* ============================================
   MOBILE HEADER FIX — Phase 1 (mobile audit)
   Cause of every blocker on iPhone-class viewports:
   .header-container-modern was rendering ~490px wide on 390px screens,
   forcing the layout viewport wider than the device. The hamburger,
   email pill, FAB, and even offer-card left edges were all clipped as
   a downstream effect. We let the row shrink, drop the email pill at
   mobile, raise tap targets to 44px, and add a body overflow-x clip
   as a belt-and-braces against future overflowing children.
   ============================================ */
@media (max-width: 768px) {
    .header-container-modern {
        padding: 0.5rem 0.85rem;
        gap: 0.6rem;
        max-width: 100%;
    }
    .header-container-modern > * { min-width: 0; }
    .header-actions-modern { gap: 0.4rem; }

    /* Hide the email pill on mobile — the menu drawer keeps the contact
       options reachable, and the phone pill is the higher-value action. */
    .header-actions-modern a.contact-btn-modern[href^="mailto:"] { display: none; }

    /* 44×44 tap targets (Apple HIG) */
    .contact-btn-modern {
        min-width: 44px;
        min-height: 44px;
        padding: 0.45rem 0.85rem;
        font-size: 0.85rem;
    }
    /* Phone pill shrinks to icon-only on the narrowest viewports */
    .phone-badge-modern .contact-btn-label { display: inline; }
    .hamburger-btn-modern,
    .tutorial-btn-header,
    .tutorial-btn-header.mobile {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
    }
    .logo-modern img { height: 38px; }
}

@media (max-width: 420px) {
    /* Drop the phone-pill text label below 420px — leave the icon. */
    .header-actions-modern .contact-btn-modern .contact-btn-label,
    .header-actions-modern .contact-btn-modern span:not(.fa) { display: none; }
    .contact-btn-modern { padding: 0; justify-content: center; }
}

/* Belt-and-braces: never let stray children expand the layout viewport. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

@media (max-width: 992px) {
    .header-row-unified .nav-modern,
    .header-row-unified .header-actions-top {
        display: none !important;
    }
    
    .header-row-unified {
        padding: 0.75rem 1.5rem;
    }
}

/* ============================================
   MODERN OFFERS SECTION
   ============================================ */

.offers-section-modern {
    padding: 1rem 0;
}

.offers-section-modern .container2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Section Header */
.offers-header-modern {
    text-align: center;
    margin-bottom: 2.5rem;
}

.offers-header-modern h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.offers-header-modern h2 .accent {
    background: var(--gradient-fire);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.offers-header-modern .subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}

.offers-header-modern .ai-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    color: #667eea;
    margin-top: 1rem;
}

.offers-header-modern .ai-subtitle img {
    width: 20px;
    height: 20px;
}

/* Modern Filter Panel */
.filter-panel-modern {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.04),
        0 2px 10px rgba(0, 0, 0, 0.02);
}

.filter-panel-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.filter-panel-header h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-panel-header h4 i {
    color: #667eea;
}

/* Filter Grid */
.filter-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-item label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-item select {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all var(--transition-normal);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.filter-item select:hover {
    border-color: #cbd5e1;
}

.filter-item select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Make Select2 inside .filter-item match the modern native select style */
.filter-item .select2-container {
    width: 100% !important;
}

.filter-item .select2-container--default .select2-selection--single {
    height: 48px !important;
    padding: 0 1rem !important;
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Override center from custom_select2 */
    transition: all var(--transition-normal) !important;
}

.filter-item .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    color: var(--text-dark) !important;
    padding-left: 0 !important;
    line-height: normal !important;
    text-align: left !important; /* Override center from custom_select2 */
    margin: 0 !important;
}

.filter-item .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 1rem !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

.filter-item .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #667eea transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
}

.filter-item .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #667eea transparent !important;
    border-width: 0 4px 5px 4px !important;
}

.filter-item .select2-container--default:hover .select2-selection--single {
    border-color: #cbd5e1 !important;
}

.filter-item .select2-container--default.select2-container--focus .select2-selection--single,
.filter-item .select2-container--default.select2-container--open .select2-selection--single {
    outline: none !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}

/* AI Toggle Modern */
.ai-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: var(--radius-full);
    height: 48px;
}

.ai-toggle-wrapper span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    transition: color var(--transition-normal);
}

.ai-toggle-wrapper span.active {
    color: #667eea;
}

.toggle-switch-modern {
    position: relative;
    width: 52px;
    height: 28px;
}

.toggle-switch-modern input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-modern {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 28px;
    transition: all var(--transition-normal);
}

.toggle-slider-modern::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.toggle-switch-modern input:checked + .toggle-slider-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.toggle-switch-modern input:checked + .toggle-slider-modern::before {
    transform: translateX(24px);
}

/* Checkbox Filters Row */
.filter-checkboxes-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.filter-checkbox-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.filter-checkbox-modern:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.filter-checkbox-modern:has(input:checked) {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: #667eea;
}

.filter-checkbox-modern input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
    cursor: pointer;
}

.filter-checkbox-modern label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

/* AI Toggle styled as special checkbox */
.filter-checkbox-ai {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

.filter-checkbox-ai:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-color: #667eea !important;
}

.filter-checkbox-ai:has(input:checked) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: transparent !important;
}

.filter-checkbox-ai:has(input:checked) span {
    color: white !important;
}

/* Reset Button */
.filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.filter-reset-btn:hover {
    background: rgba(255, 71, 87, 0.05);
    border-color: var(--accent-primary);
}

/* Loading & Notification */
.filter-notification-modern {
    max-width: 500px;
    margin: 0 auto 1.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

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

.filter-notification-modern.loading {
    background: linear-gradient(135deg, rgba(175, 140, 76, 0.1) 0%, rgba(175, 140, 76, 0.05) 100%);
    border: 1px solid rgba(175, 140, 76, 0.3);
    color: #8b6914;
}

.filter-notification-modern.success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #2e7d32;
}

/* Offers Grid */
.offers-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch; /* Equal height cards in each row */
}

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

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

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

/* Modern Offer Card */
.offer-card-modern {
    position: relative;
    background: white !important;
    border-radius: var(--radius-lg);
    overflow: visible; /* Changed from hidden to allow promo tags to show outside */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-normal);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: auto !important; /* Override old fixed height */
    margin-top: 1rem; /* Add space at top for promo tags that extend outside */
}

.offer-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.offer-card-modern .card-image {
    position: relative;
    width: 100%;
    height: 340px; /* Fixed height - images get cropped/resized to fit */
    overflow: visible; /* Allow promo tags to show outside */
    flex-shrink: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Rounded corners on container */
}

.offer-card-modern .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crops/resizes any image to fill container */
    object-position: center; /* Center the crop */
    transition: transform var(--transition-slow);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Rounded corners on the image itself */
}

.offer-card-modern:hover {
    /* Removed scale to prevent overflow with visible container */
    transform: scale(1.05);
}

/* Card Badges */
/* Promo Banner - Positioned at top of card, half outside/half inside */
.offer-card-modern .promo-banner {
    position: absolute;
    top: -1rem; /* Half outside the card */
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    width: 100%;
    background: transparent;
    padding: 0 0.5rem;
    z-index: 7;
}

.offer-card-modern .promo-tag {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    min-width: fit-content;
}

.offer-card-modern .promo-tag i {
    font-size: 0.75rem;
}

/* Different colors for each promo type */
.offer-card-modern .promo-flash {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%);
    animation: pulse-flash 2s ease-in-out infinite;
}

.offer-card-modern .promo-last-minute {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.95) 0%, rgba(239, 68, 68, 0.95) 100%);
}

.offer-card-modern .promo-speciale {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%);
}

.offer-card-modern .promo-sconto {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.95) 0%, rgba(16, 185, 129, 0.95) 100%);
}

/* Multiple tags - let parent gap handle spacing */

/* Pulse animation for flash offers */
@keyframes pulse-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Mobile responsive for promo banner */
@media (max-width: 576px) {
    /* Note: do NOT set `bottom` here. The base rule sets `top: -1rem` on
       .promo-banner; adding `bottom` would stretch the absolutely-positioned
       banner to span the whole card image, and the inner `flex: 1` promo-tag
       (e.g. LAST MINUTE) would expand into a giant solid overlay. */

    .offer-card-modern .promo-tag {
        padding: 0.4rem 0.5rem;
        font-size: 0.55rem;
        gap: 0.25rem;
    }
    
    .offer-card-modern .promo-tag i {
        font-size: 0.65rem;
    }
    
    .offer-card-modern .card-overlay {
        height: 100px; /* Slightly smaller on mobile */
    }

    /* Card-meta pills (Non Disponibile / Non Inclusi / trattamento) shrink so
       two fit on the top row without wrapping awkwardly on phone-width cards. */
    .offer-card-modern .card-meta {
        font-size: 0.7rem;
        gap: 0.35rem;
    }
    .offer-card-modern .card-meta span {
        font-size: 0.68rem;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }
    .offer-card-modern .card-meta i {
        font-size: 0.6rem;
    }
}

.offer-card-modern .card-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    z-index: 6;
}

.offer-card-modern .badge {
    padding: 0.4rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: white;
    white-space: nowrap;
}

/* Category-specific badge colors - all categories from the site */
.offer-card-modern .badge[class*="badge-"]:not(.badge-flash):not(.badge-last-minute):not(.badge-sconto):not(.badge-online) { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* fallback */
}

/* Main categories */
.offer-card-modern .badge-viaggiorganizzatietour { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important; }
.offer-card-modern .badge-crociere { background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%) !important; }
.offer-card-modern .badge-hotel { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important; }
.offer-card-modern .badge-tourescursioni { background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important; }
.offer-card-modern .badge-tourexescursioni { background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important; }

/* Mare variants */
.offer-card-modern .badge-mareitalia { background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%) !important; }
.offer-card-modern .badge-mareeuropa { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; }
.offer-card-modern .badge-maremondo { background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important; }

/* Montagna variants */
.offer-card-modern .badge-montagnaestate { background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important; }
.offer-card-modern .badge-montagnainverno { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important; }

/* Volo/Trasporti */
.offer-card-modern .badge-voli { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important; }
.offer-card-modern .badge-volohotel { background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%) !important; }
.offer-card-modern .badge-pacchettivolohotel { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; }
.offer-card-modern .badge-treni { background: linear-gradient(135deg, #a16207 0%, #92400e 100%) !important; }
.offer-card-modern .badge-viaggiinbus { background: linear-gradient(135deg, #a8a29e 0%, #78716c 100%) !important; }

/* Special occasions */
.offer-card-modern .badge-capodanno { background: linear-gradient(135deg, #fde047 0%, #facc15 100%) !important; color: #333 !important; }
.offer-card-modern .badge-pasqua { background: linear-gradient(135deg, #d946ef 0%, #c026d3 100%) !important; }
.offer-card-modern .badge-halloween { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important; }
.offer-card-modern .badge-viaggidinozze { background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%) !important; }

/* Accommodation */
.offer-card-modern .badge-caseappartamentivlle { background: linear-gradient(135deg, #a3e635 0%, #84cc16 100%) !important; }
.offer-card-modern .badge-caseappartamentiville { background: linear-gradient(135deg, #a3e635 0%, #84cc16 100%) !important; }

.offer-card-modern .badge-flash {
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
}

.offer-card-modern .badge-last-minute {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.offer-card-modern .badge-sconto {
    background: var(--accent-primary);
}

.offer-card-modern .badge-online {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Offer ID Badge - Circular style like locandine */
.offer-card-modern .offer-id {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 4;
}

/* Offer ID border colors based on booking type */
.offer-card-modern .offer-id-online {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 10;
}

.offer-card-modern .offer-id-staff {
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    z-index: 10;
}

/* AI Badge - Pill badge under ID with text */
.offer-card-modern .ai-badge-circle {
    position: absolute;
    top: -2%; /* Below the ID badge */
    right: 50px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.4rem;
    border: 2px solid white;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.4);
    z-index: 5;
    gap: 0.1rem;
}

.offer-card-modern .ai-badge-circle i {
    font-size: 0.65rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

.offer-card-modern .ai-badge-circle span {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* AI Badge - Circular style like ID, positioned below it */
.offer-card-modern .ai-badge-modern {
    position: absolute;
    top: 50px; /* Below the ID badge */
    right: -5px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    font-family: "Poppins", sans-serif;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 2px solid white;
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
    cursor: pointer;
    transition: all var(--transition-normal);
    z-index: 5;
}

.offer-card-modern .ai-badge-modern:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(17, 153, 142, 0.6);
}

.offer-card-modern .ai-badge-modern img {
    width: 16px;
    height: 16px;
    filter: brightness(10); /* Make icon white */
}

.offer-card-modern .ai-badge-modern span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Card Overlay Info - Type, Location, Title */
.offer-card-modern .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    padding: 1rem 0.9rem 0.85rem 0.9rem; /* Extra padding at top to avoid promo tags */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.25) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    z-index: 4;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Rounded corners on the image itself */
}

/* Category badges at top of overlay */
.offer-card-modern .card-overlay-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    margin-top: 0.5rem; /* Push down to avoid promo tags */
}

.offer-card-modern .card-overlay-badges .badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

/* Location - slightly bigger text */
.offer-card-modern .card-location {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: white;
    background: rgba(0, 0, 0, 0.95);
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    max-width: fit-content;
    font-weight: 700;
}

.offer-card-modern .card-location i {
    font-size: 0.85rem;
    color: #fca5a5;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.offer-card-modern .card-location span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Title at bottom - push to end with margin-top auto */
.offer-card-modern .card-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    margin: auto 0 0 0;
    padding: 0.5rem 0.65rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-sm);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    word-break: break-word;
    height: 7.2rem;
}

/* Card Body - Compact with fixed footer */
.offer-card-modern .card-body-modern {
    padding: 0.6rem 0.75rem 0.5rem;
    background: white !important;
    display: flex;
    flex-direction: column;
    flex: 1; /* Take remaining space */
}

.offer-card-modern .card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.5rem;
}

.offer-card-modern .card-meta-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.offer-card-modern .card-meta-left {
    text-align: left;
    flex: 1;
}

.offer-card-modern .card-meta-right {
    text-align: right;
    flex: 1;
}

.offer-card-modern .card-meta-row-bottom {
    text-align: center;
}

.offer-card-modern .card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    cursor: help;
    white-space: nowrap;
    flex-shrink: 0;
    height: fit-content;
}

.offer-card-modern .card-meta span:hover {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.offer-card-modern .card-meta i {
    color: #6366f1;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.offer-card-modern .card-footer-modern {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 2px solid #e2e8f0;
    margin-top: auto;
}

.offer-card-modern .card-price {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.offer-card-modern .price-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.offer-card-modern .price-value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Discount Badge - Discord-like style */
.offer-card-modern .discount-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.1;
    max-width: fit-content;
    margin-top: 0.2rem;
}

.offer-card-modern .discount-badge .badge-label {
    font-size: 0.65rem;
    opacity: 0.9;
    font-weight: 600;
}

.offer-card-modern .discount-badge .badge-value {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 800;
}

.offer-card-modern .discount-badge .badge-value i {
    font-size: 0.8rem;
}

/* Logged in - shows discount percentage (green) or prezzo netto (blue) */
.offer-card-modern .discount-logged-in {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.offer-card-modern .discount-logged-in:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(16, 185, 129, 0.4);
}

/* Logged out - prompts to login (purple/indigo) */
.offer-card-modern .discount-logged-out {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.offer-card-modern .discount-logged-out:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(99, 102, 241, 0.4);
}

.offer-card-modern .prenotabile-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: white;
    padding: 0.3rem 0.45rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.1;
    max-width: fit-content;
    margin-top: 0.2rem;
}

.offer-card-modern .prenotabile-badge .badge-label {
    font-size: 0.55rem;
    opacity: 0.9;
    font-weight: 600;
}

.offer-card-modern .prenotabile-badge .badge-value {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 800;
}

.offer-card-modern .prenotabile-badge .badge-value i {
    font-size: 0.65rem;
}

.offer-card-modern .prenotabile-online {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.offer-card-modern .prenotabile-online:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(16, 185, 129, 0.4);
}

.offer-card-modern .prenotabile-staff {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.offer-card-modern .prenotabile-staff:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(99, 102, 241, 0.4);
}

.offer-card-modern .ai-info-button {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: white;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    padding: 0.3rem 0.45rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(17, 153, 142, 0.3);
    line-height: 1.1;
}

.offer-card-modern .ai-info-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(17, 153, 142, 0.5);
    background: linear-gradient(135deg, #0e8174 0%, #2dd969 100%);
}

.offer-card-modern .ai-info-button:active {
    transform: translateY(0);
}

.offer-card-modern .ai-button-label {
    font-size: 0.55rem;
    opacity: 0.9;
    font-weight: 600;
}

.offer-card-modern .ai-button-value {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 800;
}

.offer-card-modern .ai-button-value i.ai-sparkle-icon {
    font-size: 0.7rem;
    animation: sparkle 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    25% {
        opacity: 0.7;
        transform: scale(1.2) rotate(-15deg);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3) rotate(15deg);
    }
    75% {
        opacity: 0.7;
        transform: scale(1.2) rotate(-15deg);
    }
}

.offer-card-modern .card-operator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
    height: 100%;
}

.offer-card-modern .card-operator-name {
    font-size: 0.8rem;
    color: #475569;
    text-align: right;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* No Results */
.no-results-modern {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #f8fafc;
    border-radius: var(--radius-lg);
}

.no-results-modern i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.no-results-modern p {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

/* Modern Pagination */
.pagination-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.pagination-modern button {
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.pagination-modern button:hover:not(:disabled):not(.active) {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

.pagination-modern button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: white;
}

.pagination-modern button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-modern .ellipsis {
    padding: 0 0.5rem;
    color: #94a3b8;
}

/* Responsive Filter Panel */
@media (max-width: 768px) {
    .filter-panel-modern {
        padding: 1.25rem;
    }
    
    .filter-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .filter-checkboxes-row {
        gap: 0.75rem;
    }
    
    .filter-checkbox-modern {
        padding: 0.4rem 0.75rem;
    }
    
    .offers-header-modern h2 {
        font-size: 1.75rem;
    }
}

/* Loading state */
.offers-grid-modern.loading,
.locandine-grid-modern.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* =====================================================
   MODERN LOCANDINE SECTION
   ===================================================== */

.locandine-grid-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    padding: 1rem 0;
}

/* Modern Locandina Card - Image-centric design */
/* Original size: 294px x 580px with 415px image */
.locandina-card-modern {
    position: relative;
    width: 294px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.locandina-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Locandina Image Container - The main content */
.locandina-card-modern .locandina-image {
    position: relative;
    width: 294px;
    height: 415px;
    overflow: hidden;
}

.locandina-card-modern .locandina-image img {
    width: 294px;
    height: 415px;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--transition-slow);
}

.locandina-card-modern:hover .locandina-image img {
    transform: scale(1.02);
}

/* Locandina ID Badge - Circular like original */
.locandina-card-modern .locandina-id {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 3;
}

/* Green ID for online bookable */
.locandina-card-modern.is-online .locandina-id {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

/* Make image clickable */
.locandina-card-modern .locandina-image-link {
    display: block;
    text-decoration: none;
}

/* Destination overlay at bottom of image */
.locandina-card-modern .locandina-destination {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.locandina-card-modern .locandina-destination i {
    color: #ff6b6b;
    font-size: 0.75rem;
}

/* Locandina Footer - Contact info */
.locandina-card-modern .locandina-footer {
    padding: 1rem;
    background: #f8f9fa;
    border-top: 2px solid #c0392b;
    min-height: 80px;
}

.locandina-card-modern .locandina-footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.locandina-card-modern .locandina-contact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.locandina-card-modern .locandina-contact-label {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.locandina-card-modern .locandina-contact-link {
    font-size: 1rem;
    font-weight: 700;
    color: #c0392b;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.locandina-card-modern .locandina-contact-link:hover {
    color: #e74c3c;
}

.locandina-card-modern .locandina-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.locandina-card-modern .locandina-cta {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3);
    white-space: nowrap;
}

.locandina-card-modern .locandina-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.4);
    text-decoration: none;
    color: white;
}

/* Discount badge in locandine */
.locandina-card-modern .discount-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.1;
    max-width: fit-content;
}

.locandina-card-modern .discount-badge .badge-label {
    font-size: 0.65rem;
    opacity: 0.9;
    font-weight: 600;
}

.locandina-card-modern .discount-badge .badge-value {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 800;
}

.locandina-card-modern .discount-badge .badge-value i {
    font-size: 0.8rem;
}

/* Logged in - shows discount percentage (green) or prezzo netto (blue) */
.locandina-card-modern .discount-logged-in {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.locandina-card-modern .discount-logged-in:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(16, 185, 129, 0.4);
}

/* Logged out - prompts to login (purple/indigo) */
.locandina-card-modern .discount-logged-out {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.locandina-card-modern .discount-logged-out:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(102, 126, 234, 0.4);
}

/* Online booking indicator - green theme */
.locandina-card-modern.is-online .locandina-footer {
    border-top-color: #27ae60;
}

.locandina-card-modern.is-online .locandina-contact-link {
    color: #27ae60;
}

.locandina-card-modern.is-online .locandina-contact-link:hover {
    color: #2ecc71;
}

.locandina-card-modern.is-online .locandina-cta {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}

.locandina-card-modern.is-online .locandina-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    /* Section-level overflow safety (same pattern as offerte) and force the
       grid to viewport width — the audit caught locandine cards rendering
       at left=196 / right=490 (overflowing right) despite the flex grid's
       justify-content:center. Pin parent + center children. */
    #locandine_offerte {
        overflow-x: clip;
    }
    .locandine-grid-modern {
        gap: 1rem;
        max-width: 100%;
        justify-content: center !important;
    }

    /* Keep original size on mobile too */
    .locandina-card-modern {
        width: 294px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .locandina-card-modern .locandina-image {
        width: 294px;
        height: 415px;
    }
    
    .locandina-card-modern .locandina-image img {
        width: 294px;
        height: 415px;
    }
}

/* =====================================================
   MODERN LOGIN MODAL
   ===================================================== */

.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
}

.login-modal-overlay.hidden {
    display: none;
}

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

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.login-modal-container {
    width: 100%;
    max-width: 420px;
    animation: slideUp 0.3s ease-out;
}

.login-modal-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

/* Decorative gradient accent */
.login-modal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff4757 0%, #ff6b81 50%, #ffa502 100%);
}

.login-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    font-size: 1rem;
}

.login-modal-close:hover {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
    transform: rotate(90deg);
}

.login-modal-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.3);
}

.login-modal-icon i {
    font-size: 2rem;
    color: white;
}

.login-modal-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.login-modal-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}

.login-modal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-input-group {
    position: relative;
}

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

.login-input-wrapper > i:first-child {
    position: absolute;
    left: 1rem;
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.login-input {
    width: 100%;
    padding: 1rem 3rem 1rem 3rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    color: #1f2937;
    transition: all 0.2s ease;
    outline: none;
}

.login-input::placeholder {
    color: #9ca3af;
}

.login-input:focus {
    border-color: #ff4757;
    box-shadow: 0 0 0 4px rgba(255, 71, 87, 0.1);
}

.login-input:focus + i:first-child,
.login-input-wrapper:focus-within > i:first-child {
    color: #ff4757;
}

.login-password-toggle {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.login-password-toggle:hover {
    color: #6b7280;
}

/* Mobile audit Phase 2: bump the login close X and password-reveal toggle
   to 44×44 (Apple HIG). They were 36×36 and 24×22 — under the touch-target
   minimum. Login overlay was reported with z:max-int — keep it but ensure
   it doesn't sit above the Cookiebot banner on first paint. */
@media (max-width: 768px) {
    .login-modal-close {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .login-password-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        right: 0.5rem;
    }
    /* Stronger backdrop so the page header doesn't peek through above
       centered modals (BT / Trasporti / CreaIlTuoViaggio). Bootstrap
       default is rgba(0,0,0,0.5); 0.75 reads as proper dim on mobile. */
    .modal-backdrop.show {
        opacity: 0.75 !important;
    }
}

.login-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.login-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4);
}

.login-submit-btn:active {
    transform: translateY(0);
}

.login-submit-btn i {
    transition: transform 0.2s ease;
}

.login-submit-btn:hover i {
    transform: translateX(4px);
}

.login-modal-footer {
    margin-top: 2rem;
    text-align: center;
}

.login-forgot-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-forgot-link:hover {
    color: #ff4757;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: #9ca3af;
    font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.login-register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.login-register-link:hover {
    border-color: #ff4757;
    color: #ff4757;
    background: rgba(255, 71, 87, 0.05);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .login-modal-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
    
    .login-modal-icon {
        width: 60px;
        height: 60px;
    }
    
    .login-modal-icon i {
        font-size: 1.5rem;
    }
    
    .login-modal-title {
        font-size: 1.5rem;
    }
    
    .login-input {
        padding: 0.875rem 2.75rem 0.875rem 2.75rem;
    }
    
    .login-submit-btn {
        padding: 0.875rem 1.25rem;
    }
}

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

/* Override old footer styles */
#footer {
    text-align: left !important;
    vertical-align: initial !important;
    line-height: normal !important;
    height: auto !important;
}

.footer-modern {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 2.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    flex-wrap: wrap;
}

/* Partner Section */
.footer-partner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 180px;
}

.footer-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.footer-partner-link {
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-partner-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.footer-partner-logo {
    max-width: 160px;
    height: auto;
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
}

/* Footer Info */
.footer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 1.1rem;
    color: white;
}

.footer-brand strong {
    font-weight: 700;
}

.footer-link-accent {
    color: #feca57;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-link-accent:hover {
    color: #ff9f43;
    text-decoration: underline;
}

.footer-by {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.footer-details {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-details p {
    margin: 0.25rem 0;
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 1rem 0;
}

.footer-contact-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.footer-contact-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: translateY(-2px);
}

.footer-contact-link i {
    color: #feca57;
    font-size: 0.85rem;
}

.footer-contact-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-contact-text i {
    color: rgba(255, 255, 255, 0.4);
}

.footer-legal {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-legal-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s ease;
}

.footer-legal-link:hover {
    color: #feca57;
}

.footer-legal-link i {
    font-size: 0.8rem;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-modern {
        padding: 2rem 1rem;
    }
    
    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .footer-partner {
        align-items: center;
        text-align: center;
    }
    
    .footer-contacts {
        gap: 0.75rem;
    }
    
    .footer-contact-link {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }
}

/* Mobile Footer Styles */
.footer-modern-mobile {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    /* Extra bottom padding so the two bottom-anchored FABs (Ricerche recenti
       on the left, Traveleia AI on the right) don't sit on top of the
       Privacy Policy link when the user is scrolled to the footer.
       FABs occupy ~52px + 15px gap + safe-area; 100px of padding gives the
       text a clean strip above them. */
    padding: 2rem 1.5rem calc(100px + env(safe-area-inset-bottom));
}

.footer-mobile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.footer-partner-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.footer-label-mobile {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.footer-partner-link-mobile {
    display: block;
}

.footer-partner-logo-mobile {
    max-width: 140px;
    height: auto;
    background: white;
    padding: 6px 10px;
    border-radius: 8px;
}

.footer-divider-mobile {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    border-radius: 2px;
}

.footer-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.footer-brand-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.footer-brand-mobile strong {
    font-weight: 700;
}

.footer-link-accent-mobile {
    color: #feca57;
    text-decoration: none;
    font-weight: 600;
}

.footer-by-mobile {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-top: -0.5rem;
}

.footer-details-mobile {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8rem;
    line-height: 1.7;
}

.footer-details-mobile p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6) !important;
}

.footer-contacts-mobile {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.footer-contact-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.8rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact-btn:hover,
.footer-contact-btn:active {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.footer-contact-btn i {
    font-size: 1.2rem;
    color: #feca57;
}

.footer-contact-btn span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-legal-mobile {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.footer-legal-link-mobile {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-legal-link-mobile i {
    font-size: 0.75rem;
}

/* =====================================================
   MODERN ABOUT / COME FUNZIONA SECTION
   ===================================================== */

.about-section-modern {
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

/* Decorative background pattern */
.about-section-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff4757 0%, #feca57 50%, #2ed573 100%);
}

.about-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Header */
.about-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.about-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(255, 71, 87, 0.05) 100%);
    border: 1px solid rgba(255, 71, 87, 0.2);
    border-radius: 50px;
    color: #ff4757;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.about-badge i {
    font-size: 0.9rem;
}

.about-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.about-subtitle {
    font-size: 1.15rem;
    color: #6b7280;
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Content Card */
.about-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 2rem;
}

.about-card-content {
    padding: 2rem 2.5rem;
}

.about-description {
    font-size: 1rem;
    color: #4b5563 !important;
    line-height: 1.8;
    margin: 0;
    text-align: center;
}

/* Features Grid */
.about-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #f0f0f0;
}

.about-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
    border-right: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.about-feature:last-child {
    border-right: none;
}

.about-feature:hover {
    background: linear-gradient(180deg, rgba(255, 71, 87, 0.03) 0%, transparent 100%);
}

.about-feature-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    border-radius: 12px;
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.about-feature span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
}

/* CTA Button */
.about-cta {
    text-align: center;
}

.about-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(255, 71, 87, 0.3);
    transition: all 0.3s ease;
}

.about-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 71, 87, 0.4);
    color: white;
}

.about-cta-btn i:last-child {
    transition: transform 0.3s ease;
}

.about-cta-btn:hover i:last-child {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
    .about-section-modern {
        padding: 3rem 1.5rem;
    }
    
    .about-title {
        font-size: 1.75rem;
    }
    
    .about-subtitle {
        font-size: 1rem;
    }
    
    .about-card-content {
        padding: 1.5rem;
    }
    
    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-feature {
        border-bottom: 1px solid #f0f0f0;
    }
    
    .about-feature:nth-child(2) {
        border-right: none;
    }
    
    .about-feature:nth-child(3),
    .about-feature:nth-child(4) {
        border-bottom: none;
    }
    
    .about-cta-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .about-features {
        grid-template-columns: 1fr;
    }
    
    .about-feature {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .about-feature:last-child {
        border-bottom: none;
    }
}

/* =====================================================
   MODERN TOUR OPERATORS SECTION
   ===================================================== */

.operators-section-modern {
    padding: 4rem 2rem;
}

.operators-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.operators-header-modern {
    text-align: center;
    margin-bottom: 2.5rem;
}

.operators-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(255, 71, 87, 0.05) 100%);
    border: 1px solid rgba(255, 71, 87, 0.2);
    border-radius: 50px;
    color: #ff4757;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.operators-badge.online {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.operators-badge i {
    font-size: 0.9rem;
}

.operators-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.02em;
}

.operators-subtitle {
    font-size: 1rem;
    color: #991b1b;
    margin: 0;
    font-weight: 600;
}

.operators-subtitle i {
    margin-right: 0.25rem;
}

/* Operators Grid */
.operators-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}

/* Operator Card */
.operator-card-modern {
    width: 220px;
    height: 260px;
    perspective: 1000px;
    position: relative;
}

.operator-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.operator-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.operator-card-modern:hover .operator-card-inner {
    transform: rotateY(180deg);
}

/* Front & Back shared */
.operator-card-front,
.operator-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
}

/* Front */
.operator-card-front {
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.operator-card-modern.is-online .operator-card-front {
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.operator-logo {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    background: #f9fafb;
}

.operator-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.operator-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    text-align: center;
    line-height: 1.3;
}

.operator-hover-hint {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    color: #9ca3af;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
}

.operator-card-modern:hover .operator-hover-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Back */
.operator-card-back {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.operator-card-modern.is-online .operator-card-back {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.operator-back-content {
    text-align: center;
    color: white;
}

.operator-back-content h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.operator-back-content p {
    font-size: 0.8rem;
    margin: 0.25rem 0;
    color: rgba(255, 255, 255, 0.95) !important;
}

.operator-back-content p.more-products {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-style: italic;
    color: rgba(255, 255, 255, 0.7) !important;
}

.loading-products {
    opacity: 0.7;
}

/* Online Badge */
.operator-online-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .operators-section-modern {
        padding: 3rem 1rem;
    }
    
    .operators-title {
        font-size: 1.5rem;
    }
    
    .operators-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .operator-card-modern {
        width: 100%;
        height: 200px;
    }
    
    .operator-logo {
        width: 80px;
        height: 80px;
    }
    
    .operator-name {
        font-size: 0.8rem;
    }
}

/* =====================================================
   MODERN REQUEST/BOOKING FORM
   ===================================================== */

.request-section-modern {
    padding: 4rem 2rem;
}

.request-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Header */
.request-header {
    text-align: center;
    margin-bottom: 2rem;
}

.request-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(255, 71, 87, 0.05) 100%);
    border: 1px solid rgba(255, 71, 87, 0.2);
    border-radius: 50px;
    color: #ff4757;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.request-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
}

.request-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* Card */
.request-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

/* Intro */
.request-intro {
    background: linear-gradient(135deg, #fef3f2 0%, #fff1f0 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-left: 4px solid #ff4757;
}

.request-intro p {
    color: #4b5563 !important;
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.request-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.request-alt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #ff4757;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255, 71, 87, 0.2);
    transition: all 0.3s ease;
}

.request-alt-link:hover {
    background: #ff4757;
    color: white;
}

.request-alt-link.phone {
    background: #ff4757;
    color: white;
    border-color: #ff4757;
}

.request-alt-link.phone:hover {
    background: #ff6b81;
    border-color: #ff6b81;
}

/* Section */
.request-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f0f0f0;
}

.request-section:last-of-type {
    border-bottom: none;
}

.request-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.request-section-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 50%;
}

.request-section-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

/* Option Group */
.request-option-group {
    margin-bottom: 1.5rem;
}

.request-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.request-hint {
    font-size: 0.8rem;
    color: #9ca3af;
    margin: 0 0 0.75rem 0;
}

/* Divider */
.request-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.request-divider::before,
.request-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.request-divider span {
    padding: 0 1rem;
    font-size: 0.8rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Field Row */
.request-field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.request-field-row.thirds {
    grid-template-columns: repeat(3, 1fr);
}

.request-field-group {
    margin-bottom: 1rem;
}

.request-field {
    width: 100%;
}

.request-field.full {
    margin-top: 1rem;
}

/* Input Wrapper */
.request-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.request-input-wrapper i {
    position: absolute;
    left: 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
    z-index: 1;
}

.request-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    font-size: 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    color: #1a1a2e;
    transition: all 0.3s ease;
}

.request-input:focus {
    outline: none;
    border-color: #ff4757;
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

.request-input::placeholder {
    color: #9ca3af;
}

/* Textarea */
.request-textarea {
    width: 100%;
    padding: 1rem;
    font-size: 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    color: #1a1a2e;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.request-textarea:focus {
    outline: none;
    border-color: #ff4757;
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

/* Warning */
.request-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #92400e !important;
}

.request-warning i {
    color: #f59e0b;
    margin-top: 0.1rem;
}

/* Actions */
.request-actions {
    /* display: flex; */
    /* gap: 1rem; */
    margin-top: 2rem;
    /* flex-wrap: wrap; */
    text-align: center;
}

.request-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 71, 87, 0.3);
    transition: all 0.3s ease;
}

.request-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 71, 87, 0.4);
}

.request-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: white;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.request-secondary-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Admin Actions */
.request-admin-actions {
    margin-top: 1rem;
}

.request-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #4b5563;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.request-admin-btn:hover {
    background: #374151;
}

/* Responsive */
@media (max-width: 768px) {
    .request-section-modern {
        padding: 3rem 1rem;
    }
    
    .request-card {
        padding: 1.5rem;
    }
    
    .request-title {
        font-size: 1.5rem;
    }
    
    .request-field-row,
    .request-field-row.thirds {
        grid-template-columns: 1fr;
    }
    
    .request-links {
        flex-direction: column;
    }
    
    .request-actions {
        flex-direction: column;
    }
    
    .request-submit-btn,
    .request-secondary-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   MODERN DESTINATIONS / LOCAZIONI SECTION
   ===================================================== */

.destinations-section-modern {
    padding: 4rem 2rem;
}

.destinations-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.destinations-header-modern {
    text-align: center;
    margin-bottom: 2.5rem;
}

.destinations-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 50px;
    color: #3b82f6;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.destinations-badge i {
    font-size: 0.9rem;
}

.destinations-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.destinations-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* Destinations Grid */
.destinations-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* Destination Card */
.destination-card-modern {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    aspect-ratio: 4/3;
}

.destination-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.destination-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

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

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

.destination-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    transition: background 0.3s ease;
}

.destination-card-modern:hover .destination-card-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
}

.destination-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

.destination-card-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.destination-card-cta {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-10px);
}

.destination-card-modern:hover .destination-card-cta {
    opacity: 1;
    transform: translateX(0);
    background: #ff4757;
}

/* Responsive */
@media (max-width: 768px) {
    .destinations-section-modern {
        padding: 3rem 1rem;
    }
    
    .destinations-title {
        font-size: 1.5rem;
    }
    
    .destinations-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .destination-card-modern {
        aspect-ratio: 1;
    }
    
    .destination-card-name {
        font-size: 1.1rem;
    }
    
    .destination-card-content {
        padding: 1rem;
    }
    
    .destination-card-cta {
        width: 32px;
        height: 32px;
        opacity: 1;
        transform: translateX(0);
    }
}

/* =====================================================
   MODERN GENERIC REQUEST FORM
   ===================================================== */

.generic-request-section-modern {
    padding: 4rem 2rem;
}

.generic-request-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Header */
.generic-request-header {
    text-align: center;
    margin-bottom: 2rem;
}

.generic-request-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 50px;
    color: #10b981;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.generic-request-badge i {
    font-size: 0.9rem;
}

.generic-request-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
}

.generic-request-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* Card */
.generic-request-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

/* Intro */
.generic-request-intro {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-left: 4px solid #10b981;
}

.generic-request-intro p {
    color: #065f46 !important;
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.generic-request-intro a {
    color: #10b981;
    font-weight: 700;
    text-decoration: none;
}

.generic-request-intro a:hover {
    text-decoration: underline;
}

/* Form */
.generic-request-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.generic-request-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.generic-request-row.thirds {
    grid-template-columns: repeat(3, 1fr);
}

.generic-request-field {
    width: 100%;
}

.generic-request-field.full {
    margin-top: 0.5rem;
}

.generic-request-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* Input Wrapper */
.generic-request-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.generic-request-input-wrapper i {
    position: absolute;
    left: 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
    z-index: 1;
}

.generic-request-input,
.generic-request-select {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    font-size: 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    color: #1a1a2e;
    transition: all 0.3s ease;
}

.generic-request-input:focus,
.generic-request-select:focus {
    outline: none;
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.generic-request-input::placeholder {
    color: #9ca3af;
}

.generic-request-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5rem;
    padding-right: 2.5rem;
}

/* Textarea */
.generic-request-textarea {
    width: 100%;
    padding: 1rem;
    font-size: 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    color: #1a1a2e;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.generic-request-textarea:focus {
    outline: none;
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.generic-request-textarea::placeholder {
    color: #9ca3af;
}

/* Actions */
.generic-request-actions {
    margin-top: 1rem;
    text-align: center;
}

.generic-request-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.generic-request-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .generic-request-section-modern {
        padding: 3rem 1rem;
    }
    
    .generic-request-card {
        padding: 1.5rem;
    }
    
    .generic-request-title {
        font-size: 1.4rem;
    }
    
    .generic-request-row,
    .generic-request-row.thirds {
        grid-template-columns: 1fr;
    }
    
    .generic-request-intro p {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .generic-request-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   MODERN MODALS
   ===================================================== */

/* Override Bootstrap modal backdrop */
.modal-modern + .modal-backdrop {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
}

/* Modern Modal Container - Larger sizes with more breathing room */
.modal-modern .modal-dialog {
    width: 680px;
    max-width: calc(100vw - 2rem);
}

/* Support modal-lg/modal-xl on either .modal or .modal-dialog */
.modal-modern.modal-lg .modal-dialog,
.modal-modern .modal-dialog.modal-lg {
    width: 900px;
    max-width: calc(100vw - 2rem);
}

.modal-modern.modal-xl .modal-dialog,
.modal-modern .modal-dialog.modal-xl {
    width: 1100px;
    max-width: calc(100vw - 2rem);
}

/* Ensure modal-dialog-centered works properly */
.modal-modern .modal-dialog.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .modal-modern .modal-dialog.modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
}

/* Modal Content */
.modal-modern .modal-content {
    width: 100%;
    border: none;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    background: white;
    display: flex;
    flex-direction: column;
}

/* Modal Header */
.modal-modern .modal-header-modern {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.modal-modern .modal-header-modern.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.modal-modern .modal-header-modern.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.modal-modern .modal-header-modern.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.modal-modern .modal-header-modern.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.modal-modern .modal-header-modern.modern-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
}

.modal-modern .modal-title-modern {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}

.modal-modern .modal-title-modern i {
    font-size: 1.5rem;
}

.modal-modern .modal-subtitle {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 0.25rem;
    font-weight: 400;
}

.modal-modern .modal-close-modern {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: inherit;
}

.modal-modern .modal-header-modern:not(.primary):not(.success):not(.warning):not(.danger):not(.modern-info) .modal-close-modern {
    color: #ffffff;
}

.modal-modern .modal-close-modern:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

/* Modal Body */
.modal-modern .modal-body-modern {
    padding: 2rem 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* When the body is scrollable (overflow-y: auto on the inline style),
   `justify-content: center` is a flex/scroll gotcha: if the children
   overflow vertically, centering offsets them upward into negative
   scroll space — so the top portion is unreachable. Anchor children
   to flex-start in that case so the natural top is always the scroll
   origin. Affects #richiestaPreventivoModal and #richiestaGenericaModal
   which set overflow-y: auto inline. */
.modal-modern .modal-body-modern[style*="overflow-y: auto"],
.modal-modern .modal-body-modern[style*="overflow-y:auto"] {
    justify-content: flex-start;
}

/* Info Box */
.modal-info-box {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.modal-info-box.success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #6ee7b7;
}

.modal-info-box.warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fcd34d;
}

.modal-info-box.danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fca5a5;
}

.modal-info-box-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1e40af;
}

.modal-info-box.success .modal-info-box-title {
    color: #047857;
}

.modal-info-box.warning .modal-info-box-title {
    color: #b45309;
}

.modal-info-box.danger .modal-info-box-title {
    color: #dc2626;
}

.modal-info-box p {
    color: #374151 !important;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Discount Badge */
.modal-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* Code Display */
.modal-code-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.modal-code-value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: #10b981;
    font-family: 'Courier New', monospace;
}

.modal-code-copy-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-code-copy-btn:hover {
    background: #059669;
    transform: scale(1.05);
}

.modal-code-copied {
    color: #10b981;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Action Buttons */
.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.modal-actions.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.modal-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    color: white;
}

.modal-btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.modal-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: white;
}

.modal-btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.modal-btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
    color: white;
}

.modal-btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.modal-btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    color: white;
}

.modal-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.modal-btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    color: white;
}

.modal-btn-outline {
    background: transparent;
    border: 2px solid #e5e7eb;
    color: #374151;
}

.modal-btn-outline:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #1f2937;
}

.modal-btn-outline-primary {
    background: transparent;
    border: 2px solid #3b82f6;
    color: #3b82f6;
}

.modal-btn-outline-primary:hover {
    background: #eff6ff;
    color: #2563eb;
}

/* Modal Footer */
.modal-modern .modal-footer-modern {
    padding: 1.75rem 2.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    background: #f9fafb;
}

/* Contact Links in Modal */
.modal-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.modal-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-contact-link:hover {
    background: #e5e7eb;
    color: #1f2937;
}

.modal-contact-link.phone {
    background: #10b981;
    color: white;
}

.modal-contact-link.phone:hover {
    background: #059669;
    color: white;
}

/* AI Section in Modal */
.modal-ai-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e3f2fd;
}

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

.modal-ai-header img {
    width: 28px;
    height: 28px;
}

.modal-ai-header span {
    font-weight: 600;
    color: #1976d2;
    font-size: 0.95rem;
}

/* Offer Details in Modal */
.modal-offer-details {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.modal-offer-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.modal-offer-detail {
    font-size: 0.9rem;
}

.modal-offer-detail strong {
    color: #374151;
}

.modal-offer-detail span {
    color: #6b7280;
}

/* Carousel in Modal */
.modal-carousel {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.modal-carousel img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* Chat Section */
.modal-chat-section {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

.modal-chat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.modal-chat-messages {
    min-height: 150px;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.modal-chat-input-group {
    display: flex;
    gap: 0.5rem;
}

.modal-chat-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
}

.modal-chat-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-chat-send {
    padding: 0.75rem 1.25rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.modal-chat-send:hover {
    background: #2563eb;
}

/* Selection List */
.modal-selection-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.modal-selection-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-selection-item:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.modal-selection-item.selected {
    background: #eff6ff;
    border-color: #3b82f6;
}

.modal-selection-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

/* Responsive Modals */
@media (max-width: 768px) {
    .modal-modern .modal-dialog {
        width: calc(100% - 1.5rem);
        max-width: none;
        margin: 0.75rem auto;
    }
    
    .modal-modern .modal-header-modern {
        padding: 1.5rem 1.75rem;
    }
    
    .modal-modern .modal-body-modern {
        padding: 1.75rem 1.5rem;
    }
    
    .modal-modern .modal-footer-modern {
        padding: 1.25rem 1.5rem;
    }
    
    .modal-modern .modal-title-modern {
        font-size: 1.15rem;
    }
    
    .modal-actions.horizontal {
        flex-direction: column;
    }
    
    .modal-offer-details-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-code-display {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-contact-links {
        flex-direction: column;
    }
}

/* =====================================================
   FAST DISAPPEARING TOOLTIP
   ===================================================== */

/* Fast disappearing tooltip - Modern design */
.fast-tooltip {
    position: relative;
}

.fast-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.98) 0%, rgba(118, 75, 162, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 30ms ease-out;
    z-index: 10000;
    box-shadow: 
        0 10px 30px rgba(102, 126, 234, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fast-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: rgba(102, 126, 234, 0.98);
    pointer-events: none;
    opacity: 0;
    transition: opacity 30ms ease-out;
    z-index: 10001;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.fast-tooltip:hover::before,
.fast-tooltip:hover::after {
    opacity: 1;
}

.fast-tooltip:not(:hover)::before,
.fast-tooltip:not(:hover)::after {
    opacity: 0;
    transition-delay: 0ms;
}

/* =====================================================
   AI FILTER FIRST TIME TOOLTIP
   ===================================================== */

.ai-filter-first-time-tooltip {
    position: absolute;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    /* Desktop: Position to the right of toggle */
    top: -5px;
    left: calc(50% + 140px);
}

.ai-filter-first-time-tooltip.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.ai-filter-tooltip-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 
        0 20px 60px rgba(102, 126, 234, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.2);
    max-width: 320px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ai-filter-tooltip-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.ai-filter-tooltip-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.ai-filter-tooltip-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    text-align: center;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.3);
    }
}

.ai-filter-tooltip-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: white;
}

.ai-filter-tooltip-text strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.ai-filter-tooltip-text p {
    margin: 0;
    opacity: 0.95;
    color: white;
}

.ai-filter-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
}

.ai-filter-first-time-tooltip.tooltip-right .ai-filter-tooltip-arrow {
    left: -22px;
    top: 20%;
    transform: translateY(-50%);
    border-right-color: #667eea;
}

.ai-filter-first-time-tooltip.tooltip-left .ai-filter-tooltip-arrow {
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #667eea;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ai-filter-first-time-tooltip {
        /* Mobile: Position below */
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%) scale(0.9);
    }
    
    .ai-filter-first-time-tooltip.show {
        transform: translateX(-50%) scale(1);
    }
    
    .ai-filter-tooltip-content {
        max-width: 280px;
        padding: 1.25rem;
    }
    
    .ai-filter-tooltip-text {
        font-size: 0.9rem;
    }
    
    .ai-filter-tooltip-text strong {
        font-size: 1rem;
    }
    
    .ai-filter-tooltip-icon {
        font-size: 1.75rem;
    }
}

/* =====================================================
   AI VIEW TOGGLE - CENTERED SWITCH (FILTER STYLE)
   ===================================================== */

.ai-view-toggle-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin: 0 1rem;
    max-width: fit-content;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s ease;
    color: #131a2f;
}

.ai-view-toggle-centered:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

.ai-view-toggle-centered .ai-view-label {
    font-size: 0.875rem;
    font-weight: 500;
    /* color: rgba(255, 255, 255, 0.9); */
    white-space: nowrap;
    transition: all 0.3s ease;
}

.ai-view-toggle-centered .ai-view-label.view-all-label {
    opacity: 1;
}

.ai-view-toggle-centered .ai-view-label.view-ai-label {
    opacity: 0.5;
    display: flex;
    align-items: center;
}

/* When toggle is checked, highlight AI label */
.ai-view-toggle-centered:has(#aiFilterToggle:checked) .view-ai-label {
    opacity: 1;
}

.ai-view-toggle-centered:has(#aiFilterToggle:checked) .view-all-label {
    opacity: 0.5;
}

/* Toggle Switch */
.ai-view-toggle-centered .ai-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    cursor: pointer;
    flex-shrink: 0;
}

.ai-view-toggle-centered .ai-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ai-view-toggle-centered .ai-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e2e8f0;
    border: 2px solid #cbd5e1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 26px;
}

.ai-view-toggle-centered .ai-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid #cbd5e1;
}

.ai-view-toggle-centered .ai-toggle-switch input:checked + .ai-toggle-slider {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(102, 126, 234, 0.8);
}

.ai-view-toggle-centered .ai-toggle-switch input:checked + .ai-toggle-slider:before {
    transform: translateX(22px);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
}

.ai-view-toggle-centered .ai-toggle-switch input:focus + .ai-toggle-slider {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
}

/* Hover effect */
.ai-view-toggle-centered .ai-toggle-switch:hover .ai-toggle-slider {
    background: #cbd5e1;
    border-color: #94a3b8;
}

.ai-view-toggle-centered .ai-toggle-switch:hover input:checked + .ai-toggle-slider {
    background: linear-gradient(135deg, #7c8df8 0%, #8b5fb8 100%);
    border-color: rgba(102, 126, 234, 0.8);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .ai-view-toggle-centered {
        gap: 0.6rem;
        padding: 0.65rem 1rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }
    
    .ai-view-toggle-centered .ai-view-label {
        font-size: 0.8rem;
    }
    
    .ai-view-toggle-centered .ai-toggle-switch {
        width: 44px;
        height: 24px;
    }
    
    .ai-view-toggle-centered .ai-toggle-slider:before {
        height: 18px;
        width: 18px;
    }
    
    .ai-view-toggle-centered .ai-toggle-switch input:checked + .ai-toggle-slider:before {
        transform: translateX(20px);
    }
}

/* ============================================
   Business Travel Modal
   ============================================ */

/* Feature grid — 2-column card layout */
.bt-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.bt-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bt-feature-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.bt-feature-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.bt-feature-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.bt-feature-desc {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}

/* Demo pills inside modal-info-box */
.bt-demo-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
}

.bt-demo-pill i {
    color: #2563eb;
    font-size: 0.7rem;
}

/* Form section */
.bt-form-section {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.25rem 1.5rem 1.5rem;
}

.bt-form-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bt-form-heading i {
    color: #3b82f6;
}

.bt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.bt-form-group {
    display: flex;
    flex-direction: column;
}

.bt-form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
    letter-spacing: 0.01em;
}

.bt-form-input {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    color: #111827;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bt-form-input::placeholder {
    color: #9ca3af;
}

.bt-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Feedback messages */
.bt-form-feedback {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.bt-form-feedback-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

.bt-form-feedback-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #047857;
}

@media (max-width: 576px) {
    .bt-feature-grid {
        grid-template-columns: 1fr;
    }
    .bt-form-row {
        grid-template-columns: 1fr;
    }
}