/* Стили для страницы списка городов */

.cities-container {
    display: block;
    padding: var(--spacer-m);
    margin-top: 80px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cities-header {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 100%;
    padding: var(--spacer-m);    
    background-color: var(--bg1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacer-sm);
    padding-top: var(--spacer-xl);
    border-radius: 0px 0px var(--spacer-m) var(--spacer-m);
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
}

.cities-header h1 {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: var(--spacer-xs);
}

/* Форма поиска */
.search-form {
    display: flex;
    gap: var(--spacer-s);
}

.search-input {
    flex: 1;
}

.search-btn {
    width: auto;
    padding-left: var(--spacer-l);
    padding-right: var(--spacer-l);
}

/* Секция страны */
.country-section {
    margin-top: var(--spacer-l);
    margin-bottom: var(--spacer-xl);
}

.country-name {
    margin-left: var(--spacer-sm);
    margin-bottom: var(--spacer-m);
}

/* Сетка городов */
.cities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacer-sm);
}


@media screen and (max-width: 700px) {
    /* Сетка городов */
    .cities-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacer-sm);
    }
}






.city-background {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: var(--spacer-s);
}

.city-background-default {
    background-color: var(--secondary30);
}

.city-content {
    padding: var(--spacer-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacer-sm);
}

.city-coat {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 50%;
    position: absolute;
    bottom: 100px;
    left: var(--spacer-m);
    display: none;
}



/* Статистика города */
.city-stats {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: var(--spacer-l);
    align-items: center;
}

.city-stats span{
    display: flex;
    flex-direction: row;
    gap: var(--spacer-xs);
}

.stat-item {
    display: flex;
    flex-direction: row;
}

.stat-icon {
    font-size: 20px;
}





/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: var(--spacer-xl);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacer-m);
    opacity: 0.3;
}