/* stl-unified.css
   Unified stylesheet for:
   - Form A-style structure (used by form-b): floating labels, inputs/selects, radios/checkboxes
   - Preference Center markup (preferenceCenterBlock, preferenceCenterCheckbox, submitButton)
   Visual design: Smart Train Lease (general-stl look)
   Date: 2025-08-28
*/

/* ========================
   TOKENS (Smart Train Lease)
   ======================== */
:root{
  --color-white:#ffffff;
  --color-grey:rgba(255,255,255,0.08);            /* surface fill */
  --color-grey-disabled:#9A9FA6;
  --color-white-label:rgba(255,255,255,0.60);
  --color-white-border:rgba(255,255,255,0.10);
  --color-lime:#E0FA8A;
  --color-dark:#2F313B;
}

/* ========================
   BASE
   ======================== */
*,
*::before,
*::after{ box-sizing:border-box; }

body{
  background:var(--color-dark);
  color:var(--color-white);
  font-family:"Public Sans", Arial, Helvetica, sans-serif;
  text-align:left;
}
.text-start {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: right;
}

:focus{ outline:none; }

/* Links */
form a, form a:visited, form a:focus{ color:var(--color-lime); text-decoration:underline; }
form a:hover{ color:var(--color-lime); text-decoration:underline; }

/* Layout wrapper */
[data-layout="true"]{ margin:0 auto; max-width:600px; }
@media(max-width:804px){ [data-layout="true"]{ padding:0 16px; } }

/* Remove table spacing from builder tables */
.outer, .tbContainer, .tbContainer *{ border-collapse:collapse; }

/* ========================
   A-STRUCTURE FORM BLOCKS
   (.textFormFieldBlock, .optionSetFormFieldBlock, etc.)
   ======================== */
.textFormFieldBlock,
.optionSetFormFieldBlock,
.dropdownFormFieldBlock,
.checkboxgroup,
.twoOptionFormFieldBlock{
  position:relative;
  margin-bottom:24px;
}

input, select{
  box-sizing:border-box;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  min-height:56px;
}
select option:first-child{ display:none; }

/* Controls */
.textFormFieldBlock input,
.textFormFieldBlock textarea,
.optionSetFormFieldBlock select,
.dropdownFormFieldBlock select{
  width:100%;
  min-height:56px; height:56px;
  border-radius:4px;
  border:1px solid var(--color-white-border);
  background:var(--color-grey);
  color:var(--color-white);
  font-size:16px; line-height:1.4;
  padding:0 16px;
  font-family:inherit;
}
.textFormFieldBlock textarea{
  height:143px;
  padding-top:12px;
  resize:vertical;
}

/* Hover/Focus */
.textFormFieldBlock input:hover,
.textFormFieldBlock textarea:hover,
.optionSetFormFieldBlock select:hover,
.dropdownFormFieldBlock select:hover{
  border-color:var(--color-lime);
}
.textFormFieldBlock input:focus,
.textFormFieldBlock textarea:focus,
.optionSetFormFieldBlock select:focus,
.dropdownFormFieldBlock select:focus{
  border-color:var(--color-lime);
  background:var(--color-grey);
}

/* Floating labels */
.textFormFieldBlock > label,
.dropdownFormFieldBlock > label,
.optionSetFormFieldBlock > label,
.optionSetFormFieldBlock > label > div{
  position:absolute;
  left:16px;
  top:16px;
  color:var(--color-white-label);
  font-size:18px;
  font-weight:normal;
  pointer-events:none;
  transition:.15s ease;
}

.textFormFieldBlock input:focus ~ label,
.textFormFieldBlock input:not(:placeholder-shown) ~ label,
.textFormFieldBlock textarea:focus ~ label,
.textFormFieldBlock textarea:not(:placeholder-shown) ~ label{
  top:4px;
  font-size:12px;
  color:var(--color-lime);
}

/* Highlight helper */
.highlight{ display:none; }

/* Select chevron */
.optionSetFormFieldBlock select,
.dropdownFormFieldBlock select{
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:16px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M15.0894 1L7.99423 8.03632L0.899109 1' stroke='%23F8F4F4' stroke-width='2'/%3E%3C/svg%3E");
}
select option{ background:var(--color-dark); color:var(--color-white); }

