/* SecondHandMagic — muted slate blue theme.
   Loaded after bootstrap.min.css and before any area-specific stylesheet on every layout
   (Pages/Shared/_Layout.cshtml, Areas/Admin/Pages/Shared/_AdminLayout.cshtml,
   Areas/Vendor/Pages/Shared/_VendorLayout.cshtml) so the palette applies site-wide.

   Bootstrap 5.3's compiled CSS mixes two patterns: utility classes (.text-primary, .bg-primary,
   .border-primary, .page-link, .alert-primary) read live from root custom properties, but several
   component classes (.btn-primary, .btn-outline-primary, .btn-secondary, .btn-outline-secondary,
   .form-check-input:checked/:focus) bake their own hex values into locally-scoped custom properties
   at build time. A :root override alone recolors the first group but silently misses the second, so
   both are overridden explicitly below. */

:root {
  --shm-primary: #3D5A80;
  --shm-primary-hover: #35506f;
  --shm-primary-active: #2c4560;
  --shm-accent: #5C7EA6;
  --shm-accent-hover: #4f6c8f;
  --shm-accent-active: #435c7a;
  --shm-dark: #1B2A41;
  --shm-light: #EBF0F5;

  /* --- Bootstrap root variables: recolors .text-primary/.bg-primary/.border-primary/.alert-primary/
     .page-link/focus rings, which read these live. --- */
  --bs-primary: var(--shm-primary);
  --bs-primary-rgb: 61, 90, 128;
  --bs-primary-text-emphasis: #24374d;
  --bs-primary-bg-subtle: #dbe3ec;
  --bs-primary-border-subtle: #a9bccd;

  --bs-secondary: var(--shm-accent);
  --bs-secondary-rgb: 92, 126, 166;
  --bs-secondary-text-emphasis: #33455a;
  --bs-secondary-bg-subtle: #e2e8ef;
  --bs-secondary-border-subtle: #b9c7d6;

  --bs-link-color: var(--shm-primary);
  --bs-link-color-rgb: 61, 90, 128;
  --bs-link-hover-color: var(--shm-primary-hover);
  --bs-link-hover-color-rgb: 53, 80, 111;

  --bs-focus-ring-color: rgba(61, 90, 128, 0.25);

  --bs-pagination-active-bg: var(--shm-primary);
  --bs-pagination-active-border-color: var(--shm-primary);
}

/* --- Component classes with baked-in local custom properties. --- */

.btn-primary {
  --bs-btn-bg: var(--shm-primary);
  --bs-btn-border-color: var(--shm-primary);
  --bs-btn-hover-bg: var(--shm-primary-hover);
  --bs-btn-hover-border-color: var(--shm-primary-hover);
  --bs-btn-active-bg: var(--shm-primary-active);
  --bs-btn-active-border-color: var(--shm-primary-active);
  --bs-btn-focus-shadow-rgb: 61, 90, 128;
  --bs-btn-disabled-bg: var(--shm-primary);
  --bs-btn-disabled-border-color: var(--shm-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--shm-primary);
  --bs-btn-border-color: var(--shm-primary);
  --bs-btn-hover-bg: var(--shm-primary);
  --bs-btn-hover-border-color: var(--shm-primary);
  --bs-btn-active-bg: var(--shm-primary);
  --bs-btn-active-border-color: var(--shm-primary);
  --bs-btn-focus-shadow-rgb: 61, 90, 128;
  --bs-btn-disabled-color: var(--shm-primary);
  --bs-btn-disabled-border-color: var(--shm-primary);
}

.btn-secondary {
  --bs-btn-bg: var(--shm-accent);
  --bs-btn-border-color: var(--shm-accent);
  --bs-btn-hover-bg: var(--shm-accent-hover);
  --bs-btn-hover-border-color: var(--shm-accent-hover);
  --bs-btn-active-bg: var(--shm-accent-active);
  --bs-btn-active-border-color: var(--shm-accent-active);
  --bs-btn-focus-shadow-rgb: 92, 126, 166;
  --bs-btn-disabled-bg: var(--shm-accent);
  --bs-btn-disabled-border-color: var(--shm-accent);
}

