/**
 * Shared ZIP-checker UX layer (home + hiring-map).
 *
 * The base results/card styling lives inline in each page (incl. the per-page
 * overlay gradient). This file adds only the shared *interaction* states driven
 * by assets/js/zip-checker.js: input hint, button loading spinner, skeleton
 * loader, staggered card reveal, and the waitlist badge. Additive only — it
 * never restyles the cards themselves.
 */

/* --- Inline input hint (injected after the ZIP input) --- */
.zip-input-error {
  display: none;
  margin: 8px 2px 0;
  font-family: var(--body-font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.35;
  color: #d64228;
}
.zip-input-error.show {
  display: block;
}

/* --- Search/Check button loading state (JS adds .zip-search-btn on init) --- */
.zip-search-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.zip-search-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: zip-spin 0.7s linear infinite;
}
@keyframes zip-spin {
  to { transform: rotate(360deg); }
}

/* --- Loading heading (dot pulse next to "Checking availability…") --- */
.zip-eligibility .zip-dots::after {
  content: '';
  animation: zip-ellipsis 1.2s steps(4, end) infinite;
}
@keyframes zip-ellipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* --- Skeleton loader cards (injected into .zip-cards while fetching) --- */
.zip-skeleton {
  height: 343px;
  border-radius: 8px;
  background-color: #e9ebee;
  background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70% );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: zip-shimmer 1.25s ease-in-out infinite;
}
@keyframes zip-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}

/* --- Staggered card entrance (JS toggles .zip-card--reveal + sets delay) --- */
.zip-card.zip-card--reveal {
  animation: zip-card-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes zip-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   CARD VISUAL REDESIGN — overrides each page's inline card base.
   Content anchored to the bottom half over a bottom-up gradient
   scrim (photo reads through the top); rounded, with a hover lift.
   ============================================================ */

/* Align the eligibility line with the first card's left edge: constrain the
   results block to the exact 3-card row width and left-pack everything.
   Desktop/tablet only — mobile keeps its centered single-column treatment. */
@media (min-width: 721px) {
  .zip-results-inner { max-width: 982px; }   /* 3 × 298px + 2 × 44px gap */
  .zip-cards { justify-content: start; }
  .zip-eligibility { text-align: left; }
}

.zip-eligibility {
  font-size: 19px;
  line-height: 1.5;
}

.zip-card {
  height: auto;
  min-height: 366px;
  border-radius: 12px;
  padding: 24px;
  justify-content: flex-end;   /* stack content in the lower half */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.zip-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.30);
}

/* Bottom-up gradient scrim: just enough dark at the very bottom to hold the
   text, clearing quickly so most of the photo shows through untouched. */
.zip-card::before {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 20%,
    rgba(0, 0, 0, 0.12) 40%,
    rgba(0, 0, 0, 0) 58%
  );
}

.zip-card-icon {
  width: 42px;
  margin-bottom: 14px;
}
.zip-card-title {
  font-size: 22px;
  margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.zip-card-line {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.zip-card-line.pay {
  margin-top: 2px;
  font-weight: 600;
  color: #ffffff;
}
.zip-card-btn {
  margin-top: 18px;   /* override the base margin-top:auto so it groups with the text */
  align-self: flex-start;
}

/* Mobile: base padding (9px 24px) renders a 134x40px button — grow the tap target to
   clear the 44px minimum without touching the shared desktop/tablet base rule. */
@media (max-width: 768px) {
  .zip-card-btn {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* --- Not-eligible / message state: a small CTA under the message --- */
.zip-eligibility-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 22px;
  font-family: var(--body-font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: var(--orange, #BD5117);
  border: 3px solid transparent;
  border-radius: 25px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.zip-eligibility-cta:hover {
  background: transparent;
  border-color: var(--orange, #BD5117);
  color: var(--orange, #BD5117);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .zip-search-btn.is-loading::after,
  .zip-skeleton,
  .zip-card.zip-card--reveal,
  .zip-eligibility .zip-dots::after {
    animation: none;
  }
}