/**
 * Mobile-First Responsive Enhancements
 * B2B Telemarketer Classifieds Plugin
 * Includes comprehensive mobile, tablet, and responsive design improvements
 */

/* ============================================
   GLOBAL MOBILE CONFIGURATION
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   VIEWPORT-BASED FONT SIZING
   ============================================ */

@media (max-width: 1024px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}

/* ============================================
   GRID & CARD LAYOUT IMPROVEMENTS (480px)
   ============================================ */

@media (max-width: 480px) {
    .b2b-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 10px 0 !important;
        padding: 0 10px !important;
    }
    
    .b2b-card {
        padding: 12px !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    }
    
    .b2b-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    
    .b2b-card-header {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .b2b-card-header h4 {
        font-size: 1rem !important;
        min-width: auto !important;\n    }\n    \n    .b2b-type-badge, \n    .b2b-fraud-badge, \n    .b2b-user-badge {\n        font-size: 0.65em !important;\n        padding: 3px 6px !important;\n        flex-shrink: 0;\n    }\n    \n    .b2b-meta-item {\n        flex-wrap: wrap !important;\n        gap: 8px !important;\n    }\n    \n    .b2b-meta-label {\n        min-width: 70px !important;\n        font-size: 0.8em !important;\n    }\n    \n    .b2b-meta-value {\n        font-size: 0.85em !important;\n    }\n    \n    .b2b-card-footer {\n        flex-direction: column !important;\n        gap: 8px !important;\n        align-items: stretch !important;\n    }\n    \n    .b2b-view-btn {\n        padding: 10px 12px !important;\n        font-size: 0.85em !important;\n        width: 100% !important;\n        text-align: center !important;\n        min-height: 40px !important;\n    }\n}\n\n/* ============================================\n   FORM IMPROVEMENTS (768px)\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-form-group {\n        margin-bottom: 1.25rem !important;\n    }\n    \n    .b2b-form-group label {\n        font-size: 0.95rem !important;\n        margin-bottom: 8px !important;\n        font-weight: 600 !important;\n    }\n    \n    .b2b-form-group input,\n    .b2b-form-group select,\n    .b2b-form-group textarea {\n        font-size: 16px !important; /* Prevent iOS zoom */\n        padding: 12px 14px !important;\n        border-radius: 6px !important;\n        width: 100% !important;\n        border: 1px solid #e1e8ed !important;\n    }\n    \n    .b2b-form-group input:focus,\n    .b2b-form-group select:focus,\n    .b2b-form-group textarea:focus {\n        outline: none !important;\n        border-color: #50d4c4 !important;\n        box-shadow: 0 0 0 3px rgba(80, 212, 196, 0.1) !important;\n    }\n    \n    .b2b-form-group textarea {\n        min-height: 100px !important;\n        resize: vertical !important;\n    }\n    \n    .b2b-form-row {\n        grid-template-columns: 1fr !important;\n        gap: 15px !important;\n    }\n}\n\n/* ============================================\n   BUTTON & TOUCH TARGET IMPROVEMENTS\n   ============================================ */\n\n@media (max-width: 768px) {\n    button,\n    .b2b-btn,\n    .b2b-view-btn,\n    .b2b-auth-btn,\n    .b2b-feature-btn,\n    .b2b-vote-btn,\n    .b2b-submit-comment,\n    .b2b-delete-comment {\n        min-height: 48px !important;\n        min-width: 48px !important;\n        padding: 14px 18px !important;\n        font-size: 16px !important;\n        cursor: pointer !important;\n        touch-action: manipulation !important;\n    }\n    \n    .b2b-btn-group,\n    .b2b-form-actions {\n        display: flex !important;\n        flex-direction: column !important;\n        gap: 10px !important;\n    }\n    \n    .b2b-btn-group button {\n        width: 100% !important;\n    }\n}\n\n/* ============================================\n   VOTING SYSTEM MOBILE\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-voting-section {\n        padding: 16px !important;\n        margin: 15px 0 !important;\n        border-radius: 8px !important;\n    }\n    \n    .b2b-voting-buttons {\n        display: flex !important;\n        flex-direction: column !important;\n        gap: 10px !important;\n        margin: 15px 0 !important;\n    }\n    \n    .b2b-vote-btn {\n        width: 100% !important;\n        min-width: auto !important;\n        padding: 14px 12px !important;\n        font-size: 15px !important;\n        font-weight: 600 !important;\n        min-height: 48px !important;\n    }\n    \n    .b2b-vote-stats {\n        display: grid !important;\n        grid-template-columns: 1fr !important;\n        gap: 12px !important;\n        margin: 20px 0 !important;\n    }\n    \n    .b2b-vote-stat {\n        padding: 12px !important;\n        text-align: center !important;\n        background: white !important;\n        border-radius: 6px !important;\n    }\n    \n    .b2b-vote-notice {\n        padding: 12px !important;\n        font-size: 0.9rem !important;\n    }\n}\n\n/* ============================================\n   COMMENTS & MESSAGING MOBILE\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-comments-section {\n        padding: 16px !important;\n        margin: 15px 0 !important;\n        border-radius: 8px !important;\n    }\n    \n    .b2b-comment-form {\n        margin-bottom: 20px !important;\n    }\n    \n    .b2b-comment-textarea {\n        min-height: 100px !important;\n        font-size: 16px !important;\n        padding: 12px !important;\n        width: 100% !important;\n    }\n    \n    .b2b-submit-comment {\n        width: 100% !important;\n        padding: 14px !important;\n        min-height: 48px !important;\n        font-size: 16px !important;\n    }\n    \n    .b2b-comment-item {\n        padding: 12px !important;\n        border-radius: 6px !important;\n        margin-bottom: 12px !important;\n    }\n    \n    .b2b-comment-header {\n        display: flex !important;\n        flex-direction: column !important;\n        gap: 4px !important;\n        margin-bottom: 8px !important;\n    }\n    \n    .b2b-comment-author {\n        font-weight: 600 !important;\n        font-size: 0.95rem !important;\n    }\n    \n    .b2b-comment-content {\n        font-size: 0.9rem !important;\n        line-height: 1.5 !important;\n    }\n    \n    .b2b-delete-comment {\n        padding: 8px 12px !important;\n        width: 100% !important;\n        font-size: 14px !important;\n    }\n}\n\n/* ============================================\n   FRAUD REPORTS MOBILE\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-fraud-list {\n        grid-template-columns: 1fr !important;\n        gap: 12px !important;\n    }\n    \n    .b2b-fraud-card {\n        padding: 12px !important;\n        border-radius: 8px !important;\n    }\n    \n    .b2b-single-fraud-report {\n        padding: 12px !important;\n        max-width: 100% !important;\n    }\n    \n    .b2b-report-header {\n        padding: 16px !important;\n        border-radius: 8px !important;\n    }\n    \n    .b2b-report-header h1 {\n        font-size: 1.4rem !important;\n        margin-bottom: 8px !important;\n    }\n    \n    .b2b-report-meta {\n        flex-direction: column !important;\n        gap: 8px !important;\n        font-size: 0.85rem !important;\n    }\n    \n    .b2b-stats-bar {\n        grid-template-columns: repeat(2, 1fr) !important;\n        gap: 10px !important;\n        margin-bottom: 20px !important;\n    }\n    \n    .b2b-report-grid {\n        grid-template-columns: 1fr !important;\n        gap: 12px !important;\n    }\n    \n    .b2b-report-section {\n        padding: 14px !important;\n    }\n    \n    .b2b-detail-item,\n    .b2b-contact-item-detailed {\n        grid-template-columns: 1fr !important;\n        gap: 5px !important;\n    }\n    \n    .b2b-gallery-grid {\n        grid-template-columns: repeat(2, 1fr) !important;\n        gap: 8px !important;\n    }\n    \n    .b2b-gallery-image {\n        height: 100px !important;\n    }\n    \n    .b2b-document-item {\n        flex-direction: column !important;\n        text-align: center !important;\n        gap: 8px !important;\n        padding: 12px !important;\n    }\n}\n\n/* ============================================\n   PROFILE & USER CARDS MOBILE\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-user-profile {\n        padding: 15px !important;\n        border-radius: 8px !important;\n    }\n    \n    .b2b-profile-header {\n        display: flex !important;\n        flex-direction: column !important;\n        gap: 10px !important;\n        margin-bottom: 20px !important;\n    }\n    \n    .b2b-profile-header h3 {\n        font-size: 1.2rem !important;\n        margin: 0 !important;\n    }\n    \n    .b2b-profile-field {\n        flex-direction: column !important;\n        gap: 5px !important;\n        padding: 8px 0 !important;\n    }\n    \n    .b2b-profile-field strong {\n        min-width: auto !important;\n        font-weight: 600 !important;\n    }\n    \n    .b2b-stats-grid {\n        grid-template-columns: 1fr !important;\n        gap: 12px !important;\n    }\n    \n    .b2b-stat-item {\n        padding: 15px !important;\n    }\n}\n\n/* ============================================\n   NAVIGATION & FILTERS MOBILE\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-filters {\n        display: flex !important;\n        flex-direction: column !important;\n        gap: 10px !important;\n        margin: 15px 0 !important;\n    }\n    \n    .b2b-search-field,\n    .b2b-filter-field {\n        width: 100% !important;\n        min-width: auto !important;\n        padding: 12px !important;\n        font-size: 16px !important;\n    }\n    \n    .b2b-hamburger-dropdown {\n        width: 90vw !important;\n        right: 5vw !important;\n    }\n}\n\n/* ============================================\n   TABLES & DATA MOBILE\n   ============================================ */\n\n@media (max-width: 768px) {\n    .widefat {\n        font-size: 13px !important;\n    }\n    \n    .widefat th,\n    .widefat td {\n        padding: 8px 6px !important;\n    }\n    \n    .table-responsive {\n        overflow-x: auto !important;\n        -webkit-overflow-scrolling: touch !important;\n    }\n}\n\n/* ============================================\n   RESPONSIVE TYPOGRAPHY\n   ============================================ */\n\n@media (max-width: 768px) {\n    h1 { font-size: 1.6rem !important; }\n    h2 { font-size: 1.4rem !important; }\n    h3 { font-size: 1.2rem !important; }\n    h4 { font-size: 1rem !important; }\n    h5 { font-size: 0.95rem !important; }\n    p { line-height: 1.6 !important; }\n}\n\n@media (max-width: 480px) {\n    h1 { font-size: 1.4rem !important; }\n    h2 { font-size: 1.2rem !important; }\n    h3 { font-size: 1rem !important; }\n    h4 { font-size: 0.95rem !important; }\n}\n\n/* ============================================\n   SPACING & PADDING ADJUSTMENTS\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-posting-form-container {\n        padding: 1rem !important;\n        max-width: 100% !important;\n        margin: 5px !important;\n    }\n    \n    .b2b-form-section {\n        padding: 1rem !important;\n        margin-bottom: 1.5rem !important;\n    }\n    \n    .wrap {\n        padding: 12px !important;\n    }\n    \n    .b2b-modal {\n        width: 95vw !important;\n        max-width: 95vw !important;\n    }\n}\n\n/* ============================================\n   ACCESSIBILITY & TOUCH OPTIMIZATION\n   ============================================ */\n\n/* Ensure focus states are visible */\ninput:focus,\nbutton:focus,\nselect:focus,\ntextarea:focus,\na:focus {\n    outline: 2px solid #50d4c4 !important;\n    outline-offset: 2px !important;\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n    * {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n\n/* ============================================\n   FEATURED LISTINGS MOBILE\n   ============================================ */\n\n@media (max-width: 768px) {\n    .b2b-feature-listing-section {\n        padding: 16px !important;\n        margin: 15px 0 !important;\n    }\n    \n    .b2b-feature-packages {\n        grid-template-columns: 1fr !important;\n        gap: 12px !important;\n    }\n    \n    .b2b-feature-package {\n        padding: 14px !important;\n    }\n    \n    .b2b-feature-btn {\n        width: 100% !important;\n        padding: 14px 12px !important;\n        font-size: 15px !important;\n        min-height: 48px !important;\n    }\n}\n