/* JO Form date field (2.2.1). Scoped to .jo-date-field; look follows the
   reference quote form (.pp-field). Override the --jo-date-* variables in your template. */
.jo-date-field {
    --jo-date-ink: var(--pp-onyx, #141312);
    --jo-date-bg: var(--pp-white, #fff);
    --jo-date-border: rgba(20, 19, 18, .28);
    --jo-date-focus: var(--pp-gold-deep, #A8844F);
    --jo-date-muted: var(--pp-graphite, #5C5650);
    --jo-date-error: #A3192E;
    --jo-date-radius: var(--pp-radius, 4px);
    display: grid;
    gap: .4rem;
    align-content: start;
}
.jo-date-field .jof-input.jo-date-field__input {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--jo-date-ink);
    background: var(--jo-date-bg);
    border: 1px solid var(--jo-date-border);
    border-radius: var(--jo-date-radius);
    padding: .75rem .875rem;
    min-height: 48px;
    transition: border-color .2s, box-shadow .2s;
    color-scheme: light;
    box-sizing: border-box;
}
.jo-date-field .jof-input.jo-date-field__input:focus {
    outline: none;
    border-color: var(--jo-date-focus);
    box-shadow: 0 0 0 3px rgba(168, 132, 79, .25);
}
.jo-date-field .jof-input.jo-date-field__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .7;
}
.jo-date-field .jof-input.jo-date-field__input[aria-invalid="true"] {
    border-color: var(--jo-date-error);
    box-shadow: 0 0 0 1px var(--jo-date-error);
}
.jo-date-field .jo-date-field__hint {
    margin: 0;
    font-size: .8125rem;
    color: var(--jo-date-muted);
}
.jo-date-field .jo-date-field__err {
    margin: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--jo-date-error);
}
.jo-date-field .jo-date-field__err:empty {
    display: none;
}