/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 13 2026 | 12:13:39 */
/* ==========================================================================
   Cazoo — Salesforce embedded form: LIGHT DOM
   Goes in: dealer.cazoo.co.uk/wp-content/uploads/custom-css-js/2007.css

   This file styles the layout only. The <input>/<textarea>/<button> elements
   live inside open shadow roots and CANNOT be reached from here — 2008.js
   handles those. Verified against the live form; the only working custom
   properties are the three --slds-c-input-* below. The --dxp-s-form-element-*
   family does nothing on this form.
   ========================================================================== */

@font-face {
  font-family: 'Cazoo Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../2026/01/CazooSans-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Cazoo Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../2026/01/CazooSans-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Cazoo Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../2026/01/CazooSans-SemiBold.woff') format('woff');
}

:root {
  --cz-ink:       #01190E;
  --cz-orange:    #FF5033;
  --cz-mint:      #D9FCE3;
  --cz-grey:      #C7D1CB;
  --cz-muted:     #6B7C73;
  --cz-off-white: #F5FFF7;
  --cz-error:     #B3261E;
  --cz-font:      'Cazoo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* The only hooks that actually reach into the input's shadow root. */
  --slds-c-input-radius-border:            12px;
  --slds-c-input-spacing-horizontal-start: 16px;
  --slds-c-input-spacing-horizontal-end:   16px;
  --slds-c-input-text-color:               var(--cz-ink);
}

html, body {
  margin: 0;
  padding: 0;
  background: transparent;   /* lets the WordPress section colour show through */
}

body {
  font-family: var(--cz-font);
  color: var(--cz-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.form-container {
  max-width: 640px;
  margin-inline: auto;
}

/* .column-grid is flex-direction:column. Never set align-items on it —
   flex-start collapses every field to its intrinsic width. Only gap. */
.column-grid {
  gap: 20px;
}

/* Field labels. The dropdown's label has no .slds-visible class, hence the
   structural selector. */
label.slds-visible,
.outer-wrapper > .content > label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--cz-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cz-ink);
}

abbr.slds-required {
  margin-right: 3px;
  color: var(--cz-orange);
  text-decoration: none;
  border: 0;
}

/* Phone: country combobox + number. SLDS gives the combobox a percentage
   width and no gutter. */
es_base_components-form-input-telephone .slds-grid { gap: 10px; }

es_base_components-form-input-telephone .slds-grid > .slds-col:first-child {
  flex: 0 0 150px;
  width: 150px;
  max-width: 150px;
}

es_base_components-form-input-telephone .slds-grid > .slds-col:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Consent: the checkbox sits in a 1-of-12 column (~105px) which clipped the
   "I Consent" label. Shrink the column to the box and drop the label — it
   duplicates the paragraph, and the checkbox keeps its assistive-text label. */
es_base_components-column[class*="size_1-of-12"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  padding-right: 0;
}

es_base_components-form-input-checkbox .content {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

es_base_components-form-input-checkbox .content > label.slds-visible {
  display: none;
}

es_base_components-button {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

a {
  color: var(--cz-orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { color: var(--cz-ink); }

p {
  font-family: var(--cz-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cz-ink);
}

.slds-form-element__help {
  display: block;
  margin-top: 6px;
  font-family: var(--cz-font);
  font-size: 13px;
  color: var(--cz-error);
}

@media (max-width: 767px) {
  .column-grid { gap: 16px; }

  es_base_components-form-input-telephone .slds-grid > .slds-col:first-child {
    flex: 0 0 116px;
    width: 116px;
    max-width: 116px;
  }
}