/* Compliance check (.eco-check, .eco-hero) and re-stock (.eco-restock) forms.
   Loaded after the main stylesheets. Barlow Semi Condensed and Lato are enqueued in PHP.
*/

/* =========================================================
   Ecospill Spill Compliance Check (Gravity Forms styling)
   Only affects the form with CSS class "eco-check" and the
   banner with class "eco-hero". Nothing else on the site.
   ========================================================= */

.eco-hero, .eco-check {
  --eco-navy: #1D2343;
  --eco-navy-2: #2B3366;
  --eco-orange: #FA9A20;
  --eco-orange-dark: #E3850B;
  --eco-orange-soft: #FFF3E3;
  --eco-ink: #292B40;
  --eco-muted: #676983;
  --eco-line: #E3E5EE;
  --eco-green: #1E9E6A;
  --eco-red: #D9480F;
  --eco-amber: #C77700;
}

/* ---------- Banner ---------- */
.eco-hero {
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(250,154,32,.28), transparent 60%),
    radial-gradient(500px 260px at 0% 100%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(135deg, var(--eco-navy) 0%, var(--eco-navy-2) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 52px 40px;
  margin: 0 0 28px;
  font-family: Lato, sans-serif;
}
.eco-hero .eco-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--eco-orange); background: rgba(250,154,32,.12); border: 1px solid rgba(250,154,32,.35);
  padding: 6px 12px; border-radius: 999px;
}
.eco-hero h1 {
  font-family: "Barlow Semi Condensed", Lato, sans-serif !important;
  color: #fff !important; font-size: clamp(34px, 6vw, 54px) !important; font-weight: 700 !important;
  line-height: 1.1 !important; text-transform: none !important; letter-spacing: -.01em !important;
  margin: 18px 0 14px !important; padding: 0 !important;
}
.eco-hero h1 em { font-style: normal; color: var(--eco-orange); }
.eco-hero p { margin: 0; max-width: 620px; color: rgba(255,255,255,.85); font-size: 18px; line-height: 1.55; }
.eco-hero ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 0 !important; padding: 0 !important; list-style: none !important; }
.eco-hero li { color: rgba(255,255,255,.92); font-size: 15px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.eco-hero li::before { content: "✓"; color: var(--eco-orange); font-weight: 900; margin-right: 8px; }

/* ---------- Form card ---------- */
.eco-check {
  font-family: Lato, sans-serif !important;
  color: var(--eco-ink);
  background: #fff;
  border: 1px solid rgba(29,35,67,.06);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(29,35,67,.06), 0 10px 30px rgba(29,35,67,.08);
  padding: 12px 40px 36px;
  counter-reset: ecostep;
}
.eco-check .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  column-gap: 16px !important;
  row-gap: 22px !important;
}
.eco-check .gfield { grid-column: 1 / -1; margin: 0 !important; padding: 0 !important; }

/* Contact details side by side (fields 2 to 7) */
.eco-check .gfield[id$="_2"], .eco-check .gfield[id$="_3"], .eco-check .gfield[id$="_4"],
.eco-check .gfield[id$="_5"], .eco-check .gfield[id$="_6"], .eco-check .gfield[id$="_7"] { grid-column: span 6; }

