/* ============================================================
   MilkADeal homepage polish — 2026-06
   Apply: append to public/css/customize/home.css (or keep as a
   separate file and add one <link> after home.css), then bump
   the css version query (?v=) so Cloudflare/browsers re-fetch.
   Scope: homepage only. All selectors verified against
   home_v2.blade.php + includes/user/search.blade.php.
   ============================================================ */

/* ---- 1. Store cards: clickable affordance (hover lift) ---- */
.section-cta .scta-store a {
  display: block;
  text-decoration: none;
}
.section-cta .scta-stores .scta-store-details {
  border-radius: 10px;
  padding: 8px 6px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.section-cta .scta-store a:hover .scta-store-details,
.section-cta .scta-store a:focus-visible .scta-store-details {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}
.section-cta .scta-store a:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
  border-radius: 12px;
}

/* ---- 2. Equal-height rate rows (kills the ragged grid when
        "Up to 0.7% Cashback" wraps to two lines) ---- */
.section-cta .scta-stores .scta-store-details > .text-center {
  min-height: 2.6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- 3. Rate emphasis: the % is the decision-driver ----
   weight (not size) for punch — a size bump wraps the text in
   these narrow columns (caught on dev, 2026-06-10). */
.section-cta .scta-stores .scta-store-details b {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---- 4. PROMO badge: bigger target, gentle pop on hover ----
   z-index keeps it above the tile when the hover transform creates
   a new stacking context (badge-covered-on-hover bug). */
.section-cta .scta-stores .scta-promo {
  width: 30px;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
  transition: transform .18s ease;
}
.section-cta .scta-store a:hover .scta-promo {
  transform: scale(1.12) rotate(-4deg);
}

/* ---- 5. MAD UPSIZE pill: crisper, prouder ---- */
.section-cta .scta-stores .scta-store-upsize {
  padding: 1px 10px;
  letter-spacing: .05em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

/* ---- 6. "Show All Stores": text link -> real button ----
   The legacy .scta-show is itself a grey 40px bar (home.css:287) —
   neutralize it so only the pill shows, not a pill-on-a-bar. */
.section-cta .scta-show,
.section-cta .scta-show:hover,
.section-cta .scta-show:active,
.section-cta .scta-show:focus {
  background-color: transparent;
  height: auto;
}
.section-cta .scta-show a {
  text-decoration: none;
}
.section-cta .scta-show a > div {
  line-height: 1.4;
}
.section-cta .scta-show a div {
  display: inline-block;
  background: #000;
  color: #FFE70D;
  padding: 11px 34px;
  border-radius: 26px;
  letter-spacing: .03em;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.section-cta .scta-show a:hover div,
.section-cta .scta-show a:focus-visible div {
  background: #FFE70D;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* ---- 7. Search: visible focus state (primary action) ---- */
.search-input-wrap .search-input {
  transition: box-shadow .15s ease, background-color .15s ease;
}
.search-input-wrap .search-input:focus {
  background-color: #fff;
  box-shadow: 0 0 0 3px #FFE70D;
  outline: none;
}
.search-input-wrap .search-input-btn {
  transition: transform .15s ease;
}
.search-input-wrap form:focus-within .search-input-btn {
  transform: scale(1.1);
}

/* ---- 8. Respect users who opt out of motion ---- */
@media (prefers-reduced-motion: reduce) {
  .section-cta .scta-stores .scta-store-details,
  .section-cta .scta-stores .scta-promo,
  .section-cta .scta-show a div,
  .search-input-wrap .search-input,
  .search-input-wrap .search-input-btn {
    transition: none;
  }
  .section-cta .scta-store a:hover .scta-store-details {
    transform: none;
  }
}