/* ==========================================================
   Massage Army Spa — Footer Component
   File: css/components/footer.css
   Warna: biru permanen (--mas-primary: #1A4DB3), tidak lagi mengikuti
   prefers-color-scheme pengunjung. Untuk ganti warna footer lagi nanti,
   cukup edit 5 nilai --mas-* di blok .mas-footer di bawah ini saja —
   semua selector lain di file ini sudah pakai var(), tidak ada hex hardcode.
   ========================================================== */

.mas-footer {
  --mas-primary: #ffffff;
  --mas-secondary: #ffffff;
  --mas-tertiary: #ffffff;
  --mas-bg-hard: #AACEFF;
  --mas-bg-soft: #DBE9F5;

  /* Gradient 4-warna, diagonal jam 10 → jam 4 (120deg), terang sedikit
     (0-15%) gelap dominan (15-100%). Ganti nilai stop di sini kalau mau
     sesuaikan lagi proporsinya. */
  --mas-footer-sunset: #3981D6;
  --mas-footer-primary: #0080FF;
  --mas-footer-secondary: #005BFE;
  --mas-footer-tertiary: #1A4DB3;
  --mas-footer-bg: linear-gradient(
    120deg,
    var(--mas-footer-sunset) 0%,
    var(--mas-footer-primary) 15%,
    var(--mas-footer-secondary) 30%,
    var(--mas-footer-tertiary) 100%
  ); /* cadangan solid: #1A4DB3. */
  --mas-footer-bg-dark: #123d94; /* cadangan: #1A4DB3. */
  --mas-text: #ffffff;
  --mas-text-soft: rgba(255, 255, 255, 0.75);
  --mas-border: rgba(255, 255, 255, 0.18);
  --mas-wa-green: #25d366;

  background: var(--mas-footer-bg);
  color: var(--mas-text);
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* RING 1: CTA */
.mas-footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem clamp(1rem, 5vw, 4rem);
  border-bottom: 1px solid var(--mas-border);
}
.mas-footer__cta-text h3 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--mas-text);
}
.mas-footer__cta-btn {
  background: var(--mas-wa-green);
  color: #ffffff;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}
.mas-footer__cta-btn:hover {
  background: #1fa855;
  transform: translateY(-1px);
  color: #ffffff;
}

/* RING 2: 4 KOLOM */
.mas-footer__main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 2.5rem clamp(1rem, 5vw, 4rem);
  border-bottom: 1px solid var(--mas-border);
}
.mas-footer__col h4 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mas-primary);
}
.mas-footer__about {
  color: var(--mas-text-soft);
  margin: 0 0 1rem;
}
.mas-footer__trust-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--mas-text-soft);
}
.mas-footer__trust-mini li { margin-bottom: 0.4rem; }

.mas-footer__links {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}
.mas-footer__links li { margin-bottom: 0.5rem; }
.mas-footer__links a,
.mas-footer__more-link {
  color: var(--mas-text-soft);
  text-decoration: none;
}
.mas-footer__links a:hover,
.mas-footer__more-link:hover { color: var(--mas-primary); text-decoration: underline; }
.mas-footer__more-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--mas-primary);
}

/* Sub-heading "Layanan Populer" di bawah "Treatment Layanan", satu kolom
   yang sama -- lebih kecil dari h4 supaya kelihatan sebagai blok kedua,
   bukan kolom terpisah. */
.mas-footer__sub-heading {
  margin: 1.25rem 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mas-text-soft);
  border-top: 1px solid var(--mas-border);
  padding-top: 1rem;
}

.mas-footer__contact {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.mas-footer__contact li { margin-bottom: 0.65rem; }
.mas-footer__label {
  display: block;
  font-size: 0.75rem;
  color: var(--mas-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mas-footer__contact a { color: var(--mas-text); text-decoration: none; font-weight: 600; }
.mas-footer__contact a:hover { color: var(--mas-primary); text-decoration: underline; }
.mas-footer__address { color: var(--mas-text-soft); font-size: 0.85rem; }
.mas-footer__address a { color: var(--mas-text); font-weight: 600; text-decoration: underline dotted; }

.mas-footer__map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 0.85rem;
  border-radius: 8px;
  overflow: hidden;
}
.mas-footer__map-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mas-footer__map-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mas-primary);
  text-decoration: none;
}
.mas-footer__map-link:hover { text-decoration: underline; }
.mas-footer__address a:hover { color: var(--mas-primary); }

