/* ==========================================================================
   Dark Theme Override — JRWjr Astrophotography
   Inspired by the old "Dark Velvet" theme: dark slate-blue background,
   cyan brand accent, warm orange call-to-action accent.
   ========================================================================== */

:root {
  --bs-body-bg: #1b2129;
  --bs-body-color: #cfd2d6;
  --bs-tertiary-bg: #262c35;
  --bs-secondary-bg: #262c35;
  --bs-border-color: #383f4a;
  --bs-link-color: #4fc3e0;
  --bs-link-hover-color: #7dd6ee;
  --bs-emphasis-color: #e8eaed;
  --bs-secondary-color: #a8acb3;
}

body {
  background-color: #1b2129;
  color: #cfd2d6;
}

/* Top bar (phone / account / wishlist / cart links) */
.bg-light,
header .navbar {
  background-color: #20262e !important;
  border-color: #2f3540 !important;
}

/* Category navigation bar — base stylesheet sets both background-color AND
   a background-image gradient on #menu; must override both or the gradient
   still paints over any background-color change */
#menu {
  background-color: #262c35 !important;
  background-image: none !important;
  border-color: #383f4a !important;
}
.navbar-nav {
  background-color: transparent !important;
}

.nav-link, .navbar-nav .nav-link {
  color: #cfd2d6 !important;
}
.nav-link:hover, .navbar-nav .nav-link:hover {
  color: #4fc3e0 !important;
}

/* Search box */
#search input.form-control,
input.form-control,
textarea.form-control,
select.form-select {
  background-color: #262c35;
  border-color: #383f4a;
  color: #e8eaed;
}
input.form-control::placeholder {
  color: #7d838d;
}
#search .btn,
.btn-light {
  background-color: #d9822e;
  border-color: #d9822e;
  color: #1b2121;
}
#search .btn:hover,
.btn-light:hover {
  background-color: #c26f22;
  border-color: #c26f22;
}

/* Cards / product boxes */
.card {
  background-color: #262c35;
  border-color: #383f4a;
}
.card-header {
  background-color: #2a313b;
  border-color: #383f4a;
}
.card-title a, .card-title {
  color: #e8eaed !important;
}
.card-text {
  color: #a8acb3;
}

/* Product price */
.text-primary, .price, .card .h5 {
  color: #e0913f !important;
}

/* Buttons - primary call to action */
.btn-primary {
  background-color: #d9822e;
  border-color: #d9822e;
  color: #1b1f26;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #c26f22;
  border-color: #c26f22;
  color: #1b1f26;
}

/* Secondary/icon buttons (wishlist, compare) */
.btn-outline-secondary,
.btn-light.btn-sm {
  background-color: #2a313b;
  border-color: #383f4a;
  color: #cfd2d6;
}
.btn-outline-secondary:hover {
  background-color: #383f4a;
  color: #e8eaed;
}

/* Cart dropdown / dark button already fine, just ensure contrast */
.btn-dark, .bg-dark {
  background-color: #12161c !important;
}

/* Breadcrumbs, pagination, dropdowns */
.breadcrumb-item a { color: #4fc3e0; }
.breadcrumb-item.active { color: #a8acb3; }

.dropdown-menu {
  background-color: #262c35;
  border-color: #383f4a;
}
/* Cart mini-dropdown — base stylesheet sets a light #eee background via
   #cart .dropdown-menu specifically, which beats the generic rule above */
#cart .dropdown-menu {
  background: #262c35 !important;
}
#cart .dropdown-menu .table,
#cart .dropdown-menu td,
#cart .dropdown-menu th {
  background-color: #262c35 !important;
  color: #cfd2d6 !important;
  border-color: #383f4a !important;
}
.dropdown-item {
  color: #cfd2d6;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #383f4a;
  color: #e8eaed;
}

.page-link {
  background-color: #262c35;
  border-color: #383f4a;
  color: #cfd2d6;
}
.page-link:hover {
  background-color: #383f4a;
  color: #e8eaed;
}
.page-item.active .page-link {
  background-color: #d9822e;
  border-color: #d9822e;
}

/* Footer */
footer, .bg-dark.footer {
  background-color: #12161c;
  color: #a8acb3;
}
footer a {
  color: #cfd2d6;
}
footer a:hover {
  color: #4fc3e0;
}

/* Headings generally */
h1, h2, h3, h4, h5, h6 {
  color: #e8eaed;
}