/* ========================
   RADIO GROUPS
   ======================== */
.horizontal-radio-group{ display:flex; flex-direction:column; margin-bottom:24px; }
.horizontal-radio-group .block-label{ margin-bottom:8px; padding-left:16px; font-size:16px; color:var(--color-white); }
.radiobuttons{ display:flex; gap:32px; padding-left:0; }

/* Inline variant (as used in examples) */
.horizontal-radio-group-inline{ display:flex; align-items:center; gap:16px;  margin: 0 0 24px; }
.horizontal-radio-group-inline .block-label{ min-width:60px; padding-left:0; font-size:16px; color:var(--color-white); }
.horizontal-radio-group-inline .radiobuttons{ display:flex; gap:32px; }

.radiobuttons label{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; color:var(--color-white); position:relative;
}
.radiobuttons input[type="radio"]{ position:absolute; opacity:0; }
.radiomark{
  width:24px; height:24px; border-radius:50%;
  background:var(--color-dark);
  border:2px solid var(--color-white-border);
  display:inline-flex; align-items:center; justify-content:center;
}
.radiomark::after{
  content:""; width:10px; height:10px; border-radius:50%; display:none; background:var(--color-lime);
}
.radiobuttons input[type="radio"]:checked ~ .radiomark{
  border-color:var(--color-lime); background:var(--color-grey);
}
.radiobuttons input[type="radio"]:checked ~ .radiomark::after{ display:block; }

/* ========================
   CHECKBOXES (consent + generic)
   ======================== */
