.font-urbanist {
  font-family: "Urbanist", sans-serif !important;
}
.btn-cart {
  background-color: #000d6b; /* normal state */
  transition: background-color 0.3s ease;
}

/* Mobile (default) – no side padding */
.section-portion {
  padding-left: 0;
  padding-right: 0;
}

/* Web / desktop view (lg and up) */
@media (min-width: 992px) {
  .section-portion {
    padding-left: 4.2rem;
    padding-right: 4.2rem;
  }
}

.text-color {
 color: #000d6b; /* normal state */

}
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus {
    background-color: #000d6b;
    color: #fff; /* optional but usually looks better */
  }
/* --- Sort pill --- */
.sort-by .dropdown-toggle::after { display: none; } /* hide BS caret */
.bg-filter{
    background: #eaeaea;    
}

.bg-filter:hover{ background: #eaeaea; }
.sort-pill{
  background: #eaeaea;          /* light grey like screenshot */
  border: 0;
  border-radius: 9999px;
  padding: 10px 16px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: 16px;
  
}
.sort-pill .label{ font-weight: 700; margin-right: 4px; }  /* “Sort by:” bold */
.sort-pill:focus{ outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.sort-pill:hover{ background: #eaeaea; }

/* Dropdown menu look */
.sort-menu{
  --radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 260px;             /* roomy like the mock */
}
.sort-menu .dropdown-item{
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
}
.sort-menu .dropdown-item:hover,
.sort-menu .dropdown-item:focus{
  background: #f3f4f6;
}

/* Keep row tidy on small screens */
.filter-container{ gap: .5rem; flex-wrap: wrap; }
.sort-by{ order: 2; } /* sits after the chips by default */
@media (min-width: 576px){
  .sort-by{ order: 0; } /* feel free to reorder on larger screens */
}


.btn-cart:hover {
  background-color: #12144c; /* hover state */
}
.add-btn-bg {
  background-color: #ececec;
}
.btn-closes {
  color: white;
}
.customize-btn:hover {
  background-color: #ececec !important;
  color: #0a0a40 !important;
}
/* Checkbox */
.form-check-input[type="checkbox"] {
  background-color: #ececec;
  border: 1px solid #ccc;
}
.form-check-input[type="checkbox"]:checked {
  background-color: #12144c;
  border-color: #12144c;
}

/* Radio */
.form-check-input[type="radio"] {
  background-color: #ececec;
  border: 1px solid #ccc;
}
.form-check-input[type="radio"]:checked {
  background-color: #12144c;
  border-color: #12144c;
}
.border-checkout {
  border: 2px solid #000d6b;
}

.border-checkout:hover {
  border: 2px solid #000d6b;
}

.icon-color {
  color: #000d6b;
}
.nav-pills .nav-link.active {
  background-color: #000d6b !important;
  color: #fff !important;
  border: 1px solid #000d6b !important;
}

/* Inactive tab */
.nav-pills .nav-link {
  border: 2px solid #000d6b !important;
  color: #000d6b !important;
  background-color: transparent !important;
}


.dual-range{
    --thumb: 18px;             /* thumb diameter */
    --track: 4px;              /* track thickness */
    --brand: #161c4b;          /* navy color */
    position: relative;
    height: max(var(--thumb), 36px);
  }

  /* Base and filled tracks — perfectly centered */
  .dual-range .track,
  .dual-range .range-fill{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--track);
    border-radius: 999px;
  }
  /* Leave room for half a thumb at both ends so edges meet thumb centers */
  .dual-range .track{
    left: calc(var(--thumb) / 2);
    right: calc(var(--thumb) / 2);
    background: #e5e7eb; /* light gray */
  }
  .dual-range .range-fill{
    background: var(--brand);
  }

  /* Overlapped range inputs */
  .dual-range input[type=range]{
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;                   /* kills Bootstrap .form-range default margin */
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;        /* track is inert; thumbs enable events */
  }

  /* WebKit (Chrome/Edge/Safari) */
  .dual-range input[type=range]::-webkit-slider-runnable-track{
    height: var(--track);
    background: transparent;
  }
  .dual-range input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: #250c87;
 
    position: relative;
 
  }

  /* Firefox */
  .dual-range input[type=range]::-moz-range-track{
    height: var(--track);
    background: transparent;
  }
  .dual-range input[type=range]::-moz-range-thumb{
    pointer-events: auto;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    box-shadow: 0 0 0 3px rgba(22,28,75,.08);
    position: relative;
    z-index: 2;
  }
  .swiper-slide {
  width: 100%;
  height: 100%;
}

.banner-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* fills slide, crops if needed */
  object-position: center; /* keeps center visible */
}

.price-royal{
  font-weight: 900;
  font-size: 1.0rem;
  letter-spacing: 0.3px;
  line-height: 1;

  color: #002366;

  /* strong glow highlight */
  text-shadow:
    0 2px 0 rgba(0,0,0,0.10),
    0 8px 18px rgba(0,35,102,0.35),
    0 0 26px rgba(0,35,102,0.55);

  -webkit-text-stroke: 0.6px rgba(0,0,0,0.10);
}

.price-royal .price-cur{
  font-size: 0.8rem;
  font-weight: 800;
  opacity: 0.9;
  margin-left: 4px;
}

/* Mobile Bottom Navigation Styles */
  .mobile-bottom-nav {
    z-index: 1030; /* Ensure it's above other content */
    padding-bottom: env(safe-area-inset-bottom); /* For iOS notches */
  }
  
  .mobile-bottom-nav .btn {
    padding: 0.25rem;
    color: #6c757d;
  }
  
  .mobile-bottom-nav .btn.active {
    color: #0d6efd;
  }
  
  .mobile-bottom-nav .font-urbanist {
    font-size: 0.7rem;
  }
  

  
  /* Dropdown adjustments for mobile */
  @media (max-width: 991.98px) {
    .dropdown-menu {
      max-height: 60vh;
      overflow-y: auto;
    }
  }