/* ==============================================================
 * css/location.css
 * Overrides for the location-page template family (the 9 area
 * pages + 4 aircond-repair-<city> combo pages, all generated from
 * petaling-jaya.html). These selectors also exist in base.css with
 * different values used by the homepage/service pages; this file's
 * link tag comes after base.css on location pages only, so these
 * intentionally win the cascade there without touching any other
 * page. Extracted 2026-08-04 from a 401-line block that was
 * duplicated byte-for-byte across all 13 files.
 * ============================================================== */

.hero-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(8px);
}

.hero-card-title {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 28px;
}

.cta-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--deep) 60%, var(--blue) 100%);
  padding: 80px 24px;
  text-align: center;
  position: relative; overflow: hidden;
}

.cta-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }

.cta-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }

.cta-title { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); color: white; margin-bottom: 16px; line-height: 1.2; }

.cta-sub { font-size: 17px; color: rgba(255,255,255,0.7); margin-bottom: 36px; }

.cta-phone {
  font-size: 15px; color: rgba(255,255,255,0.6);
  margin-top: 20px;
}

.cta-phone a { color: var(--sky); text-decoration: none; font-weight: 600; }

.float-wa {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 200;
  width: 60px; height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: float-pulse 3s ease-in-out infinite;
}

.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  background: var(--ice);
  border: 1px solid rgba(0,119,204,0.2);
  border-radius: 99px;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
}

.lang-btn {
  padding: 5px 12px; border-radius: 99px;
  border: none; background: transparent;
  font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--muted); transition: background 0.2s, color 0.2s;
  font-family: var(--sans);
}