/* ── Multi-Client Tracker Modal (v2.5 — visual igual ao Advanced Tracker 3.x) ── */
/* A cor base é controlada pela variável --mct-color injetada pelo PHP no <head> */

:root {
  --mct-color:       #25D366;
  --mct-color-dark:  #128C7E;
  --mct-color-alpha: rgba(37, 211, 102, 0.15);
}

#mct-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 32, 0.66);
  z-index: 99998;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
#mct-overlay.active { display: block; opacity: 1; }

#mct-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -45%);
  z-index: 99999;
  background: linear-gradient(155deg, #fff 0%, #fbfcfe 68%, #f4f8f6 100%);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  padding: 42px 36px 34px;
  width: 92%; max-width: 440px;
  box-shadow: 0 30px 90px rgba(5,15,35,.32), 0 8px 24px rgba(5,15,35,.14);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: transform .42s cubic-bezier(.2,.85,.25,1.25), opacity .24s ease;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
}
#mct-modal.active { display: block; transform: translate(-50%, -50%); opacity: 1; animation: mct-modal-in .46s both; }

@keyframes mct-modal-in {
  0% { opacity:0; transform:translate(-50%,-44%) scale(.94); }
  70% { opacity:1; transform:translate(-50%,-51%) scale(1.01); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes mct-icon-float {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-5px) rotate(-3deg); }
}
@keyframes mct-shake {
  0%,100% { transform:translate(-50%,-50%); }
  25% { transform:translate(calc(-50% - 6px),-50%); }
  75% { transform:translate(calc(-50% + 6px),-50%); }
}
#mct-modal.mct-shake { animation:mct-shake .38s ease; }

/* Barra colorida animada no topo do modal */
#mct-modal::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--mct-color-dark), var(--mct-color), var(--mct-color-dark));
  background-size: 200% 100%;
  animation: mct-gradient-flow 4s linear infinite;
}

.mct-orb { position:absolute; z-index:-1; pointer-events:none; border-radius:999px; opacity:.72; }
.mct-orb-one { width:210px; height:210px; top:-130px; left:-115px; background:radial-gradient(circle,var(--mct-color-alpha),transparent 70%); animation:mct-orb-drift 7s ease-in-out infinite; }
.mct-orb-two { width:230px; height:230px; right:-145px; bottom:-150px; background:radial-gradient(circle,var(--mct-color-alpha),transparent 70%); animation:mct-orb-drift 8s ease-in-out -2s infinite reverse; }

#mct-close {
  position: absolute;
  top: 14px; right: 18px;
  width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(238,242,245,.76);
  font-size: 24px; line-height: 32px;
  color: #7b8492; cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
}
#mct-close:hover { color: #172033; background: #e8edf1; transform: rotate(7deg); }

.mct-modal-head { display:flex; flex-direction:column; align-items:center; margin-bottom:14px; }

#mct-modal-icon {
  width:74px; height:74px; margin:0 auto 13px; border-radius:25px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg,var(--mct-color),var(--mct-color-dark));
  box-shadow:0 15px 34px var(--mct-color-alpha), inset 0 1px 1px rgba(255,255,255,.4);
  animation:mct-icon-float 3.4s ease-in-out infinite;
}
#mct-modal-icon svg { width:39px; height:39px; fill:currentColor; filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)); }

.mct-live {
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border:1px solid rgba(34,197,94,.12); border-radius:999px;
  background:#effbf4; color:#168046;
  font-size:10px; font-weight:800; letter-spacing:.55px; text-transform:uppercase;
}
.mct-live span { width:7px; height:7px; border-radius:50%; background:#22c55e; animation:mct-live-pulse 1.8s ease-out infinite; }

#mct-modal-title {
  font-size:24px; font-weight:780; letter-spacing:-.5px;
  color:#172033; margin:0 0 8px; line-height:1.3;
}
#mct-modal-subtitle {
  max-width:340px; margin:0 auto 24px;
  color:#667085; font-size:14px; line-height:1.6;
}

