@font-face {
  font-family: 'PlayfairLocal';
  src: url('https://elio-brand.com/Playfair_Display/static/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'PlayfairLocal';
  src: url('https://elio-brand.com/Playfair_Display/static/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: bold;
}
       
       body {
          background-color: #121212;
          color: #e0e0e0;
          font-family: 'PlayfairLocal', sans-serif;
       }
       
       .navbar {
          background-color: #1a1a1a !important;
          border-bottom: 1px solid #c39248;
       }
       
       .navbar-brand, .nav-link {
          color:#a3762f !important;
       }
       
       .nav-link:hover {
          color: #c39248 !important;
       }
       
       /* كروت المنتجات - التصميم المعدل */
       .product-card {
          transition: all 0.3s ease;
          border-radius: 12px;
          overflow: hidden;
          height: 100%;
          background-color: #1e1e1e;
          border: 1px solid #333;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
       }
       
       .product-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 24px rgba(195, 38, 30, 0.25);
          border-color: #c39248;
       }
       
       .product-img-container {
          height: 220px;
          position: relative;
          overflow: hidden;
          background-color: #121212;
          border-bottom: 1px solid #333;
       }
       
       .product-img {
          height: 100%;
          width: 100%;
          transition: all 0.5s ease;
       }
       
       .product-card:hover .product-img {
          transform: scale(1.03);
       }
       
       .category-badge {
          position: absolute;
          top: 12px;
          left: 12px;
          z-index: 2;
          background-color: #C3261E !important;
          font-size: 0.8rem;
          padding: 5px 10px;
          border-radius: 20px;
          box-shadow: 0 2px 5px rgba(0,0,0,0.3);
       }
       
       .discount-badge {
          position: absolute;
          top: 12px;
          right: 12px;
          z-index: 2;
          background-color: #C3261E !important;
          font-size: 0.8rem;
          padding: 5px 10px;
          border-radius: 20px;
          box-shadow: 0 2px 5px rgba(0,0,0,0.3);
       }
       
       .card-body {
          padding: 20px;
          background-color: #1e1e1e;
       }
       
       .card-title {
           font-size: 1.1rem;
           font-weight: 600;
           margin-bottom: 12px;
           min-height: 50px;
           color: #c39248 !important;
       }
       
       .card-text {
          color: #c39248;
          font-size: 0.9rem;
          line-height: 1.5;
          margin-bottom: 15px;
          min-height: 60px;
       }
       
       .price-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: auto;
          color:#a3762f;
          padding-top: 10px;
          border-top: 1px dashed #333;
       }
       
       .price-range {
          color: #c39248 !important;
          font-weight: bold;
          font-size: 1.2rem;
       }
       
       .original-price {
          text-decoration: line-through;
          color: #777 !important;
          font-size: 0.9rem;
          margin-right: 5px;
       }
       
       .discounted-price {
          color: #c39248 !important;
          font-weight: bold;
          font-size: 1.2rem;
       }
       
       .btn-details {
          border: 1px solid #c39248;
          border-radius: 8px;
          padding: 5px 15px;
          font-size: 0.85rem;
          transition: all 0.3s;
       }
       
       .btn-details:hover {  
          transform: translateY(-2px);
       }
       
       .thumbnail-container {
          display: flex;
          justify-content: center;
          margin-top: 5px;
          background-color: #121212;
          padding: 8px 0;
          gap: 5px;
       }
       
       .thumbnail {
          width: 36px;
          height: 36px;
          object-fit: cover;
          cursor: pointer;
          border: 1px solid #333;
          opacity: 0.7;
          transition: all 0.3s;
          border-radius: 4px;
       }
       
       .thumbnail:hover, .thumbnail.active {
          opacity: 1;
          border-color: #c39248;
          transform: scale(1.1);
       }
       
       .filter-section {
          background-color: #1a1a1a;
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 20px;
          color: #c39248;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
          border: 1px solid #333;
       }

       .filter-section .form-control,
       .filter-section .form-select {
          background-color: #121212;
          color: #c39248;
          border: 1px solid #333;
       }
       
       .filter-section .form-control:focus,
       .filter-section .form-select:focus {
          border-color: #c39248;
          box-shadow: 0 0 0 0.25rem rgba(195, 146, 72, 0.25);
       }

       .filter-section .form-control::placeholder {
          color: #c39248;
          opacity: 0.7;
       }

       .filter-section .btn {
          background-color: #c39248;
          color: #121212;
          border: none;
          transition: 0.3s;
          font-weight: bold;
       }

       .filter-section .btn:hover {
          background-color: #a3762f;
          color: #121212;
       }

       .filter-section .btn-danger {
          background-color: #C3261E;
          border: none;
          color: white;
       }

       .filter-section .btn-danger:hover {
          background-color: #a02020;
       }
       
       .pagination .page-item.active .page-link {
          background-color: #c39248;
          border-color: #c39248;
          color: #121212;
       }
       
       .pagination .page-link {
          color: #c39248;
          background-color: #1a1a1a;
          border-color: #333;
       }
       
       .pagination .page-link:hover {
          background-color: #252525;
          color: #c39248;
       }
       
       .alert {
          background-color: #252525;
          border-color: #333;
          color: #e0e0e0;
       }
       
       .alert-info {
          border-left: 4px solid #c39248;
       }
       
       .alert-warning {
          border-left: 4px solid #C3261E;
       }
       
       footer {
          background-color: #1a1a1a !important;
          border-top: 1px solid #c39248;
       }
       
       /* التخصيصات الإضافية */
       .search-btn {
          background-color: #C3261E !important;
       }
       
       .search-btn:hover {
          background-color: #a02020 !important;
       }
       
       .category-select {
          background-color: #121212 !important;
          color: #c39248 !important;
       }
       
       h3.display-5 {
          text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
          letter-spacing: 1px;
       }
       
       .logo-container {
          border: 2px solid #c39248;
          border-radius: 50%;
          padding: 5px;
          display: inline-block;
          background-color: #1a1a1a;
          box-shadow: 0 4px 8px rgba(0,0,0,0.3);
       }
       
       #details {
          background-color: #a02020;
          color: whitesmoke;
          border-radius: 20px;
          font-weight: bolder;
          transition: all 0.3s ease;
       }

       #details:hover {
          background-color: #a3762f;
          color: #a02020;
       }
       
       /* Media Queries للتجاوب */
       @media (max-width: 1200px) {
          .product-img-container {
             height: 200px;
          }
       }
       
       @media (max-width: 992px) {
          .product-img-container {
             height: 180px;
          }
          
          .card-title {
             font-size: 1rem;
             min-height: 40px;
          }
          
          .card-text {
             font-size: 0.8rem;
             min-height: 50px;
          }
       }
       
       @media (max-width: 768px) {
          .filter-section .col-md-6, 
          .filter-section .col-md-3 {
             margin-bottom: 15px;
          }
          
          .product-img-container {
             height: 220px;
          }
          
          .logo-container img {
             height: 100px;
          }
          
          h3.display-5 {
             font-size: 1.8rem;
          }
       }
       
       @media (max-width: 576px) {
          .product-img-container {
             height: 180px;
          }
          
          .card-body {
             padding: 15px;
          }
          
          .thumbnail {
             width: 30px;
             height: 30px;
          }
          
          .logo-container img {
             height: 80px;
          }
          
          h3.display-5 {
             font-size: 1.5rem;
          }
          
          .filter-section {
             padding: 15px;
          }
       }
       
       @media (max-width: 400px) {
          .product-img-container {
             height: 150px;
          }
          
          .card-title {
             font-size: 0.9rem;
          }
          
          .price-range {
             font-size: 1rem;
          }
          
          .btn-details {
             padding: 3px 10px;
             font-size: 0.75rem;
          }
       }