/* =====================================================
   College WhatsApp Support – style.css (Frontend)
   ===================================================== */

/* ── Widget wrapper ── */
.cwa-widget {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Cairo', 'Tahoma', sans-serif;
}

/* ── Main Button ── */
.cwa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--cwa-size, 62px);
  height: var(--cwa-size, 62px);
  background: var(--cwa-bg, #25D366);
  color: var(--cwa-txt, #fff);
  border-radius: var(--cwa-radius, 50px);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  font-size: clamp(24px, 4vw, 30px);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: visible;
}
.cwa-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.6);
  color: var(--cwa-txt, #fff);
}

/* Text button */
.cwa-btn-text {
  width: auto !important;
  padding: 0 20px;
  font-size: 15px !important;
  font-weight: 700;
  direction: rtl;
  white-space: nowrap;
}
.cwa-btn-text i { font-size: 22px; }

/* ── Pulse ring ── */
.cwa-pulse-ring {
  position: absolute;
  width: calc(var(--cwa-size,62px) + 16px);
  height: calc(var(--cwa-size,62px) + 16px);
  border-radius: 50%;
  border: 3px solid var(--cwa-bg, #25D366);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: cwaPulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes cwaPulse {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity:0.8; }
  100% { transform: translate(-50%,-50%) scale(1.6); opacity:0; }
}

/* ── Animations ── */
.cwa-anim-pulse  .cwa-btn { animation: cwaBtnPulse 2.5s ease infinite; }
.cwa-anim-bounce .cwa-btn { animation: cwaBounce 1.5s ease infinite; }
.cwa-anim-shake  .cwa-btn { animation: cwaShake 2s ease infinite; }

@keyframes cwaBtnPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
  50%     { box-shadow: 0 4px 32px rgba(37,211,102,0.75); transform: scale(1.05); }
}
@keyframes cwaBounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-10px); }
  60%     { transform: translateY(-5px); }
}
@keyframes cwaShake {
  0%,100% { transform: rotate(0deg); }
  10%,30%,50%,70%,90% { transform: rotate(-8deg); }
  20%,40%,60%,80%     { transform: rotate(8deg); }
}

/* ── Badge ── */
.cwa-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: #EF4444;
  color: #fff;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cairo', sans-serif;
  box-shadow: 0 2px 6px rgba(239,68,68,0.5);
  animation: cwaBadge 0.5s ease;
}
@keyframes cwaBadge {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Popup Card ── */
.cwa-popup-card {
  position: absolute;
  width: 320px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(15,23,42,0.18);
  overflow: hidden;
  direction: rtl;
  animation: cwaSlideUp 0.3s ease;
  transform-origin: bottom center;
}
@keyframes cwaSlideUp {
  from { opacity:0; transform:translateY(16px) scale(0.95); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* Header */
.cwa-popup-header {
  background: var(--cwa-hdr, #128C7E);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cwa-popup-avatar {
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; flex-shrink: 0;
}
.cwa-popup-head-text { flex: 1; min-width: 0; }
.cwa-popup-head-text strong {
  display: block; color: #fff;
  font-size: 13px; font-weight: 800;
  line-height: 1.3;
}
.cwa-popup-head-text span {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
}
.cwa-popup-close {
  background: rgba(255,255,255,0.15);
  border: none; color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer;
  font-size: 16px; flex-shrink: 0;
  transition: background 0.2s;
}
.cwa-popup-close:hover { background: rgba(255,255,255,0.3); }

/* Body */
.cwa-popup-body { padding: 14px 14px 10px; }
.cwa-dept-label {
  font-size: 12px; color: #64748B;
  margin: 0 0 10px; font-weight: 600;
  text-align: right;
}

/* Dept buttons */
.cwa-dept-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin-bottom: 8px;
  text-decoration: none;
  color: #1E293B;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Cairo', 'Tahoma', sans-serif;
  direction: rtl;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cwa-dept-btn:hover {
  background: var(--cwa-bg, #25D366);
  color: #fff;
  border-color: transparent;
  transform: translateX(-3px);
}
.cwa-dept-btn i:first-child {
  font-size: 17px;
  color: var(--cwa-bg, #25D366);
  flex-shrink: 0;
  transition: color 0.2s;
}
.cwa-dept-btn:hover i:first-child { color: #fff; }
.cwa-dept-btn span { flex: 1; }
.cwa-arr { font-size: 11px; color: #94A3B8; transition: color 0.2s; }
.cwa-dept-btn:hover .cwa-arr { color: rgba(255,255,255,0.8); }
.cwa-dept-single { background: #DCFCE7; border-color: #BBF7D0; }
.cwa-dept-single:hover { background: var(--cwa-bg, #25D366); }

/* Footer */
.cwa-popup-footer {
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  padding: 10px 14px;
  font-size: 11px;
  color: #94A3B8;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  direction: rtl;
}
.cwa-popup-footer i { color: #25D366; }

/* ── Offline message ── */
.cwa-offline {
  position: absolute;
  background: #1E293B;
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  right: 0;
  bottom: calc(100% + 10px);
  font-family: 'Cairo', 'Tahoma', sans-serif;
  direction: rtl;
}
.cwa-offline::after {
  content: '';
  position: absolute;
  bottom: -6px; right: 16px;
  width: 12px; height: 12px;
  background: #1E293B;
  clip-path: polygon(0 0,100% 0,50% 100%);
}

@media (max-width: 380px) {
  .cwa-popup-card { width: 290px; }
}


/* Local icon fallback: no external Font Awesome or Google Fonts */
.cwa-admin i[class*="fa-"], .cwa-widget i[class*="fa-"]{
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.25em;
  height:1.25em;
  line-height:1;
}
.fa-whatsapp::before,.fa-brands.fa-whatsapp::before{content:"☎";}
.fa-xmark::before{content:"×";}
.fa-arrow-left::before{content:"←";}
.fa-user-graduate::before{content:"🎓";}
.fa-id-card::before{content:"▣";}
.fa-laptop-code::before{content:"💻";}
.fa-circle::before{content:"●";}
.fa-rectangle-ad::before{content:"▭";}
.fa-list::before{content:"☰";}
.fa-comment-dots::before,.fa-comment::before,.fa-message::before{content:"💬";}
.fa-phone::before{content:"☎";}
.fa-palette::before{content:"◈";}
.fa-eye::before{content:"◉";}
.fa-clock::before{content:"◷";}
.fa-shapes::before{content:"◆";}
.fa-compass::before{content:"⌖";}
.fa-sliders::before{content:"≡";}
.fa-mobile-screen::before,.fa-mobile-screen-button::before{content:"▯";}
.fa-desktop::before{content:"▰";}
.fa-toggle-on::before{content:"●";}
.fa-floppy-disk::before{content:"✓";}
.fa-chart-bar::before{content:"▥";}
.fa-gear::before{content:"⚙";}
.fa-calendar::before,.fa-calendar-day::before,.fa-calendar-week::before{content:"▣";}
.fa-arrow-pointer::before{content:"↗";}
.fa-shield-halved::before{content:"◈";}
.cwa-dept-mini-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:rgba(37,211,102,.13);font-size:18px;flex:0 0 auto}