/* 
    =====================
    This is the css file for browse page(in the root folder).
    ====================== 
*/



 /* ==================== browse Hero ================== */
 /* .browse-hero {
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),
         url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&q=80&w=2070');
     background-size: cover;
     background-position: center;
     color: white;
     min-height: 105vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center; 
 }
*/


 body {
     /* Pushes content down so it doesn't hide behind the navbar */
     /* padding-top: 80px; */
     background-color: #fff !important;
 }

 html {
     scroll-behavior: smooth;
 }

 .browse-hero {
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),
         url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&q=80&w=2070');
     background-size: cover;
     background-position: center;
     color: white;
     padding: 80px 0;
     height: fit-content !important;
     text-align: center;
 }

 .browse-hero .container {
     margin-top: 10px;
     padding-top: 30px;
     padding-bottom: -10px;
 }


 /* Bouncing animation */
 .animate-bounce {
     display: inline-block;
     animation: bounce 2s infinite;
 }

 @keyframes bounce {

     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }

     40% {
         transform: translateY(-8px);
     }

     /* Increased jump slightly */
     60% {
         transform: translateY(-4px);
     }
 }

 .scroll-link:hover {
     opacity: 1 !important;
     color: #fff !important;
     transform: translateY(1px);
 }

 /* listings */
 #feed {
     background-color: #fff !important;
 }


 /* When hovering over the filter button, force the badge to warning yellow */
 #filterPanelButton:hover .badge,
 #filterPanelButton:hover #badgeClear {
     background-color: #ffc107 !important;
     color: #212529 !important;
 }




 /* 1. Teaser Card (Invite Friends) Styling */
 .bg-success.text-white.p-3.d-flex.flex-row {
     border-radius: 0.5rem !important;
     /* Matches card shadow-sm */
     min-height: 120px;
     border: none !important;
 }

 /* Icon Box - Matches Avatar Visual Weight */
 .bg-success .bg-white.rounded-circle {
     width: 48px !important;
     height: 48px !important;
     min-width: 48px !important;
     background-color: #ffffff !important;
 }

 /* Typography alignment with Product Card */
 .bg-success h6.fw-bold {
     font-size: 0.85rem !important;
     /* Matches .card-title */
     margin-bottom: 2px !important;
 }

 .bg-success p.opacity-75 {
     font-size: 0.65rem !important;
     /* Matches seller info size */
     line-height: 1.3;
     margin-bottom: 8px !important;
 }

 /* Action Button - Matches 'View' Button perfectly */
 .bg-success .btn-light.btn-sm {
     font-size: 0.7rem !important;
     height: 24px;
     line-height: 24px;
     padding: 0 1rem !important;
     border-radius: 0 !important;
     /* Matches 'rounded-0' on View button */
     font-weight: 700;
     color: #198754 !important;
     /* Success Green text */
     border: none;
 }

 /* 2. Empty State Styling */
 .text-center.py-5.text-muted {
     background-color: var(--bs-body-bg);
     border-radius: 0.75rem;
     border: 1px dashed #dee2e6;
 }

 .text-center.py-5 i.fa-box-open {
     color: #198754 !important;
     /* Matches theme success color */
     opacity: 0.3;
 }

 .text-center.py-5 h5.fw-bold {
     font-size: 1.1rem;
     color: var(--bs-emphasis-color);
 }

 /* 3. Global Card Consistency */
 .product-card {
     transition: transform 0.2s ease;
 }

 .product-card:hover {
     transform: translateY(-1px);
 }

 .badge.bg-success-subtle {
     border-color: rgba(25, 135, 84, 0.2) !important;
 }




 /* ============================================
   Skeleton Loader for Product Cards
   ============================================ */

 /* Skeleton card container */
 .skeleton-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     padding: 0;
 }

 .skeleton-card {
     flex: 0 0 calc(25% - 9px);
     max-width: calc(25% - 9px);
     background: #f0f0f0;
     border-radius: 12px;
     overflow: hidden;
     position: relative;
     min-height: 200px;
     animation: shimmer 1.5s infinite linear;
     background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
     background-size: 200% 100%;
 }

 @keyframes shimmer {
     0% {
         background-position: -200% 0;
     }

     100% {
         background-position: 200% 0;
     }
 }

 /* Inside skeleton card */
 .skeleton-img {
     width: 100%;
     height: 120px;
     background: #ddd;
 }

 .skeleton-body {
     padding: 12px;
 }

 .skeleton-title {
     height: 16px;
     width: 80%;
     background: #ddd;
     margin-bottom: 8px;
     border-radius: 4px;
 }

 .skeleton-price {
     height: 14px;
     width: 40%;
     background: #ddd;
     margin-bottom: 8px;
     border-radius: 4px;
 }

 .skeleton-category {
     height: 12px;
     width: 60%;
     background: #ddd;
     margin-bottom: 8px;
     border-radius: 4px;
 }

 .skeleton-seller {
     height: 12px;
     width: 50%;
     background: #ddd;
     border-radius: 4px;
 }

 /* Dark mode support */
 [data-bs-theme="dark"] .skeleton-card {
     background: #2a2a2a;
     background-image: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
 }

 [data-bs-theme="dark"] .skeleton-img,
 [data-bs-theme="dark"] .skeleton-title,
 [data-bs-theme="dark"] .skeleton-price,
 [data-bs-theme="dark"] .skeleton-category,
 [data-bs-theme="dark"] .skeleton-seller {
     background: #3a3a3a;
 }

 /* Responsive: fewer columns on smaller screens */
 @media (max-width: 768px) {
     .skeleton-card {
         flex: 0 0 calc(50% - 6px);
         max-width: calc(50% - 6px);
     }
 }

 @media (max-width: 576px) {
     .skeleton-card {
         flex: 0 0 100%;
         max-width: 100%;
     }
 }

 /* Error state */
 .skeleton-error {
     text-align: center;
     padding: 40px 20px;
     color: #dc3545;
 }

 .skeleton-error i {
     font-size: 2.5rem;
     margin-bottom: 15px;
     display: block;
 }

 .skeleton-error .retry-btn {
     margin-top: 10px;
 }



 
 /* ============================================
   Product Card Scroll Animation
   ============================================ */

 .product-card {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }

 .product-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Staggered delays (applied via JS) */
 .product-card.delay-1 {
     transition-delay: 0.05s;
 }

 .product-card.delay-2 {
     transition-delay: 0.10s;
 }

 .product-card.delay-3 {
     transition-delay: 0.15s;
 }

 .product-card.delay-4 {
     transition-delay: 0.20s;
 }

 .product-card.delay-5 {
     transition-delay: 0.25s;
 }

 .product-card.delay-6 {
     transition-delay: 0.30s;
 }

 .product-card.delay-7 {
     transition-delay: 0.35s;
 }

 .product-card.delay-8 {
     transition-delay: 0.40s;
 }