/* 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;
}

.docs-field .checkout-date-wrap {
  display: flex;
  width: 100%;
}
.docs-field .checkout-date-wrap .checkout-date-display {
  flex: 1 1 auto;
  max-width: none;
}

.checkout-date-panel {
  position: fixed;
  z-index: 11000;
  display: grid;
  grid-template-columns: minmax(4.2rem, 1fr) minmax(7rem, 1.4fr) minmax(5.2rem, 1fr);
  gap: 8px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--border, #888);
  background: var(--bg-surface, #1c2430);
  color: var(--text, inherit);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.checkout-date-panel[hidden] {
  display: none !important;
}
.checkout-date-panel-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted, #9aa4b2);
}
.checkout-date-panel-field select {
  font: inherit;
  min-height: 32px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border, #888);
  background: var(--bg-input, var(--bg-surface, #fff));
  color: var(--text, inherit);
}