/**
 * Boat Trader Frontend Styles
 * Nautical themed marketplace - MOBILE FIRST DESIGN
 * 
 * Mobile-first approach: base styles are for mobile, 
 * media queries add styles for larger screens
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

/* ==========================================================================
   BASE STYLES - MOBILE FIRST (default styles for smallest screens)
   ========================================================================== */

/* Prevenzione layout breaking per immagini grandi */

/* ==========================================================================
   TOUCH-FRIENDLY BUTTONS - Mobile First
   ========================================================================== */
.boat-trader-btn,
.boat-trader-btn-primary,
.boat-trader-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.boat-trader-btn-primary,
.boat-trader-btn {
    background: var(--ocean-600);
    color: white;
    box-shadow: var(--shadow-ocean);
}

.boat-trader-btn-primary:hover,
.boat-trader-btn:hover {
    background: var(--ocean-700);
    transform: scale(1.02);
}

.boat-trader-btn-primary:active,
.boat-trader-btn:active {
    transform: scale(0.98);
}

.boat-trader-btn-secondary {
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

/* Full width buttons on mobile */
.boat-trader-btn,
.boat-trader-btn-primary,
.boat-trader-btn-secondary {
    width: 100%;
    margin-bottom: var(--space-sm);
}

/* ==========================================================================
   FILTERS SECTION - Mobile First
   ========================================================================== */
.boat-trader-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    background: white;
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.boat-trader-search-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    min-height: var(--touch-target-min);
    -webkit-appearance: none;
    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='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.boat-trader-search-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--ocean-500);
}

.boat-trader-search-input::placeholder {
    color: var(--gray-400);
}

/* Filter toggle button for mobile */

/* Filter panel - hidden by default on mobile */

.boat-trader-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.boat-trader-filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
}

/* Active filters */

/* ==========================================================================
   RESULTS GRID - Mobile First
   ========================================================================== */

.boat-trader-results-count {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.boat-trader-sort-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    background: white;
    min-height: var(--touch-target-min);
    -webkit-appearance: none;
    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='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ==========================================================================
   BOAT CARD - Mobile First
   ========================================================================== */

/* Badge overlay on image */

/* ==========================================================================
   LOADING STATE
   ========================================================================== */
.boat-trader-loading {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--gray-500);
    font-size: 1rem;
}

.boat-trader-loading::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--ocean-500);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-md);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Skeleton loading */

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================================================
   NO RESULTS
   ========================================================================== */
.boat-trader-no-results {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--gray-500);
    font-size: 1rem;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   AUTH FORMS - Mobile First
   ========================================================================== */

.boat-trader-form-group {
    margin-bottom: var(--space-md);
}

.boat-trader-form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
}

.boat-trader-form-group input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    min-height: var(--touch-target-min);
}

.boat-trader-form-group input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--ocean-500);
}

/* ==========================================================================
   ERROR & SUCCESS MESSAGES
   ========================================================================== */

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

/* ==========================================================================
   MOBILE DRAWER / MODAL FOR FILTERS
   ========================================================================== */

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

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

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

/* ==========================================================================
   MEDIA QUERIES - TABLET (768px and up)
   ========================================================================== */
@media (min-width: 768px) {

    /* Filters become horizontal */
    .boat-trader-filters {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .boat-trader-search-input {
        flex: 1;
        min-width: 200px;
    }

    .boat-trader-btn,
    .boat-trader-btn-primary,
    .boat-trader-btn-secondary {
        width: auto;
        margin-bottom: 0;
    }

    /* Grid becomes 2 columns on tablet */

    /* Results header */

    .boat-trader-sort-select {
        width: auto;
    }

    /* Auth form */
}

/* ==========================================================================
   MEDIA QUERIES - DESKTOP (1024px and up)
   ========================================================================== */
@media (min-width: 1024px) {

    /* Grid becomes 3 columns on desktop */

    /* Auth form stays centered but wider */
}

/* ==========================================================================
   MEDIA QUERIES - LARGE DESKTOP (1280px and up)
   ========================================================================== */

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

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

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

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