@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;600&display=swap');

html, body {
    height: auto !important;
    overflow: auto !important;
}

s
body {
    font-family: 'Bodoni Moda', serif;
}

h5, h6 {
    font-family: 'Bodoni Moda', serif;
}

h1 {
    font-family: 'Bodoni Moda', serif;
    font-weight: 1200;
}

h2, h3, h4 {
    font-family: 'Bodoni Moda', serif;
    font-weight: 600;
}

b{
    font-family: 'Bodoni Moda', serif;
}

strong {
    font-family: 'Bodoni Moda', serif;
    text-decoration: underline;
}

.card {
    border: 2px solid #e7decc;
    --bs-card-bg: #fff;
}

a {
    font-family: 'Bodoni Moda', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #000;
}

small a {
    text-decoration: underline !important;
    text-transform: none;
    font-weight: normal;
    color: #000;
    font-weight: bold;
}

i {
    font-size: 20px;
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: #000;
    --bs-nav-link-hover-color: #343434;
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.navbar-brand {
    padding-top: var(--bs-navbar-brand-padding-y);
    padding-bottom: var(--bs-navbar-brand-padding-y);
    margin-right: var(--bs-navbar-brand-margin-end);
    font-size: var(--bs-navbar-brand-font-size);
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    --bs-navbar-brand-hover-color: #000;
}

button,
.btn {
    font-family: 'Bodoni Moda', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    --bs-btn-border-color: #CEBE9D;
    --bs-btn-bg: #CEBE9D;
    --bs-btn-hover-bg: #d8c7a5;
    --bs-btn-hover-border-color: #CEBE9D;

    --bs-btn-active-bg: #d8c7a5;
    --bs-btn-active-border-color: #CEBE9D;

    --bs-btn-active-color: #000;
    --bs-btn-disabled-bg: #faf8f5;
    --bs-btn-disabled-border-color: #f1ece3;
}

.btn-primary {
    --bs-btn-color: #000;
}

.btn:disabled {
    color: #000;
    border-color:  #e7decc;
    background-color: #f8f5f0;
}

.btn-outline-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #000;
}

.btn-outline-dark {
    border-color:  #f3eee5;
    --bs-btn-bg: #faf8f5;
    --bs-btn-color: #585858;
}

:root {
    --bs-primary: #E7DECC;         
    --bs-primary-rgb: 231, 222, 204; 


    /* --bs-primary: #CEBE9D;
    --bs-primary-rgb: 206, 190, 157; */


    --bs-body-bg: #fff;
}
  
.dropdown-menu {
    --bs-dropdown-link-hover-bg: #f8f5f0;
    border: 2px solid #ffffff; /* White border, adjust color as needed */
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-dropdown-bg: #e7decc;
    border: 2px solid #f5eddc;
    --bs-dropdown-divider-bg: rgb(216, 199, 165);
}

.calendar-day {
    border: 1px solid #ddd;
    padding: 1rem;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-control:focus {
    outline: none; 
    box-shadow: 0 0 0 0.25rem rgb(216, 199, 165);
    border-color: #e7decc; 
}

.form-check-input {
    box-shadow: none !important;
}

.form-check-input:focus {
    border-color: #cebe9d;
}

.form-check-input:checked {
    background-color: #cebe9d;
    border-color: #cebe9d;
    outline: none; 
    box-shadow: 0 0 0 0.25rem rgb(216, 199, 165);
    border-color: #e7decc; 
}

.navbar-nav {
    --bs-nav-link-padding-y: 0;
}

.alert-success, .alert-success > th, .alert-success > td {
    background-color: #333;
    --bs-alert-border-color: #333;
}

.swiper-button-next,
.swiper-button-prev {
  width: 30px;     
  height: 30px;   
  color: #888;    
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px;
  color: #888; 
}

.swiper-pagination-bullet {
    background: #888 !important; 
    width: 10px !important;      
    height: 10px !important;    
    opacity: 1 !important;       
    margin: 0 5px !important; 
    margin-top: 100px;
    transform: translateY(10px) !important;
}

.swiper-pagination-bullet-active {
    background: #555 !important;
}

.swiper-button-prev , .swiper-button-next{
    transform: translateY(-25px) !important;
}

.swiper {
    padding: 0 20px;
}

@media (max-width: 991.98px) {
  .navbar-collapse .nav-link {
      margin-bottom: 0.5rem;
  }
  .navbar-collapse .btn {
      margin-bottom: 0.5rem;
  }
}

.pagination {
    --bs-pagination-focus-color: #000;
    box-shadow: none;
}

a:focus, button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Purse style for navbar icon */
.purse-link { 
  display: inline-block;
  width: 44px;
  height: 44px;
  position: relative;
  text-align: center;
  line-height: 1;
  color: inherit;
}

/* Clean, minimal cart badge */
.cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 0.7rem;
  padding: 2px 6px;
  line-height: 1;
}

/* Icon hover effect */
.nav-link .bi-handbag {
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-link:hover .bi-handbag {
  transform: scale(1.1);
  color: #fff; /* pops against the navbar */
}

.cart-badge {
  background-color: #cebe9d !important;
  color: #000; /* dark text for contrast */
}

.price-text {
  color: rgb(0,0,0);  /* pure black */
  font-weight: bold;
}

/* Stock Badges */
.stock-badge {
  background-color: #cebe9d;   /* gold-beige */
  color: #000;                 /* black text */
  font-weight: 500;
  padding: 0.5em 0.8em;
  border-radius: 0.5rem;
}

.stock-badge.out {
  background-color: #e7decc;   /* lighter beige */
  color: #000;
}

/* Tag Badges */
.tag-badge {
  background-color: #f5eddc;   /* pale beige */
  color: #000;                 /* black text */
  font-weight: 500;
  padding: 0.4em 0.7em;
  border-radius: 0.5rem;
  border: 1px solid #cebe9d;   /* subtle outline */
}

/* Optional hover effect */
.tag-badge:hover {
  background-color: #cebe9d;
  color: #000;
}

/* Default (expanded) — badge near the top-right of the icon */
.nav-link.position-relative .cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -30%);
}

/* Collapsed navbar — adjust ONLY when the navbar actually collapses */
@media (max-width: 991.98px) {
  .navbar-collapse .nav-link.position-relative .cart-badge {
    right: auto;
    left: 1.2rem;
    transform: translate(40%, -40%);
  }
}