﻿.input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ui-label {
    font-weight: 400;
    font-size: 16px;
    color: #fff;
}

.ui-input {
    width: 100%;
    background: var(--bg-section-dark);
    border: 1px solid var(--color-green-30);
    border-radius: 12px;
    padding: 10px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    outline: none;
    transition: border-color var(--transition) ease;
}

.ui-input::placeholder {
    color: var(--text-placeholder);
}

.ui-input:focus {
    border-color: var(--color-green);
}

.ui-textarea {
    resize: vertical;
    min-height: 120px;
}

.ui-textarea-noresize {
    resize: none;
}

.ui-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    height: 43px;
    text-align: center;
}

.ui-select option {
    background: #0d1f1a;
    color: var(--text-light);
}

.date-input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.date-input-selects {
    display: flex;
    gap: 8px;
}

.date-input-day   { flex: 0 0 80px; }
.date-input-month { flex: 1; }
.date-input-year  { flex: 0 0 100px; }

@media (max-width: 375px) {
    .date-input-day  { flex: 0 0 64px; }
    .date-input-year { flex: 0 0 84px; }
}

.ui-input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
}

.ui-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(55%) sepia(60%) saturate(400%) hue-rotate(110deg);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transition) ease;
}

.ui-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.ui-input[type="date"]::-webkit-datetime-edit {
    color: var(--text-white);
}

.ui-input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: var(--text-white);
}

.ui-input[type="date"]::-webkit-datetime-edit-text {
    color: var(--text-muted);
    padding: 0 2px;
}

.ui-input[type="date"]::-webkit-datetime-edit-day-field,
.ui-input[type="date"]::-webkit-datetime-edit-month-field,
.ui-input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--text-white);
}

.ui-input[type="date"]::-webkit-datetime-edit-day-field:focus,
.ui-input[type="date"]::-webkit-datetime-edit-month-field:focus,
.ui-input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background: var(--color-green-20);
    border-radius: 3px;
    outline: none;
}