/* ─── Light field design system ─── */

.light-field,
.custom-select__trigger {
    height: 48px !important;
    width: 100%;
    padding: 12px 40px 12px 16px !important;
    border: 0.5px solid var(--light-field-border) !important;
    border-radius: 12px !important;
    background: var(--light-field-background);
    font-family: Commissioner;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--light-text-secondary);
    box-sizing: border-box;
    outline: none;
    box-shadow: none !important;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    appearance: none !important;
    -webkit-appearance: none;
}

@media (max-width: 768px) {
    .light-field {
        height: 44px !important;
    }
}

.light-field--select,
.custom-select__trigger {
    --field-select-arrow: url('../image/arrow_down_not_filled_48x48.svg');
    --field-select-arrow-size: 48px 48px;
    padding-right: 48px !important;
    background: var(--light-field-background) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    cursor: pointer;
}

.custom-select.open .custom-select__trigger,
[data-city-wrapper]:has(.city-dropdown.open) .light-field--select,
[data-intermediate-point-wrapper]:has(.city-dropdown.open) .light-field--select {
    --field-select-arrow: url('../image/arrow_up_not_filled_48x48.svg');
}

@media (max-width: 768px) {
    .light-field--select,
    .custom-select__trigger {
        --field-select-arrow-size: 40px 40px;
        --field-select-arrow: url('../image/arrow_down_not_filled_40x40.svg');
        height: 40px !important;
        padding-right: 40px !important;
    }

    .custom-select.open .custom-select__trigger,
    [data-city-wrapper]:has(.city-dropdown.open) .light-field--select,
    [data-intermediate-point-wrapper]:has(.city-dropdown.open) .light-field--select {
        --field-select-arrow: url('../image/arrow_up_not_filled_40x40.svg');
    }
}

.light-field-input-wrap {
    position: relative;
    width: 100%;
}

.light-field-input-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: url('../image/pen_not_filled_48x48.svg') no-repeat center / 48px 48px;
    pointer-events: none;
    z-index: 2;
}

.light-field--input {
    padding-right: 48px !important;
    background: var(--light-field-background);
    cursor: text;
}

.light-field:-webkit-autofill,
.light-field:-webkit-autofill:hover,
.light-field:-webkit-autofill:focus,
.light-field:-webkit-autofill:active {
    -webkit-text-fill-color: var(--blue-plaza-active) !important;
    caret-color: var(--blue-plaza-active);
    box-shadow: 0 0 0 1000px var(--light-field-background) inset !important;
    background-color: var(--light-field-background) !important;
    transition: background-color 99999s ease-out 0s;
}

.light-field--date {
    padding: 12px 48px 12px 16px !important;
    background: var(--light-field-background) url('../image/calendar_not_filled_48x48.svg') no-repeat right center / 48px 48px;
    color: var(--light-text-secondary);
    cursor: pointer;
    position: relative;
}

.light-field--date.has-value {
    color: var(--blue-plaza-active);
}

.light-field--date:not(.has-value)::-webkit-datetime-edit {
    color: var(--light-text-secondary);
}

.light-field--date.has-value::-webkit-datetime-edit {
    color: var(--blue-plaza-active);
}

.light-field--date::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.light-field::placeholder {
    color: var(--light-text-secondary) !important;
    font-family: Commissioner;
    font-weight: 400;
    font-size: 16px;
}

.custom-select__trigger--placeholder {
    color: var(--light-text-secondary);
}

.light-field:hover,
.custom-select__trigger:hover {
    border: 0.5px solid var(--light-field-border-hover) !important;
}

.light-field:focus,
.light-field--select:focus,
.custom-select.open .custom-select__trigger,
.custom-select__trigger:focus-visible,
[data-city-wrapper]:has(.city-dropdown.open) .light-field--select,
[data-intermediate-point-wrapper]:has(.city-dropdown.open) .light-field--select {
    border: 0.5px solid var(--primary-blue) !important;
    color: var(--blue-plaza-active);
}

