/* 
 * BestTravelHacks.net - Main Stylesheet
 * Professional travel affiliate website styles
 */

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

body {
    font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ==========================================================================
   Interactive Elements
   ========================================================================== */

.cta-button {
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

.section-spacing {
    padding: 5rem 0;
}

.card-hover {
    transition: all 0.3s ease;
}

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

/* ==========================================================================
   Typography & Visual Effects
   ========================================================================== */

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

input[type="email"]:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
}

/* ==========================================================================
   FAQ Accordion Styles
   ========================================================================== */

details[open] summary {
    border-bottom: 1px solid #e5e7eb;
}

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

details summary {
    list-style: none;
}

/* ==========================================================================
   Cookie Banner
   ========================================================================== */

#cookie-banner {
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Comparison Table
   ========================================================================== */

.comparison-table {
    border-collapse: collapse;
    width: 100%;
}

.comparison-table th,
.comparison-table td {
    border: 1px solid #e5e7eb;
}

.comparison-table tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

/* ==========================================================================
   Trust Elements
   ========================================================================== */

.trust-badge {
    transition: all 0.2s ease;
}

.trust-badge:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.backdrop-blur {
    backdrop-filter: blur(10px);
}

.border-gradient {
    border-image: linear-gradient(45deg, #f97316, #ef4444) 1;
}

/* ==========================================================================
   Loading & Performance
   ========================================================================== */

.preload-fade {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

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

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .no-print {
        display: none !important;
    }
    
    .hero-bg {
        background-image: none !important;
        background-color: #1f2937 !important;
    }
}