/* ===== MOBILE FIXES - Text Truncation and Layout Issues ===== */

/* Fix text truncation in product cards */
@media (max-width: 767.98px) {
  /* Product Card Title - Prevent text cutoff */
  .product-card .card-title,
  .product-card h6 {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    min-height: 2.6rem !important;
    max-height: 3.9rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    color: #212529 !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Product Description - Prevent text cutoff */
  .product-desc,
  .card-text {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    max-height: 3rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    color: #6c757d !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Price Section - Ensure proper spacing */
  .price-section {
    margin-bottom: 0.75rem !important;
    min-height: auto !important;
  }
  
  .price-section .h6,
  .price-section .text-success {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .price-section .small {
    font-size: 0.75rem !important;
  }
  
  /* Product Card Body - Proper padding */
  .product-card .card-body {
    padding: 0.75rem !important;
    background-color: white !important;
  }
  
  /* Product Image - Proper sizing */
  .product-image {
    height: 180px !important;
    object-fit: cover !important;
    width: 100% !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
  }
  
  /* Buttons - Proper sizing and text */
  .product-card .btn {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 0.5rem !important;
  }
  
  /* Grid spacing */
  .col-6 {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
  }
  
  /* Card spacing */
  .product-card {
    margin-bottom: 0.75rem !important;
  }
  
  /* Fix mobile search bar positioning - ALWAYS STUCK */
  .mobile-search-bar {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1040 !important;
    background-color: white !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 0.75rem 1rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Allow hide functionality - search bar hides on scroll */
  .mobile-search-bar.hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Mobile search input */
  .mobile-search-input {
    border: 1px solid #1baaae !important;
    border-radius: 2rem !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 3.5rem 0.75rem 1rem !important;
    color: #333 !important;
    background-color: white !important;
    height: 48px !important;
    width: 100% !important;
  }
  
  .mobile-search-input::placeholder {
    color: #999 !important;
  }
  
  /* Mobile search icon */
  .mobile-search-icon {
    position: absolute !important;
    right: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #40B0A0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
  }
  
  /* Body padding for fixed search bar */
  body {
    padding-top: 120px !important;
  }
  
  /* Navbar fixed positioning */
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    background-color: white !important;
  }
  
  /* Hero section mobile fixes */
  .modern-hero {
    padding: 40px 15px 30px !important;
    min-height: auto !important;
  }
  
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  .hero-heading-accent {
    font-size: 28px !important;
  }
  
  .hero-heading-main {
    font-size: 32px !important;
  }
  
  .hero-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  
  .hero-cta {
    flex-direction: column !important;
  }
  
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
  
  .hero-stats {
    gap: 20px !important;
  }
  
  .hero-stat-value {
    font-size: 24px !important;
  }
  
  .hero-stat-label {
    font-size: 12px !important;
  }
  
  .hero-right {
    height: 300px !important;
  }
  
  .hero-card-main {
    width: 220px !important;
    height: 260px !important;
    right: 10px !important;
    top: 20px !important;
  }
  
  .hero-card-secondary {
    width: 160px !important;
    height: 180px !important;
    left: 10px !important;
    bottom: 10px !important;
  }
  
  .hero-floating-badge {
    width: 90px !important;
    height: 90px !important;
    top: 100px !important;
    left: 40px !important;
  }
  
  .hero-floating-badge-icon {
    font-size: 24px !important;
  }
  
  .hero-floating-badge-label {
    font-size: 14px !important;
  }
  
  .hero-floating-badge-sublabel {
    font-size: 10px !important;
  }
  
  /* Category cards mobile fixes */
  .category-card {
    min-height: 80px !important;
    padding: 0.75rem !important;
  }
  
  .category-icon i {
    font-size: 1.5rem !important;
  }
  
  .category-name h6 {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
  }
  
  /* Section titles mobile fixes */
  .section-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .section-subtitle {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  
  /* Container padding fixes */
  .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden !important;
  }
  
  html {
    overflow-x: hidden !important;
  }
  
  /* Fix any overflowing elements */
  * {
    max-width: 100% !important;
  }
  
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Ensure cards don't overflow */
  .card {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Fix button text wrapping */
  .btn {
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center !important;
  }
  
  /* Fix form inputs on mobile */
  .form-control,
  .form-select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    max-width: 100% !important;
  }
  
  /* Fix alerts on mobile */
  .alert {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Fix badges on mobile */
  .badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
    white-space: nowrap !important;
  }
}

/* Extra small devices (portrait phones) */
@media (max-width: 575.98px) {
  .hero-heading-accent {
    font-size: 24px !important;
  }
  
  .hero-heading-main {
    font-size: 28px !important;
  }
  
  .hero-description {
    font-size: 13px !important;
  }
  
  .hero-card-main {
    width: 200px !important;
    height: 240px !important;
  }
  
  .hero-card-secondary {
    width: 140px !important;
    height: 160px !important;
  }
  
  .hero-floating-badge {
    width: 80px !important;
    height: 80px !important;
    top: 90px !important;
    left: 30px !important;
  }
  
  .hero-floating-badge-icon {
    font-size: 20px !important;
  }
  
  .hero-floating-badge-label {
    font-size: 12px !important;
  }
}