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

 /* ======== Body */
 body {
     background-color: #f5f4f0 !important;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 /* ======== Remove focus glow from buttons and navbar */
 .btn:focus,
 .btn:active,
 .navbar-toggler:focus,
 .navbar-toggler:active,
 .navbar-toggler-icon:focus,
 .navbar-toggler-icon:active {
     outline: none !important;
     box-shadow: none !important;
 }

 .container-ctn {
     padding-bottom: 30px !important;
 }

 /* ======== Nav button fixed width */
 .nav-btn-fixed {
     min-width: 100px;
     text-align: center;
     display: inline-block;
 }

 /* ======== Search header */
 .container>h4 {
     font-size: 17px;
     font-weight: 700;
     color: #1a1a1a;
     line-height: 1.6;
     margin-bottom: 0.5rem;
 }

 .container>h4 .text-muted {
     font-size: 12.5px;
     font-weight: 400;
     color: #888 !important;
 }

 /* ======== Back button */
 .btn-warning {
     background: #ffc107 !important;
     border: none !important;
     border-radius: 0px !important;
     padding: 7px 16px !important;
     font-size: 13px;
     font-weight: 600;
     color: #1a1200 !important;
     box-shadow: none !important;
     transition: background 0.2s ease;
 }

 .btn-warning:hover {
     background: #ffca2c !important;
     color: #1a1200 !important;
 }

 /* ======== Product card */
 .product-card {
     background: #fff;
     border-radius: 14px !important;
     border: 1px solid #ece9e2 !important;
     box-shadow: none !important;
     overflow: hidden;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .product-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09) !important;
 }

 /* ======== Product image */
 .product-card .card-img-top {
     height: 175px;
     object-fit: cover;
     border-bottom: 1px solid #f0ede7;
 }

 /* ======== Featured badge */
 .product-card .badge.bg-warning {
     background: #ffc107 !important;
     color: #1a1200 !important;
     font-size: 10.5px;
     font-weight: 700;
     padding: 4px 10px;
     border-radius: 20px;
 }

 /* ======== Card body */
 .product-card .card-body {
     padding: 10px 12px 12px !important;
 }

 /* ======== Product title */
 .product-card .card-title {
     font-size: 13px;
     font-weight: 700;
     color: #1a1a1a;
     line-height: 1.35;
 }

 /* ======== Category badge */
 .product-card .badge.bg-success-subtle {
     font-size: 10px !important;
     font-weight: 600;
     background: #d1fae5 !important;
     color: #065f46 !important;
     border: 1px solid #a7f3d0 !important;
     border-radius: 20px;
     padding: 3px 9px;
     white-space: nowrap;
     flex-shrink: 0;
 }

 /* ======== Price */
 .product-card .text-success {
     font-size: 14px !important;
     font-weight: 700;
     color: #198754 !important;
 }

 /* ======== View button */
 .product-card .btn-sm {
     font-size: 11px;
     font-weight: 600;
     color: #b8870b !important;
     background: #fff8e1 !important;
     border: 1px solid #ffc107 !important;
     border-radius: 20px !important;
     padding: 3px 12px !important;
     transition: background 0.15s ease;
     box-shadow: none !important;
 }

 .product-card .btn-sm:hover {
     background: #ffc107 !important;
     color: #1a1200 !important;
 }

 /* ======== Seller row */
 .product-card .mt-auto {
     padding-top: 8px;
     border-top: 1px solid #f0ede7;
     margin-top: auto;
 }

 /* ======== Seller avatar fallback */
 .product-card .rounded-circle.bg-light {
     background: #e8f5e9 !important;
     border: 1.5px solid #198754 !important;
 }

 .product-card .rounded-circle.bg-light .fa-user-circle {
     color: #198754 !important;
 }

 /* ======== Seller profile picture border */
 .product-card img.rounded-circle {
     border-color: #198754 !important;
 }

 /* ======== Seller name + time */
 .product-card .text-muted.text-truncate {
     font-size: 11.5px;
     color: #555 !important;
     font-weight: 600;
 }

 .product-card .text-muted small {
     font-size: 10.5px;
     color: #aaa !important;
     font-weight: 400;
 }

 /* ======== Search highlight */
 .search-highlight {
     background-color: #fff3cd;
     color: #856404;
     padding: 0 3px;
     border-radius: 3px;
     font-weight: 600;
 }

 /* ======== Empty state */
 .text-center.py-5 .fa-search {
     font-size: 3rem !important;
     color: #ccc;
 }

 .text-center.py-5 h5 {
     font-size: 16px;
     font-weight: 700;
     color: #555;
     margin-bottom: 6px;
 }

 .text-center.py-5 p {
     font-size: 13.5px;
     color: #999;
     margin-bottom: 1.25rem;
 }

 /* ======================================================
   RESPONSIVE
   ====================================================== */

 @media (max-width: 768px) {
     .container>h4 {
         font-size: 15px;
     }

     .product-card .card-img-top {
         height: 150px;
     }
 }

 @media (max-width: 480px) {
     .product-card .card-img-top {
         height: 130px;
     }

     .product-card .card-title {
         font-size: 12px;
     }

     .product-card .text-success {
         font-size: 13px !important;
     }
 }