/* =========================================================================
   hero-zip.css — THE canonical Power Texas hero ZIP + CTA control.

   The one definition of the hero ZIP input + "Compare Plans" button. Extracted
   verbatim from the homepage hero's ZIP control (formerly `.home-page
   .home-zip*` in home.css) and un-scoped to `.home-zip*` so the SAME control
   can render on any page. Loaded by every page that renders the control
   (index / about-us / contact-us / texas-electricity-rates), driven by the
   shared HomeCtaZipForm component (components/HomeCta.jsx). There is no per-page
   copy of these values.

   Self-contained: the homepage's brand-red tokens are declared locally on
   `.home-zip` (identical values to the homepage's --h-red-* tokens) and the two
   homepage-scoped type tokens are resolved to their literal values, so the
   control renders identically off the `.home-page` scope. Genuinely global
   tokens (--radius-*, --font-sans, --dur-*, --ease-*) come from
   colors_and_type.css, which every page already loads.

   Behaviour: mobile = stacked (input pill + full-width button); desktop
   (>=1024px) = combined single white pill with the button inline — exactly the
   homepage responsive behaviour.
   ========================================================================= */
.home-zip {
  --h-red-1:    #C9253E;
  --h-red-2:    #A61E33;
  --h-red-hi-1: #D42A44;
  --h-red-hi-2: #B8223A;
  width: 100%; max-width: 272px;
}
@media (min-width: 1024px) { .home-zip { max-width: 460px; } }

.home-zip__form { width: 100%; }
.home-zip__row {
  display: flex; flex-direction: column; gap: 10px;
  background: transparent; border: none; box-shadow: none; padding: 0;
}
/* The white input pill */
.home-zip__field {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.8); padding: 0 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.08);
  transition: box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard);
}
.home-zip__row.is-focused .home-zip__field { border-color: #D7E5FF; box-shadow: 0 0 0 2px rgba(215,229,255,0.35), 0 6px 24px rgba(0,0,0,0.08); }
.home-zip__row.is-error .home-zip__field { border-color: var(--h-red-1); box-shadow: 0 0 0 2px rgba(200,16,46,0.15), 0 6px 24px rgba(0,0,0,0.08); }
.home-zip__pin { color: #9CA3AF; flex-shrink: 0; display: inline-flex; }
.home-zip__row.is-focused .home-zip__pin { color: #6B9AE8; }
.home-zip__input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  padding: 14px 0; color: #102A56;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.2;
}
.home-zip__input::placeholder { color: #9CA3AF; }
.home-zip__check { color: #22C55E; flex-shrink: 0; display: inline-flex; }

.home-zip__btn {
  width: 100%; height: 44px;
  border: none; cursor: pointer; border-radius: var(--radius-lg);
  color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: 0.01em;
  background: linear-gradient(to bottom, var(--h-red-1), var(--h-red-2));
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(166,30,51,0.18);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: box-shadow var(--dur-med) var(--ease-standard), background var(--dur-med) var(--ease-standard);
}
.home-zip__btn:hover { background: linear-gradient(to bottom, var(--h-red-hi-1), var(--h-red-hi-2)); box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 6px 16px rgba(166,30,51,0.22); }
.home-zip__btn:disabled { cursor: not-allowed; opacity: 0.85; }
.home-zip__btn .spin { animation: home-spin 0.8s linear infinite; }
@keyframes home-spin { to { transform: rotate(360deg); } }

.home-zip__err { color: #FF9DA8; font-size: 13px; margin: 4px 0 0; }

/* Secondary "Shop Business Energy Plans →" link beneath the inline hero ZIP
   control. Same visual treatment as the homepage hero's .home-hero__biz link
   (white, 15px/500, no underline, hover underline, secondary to the red CTA),
   but left-aligned to follow this hero's left-aligned text column. */
.hs--solo .home-hero__biz {
  display: inline-block; margin-top: 20px;
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.hs--solo .home-hero__biz:hover { text-decoration: underline; }

@media (min-width: 1024px) {
  /* Combine field + button into one white pill */
  .home-zip__row {
    flex-direction: row; align-items: center; gap: 0;
    background: #fff; border: 1px solid rgba(255,255,255,0.8); padding: 7px;
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.08), 0 16px 48px -8px rgba(0,0,0,0.12);
    transition: box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard);
  }
  .home-zip__field {
    flex: 1; min-width: 0; background: transparent; border: 1px solid transparent;
    box-shadow: none; padding-left: 16px; border-radius: var(--radius-lg);
  }
  .home-zip__row.is-focused { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.08), 0 16px 48px -8px rgba(0,0,0,0.12); }
  .home-zip__row.is-focused .home-zip__field { border-color: #D7E5FF; box-shadow: 0 0 0 2px rgba(215,229,255,0.20); }
  .home-zip__row.is-error .home-zip__field { border-color: var(--h-red-1); box-shadow: none; }
  .home-zip__input { padding: 10px 0; }
  .home-zip__btn { width: auto; height: 44px; padding: 0 24px; flex-shrink: 0; border-radius: var(--radius-lg); }
}