/* JT Call Buttons — Widget Styles
   All colours driven by CSS variables injected from PHP settings.
   ---------------------------------------------------------------- */

/* ── Wrapper ── */
#jtc-widget {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(32px) scale(.93);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  opacity: 0;
  animation: jtcbRise .65s cubic-bezier(.34,1.45,.64,1) var(--jtcb-delay, 1.2s) forwards;
}
@keyframes jtcbRise {
  from { opacity:0; transform:translateX(-50%) translateY(32px) scale(.93); }
  to   { opacity:1; transform:translateX(-50%) translateY(0)    scale(1);   }
}

/* ── Status bar ── */
#jtc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--jtcb-status-bg, rgba(13,26,38,0.90));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--jtcb-status-border, rgba(73,198,110,0.28));
  border-radius: 50px;
  padding: 6px 16px 6px 11px;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--jtcb-status-text, rgba(255,255,255,0.82));
  letter-spacing: 0.4px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  user-select: none;
}

/* Live dot */
.jtc-dot {
  position: relative;
  width: 10px; height: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.jtc-dot-core {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--jtcb-dot-core, #49C66E);
  position: relative; z-index: 2;
  box-shadow: 0 0 7px var(--jtcb-dot-core, #49C66E);
}
.jtc-dot-r1,
.jtc-dot-r2 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: var(--jtcb-dot-pulse, rgba(73,198,110,0.38));
  width: 10px; height: 10px;
}
.jtc-dot-r1 { animation: jtcbDotPulse 2s ease-out infinite; }
.jtc-dot-r2 { animation: jtcbDotPulse 2s ease-out .72s infinite; }
@keyframes jtcbDotPulse {
  0%   { transform:translate(-50%,-50%) scale(1);   opacity:.85; }
  100% { transform:translate(-50%,-50%) scale(3.4); opacity:0;   }
}

/* ── Buttons row ── */
#jtc-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Base button ── */
.jtc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15px;
  padding: 13px 22px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, filter .2s ease;
}
.jtc-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.16);
  opacity: 0;
  transition: opacity .18s;
  border-radius: inherit;
  pointer-events: none;
}
.jtc-btn:active::after { opacity: 1; }
.jtc-btn:hover  { transform: translateY(-4px) scale(1.05); }
.jtc-btn:active { transform: translateY(0)    scale(.97);  }

/* short label always hidden on desktop */
.jtc-label-short { display: none; }

/* ── Call ── */
.jtc-btn-call {
  background: var(--jtcb-call-bg, #0D1A26);
  color: var(--jtcb-call-text, #fff) !important;
  box-shadow: 0 6px 22px var(--jtcb-call-shadow, rgba(13,26,38,0.45)),
              0 2px  6px rgba(13,26,38,0.2),
              inset 0 1px 0 rgba(255,255,255,0.07);
}
.jtc-btn-call:hover {
  box-shadow: 0 14px 34px var(--jtcb-call-hover-glow, rgba(13,26,38,0.5));
  filter: brightness(1.2);
  color: var(--jtcb-call-text, #fff) !important;
}
.jtc-icon-call svg {
  animation: jtcbPhoneRing 3.5s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes jtcbPhoneRing {
  0%,84%,100% { transform:rotate(0deg) scale(1);    }
  87%          { transform:rotate(-16deg) scale(1.1);}
  90%          { transform:rotate(16deg) scale(1.1); }
  93%          { transform:rotate(-9deg) scale(1);   }
  96%          { transform:rotate(9deg) scale(1);    }
}

/* ── WhatsApp ── */
.jtc-btn-wa {
  background: var(--jtcb-wa-bg, #1E6B3C);
  color: var(--jtcb-wa-text, #fff) !important;
  box-shadow: 0 6px 22px var(--jtcb-wa-shadow, rgba(30,107,60,0.5)),
              0 2px  6px rgba(30,107,60,0.2),
              inset 0 1px 0 rgba(255,255,255,0.09);
}
.jtc-btn-wa:hover {
  box-shadow: 0 14px 34px var(--jtcb-wa-shadow, rgba(30,107,60,0.55));
  filter: brightness(1.1);
  color: var(--jtcb-wa-text, #fff) !important;
}
.jtc-icon-wa {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.jtc-icon-wa::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--jtcb-wa-halo, rgba(73,198,110,0.5));
  animation: jtcbWaHalo 1.9s ease-out infinite;
}
@keyframes jtcbWaHalo {
  0%   { transform:scale(.85); opacity:.85; }
  100% { transform:scale(2.3); opacity:0;   }
}

/* ── Contact ── */
.jtc-btn-contact {
  background: var(--jtcb-contact-bg, #49C66E);
  color: var(--jtcb-contact-text, #fff) !important;
  box-shadow: 0 6px 22px var(--jtcb-contact-shadow, rgba(73,198,110,0.5)),
              0 2px  6px rgba(73,198,110,0.2),
              inset 0 1px 0 rgba(255,255,255,0.18);
}
.jtc-btn-contact:hover {
  background: var(--jtcb-contact-hover, #3aad5e);
  box-shadow: 0 14px 34px var(--jtcb-contact-shadow, rgba(73,198,110,0.55));
  color: var(--jtcb-contact-text, #fff) !important;
}
.jtc-icon-contact svg {
  animation: jtcbContactBounce 2.4s ease-in-out infinite;
}
@keyframes jtcbContactBounce {
  0%,100% { transform:translateY(0);   }
  45%     { transform:translateY(-3px);}
  65%     { transform:translateY(1px); }
}

/* ── Tooltip ── */
.jtc-tip {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: var(--jtcb-tip-bg, rgba(13,26,38,0.93));
  color: var(--jtcb-tip-text, rgba(255,255,255,0.92));
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.jtc-tip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--jtcb-tip-bg, rgba(13,26,38,0.93));
}
.jtc-btn:hover .jtc-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Tablet ≤ 768px ── */
@media (max-width: 768px) {
  #jtc-widget { bottom: 20px; gap: 8px; }
  #jtc-btns   { gap: 8px; }
  .jtc-btn    { padding: 12px 18px; font-size: 12px; gap: 7px; }
  #jtc-status { font-size: 10.5px; padding: 6px 14px 6px 10px; }
  .jtc-tip    { display: none; }
}

/* ── Mobile ≤ 480px ── */
@media (max-width: 480px) {
  #jtc-widget {
    bottom: 14px;
    width: calc(100vw - 24px);
    max-width: 390px;
    gap: 7px;
  }
  #jtc-status { font-size: 10px; padding: 5px 13px 5px 10px; gap: 7px; }
  #jtc-btns   { width: 100%; gap: 7px; }
  .jtc-btn    {
    flex: 1;
    justify-content: center;
    padding: 13px 6px;
    font-size: 11px;
    gap: 5px;
    border-radius: 14px;
  }
  .jtc-label-full  { display: none; }
  .jtc-label-short { display: inline; }
  .jtc-tip         { display: none; }
}

/* ── Tiny ≤ 340px ── */
@media (max-width: 340px) {
  .jtc-btn    { padding: 12px 4px; font-size: 10px; border-radius: 12px; gap: 4px; }
  .jtc-btn svg { width: 14px; height: 14px; }
  #jtc-status { font-size: 9.5px; gap: 6px; }
}

/* Powered by JT */
.jtc-powered-by {
	text-align: center;
	margin-top: 5px;
	font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
	font-size: 9px;
	color: rgba(255,255,255,0.15);
}
.jtc-powered-by a { color: rgba(255,255,255,0.2); text-decoration: none; }