.btn-outline-secondary {
  --bs-btn-color: var(--shm-accent);
  --bs-btn-border-color: var(--shm-accent);
  --bs-btn-hover-bg: var(--shm-accent);
  --bs-btn-hover-border-color: var(--shm-accent);
  --bs-btn-active-bg: var(--shm-accent);
  --bs-btn-active-border-color: var(--shm-accent);
  --bs-btn-focus-shadow-rgb: 92, 126, 166;
  --bs-btn-disabled-color: var(--shm-accent);
  --bs-btn-disabled-border-color: var(--shm-accent);
}

.form-check-input:checked {
  background-color: var(--shm-primary);
  border-color: var(--shm-primary);
}

.form-check-input:focus {
  border-color: var(--shm-accent);
  box-shadow: 0 0 0 .25rem rgba(61, 90, 128, .25);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--shm-accent);
  box-shadow: 0 0 0 .25rem rgba(61, 90, 128, .25);
}

/* --- Shared dark/light surface classes, used by all three layouts for the navbar, footer, and
   Admin sidebar so the three areas read as one consistent theme. --- */

.bg-shm-dark {
  background-color: var(--shm-dark) !important;
}

.bg-shm-light {
  background-color: var(--shm-light) !important;
}

.text-shm-accent {
  color: var(--shm-accent) !important;
}

.navbar.bg-shm-dark .navbar-brand,
.navbar.bg-shm-dark .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.navbar-brand {
  letter-spacing: .02em;
}

.navbar.bg-shm-dark .nav-link:hover,
.navbar.bg-shm-dark .nav-link:focus,
.navbar.bg-shm-dark .navbar-brand:hover {
  color: #fff;
}

footer.bg-shm-dark,
footer.bg-shm-dark a {
  color: rgba(255, 255, 255, 0.75);
}

footer.bg-shm-dark a:hover {
  color: #fff;
}

/* Admin sidebar: a tinted light-blue rail with an accent-colored active/hover state. */
.sidebar {
  background-color: var(--shm-light) !important;
}

.sidebar .nav-link {
  color: var(--shm-dark);
  border-radius: .375rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background-color: rgba(61, 90, 128, 0.12);
  color: var(--shm-primary);
}

/* --- Card polish, applied consistently across storefront, Admin, and Vendor cards. --- */
.card {
  border-radius: .5rem;
  overflow: hidden;
}

a.card:hover,
.card.card-hover:hover {
  box-shadow: 0 .5rem 1rem rgba(27, 42, 65, .12) !important;
  transform: translateY(-2px);
  transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.card {
  transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

/* Product cards: a slow image zoom on hover reads as "alive" without being distracting. */
.card .card-img-top {
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.card:hover .card-img-top {
  transform: scale(1.07);
}

/* --- Scroll-reveal: product grids fade/lift in as they enter the viewport (site.js observes
   .reveal elements and adds .is-visible; a small per-item stagger comes from the inline
   transition-delay site.js sets). Falls back to fully visible, no motion, if JS never runs or the
   visitor has reduced motion enabled. --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .card .card-img-top,
  .card:hover .card-img-top {
    transition: none;
    transform: none;
  }
}

/* --- Homepage category cards: an image tile with the category name overlaid at the bottom, so it
   reads as a destination to click through rather than another product. Reuses the .card-img-top
   hover-zoom rule above for free. --- */
.category-card-img {
  height: 160px;
  object-fit: cover;
}

.category-card-img-fallback {
  background: linear-gradient(135deg, var(--shm-dark), var(--shm-primary));
}

.category-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 42, 65, .8) 0%, rgba(27, 42, 65, 0) 60%);
  pointer-events: none;
}

.category-card-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .6rem .85rem;
  color: #fff;
  font-weight: 600;
  z-index: 2;
}