.light-field:not(.light-field--date):not(:placeholder-shown):not(:focus):not(:hover):not(:disabled),
.light-field--date.has-value:not(:focus):not(:hover):not(:disabled),
.custom-select__trigger:not(.custom-select__trigger--placeholder):not(:focus-visible):not(:hover) {
    border: 0.5px solid var(--light-field-border) !important;
    color: var(--blue-plaza-active);
}

.custom-select.open .custom-select__trigger:not(.custom-select__trigger--placeholder) {
    color: var(--blue-plaza-active);
}

.light-field--select:disabled {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
    cursor: not-allowed;
}

.custom-select__trigger:disabled {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
    cursor: not-allowed;
}

.light-field--input:disabled {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background);
    color: var(--light-text-secondary);
    cursor: not-allowed;
}

.light-field--date:disabled {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background) url('../image/calendar_not_filled_48x48.svg') no-repeat right center / 48px 48px;
    color: var(--light-text-secondary);
    cursor: not-allowed;
}

.light-field-group--error .light-field--select {
    border: 0.5px solid var(--light-stroke-negative) !important;
    background: var(--light-background-tint) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
}

.light-field-group--error .custom-select__trigger {
    border: 0.5px solid var(--light-stroke-negative) !important;
    background: var(--light-background-tint) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
}

.light-field-group--error .light-field--input {
    border: 0.5px solid var(--light-stroke-negative) !important;
    background: var(--light-background-tint);
    color: var(--light-text-secondary);
}

.light-field-group--error .light-field--date {
    border: 0.5px solid var(--light-stroke-negative) !important;
    background: var(--light-background-tint) url('../image/calendar_not_filled_48x48.svg') no-repeat right center / 48px 48px;
    color: var(--light-text-secondary);
}

.light-field-group--locked,
.custom-select.custom-select--locked,
[data-city-select-single].light-field-group--locked {
    pointer-events: none;
    opacity: 0.65;
}

.custom-select.custom-select--locked .custom-select__trigger {
    cursor: not-allowed;
}

.light-field-group--locked .light-field--select {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
}

.light-field-group--locked .custom-select__trigger {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
}

.light-field-group--locked .light-field--input {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background);
    color: var(--light-text-secondary);
}

.light-field-group--locked .light-field--date {
    border: 0.5px solid var(--light-field-border) !important;
    background: var(--light-field-background) url('../image/calendar_not_filled_48x48.svg') no-repeat right center / 48px 48px;
    color: var(--light-text-secondary);
}

.light-field-group--error .light-field:hover,
.light-field-group--error .light-field:focus,
.light-field-group--error .custom-select__trigger:hover,
.light-field-group--error .custom-select.open .custom-select__trigger {
    border: 0.5px solid var(--light-stroke-negative) !important;
}

.light-field-group--error .light-field--select,
.light-field-group--error .light-field--select:hover,
.light-field-group--error .light-field--select:focus,
.light-field-group--error [data-city-wrapper]:has(.city-dropdown.open) .light-field--select,
.light-field-group--error [data-intermediate-point-wrapper]:has(.city-dropdown.open) .light-field--select {
    background: var(--light-background-tint) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
}

.light-field-group--error .custom-select__trigger,
.light-field-group--error .custom-select__trigger:hover,
.light-field-group--error .custom-select.open .custom-select__trigger {
    border: 0.5px solid var(--light-stroke-negative) !important;
    background: var(--light-background-tint) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    color: var(--light-text-secondary);
}

.light-field-group--error .custom-select__trigger:not(.custom-select__trigger--placeholder):not(:focus-visible):not(:hover) {
    background: var(--light-background-tint) var(--field-select-arrow) no-repeat right center / var(--field-select-arrow-size);
    border: 0.5px solid var(--light-stroke-negative) !important;
    color: var(--light-text-secondary);
}

.light-field-group--error .light-field--input,
.light-field-group--error .light-field--input:hover,
.light-field-group--error .light-field--input:focus {
    background: var(--light-background-tint);
    color: var(--light-text-secondary);
}

.light-field-group--error .light-field--date,
.light-field-group--error .light-field--date:hover,
.light-field-group--error .light-field--date:focus {
    background: var(--light-background-tint) url('../image/calendar_not_filled_48x48.svg') no-repeat right center / 48px 48px;
    color: var(--light-text-secondary);
}