.checkboxLabel{
  display:block; position:relative;
  padding-left:43px; padding-top:4px;
  margin:0 0 15px 0;
  font-size:14px; color:var(--color-white);
  user-select:none; pointer-events:none;
}
.checkboxLabel input[type="checkbox"]{
  position:absolute; opacity:0; left:0; top:0; width:0; height:0;
}
.checkmark{
  position:absolute; top:0; left:0;
  width:24px; height:24px; border-radius:2px;
  background:var(--color-grey);
  border:1px solid var(--color-white-border);
  cursor:pointer; pointer-events:initial;
}
.checkmark:hover{ border-color:var(--color-lime); }
.checkboxLabel input[type="checkbox"]:checked ~ .checkmark{
  background:var(--color-grey); border-color:var(--color-lime);
}
.checkboxLabel input[type="checkbox"]:checked ~ .checkmark::after{
  content:""; position:absolute; left:6px; top:-1px;
  width:9px; height:18px; border:solid var(--color-lime);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ========================
   BUTTONS
   ======================== */
.buttonClass,
button[type="submit"],
input[type="submit"],
.submit,
.submitButton{
  padding:18px 40px;
  font-weight:700; font-size:18px; line-height:100%;
  background:var(--color-lime);
  color:var(--color-dark);
  border:none;
  border-radius:40px;
  cursor:pointer;
}
.buttonClass:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.submit:hover,
.submitButton:hover{ background:var(--color-lime); }
.buttonClass:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled,
.submit:disabled,
.submitButton[disabled]{
  background:var(--color-grey-disabled);
  color:var(--color-dark);
  cursor:not-allowed;
}

/* ========================
   A-FORM MISC
   ======================== */
.requiredClass{ color:var(--color-white-label); font-size:16px; line-height:28px; }
.notification-container{ display:none; } /* keep markup hidden */

/* ========================
   PREFERENCE CENTER STYLES
   (contact opt-in, topics/purpose checkboxes, divider, button)
   ======================== */
.preferenceCenterBlock{ padding:20px 0; }
.contactOptInLabel{ display:block; margin:0 0 8px; color:var(--color-white-label); }
.contactOptInLabel p{ margin:0; color:var(--color-white-label); }

/* Contact point select (shows like other fields) */
.preferenceCenterBlock select.contactPoint{
  width:100%;
  min-height:56px; height:56px;
  border-radius:4px;
  border:1px solid var(--color-white-border);
  background:var(--color-grey);
  color:var(--color-white);
  font-size:16px; line-height:1.4;
  padding:0 16px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:16px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M15.0894 1L7.99423 8.03632L0.899109 1' stroke='%23F8F4F4' stroke-width='2'/%3E%3C/svg%3E");
}
.preferenceCenterBlock select.contactPoint:hover,
.preferenceCenterBlock select.contactPoint:focus{
  border-color:var(--color-lime);
  background:var(--color-grey);
}

/* Topic/Purpose checkboxes (block) */
.preferenceCenterCheckbox{ padding:12px 0; position:relative; }
.preferenceCenterCheckbox input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; }
.preferenceCenterCheckbox label{
  position:relative; display:block;
  padding-left:43px; min-height:24px; line-height:24px;
  color:var(--color-white); cursor:pointer;
}
.preferenceCenterCheckbox label p{ margin:0; }
.preferenceCenterCheckbox label::before{
  content:""; position:absolute; left:0; top:0;
  width:24px; height:24px; background:var(--color-grey);
  border:1px solid var(--color-white-border); border-radius:2px;
}
.preferenceCenterCheckbox label:hover::before{ border-color:var(--color-lime); }
.preferenceCenterCheckbox input[type="checkbox"]:checked + label::before{
  border-color:var(--color-lime); background:var(--color-grey);
}
.preferenceCenterCheckbox input[type="checkbox"]:checked + label::after{
  content:""; position:absolute; left:6px; top:-1px;
  width:9px; height:18px; border:solid var(--color-lime);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* Divider inside PC */
.dividerWrapper th{ border-top-width:2px; border-top-style:solid; border-top-color:var(--color-white-border) !important; }

/* PC submit button inherits .submitButton rules above */

/* ========================
   BUILDER/EMAIL TABLE TWEAKS
   ======================== */
form .inner [data-editorblocktype="Text"] span[style*='font-size:36px'],
form .inner [data-editorblocktype="Text"] p span[style*='font-size:36px']{
  line-height:1.2; color:var(--color-white);
}

/* === FIXES for alignment and checkbox behavior === */

/* 1) Tabellen-TH zentriert -> linksbündig */
.outer th,
.tbContainer th,
.containerWrapper th,
.columnContainer,
.inner { text-align: left; }

/* 2) CTA-Button Wrapper nicht zentrieren */
[data-editorblocktype="SubmitButton"],
[data-editorblocktype="SubmitButton"][align],
.submitButtonWrapper { text-align: left !important; }

/* 3) Checkbox-Label klickbar machen */
.checkboxLabel { pointer-events: auto; }

/* 4) Label-Text linksbündig */
.checkboxLabel,
.preferenceCenterCheckbox label { text-align: left; }

/* === Patch: align and checkbox fixes (2025-08-28) === */

/* 1) Force left alignment inside builder <th> containers */
.outer th,
.tbContainer th,
.containerWrapper th,
.columnContainer,
.inner { text-align: left; }

/* 2) Ensure CTA wrapper never centers the button */
[data-editorblocktype="SubmitButton"],
[data-editorblocktype="SubmitButton"][align],
.submitButtonWrapper { text-align: left !important; }

/* 3) Make checkbox labels fully clickable (input inside label) */
.checkboxLabel { pointer-events: auto; }

/* Ensure checkbox-related text is left-aligned */
.checkboxLabel,
.preferenceCenterCheckbox label { text-align: left; }

/* Fallback bei Fokus (ohne :has) */
.optionSetFormFieldBlock[data-editorblocktype="OptionSetFormField"] select:focus ~ label.block-label,
.optionSetFormFieldBlock[data-editorblocktype="OptionSetFormField"] select:focus ~ label.block-label > div,
.dropdownFormFieldBlock select:focus ~ label.block-label,
.dropdownFormFieldBlock select:focus ~ label.block-label > div {
  top: 4px !important;
  font-size: 12px !important;
}

/* Moderne Browser: bleibt oben, sobald irgendeine echte Option gewählt ist */
@supports (selector(:has(*))) {
  /* Direkter Label-Knoten */
  .optionSetFormFieldBlock[data-editorblocktype="OptionSetFormField"]:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label.block-label,
  .dropdownFormFieldBlock:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label.block-label,
  /* Variante mit innerem <div> */
  .optionSetFormFieldBlock[data-editorblocktype="OptionSetFormField"]:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label.block-label > div,
  .dropdownFormFieldBlock:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label.block-label > div,
  /* zusätzlich: Fokus-Zustand */
  .optionSetFormFieldBlock[data-editorblocktype="OptionSetFormField"]:has(select:focus) > label.block-label,
  .optionSetFormFieldBlock[data-editorblocktype="OptionSetFormField"]:has(select:focus) > label.block-label > div,
  .dropdownFormFieldBlock:has(select:focus) > label.block-label,
  .dropdownFormFieldBlock:has(select:focus) > label.block-label > div {
    top: 4px !important;
    font-size: 12px !important;
  }
}

/* Platzhalter bleibt „leer“ – verhindert ein verfrühtes Floaten */
.optionSetFormFieldBlock select option:first-child[hidden][value=""] { display: block; }

/* Fallback bei Fokus (ohne :has()) */
.optionSetFormFieldBlock select:focus ~ label,
.optionSetFormFieldBlock select:focus ~ label.block-label,
.optionSetFormFieldBlock select:focus ~ label > div,
.optionSetFormFieldBlock select:focus ~ label.block-label > div,
.dropdownFormFieldBlock select:focus ~ label,
.dropdownFormFieldBlock select:focus ~ label.block-label,
.dropdownFormFieldBlock select:focus ~ label > div,
.dropdownFormFieldBlock select:focus ~ label.block-label > div {
  top: 4px !important;
  font-size: 12px !important;
}

/* Moderne Browser: bleibt oben, sobald eine echte Option gewählt ist */
@supports(selector(:has(*))){
  /* Direkter <label> (mit und ohne .block-label) */
  .optionSetFormFieldBlock:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label,
  .optionSetFormFieldBlock:has(select:focus) > label,
  .dropdownFormFieldBlock:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label,
  .dropdownFormFieldBlock:has(select:focus) > label,
  /* Variante mit innerem <div> */
  .optionSetFormFieldBlock:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label > div,
  .optionSetFormFieldBlock:has(select:focus) > label > div,
  .dropdownFormFieldBlock:has(
    select:has(option:checked:not([hidden]):not([disabled]):not([value=""]))
  ) > label > div,
  .dropdownFormFieldBlock:has(select:focus) > label > div {
    top: 4px !important;
    font-size: 12px !important;
  }
}

/* Placeholder bleibt „leer“ */
.optionSetFormFieldBlock select option:first-child[hidden][value=""] { display: block; }

/* === Cross-browser select indent patch === */
:root { --select-indent: 16px; }

.marketingForm .optionSetFormFieldBlock select,
.marketingForm .dropdownFormFieldBlock select {
  text-indent: 0 !important;
  padding-inline-start: var(--select-indent) !important; /* logical, RTL-safe */
  padding-left: var(--select-indent) !important;         /* physical fallback */
  padding-right: 32px;                                   /* Platz für Arrow */
}

@supports (-moz-appearance: none) {
  .marketingForm .optionSetFormFieldBlock select,
  .marketingForm .dropdownFormFieldBlock select {
    -moz-padding-start: var(--select-indent) !important;
  }
}

/* SELECTS – Einheitlich für required & non-required */
/* ========================= */

/* FOCUS: Label floatet beim Öffnen der Select */
.optionSetFormFieldBlock select:focus ~ label,
.optionSetFormFieldBlock select:focus ~ label div,
.dropdownFormFieldBlock select:focus ~ label {
  top: 4px;
  font-size: 12px;
  color: var(--color-lime);
}

/* WERT GEWÄHLT: Label floatet, sobald irgendeine Option ≠ "" gewählt ist
   – unabhängig davon, ob das Feld required ist oder nicht */
.optionSetFormFieldBlock:has(
  select option:checked:not([hidden]):not([disabled]):not([value=""])
) .block-label,
.optionSetFormFieldBlock:has(
  select option:checked:not([hidden]):not([disabled]):not([value=""])
) .block-label > div,
.dropdownFormFieldBlock:has(
  select option:checked:not([hidden]):not([disabled]):not([value=""])
) .block-label {
  top: 4px;
  font-size: 12px;
  color: var(--color-lime);
}

/* === SELECTS — Verhalten wie clean.css (required-unabhängig), an STL angepasst === */

/* Fokus (Fallback) */
.optionSetFormFieldBlock select:focus ~ label,
.optionSetFormFieldBlock select:focus ~ label div,
.dropdownFormFieldBlock select:focus ~ label {
  top: 4px;
  font-size: 12px;
  color: var(--color-lime);
}

/* Wert gewählt (ohne required): Label bleibt oben */
@supports(selector(:has(*))) {
  /* block-label Varianten */
  .optionSetFormFieldBlock:has(select option:checked:not([hidden]):not([disabled]):not([value=""])) .block-label,
  .optionSetFormFieldBlock:has(select option:checked:not([hidden]):not([disabled]):not([value=""])) .block-label > div,
  .dropdownFormFieldBlock:has(select option:checked:not([hidden]):not([disabled]):not([value=""])) .block-label,

  /* direkte Label-Varianten (falls kein .block-label gesetzt ist) */
  .optionSetFormFieldBlock:has(select option:checked:not([hidden]):not([disabled]):not([value=""])) > label,
  .optionSetFormFieldBlock:has(select option:checked:not([hidden]):not([disabled]):not([value=""])) > label > div,
  .dropdownFormFieldBlock:has(select option:checked:not([hidden]):not([disabled]):not([value=""])) > label
  {
    top: 4px;
    font-size: 12px;
    color: var(--color-lime);
  }
}


/* Standard: alle Grid-Items laufen 1-spaltig auf schmalen Viewports, 2-spaltig ab 400px */
th.inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
}
.marketingForm .outer {
                    width: 100% !important;
                }