.mas-footer__payment {
  font-size: 0.85rem;
  color: var(--mas-text-soft);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.mas-footer__payment-badges { font-weight: 600; color: var(--mas-text); }

/* RING 3: COVERAGE (KOTA) + SOSIAL + VIDEO & FLAG COUNTER — center, stack vertikal */
.mas-footer__coverage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
  padding: 2rem clamp(1rem, 5vw, 4rem);
  border-bottom: 1px solid var(--mas-border);
}
.mas-footer__coverage h4 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mas-primary);
}
.mas-footer__coverage-cities {
  width: 100%;
  max-width: 640px;
}
.mas-footer__coverage-local {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--mas-text-soft);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.mas-footer__city-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
}
.mas-footer__city-links a {
  color: var(--mas-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.mas-footer__city-links a:hover { color: var(--mas-primary); text-decoration: underline; }

.mas-footer__social {
  width: 100%;
}
.mas-footer__social-icons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.mas-footer__social-icons a {
  color: var(--mas-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--mas-border);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mas-footer__social-icons a:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--mas-primary); }

/* Video profil YouTube + Flag Counter, digabung satu blok di bagian paling
   bawah Coverage (setelah Media Sosial) -- lihat footer-video.php. */
.mas-footer__coverage-video {
  width: 100%;
  max-width: 400px;
}
/* Flag Counter -- ukuran penuh (versi countxl, 700x150), bukan lagi versi
   mini. Dikasih max-width 700px sendiri (bukan ikut cap 400px milik video)
   supaya tetap tampil lengkap di desktop, tapi tetap menyusut proporsional
   di layar sempit lewat width:100%. */
.mas-footer__flag-counter {
  width: 100%;
  max-width: 700px;
  margin: 2rem auto 0;
  display: flex;
  justify-content: center;
  line-height: 0;
}
.mas-footer__flag-counter img {
  border-radius: 6px;
  border: 1px solid var(--mas-border);
  width: 100%;
  max-width: 700px;
  height: auto;
}

/* HALAMAN TERKAIT KOTA (footer-city-links.php) -- internal linking SEO lokal */
.mas-footer__related {
  padding: 1.5rem clamp(1rem, 5vw, 4rem);
  border-bottom: 1px solid var(--mas-border);
  text-align: center;
}
.mas-footer__related h4 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mas-primary);
}
.mas-footer__related-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.9rem;
}
.mas-footer__related-links a {
  color: var(--mas-text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.mas-footer__related-links a:hover { color: var(--mas-primary); text-decoration: underline; }

/* TRUST BLOCK */
.mas-footer__trust-block {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  padding: 1.25rem clamp(1rem, 5vw, 4rem);
  font-size: 0.85rem;
  color: var(--mas-text-soft);
  border-bottom: 1px solid var(--mas-border);
}

/* RING 4: BOTTOM / COPYRIGHT */
.mas-footer__bottom {
  background: var(--mas-footer-bg-dark);
  padding: 1.25rem clamp(1rem, 5vw, 4rem);
  padding-right: clamp(6rem, 10vw, 8rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--mas-text-soft);
}
.mas-footer__legal-links a {
  color: var(--mas-text-soft);
  text-decoration: none;
  margin-left: 1rem;
}
.mas-footer__legal-links a:first-child { margin-left: 0; }
.mas-footer__legal-links a:hover { color: var(--mas-primary); text-decoration: underline; }

/* align-items:center membuat link Privacy/Terms/SOP ke-tengah relatif
   terhadap TINGGI PENUH teks copyright -- begitu teks copyright membungkus
   jadi 2 baris (karena panjang), link itu jadi berada di tengah antara
   baris 1 & 2, bukan sejajar dengan baris pertamanya. Fix: align-items:
   flex-start supaya baris pertama copyright & baris link selalu sejajar
   rata atas, berapa pun jumlah baris copyright-nya. */
@media (min-width: 901px) {
  .mas-footer__bottom {
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .mas-footer__bottom > *:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mas-footer__legal-links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
}

/* Video Embed (footer-video.php) */
.mas-footer__video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 0.85rem;
  border-radius: 8px;
  overflow: hidden;
}
.mas-footer__video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video Facade (footer-video.php) — thumbnail + tombol play sebelum iframe dimuat */
.mas-yt-facade {
  cursor: pointer;
}
.mas-yt-facade__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.mas-yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.15s ease;
}
.mas-yt-facade__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Payment block (footer-payment.php) */
.mas-footer__payment-block { display: flex; flex-direction: column; gap: 0.5rem; }
.mas-footer__payment-note { font-size: 0.85rem; color: var(--mas-text-soft); margin: 0; }
.mas-footer__qris { margin-top: 0.5rem; }
.mas-footer__qris img {
  max-width: 160px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--mas-border);
  background: #fff;
  padding: 6px;
}

/* Kunci 3 kolom x 2 baris untuk SELURUH rentang desktop (901px ke atas,
   tanpa batas atas). Breakpoint viewport saja tidak cukup karena lebar
   grid sebenarnya dihitung dari lebar container (viewport dikurangi
   padding clamp(1rem,5vw,4rem) x2) -- dengan mengunci di seluruh rentang
   desktop, hasilnya konsisten di semua lebar layar & level zoom/scaling. */
@media (min-width: 901px) {
  .mas-footer__main { grid-template-columns: repeat(3, 1fr); }

  /* Pusatkan (center) isi tiap kolom Ring 2 di layar desktop -- bagian
     "Massage Army Spa / Hubungi Kami / Metode Pembayaran / Layanan
     Populer / Informasi" tampil center di desktop. */
  .mas-footer__main {
    text-align: center;
  }
  .mas-footer__main .mas-footer__col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mas-footer__links,
  .mas-footer__contact,
  .mas-footer__trust-mini {
    display: inline-block;
  }
  .mas-footer__address {
    margin-left: auto;
    margin-right: auto;
  }
  .mas-footer__map-embed {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .mas-footer__payment-block {
    align-items: center;
  }
  .mas-footer__payment {
    justify-content: center;
  }
  .mas-footer__qris {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .mas-footer__main { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .mas-footer__main { grid-template-columns: 1fr; }

  /* Rapatkan jarak antar-blok Ring 3 (video profil -> flag counter ->
     trust checklist) di mobile supaya tidak numpuk terlalu ke bawah. */
  .mas-footer__coverage { gap: 1.25rem; }
  .mas-footer__flag-counter { margin-top: 0; }

  .mas-footer__cta { flex-direction: column; align-items: center; text-align: center; }

  .mas-footer__col:has(.mas-footer__qris) { text-align: center; }
  .mas-footer__payment-block { align-items: center; }
  .mas-footer__payment { justify-content: center; }

  .mas-footer__bottom { flex-direction: column; align-items: center; text-align: center; padding-bottom: 44px; padding-right: clamp(1rem, 5vw, 4rem); }
  .mas-footer__legal-links { display: flex; justify-content: center; flex-wrap: wrap; }
}