/* ============================================================
   Sticky Contact Widget — Post-Launch Conversion
   Mobile-first · Premium style · CLS = 0
   ============================================================ */

/* ── Biến màu riêng để không phụ thuộc vào theme vars ─────── */
:root {
  --sc-hotline-bg  : #0A1628;        /* navy */
  --sc-hotline-fg  : #8B5E2B;        /* gold */
  --sc-zalo-bg     : #0068FF;        /* Zalo brand blue */
  --sc-zalo-fg     : #ffffff;
  --sc-msng-bg     : #0084FF;        /* Messenger brand blue */
  --sc-msng-fg     : #ffffff;
  --sc-toggle-bg   : #8B5E2B;        /* gold */
  --sc-toggle-fg   : #0A1628;        /* navy */
  --sc-shadow      : 0 4px 20px rgba(0,0,0,.22);
  --sc-shadow-hover: 0 6px 28px rgba(0,0,0,.32);
  --sc-btn-size    : 52px;
  --sc-gap         : 10px;
  --sc-label-bg    : #0A1628;
  --sc-label-fg    : #ffffff;
}

/* ── Widget container ──────────────────────────────────────── */
.dsnd-sc {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 3000;     /* Trên Leaflet map (1000), dưới popup/overlay (9000+) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sc-gap);
  /* CLS = 0: không reflow vì position:fixed không ảnh hưởng layout */
}

/* ── Nút liên hệ (chung) ───────────────────────────────────── */
.dsnd-sc__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sc-btn-size);
  height: var(--sc-btn-size);
  border-radius: 50%;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sc-shadow);
  transition:
    transform      0.2s cubic-bezier(.34,1.56,.64,1),
    box-shadow     0.2s ease,
    opacity        0.25s ease;
  flex-shrink: 0;
  /* Tap target tối thiểu 44px — accessibility */
  -webkit-tap-highlight-color: transparent;
  /* Hiện trạng thu gọn */
  opacity: 1;
  transform: scale(1) translateY(0);
  transform-origin: bottom right;
}
.dsnd-sc__btn:hover {
  transform: scale(1.08);
  box-shadow: var(--sc-shadow-hover);
}
.dsnd-sc__btn:active { transform: scale(0.96); }

/* ── Icon trong nút ────────────────────────────────────────── */
.dsnd-sc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Label bên trái nút (hover desktop) ────────────────────── */
.dsnd-sc__label {
  position: absolute;
  right: calc(var(--sc-btn-size) + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--sc-label-bg);
  color: var(--sc-label-fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--sans, sans-serif);
  letter-spacing: .03em;
  /* Mũi tên nhỏ bên phải */
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.dsnd-sc__label::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right: none;
  border-left-color: var(--sc-label-bg);
}

