/* VLT WBC: Leverdatum-veld UX fixes */

/* ── Bevestigingstekst onder het veld ─────────────────────────────────────── */
.vlt-wbc-confirm {
  display: block;
  margin-top: 8px;
  font-size: 0.9em;
  line-height: 1.4;
  color: #555;
  clear: both;
}

/* ── Floating label fix voor Blocks checkout ──────────────────────────────── *
 *
 * WooCommerce Blocks gebruikt een floating-label patroon: het label zweeft
 * als placeholder en schuift omhoog als het veld actief is (.is-active).
 * De datepicker stelt de waarde programmatisch in waarna React de .is-active
 * klasse niet altijd toevoegt. Dit zorgt voor overlappende tekst.
 *
 * Fix: als het input-veld een waarde heeft (niet leeg), verberg het label
 * of verplaats het via CSS — ongeacht de React-state.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Veld met waarde: label omhoog (Blocks floating label patroon) */
.wc-block-components-text-input input[id*="vlt-wbc-delivery"]:not(:placeholder-shown) ~ label,
.wc-block-components-text-input.is-active input[id*="vlt-wbc-delivery"] ~ label {
  opacity: 0.7;
  font-size: 0.75em;
  top: 8px;
  transform: none;
}

/* Directe aanpak: verberg het zwevende label volledig als het veld gevuld is.
   Het label is dan niet meer nodig want de datum staat al zichtbaar in het veld. */
.wc-block-components-text-input:has(input[id*="vlt-wbc-delivery"]:not([value=""])) label,
.wc-block-components-text-input.is-active:has(input[id*="vlt-wbc-delivery"]) label {
  font-size: 0.72em !important;
  top: 8px !important;
  transform: none !important;
  opacity: 0.75;
}

/* Klassieke checkout: het label boven het veld (geen floating) */
.vlt-delivery-datetime label {
  display: block;
  margin-bottom: 4px;
}

/* Confirm altijd op nieuwe regel */
[class*="vlt-wbc-delivery-datetime"] .vlt-wbc-confirm,
.wc-block-components-text-input + .vlt-wbc-confirm {
  display: block;
  width: 100%;
  margin-top: 6px;
}