#mct-form { display:flex; flex-direction:column; gap:12px; }

#mct-name, #mct-phone {
  width:100%; min-height:51px; padding:13px 16px;
  border:1.5px solid #e5e7eb; border-radius:14px; font-size:16px;
  color:#1a1a1a; outline:none; box-sizing:border-box;
  background:rgba(247,249,251,.9); box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .2s, box-shadow .2s, background .2s, transform .2s;
}
#mct-name:hover, #mct-phone:hover { border-color:#cbd3dc; background:#fff; }
#mct-name:focus, #mct-phone:focus {
  border-color:var(--mct-color);
  box-shadow:0 0 0 4px var(--mct-color-alpha);
  background:#fff; transform:translateY(-1px);
}
#mct-name::placeholder, #mct-phone::placeholder { color:#aaa; }

#mct-submit {
  width:100%; min-height:53px; padding:15px;
  background:linear-gradient(135deg,var(--mct-color),var(--mct-color-dark));
  color:#fff; border:none; border-radius:14px;
  font-size:15px; font-weight:780; cursor:pointer;
  transition:opacity .2s, transform .15s, box-shadow .2s;
  box-shadow:0 12px 27px var(--mct-color-alpha);
  letter-spacing:.3px; margin-top:4px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
#mct-submit::before {
  content:'';
  display:inline-block; width:20px; height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
#mct-submit:hover:not(:disabled) { filter:saturate(1.08); transform:translateY(-2px); box-shadow:0 17px 34px var(--mct-color-alpha); }
#mct-submit:active:not(:disabled) { transform:translateY(0); }
#mct-submit:disabled { opacity:.65; cursor:not-allowed; }

#mct-error {
  font-size:12px; font-weight:600; color:#dc3545;
  min-height:17px; text-align:left; padding-left:2px;
}

.mct-privacy {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:-2px; color:#8b95a3; font-size:10.5px; line-height:1.35;
}
.mct-privacy svg { width:14px; height:14px; flex:0 0 auto; fill:currentColor; }

/* Entrada escalonada dos itens */
#mct-modal.active #mct-name,
#mct-modal.active #mct-phone,
#mct-modal.active #mct-submit,
#mct-modal.active .mct-privacy { animation:mct-item-rise .42s ease both; }
#mct-modal.active #mct-name { animation-delay:.12s; }
#mct-modal.active #mct-phone { animation-delay:.18s; }
#mct-modal.active #mct-submit { animation-delay:.24s; }
#mct-modal.active .mct-privacy { animation-delay:.3s; }

@keyframes mct-gradient-flow { to { background-position:-200% 0; } }
@keyframes mct-live-pulse { 0% { box-shadow:0 0 0 0 rgba(34,197,94,.35); } 70%,100% { box-shadow:0 0 0 7px rgba(34,197,94,0); } }
@keyframes mct-orb-drift { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(13px,11px,0) scale(1.1); } }
@keyframes mct-item-rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 480px) {
  #mct-modal { padding:36px 22px 26px; border-radius:22px; }
  #mct-modal-title { font-size:20px; }
  #mct-modal-icon { width:65px; height:65px; border-radius:21px; }
  #mct-modal-icon svg { width:34px; height:34px; }
}

@media (prefers-reduced-motion: reduce) {
  #mct-modal.active, #mct-modal-icon, #mct-modal.mct-shake { animation:none; }
  #mct-modal::before, .mct-live span, .mct-orb,
  #mct-modal.active #mct-name, #mct-modal.active #mct-phone,
  #mct-modal.active #mct-submit, #mct-modal.active .mct-privacy { animation:none; }
  #mct-modal, #mct-overlay, #mct-submit { transition:none; }
}

/* Botoes de WhatsApp controlados pelo tracker: sem menu de segurar (mobile),
   sem selecao e sem arrastar o link. */
a[data-mct-href],a[href*="wa.me"],a[href*="wa.link"],a[href*="whatsapp.com"]{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}