/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 04 2026 | 11:10:01 */
/* ============================================================================
   COVERAGE CHECKER — coverage-checker.css
   ----------------------------------------------------------------------------
   Structural + state styling for the coverage checker component.

   DESIGN PRINCIPLES
   - Card and heading (h2) styling is deliberately NOT included: style those
     in Elementor per project.
   - Every colour is a CSS custom property (variable) with a fallback, so the
     component inherits from your WordPress / Elementor global styles wherever
     possible and can be re-skinned per site WITHOUT editing this file.
   - Selectors are kept to single-class specificity so any rule you add in
     Elementor (Site Settings > Custom CSS, or a widget's Custom CSS) will
     override this file easily.

   HOW INHERITANCE WORKS
   The accent colour chain is:
       your override  ->  Elementor Global Accent  ->  green fallback
   i.e.  --coverage-accent: var(--e-global-color-accent, #16b700);
   Elementor exposes its Global Colors as CSS variables on every page:
       --e-global-color-primary / -secondary / -text / -accent
   So by default the checker automatically picks up each site's Accent
   colour. To force a different colour on one site, add to Elementor
   Custom CSS:
       .coverage-checker { --coverage-accent: #0055aa; }
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════
   1. VARIABLES — the only section you normally need to override per site
   ════════════════════════════════════════════════════════════════════════ */
.coverage-checker {
  /* Main brand/accent colour: inherits Elementor's Global Accent colour,
     falls back to the original green if the site has none. */
  --coverage-accent:          var(--e-global-color-accent, #16b700);
  --coverage-accent-contrast: #ffffff;   /* text colour on accent buttons   */

  /* Form input */
  --coverage-input-border:       #e2e2e2;
  --coverage-input-border-focus: var(--coverage-accent);
  --coverage-radius:             8px;    /* corner rounding, inputs/buttons */
  --coverage-result-radius:      10px;   /* corner rounding, result box     */

  /* SUCCESS state (green by default) */
  --coverage-success-bg:     #edfbea;
  --coverage-success-border: var(--coverage-accent);
  --coverage-success-text:   #155724;

  /* WARNING / "maybe" state (amber) */
  --coverage-warning-bg:     #fff8e5;
  --coverage-warning-border: #ffc107;
  --coverage-warning-text:   #856404;

  /* ERROR state (red) */
  --coverage-error-bg:       #fff0f0;
  --coverage-error-border:   #dc3545;
  --coverage-error-text:     #721c24;

  /* SUBMIT BUTTON -----------------------------------------------------------
     The "Check Coverage" submit button changes colour with the result state.
     The JS stamps a state class on the .coverage-checker wrapper after each
     check (coverage-state-success / -warning / -error), and these variables
     colour the button for each state:
       --coverage-btn-bg / -text                 = default, before any check
       --coverage-btn-success-bg / -text         = after a green result
       --coverage-btn-warning-bg / -text         = after an amber result
       --coverage-btn-error-bg / -text           = after a red result
     Every state defaults to the plain button colours (which follow the
     accent), so if you change nothing the button never changes colour.
     Override per site, e.g. in Elementor Custom CSS:
         .coverage-checker { --coverage-btn-error-bg: #dc3545; }             */
  --coverage-btn-bg:   var(--coverage-accent);
  --coverage-btn-text: var(--coverage-accent-contrast);

  /* Hover / focus colours. WordPress themes often have their own
     button:hover rule (e.g. background-color: #c36) which would otherwise
     recolour the button on hover — these variables win over that.
     Default = same as the normal button colours (no colour change on hover). */
  --coverage-btn-hover-bg:   var(--coverage-btn-bg);
  --coverage-btn-hover-text: var(--coverage-btn-text);

  --coverage-btn-success-bg:   var(--coverage-btn-bg);
  --coverage-btn-success-text: var(--coverage-btn-text);

  --coverage-btn-warning-bg:   var(--coverage-btn-bg);
  --coverage-btn-warning-text: var(--coverage-btn-text);

  --coverage-btn-error-bg:     var(--coverage-btn-bg);
  --coverage-btn-error-text:   var(--coverage-btn-text);
}


/* ════════════════════════════════════════════════════════════════════════
   2. FORM — input + button row
   ════════════════════════════════════════════════════════════════════════ */
.coverage-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-top: 10px;
}

