/* Brand overrides: apply True/Price/Hog colors consistently */

/* Light theme defaults */
:root,
[data-bs-theme="light"] {
  /* Brand tokens */
  --tph-green: #0CBC87; /* True (primary/CTA) */
  --tph-amber: #F7C32E; /* Price (highlight) */
  --tph-pink:  #E83E8C; /* Hog (accent/watchlist) */

  /* Map to Bootstrap vars where safe */
  --bs-primary: var(--tph-green);
  --bs-primary-rgb: 12, 188, 135;
  --bs-warning: var(--tph-amber);
  --bs-warning-rgb: 247, 195, 46;
  --bs-pink: var(--tph-pink);
  --bs-pink-rgb: 232, 62, 140;

  /* Links */
  --bs-link-color: var(--tph-green);
  --bs-link-hover-color: #0aa377; /* slightly darker green */

  /* Focus ring in brand hue */
  --bs-focus-ring-color: rgba(12, 188, 135, .25);
}

/* Dark theme tuning */
[data-bs-theme="dark"] {
  --bs-link-color: #14d3a2; /* lighter green for contrast */
  --bs-link-hover-color: #11b88d;
}

/* Link hover underline for better affordance */
a:hover { text-decoration: underline; }

/* Do not underline nav links on hover in headers */
.public-header .navbar-nav .nav-link:hover,
.public-header .navbar-nav .nav-link:focus,
.public-header .navbar-nav .nav-link.active,
.header-transparent .navbar .nav-link:hover,
.header-transparent .navbar .nav-link:focus,
.header-transparent .navbar .nav-link.active {
  text-decoration: none !important;
}

/* Index-directory header (transparent, dark navbar): use brand green on hover/active */
.header-transparent .navbar .nav-link:hover,
.header-transparent .navbar .nav-link:focus,
.header-transparent .navbar .nav-link.active {
  color: var(--tph-green) !important;
}

/* Watchlist button styling: use Pink for the default (add) state */
.watchlist-toggle.btn-outline-primary {
  --bs-btn-color: var(--tph-pink);
  --bs-btn-border-color: var(--tph-pink);
  --bs-btn-hover-bg: var(--tph-pink);
  --bs-btn-hover-border-color: var(--tph-pink);
  --bs-btn-active-bg: var(--tph-pink);
  --bs-btn-active-border-color: var(--tph-pink);
}

/* When in watchlist (yellow btn-warning), color the heart pink for brand tie-in */
.watchlist-toggle.btn-warning .fa-heart { color: var(--tph-pink) !important; }

/* Explicit fallbacks to ensure pink outline watchlist button even if theme doesn't fully honor CSS vars */
.watchlist-toggle.btn-outline-primary { color: var(--tph-pink) !important; border-color: var(--tph-pink) !important; }
.watchlist-toggle.btn-outline-primary:hover,
.watchlist-toggle.btn-outline-primary:active { background-color: var(--tph-pink) !important; border-color: var(--tph-pink) !important; color: #fff !important; }

/* Card hover links inherit brand hover color */
.card a:hover { color: var(--bs-link-hover-color); }

/* Badges for deals and favorites */
.badge-deal { background-color: var(--tph-amber); color: #212529; }
.badge-favorite { background-color: var(--tph-pink); color: #fff; }

/* Full-width savings banner inside cards */
.deal-banner {
  background-color: var(--tph-amber);
  color: #212529;
  display: block;
  width: 100%;
  text-align: center;
  border-radius: .375rem;
  padding: .25rem .5rem;
  font-weight: 600;
}

/* Primary buttons already use --bs-primary (green) via Bootstrap vars */
/* Some theme rules hardcode primary. Force green for all primary button states */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tph-green);
  --bs-btn-border-color: var(--tph-green);
  --bs-btn-hover-bg: #0aa377;
  --bs-btn-hover-border-color: #0aa377;
  --bs-btn-focus-shadow-rgb: 12, 188, 135;
  --bs-btn-active-bg: #0aa377;
  --bs-btn-active-border-color: #0aa377;
  --bs-btn-disabled-bg: var(--tph-green);
  --bs-btn-disabled-border-color: var(--tph-green);
}

/* Soft primary buttons in directory theme */
.btn-primary-soft { 
  color: var(--tph-green) !important;
  background-color: rgba(12, 188, 135, 0.15) !important;
  border-color: rgba(12, 188, 135, 0.15) !important;
}
.btn-primary-soft:hover, .btn-primary-soft:focus {
  color: var(--tph-green) !important;
  background-color: rgba(12, 188, 135, 0.22) !important;
  border-color: rgba(12, 188, 135, 0.22) !important;
}

/* Navbar brand image sizing (responsive, desktop + mobile friendly)
   Increase selector specificity to override theme defaults */
.navbar .navbar-brand .navbar-brand-item,
.navbar-brand .navbar-brand-item {
  height: 70px !important;
  width: auto;
  display: block;
  object-fit: contain;
}
@media (min-width: 576px) {
  .navbar .navbar-brand .navbar-brand-item,
  .navbar-brand .navbar-brand-item { height: 85px !important; }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-brand .navbar-brand-item { height: 85px !important; }
}
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-brand .navbar-brand-item { height: 85px !important; }
}

/* "View in shop" button: use brand amber on hover/active with dark text */
.btn-view-shop.btn-outline-secondary {
  --bs-btn-hover-bg: var(--tph-amber);
  --bs-btn-hover-border-color: var(--tph-amber);
  --bs-btn-hover-color: #212529;
  --bs-btn-active-bg: var(--tph-amber);
  --bs-btn-active-border-color: var(--tph-amber);
  --bs-btn-active-color: #212529;
  --bs-btn-focus-shadow-rgb: 247, 195, 46;
}
/* Fallback if button CSS variables are not applied */
.btn-view-shop.btn-outline-secondary:hover,
.btn-view-shop.btn-outline-secondary:active {
  background-color: var(--tph-amber) !important;
  border-color: var(--tph-amber) !important;
  color: #212529 !important;
}

/* Directory index: force Choices dropdown to open downward in the search form */
#home-search-form .choices.is-flipped .choices__list--dropdown,
#home-search-form .choices.is-flipped .choices__list[aria-expanded] {
  top: 100% !important;
  bottom: auto !important;
  margin-top: -1px !important;
  margin-bottom: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: .25rem !important;
  border-bottom-right-radius: .25rem !important;
}