/* Muted text */
.text-muted {
  color: #7d838d !important;
}

/* Alerts (keep readable on dark bg) */
.alert-success {
  background-color: #1e3327;
  border-color: #2c4d38;
  color: #9fdcb3;
}
.alert-danger {
  background-color: #3a1f22;
  border-color: #58292e;
  color: #f0a8ae;
}

/* Homepage slideshow carousel — base stylesheet hardcodes a white border */
.carousel {
  border: 4px solid #383f4a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Product cards use their own dedicated CSS variables (--bs-card-border-color,
   --bs-card-bg), separate from the general --bs-border-color/--bs-body-bg we
   already overrode, so they need their own fix */
.card {
  --bs-card-border-color: #383f4a !important;
  --bs-card-bg: #262c35 !important;
  border-color: #383f4a !important;
}

/* Product card action buttons (cart/wishlist/compare) — currently using
   the same subtle dark styling as other secondary buttons, but old site
   treated these as a uniform orange strip like the primary CTA */
.card .btn-outline-secondary,
.card-footer .btn-outline-secondary,
.card-footer .btn-light {
  background-color: #d9822e !important;
  border-color: #d9822e !important;
  color: #1b1f26 !important;
}
.card .btn-outline-secondary:hover,
.card-footer .btn-outline-secondary:hover,
.card-footer .btn-light:hover {
  background-color: #c26f22 !important;
  border-color: #c26f22 !important;
}

/* Product card action buttons (cart/wishlist/compare) — these are plain
   unstyled <button> elements wrapped in a <div class="button">, not
   Bootstrap btn classes at all, so none of the earlier button rules
   ever applied to them */
.card .button button,
.button button {
  background-color: #d9822e !important;
  border-color: #d9822e !important;
  color: #1b1f26 !important;
  border-width: 1px;
  border-style: solid;
}
.card .button button:hover,
.button button:hover {
  background-color: #c26f22 !important;
  border-color: #c26f22 !important;
}

/* Product grid cards use OpenCart's own .product-thumb class (not Bootstrap
   .card at all), with a hardcoded light gray border */
.product-thumb {
  border-color: #383f4a !important;
}

/* Product card action button icons — white for better contrast/match with
   old site, instead of the near-black we used initially */
.product-thumb .button button {
  color: #ffffff !important;
}
.product-thumb .button button:hover {
  color: #ffffff !important;
}

/* Breadcrumb — base stylesheet bakes a white text-shadow into every item,
   which creates an odd glow/emboss effect against our dark background */
.breadcrumb > li.breadcrumb-item {
  text-shadow: none !important;
}

/* Description/Reviews tabs — Bootstrap's default active-tab state uses a
   white background, never overridden for dark mode */
.nav-tabs .nav-link {
  color: #cfd2d6;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: #e8eaed !important;
  background-color: #262c35 !important;
  border-color: #383f4a #383f4a #262c35 !important;
}
.nav-tabs {
  border-bottom-color: #383f4a !important;
}

/* .btn-light icons — used by header search button AND product-page
   wishlist/compare buttons; was still set to dark text/icon color from
   an earlier fix, switching to white for consistency with the grid buttons */
.btn-light {
  color: #ffffff !important;
}

/* .btn-primary (Add to Cart, Product Compare, etc.) — switching to white
   text/icons for consistency with the other orange CTA buttons */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  color: #ffffff !important;
}

/* Carousel prev/next arrows and indicator dots — Bootstrap defaults these
   dark, meant for light backgrounds, so they're nearly invisible on ours */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
.carousel-control-prev,
.carousel-control-next {
  opacity: 0.8;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}
.carousel-indicators [data-bs-target] {
  background-color: #d9822e !important;
  opacity: 0.5;
}
.carousel-indicators .active {
  opacity: 1 !important;
}

/* Carousel prev/next arrows actually use Font Awesome icons (fa-chevron-left/
   right), not Bootstrap's default SVG icon classes — the earlier filter fix
   targeted the wrong element entirely */
.carousel-control-prev,
.carousel-control-next {
  color: #ffffff !important;
  font-size: 1.5rem;
  opacity: 0.8;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

/* Footer divider <hr> — defaults to browser's light gray/white */
footer hr {
  border-color: #383f4a !important;
  opacity: 1;
}

/* Footer top border — base stylesheet sets a light gray border-top
   separately from the main border declaration, overriding just that edge */
footer {
  border-top-color: #383f4a !important;
}