/* ============ Conversion Booster v1 (2026-06-21) ============
   Header WA pill / FAB pulse+online dot / sticky bottom bar / inline blog card / exit-intent modal */

:root { --wa: #25D366; --wa-dark:#128C7E; }

/* ---- Header WA pill (visible all viewports, replaces nothing) ---- */
.header-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff !important; padding: 9px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; line-height: 1; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(37,211,102,0.32);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-right: 4px;
}
.header-wa:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(37,211,102,0.42); color:#fff !important; }
.header-wa svg { width: 15px; height: 15px; flex: 0 0 15px; }
.header-wa .wa-num { display: inline; opacity: 0.92; font-weight: 500; font-size: 12.5px; }
@media (max-width: 900px) { .header-wa .wa-num { display: none; } .header-wa { padding: 8px 12px; } }
@media (max-width: 600px) { .header-wa span:not(.wa-num) { display: none; } .header-wa { padding: 8px 10px; } }
.dir-rtl .header-wa { margin-right: 0; margin-left: 4px; }

/* ---- Enhanced FAB: pulse ring + online dot ---- */
/* .wa-fab already position:fixed in site.css — no override needed */
.wa-fab::before {
  content:''; position:absolute; inset:-4px; border-radius:999px;
  border:2px solid var(--wa); opacity:0.6; pointer-events:none;
  animation: cv-pulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes cv-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.wa-fab .wa-online {
  position:absolute; top:8px; right:8px; width:10px; height:10px;
  background:#22c55e; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 0 rgba(34,197,94,0.7);
  animation: cv-blink 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes cv-blink {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  50%     { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ---- Sticky bottom bar (mobile + tablet) ---- */
.cv-sticky {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid #e5e3dc;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  padding: 10px 16px; z-index: 95;
  transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display: none;
}
.cv-sticky.show { transform: translateY(0); }
@media (max-width: 1024px) { .cv-sticky { display: block; } }
.cv-sticky-inner { display: flex; align-items: center; gap: 14px; max-width: 720px; margin: 0 auto; }
.cv-sticky-text { flex: 1; min-width: 0; }
.cv-sticky-title { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.2; }
.cv-sticky-sub { font-size: 11.5px; color: #25D366; margin-top: 2px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.cv-sticky-sub::before { content: ''; width: 6px; height: 6px; background: #25D366; border-radius: 50%; display: inline-block; animation: cv-blink-dot 1.6s infinite; }
@keyframes cv-blink-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.cv-sticky-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--wa); color: #fff !important; text-decoration: none;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap; transition: transform 0.15s;
  box-shadow: 0 2px 8px rgba(37,211,102,0.35);
}
.cv-sticky-btn:hover, .cv-sticky-btn:active { transform: scale(0.97); color: #fff !important; }

/* On mobile, hide FAB when sticky shown to avoid stacking */
@media (max-width: 1024px) {
  .cv-sticky.show ~ .wa-fab,
  body:has(.cv-sticky.show) .wa-fab { bottom: 76px; }
}

/* ---- Exit-intent modal ---- */
.cv-exit[hidden] { display: none !important; }
.cv-exit {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.cv-exit.show { opacity: 1; }
.cv-exit-bd { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); }
.cv-exit-box {
  position: relative; background: #fff; border-radius: 14px;
  padding: 36px 28px 28px; max-width: 420px; width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.1);
  transform: scale(0.95) translateY(20px); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.cv-exit.show .cv-exit-box { transform: scale(1) translateY(0); }
.cv-exit-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; color: #94a3b8; cursor: pointer; line-height: 1; padding: 4px 8px; }
.cv-exit-close:hover { color: #475569; }
.cv-exit-icon { display: flex; justify-content: center; margin-bottom: 14px; }
.cv-exit-h { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 500; color: #0f172a; margin: 0 0 12px; line-height: 1.25; }
.cv-exit-p { font-size: 15px; color: #475569; line-height: 1.55; margin: 0 0 22px; }
.cv-exit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wa); color: #fff !important; text-decoration: none;
  padding: 13px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(37,211,102,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cv-exit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,0.5); color: #fff !important; }
.cv-exit-skip {
  display: block; margin: 14px auto 0; background: none; border: none;
  color: #94a3b8; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px;
}
.cv-exit-skip:hover { color: #475569; }
.dir-rtl .cv-exit-close { right: auto; left: 14px; }

/* ---- Inline WA card for Blog post mid-section ---- */
.cv-inline {
  margin: 36px 0; padding: 28px 28px 24px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #a7f3d0; border-radius: 12px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.cv-inline-icon {
  width: 56px; height: 56px; flex: 0 0 56px;
  background: var(--wa); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(37,211,102,0.3);
}
.cv-inline-icon svg { width: 30px; height: 30px; }
.cv-inline-text { flex: 1; min-width: 220px; }
.cv-inline-h { font-size: 18px; font-weight: 600; color: #0f172a; margin: 0 0 6px; line-height: 1.3; }
.cv-inline-p { font-size: 14px; color: #334155; margin: 0; line-height: 1.55; }
.cv-inline-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wa); color: #fff !important; text-decoration: none;
  padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap; box-shadow: 0 4px 12px rgba(37,211,102,0.35);
  transition: transform 0.15s;
}
.cv-inline-btn:hover { transform: translateY(-2px); color: #fff !important; }
.cv-inline-btn svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .cv-inline { padding: 20px; }
  .cv-inline-btn { width: 100%; justify-content: center; }
}