/* ===========================
   NEAREST CITY / LOKASI TERDEKAT
   =========================== */

.nearest-city-section {
    padding: 2.5rem 1rem;
    background: #FFFFFF; /* abu soft premium */
}

/* Header */
.nearest-city-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.nearest-city-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #101010; /* hitam elegan */
    margin: 0;
}

.nearest-city-header p {
    margin: 0;
    font-size: 0.9rem;
    color: #4A4A4A; /* abu premium */
}

/* LIST WRAPPER */
.nearest-city-list-wrapper {
    position: relative;
    max-height: 190px;
    overflow: hidden;
    padding-bottom: 0.5rem;
}

.nearest-city-list-wrapper--expanded,
.nearest-city-list-wrapper--no-toggle {
    max-height: none;
    padding-bottom: 0;
}

/* LIST KOTA (CHIP) */
.nearest-city-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* CHIP */
.nearest-city-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #101010; /* hitam elegan */
    background: #FFFFFF;
    border: 1px solid #E3E6EB; /* abu premium */

    text-decoration: none;
    cursor: pointer;

    transition: background 0.15s ease,
                border-color 0.15s ease,
                transform 0.15s ease,
                box-shadow 0.15s ease;

    white-space: nowrap;
}

.nearest-city-chip:hover {
    background: #EAF1FF;          /* biru-50 soft */
    border-color: #1E6BFF;        /* biru brand */
    box-shadow: 0 3px 10px rgba(30, 107, 255, 0.15);
    transform: translateY(-1px);
}

/* FADE DI BAWAH LIST */
.nearest-city-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;

    background: linear-gradient(
        to bottom,
        rgba(245, 246, 250, 0),
        #F5F6FA 80%
    ); /* fade abu soft premium */

    pointer-events: none;
}

.nearest-city-list-wrapper--expanded .nearest-city-fade {
    display: none;
}

/* TOGGLE BUTTON */
.nearest-city-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;

    font-size: 0.85rem;
    font-weight: 600;

    color: #1E6BFF; /* biru brand */
    background: transparent;

    border-radius: 999px;
    border: 1px dashed rgba(30, 107, 255, 0.55);

    cursor: pointer;

    transition: background 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease;
}

.nearest-city-toggle:hover {
    background: #EAF1FF; /* biru-50 */
    border-color: #1E6BFF;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 640px) {
    .nearest-city-section {
        padding: 2rem 1rem;
    }

    .nearest-city-header h2 {
        font-size: 1.1rem;
    }

    .nearest-city-chip {
        font-size: 0.8rem;
    }
}