/* ---------- Numbered section headings ---------- */
.eco-check .gsection {
  counter-increment: ecostep;
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 14px;
  align-items: center;
  border: 0 !important;
  border-top: 1px solid var(--eco-line) !important;
  padding: 30px 0 0 !important;
  margin-top: 14px !important;
}
.eco-check .gsection:first-child { border-top: 0 !important; margin-top: 0 !important; padding-top: 24px !important; }
.eco-check .gsection::before {
  content: counter(ecostep);
  grid-row: 1 / span 2;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--eco-orange-soft); color: var(--eco-orange-dark);
  font: 700 19px "Barlow Semi Condensed", sans-serif;
}
.eco-check .gsection_title {
  font-family: "Barlow Semi Condensed", Lato, sans-serif !important;
  font-size: 26px !important; font-weight: 700 !important; line-height: 1.15 !important;
  color: var(--eco-navy) !important; text-transform: none !important; letter-spacing: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
.eco-check .gsection_description { color: var(--eco-muted); font-size: 14px; margin: 2px 0 0 !important; padding: 0 !important; }

/* ---------- Labels, hints, required star ---------- */
.eco-check .gfield_label {
  font-weight: 700 !important; font-size: 15px !important; color: var(--eco-navy) !important;
  margin: 0 0 8px !important; padding: 0 !important; text-transform: none !important;
}
.eco-check .gfield_required { color: var(--eco-orange-dark) !important; }
.eco-check .gfield_required_text { font-size: 0 !important; font-style: normal !important; }
.eco-check .gfield_required_text::after { content: "*"; font-size: 15px; color: var(--eco-orange-dark); }

.eco-check .gfield:not(.gsection) { display: flex; flex-direction: column; }
.eco-check .gfield > .gfield_description:not(.validation_message) {
  order: 1; color: var(--eco-muted); font-size: 13.5px !important; line-height: 1.45; margin: -2px 0 10px !important; padding: 0 !important;
}
.eco-check .gfield > .ginput_container { order: 2; margin: 0 !important; }
.eco-check .gfield > .validation_message { order: 3; }
.eco-check .ginput_counter { display: none !important; }

/* ---------- Text boxes ---------- */
.eco-check input[type="text"], .eco-check input[type="email"], .eco-check input[type="tel"],
.eco-check select, .eco-check textarea {
  width: 100% !important; font: inherit !important; font-size: 16px !important; color: var(--eco-ink) !important;
  background: #FAFBFD !important; border: 1.5px solid var(--eco-line) !important; border-radius: 12px !important;
  padding: 12px 14px !important; box-shadow: none !important; height: auto !important; min-height: 48px;
  box-sizing: border-box !important; max-width: 100% !important;
}
.eco-check textarea { min-height: 110px !important; }
.eco-check input:focus, .eco-check select:focus, .eco-check textarea:focus {
  outline: none !important; border-color: var(--eco-orange) !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgba(250,154,32,.18) !important;
}

/* ---------- Choice chips ---------- */
.eco-check .gfield_radio, .eco-check .gfield_checkbox {
  display: flex !important; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important;
}
.eco-check .gchoice { position: relative; margin: 0 !important; padding: 0 !important; display: block !important; }
.eco-check .gchoice input.gfield-choice-input,
.eco-check .gchoice input[type="radio"], .eco-check .gchoice input[type="checkbox"] {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none;
}
.eco-check .gchoice label {
  display: flex !important; align-items: center; gap: 10px; height: 100%; box-sizing: border-box;
  max-width: none !important; width: auto !important; margin: 0 !important;
  padding: 11px 16px !important; border: 1.5px solid var(--eco-line); border-radius: 12px; background: #fff;
  font-weight: 700 !important; font-size: 15px !important; line-height: 1.3 !important; color: var(--eco-ink) !important;
  cursor: pointer; user-select: none; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.eco-check .gchoice label::before, .eco-check .gchoice label::after { box-shadow: none; }
.eco-check .gchoice label:hover { border-color: #C9CCDA; transform: translateY(-1px); }
.eco-check .gchoice input:checked + label {
  border-color: var(--eco-orange); background: var(--eco-orange-soft); color: var(--eco-navy) !important;
  box-shadow: 0 0 0 3px rgba(250,154,32,.15);
}
.eco-check .gchoice input:focus-visible + label { box-shadow: 0 0 0 4px rgba(250,154,32,.35); }

/* Yes / No / Not sure colours */
.eco-check .gchoice input[value="Yes"]:checked + label { background: var(--eco-green); border-color: var(--eco-green); color: #fff !important; box-shadow: none; }
.eco-check .gchoice input[value="No"]:checked + label { background: var(--eco-red); border-color: var(--eco-red); color: #fff !important; box-shadow: none; }
.eco-check .gchoice input[value="Not sure"]:checked + label { background: var(--eco-amber); border-color: var(--eco-amber); color: #fff !important; box-shadow: none; }

/* Compliance questions: divider between each one (fields 17 to 22) */
.eco-check .gfield[id$="_17"], .eco-check .gfield[id$="_18"], .eco-check .gfield[id$="_19"],
.eco-check .gfield[id$="_20"], .eco-check .gfield[id$="_21"] { border-bottom: 1px solid var(--eco-line) !important; padding-bottom: 22px !important; }

/* ---------- Industry tiles with icons (field 9) ---------- */
.eco-check .gfield[id$="_9"] .gfield_radio { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px !important; }
.eco-check .gfield[id$="_9"] .gchoice { display: flex !important; }
.eco-check .gfield[id$="_9"] .gchoice label { flex: 1; }
/* "Other" choice: tile plus its text box on one full-width row */
.eco-check .gfield[id$="_9"] .gchoice:has(input[type="text"]) { grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 10px; }
.eco-check .gfield[id$="_9"] .gchoice:has(input[type="text"]) label { flex: 0 0 auto; }
.eco-check .gfield[id$="_9"] .gchoice br { display: none; }
.eco-check .gfield[id$="_9"] .gchoice label::before { font-size: 20px; line-height: 1; content: "➕"; }
.eco-check input[id$="_9_0"] + label::before { content: "🚚" !important; }
.eco-check input[id$="_9_1"] + label::before { content: "⛏️" !important; }
.eco-check input[id$="_9_2"] + label::before { content: "🏗️" !important; }
.eco-check input[id$="_9_3"] + label::before { content: "🚜" !important; }
.eco-check input[id$="_9_4"] + label::before { content: "🔧" !important; }
.eco-check input[id$="_9_5"] + label::before { content: "🏭" !important; }
.eco-check input[id$="_9_6"] + label::before { content: "🏛️" !important; }
.eco-check input[id$="_9_7"] + label::before { content: "⚓" !important; }
.eco-check .gfield[id$="_9"] input[type="text"] { flex: 1; width: auto !important; max-width: 360px !important; min-width: 200px; }

/* ---------- Submit button ---------- */
.eco-check .gform_footer, .eco-check .gform_page_footer { margin: 30px 0 0 !important; padding: 26px 0 0 !important; border-top: 1px solid var(--eco-line); }
.eco-check .gform_footer input[type="submit"], .eco-check .gform_footer button, .eco-check .gform_button {
  appearance: none; border: 0 !important; cursor: pointer;
  font: 900 16px Lato, sans-serif !important; letter-spacing: .02em; text-transform: none !important;
  background: var(--eco-orange) !important; color: var(--eco-navy) !important;
  padding: 16px 30px !important; border-radius: 12px !important; height: auto !important; line-height: 1.2 !important;
  box-shadow: 0 6px 18px rgba(250,154,32,.35) !important; transition: transform .15s, background .15s;
}
.eco-check .gform_footer input[type="submit"]:hover, .eco-check .gform_button:hover { background: #FFAA3A !important; transform: translateY(-1px); }

/* Thank-you message */
.gform_confirmation_wrapper.eco-check_wrapper .gform_confirmation_message {
  background: #E6F6EF; color: #145C40; border-radius: 16px; padding: 28px; font: 700 17px/1.5 Lato, sans-serif; text-align: center;
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .eco-hero { padding: 36px 22px; border-radius: 16px; }
  .eco-check { padding: 6px 18px 26px; border-radius: 16px; }
  .eco-check .gfield[id$="_2"], .eco-check .gfield[id$="_3"], .eco-check .gfield[id$="_4"],
  .eco-check .gfield[id$="_5"], .eco-check .gfield[id$="_6"], .eco-check .gfield[id$="_7"] { grid-column: 1 / -1; }
  .eco-check .gform_footer input[type="submit"], .eco-check .gform_button { width: 100% !important; }
}
/* =========================================================
   Ecospill Re-stock Form (Gravity Forms styling)
   Only affects the form with CSS class "eco-restock".
   The banner uses the .eco-hero styles already on the site.
   ========================================================= */

.eco-restock {
  --eco-navy: #1D2343;
  --eco-orange: #FA9A20;
  --eco-orange-dark: #E3850B;
  --eco-orange-soft: #FFF3E3;
  --eco-ink: #292B40;
  --eco-muted: #676983;
  --eco-line: #E3E5EE;
  --eco-tint: #F6F7FB;

  font-family: Lato, sans-serif !important;
  color: var(--eco-ink);
  background: #fff;
  border: 1px solid rgba(29,35,67,.06);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(29,35,67,.06), 0 10px 30px rgba(29,35,67,.08);
  padding: 12px 40px 36px;
  counter-reset: ecostep;
}
.eco-restock .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  column-gap: 16px !important;
  row-gap: 20px !important;
}
.eco-restock .gfield { grid-column: 1 / -1; margin: 0 !important; padding: 0 !important; }
.eco-restock .gfield.eco-half { grid-column: span 6; }
.eco-restock .gfield.eco-third { grid-column: span 4; }

/* ---------- Numbered section headings ---------- */
.eco-restock .gsection:not(.eco-kit-head) {
  counter-increment: ecostep;
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 14px;
  align-items: center;
  border: 0 !important;
  border-top: 1px solid var(--eco-line) !important;
  padding: 30px 0 0 !important;
  margin-top: 14px !important;
}
.eco-restock .gsection:not(.eco-kit-head):first-child { border-top: 0 !important; margin-top: 0 !important; padding-top: 24px !important; }
.eco-restock .gsection:not(.eco-kit-head)::before {
  content: counter(ecostep);
  grid-row: 1 / span 2;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--eco-orange-soft); color: var(--eco-orange-dark);
  font: 700 19px "Barlow Semi Condensed", sans-serif;
}
.eco-restock .gsection_title {
  font-family: "Barlow Semi Condensed", Lato, sans-serif !important;
  font-size: 26px !important; font-weight: 700 !important; line-height: 1.15 !important;
  color: var(--eco-navy) !important; text-transform: none !important; letter-spacing: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
.eco-restock .gsection_description { color: var(--eco-muted); font-size: 14px; margin: 2px 0 0 !important; padding: 0 !important; }

/* Kit heading inside "What do you need?" */
.eco-restock .gsection.eco-kit-head {
  border: 0 !important; margin: 8px 0 -6px !important; padding: 0 !important;
}
.eco-restock .gsection.eco-kit-head .gsection_title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 21px !important; background: var(--eco-navy); color: #fff !important;
  padding: 10px 18px !important; border-radius: 12px;
}

/* ---------- Labels, hints, required star ---------- */
.eco-restock .gfield_label {
  font-weight: 700 !important; font-size: 15px !important; color: var(--eco-navy) !important;
  margin: 0 0 8px !important; padding: 0 !important; text-transform: none !important;
}
.eco-restock .gfield_required { color: var(--eco-orange-dark) !important; }
.eco-restock .gfield_required_text { font-size: 0 !important; font-style: normal !important; }
.eco-restock .gfield_required_text::after { content: "*"; font-size: 15px; color: var(--eco-orange-dark); }

.eco-restock .gfield:not(.gsection) { display: flex; flex-direction: column; }
.eco-restock .gfield > .gfield_description:not(.validation_message) {
  order: 1; color: var(--eco-muted); font-size: 13.5px !important; line-height: 1.45; margin: -2px 0 10px !important; padding: 0 !important;
}
.eco-restock .gfield > .ginput_container { order: 2; margin: 0 !important; }
.eco-restock .gfield > .validation_message { order: 3; }
.eco-restock .ginput_counter, .eco-restock .gfield_description.instruction { display: none !important; }

/* ---------- Text boxes ---------- */
.eco-restock input[type="text"], .eco-restock input[type="email"], .eco-restock input[type="tel"],
.eco-restock input[type="number"], .eco-restock select, .eco-restock textarea {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  font: inherit !important; font-size: 16px !important; color: var(--eco-ink) !important;
  background: #FAFBFD !important; border: 1.5px solid var(--eco-line) !important; border-radius: 12px !important;
  padding: 12px 14px !important; box-shadow: none !important; height: auto !important; min-height: 48px;
}
.eco-restock textarea { min-height: 100px !important; }
.eco-restock input:focus, .eco-restock select:focus, .eco-restock textarea:focus {
  outline: none !important; border-color: var(--eco-orange) !important; background: #fff !important;
  box-shadow: 0 0 0 4px rgba(250,154,32,.18) !important;
}

/* ---------- Item rows: name and "full kit" on the left, quantity on the right ---------- */
.eco-restock .gfield.eco-item {
  display: grid;
  grid-template-columns: 1fr 170px;
  column-gap: 16px; align-items: center;
  background: var(--eco-tint); border: 1px solid var(--eco-line); border-radius: 14px;
  padding: 14px 16px !important;
}
.eco-restock .gfield.eco-item .gfield_label { grid-column: 1; grid-row: 1; margin: 0 !important; font-size: 16px !important; }
.eco-restock .gfield.eco-item > .gfield_description:not(.validation_message) {
  grid-column: 1; grid-row: 2; margin: 2px 0 0 !important;
  color: var(--eco-orange-dark); font-weight: 700; font-size: 13px !important;
}
.eco-restock .gfield.eco-item > .ginput_container { grid-column: 2; grid-row: 1 / span 2; }
.eco-restock .gfield.eco-item > .validation_message { grid-column: 1 / -1; grid-row: 3; }
.eco-restock .gfield.eco-item input[type="number"] { text-align: center; font-weight: 700 !important; background: #fff !important; }
.eco-restock .gfield.eco-item select { background-color: #fff !important; }

/* ---------- Choice chips ---------- */
.eco-restock .gfield_radio, .eco-restock .gfield_checkbox {
  display: flex !important; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important;
}
.eco-restock .gchoice { position: relative; margin: 0 !important; padding: 0 !important; display: flex !important; }
.eco-restock .gchoice input.gfield-choice-input,
.eco-restock .gchoice input[type="radio"], .eco-restock .gchoice input[type="checkbox"] {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none;
}
.eco-restock .gchoice label {
  display: flex !important; align-items: center; gap: 10px; flex: 1; box-sizing: border-box;
  max-width: none !important; width: auto !important; margin: 0 !important;
  padding: 11px 16px !important; border: 1.5px solid var(--eco-line); border-radius: 12px; background: #fff;
  font-weight: 700 !important; font-size: 15px !important; line-height: 1.3 !important; color: var(--eco-ink) !important;
  cursor: pointer; user-select: none; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.eco-restock .gchoice label:hover { border-color: #C9CCDA; transform: translateY(-1px); }
.eco-restock .gchoice input:checked + label {
  border-color: var(--eco-orange); background: var(--eco-orange-soft); color: var(--eco-navy) !important;
  box-shadow: 0 0 0 3px rgba(250,154,32,.15);
}
.eco-restock .gchoice input:focus-visible + label { box-shadow: 0 0 0 4px rgba(250,154,32,.35); }
/* tick mark for checkbox chips */
.eco-restock .gfield_checkbox .gchoice label::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #C9CCDA; background: #fff;
}
.eco-restock .gfield_checkbox .gchoice input:checked + label::before {
  content: "\2713"; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 900;
  background: var(--eco-orange); border-color: var(--eco-orange);
}

/* ---------- Kit type tiles (icons: Ecospill liquid type drops) ---------- */
.eco-restock .gfield.eco-types .gfield_checkbox { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.eco-restock .gfield.eco-types .gchoice label {
  flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; position: relative;
  min-height: 150px; padding: 76px 18px 18px !important; font-size: 18px !important; color: var(--eco-navy) !important;
  background-repeat: no-repeat; background-position: 18px 18px; background-size: auto 46px;
}
.eco-restock .gfield.eco-types .gchoice label::before { position: absolute; top: 14px; right: 14px; }
.eco-restock .gfield.eco-types .gchoice label::after { font-size: 13px; font-weight: 400; color: var(--eco-muted); line-height: 1.3; }
.eco-restock .gfield.eco-types .gchoice:nth-child(1) label { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22183.6 0 16.9 26%22%3E%3Cpath fill=%22%23010101%22 fill-rule=%22evenodd%22 d=%22M191.79.38c-1.09,4.32-4.82,8.16-6.78,12.03-.74,1.46-1.24,3.030-1.24,4.89,0,3.46,2.49,8.51,8.32,8.51s8.32-5.05,8.32-8.51c0-1.86-.5-3.43-1.240-4.89-1.96-3.87-5.69-7.71-6.78-12.03-.04-.15-.15-.27-.3-.27s-.27.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M187.9,10.72c-.47.73-.91,1.46-1.28,2.18-.67,1.32-1.12,2.75-1.12,4.44,0,2.36,1.28,5.55,4.17,6.98-1.32-1.560-1.92-3.58-1.92-5.21s.45-3.11,1.12-4.44c.22-.44.47-.88.73-1.31l-1.71-2.59v-.05ZM189.62,8.17c-.41.61-.83,1.22-1.24,1.83l1.72,2.57c.39-.61.81-1.22,1.23-1.84-.55-.84-1.13-1.69-1.71-2.55Z%22/%3E%3C/svg%3E"); }
.eco-restock .gfield.eco-types .gchoice:nth-child(2) label { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16.8 25.6%22%3E%3Cpath fill=%22%23fbb040%22 fill-rule=%22evenodd%22 d=%22M8.13.27C7.05,4.56,3.35,8.37,1.41,12.2c-.73,1.45-1.23,3.01-1.23,4.85,0,3.43,2.47,8.45,8.25,8.45s8.25-5.01,8.25-8.45c0-1.84-.5-3.4-1.23-4.85-1.94-3.83-5.64-7.64-6.72-11.93-.04-.15-.15-.27-.3-.27s-.26.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M4.27,10.53c-.47.72-.9,1.45-1.27,2.17-.67,1.31-1.12,2.73-1.12,4.4,0,2.35,1.27,5.5,4.13,6.92-1.31-1.55-1.91-3.55-1.91-5.16s.45-3.09,1.12-4.4c.22-.43.47-.87.73-1.3l-1.69-2.57v-.05ZM5.97,7.99c-.41.61-.83,1.21-1.230,1.81l1.71,2.55c.39-.61.8-1.21,1.22-1.83-.54-.84-1.13-1.68-1.7-2.53Z%22/%3E%3C/svg%3E"); }
.eco-restock .gfield.eco-types .gchoice:nth-child(3) label { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2299.3 0 16.8 25.7%22%3E%3Cpath fill=%22%23662d91%22 fill-rule=%22evenodd%22 d=%22M107.39.38c-1.08,4.28-4.78,8.09-6.72,11.93-.73,1.45-1.23,3.01-1.23,4.85,0,3.43,2.47,8.45,8.25,8.45s8.25-5.01,8.25-8.45c0-1.84-.5-3.4-1.23-4.85-1.94-3.83-5.64-7.64-6.72-11.93-.04-.15-.15-.27-.3-.27s-.26.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M103.53,10.64c-.47.72-.9,1.45-1.27,2.17-.67,1.31-1.12,2.73-1.12,4.4,0,2.35,1.27,5.5,4.13,6.92-1.31-1.55-1.91-3.55-1.91-5.16s.45-3.09,1.12-4.4c.22-.43.47-.87.73-1.3l-1.69-2.57v-.05ZM105.24,8.1c-.41.61-.83,1.210-1.23,1.81l1.71,2.55c.39-.61.8-1.21,1.22-1.83-.54-.84-1.13-1.68-1.7-2.53Z%22/%3E%3C/svg%3E"); }
.eco-restock .gfield.eco-types .gchoice:nth-child(4) label { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22181.4 0 21.3 35.5%22%3E%3Cpath fill=%22%23010101%22 fill-rule=%22evenodd%22 d=%22M191.79.38c-1.09,4.32-4.82,8.16-6.78,12.03-.74,1.46-1.24,3.030-1.24,4.89,0,3.46,2.49,8.51,8.32,8.51s8.32-5.05,8.32-8.51c0-1.86-.5-3.43-1.240-4.89-1.96-3.87-5.69-7.71-6.78-12.03-.04-.15-.15-.27-.3-.27s-.27.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M187.9,10.72c-.47.73-.91,1.46-1.28,2.18-.67,1.32-1.12,2.75-1.12,4.44,0,2.36,1.28,5.55,4.17,6.98-1.32-1.560-1.92-3.58-1.92-5.21s.45-3.11,1.12-4.44c.22-.44.47-.88.73-1.31l-1.71-2.59v-.05ZM189.62,8.17c-.41.61-.83,1.22-1.24,1.83l1.72,2.57c.39-.61.81-1.22,1.23-1.84-.55-.84-1.13-1.69-1.71-2.55Z%22/%3E%3Cg fill=%22none%22 stroke=%22%231E7FC8%22 stroke-width=%221.7%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M182.4 29.2 q2.45 -2.3 4.9 0 t4.9 0 t4.9 0 t4.9 0%22/%3E%3Cpath d=%22M182.4 33.6 q2.45 -2.3 4.9 0 t4.9 0 t4.9 0 t4.9 0%22/%3E%3C/g%3E%3C/svg%3E"); }
.eco-restock .gfield.eco-types .gchoice:nth-child(4) label { background-size: auto 56px; background-position: 16px 12px; }
.eco-restock .gfield.eco-types .gchoice:nth-child(1) label::after { content: "Fuels, oils, hydrocarbons"; }
.eco-restock .gfield.eco-types .gchoice:nth-child(2) label::after { content: "Universal liquids"; }
.eco-restock .gfield.eco-types .gchoice:nth-child(3) label::after { content: "Aggressive chemicals"; }
.eco-restock .gfield.eco-types .gchoice:nth-child(4) label::after { content: "Fuel and oil on water"; }

/* ---------- Size tiles ---------- */
.eco-restock .gfield.eco-sizes {
  border-left: 4px solid var(--eco-line); padding-left: 16px !important;
}
.eco-restock .gfield.eco-sizes.eco-hc { border-left-color: #010101; }
.eco-restock .gfield.eco-sizes.eco-gp { border-left-color: #fbb040; }
.eco-restock .gfield.eco-sizes.eco-hz { border-left-color: #662d91; }
.eco-restock .gfield.eco-sizes.eco-mr { border-left-color: #1D2343; }
.eco-restock .gfield.eco-sizes .gchoice label {
  font: 700 22px "Barlow Semi Condensed", Lato, sans-serif !important; padding: 12px 20px !important; min-width: 110px;
}

/* ---------- Kit headings get their type icon ---------- */
.eco-restock .gsection.eco-kit-head .gsection_title::before {
  content: "" !important; width: 18px; height: 26px; flex: none;
  background: no-repeat center / contain; filter: drop-shadow(0 0 1.5px #fff);
}
.eco-restock .gsection.eco-kit-head.eco-hc .gsection_title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22183.6 0 16.9 26%22%3E%3Cpath fill=%22%23010101%22 fill-rule=%22evenodd%22 d=%22M191.79.38c-1.09,4.32-4.82,8.16-6.78,12.03-.74,1.46-1.24,3.030-1.24,4.89,0,3.46,2.49,8.51,8.32,8.51s8.32-5.05,8.32-8.51c0-1.86-.5-3.43-1.240-4.89-1.96-3.87-5.69-7.71-6.78-12.03-.04-.15-.15-.27-.3-.27s-.27.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M187.9,10.72c-.47.73-.91,1.46-1.28,2.18-.67,1.32-1.12,2.75-1.12,4.44,0,2.36,1.28,5.55,4.17,6.98-1.32-1.560-1.92-3.58-1.92-5.21s.45-3.11,1.12-4.44c.22-.44.47-.88.73-1.31l-1.71-2.59v-.05ZM189.62,8.17c-.41.61-.83,1.22-1.24,1.83l1.72,2.57c.39-.61.81-1.22,1.23-1.84-.55-.84-1.13-1.69-1.71-2.55Z%22/%3E%3C/svg%3E"); }
.eco-restock .gsection.eco-kit-head.eco-gp .gsection_title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16.8 25.6%22%3E%3Cpath fill=%22%23fbb040%22 fill-rule=%22evenodd%22 d=%22M8.13.27C7.05,4.56,3.35,8.37,1.41,12.2c-.73,1.45-1.23,3.01-1.23,4.85,0,3.43,2.47,8.45,8.25,8.45s8.25-5.01,8.25-8.45c0-1.84-.5-3.4-1.23-4.85-1.94-3.83-5.64-7.64-6.72-11.93-.04-.15-.15-.27-.3-.27s-.26.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M4.27,10.53c-.47.72-.9,1.45-1.27,2.17-.67,1.31-1.12,2.73-1.12,4.4,0,2.35,1.27,5.5,4.13,6.92-1.31-1.55-1.91-3.55-1.91-5.16s.45-3.09,1.12-4.4c.22-.43.47-.87.73-1.3l-1.69-2.57v-.05ZM5.97,7.99c-.41.61-.83,1.21-1.230,1.81l1.71,2.55c.39-.61.8-1.21,1.22-1.83-.54-.84-1.13-1.68-1.7-2.53Z%22/%3E%3C/svg%3E"); }
.eco-restock .gsection.eco-kit-head.eco-hz .gsection_title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2299.3 0 16.8 25.7%22%3E%3Cpath fill=%22%23662d91%22 fill-rule=%22evenodd%22 d=%22M107.39.38c-1.08,4.28-4.78,8.09-6.72,11.93-.73,1.45-1.23,3.01-1.23,4.85,0,3.43,2.47,8.45,8.25,8.45s8.25-5.01,8.25-8.45c0-1.84-.5-3.4-1.23-4.85-1.94-3.83-5.64-7.64-6.72-11.93-.04-.15-.15-.27-.3-.27s-.26.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M103.53,10.64c-.47.72-.9,1.45-1.27,2.17-.67,1.31-1.12,2.73-1.12,4.4,0,2.35,1.27,5.5,4.13,6.92-1.31-1.55-1.91-3.55-1.91-5.16s.45-3.09,1.12-4.4c.22-.43.47-.87.73-1.3l-1.69-2.57v-.05ZM105.24,8.1c-.41.61-.83,1.210-1.23,1.81l1.71,2.55c.39-.61.8-1.21,1.22-1.83-.54-.84-1.13-1.68-1.7-2.53Z%22/%3E%3C/svg%3E"); }
.eco-restock .gsection.eco-kit-head.eco-mr .gsection_title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22181.4 0 21.3 35.5%22%3E%3Cpath fill=%22%23010101%22 fill-rule=%22evenodd%22 d=%22M191.79.38c-1.09,4.32-4.82,8.16-6.78,12.03-.74,1.46-1.24,3.030-1.24,4.89,0,3.46,2.49,8.51,8.32,8.51s8.32-5.05,8.32-8.51c0-1.86-.5-3.43-1.240-4.89-1.96-3.87-5.69-7.71-6.78-12.03-.04-.15-.15-.27-.3-.27s-.27.12-.3.27%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M187.9,10.72c-.47.73-.91,1.46-1.28,2.18-.67,1.32-1.12,2.75-1.12,4.44,0,2.36,1.28,5.55,4.17,6.98-1.32-1.560-1.92-3.58-1.92-5.21s.45-3.11,1.12-4.44c.22-.44.47-.88.73-1.31l-1.71-2.59v-.05ZM189.62,8.17c-.41.61-.83,1.22-1.24,1.83l1.72,2.57c.39-.61.81-1.22,1.23-1.84-.55-.84-1.13-1.69-1.71-2.55Z%22/%3E%3Cg fill=%22none%22 stroke=%22%231E7FC8%22 stroke-width=%221.7%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M182.4 29.2 q2.45 -2.3 4.9 0 t4.9 0 t4.9 0 t4.9 0%22/%3E%3Cpath d=%22M182.4 33.6 q2.45 -2.3 4.9 0 t4.9 0 t4.9 0 t4.9 0%22/%3E%3C/g%3E%3C/svg%3E"); width: 22px; }

/* ---------- Submit button ---------- */
.eco-restock .gform_footer { margin: 30px 0 0 !important; padding: 26px 0 0 !important; border-top: 1px solid var(--eco-line); }
.eco-restock .gform_footer input[type="submit"], .eco-restock .gform_footer button, .eco-restock .gform_button {
  appearance: none; border: 0 !important; cursor: pointer;
  font: 900 16px Lato, sans-serif !important; letter-spacing: .02em; text-transform: none !important;
  background: var(--eco-orange) !important; color: var(--eco-navy) !important;
  padding: 16px 30px !important; border-radius: 12px !important; height: auto !important; line-height: 1.2 !important;
  box-shadow: 0 6px 18px rgba(250,154,32,.35) !important; transition: transform .15s, background .15s;
}
.eco-restock .gform_footer input[type="submit"]:hover, .eco-restock .gform_button:hover { background: #FFAA3A !important; transform: translateY(-1px); }

.gform_confirmation_wrapper.eco-restock_wrapper .gform_confirmation_message {
  background: #E6F6EF; color: #145C40; border-radius: 16px; padding: 28px; font: 700 17px/1.5 Lato, sans-serif; text-align: center;
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 860px) {
  .eco-restock .gfield.eco-types .gfield_checkbox { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .eco-restock { padding: 6px 18px 26px; border-radius: 16px; }
  .eco-restock .gfield.eco-half, .eco-restock .gfield.eco-third { grid-column: 1 / -1; }
  .eco-restock .gfield.eco-item { grid-template-columns: 1fr 110px; }
  .eco-restock .gform_footer input[type="submit"], .eco-restock .gform_button { width: 100% !important; }
}

/* ---------- Whole kit or individual items ---------- */
.eco-restock .gfield.eco-how .gfield_label { font-size: 14px !important; color: var(--eco-muted) !important; }
.eco-restock .gfield.eco-item.eco-optional { background: #fff; border-style: dashed; }
.eco-restock .gfield.eco-item.eco-optional > .gfield_description:not(.validation_message) { color: var(--eco-muted); }
.eco-restock .gsection.eco-kit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.eco-restock .gsection.eco-kit-head .gsection_description { margin: 0 !important; font-size: 13.5px; }