@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
body {
        position: relative!important;
        background-color: #fff8f0; /* fallback */
        padding-top: 5rem;
        margin: 0;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../background/bg-pure.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5; /* adjust for watermark effect */
        z-index: -1; /* keeps it behind all content */
    }



footer{
  background-color: rgba(238, 238, 238, 0.361);
}

/* Enable dropdown(login button) on hover for desktop */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Align with parent */
    }
}

.search-bar .input-group .form-control {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem 0 0 0.5rem;
}

.search-bar .input-group .btn {
    border-radius: 0 0.5rem 0.5rem 0;
}
/* .card-img-top {
    height: 200px;      
    object-fit: cover;  
    width: 100%;        
} */

.card-img-top {
    height: 200px;
    object-fit: contain; /* Show entire image */
    width: 100%;
    background-color: #fff; /* Optional, so transparent PNGs look clean */
    padding: 5px; /* Optional, spacing inside */
}

.input-group.shadow-sm{
    border-radius: 0.5rem;
}

.products-card, .products-card img{
  border-radius: 20px!important;
  overflow-y: hidden;
  
}

.preview-thumbs img {
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}
.preview-thumbs img:hover,
.preview-thumbs img.active {
    border-color: #f28c28;
}
.main-image {
    max-height: 400px;
    object-fit: contain;
}

.border-radius{
    border-radius: 20px;
}

/* For small screen (mobile) navbar */
@media (max-width: 767.98px) {
  /* Limit the background width of the active nav item */
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link.active .badge {
    display: inline-flex;  /* Shrink background to content width */
    align-items: center;
    padding: 0.5rem 1rem;  /* Adjust padding for smaller screen */
    border-radius: 1rem;   /* Rounded pill shape */
    background-color: #f4e6d1; /* Same highlight color */  
  }
  
  /* The badge should sit nicely next to text, not force height */
  .navbar-nav .nav-link.active .badge {
    margin-left: 0.5rem;
    padding: 0.25em 0.45em;
    font-size: 0.75rem;
    line-height: 1;
  }
  
  /* Remove background from entire nav-link full width */
  .navbar-nav .nav-item.active {
    background: none !important;
  }
}

  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link.active .badge {
    align-items: center; /* Adjust padding for smaller screen */
    border-radius: 10px;   /* Rounded pill shape */
    background-color: #f4e6d1; /* Same highlight color */
    padding: 0.4rem 10px;  

  }
  
  
 /*toast*/
 
 .toast.success{
    background-color: rgba(236, 255, 246, 1) !important;
    color: rgba(36, 156, 12, 1) !important;
 }
 
  .toast.warning{
    background-color: rgba(255, 252, 212, 1) !important;
    color: rgba(147, 133, 0, 1) !important;
 }
 
  .toast.danger{
    background-color: rgba(255, 236, 236, 1) !important;
    color: rgba(156, 12, 12, 1) !important;
 }
 
 .toast.info{
    background-color: rgba(212, 218, 255, 1) !important;
    color: rgba(0, 40, 147, 1) !important;
 }