/* ============================================
   MOBILE OPTIMIZATIONS & RESPONSIVE FIXES
   Added: 2025-12-26
   ============================================ */

/* Display Utility Classes */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
    
    .d-md-flex {
        display: flex !important;
    }
}

/* Mobile-Specific Fixes */
@media (max-width: 767px) {
    /* Hero Section - Reduce Height on Mobile */
    .hero-section {
        min-height: 400px;
        padding: var(--spacing-2xl) 0;
    }
    
    .hero-content h1 {
        font-size: var(--font-size-3xl);
    }
    
    .hero-content p {
        font-size: var(--font-size-base);
    }
    
    /* Statistics Section - Reduce Vertical Space */
    .stats-section {
        padding: var(--spacing-xl) 0;
    }
    
    .stat-card {
        padding: var(--spacing-md);
    }
    
    /* Touch Targets - Minimum 44x44px */
    .footer-links a,
    .breadcrumb a,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* Footer - Mobile Redesign */
    .site-footer {
        padding: 30px 15px 40px !important;
        text-align: left;
        margin-top: 40px !important;
    }
    
    .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 20px !important;
    }
    
    /* Footer Brand - Full Width Top */
    .footer-brand-section {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        padding-bottom: 25px !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    
    .footer-tagline {
        margin: 12px auto 0 !important;
        font-size: 0.9rem !important;
        color: rgba(255,255,255,0.6);
        line-height: 1.5;
    }
    
    /* Footer Columns (Links & Legal) */
    .footer-column {
        text-align: left !important;
    }
    
    .footer-heading {
        font-size: 0.75rem !important;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: rgba(255,255,255,0.4) !important;
        margin-bottom: 16px !important;
        font-weight: 800;
    }

    /* Link Lists - Compact */
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .footer-links li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Override global min-height for footer links */
    .footer-links a {
        min-height: auto !important;
        min-width: auto !important;
        padding: 2px 0 !important;
        display: inline-block;
        font-size: 0.9rem !important;
        color: rgba(255,255,255,0.85) !important;
        font-weight: 500;
        transition: color 0.2s;
    }
    
    .footer-links a:active {
        color: white !important;
    }
    
    /* Contact Section - Full Width Bottom */
    .footer-column:nth-last-child(1) {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        margin-top: 10px;
        padding-top: 25px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    
    .footer-column:nth-last-child(1) .footer-links {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 20px;
    }
    
    .footer-column:nth-last-child(1) .footer-heading {
        display: none; /* Hide 'KONTAKT' heading to save space */
    }
    
    /* Hide Trust Indicators on Mobile */
    .footer-trust {
        display: none !important;
    }
    
    .footer-bottom-links {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 15px;
        opacity: 0.6;
    }
    
    .footer-bottom-links .separator {
        display: none;
    }
    
    /* Breadcrumbs - Better Mobile Layout */
    .breadcrumb {
        font-size: var(--font-size-sm);
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .breadcrumb-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Account Dashboard - Mobile Card Layout */
@media (max-width: 767px) {
    /* Dashboard Header - Fix Button Overlap - CRITICAL */
    .dashboard-header,
    div.d-flex.justify-between.align-center.mb-xl.dashboard-header,
    .dashboard-header.d-flex.justify-between.align-center {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    .dashboard-header h1,
    .dashboard-header .h1 {
        margin-bottom: 0 !important;
        font-size: 1.75rem !important;
        width: 100% !important;
    }
    
    .dashboard-header .btn,
    .dashboard-header a.btn {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: center !important;
    }
    
    /* Hide Sidebar on Mobile */
    aside.d-none.d-md-block {
        display: none !important;
    }
    
    /* Table - Make Horizontally Scrollable on Mobile */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .listings-table {
        min-width: 800px; /* Force horizontal scroll */
    }
    
    .listings-table th,
    .listings-table td {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
    
    .listings-table th {
        font-size: 0.7rem !important;
    }
    
    /* Listing Title - Smaller on Mobile */
    .listing-title-link {
        font-size: 0.9rem !important;
    }
    
    /* Price Tag - Smaller */
    .price-tag {
        font-size: 0.85rem !important;
        padding: 6px 12px !important;
    }
    
    /* Action Buttons - Smaller Grid */
    .action-btn-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    
    .action-btn {
        font-size: 0.7rem !important;
        padding: 0 8px !important;
        height: 32px !important;
    }
    
    .action-btn i {
        font-size: 0.7rem !important;
    }
    
    /* Status Pills - Smaller */
    .status-pill {
        font-size: 0.65rem !important;
        padding: 6px 12px !important;
    }
    
    /* Sort/Filter Section - Stack Vertically */
    .filter-card .card-body > div {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
    }
    
    .filter-card .d-flex.align-center.gap-md {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100%;
    }
    
    .filter-card select {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Usage Limit - Add Spacing */
    .usage-limit-wrapper {
        margin-top: var(--spacing-lg);
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--color-border);
    }
    
    .usage-limit-text {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Progress Bar - Full Width on Mobile */
    .progress-container {
        max-width: 100% !important;
    }
    
    /* Info Alert - Better Mobile Padding */
    .info-alert {
        padding: var(--spacing-md) var(--spacing-lg) !important;
        border-radius: var(--radius-md) !important;
    }
    
    /* Sidebar Card - If Shown */
    .sidebar-card {
        border-radius: var(--radius-md) !important;
    }
}

/* Desktop - Hide Mobile Cards */
@media (min-width: 768px) {
    .listings-mobile-cards {
        display: none;
    }
    
    .listings-table {
        display: table;
    }
}

/* Ad Creation/Edit Form - Mobile Optimizations */
@media (max-width: 767px) {
    /* Stack Form Fields Vertically */
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .form-row .form-group {
        width: 100% !important;
        flex: none !important;
    }
    
    /* Price and Condition Fields - Stack on Mobile */
    .price-condition-row {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .price-condition-row .form-group {
        width: 100%;
    }
    
    /* Form Buttons - Better Spacing */
    .form-actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        margin-top: var(--spacing-xl);
    }
    
    .form-actions .btn {
        width: 100%;
        min-height: 48px;
    }
    
    /* Prevent Accidental Taps - Increase Gap */
    .form-actions .btn + .btn {
        margin-top: var(--spacing-sm);
    }
}

/* Messages & Chat - Mobile Optimizations */
@media (max-width: 767px) {
    /* Message Cards - Full Width */
    .message-thread-card {
        width: 100% !important;
        margin: 0 0 var(--spacing-md) 0;
    }
    
    .message-list {
        padding: 0;
    }
    
    /* Fix Listing Thumbnails */
    .message-listing-thumbnail {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: var(--radius-sm);
    }
    
    .message-listing-thumbnail.broken {
        background: var(--color-bg-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-muted);
    }
    
    /* Listing Title - Less Truncation */
    .message-listing-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
        font-size: var(--font-size-sm);
    }
    
    /* Chat Header - Fix Cramped Layout */
    .chat-header {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        align-items: flex-start !important;
    }
    
    .chat-back-button {
        min-width: 44px;
        min-height: 44px;
        margin-bottom: var(--spacing-xs);
    }
    
    .chat-header-title {
        font-size: var(--font-size-base);
        line-height: 1.4;
    }
}

/* Ad Detail Page - Mobile Fixes */
@media (max-width: 767px) {
    /* Fix Title/Price Overlap */
    .ad-detail-header {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .ad-detail-title {
        font-size: var(--font-size-2xl);
        line-height: 1.3;
        margin-bottom: 0;
    }
    
    .ad-detail-price {
        font-size: var(--font-size-3xl);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        margin: 0;
    }
    
    /* Action Buttons - Better Stacking */
    .ad-detail-actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        margin-top: var(--spacing-lg);
    }
    
    .ad-detail-actions .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* Category Chips/Filters - Mobile Layout */
@media (max-width: 767px) {
    .category-filters {
        display: flex;
        overflow-x: auto;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    .category-filters::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    
    .category-chip {
        flex-shrink: 0;
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background: var(--color-surface);
        font-size: var(--font-size-sm);
        white-space: nowrap;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    .category-chip.active {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
    }
}

/* Subscription Page - Typography Fixes */
@media (max-width: 767px) {
    .subscription-feature {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .subscription-feature i {
        margin-right: var(--spacing-xs);
    }
    
    /* Ensure proper spacing in text */
    .subscription-feature-text {
        word-spacing: normal;
        letter-spacing: normal;
    }
}

/* Listing Cards - Mobile Padding Fix */
@media (max-width: 767px) {
    .listing-card {
        margin-bottom: var(--spacing-lg);
    }
    
    .listing-card-body {
        padding: var(--spacing-md);
    }
    
    .listing-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* Width Utilities */
.w-full {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

/* Margin/Padding Utilities */
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }

.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.ml-md { margin-left: var(--spacing-md) !important; }

.gap-2 { gap: 0.5rem !important; }

/* Flexbox Utilities */
.d-flex {
    display: flex !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-center {
    justify-content: center !important;
}

.align-center {
    align-items: center !important;
}

.flex-column {
    flex-direction: column !important;
}

/* Input Group */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-left: none;
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

/* Background Utilities */
.bg-light {
    background-color: var(--color-bg-subtle) !important;
}

/* Additional Mobile Improvements */
@media (max-width: 480px) {
    /* Extra small screens */
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    h1, .h1 {
        font-size: var(--font-size-2xl);
    }
    
    h2, .h2 {
        font-size: var(--font-size-xl);
    }
    
    .btn {
        font-size: var(--font-size-sm);
        padding: 0.625rem 1.25rem;
    }
}

/* Mobile Account Menu Grid */
.mobile-account-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}
@media (min-width: 480px) {
    .mobile-account-menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Dashboard Grid Mobile Fix */
@media (max-width: 767px) {
    .dashboard-grid {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .dashboard-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Profile Mobile Fixes */
@media (max-width: 767px) {
    /* Stack phone number and badges */
    .phone-item-card .d-flex.align-center.gap-sm.mb-xs {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    /* Stack Action Buttons Vertically on the Right */
    .phone-item-card > .d-flex.justify-between.align-center > .d-flex.gap-sm:last-child {
        flex-direction: column !important;
        gap: 8px !important;
        margin-left: 12px !important;
        width: auto !important;
    }
    
    /* Ensure top alignment so buttons start at top right */
    .phone-item-card > .d-flex.justify-between.align-center {
        align-items: flex-start !important;
    }
}

/* Chat View Mobile Fixes */
@media (max-width: 767px) {
    .chat-card {
        height: 75vh !important;
        min-height: 400px !important;
        width: 100% !important;
        border-radius: 16px !important;
    }
    
    .chat-header {
        padding: 10px 14px !important;
    }
    
    .chat-body {
        padding: 10px !important;
    }
    
    /* Compact Bubble Layout - Time Inline */
    .msg-bubble {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        column-gap: 8px !important;
        
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        max-width: 85% !important;
        margin-bottom: 6px !important;
        
        /* Ensure content doesn't overflow horizontally inside bubble */
        box-sizing: border-box !important;
    }
    
    .msg-body {
        max-width: 100%;
        word-break: break-word;
    }
    
    .msg-time {
        display: inline-block !important;
        margin-top: 0 !important;
        margin-left: auto !important; /* Always push time to far right */
        font-size: 0.65rem !important;
        line-height: 1 !important;
        opacity: 0.7 !important;
        padding-bottom: 2px; /* Align visually with text baseline */
    }
    
    /* Input Field - Smaller Font */
    input[name="body"], 
    .chat-footer input {
        font-size: 14px !important; /* Prevent zoom on iOS & safer for mobile */
    }
}

/* Wallet Mobile Fixes */
@media (max-width: 767px) {
    .wallet-content-grid {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: column-reverse !important;
        gap: 24px !important;
        padding-bottom: 20px !important;
    }
    
    /* Ensure child items take full width */
    .wallet-content-grid > div,
    .wallet-content-grid > aside {
        width: 100% !important;
        position: static !important; /* Disable sticky on mobile */
    }
    
    /* Enhance Balance Card appearance on mobile */
    .balance-card {
        border-radius: 20px !important;
        margin-bottom: 0 !important;
    }
}

/* Category Page Optimization */

/* Desktop Layout (ensure 2 columns) */
@media (min-width: 768px) {
    .category-layout-grid {
        grid-template-columns: 280px 1fr !important;
    }
    .category-sidebar {
        position: sticky !important;
        top: 100px !important;
    }
}

/* Mobile Layout */
@media (max-width: 767px) {
    .category-layout-grid {
        display: block !important;
        gap: 0 !important;
    }
    
    /* 2-Column Grid for Listings */
    .listing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* List view overrides - single column on mobile */
    .listing-grid.list-view {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
    }
    
    .listing-grid.list-view .listing-card {
        flex-direction: column !important;
        min-height: auto !important;
    }
    
    .listing-grid.list-view .listing-card .image-wrapper {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/10 !important;
    }
    
    /* Compact Listing Card Mobile Styles */
    .listing-card .listing-card-body {
        padding: 8px 10px !important;
        gap: 4px !important;
    }
    
    .listing-card .listing-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
    }
    
    .listing-card .listing-meta {
        font-size: 0.7rem !important;
        gap: 4px !important;
    }
    
    .listing-card .listing-price {
        font-size: 1rem !important;
        margin-top: 4px !important;
        font-weight: 800 !important;
    }
    
    .listing-card .image-wrapper {
        aspect-ratio: 4/3 !important; /* Taller image to show more content */
    }
    
    /* Mobile Sidebar (Bottom Sheet) */
    .category-sidebar {
        display: none !important; /* Hidden logic handled by JS class toggle override? No, display:none by default */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9999 !important;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        padding-top: 0 !important; /* Reset sticky top */
    }
    
    .category-sidebar.active {
        display: block !important;
        opacity: 1;
    }
    
    /* The internal container becomes the sheet */
    .category-sidebar .sidebar-content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 85vh !important;
        background: white !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 24px !important;
        overflow-y: auto !important;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        box-shadow: 0 -10px 30px rgba(0,0,0,0.15) !important;
    }
    
    .category-sidebar.active .sidebar-content {
        transform: translateY(0) !important;
    }
}

/* Listing Detail Optimization */
@media (min-width: 768px) {
    .listing-detail-grid {
        grid-template-columns: 1fr 400px !important;
    }
}

@media (max-width: 767px) {
    .listing-detail-grid {
        display: block !important;
    }
    
    /* Ensure thumbnails are scrollable without overflowing content */
    .overflow-auto {
        scrollbar-width: none; /* Hide scrollbar for cleaner look */
    }
    .overflow-auto::-webkit-scrollbar {
        display: none;
    }
    
    /* Subcategory Horizontal Scroll */
    .subcategory-scroll-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        margin-right: -15px; /* Bleed to right edge */
        padding-right: 15px;
        scrollbar-width: none;
    }
    .subcategory-scroll-container::-webkit-scrollbar {
        display: none;
    }
    .subcategory-scroll-container .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    
    /* Hero Stats Vertical Stack */
    .hero-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
    .hero-stat-item {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
}