/* ==========================================================================
   DHV Brother Spices & Agri Export - Modern Responsive Breakpoints
   Optimized for:
   - Small Smartphones (320px - 480px)
   - Large Smartphones & Phablets (481px - 767px)
   - Tablets & Small Laptops (768px - 1024px)
   - High-Res Desktops (1200px+)
   ========================================================================== */

/* Extra Small & Small Mobile Devices (max-width: 575.98px) */
@media (max-width: 575.98px) {
  /* Announcement Top Bar */
  .top-bar {
    font-size: 0.75rem;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .top-bar .container {
    justify-content: center !important;
    text-align: center;
    gap: 0.35rem !important;
  }

  /* Navbar */
  .brand-logo-img {
    height: 38px;
  }

  .brand-title {
    font-size: 1.05rem;
  }

  .brand-subtitle {
    font-size: 0.65rem;
  }

  .main-nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .main-nav .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 0.75rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.08);
  }

  .main-nav .navbar-nav .nav-link {
    padding: 0.65rem 1rem;
    font-size: 1rem;
    border-radius: var(--radius-sm);
  }

  /* Hero Section */
  .hero-section {
    padding: 50px 0 65px;
  }

  .hero-badge {
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
  }

  .display-4 {
    font-size: 2.15rem !important;
    line-height: 1.2;
  }

  .lead {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hero-stats-badge {
    padding: 1.25rem;
    margin-top: 1rem;
  }

  /* Section Titles */
  .section-title {
    font-size: 1.75rem !important;
  }

  .section-desc {
    font-size: 0.95rem;
  }

  .section-tag {
    font-size: 0.75rem;
    padding: 0.28rem 0.85rem;
  }

  /* Trust Bar */
  .trust-bar {
    padding: 0.85rem 0;
  }

  .trust-bar .container {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem;
  }

  .trust-badge-item {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.45rem 0.9rem;
  }

  /* App Filter & Catalog Sidebar (Mobile/Tablet) */
  .product-sidebar-col {
    position: static;
  }

  .product-sidebar {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 1.25rem;
  }

  .filter-sidebar-card {
    max-height: none;
    overflow: visible;
    padding: 1.25rem;
  }

  .app-search-wrap {
    padding: 0.3rem 0.5rem 0.3rem 0.9rem;
  }

  .app-search-badge {
    display: none;
  }

  .category-filter-vertical .filter-btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.84rem;
  }

  .source-filter-vertical .source-filter-btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
  }

  .catalog-toolbar {
    padding: 0.75rem 1rem;
  }

  /* Feature and Category Cards */
  .feature-card {
    padding: 1.5rem;
  }

  .category-card-img-wrap {
    height: 180px;
  }

  .product-card-img-wrap {
    height: 190px;
  }

  /* Metrics Banner */
  .metrics-banner {
    padding: 2rem 1.25rem;
    border-radius: var(--radius-lg);
  }

  .metric-number {
    font-size: 2.15rem;
  }

  .metric-label {
    font-size: 0.82rem;
  }

  /* Floating Actions */
  .floating-actions {
    bottom: 18px;
    right: 18px;
    gap: 10px;
  }

  .btn-whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

  .btn-back-to-top {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* Forms & Modals */
  .form-control,
  .form-select {
    font-size: 0.92rem;
    padding: 0.65rem 0.95rem;
  }

  .modal-dialog {
    margin: 0.75rem;
  }

  .coa-document {
    padding: 1.25rem;
  }
}

/* Medium Tablets & Phablets (576px to 991.98px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-section {
    padding: 80px 0 95px;
  }

  .display-4 {
    font-size: 2.75rem !important;
  }

  .section-title {
    font-size: 2.1rem;
  }

  .category-card-img-wrap {
    height: 200px;
  }

  .metrics-banner {
    padding: 2.5rem 1.75rem;
  }

  .main-nav .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-top: 0.75rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.08);
  }
}

/* Desktops & Laptops (min-width: 992px) */
@media (min-width: 992px) {
  .sticky-sidebar {
    position: sticky;
    top: 96px;
    z-index: 10;
  }

  /* Product Catalog Desktop Sticky Sidebar */
  .product-sidebar-col {
    position: relative;
    height: 100%;
  }

  .product-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 92px;
    z-index: 30;
  }

  .filter-sidebar-card {
    max-height: calc(100vh - 115px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(6, 78, 59, 0.25) transparent;
  }

  .filter-sidebar-card::-webkit-scrollbar {
    width: 5px;
  }

  .filter-sidebar-card::-webkit-scrollbar-track {
    background: transparent;
  }

  .filter-sidebar-card::-webkit-scrollbar-thumb {
    background: rgba(6, 78, 59, 0.25);
    border-radius: 9999px;
  }

  .filter-sidebar-card::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
  }

  .hero-section {
    min-height: 82vh;
    display: flex;
    align-items: center;
  }
}