/* ═══════════════════════════════════════════════════════════════════════════
   Graphic Innovator Social Proof — Frontend Stylesheet
   Premium Dark Glassmorphism | Accent: Blue #2a6aee / Orange #f37021
   ═══════════════════════════════════════════════════════════════════════════ */
@charset "UTF-8";

/* ── Root container ────────────────────────────────────────────────────────── */
#gisp-root {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  font-family: 'Inter', 'Outfit', 'Segoe UI', -apple-system, sans-serif;
}

/* ── Positions ─────────────────────────────────────────────────────────────── */
#gisp-root.gisp-pos-bottom-left  { bottom: 28px; left: 24px; }
#gisp-root.gisp-pos-bottom-right { bottom: 28px; right: 24px; }
#gisp-root.gisp-pos-top-right    { top: 90px; right: 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARD — Enterprise Dark Glassmorphism 
   ═══════════════════════════════════════════════════════════════════════════ */
.gisp-card {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  width: 340px;
  max-width: calc(100vw - 48px);
  padding: 16px 18px 18px 22px;
  border-radius: 16px;
  
  /* Glassmorphism */
  background: rgba(11, 24, 41, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--gisp-accent, #2a6aee);
  
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.40),
    0 2px 10px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  
  color: #f8fafc;
  overflow: hidden;
  will-change: transform, opacity;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.gisp-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.50),
    0 4px 16px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Live dot on the left border ───────────────────────────────────────────── */
.gisp-card::after {
  content: '';
  position: absolute;
  top: 20px;
  left: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gisp-accent, #2a6aee);
  box-shadow: 0 0 0 2px rgba(11, 24, 41, 0.9);
}

/* ── Icon Badge ────────────────────────────────────────────────────────────── */
.gisp-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.02);
}

/* ── Body ──────────────────────────────────────────────────────────────────── */
.gisp-body { flex: 1; min-width: 0; }

/* Type badge */
.gisp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gisp-accent, #f37021);
  margin-bottom: 6px;
}

/* Pulsing live dot */
.gisp-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gisp-accent, #f37021);
  animation: gisp-blink 1.8s ease-in-out infinite;
  box-shadow: 0 0 8px var(--gisp-accent, #f37021);
}

.gisp-message {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #f1f5f9;
  margin: 0 0 5px;
}

.gisp-detail {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* CTA — Brand Orange Gradient */
.gisp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Outfit', 'Inter', sans-serif;
  text-decoration: none !important;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
  transition: all 0.2s ease;
}

.gisp-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.40);
}

/* Offer card — blue accent */
.gisp-card.gisp-type-offer {
  border-left-color: #2a6aee;
  background: rgba(11, 24, 41, 0.85);
}
.gisp-card.gisp-type-offer .gisp-cta {
  width: 100%;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.gisp-card.gisp-type-offer .gisp-cta:hover {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.40);
}
.gisp-card.gisp-type-offer::after { background: #2a6aee; }

/* Review stars */
.gisp-stars {
  color: #fbbf24;
  font-size: 13px;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* Visitor count pill */
.gisp-visitor-count {
  display: inline-block;
  background: rgba(14, 116, 144, 0.15);
  border: 1px solid rgba(14, 116, 144, 0.3);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #67e8f9;
}

/* Close button */
.gisp-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  line-height: 1;
  flex-shrink: 0;
}
.gisp-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
  transform: rotate(90deg);
}

/* Brand footer */
.gisp-brand {
  font-size: 10px;
  color: #64748b;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.gisp-brand::before { content: '✨'; font-size: 10px; }

/* Progress bar — blue to orange */
.gisp-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.gisp-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #2a6aee, #ea580c);
  transform-origin: left;
  animation: gisp-shrink linear forwards;
  animation-duration: var(--gisp-duration, 7s);
  box-shadow: 0 0 10px rgba(234, 88, 12, 0.5);
}

/* ════════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════════════════ */

.gisp-anim-slide.gisp-enter  { animation: gisp-slide-in  0.50s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.gisp-anim-slide.gisp-exit   { animation: gisp-slide-out 0.40s cubic-bezier(0.55, 0, 1, 0.45) forwards; }

.gisp-pos-bottom-right .gisp-anim-slide.gisp-enter,
.gisp-pos-top-right    .gisp-anim-slide.gisp-enter { animation-name: gisp-slide-in-right; }
.gisp-pos-bottom-right .gisp-anim-slide.gisp-exit,
.gisp-pos-top-right    .gisp-anim-slide.gisp-exit  { animation-name: gisp-slide-out-right; }

.gisp-anim-fade.gisp-enter   { animation: gisp-fade-in  0.40s ease forwards; }
.gisp-anim-fade.gisp-exit    { animation: gisp-fade-out 0.35s ease forwards; }

.gisp-anim-bounce.gisp-enter { animation: gisp-bounce-in 0.60s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.gisp-anim-bounce.gisp-exit  { animation: gisp-slide-out 0.40s ease forwards; }

@keyframes gisp-slide-in {
  from { transform: translateX(-120%) scale(0.95); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes gisp-slide-out {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to   { transform: translateX(-120%) scale(0.95); opacity: 0; }
}
@keyframes gisp-slide-in-right {
  from { transform: translateX(120%) scale(0.95); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes gisp-slide-out-right {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to   { transform: translateX(120%) scale(0.95); opacity: 0; }
}
@keyframes gisp-fade-in {
  from { opacity: 0; transform: translateY(15px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gisp-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes gisp-bounce-in {
  0%   { transform: scale(0.85) translateY(20px); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes gisp-shrink {
  from { width: 100%; }
  to   { width: 0%;   }
}
@keyframes gisp-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(1.3); }
}

/* ── Mobile safe area ───────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  #gisp-root.gisp-pos-bottom-left,
  #gisp-root.gisp-pos-bottom-right {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    left: 12px;
    right: 12px;
  }
  .gisp-card {
    width: 100%;
    max-width: 100%;
  }
}