/* =========================================
   ДОДАТКОВІ СТИЛІ ДЛЯ РЕЄСТРАЦІЇ ФІЗ. ОСІБ
   ========================================= */

/* Контейнер форми */
.registration-box {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 20px !important;
    width: 520px !important;
    padding: 36px 40px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    background: var(--color-white) !important;
}

/* Інпути для цієї сторінки */
#numAccount, #phone, #email,
#city, #street, #house, #apartment {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    font-size: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-input-bg);
}

/* =========================================
   РЯДОК АДРЕСИ (вул. / буд. / кв.)
   ========================================= */
.address-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.address-row .field {
    margin-bottom: 0;
}

.address-street {
    flex: 3 1 0;
    min-width: 0;
}

.address-house {
    flex: 1.2 1 0;
    min-width: 0;
}

.address-apartment {
    flex: 1 1 0;
    min-width: 0;
}

.address-row input {
    font-size: 16px !important;
}

/* =========================================
   AUTOCOMPLETE
   ========================================= */
.autocomplete-field {
    position: relative;
}

.autocomplete-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 100;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.autocomplete-list.active {
    display: block;
}

.autocomplete-item {
    padding: 10px 14px;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-main);
    transition: background-color 0.15s ease;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background-color: #adc2eb;
    color: var(--color-text-main);
}

.autocomplete-item .match {
    font-weight: 700;
    color: var(--color-primary);
}

/* Повідомлення "нічого не знайдено" */
.autocomplete-empty {
    padding: 10px 14px;
    font-size: 14px;
    color: #9ca3af;
    font-style: italic;
}

/* Стан "коректно заповнено" (зелена підсвітка) */
#numAccount.valid,
#phone.valid,
#email.valid,
#password.valid,
#apartment.valid {
    border-color: var(--color-success);
    background-color: #f0fdf4;
}

/* Стан "рахунок не знайдений" */
#numAccount.invalid {
    border-color: var(--color-error-outline);
    background-color: #fef2f2;
}

/* Вибране значення autocomplete */
#city.selected,
#street.selected,
#house.selected {
    border-color: var(--color-success);
    background-color: #f0fdf4;
}

/* Повідомлення про помилки з бекенду */
#ErrMsgPhone,
#ErrMsgAccount {
    display: none;
    margin-top: 15px;
    float: left;
    margin-left: 3%;
    margin-right: 3%;    
    border: 1px solid var(--color-error-msg);
    border-radius: 5px;
    box-shadow: var(--shadow-error);
}

/* Чекбокс 'Приватний будинок' */
.private-house-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    margin-top: -10px;
    cursor: pointer;
}

.private-house-wrap input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
}

.private-house-wrap .checkbox-text {
    font-size: 14px;
    color: #444;
}

/* =========================================
   МОБІЛЬНІ ПРИСТРОЇ
   ========================================= */
@media screen and (min-width: 100px) and (max-width: 768px) {
    .registration-box {
        width: auto !important;
        padding: 24px 16px !important;
        margin-top: 10px !important;
        border: none !important;
        box-shadow: none;
    }
    .autocomplete-list {
        max-height: 160px;
    }
    .address-row {
        flex-direction: column;
        gap: 0;
    }
    .address-row .field {
        margin-bottom: 18px;
    }
}