/* ClickYourDeal additions on top of the Sarab template's style.css.
   Keeps the template's classes/variables; only adds what deals content needs
   that a restaurant template didn't have (category accent colors, a photo-less
   category fallback, per-category page header, live/soon nav states, etc). */

/* Per-category accent color, set inline via style="--pill-color:#..." */
.mcat-pill {
  --pill-color: var(--primary);
  display: inline-block;
  color: var(--pill-color);
}

.mbdg.soon-off {
  background: #aaa;
}

/* Fallback for category tiles that have no live photo yet ("Soon" categories) */
.catimg-fallback {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  background: var(--light);
}

.catcard.disabled {
  cursor: default;
  opacity: 0.6;
}

.catcard.disabled:hover {
  transform: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  border-color: transparent;
}

.catsoon {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #bbb;
  background: var(--light);
  padding: 1px 8px;
  border-radius: 999px;
}

/* Nav "Soon" badge on disabled category links */
.navbar-nav .nav-link.soon-link {
  opacity: 0.55;
  pointer-events: none;
}

.navsoon {
  font-size: 0.55rem;
  vertical-align: super;
  color: var(--secondary);
}

/* Category page header (about-page-style banner instead of the full hero) */
.pagehead {
  /* background is set inline per-category (dark, tinted with that category's
     accent color) — see blend_hex() in build_site.py */
  padding: 48px 0 36px;
  text-align: center;
}

/* The generic `section { padding: 88px 0; }` base rule adds a large gap
   above the search/filter bar on category pages — trim it down since the
   pagehead above it already provides its own spacing. */
#dealsgrid {
  padding: 32px 0 88px;
}

.pagehead .slbl {
  color: var(--secondary);
}

.pagehead .stitle {
  color: #fff;
}

/* Search + filter bar on category pages */
.dealtoolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.dealsearch {
  max-width: 420px;
  margin: 0 auto 26px;
}

.dealsearch input {
  width: 100%;
}

.empty-state {
  text-align: center;
  color: #aaa;
  padding: 3rem 0;
}

/* "Get This Deal" link styled like .mpaddcart but as an <a> */
.mpaddcart[href] {
  text-decoration: none;
}

/* Gallery popup "View Deal" CTA (template's gallery popup had no CTA button) */
.gpview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 700;
}

.gpview:hover {
  background: #c01e12;
  color: #fff;
}

/* Data sources grid reuses .chcard but we drop the social row (no fake team) */
.chcard .chsoc {
  display: none;
}

.srclink {
  font-size: 0.72rem;
  color: var(--primary);
  text-decoration: none;
}

.srclink:hover {
  text-decoration: underline;
}

/* CTA band (repurposed #newsletter without a fake email-capture form) */
.ctaband-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Fallback for deal cards with no real product photo */
.mimg-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--cream2);
}

/* Sample-data warning banner on placeholder category pages */
.sample-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff6e5;
  border: 1px solid #f6a623;
  border-radius: 12px;
  padding: 18px 22px;
  margin: -30px 0 30px;
}

.sample-banner i {
  color: var(--secondary);
  font-size: 1.4rem;
  margin-top: 2px;
}

.sample-banner strong {
  display: block;
  color: var(--dark);
  margin-bottom: 4px;
}

.sample-banner p {
  margin: 0;
  color: #7a5a10;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Real logo image (replaces the icon+text lockup) */
.site-logo {
  height: 60px;
  width: auto;
  display: block;
}

/* Price display: current + original price shown together, clearly, plus a
   savings badge when both are real. Replaces the old .mprice/small pairing,
   which used a 0.72rem near-white gray for the original price — easy to miss. */
.price-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.price-now {
  font-family: "Playfair Display", serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.price-was {
  font-family: "Poppins", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: #767689;
  text-decoration: line-through;
  text-decoration-color: #b5455a;
  text-decoration-thickness: 1.5px;
  line-height: 1;
}

.price-save {
  display: inline-block;
  align-self: flex-start;
  background: var(--green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 999px;
}

/* Popup detail view: same price-block, scaled up for the bigger layout */
#mpPrice {
  margin-bottom: 14px;
}
#mpPrice .price-now {
  font-size: 2rem;
}
#mpPrice .price-was {
  font-size: 1.25rem;
}
#mpPrice .price-save {
  font-size: 0.78rem;
  padding: 3px 11px;
}