/* Themed off core FluentCart checkout CSS variables so the field inherits the
   store's borders, colors, and radius (light/dark) automatically. Fallbacks
   mirror core's own defaults from checkout.css. */
.fct-pickup-date-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Below the shipping options card: top gap matches section spacing, bottom gap
   keeps it clear of the consent checkbox that follows. */
.fct-pickup-date-wrap--below {
    margin-top: 14px;
    margin-bottom: 22px;
}

.fct-pickup-date-wrap label {
    font-size: 14px;
    font-weight: 500;
    color: var(--fct-checkout-primary-text-color, #2F3448);
}

.fct-pickup-date-row {
    display: flex;
    gap: 10px;
}

/* Wrapper takes the flex sizing so the overlay placeholder can be positioned
   over its input. */
.fct-pickup-field {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

.fct-pickup-date-wrap .fct-pickup-date-row input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 48px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--fct-checkout-input-text-color, #2F3448);
    background: var(--fct-checkout-input-bg-color, #ffffff);
    border: 1px solid var(--fct-checkout-input-border-color, #D6DAE1);
    /* !important beats core's higher-specificity `input:not([type=checkbox],[type=radio]){border-radius:0}` */
    border-radius: 10px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    /* Normalize iOS Safari's native date/time chrome to match desktop. */
    -webkit-appearance: none;
    appearance: none;
}

/* iOS renders the value in this pseudo-element, centered by default. */
.fct-pickup-date-row input::-webkit-date-and-time-value {
    text-align: left;
}

/* Empty state: hide the browser's own hint text (desktop Chrome's
   "dd/mm/yyyy" / "--:-- --"; iOS shows nothing) so the overlay placeholder is
   the single, identical empty-state hint everywhere. Text comes back on focus
   (desktop segment typing) or once a value is set (.fct-has-value via JS). */
.fct-pickup-date-row input:not(.fct-has-value):not(:focus) {
    color: transparent;
}

.fct-pickup-placeholder {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 15px;
    line-height: 1.4;
    color: var(--fct-checkout-input-text-color, #2F3448);
    opacity: 0.45;
}

.fct-pickup-date-row input.fct-has-value + .fct-pickup-placeholder,
.fct-pickup-date-row input:focus + .fct-pickup-placeholder {
    display: none;
}

.fct-pickup-date-row input:hover {
    border-color: var(--fct-checkout-active-border-color, #8D9095);
}

.fct-pickup-date-row input:focus {
    outline: none;
    border-color: var(--fct-checkout-active-border-color, #8D9095);
    box-shadow: 0 0 0 3px var(--fct-checkout-focus-ring-color, rgba(141, 144, 149, 0.15));
}

/* Native calendar/clock button: nudge color + click affordance. */
.fct-pickup-date-row input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

.fct-pickup-date-row input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}