/* =========================================================================
   CITY LANDING PAGES (bulksms-in-<city>.php) — shared template styles.
   Scoped with a .city- prefix so every future city page (Lahore, Islamabad,
   etc.) can reuse this exact file/markup structure, just swapping content.
   The hero itself reuses the site's own .hero component (same background-
   glow token as every other page's hero) rather than a one-off look.
   ========================================================================= */
.city-breadcrumb { font-size: .82rem; color: var(--wa-muted); margin-bottom: 1.1rem; }
.city-breadcrumb a { color: var(--wa-muted); }
.city-breadcrumb a:hover { color: var(--wa-teal); }

/* City pages stack a breadcrumb + disclaimer notice above the actual hero
   content (eyebrow/H1), which .hero's normal 5rem/3rem top padding wasn't
   designed for — that combination read as a big empty gap under the navbar.
   Trim it back for this page type only; the plain homepage .hero is untouched. */
.hero-city { padding-top: 2rem; }
@media (max-width: 991.98px) { .hero-city { padding-top: 1.5rem; } }

/* "SMS provider only, not a data/number supplier" disclaimer — same amber
   compliance-card family as .api-alert-card / .price-alert-banner */
.city-notice { background: #fff8ee; border: 1px solid #f5d9a8; border-radius: var(--radius-card); padding: .9rem 1.15rem; margin-bottom: 1.6rem; }
.city-notice p { color: #8a5a12; font-size: .85rem; }
.city-notice i { color: #c07d1f; }

/* Coverage-area chips under the hero copy (reuses .badge-pill, just the row layout is new) */
.city-areas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }

/* Hero photo: a real landmark photograph, styled as a floating framed card
   with its caption/credit overlaid directly on the image (dark gradient
   scrim for contrast) instead of sitting as plain text underneath it. */
.city-hero-photo {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-lg); isolation: isolate;
}
.city-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.city-hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4, 25, 20, .82) 100%);
}
.city-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.5rem 1.6rem 1.2rem; color: #fff; }
.city-hero-caption strong { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 700; }
.city-hero-caption strong i { color: var(--wa-green); }
.city-hero-caption span { display: block; font-size: .76rem; color: rgba(255, 255, 255, .72); margin-top: .3rem; }
.city-hero-caption a { color: rgba(255, 255, 255, .92); text-decoration: underline; }

/* "——— Serving Pakistan Since 2014 ———" divider above the operator badges */
.city-trust-divider { display: flex; align-items: center; gap: 1rem; margin-top: 2.2rem; }
.city-trust-divider .line { flex: 1 1 auto; height: 1px; background: var(--wa-line); }
.city-trust-divider .label { white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--wa-ink); }
.city-trust-divider .label strong { color: var(--wa-green); font-weight: 800; }

/* Operator logos under the hero CTAs — round white badges (replaces a plain
   stats row so the hero shows real network coverage at a glance) */
.city-operators { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.city-operator-badge {
  position: relative;
  width: 84px; height: 84px; border-radius: 50%; flex: 0 0 84px;
  background: var(--wa-surface); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  cursor: pointer;
}
.city-operator-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Pure-CSS tooltip ("Direct Connectivity With <Operator>") — no JS, content
   comes from data-tooltip so nothing relies on an inline style="" attribute
   (this site's CSP has no unsafe-inline). tabindex="0" on the badge lets
   keyboard users trigger it too via :focus-visible. */
.city-operator-badge::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--wa-ink); color: #fff;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: .45rem .85rem; border-radius: 8px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 10;
  transition: opacity .18s ease, transform .18s ease;
}
.city-operator-badge::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent; border-top-color: var(--wa-ink);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 10;
  transition: opacity .18s ease, transform .18s ease;
}
.city-operator-badge:hover::after, .city-operator-badge:focus-visible::after,
.city-operator-badge:hover::before, .city-operator-badge:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Body copy (intro paragraph + area chips section, between hero and tiles) */
.city-copy { color: var(--wa-body); font-size: 1.05rem; max-width: 760px; margin: 0 auto; text-align: center; }
.city-copy p { margin-bottom: 0; }

/* Closing paragraph above the final CTA band */
.city-outro { color: var(--wa-body); font-size: 1.03rem; max-width: 760px; margin: 0 auto 2.4rem; text-align: center; }