/**
 * Padel Exchange - Comprehensive Mobile Optimizations
 * Mobile-first responsive design for all plugin components
 */

/* ============================================
   GLOBAL MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure all plugin containers are mobile-friendly */
    .vendor-dashboard,
    .messages-page-container,
    .product-listing-container,
    .product-filters-container,
    .account-registration-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* Responsive typography */
    body.padel-exchange-mobile h1 {
        font-size: 24px !important;
    }

    body.padel-exchange-mobile h2 {
        font-size: 20px !important;
    }

    body.padel-exchange-mobile h3 {
        font-size: 18px !important;
    }

    body.padel-exchange-mobile p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Touch-friendly buttons */
    .vendor-dashboard button,
    .vendor-dashboard .button,
    .vendor-dashboard a.button,
    .messages-page-container button,
    .product-listing-container button,
    .account-registration-container button {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }

    /* Touch-friendly inputs */
    .vendor-dashboard input,
    .vendor-dashboard textarea,
    .vendor-dashboard select,
    .messages-page-container input,
    .messages-page-container textarea,
    .account-registration-container input,
    .account-registration-container textarea {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 12px !important;
    }
}

/* ============================================
   VENDOR DASHBOARD MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Stack sidebar and content vertically */
    .vendor-dashboard {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .dashboard-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 2px solid #e2e8f0 !important;
    }

    .vendor-profile {
        padding: 20px !important;
    }

    .vendor-avatar {
        width: 60px !important;
        height: 60px !important;
    }

    .vendor-info h3 {
        font-size: 18px !important;
    }

    .vendor-info p {
        font-size: 13px !important;
    }

    /* Horizontal scrolling navigation */
    .dashboard-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 16px !important;
        gap: 8px !important;
    }

    .dashboard-nav li {
        flex-shrink: 0 !important;
    }

    .dashboard-nav button {
        white-space: nowrap !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-width: auto !important;
    }

    .dashboard-nav svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Main content area */
    .dashboard-content {
        padding: 16px !important;
    }

    .dashboard-header {
        padding: 20px 16px !important;
        margin: 0 -16px 20px !important;
    }

    .dashboard-header h1 {
        font-size: 24px !important;
    }

    /* Balance cards grid */
    .balance-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .balance-card {
        padding: 20px !important;
    }

    /* Product grid */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Product cards */
    .product-card {
        padding: 12px !important;
    }

    .product-image {
        height: 150px !important;
    }

    .product-title {
        font-size: 14px !important;
    }

    .product-price {
        font-size: 16px !important;
    }

    /* Tables */
    .transactions-card-full {
        padding: 16px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    .transactions-card-full h3 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -16px !important;
        padding: 0 16px !important;
    }

    .transactions-table {
        min-width: 850px !important;
    }

    .transactions-table th {
        padding: 12px 6px !important;
        font-size: 9px !important;
    }

    .transactions-table td {
        padding: 12px 6px !important;
        font-size: 12px !important;
    }

    /* Withdrawal form */
    .withdrawal-form {
        padding: 20px !important;
    }

    .form-group {
        margin-bottom: 16px !important;
    }

    .form-group label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .form-group input {
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Settings */
    .settings-container {
        gap: 16px !important;
    }

    .settings-card {
        padding: 20px !important;
    }

    .settings-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .btn-settings {
        width: 100% !important;
    }
}

/* ============================================
   MESSAGES PAGE MOBILE
   ============================================ */

