/* =========================================================
   1) ICON KONSULTASI WHATSAPP — lebih menarik & profesional
   ========================================================= */

/* ============================================================
   PERBAIKAN AKAR MASALAH: style.css ternyata punya 3 definisi
   .floating-wa yang saling tumpang tindih (sisa merge tema lama).
   Salah satunya memaksa tombol SELALU berbentuk lingkaran 54x54px
   tanpa syarat (di semua ukuran layar) — itulah sebabnya teks
   "Konsultasi WhatsApp" selalu terpotong. Di sini kita tetapkan
   ulang secara eksplisit dengan !important supaya konsisten.
   ============================================================ */

.floating-wa {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  width: auto !important;
  height: auto !important;
  padding: 13px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 100px !important;
  background: var(--accent) !important;
  color: #031014 !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.35) !important;
}

.floating-wa:hover {
  background: var(--white) !important;
}

.floating-wa span:not(.floating-wa-badge) {
  display: inline !important;
}

/* Selaraskan ikon + teks pada tombol nav & kalkulator, tanpa mengubah
   warna/ukuran tombol yang sudah ada di style.css */
.nav-cta,
.nav-cta-calc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-cta svg,
.nav-cta-calc svg {
  flex-shrink: 0;
}

/* Floating WhatsApp: badge bulat putih berisi ikon resmi WhatsApp + efek pulse */
.floating-wa {
  gap: 12px !important;
}

.floating-wa-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  color: #25D366;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

/* Pulsa tetap DI DALAM badge (tidak melebar keluar) agar tidak pernah
   terpotong oleh tepi layar, di posisi manapun tombol berada. */
.floating-wa-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .6);
  animation: wa-pulse-glow 2.2s ease-in-out infinite;
}

@keyframes wa-pulse-glow {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-wa-badge::after { animation: none; display: none; }
}

.mobile-sticky-icon svg {
  display: block;
}

/* Mode ikon saja — HANYA di layar HP kecil (selaras dengan breakpoint
   asli tema di style.css: <= 600px), jadi lingkaran rapi tanpa teks
   yang terpotong. Di atas 600px (termasuk tablet & desktop), tombol
   tetap pil lengkap dengan teks seperti aturan di atas. */
@media (max-width: 600px) {
  .floating-wa {
    right: 16px !important;
    bottom: 16px !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  .floating-wa span:not(.floating-wa-badge) {
    display: none !important;
  }

  .floating-wa .floating-wa-badge {
    display: flex !important;
  }
}

/* =========================================================
   2) TOMBOL "KALKULATOR BIAYA IT" DI NAVIGASI
   ========================================================= */

.nav-cta-calc {
  position: relative;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(249,115,22,.04));
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, .35);
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.nav-cta-calc svg {
  color: #f97316;
}

.nav-cta-calc:hover {
  border-color: #f97316;
  background: linear-gradient(135deg, rgba(249,115,22,.2), rgba(249,115,22,.08));
  box-shadow: 0 6px 18px rgba(249, 115, 22, .22);
  transform: translateY(-1px);
}

.nav-cta-calc::after {
  content: "Gratis";
  position: absolute;
  top: -9px;
  right: -8px;
  background: #f97316;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(249, 115, 22, .4);
}

@media (max-width: 950px) {
  .nav-cta-calc {
    display: none;
  }
}

/* =========================================================
   3) FLASH SALE — badge, harga coret, & countdown
   ========================================================= */

.flash-sale-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #f97316, #ef4444);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 100px;
  text-transform: uppercase;
}

.flash-sale-badge-sm {
  padding: 3px 9px;
  font-size: 10.5px;
  margin-top: 2px;
}

.pricing-card-flash,
.pricing-compact-card.pricing-card-flash {
  border-color: rgba(249, 115, 22, .5) !important;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, .18), 0 18px 40px rgba(249, 115, 22, .08);
}

.pricing-amount-old {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, .8);
  margin-right: 2px;
}

.pricing-price-old {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.pricing-price-old .pricing-amount-old {
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}

.pricing-amount-flash {
  color: #f97316 !important;
}

.flash-sale-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #f97316;
  background: rgba(249, 115, 22, .1);
  border: 1px solid rgba(249, 115, 22, .25);
  padding: 5px 10px;
  border-radius: 8px;
  margin: -10px 0 18px;
}

.flash-sale-countdown strong {
  font-variant-numeric: tabular-nums;
}