/* This css file is for the navbar. */

.navbar {
    background-color: #dddde5 !important; /* Change this color as needed #dddde5*/
}


.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  padding: 0.5rem 3rem 0.5rem 2.5rem;
  border-radius: 30px;
  border: 2px solid #aba6ec;
  font-size: 1rem;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #999;
  font-size: 1.2rem;
  pointer-events: none;
}

.search-btn {
  position: absolute;
  top: 50%;
  right: 0;  /* So that the buttons sits flush to the right.  Before, there was a gap because the value was set to 10px. */
  transform: translateY(-50%);
  background: #aba6ec;
  color: white;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-btn:hover {
  background: #b585e6;
}

.custom-search-button {
  color: #000000; /* Button text colour */
  border-color: #000000; /* Outline colour */
  background-color: #dddde5; /* Background colour, optional */
  border: 2px solid #aba6ec; /*Button border colour */
}

.custom-search-button:hover {
  background-color: #aba6ec; /* Darker color on hover */
  border-color: #aba6ec;  /* Matches the darker shade on hover, so there is no border colour displayed.  The button becomes the colour of the border. */
}

.search-box {
  background: url('https://cdn-icons-png.flaticon.com/512/622/622669.png') no-repeat scroll 7px 7px;
  background-size: 20px 20px;
  padding-left: 35px; /* Enough space so typed text doesn't overlap the icon */
}


/* Space between cart and search */
/* Space between any .navbar-nav before and the search form (robust) */
.navbar .navbar-collapse > .navbar-nav ~ form.form-inline {
  margin-left: 2rem !important; /* adjust as needed */
}


/* Styling the shopping cart icon. */
.nav-cart-link i { font-size: 1.0rem; line-height: 1; }  /* This line changes the size of the icon. */

.badge-cart { background:#343a40; color:#fff; } /* change to your brand colour */


/* Cart badge: tidy size + position */
.nav-cart-link {
  position: relative; /* already present via Bootstrap's .position-relative, safe to keep */
}



/* Optional: make the cart icon a touch larger so the badge looks balanced */
.nav-cart-link i.fas.fa-shopping-cart {
  font-size: 1.25rem;
  line-height: 1;
}

/* Small-screen tweak (slightly less offset on narrow navbars) */
@media (max-width: 576px) {
  .nav-cart-link .badge-cart {
    transform: translate(35%,-45%);
  }
}


/* The following code is for styling the number displaying the quantity of items in the cart. */

/* Icon + badge side-by-side */
.nav-cart-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:0;
}

/* Icon size */
.nav-cart-link i.fas.fa-shopping-cart{
  font-size:1.25rem;
  line-height:1;
}

/* Separate pill on the right (no overlay, no translate) */
.nav-cart-link .badge-cart{
  position:static !important;   /* cancel old absolute */
  transform:none !important;    /* cancel leftover translate */
  top:auto !important;          /* cancel old top/right */
  right:auto !important;
  margin-left:.1rem;

  /* hidden by default; your JS sets display:'flex' when count>0 */
  display:none;

  min-width:18px; height:18px; padding:0 .5rem;
  border-radius:999px;
  font-size:11px; line-height:18px;
  align-items:center; justify-content:center;
  background:#dc3545; color:#fff;
  box-shadow:0 0 0 2px #f8f9fa;
}

/* Belt-and-braces: avoid baseline quirks */
.nav-cart-link .badge{ vertical-align:baseline !important; }

/* Optional: More space between the icon and the pill. */
.nav-cart-link.badge-spaced { gap:.6rem; }


/* Compact on very small screens */
@media (max-width: 576px) {
  .nav-cart-link { gap: .3rem; }
  .nav-cart-link .badge-cart { min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
}

/* This code is for positioning the cart icon. */
.navbar .cart-slot { margin-right: 1.25rem; }
@media (min-width: 992px){ .navbar .cart-slot { margin-right: 2rem; } }

/* This code is to personalise the pill (cart counter). */
/* Plain text cart count: no background, no pill */
.nav-cart-link .badge-cart{
  /* kill the pill look */
  background: transparent !important;
  color: #000 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* size/line so it sits neatly next to the icon */
  min-width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 1.25rem;       /* adjust to taste */
  font-weight: 600;          /* optional: make it pop a bit */

  /* we keep it as flex because JS sets display:flex; this is fine for plain text */
}

/* --------------- Styling the bullet points in the dropdown menu of the navbar  ---------------- */

/* Remove normal bullets */
.navbar-feature-list {
	list-style: none; }

/* Reduce the size of the bullet point */
.navbar-feature-list .bi-circle-fill::before {
  display: inline-block;
  transform: scale(0.45);
}

/* Change the colour and position of the bullet point */
.navbar-feature-list .navbar-bullet {
  margin-left: -18px;
  color: #000000;
  text-decoration: none;
}
/* btn-custom1: #5E238A */

/* Change the colour of the text next to the bullet point */
.navbar-feature-list a {
  color: #333;
}

/* Remove the underline effect when the text of the bullet point is hoverrred upon */
.navbar-feature-list a:hover {
  text-decoration: none;
}

/* Overriding Bootstraps setting to move the bullet point's position */
.navbar-feature-list .dropdown-item {
  padding-left: 0px;
}

/* Change the width of the womenswear dropdown menu */
.womenswear-dropdown {
  min-width: 200px;
}

/* --------------- End of styling the bullet points in the dropdown menu of the navbar  ---------------- */