@media (max-width: 768px) {
    .messages-page-container {
        height: calc(100vh - 100px) !important;
        max-height: none !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Sidebar takes full width when visible */
    .messages-sidebar {
        width: 100% !important;
        height: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    .messages-sidebar-header {
        padding: 16px !important;
    }

    .messages-sidebar-header h2 {
        font-size: 20px !important;
    }

    .messages-chat-list {
        padding: 8px !important;
    }

    .messages-chat-item {
        padding: 12px !important;
        margin-bottom: 6px !important;
    }

    .messages-chat-avatar {
        width: 45px !important;
        height: 45px !important;
    }

    .messages-chat-name {
        font-size: 14px !important;
    }

    .messages-chat-preview {
        font-size: 12px !important;
    }

    .messages-chat-product {
        font-size: 11px !important;
    }

    /* Conversation view - absolute positioned on mobile */
    .messages-conversation {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 10 !important;
    }

    .messages-page-container.mobile-conversation-active .messages-conversation {
        transform: translateX(0) !important;
    }

    .messages-conversation-header {
        padding: 16px !important;
    }

    .messages-conversation-header-name {
        font-size: 16px !important;
    }

    .messages-conversation-header-product {
        font-size: 12px !important;
    }

    .messages-mobile-back-btn {
        display: flex !important;
    }

    /* Product card in conversation */
    .messages-product-card {
        flex-direction: column !important;
        padding: 12px !important;
        margin-bottom: 16px !important;
    }

    .messages-product-card-image {
        width: 100% !important;
        height: 150px !important;
    }

    .messages-product-card-info {
        text-align: center !important;
        align-items: center !important;
    }

    .messages-product-card-title {
        font-size: 15px !important;
    }

    /* Message bubbles */
    .messages-message-bubble {
        max-width: 85% !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* Input area */
    .messages-input-container {
        padding: 12px !important;
    }

    .messages-input-field {
        font-size: 16px !important;
        padding: 10px 14px !important;
    }

    .messages-send-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================
   CUSTOM MODALS MOBILE
   ============================================ */

@media (max-width: 768px) {
    .pe-modal-overlay {
        padding: 20px !important;
        align-items: flex-end !important;
    }

    .pe-modal {
        max-width: 100% !important;
        width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 16px 16px 0 0 !important;
        margin-bottom: 0 !important;
    }

    .pe-modal-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 16px !important;
    }

    .pe-modal-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .pe-modal-title {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .pe-modal-message {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    .pe-modal-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .pe-modal-btn {
        width: 100% !important;
        min-width: auto !important;
    }
}

/* ============================================
   PRODUCT LISTING MOBILE
   ============================================ */

@media (max-width: 768px) {
    .product-listing-container {
        padding: 16px !important;
    }

    .product-listing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .product-listing-card {
        border-radius: 8px !important;
    }

    .product-listing-image {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    .product-listing-image img {
        height: 100% !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    .product-listing-info {
        padding: 12px !important;
    }

    .product-listing-title {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .product-listing-price {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .product-listing-seller {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .product-listing-btn {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }

    .product-favorite-btn {
        width: 28px !important;
        height: 28px !important;
        top: 8px !important;
        right: 8px !important;
    }

    .product-favorite-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Single column on very small screens */
@media (max-width: 480px) {
    .product-listing-grid {
        grid-template-columns: 1fr !important;
    }

    .product-listing-image {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }

    .product-listing-image img {
        min-height: 250px !important;
        max-height: 250px !important;
    }

    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   PRODUCT FILTERS MOBILE
   ============================================ */

@media (max-width: 768px) {
    .product-filters-container {
        padding: 16px !important;
        margin-bottom: 20px !important;
    }

    .filters-header {
        padding-bottom: 12px !important;
        margin-bottom: 16px !important;
    }

    .filters-header h3 {
        font-size: 18px !important;
    }

    .filters-reset-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    .filter-group {
        margin-bottom: 16px !important;
    }

    .filter-title {
        font-size: 15px !important;
        padding: 8px 0 !important;
    }

    .filter-checkbox-wrapper {
        padding: 8px 8px !important;
    }

    .filter-checkbox-label {
        font-size: 13px !important;
    }

    .filter-options {
        max-height: 300px !important;
        overflow-y: auto !important;
    }
}

/* ============================================
   ACCOUNT REGISTRATION MOBILE
   ============================================ */

@media (max-width: 768px) {
    .account-registration-container {
        padding: 20px !important;
        max-width: 100% !important;
    }

    .registration-card {
        padding: 24px 20px !important;
        margin: 20px 0 !important;
    }

    .registration-header h1 {
        font-size: 24px !important;
    }

    .registration-header p {
        font-size: 14px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-group label {
        font-size: 14px !important;
    }

    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px !important;
        padding: 12px !important;
    }

    .btn-primary {
        font-size: 16px !important;
        padding: 14px !important;
    }

    .password-strength-meter {
        margin-top: 8px !important;
    }
}

/* ============================================
   PRODUCT SINGLE PAGE MOBILE
   ============================================ */

@media (max-width: 768px) {
    .product-single-container {
        padding: 16px !important;
    }

    .product-single-gallery {
        margin-bottom: 20px !important;
    }

    .product-single-info {
        padding: 20px !important;
    }

    .product-title {
        font-size: 22px !important;
    }

    .product-price {
        font-size: 28px !important;
    }

    .product-meta {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .seller-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }

    .seller-avatar {
        margin: 0 auto 12px !important;
    }

    .product-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .product-actions button {
        width: 100% !important;
    }
}

/* ============================================
   CART NOTIFICATION MOBILE
   ============================================ */

@media (max-width: 768px) {
    .cart-notification {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        width: auto !important;
        max-width: none !important;
        padding: 16px !important;
    }

    .cart-notification-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    .cart-notification-image {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 12px !important;
    }

    .cart-notification-title {
        font-size: 14px !important;
    }

    .cart-notification-buttons {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .cart-notification-buttons button {
        width: 100% !important;
    }
}

/* ============================================
   HOMEPAGE SLIDER MOBILE
   ============================================ */

@media (max-width: 768px) {
    .homepage-slider-container {
        height: 400px !important;
    }

    .slider-content {
        padding: 20px !important;
    }

    .slider-title {
        font-size: 28px !important;
    }

    .slider-subtitle {
        font-size: 16px !important;
    }

    .slider-button {
        padding: 12px 24px !important;
        font-size: 15px !important;
    }

    .slider-nav button {
        width: 40px !important;
        height: 40px !important;
    }

    .slider-dots {
        bottom: 15px !important;
    }

    .slider-dot {
        width: 8px !important;
        height: 8px !important;
    }
}

/* ============================================
   SEARCH BOX MOBILE
   ============================================ */

@media (max-width: 768px) {
    .product-search-container {
        padding: 16px !important;
    }

    .search-wrapper {
        max-width: 100% !important;
    }

    .search-input {
        font-size: 16px !important;
        padding: 12px 40px 12px 44px !important;
    }

    .search-icon {
        left: 14px !important;
    }

    .clear-search {
        right: 14px !important;
    }

    .search-dropdown {
        max-height: 400px !important;
    }

    .search-result-item {
        padding: 12px !important;
    }

    .search-result-image {
        width: 50px !important;
        height: 50px !important;
    }

    .search-result-title {
        font-size: 14px !important;
    }

    .search-result-price {
        font-size: 15px !important;
    }
}

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

@media (max-width: 768px) {
    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }

    /* Full width on mobile */
    .mobile-full-width {
        width: 100% !important;
    }

    /* Remove padding on mobile */
    .mobile-no-padding {
        padding: 0 !important;
    }

    /* Remove margin on mobile */
    .mobile-no-margin {
        margin: 0 !important;
    }

    /* Stack on mobile */
    .mobile-stack {
        flex-direction: column !important;
    }

    /* Center on mobile */
    .mobile-center {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .messages-page-container {
        height: calc(100vh - 50px) !important;
    }

    .messages-sidebar {
        height: 100% !important;
    }

    .vendor-dashboard {
        min-height: 100vh !important;
    }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
   ============================================ */

@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    * {
        -webkit-overflow-scrolling: touch !important;
    }
}