/* Zodiac Compatibility - حاسبة توافق الأبراج */

.zc-widget {
  font-family:'Tajawal',sans-serif; direction:rtl;
  background:#070510;
  background-image:
    radial-gradient(ellipse at 25% 20%, rgba(124,58,237,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(190,24,93,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(14,116,144,0.06) 0%, transparent 40%);
  color:#f1f5f9;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; position:relative; overflow:hidden;
  border-radius:24px; min-height:520px;
}
.zc-widget *, .zc-widget *::before, .zc-widget *::after { box-sizing:border-box; }

.zc-orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:0.18; animation:zcOrb 18s ease-in-out infinite; pointer-events:none; }
.zc-orb-1 { width:420px; height:420px; background:#7c3aed; top:-130px; left:-80px; }
.zc-orb-2 { width:360px; height:360px; background:#be185d; bottom:-100px; right:-80px; animation-delay:-7s; }
.zc-orb-3 { width:180px; height:180px; background:#0891b2; top:50%; left:55%; animation-delay:-12s; opacity:0.1; }
@keyframes zcOrb { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(25px,-20px) scale(1.05)} 66%{transform:translate(-20px,25px) scale(0.95)} }
.zc-stars { position:absolute; inset:0; pointer-events:none; }
.zc-star { position:absolute; background:white; border-radius:50%; animation:zcTwinkle 4s ease-in-out infinite; }
@keyframes zcTwinkle { 0%,100%{opacity:0.1} 50%{opacity:0.5} }

.zc-card-main {
  position:relative; z-index:2; width:100%; max-width:640px;
  background:rgba(10,8,20,0.9); border:1px solid rgba(255,255,255,0.06);
  border-radius:28px; padding:40px 28px;
  box-shadow:0 30px 60px -15px rgba(0,0,0,0.5), 0 0 100px rgba(124,58,237,0.04);
  backdrop-filter:blur(24px); margin:0 auto;
}
.zc-card-main::before { content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:140px; height:3px; background:linear-gradient(90deg,#7c3aed,#ec4899,#0891b2); border-radius:0 0 4px 4px; }
.zc-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.zc-phase { display:none; }
.zc-phase-active { display:block; animation:zcFadeIn 0.5s ease; }
@keyframes zcFadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* Header */
.zc-header { text-align:center; margin-bottom:28px; }
.zc-icon-wrap {
  display:inline-flex; align-items:center; justify-content:center;
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,0.15), rgba(190,24,93,0.08));
  border:1px solid rgba(124,58,237,0.2); margin-bottom:16px; position:relative;
}
.zc-icon-main { font-size:36px; animation:zcPulse 3s ease-in-out infinite; }
@keyframes zcPulse { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.1) rotate(10deg)} }
.zc-icon-wrap::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed rgba(124,58,237,0.15); animation:zcSpin 25s linear infinite; }
@keyframes zcSpin { to{transform:rotate(360deg)} }

.zc-title {
  font-family:'Amiri',serif !important; font-size:30px !important; font-weight:700 !important;
  background:linear-gradient(135deg,#c4b5fd,#f9a8d4,#67e8f9);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin:0 0 8px 0 !important; padding:0 !important; line-height:1.4 !important; border:none !important;
}
.zc-subtitle { color:#94a3b8; font-size:14px; margin:0; line-height:1.7; }

/* Selectors */
.zc-selectors { display:flex; gap:12px; align-items:flex-start; margin-bottom:24px; }
.zc-selector-col { flex:1; }
.zc-sel-label { font-size:15px; font-weight:700; color:#c4b5fd; text-align:center; margin-bottom:10px; }
.zc-vs { display:flex; align-items:center; justify-content:center; padding-top:50px; flex-shrink:0; }
.zc-vs-heart { font-size:28px; animation:zcBeat 1.3s ease-in-out infinite; }
@keyframes zcBeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.2)} 28%{transform:scale(1)} }

/* Zodiac Grid */
.zc-zodiac-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px;
}
.zc-zitem {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; border-radius:10px;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  cursor:pointer; transition:all 0.3s; font-size:11px; color:#64748b;
}
.zc-zitem-icon { font-size:20px; transition:transform 0.3s; }
.zc-zitem:hover { background:rgba(124,58,237,0.08); border-color:rgba(124,58,237,0.25); color:#c4b5fd; }
.zc-zitem:hover .zc-zitem-icon { transform:scale(1.15); }
.zc-zitem.zc-zitem-active {
  background:rgba(124,58,237,0.15); border-color:rgba(124,58,237,0.4);
  color:#e9d5ff; box-shadow:0 0 12px rgba(124,58,237,0.15);
}

.zc-sel-chosen { font-size:12px; color:#475569; text-align:center; min-height:18px; }

/* Button */
.zc-btn {
  width:100%; padding:16px; border:none; border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#ec4899,#0891b2);
  color:white; font-family:'Tajawal',sans-serif; font-size:18px; font-weight:700;
  cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden;
}
.zc-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }
.zc-btn:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(124,58,237,0.25); }

