/* ==========================================================================
   PERFUMEPLUG - STRICT 3-COLOR DESIGN SYSTEM (WHITE, GOLD, GREEN)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&display=swap');

:root {
  /* STRICT 3-COLOR PALETTE */
  --brand-white: #FFFFFF;        /* 1. White (Page background & card surfaces) */
  --brand-section-bg: #F8FAFC;   /* Soft off-white neutral */
  --brand-gold: #DDBE0D;         /* 2. Gold (Primary brand, buttons, accents) */
  --brand-gold-hover: #CBAE0B;   
  --brand-gold-subtle: rgba(221, 190, 13, 0.4);
  --brand-green: #10B981;        /* 3. Green (Secondary accent, pre-orders) */
  --brand-green-hover: #059669;
  
  --brand-text-dark: #0F172A;    /* Primary Text Color */
  --brand-text-muted: #64748B;
  
  --font-ibm: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-family: var(--font-ibm) !important;
  background-color: var(--brand-white) !important;
  color: var(--brand-text-dark) !important;
}

.font-ibm {
  font-family: var(--font-ibm) !important;
}

/* Color Utility Classes */
.bg-white {
  background-color: var(--brand-white) !important;
}

.bg-light-surface {
  background-color: var(--brand-section-bg) !important;
}

.bg-brand-dark, .bg-brand-teal {
  background-color: var(--brand-white) !important;
  color: var(--brand-text-dark) !important;
}

.bg-gold {
  background-color: var(--brand-gold) !important;
}

.bg-green, .bg-mint {
  background-color: var(--brand-green) !important;
}

.text-gold {
  color: var(--brand-gold) !important;
}

.text-green, .text-mint {
  color: var(--brand-green) !important;
}

.border-brand-gold-subtle {
  border-color: var(--brand-gold-subtle) !important;
}

.border-gold {
  border-color: var(--brand-gold) !important;
}

.border-green, .border-mint {
  border-color: var(--brand-green) !important;
}

.shadow-gold {
  box-shadow: 0 6px 20px rgba(221, 190, 13, 0.35) !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.micro-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.max-w-500 {
  max-width: 500px;
}

.max-w-480 {
  max-width: 480px;
}

.tracking-wider {
  letter-spacing: 0.08em;
}

/* SEARCH BAR PLACEHOLDER LIGHT GREY */
#searchInput::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

#searchInput::-webkit-input-placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

#searchInput::-moz-placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

#searchInput:-ms-input-placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* PROMINENT MOBILE SEARCH BAR ENHANCEMENT */
@media (max-width: 991px) {
  .search-bar-wrapper {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .search-bar-wrapper .input-group {
    min-height: 48px;
    border-width: 1.5px !important;
    border-color: var(--brand-gold) !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15) !important;
  }
  #searchInput {
    font-size: 1rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }
  .search-bar-wrapper .input-group-text {
    font-size: 1.25rem !important;
    padding-left: 1rem !important;
  }
}

/* Top Announcement Bar */
.announcement-bar-brand {
  background: var(--brand-gold);
  color: #0F172A;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Navbar */
.navbar-brand-header {
  background: #FFFFFF;
  border-bottom: 2px solid var(--brand-gold);
}

.brand-hero-logo {
  max-height: 75px;
}

.brand-nav-logo {
  max-height: 38px;
}

.brand-tagline {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--brand-text-muted);
  font-weight: 500;
}

/* Buttons */
.btn-gold {
  background-color: var(--brand-gold) !important;
  color: #0F172A !important;
  border: none;
  font-weight: 700;
  transition: all 0.25s ease;
}

.btn-gold:hover, .btn-gold:focus {
  background-color: var(--brand-gold-hover) !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

.btn-green, .btn-mint {
  background-color: var(--brand-green) !important;
  color: #FFFFFF !important;
  border: none;
  font-weight: 700;
  transition: all 0.25s ease;
}

.btn-green:hover, .btn-green:focus, .btn-mint:hover, .btn-mint:focus {
  background-color: var(--brand-green-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.btn-outline-gold {
  border: 1px solid var(--brand-gold) !important;
  color: #0F172A !important;
  background-color: #FFFFFF !important;
  font-weight: 700;
}

.btn-outline-gold:hover {
  background-color: var(--brand-gold) !important;
  color: #0F172A !important;
}

/* Custom Range Slider */
.custom-range-gold::-webkit-slider-thumb {
  background: var(--brand-gold);
}

/* Product Cards */
.samawa-card {
  background: #FFFFFF;
  border: 1px solid var(--brand-gold-subtle);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.samawa-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand-gold);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(221, 190, 13, 0.3);
}

.card-title-samawa {
  font-family: var(--font-ibm);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--brand-text-dark);
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}

/* Product Card Quantity Stepper Controls */
.card-qty-stepper {
  display: flex;
  align-items: center;
  background: #F8FAFC;
  border: 1px solid var(--brand-gold-subtle);
  border-radius: 50rem;
  padding: 2px;
}

.card-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--brand-gold);
  color: #0F172A;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-qty-btn:hover {
  background: #0F172A;
  color: var(--brand-gold);
}

.card-qty-val {
  font-weight: 700;
  font-size: 0.88rem;
  min-width: 24px;
  text-align: center;
  color: var(--brand-text-dark);
}

/* Price Styling */
.price-current-samawa {
  color: #0F172A;
  font-weight: 700;
  font-size: 1.1rem;
}

.price-original-samawa {
  color: #94A3B8;
  text-decoration: line-through;
  font-size: 0.8rem;
  margin-left: 0.4rem;
}

/* Add to Basket Button */
.btn-add-basket-samawa {
  background-color: var(--brand-gold);
  color: #0F172A;
  border: none;
  border-radius: 50rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  transition: all 0.25s ease;
}

.btn-add-basket-samawa:hover {
  background-color: var(--brand-green);
  color: #FFFFFF;
  transform: scale(1.02);
}

/* Bottle Fallback Graphics */
.bottle-visual-samawa {
  width: 90px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: transform 0.3s ease;
}

.samawa-card:hover .bottle-visual-samawa {
  transform: scale(1.06);
}

.bottle-cap-samawa {
  width: 26px;
  height: 20px;
  background: linear-gradient(135deg, var(--brand-gold), #9A7B1C);
  border-radius: 4px 4px 2px 2px;
  margin-bottom: 2px;
}

.bottle-body-samawa {
  width: 75px;
  height: 95px;
  background: linear-gradient(145deg, rgba(221,190,13,0.1), rgba(16,185,129,0.05));
  border: 1px solid var(--brand-gold-subtle);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottle-label-samawa {
  width: 55px;
  padding: 3px;
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid var(--brand-gold-subtle);
  font-family: var(--font-ibm);
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

/* STICKY LOWER BASKET BANNER */
.sticky-basket-banner-brand {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: var(--brand-gold);
  border-top: 2px solid #0F172A;
  padding: 0.85rem 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-basket-banner-brand.active {
  transform: translateY(0);
}

.basket-icon-circle-gold {
  width: 44px;
  height: 44px;
  background: #0F172A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--brand-gold);
}