/* Locale-stable dd.mm.yyyy date fields (wraps native type=date) */
.checkout-date-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  max-width: 100%;
  gap: 0;
}

.checkout-date-wrap .checkout-date-display {
  box-sizing: border-box;
  min-width: 7.25rem;
  max-width: 10rem;
  width: 100%;
  font: inherit;
  line-height: inherit;
  padding: 0.35em 0.5em;
  border: 1px solid var(--border-strong, var(--border, #888));
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--bg-input, var(--bg-surface, #fff));
  color: var(--text, inherit);
}

.checkout-date-wrap .checkout-date-picker-btn {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.45em;
  border: 1px solid var(--border-strong, var(--border, #888));
  border-radius: 0 6px 6px 0;
  background: var(--bg-btn, var(--bg-muted, #eee));
  color: var(--text-subtle, var(--text, inherit));
  cursor: pointer;
  font-size: 0.75em;
  line-height: 1;
}

.checkout-date-wrap .checkout-date-picker-btn:hover {
  background: var(--bg-btn-hover, var(--bg-muted-darker, #ddd));
}

.checkout-date-wrap .checkout-date-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.checkout-date-wrap .checkout-date-display:focus {
  outline: 2px solid var(--link, #4ea1ff);
  outline-offset: 1px;
  z-index: 1;
}