/* ============================================================
   coverage-checker.css — Service-area coverage checker widget
   Depends on site.css design tokens (--ink, --gold, --accent, ...)
   Markup is injected by coverage-checker.js into any
   <div class="coverage-checker" data-variant="primary|compact">
   ============================================================ */

.coverage-checker {
  width: 100%; max-width: 600px; margin: 0 auto;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: clamp(28px, 4vw, 44px); text-align: center;
}
.coverage-checker--compact { padding: clamp(24px, 3vw, 36px); }

/* State wrapper: fade transitions */
.cc-state { display: none; opacity: 0; transition: opacity 0.25s ease; }
.cc-state.is-active { display: block; opacity: 1; }

.cc-heading { font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; line-height: 1.15; }
.cc-sub { font-size: 16px; color: var(--ink-2); margin-bottom: 6px; line-height: 1.5; }
.cc-sub-2 { font-size: 15px; color: var(--muted); margin-bottom: 24px; }

/* Input row */
.cc-form { display: flex; gap: 8px; margin: 24px 0 16px; }
@media (max-width: 540px) { .cc-form { flex-direction: column; } }
.cc-input { flex: 1 1 auto; font-family: inherit; font-size: 16px; color: var(--ink); padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); transition: border-color 0.15s ease; width: 100%; }
.cc-input::placeholder { color: var(--muted); }
.cc-input:focus { outline: none; border-color: var(--ink); }

/* Buttons — mirror site.css .btn family */
.cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 15px; font-weight: 500; padding: 14px 22px; border-radius: 999px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.cc-btn-ink { background: var(--ink); color: #fff; }
.cc-btn-ink:hover { background: var(--accent); }
.cc-btn-gold { background: var(--gold); color: #fff; font-size: 16px; padding: 16px 28px; }
.cc-btn-gold:hover { background: #b58c40; }
.cc-btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.cc-btn-outline:hover { background: var(--ink); color: #fff; }
.cc-btn:active { transform: translateY(1px); }
.cc-btn-block { width: 100%; }

/* Trust badges */
.cc-badges { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; font-size: 13px; color: var(--muted); font-weight: 500; }
.cc-badges span { display: inline-flex; align-items: center; gap: 5px; }
.cc-badges .cc-tick { color: var(--gold); }

/* Inline error */
.cc-error { display: none; color: #b4232a; font-size: 13.5px; margin-top: 4px; text-align: left; }
.cc-error.is-visible { display: block; }
.cc-input.has-error { border-color: #b4232a; }

/* Success state */
.cc-check { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: rgba(46,160,87,0.12); display: flex; align-items: center; justify-content: center; }
.cc-check svg { width: 30px; height: 30px; stroke: #2ea057; fill: none; stroke-width: 2.5; }
.cc-cta-stack { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 16px; align-items: stretch; }
.cc-call-line { font-size: 14px; color: var(--muted); }
.cc-call-line a { color: var(--ink); font-weight: 500; }
.cc-call-line a:hover { color: var(--accent); }

/* Out-of-area state */
.cc-reset-link { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 1px dotted currentColor; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; padding: 0 0 1px; }
.cc-reset-link:hover { color: var(--ink); }

/* Confirmation */
.cc-confirm { font-size: 17px; color: var(--ink-2); padding: 12px 0; }
.cc-confirm strong { color: var(--ink); font-weight: 600; }

/* Google Places dropdown */
.pac-container { z-index: 1200; font-family: 'Geist', sans-serif; border-radius: 4px; margin-top: 2px; }

/* Section wrappers */
.coverage-section { background: var(--bg-warm); }
.coverage-section .section-head { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 40px; }
.coverage-section--compact { padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); }