@media (min-width: 400px) {

  th.inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Hilfsklassen */
  th.inner > .full {
    grid-column: 1 / -1;  /* über beide Spalten */
  }

  th.inner > .half {
    grid-column: auto;    /* Standard: halbe Breite */
  }
}
@media (max-width:768px) {
  
  .marketingForm .outer {
                    width: 100% !important;
                }
th.inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
}
}
/* === override (indent + Firefox) === */
:root { --select-indent: 16px; }

.marketingForm .optionSetFormFieldBlock select,
.marketingForm .dropdownFormFieldBlock select {
  text-indent: 0 !important;
  padding-inline-start: var(--select-indent) !important;
  padding-left: var(--select-indent) !important;
  padding-right: 32px; /* Platz für den Pfeil rechts */
}

@supports (-moz-appearance: none) {
  .marketingForm .optionSetFormFieldBlock select,
  .marketingForm .dropdownFormFieldBlock select {
    -moz-padding-start: var(--select-indent) !important;
  }
}
/* Basis: mobil einspaltig, kleinere Abstände */
th.inner{
  --gap-x: 16px;   /* horizontal */
  --gap-y: 24px;   /* vertikal  */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-y) var(--gap-x);
}

/* Abstände innerhalb der Grid-Items neutralisieren, damit die Gaps wirken */
th.inner > div[data-editorblocktype]{
  margin: 0;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  align-self: start;
}

/* Ab 400px: zweispaltig, großzügigere Abstände – wie im Screenshot */
@media (min-width: 431px){
  th.inner{
    --gap-x: 16px;
    --gap-y: 32px;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-y) var(--gap-x);
  }

  /* Default: volle Breite, außer markiert */
  th.inner > *:not(.half):not(.half-break){ grid-column: 1 / -1; }

  /* Normale halbe Breite (zwei nebeneinander) */
  th.inner > .half{ grid-column: span 1; }
  /* Optional, falls du’s behalten willst – 'dense' regelt das schon */
  th.inner > .half:nth-child(2n){ grid-column: auto; }

  /* Sonderfall: halbe Optik, aber eigene Zeile (rechte Spalte frei) */
  th.inner > .half-break{
    grid-column: 1 / -1;                                 /* ganze Zeile */
    max-width: calc((100% - var(--gap-x)) / 2);          /* optisch „halb“ */
    width: 100%;
    justify-self: start;
  }
}

/* (Optional) Etwas mehr Luft vor/ nach dem Radioblock, wie im Screenshot */
.twoOptionFormFieldBlock{ margin-top: 8px; }