/* =======================
   Global Base Styles
========================== */
body {
  background-color: #151416!important;
  /* color: #eee; */
  font-family: 'Montserrat', Arial, sans-serif;
  /* background: linear-gradient(135deg, #1a1a1c 60%, #b3001b11 140%); */

}

/* =======================
   Header & Navbar
========================== */
.header {
  background: linear-gradient(90deg, #111 60%, #b3001b 100%) !important;
  box-shadow: 0 2px 18px #90000033;
}
.navbar-brand img {
  filter: drop-shadow(2px 4px 8px #b3001b77);
}
.nav-link {
  color: #fff !important;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color 0.2s;
}
.nav-link:hover, .nav-link.active {
  color: #ff0033 !important;
  text-shadow: 0 2px 10px #b3001b99;
}
.navbar-icon-link {
  color: #fff !important;
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  position: relative;
}
.navbar-icon-link:hover {
  color: #ff0033 !important;
  transform: scale(1.12);
}
.header-badge {
  background: #ff0033 !important;
  color: #fff !important;
  font-weight: bold;
  font-size: .7rem;
  border: 1px solid #b3001b;
  position: absolute;
  top: -4px; right: -15px;
  min-width: 22px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 2px 6px;
}

/* =======================
   Dropdown Menu
========================== */
.dropdown-menu {
  background: #161618;
  border: 1.5px solid #b3001b;
  color: #fff;
}
.dropdown-menu .btn-outline-dark, .dropdown-menu .btn-dark {
  border-color: #b3001b !important;
  color: #ff0033 !important;
  background: transparent;
}
.dropdown-menu .btn-dark:hover,
.dropdown-menu .btn-outline-dark:hover {
  background: #b3001b !important;
  color: #fff !important;
}

/* =======================
   Buttons & Utility
========================== */
.btn-outline-dark, .btn-outline-red, .shop-btn-outline {
  border: 2px solid #ff0033 !important;
  color: #ff0033 !important;
  background: transparent !important;
  font-weight: 700;
  border-radius: .6rem;
  transition: background .2s, color .2s, border .2s;
}
.btn-outline-dark:hover, .btn-outline-red:hover, .shop-btn-outline:hover {
  background: #ff0033 !important;
  color: #fff !important;
  border-color: #b3001b !important;
}
.btn-red, .pv-cart {
  background: linear-gradient(90deg, #ff0033, #be1251 65%);
  color: #fff !important;
  border: none;
  border-radius: .67rem;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 1.5px 14px #b3001b31;
  transition: background 0.2s;
}
.btn-red:hover, .btn-red:focus, .pv-cart:hover, .pv-cart:focus {
  background: #b3001b !important;
  color: #fff !important;
}

/* =======================
   Hero Section
========================== */
.hero {
  background: linear-gradient(135deg, #b3001b 0%, #121213 100%);
  color: #fff;
  padding: 5rem 0 3rem 0;
  box-shadow: 0 4px 32px #b3001b55;
}
.hero .hero-heading {
  color: #ff0033;
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-shadow: 0 1px 18px #b3001b60;
}
.hero .lead {
  color: #fff !important;
  opacity: 0.88;
  font-size: 1.25rem;
}
.display-5.fw-bold {
  color: #ff0033;
  text-shadow: 0 2px 14px #b3001b33;
}

/* ========================
   Product Card/Grid Styles
=========================== */
.card.product-card {
  background: #19181b;
  color: #fff;
  border: 1.6px solid #b3001b25;
  border-radius: 1.1rem;
  transition: transform .26s, box-shadow .28s, border-color .22s;
  box-shadow: 0 4px 26px #b3001b25;
  animation: fadeInUp 0.65s cubic-bezier(.25,.82,.55,1.5) forwards;
}
.card.product-card:hover {
  box-shadow: 0 8px 38px #b3001b75;
  border-color: #ff0033;
  transform: translateY(-7px) scale(1.018);
}
.product-image {
  border-radius: 1rem;
  overflow: hidden;
  background: #161616;
  min-height: 365px;
  max-height: 405px;
  position: relative;
}
.product-image img {
  border-radius: 1rem;
  transition: transform .41s;
  width: 100%;
  height: 495px;
  object-fit: cover;
}
.product-image:hover img {
  transform: scale(1.09);
  filter: brightness(1.12) saturate(1.10);
}

/* Wishlist Icon */
.wishlist-icon {
  position: absolute;
  top: 10px; right: 10px; z-index: 8;
  background: #18181c;
  border: 2px solid #b3001b70;
  border-radius: 50%;
  padding: 7px 8px;
  font-size: 1.2rem;
  color: #fff !important;
  height: 40px; width: 40px;
  transition: background 0.2s, color 0.1s, border 0.1s;
}
.wishlist-icon.active, .wishlist-icon:focus {
  color: #ff0033 !important;
  border: 2px solid #ff0033;
}
.wishlist-icon:hover {
  background: #ff0033 !important;
  color: #fff !important;
  border: 2px solid #fff;
  transform: scale(1.14);
}

.badge.bg-danger, .badge.bg-danger.position-absolute {
  background: #b3001b!important;
  color: #fff!important;
  font-size: .89rem;
  border: 1px solid #ff0033;
  box-shadow: 0 1px 6px #b3001b44;
}

h6.text-truncate.mb-0, .product-name {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: .01em;
}
.text-danger.fw-bold {
  color: #ff0033!important;
  font-weight: 800!important;
}
.text-decoration-line-through {
  color: #b3001b!important; opacity: 0.7;
}
.btn-add-cart {
  border: none;
  background: #ff0033!important;
  color: #fff!important;
  padding: 8px 18px;
  font-size: 0.97rem;
  font-weight: 800;
  border-radius: .55rem;
  box-shadow: 0 1px 4px #b3001b25;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background 0.18s, color 0.18s, box-shadow 0.15s;
  outline: none;
}
.btn-add-cart:hover, .btn-add-cart:focus {
  background: #b3001b!important;
  color: #fff!important;
}
.btn-add-cart.btn-remove {
  background: #222 !important;
  color: #ff0033 !important;
  border: 2px solid #ff0033;
}
.btn-add-cart.btn-remove:hover {
  background: #ff0033 !important;
  color: #fff!important;
}
.fa-star.text-warning { color: #ffc107!important; }
@keyframes fadeInUp {
  0% {opacity:0; transform:translateY(30px);}
  100%{opacity:1; transform:translateY(0);}
}


/* =======================
   Product View Page
========================== */
.product-view-section {
  background: #18181c;
  color: #fff;
  min-height: 100vh;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.product-view-card { border-radius: 1.4rem; box-shadow: 0 8px 48px #b3001b55; background: #19181b; padding: 2rem 1.2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .product-view-card { padding: 2.5rem 3rem; } }
.product-view-img { border-radius: 1.1rem; background: #151316; box-shadow: 0 2px 18px #b3001b33; max-height: 380px; max-width: 100%; width: 360px; object-fit: cover; display: block; margin-bottom: 1.3rem; }
.pv-badge { background: #b3001b; color: #fff; font-weight: bold; border-radius: .7em; padding: 5px 12px; font-size: 1.1rem; margin-bottom: 1.1rem; display: inline-block; }
.pv-title { color: #ff0033; font-size: 2rem; font-weight: bold; margin-bottom: .75rem; }
.pv-price { color: #ff0033; font-size: 1.35rem; font-weight: bold; margin-right: .7em; }
.pv-old { color: #b3001b; text-decoration: line-through; font-size: 1rem; margin-left: .3em; }
.pv-wishlist, .pv-cart { min-width: 160px; font-weight: 700; font-size: 1.08rem; padding: .66em 1.5em; border-radius: .7rem; transition: background .2s; }
.pv-wishlist { background: #222; color: #fff; border: 2px solid #ff0033; }
.pv-wishlist.active, .pv-wishlist:hover { background: #ff0033; color: #fff!important; }
.pv-cart { background: #ff0033; color: #fff; border: none; }
.pv-cart[disabled], .pv-cart.added { background: #222; color: #ff0033 !important; border: 2px solid #ff0033; opacity:1; }
.pv-desc { color: #eee; font-size: 1.12rem; margin-top: 1.5rem; }
.review-card { background:#232226; border-radius: .75rem; }
.btn-remove-cart-icon { background:#222; border:2px solid #ff0033; color:#ff0033; border-radius:50%; padding:0.3em 0.5em; margin-left:6px; font-size:1.13rem; transition:background 0.12s, color 0.12s, border 0.12s;}
.btn-remove-cart-icon:hover { background:#ff0033;color:#fff; border-color:#fff;}

/* =======================
   Shop Filters/Sidebar
========================== */
.filters-sidebar {
  background: #19191b; color: #fff; border-radius: 1.2rem;
  padding: 2rem 1.5rem; margin-bottom: 2rem; box-shadow: 0 4px 18px #b3001b44;
}
.filters-sidebar h5 { color: #ff0033; letter-spacing: .02em; font-weight: bold; }
.shop-select, .form-range, .form-check-input { background: #222; color: #fff; border: 1.5px solid #b3001b; }
.shop-product-grid { background: #131214; border-radius:1.1rem;}
@media (max-width: 900px) { 
  .shop-product-grid, .filters-sidebar {border-radius:0;} 
}

/* =======================
   Contact Page
========================== */
.contact-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(135deg, #1a1a1c 60%, #b3001b11 140%);
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}
.contact-card {
  background: #19181b;
  color: #fff;
  border-radius: 1.2rem;
  max-width: 510px; width: 98vw;
  margin: 0 auto 1.7rem auto;
  box-shadow: 0 8px 44px #b3001b77, 0 1.5px 0 #ff0033;
  padding: 2.3rem 2.5rem;
  position: relative;
}
@media (max-width: 600px) {
  .contact-card { padding: 1rem .7rem; }
}
.contact-card h2 {
  color: #ff0033 !important;
  font-weight: 900;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 14px #b3001b22;
  letter-spacing: .04em;
  font-size: 2.1rem;
  text-align: center;
}
.form-label {
  color: #ddd;
  font-size: 1.04rem;
  font-weight: 500;
}
input, textarea {
  background: #1b1a1d;
  color: #fff;
  border: 1.4px solid #b3001b33;
  border-radius: .7rem;
  font-size: 1.09rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: .5rem;
}
input:focus, textarea:focus {
  border-color: #ff0033;
  box-shadow: 0 0 7px #ff0033aa;
}
.form-check-input:checked {
  background-color: #ff0033;
  border-color: #b3001b;
}
.err-box, .success-box {
  border-radius: .57rem;
  padding: .88em 1em;
  margin-bottom: 1em;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}
.err-box { background: #441e24; color: #ff9488; border: 1.2px solid #ff0033bb;}
.success-box { background: #19311c; color: #79eeb9; border: 1.2px solid #37ffb08a;}
.contact-map {
  border:2.5px solid #b3001b;
  border-radius:1rem;
  margin:1.7rem auto .3rem auto !important;
  box-shadow: 0 4px 26px #b3001b22;
  display:block;
  width:100%; max-width:510px; height:220px;
}
@media (max-width:600px){ .contact-map {height:140px;} }

/* Contact Info Cards */
.contact-info-container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 2rem auto;
  justify-content: center;
}
.contact-info-card {
  background: #18181c;
  color: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 32px #b3001b66;
  padding: 1.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  flex: 1 1 280px;
  min-width: 250px;
}
.contact-info-card i {
  color: #ff0033;
  font-size: 1.5rem;
  min-width: 2.2em;
}
.contact-info-card a,
.contact-info-card address {
  color: #ff0033;
  font-weight: 600;
  text-decoration: none;
}
.contact-info-card a:hover {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .contact-info-container { flex-direction: column; max-width: 90vw; }
}

.socials-list {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-bottom: .6rem;
}
.socials-list a {
  background: #222;
  color: #ff0033;
  border-radius: 50%;
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.12rem;
  transition: background 0.2s, color 0.18s;
  box-shadow: 0 1px 8px #b3001b27;
}
.socials-list a:hover {
  background: #ff0033;
  color: #fff;
}

.form-check-label a {
  color: #ff0033;
  text-decoration: underline;
}
.contact-card form { margin-top: 1.6rem; }
.contact-card button[type="submit"] { font-size: 1.17em; letter-spacing: .03em; }

/* =======================
   Wishlist Page
========================== */
.wishlist-section {
  background: #18181c;
  min-height: 100vh;
  padding-top: 2.5rem; padding-bottom: 2.5rem;
}
.wishlist-card {
  border-radius: 1.2rem;
  box-shadow: 0 4px 32px #b3001b33;
  background: #19181b;
  margin-bottom: 1.5rem;
  padding: 2rem 1.3rem;
  color: #fff;
}
.wishlist-heading {
  color: #ff0033;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 2rem;
}
@media (max-width: 900px) {
  .wishlist-card { padding: 1rem 0.2rem; border-radius: 0.6rem; }
}


/* Slider track and connect (active range) styling */
#price-slider .noUi-connect {
  background: linear-gradient(90deg, #ff0033 0%, #b3001b 100%);
  box-shadow: 0 1px 10px #b3001b29;
}

#price-slider .noUi-base {
  background: #1a1a1c;
  border-radius: 8px;
}

#price-slider .noUi-target {
  border-radius: 8px;
  background: #232226 !important;
  box-shadow: 0 2px 18px #b3001b15;
  height: 8px;
}

/* Handle (the knobs) styling */
#price-slider .noUi-handle {
  border: 2px solid #ff0033;
  background: #fff;
  box-shadow: 0 2px 12px #ff003333;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  top: -7px;
  transition: background 0.16s, border 0.16s;
}
#price-slider .noUi-handle:after, #price-slider .noUi-handle:before {
  display: none; /* Hide default lines */
}
#price-slider .noUi-handle:hover, #price-slider .noUi-handle.noUi-active {
  background: #ff0033;
  border-color: #a60026;
}

/* Tooltip styling */
#price-slider .noUi-tooltip {
  background: #222024;
  color: #ff0033;
  border: 1.4px solid #ff0033;
  font-weight: bold;
  border-radius: 0.6em;
  box-shadow: 0 1.5px 8px #b3001b40;
  padding: 0.38em 0.9em;
  font-size: .96rem;
  bottom: 130%; /* makes tooltip float above handle */
  transform: translateY(-3px);
}

/* Remove unwanted inner borders/glows */
#price-slider .noUi-target, #price-slider .noUi-base {
  box-shadow: none;
  border: none;
}

#price-slider .noUi-horizontal .noUi-handle {
  cursor: pointer;
}

/* Responsive tweaks */
@media (max-width: 500px) {
  #price-slider .noUi-tooltip {
    font-size: 0.92rem;
    padding: 0.28em 0.6em;
  }
}
