/* Custom styles for UrbanMarketHub */

/* General styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

/* ============================================
   COMPREHENSIVE MOBILE APP BUTTON FIXES
   Ensures NO buttons are cut off on ANY mobile device
   ============================================ */
@media (max-width: 991px) {
    /* Universal button fixes for ALL buttons */
    .btn, button, a.btn, input[type="button"], input[type="submit"] {
        min-height: 44px !important; /* iOS/Android minimum touch target */
        min-width: 44px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* Button variants */
    .btn-primary, .btn-warning, .btn-success, .btn-info, .btn-danger, .btn-secondary, .btn-dark, .btn-light {
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Small buttons */
    .btn-sm {
        min-height: 38px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Large buttons */
    .btn-lg {
        min-height: 50px !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 1rem !important;
    }
    
    /* Product card buttons - critical fix */
    .card .btn, .product-content-wrapper .btn, .view-details-mobile .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Search buttons */
    .search-input-group .btn, .search-section .btn, .navbar .btn {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* Form buttons */
    form .btn, .form-group .btn, .input-group .btn {
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
    }
    
    /* Bottom navigation items */
    .bottom-nav-item, .seller-bottom-nav-item {
        min-height: 44px !important;
        padding: 0.5rem 0.25rem !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px) / 2) !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    /* Ensure buttons in flex containers don't overflow */
    .d-flex .btn, .flex-container .btn, .row .btn {
        flex-shrink: 0 !important;
        max-width: 100% !important;
    }
    
    /* Card body and containers - prevent overflow */
    .card-body, .product-content-wrapper, .card-footer {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Container padding to prevent content from being hidden */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .container, .container-fluid {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Very small screens (iPhone SE, small Android) */
    @media (max-width: 375px) {
        .btn, button, a.btn {
            font-size: 0.8rem !important;
            padding: 0.5rem 0.625rem !important;
            min-height: 44px !important;
        }
        
        .view-details-mobile .btn, .card .btn {
            font-size: 0.75rem !important;
            padding: 0.5rem 0.625rem !important;
        }
        
        .search-input-group .btn {
            font-size: 0.75rem !important;
            padding: 0.625rem 0.875rem !important;
        }
    }
    
    /* iPhone X and newer (with notches) */
    @media (max-width: 414px) and (min-width: 375px) {
        .btn, button, a.btn {
            min-height: 44px !important;
            padding: 0.5rem 0.75rem !important;
        }
    }
    
    /* Larger Android phones */
    @media (max-width: 480px) and (min-width: 415px) {
        .btn, button, a.btn {
            min-height: 44px !important;
            padding: 0.625rem 0.875rem !important;
        }
    }
    
    /* Prevent any element from causing horizontal overflow */
    * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    /* Ensure buttons never overflow their containers */
    .btn, button, a.btn {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
}

/* Navbar customization */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* Card customization */
.card {
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Dark black border for product cards */
.card.h-100 {
    border: 2px solid #000000 !important;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

/* Product grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

/* Chat system */
.chat-container {
    height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
}

.message {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.message-sent {
    background-color: #007bff;
    color: white;
    margin-left: 20%;
}

.message-received {
    background-color: #e9ecef;
    margin-right: 20%;
}

/* Profile page */
.profile-header {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

/* Product details */
.product-images {
    position: relative;
    overflow: hidden;
}

.product-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
}

.product-thumbnail.active {
    border-color: #007bff;
}

/* Custom buttons */
.btn-outline-primary {
    border-width: 2px;
}

/* Footer customization */
footer {
    margin-top: auto;
}

footer a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-img-top {
        height: 150px;
    }
    
    .profile-avatar {
        width: 100px;
        height: 100px;
    }
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/ormoc-city.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    margin-bottom: 2rem;
}

/* Alert Messages */
.alert {
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

/* Loading Spinner */
.spinner-border {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Product Details */
.product-details {
    background: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.product-image-gallery img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: transform 0.2s;
}

.product-image-gallery img:hover {
    transform: scale(1.05);
}