/* ==========================================================================
   زفلتة - صفحات المدن
   ========================================================================== */
.city-text { color: var(--gray); font-size: 1.06rem; }
.city-text strong { color: var(--navy); }
.city-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    padding: 0;
    margin: 18px 0 26px;
    list-style: none;
    font-weight: 700;
}
.city-points i { color: var(--gold); margin-left: 6px; }
.city-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.city-media { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg); }
.city-media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.city-media-tag {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(8, 29, 48, .85);
    color: #fff;
    font-weight: 700;
}
.city-media-tag i { color: var(--gold); }

.city-services { background: var(--white); }
.city-svc {
    display: block;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--white);
    color: var(--navy);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.city-svc:hover,
.city-svc.in-focus { color: var(--navy); transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.city-svc img { width: 100%; height: 190px; object-fit: cover; transition: transform .8s var(--ease); }
.city-svc:hover img, .city-svc.in-focus img { transform: scale(1.08); }
.city-svc-body { position: relative; padding: 34px 22px 22px; }
.city-svc-icon {
    position: absolute;
    top: -28px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 4px solid #fff;
    border-radius: 16px;
    background: var(--gold);
    color: var(--navy);
    font-size: 1.4rem;
}
.city-svc h3 { font-size: 1.15rem; margin-bottom: 8px; }
.city-svc p { margin: 0; color: var(--gray); font-size: .95rem; }

.city-areas { background: linear-gradient(160deg, var(--navy), var(--navy-dark)); }
.city-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.city-chips li {
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 30px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-weight: 700;
}
.city-chips i { color: var(--gold); margin-left: 4px; }

.city-faq { background: var(--white); }
.city-others { padding: 22px; border-radius: 20px; background: var(--cream); }
.city-others h3 { font-size: 1.05rem; margin-bottom: 12px; }
.city-others a {
    display: inline-block;
    margin: 0 0 8px 6px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    font-size: .92rem;
}
.city-others a:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 767.98px) {
    .city-points { grid-template-columns: 1fr; }
    .city-actions .btn { flex: 1; }
    .city-svc img { height: 170px; }
}