/**
 * Boat Trader V3 - Modern Frontend Styles
 * MOBILE FIRST DESIGN
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */
:root {
    --bt-primary: #0066cc;
    --bt-primary-dark: #0052a3;
    --bt-primary-light: #e6f0fa;
    --bt-secondary: #00a86b;
    --bt-danger: #dc3545;
    --bt-warning: #ffc107;
    --bt-success: #28a745;
    --bt-gray-50: #f8f9fa;
    --bt-gray-100: #f8f9fa;
    --bt-gray-200: #e9ecef;
    --bt-gray-300: #dee2e6;
    --bt-gray-400: #ced4da;
    --bt-gray-500: #adb5bd;
    --bt-gray-600: #6c757d;
    --bt-gray-700: #495057;
    --bt-gray-800: #343a40;
    --bt-gray-900: #212529;
    --bt-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --bt-shadow: 0 4px 6px rgba(0,0,0,0.07);
    --bt-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
    --bt-radius: 8px;
    --bt-radius-lg: 12px;
    --bt-transition: all 0.2s ease;
    
    /* Touch targets */
    --bt-touch-min: 44px;
}

/* ==========================================================================
   RESET & BASE - MOBILE FIRST
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   HEADER - MOBILE FIRST
   ========================================================================== */

/* Mobile menu toggle */

/* Search Bar - Mobile */

/* Navigation - Hidden on mobile by default */

/* Mobile Navigation Drawer */

/* Mobile nav overlay */

/* ==========================================================================
   FILTERS SECTION - MOBILE FIRST
   ========================================================================== */

/* Mobile filter toggle */

/* Filter panel - hidden on mobile */

/* ==========================================================================
   BUTTONS - TOUCH FRIENDLY
   ========================================================================== */

/* ==========================================================================
   MAIN CONTENT - MOBILE FIRST
   ========================================================================== */

/* ==========================================================================
   BOAT GRID - MOBILE FIRST
   ========================================================================== */

/* ==========================================================================
   BOAT CARD - MOBILE FIRST
   ========================================================================== */

/* ==========================================================================
   BOAT DETAIL PAGE - MOBILE FIRST
   ========================================================================== */

/* ==========================================================================
   MAP SECTION
   ========================================================================== */

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

/* ==========================================================================
   EMPTY STATE & LOADING
   ========================================================================== */

@keyframes bt-spin {
    to { transform: rotate(360deg); }
}

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

/* ==========================================================================
   BOTTOM NAVIGATION (Mobile)
   ========================================================================== */

/* Hide bottom nav on desktop */

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

/* ==========================================================================
   PWA / SAFARI FIXES
   ========================================================================== */

/* Prevent pull-to-refresh */
body {
    overscroll-behavior-y: contain;
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}