/**
 * CatDecor — contact-hub.css  v2.0
 * Bottom Navigation Bar + Contact Hub Sheet
 * Mobile only (≤ 768px). Loaded globally mọi trang.
 *
 * Chuẩn: Google Material 3 · Touch target ≥ 56px · Safe-area aware
 * Thay thế hoàn toàn .cda-mobile-cta cũ trong catdecor-archive.css
 */

/* ══════════════════════════════════════════════════════════════
   0. TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  --hub-decor-from:   #7A4F3A;
  --hub-decor-to:     #C9907A;
  --hub-contact-bg:   #e8477c;
  --hub-contact-glow: rgba(232, 71, 124, .28);
  --hub-bar-h:        58px;
  --hub-safe:         env(safe-area-inset-bottom, 0px);
  --hub-total-h:      calc(var(--hub-bar-h) + var(--hub-safe));
  --hub-radius:       22px;
  --hub-ease:         cubic-bezier(.32, .72, 0, 1);
  --hub-spring:       cubic-bezier(.175, .885, .32, 1.1);
}


/* ══════════════════════════════════════════════════════════════
   1. ẨN floating Zalo bubble (redundant với hub)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .floating-zalo,
  .catdecor-float,
  #cd-floating,
  .zalo-chat-widget { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   2. BODY PADDING — đẩy nội dung lên trên bar
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    padding-bottom: var(--hub-total-h) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   3. BOTTOM NAVIGATION BAR
   ══════════════════════════════════════════════════════════════ */
.cda-mobile-cta {
  display:        none; /* desktop: ẩn hoàn toàn */
  position:       fixed;
  bottom:         0;
  left:           0;
  right:          0;
  z-index:        1000;
  height:         var(--hub-bar-h);
  padding-bottom: var(--hub-safe);
  background:     #fff;
  box-shadow:     0 -1px 0 rgba(0,0,0,.07),
                  0 -4px 16px rgba(0,0,0,.06);
  will-change:    transform;
  transform:      translateZ(0);
  animation:      hub-bar-in .35s var(--hub-spring) both;
}

@keyframes hub-bar-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (max-width: 768px) {
  .cda-mobile-cta { display: flex; }
}

/* Ẩn khi bàn phím ảo mở (viewport co lại) */
@media (max-height: 450px) {
  .cda-mobile-cta { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   4. NAV BUTTONS
   ══════════════════════════════════════════════════════════════ */
.cda-mobile-cta__btn {
  flex:                       1;
  display:                    flex;
  flex-direction:             column;
  align-items:                center;
  justify-content:            center;
  gap:                        3px;
  min-height:                 56px;
  padding:                    6px 2px 8px;
  background:                 transparent;
  border:                     none;
  border-right:               0.5px solid rgba(0,0,0,.06);
  font-family:                inherit;
  font-size:                  9px;
  font-weight:                700;
  letter-spacing:             .02em;
  color:                      #94a3b8;
  cursor:                     pointer;
  text-decoration:            none;
  -webkit-tap-highlight-color: transparent;
  position:                   relative;
  overflow:                   hidden;
  transition:                 color .15s, background .15s;
}
.cda-mobile-cta__btn:last-child { border-right: none; }

/* Press ripple */
.cda-mobile-cta__btn::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: currentColor;
  opacity:    0;
  transition: opacity .12s;
}
.cda-mobile-cta__btn:active::after { opacity: .06; }

/* Icon */
.cda-btn-icon {
  font-size:   20px;
  line-height: 1;
  display:     block;
  transition:  transform .2s var(--hub-spring);
}
.cda-mobile-cta__btn:active .cda-btn-icon { transform: scale(.88); }

/* Label */
.cda-btn-label {
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .02em;
  line-height:    1;
}


/* ── Variant: Trang trí (warm gradient) ── */
.cda-mobile-cta__btn--decor {
  background:   linear-gradient(160deg, var(--hub-decor-from), var(--hub-decor-to));
  color:        #fff;
  border-color: transparent;
}
.cda-mobile-cta__btn--decor::after { background: #fff; }


/* ── Variant: Liên hệ (pink + pulse) ── */
.cda-mobile-cta__btn--contact {
  background:   var(--hub-contact-bg);
  color:        #fff;
  border-color: transparent;
  animation:    hub-contact-pulse 2.4s ease-in-out infinite;
}
.cda-mobile-cta__btn--contact::after { background: #fff; }

.cda-contact-num {
  font-size:      7.5px;
  font-weight:    800;
  color:          rgba(255,255,255,.82);
  letter-spacing: .01em;
  line-height:    1;
  margin-top:     1px;
}

@keyframes hub-contact-pulse {
  0%, 100% { box-shadow: 0 -2px 0 0 var(--hub-contact-glow); }
  50%       { box-shadow: 0 -8px 0 0 var(--hub-contact-glow); }
}

@media (prefers-reduced-motion: reduce) {
  .cda-mobile-cta__btn--contact { animation: none; }
}


/* ══════════════════════════════════════════════════════════════
   5. BACKDROP
   ══════════════════════════════════════════════════════════════ */
.cda-hub-backdrop {
  position:       fixed;
  inset:          0;
  z-index:        9998;
  pointer-events: none;
  display:        none; /* chỉ render trên mobile */
}

@media (max-width: 768px) {
  .cda-hub-backdrop { display: block; }
}

/* Dim layer qua pseudo — tách biệt với sheet */
.cda-hub-backdrop::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0);
  transition: background .28s ease;
}
.cda-hub-backdrop.is-open {
  pointer-events: all;
}
.cda-hub-backdrop.is-open::before {
  background: rgba(0,0,0,.52);
}


/* ══════════════════════════════════════════════════════════════
   6. CONTACT HUB SHEET
   ══════════════════════════════════════════════════════════════ */
.cda-hub-sheet {
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  background:     #fff;
  border-radius:  var(--hub-radius) var(--hub-radius) 0 0;
  padding:        12px 16px calc(24px + var(--hub-safe));
  transform:      translateY(100%);
  transition:     transform .32s var(--hub-ease);
  will-change:    transform;
  pointer-events: all;
  /* Ngăn click xuyên qua sheet lên backdrop */
  isolation:      isolate;
}
.cda-hub-backdrop.is-open .cda-hub-sheet {
  transform: translateY(0);
}


/* Drag handle */
.cda-hub-handle {
  width:         36px;
  height:        4px;
  background:    #e2e8f0;
  border-radius: 2px;
  margin:        0 auto 14px;
}


/* Header */
.cda-hub-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   10px;
  padding-bottom:  10px;
  border-bottom:   1px solid #f1f5f9;
}
.cda-hub-title {
  font-size:      10px;
  font-weight:    800;
  color:          #94a3b8;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.cda-hub-close {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      #f1f5f9;
  border:          none;
  font-size:       14px;
  color:           #64748b;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition:      background .12s, transform .12s;
}
.cda-hub-close:active {
  background: #e2e8f0;
  transform:  scale(.88);
}