/* ═══════════════════════════════
   PHASE 2: RESULT
   ═══════════════════════════════ */

.zc-result-top { text-align:center; margin-bottom:24px; }
.zc-pair { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:8px; }
.zc-pair-sign { font-size:48px; animation:zcFadeIn 0.6s ease; }
.zc-pair-heart { font-size:28px; animation:zcBeat 1.3s ease-in-out infinite; }
.zc-pair-names { font-family:'Amiri',serif; font-size:20px; font-weight:700; color:#e9d5ff; }

/* Overall ring */
.zc-overall { text-align:center; margin-bottom:28px; }
.zc-overall-label { font-size:14px; color:#94a3b8; margin-bottom:10px; }
.zc-ring-wrap { position:relative; width:130px; height:130px; margin:0 auto 12px; }
.zc-ring-svg { width:130px; height:130px; transform:rotate(-90deg); }
.zc-ring-bg { fill:none; stroke:rgba(255,255,255,0.06); stroke-width:8; }
.zc-ring-fill { fill:none; stroke:#ec4899; stroke-width:8; stroke-linecap:round; stroke-dasharray:326.73; stroke-dashoffset:326.73; transition:stroke-dashoffset 1.5s cubic-bezier(0.34,1.56,0.64,1), stroke 0.5s; }
.zc-ring-pct {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Amiri',serif; font-size:32px; font-weight:700;
}
.zc-overall-verdict {
  font-family:'Amiri',serif; font-size:20px; font-weight:700;
  padding:6px 22px; border-radius:30px; display:inline-block;
}

/* Category bars */
.zc-categories { margin-bottom:24px; }
.zc-cat { margin-bottom:14px; }
.zc-cat-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:13px; }
.zc-cat-icon { font-size:16px; }
.zc-cat-name { flex:1; color:#cbd5e1; font-weight:500; }
.zc-cat-pct { font-weight:700; color:#e2e8f0; min-width:36px; text-align:left; }
.zc-cat-bar { height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.zc-cat-fill { height:100%; border-radius:4px; width:0%; transition:width 1.2s cubic-bezier(0.34,1.56,0.64,1); }

/* Analysis */
.zc-analysis {
  background:rgba(124,58,237,0.05); border:1px solid rgba(124,58,237,0.1);
  border-radius:16px; padding:20px; margin-bottom:20px;
  font-size:15px; color:#cbd5e1; line-height:1.9; text-align:center;
}

/* Strengths & Challenges */
.zc-two-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.zc-col-box { border-radius:14px; padding:16px 14px; }
.zc-col-str { background:rgba(16,185,129,0.05); border:1px solid rgba(16,185,129,0.1); }
.zc-col-cha { background:rgba(234,88,12,0.05); border:1px solid rgba(234,88,12,0.08); }
.zc-col-title { font-size:14px; font-weight:700; margin-bottom:10px; }
.zc-col-str .zc-col-title { color:#34d399; }
.zc-col-cha .zc-col-title { color:#fb923c; }
.zc-col-list { display:flex; flex-direction:column; gap:6px; }
.zc-col-item { font-size:13px; color:#94a3b8; line-height:1.6; padding-right:8px; border-right:2px solid rgba(255,255,255,0.06); }
.zc-col-str .zc-col-item { border-color:rgba(52,211,153,0.2); }
.zc-col-cha .zc-col-item { border-color:rgba(251,146,60,0.15); }

/* Advice */
.zc-advice {
  background:rgba(190,24,93,0.05); border:1px solid rgba(190,24,93,0.1);
  border-radius:16px; padding:20px; margin-bottom:24px;
}
.zc-advice-title { font-family:'Amiri',serif; font-size:18px; font-weight:700; color:#f9a8d4; margin-bottom:10px; text-align:center; }
.zc-advice-text { font-size:15px; color:#cbd5e1; line-height:1.9; text-align:center; }

/* Actions */
.zc-action-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.zc-btn-secondary { padding:10px 24px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:#94a3b8; font-family:'Tajawal',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.3s; }
.zc-btn-secondary:hover { background:rgba(255,255,255,0.08); color:#f1f5f9; }
.zc-disclaimer { font-size:12px; color:#475569; text-align:center; }

.zc-float-particle { position:absolute; font-size:18px; animation:zcFloatUp 3.5s ease-out forwards; opacity:0; pointer-events:none; }
@keyframes zcFloatUp { 0%{opacity:1;transform:translateY(0) scale(0.4) rotate(0)} 100%{opacity:0;transform:translateY(-320px) scale(1.1) rotate(40deg)} }

@media (max-width:520px) {
  .zc-widget { padding:24px 10px; }
  .zc-card-main { padding:28px 14px; border-radius:22px; }
  .zc-title { font-size:24px !important; }
  .zc-selectors { flex-direction:column; gap:16px; }
  .zc-vs { padding-top:0; }
  .zc-zodiac-grid { grid-template-columns:repeat(4,1fr); }
  .zc-pair-sign { font-size:40px; }
  .zc-two-cols { grid-template-columns:1fr; }
}