.coverage-form input[type="text"] {
  flex: 1 1 260px;
  min-width: 240px;
  padding: 15px 18px;
  font-size: 18px;
  text-transform: uppercase;     /* postcodes display uppercase as you type */
  border: 2px solid var(--coverage-input-border);
  border-radius: var(--coverage-radius);
  outline: none;
}

.coverage-form input[type="text"]:focus {
  border-color: var(--coverage-input-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Submit button + result call-to-action button share one base style.
   Colours come from the button variables in section 1.                     */
.coverage-form button,
.coverage-result-btn {
  display: inline-block;
  padding: 15px 26px;
  font-size: 18px;
  font-weight: 600;
  background: var(--coverage-btn-bg);
  border: 0;
  border-radius: var(--coverage-radius);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  color: var(--coverage-btn-text) !important;          /* beats theme link colour */
  text-decoration: none !important;
}

/* Per-state colours for the SUBMIT button. The JS puts one of these state
   classes on the .coverage-checker wrapper after each check. Change the
   colours via the --coverage-btn-<state>-* variables in section 1.
   :hover/:focus are included so the state colour also sticks on hover
   (and cannot be recoloured by theme button:hover rules).                  */
.coverage-state-success .coverage-form button,
.coverage-state-success .coverage-form button:hover,
.coverage-state-success .coverage-form button:focus {
  background: var(--coverage-btn-success-bg);
  color: var(--coverage-btn-success-text) !important;
}

.coverage-state-warning .coverage-form button,
.coverage-state-warning .coverage-form button:hover,
.coverage-state-warning .coverage-form button:focus {
  background: var(--coverage-btn-warning-bg);
  color: var(--coverage-btn-warning-text) !important;
}

.coverage-state-error .coverage-form button,
.coverage-state-error .coverage-form button:hover,
.coverage-state-error .coverage-form button:focus {
  background: var(--coverage-btn-error-bg);
  color: var(--coverage-btn-error-text) !important;
}

/* Hover/focus: sets an explicit background so theme rules like
   "button:hover { background-color: #c36; }" cannot recolour the button.
   Change the colour via --coverage-btn-hover-bg / -text in section 1.      */
.coverage-form button:hover,
.coverage-form button:focus,
.coverage-result-btn:hover,
.coverage-result-btn:focus {
  background: var(--coverage-btn-hover-bg);
  background-color: var(--coverage-btn-hover-bg);
  color: var(--coverage-btn-hover-text) !important;
}

.coverage-form button:hover,
.coverage-result-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}


/* ════════════════════════════════════════════════════════════════════════
   3. RESULT BOX — base + the three states
   Override these freely from Elementor with e.g.:
       .coverage-result  { ... }
       .coverage-success { ... }
   ════════════════════════════════════════════════════════════════════════ */
.coverage-result {
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: var(--coverage-result-radius);
  border-left: 5px solid;        /* colour supplied by the state class */
}

.coverage-result h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
  color: inherit;                /* takes the state text colour below */
}

.coverage-result p {
  margin-bottom: 14px;
}

.coverage-success {
  background:   var(--coverage-success-bg);
  border-color: var(--coverage-success-border);
  color:        var(--coverage-success-text);
}

.coverage-warning {
  background:   var(--coverage-warning-bg);
  border-color: var(--coverage-warning-border);
  color:        var(--coverage-warning-text);
}

.coverage-error {
  background:   var(--coverage-error-bg);
  border-color: var(--coverage-error-border);
  color:        var(--coverage-error-text);
}


/* ════════════════════════════════════════════════════════════════════════
   4. TOWN PILLS — the list of covered towns inside a result
   ════════════════════════════════════════════════════════════════════════ */
.coverage-town-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 4px 0 18px;
}

.coverage-town-list li {
  background: #ffffff;
  border: 1px solid var(--coverage-success-border);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--coverage-success-text);
}

/* Pills inside an amber "maybe" result pick up the warning colours. */
.coverage-warning .coverage-town-list li {
  border-color: var(--coverage-warning-border);
  color: var(--coverage-warning-text);
}


/* ════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */

/* Tablets and below: smaller, centred heading */
@media (max-width: 1024px) {
  .coverage-checker h2 {
    font-size: 1.2rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .coverage-form button {
    width: 100%;                 /* full-width button on phones */
  }
}