/* Hiện label khi hover nút (desktop only) */
@media (hover: hover) {
  .dsnd-sc__btn:hover .dsnd-sc__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ── Màu từng nút ──────────────────────────────────────────── */
.dsnd-sc__btn--hotline {
  background: var(--sc-hotline-bg);
  color:       var(--sc-hotline-fg);
}
.dsnd-sc__btn--zalo {
  background: var(--sc-zalo-bg);
  color:       var(--sc-zalo-fg);
}
.dsnd-sc__btn--messenger {
  background: var(--sc-msng-bg);
  color:       var(--sc-msng-fg);
}

/* ── Pulse animation cho hotline ──────────────────────────── */
@keyframes dsnd-pulse {
  0%   { box-shadow: 0 0 0 0  rgba(139,94,43,.6), var(--sc-shadow); }
  60%  { box-shadow: 0 0 0 12px rgba(139,94,43,0), var(--sc-shadow); }
  100% { box-shadow: 0 0 0 0  rgba(139,94,43,0), var(--sc-shadow); }
}
.dsnd-sc__btn--hotline {
  animation: dsnd-pulse 2.4s ease-out infinite;
}
/* Dừng pulse khi hover để không gây rung */
.dsnd-sc__btn--hotline:hover { animation: none; }

/* ── Toggle button ─────────────────────────────────────────── */
.dsnd-sc__toggle {
  width:  var(--sc-btn-size);
  height: var(--sc-btn-size);
  border-radius: 50%;
  background: var(--sc-toggle-bg);
  color: var(--sc-toggle-fg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sc-shadow);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.dsnd-sc__toggle:hover {
  transform: scale(1.08);
  box-shadow: var(--sc-shadow-hover);
}
.dsnd-sc__toggle:active { transform: scale(0.95); }

/* Biểu tượng trong toggle — chỉ hiện 1 trong 2 trạng thái */
.dsnd-sc__toggle-icon--close { display: none; }
.dsnd-sc__toggle-icon--open  { display: flex; }

/* ── Trạng thái thu gọn (compact) ─────────────────────────── */

/* Khi compact: ẩn các nút, chỉ còn toggle */
.dsnd-sc.compact .dsnd-sc__btn {
  opacity: 0;
  transform: scale(0.4) translateY(10px);
  pointer-events: none;
}

/* Stagger delay: nút xa nhất ẩn trước */
.dsnd-sc.compact .dsnd-sc__btn--hotline    { transition-delay: 0ms; }
.dsnd-sc.compact .dsnd-sc__btn--zalo       { transition-delay: 40ms; }
.dsnd-sc.compact .dsnd-sc__btn--messenger  { transition-delay: 80ms; }

/* Icon toggle đổi khi compact */
.dsnd-sc.compact .dsnd-sc__toggle-icon--open  { display: none; }
.dsnd-sc.compact .dsnd-sc__toggle-icon--close { display: flex; }

/* Rotate toggle khi compact */
.dsnd-sc.compact .dsnd-sc__toggle {
  background: var(--sc-hotline-bg);
  color: var(--sc-hotline-fg);
}

/* ── Appear animation khi load ────────────────────────────── */
@keyframes dsnd-sc-appear {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dsnd-sc {
  /* Ẩn ban đầu để JS kiểm soát — tránh flash khi tải */
  opacity: 0;
}
.dsnd-sc.is-ready {
  animation: dsnd-sc-appear 0.4s ease forwards;
}

/* Nút appear stagger khi expand lại */
.dsnd-sc:not(.compact) .dsnd-sc__btn {
  transition-delay: 0ms;
}
.dsnd-sc:not(.compact) .dsnd-sc__btn--zalo      { transition-delay: 40ms; }
.dsnd-sc:not(.compact) .dsnd-sc__btn--messenger { transition-delay: 80ms; }

/* ── Mobile responsive ─────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --sc-btn-size: 48px;   /* Nhỏ hơn 1 chút trên mobile nhỏ */
    --sc-gap: 8px;
  }
  .dsnd-sc {
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* Ẩn label hoàn toàn trên mobile (không hover được) */
  .dsnd-sc__label { display: none; }
}

/* ── Safe zone — không che property CTA bar ────────────────── */
/* Trên single-property: sidebar CTA ở dưới → đẩy widget lên */
.single-property .dsnd-sc {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 769px) {
  .single-property .dsnd-sc {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Không chồng lên radius map panel khi mở ─────────────── */
/* Khi archive mở radius panel (thêm class qua JS), widget shift left */
.dsnd-sc.map-active {
  right: calc(50% + 16px); /* Tránh nửa phải màn hình (nơi có map) */
}
@media (max-width: 767px) {
  /* Mobile: map chiếm full width, widget ở dưới map nên không cần shift */
  .dsnd-sc.map-active { right: 12px; }
}

/* ── Accessibility: reduce motion ────────────────────────────  */
@media (prefers-reduced-motion: reduce) {
  .dsnd-sc__btn--hotline { animation: none; }
  .dsnd-sc__btn,
  .dsnd-sc__toggle { transition: none; }
}