/* Items */
.cda-hub-items {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.cda-hub-item {
  display:         flex;
  align-items:     center;
  gap:             14px;
  min-height:      58px;
  padding:         10px 14px;
  border-radius:   14px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:      transform .15s var(--hub-spring), filter .12s;
  position:        relative;
  overflow:        hidden;
}
.cda-hub-item:active {
  filter:    brightness(.93);
  transform: scale(.983);
}

.cda-hub-icon {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
  flex-shrink:     0;
  font-weight:     700;
}

.cda-hub-text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1;
}
.cda-hub-text strong {
  font-size:   14px;
  font-weight: 700;
  line-height: 1.25;
}
.cda-hub-text small {
  font-size:   12px;
  opacity:     .68;
  line-height: 1.3;
}

/* Chevron affordance */
.cda-hub-arrow {
  font-size:   16px;
  opacity:     .30;
  flex-shrink: 0;
  transition:  opacity .12s;
}
.cda-hub-item:active .cda-hub-arrow { opacity: .6; }


/* ══════════════════════════════════════════════════════════════
   7. CHANNEL COLORS
   ══════════════════════════════════════════════════════════════ */
.cda-hub-item--call { background: #fdf2f8; }
.cda-hub-item--call .cda-hub-icon { background: #ec4899; color: #fff; }
.cda-hub-item--call strong        { color: #9d174d; }
.cda-hub-item--call small         { color: #be185d; }

.cda-hub-item--zalo { background: #eff6ff; }
.cda-hub-item--zalo .cda-hub-icon { background: #0068ff; color: #fff; font-size: 15px; }
.cda-hub-item--zalo strong        { color: #1e40af; }
.cda-hub-item--zalo small         { color: #1d4ed8; }

.cda-hub-item--fb { background: #eef2ff; }
.cda-hub-item--fb .cda-hub-icon   { background: #1877f2; color: #fff; }
.cda-hub-item--fb strong          { color: #1e3a8a; }
.cda-hub-item--fb small           { color: #1e40af; }

.cda-hub-item--wa { background: #f0fdf4; }
.cda-hub-item--wa .cda-hub-icon   { background: #25d366; color: #fff; }
.cda-hub-item--wa strong          { color: #14532d; }
.cda-hub-item--wa small           { color: #166534; }

.cda-hub-item--tg { background: #e0f2fe; }
.cda-hub-item--tg .cda-hub-icon   { background: #229ed9; color: #fff; }
.cda-hub-item--tg strong          { color: #0c4a6e; }
.cda-hub-item--tg small           { color: #075985; }