@import url("../node_modules/bootstrap-icons/font/bootstrap-icons.css");

.card-body {
  flex-grow: 1; /* يجعل المحتوى يتمدد حسب الحاجة */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* يجعل الأزرار في الأسفل دائمًا */
}

.card-img-top {
  height: 180px; /* تحديد ارتفاع ثابت للصورة */
  object-fit: cover; /* لجعل الصورة متناسبة */
}

.category-image {
  height: 180px;
  width: 300px;
}

.card-image {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.w-90 {
  width: 90%;
}

.carousel-indicators [data-bs-target] {
  height: 10px;
  width: 10px;
  border-radius: 100%;
}

.bg-custom {
  background-color: #1f2a4a !important;
  opacity: 0.9;
}

.bg-primary {
  background-color: #1f2a4a !important;
}

.card {
  width: 250px;
}

/* categories page */
/* تأثير hover على الكروت */
#productsGrid .card {
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#productsGrid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* صور الكروت */
#productsGrid .card img:not(.img) {
  height: 200px;
  object-fit: cover;
}

/* السلايدر */
.circle-slider {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding: 1rem 0;
}

.circle-slider .circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circle-slider .circle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.circle-slider .circle img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* contact */

.hero-section-contact {
  height: 256px;
  background-image: url("https://images.unsplash.com/photo-1576602976047-174e57a47881?auto=format&fit=crop&q=80");
  background-size: cover;
  background-position: center;
}

.overlay-contact {
  background-color: rgba(0, 0, 0, 0.6);
}

.contact-icon {
  width: 48px;
  height: 48px;
  background-color: #1f2a4a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon i {
  color: #ffffff;
  font-size: 1.2rem;
}

.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.contact-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contact-info {
  flex: 1;
  padding: 2rem;
}

.contact-form {
  flex: 1;
  background-color: var(--bs-light);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-form .btn-primary {
  background-color: #1f2a4a;
  border-color: #1f2a4a;
}

.contact-form .btn-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.text-primary {
  color: #1f2a4a !important;
}

.btn-primary {
  background-color: #1f2a4a;
  border-color: #1f2a4a;
}

/* checkout info */
.step-indicator {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}
.step {
  display: flex;
  align-items: center;
  gap: 5px;
}
.step.active {
  color: blue;
  font-weight: bold;
}
.step.completed {
  color: green;
}
.step-number {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e0f7e9;
  color: green;
  font-weight: bold;
}
.step.active .step-number {
  background-color: #d6d6ff;
  color: blue;
}
.step.disabled {
  color: gray;
}
.step.disabled .step-number {
  background-color: #e0e0e0;
}
input[type="email"]{
  direction: rtl;
}

/* تحسينات للـ Navbar */
@media (max-width: 992px) {
    .navbar .container {
        flex-wrap: wrap;
    }

    .navbar-collapse {
        order: 3;
        width: 100%;
    }

    .navbar form {
        width: 100%;
        margin: 1rem 0;
    }

    .navbar-nav {
        margin-top: 1rem;
        width: 100%;
        text-align: center;
    }

    .navbar-brand {
        margin: 0 auto;
    }
}

/* تحسين عرض السلة في الشاشات الصغيرة */
@media (max-width: 768px) {
    .cart-container .row {
        flex-direction: column-reverse;
    }

    .order-summary {
        margin-bottom: 2rem;
    }
}

/* تحسين عرض نموذج التواصل في الشاشات الصغيرة */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-info,
    .contact-form {
        width: 100%;
        margin-bottom: 2rem;
    }
}

.cart-icon {
  position: relative;
  display: inline-block;
}
#cart-count {
  position: absolute;
  top: -3px;
  right: -7px;
  font-weight: 600;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 3px 8px;
  font-size: 12px;
  display: none;
}

/* علشان نضبط الكاروسل */
#productCarousel .carousel-inner {
  padding: 0 15px; /* علشان نمنع العناصر من التلامس مع الحواف */
  margin: 0 auto; /* علشان نضمن إن الكاروسل بيكون في المنتصف */
}


#productCarousel .carousel-control-next {
  right: -5%; /* علشان نحرك الزر الأيمن لبره */
}

/* علشان نضبط الكاردات */
#productCarousel .card {
  margin: 0 auto; /* علشان نضمن إن الكارد بيكون في المنتصف */
  width: 100%; /* علشان نضمن إن الكارد بيكون بنفس العرض */
}

/* علشان نضبط الصور داخل الكاردات */
#productCarousel .card-img-top {
  height: 180px; /* تحديد ارتفاع ثابت للصورة */
  object-fit: cover; /* علشان الصورة تتناسب مع الحجم */
}

/* علشان نضبط النص داخل الكاردات */
#productCarousel .card-body {
  flex-grow: 1; /* علشان المحتوى يتمدد حسب الحاجة */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* علشان الأزرار بتكون في الأسفل دائمًا */
}