/* Tarot Reading - قراءة تاروت مجانية */

.tr-widget {
  font-family: 'Tajawal', sans-serif;
  direction: rtl;
  background: #08060f;
  background-image:
    radial-gradient(ellipse at 25% 15%, rgba(88,28,135,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(120,53,15,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(30,10,60,0.15) 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: 560px;
}
.tr-widget *, .tr-widget *::before, .tr-widget *::after { box-sizing: border-box; }

/* ─── Ambient ─── */
.tr-bg-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.2; animation: trOrb 16s ease-in-out infinite; pointer-events: none; }
.tr-bg-orb-1 { width: 450px; height: 450px; background: #7c3aed; top: -140px; right: -100px; }
.tr-bg-orb-2 { width: 380px; height: 380px; background: #b45309; bottom: -120px; left: -80px; animation-delay: -6s; }
.tr-bg-orb-3 { width: 200px; height: 200px; background: #be185d; top: 50%; left: 30%; animation-delay: -10s; opacity: 0.1; }
@keyframes trOrb { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(20px,-25px) scale(1.05)} 66%{transform:translate(-25px,20px) scale(0.95)} }
.tr-stars { position: absolute; inset: 0; pointer-events: none; }
.tr-star { position: absolute; background: white; border-radius: 50%; animation: trTwinkle 4s ease-in-out infinite; }
@keyframes trTwinkle { 0%,100%{opacity:0.1} 50%{opacity:0.6} }

/* ─── Main Card ─── */
.tr-card-main {
  position: relative; z-index: 2; width: 100%; max-width: 700px;
  background: rgba(12,10,22,0.88); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 28px; padding: 40px 32px;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.55), 0 0 120px rgba(124,58,237,0.05);
  backdrop-filter: blur(24px); margin: 0 auto;
}
.tr-card-main::before { content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:160px; height:3px; background:linear-gradient(90deg,#7c3aed,#b45309,#be185d); border-radius:0 0 4px 4px; }
.tr-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ─── Phases ─── */
.tr-phase { display: none; }
.tr-phase-active { display: block; animation: trFadeIn 0.5s ease; }
@keyframes trFadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ─── Header ─── */
.tr-header { text-align: center; margin-bottom: 28px; }
.tr-icon-wrap { display:inline-flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,0.15),rgba(180,83,9,0.08)); border:1px solid rgba(124,58,237,0.2); margin-bottom:18px; position:relative; }
.tr-icon-crystal { font-size: 40px; animation: trBob 3s ease-in-out infinite; }
@keyframes trBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.tr-icon-wrap::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed rgba(124,58,237,0.15); animation:trSpin 30s linear infinite; }
@keyframes trSpin { to{transform:rotate(360deg)} }
.tr-title { font-family:'Amiri',serif !important; font-size:30px !important; font-weight:700 !important; background:linear-gradient(135deg,#e9d5ff,#fbbf24,#f0abfc); -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; }
.tr-subtitle { color: #94a3b8; font-size: 15px; margin: 0; line-height: 1.7; }

/* ─── Question ─── */
.tr-question-section { margin-bottom: 24px; }
.tr-q-label { display:block; font-size:15px; font-weight:600; color:#c4b5fd; margin-bottom:10px; text-align:center; }
.tr-textarea { width:100%; padding:14px 18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; color:#f1f5f9; font-family:'Tajawal',sans-serif; font-size:15px; outline:none; transition:all 0.3s; direction:rtl; resize:vertical; }
.tr-textarea::placeholder { color: #475569; }
.tr-textarea:focus { border-color:rgba(124,58,237,0.35); background:rgba(255,255,255,0.05); box-shadow:0 0 0 4px rgba(124,58,237,0.06); }

/* ─── Spread Info ─── */
.tr-spread-info { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:28px; }
.tr-spread-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 18px; border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
.tr-spread-num { font-size:20px; font-weight:800; background:linear-gradient(135deg,#c4b5fd,#fbbf24); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.tr-spread-label { font-size: 12px; color: #94a3b8; font-weight: 500; }
.tr-spread-arrow { color: #475569; font-size: 18px; }

/* ─── Button ─── */
.tr-btn { width:100%; padding:16px; border:none; border-radius:14px; background:linear-gradient(135deg,#7c3aed,#b45309,#be185d); color:white; font-family:'Tajawal',sans-serif; font-size:18px; font-weight:700; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden; }
.tr-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent); opacity:0; transition:opacity 0.3s; }
.tr-btn:hover::before { opacity:1; }
.tr-btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(124,58,237,0.25); }
.tr-btn:active { transform:translateY(0); }

/* ═══════════════════════════════
   PHASE 2: CARD SELECTION
   ═══════════════════════════════ */
.tr-select-header { text-align: center; margin-bottom: 20px; }
.tr-select-title { font-family:'Amiri',serif; font-size:22px; font-weight:700; color:#e9d5ff; margin-bottom:6px; }
.tr-select-sub { font-size: 14px; color: #94a3b8; margin-bottom: 14px; }
.tr-select-sub strong { color: #fbbf24; }
.tr-picked-row { display:flex; justify-content:center; gap:10px; min-height:48px; }
.tr-picked-slot { width:40px; height:56px; border-radius:8px; border:2px dashed rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; font-size:11px; color:#475569; transition:all 0.3s; }
.tr-picked-slot.tr-picked-filled { border-style:solid; border-color:#7c3aed; background:rgba(124,58,237,0.15); font-size:20px; color:#e9d5ff; }

/* ─── Face-down Deck Cards ─── */
.tr-deck { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:16px; max-height:440px; overflow-y:auto; padding:4px; }
.tr-deck::-webkit-scrollbar { width:4px; }
.tr-deck::-webkit-scrollbar-thumb { background:rgba(124,58,237,0.3); border-radius:4px; }

.tr-deck-card {
  width: 58px; height: 88px; border-radius: 8px;
  cursor: pointer; transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(160deg, #1a0e3a 0%, #120830 40%, #1a0e3a 100%);
  border: 1.5px solid rgba(180,140,60,0.35);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.tr-deck-card::after { content:''; position:absolute; inset:4px; border-radius:5px; border:1px solid rgba(180,140,60,0.18); pointer-events:none; }
.tr-deck-card::before { content:'✦'; position:absolute; z-index:1; font-size:16px; color:rgba(180,140,60,0.3); text-shadow:0 0 6px rgba(180,140,60,0.12); transition:all 0.3s; }
.tr-deck-card:hover { transform:translateY(-8px) scale(1.06); border-color:rgba(251,191,36,0.6); box-shadow:0 10px 30px rgba(124,58,237,0.25), inset 0 0 15px rgba(180,140,60,0.08), 0 0 15px rgba(251,191,36,0.15); }
.tr-deck-card:hover::before { color:rgba(251,191,36,0.7); text-shadow:0 0 10px rgba(251,191,36,0.3); transform:scale(1.3); }
.tr-deck-card.tr-card-picked { opacity:0.2; pointer-events:none; transform:scale(0.88); }
.tr-select-hint { text-align:center; font-size:13px; color:#64748b; margin-top:4px; }

/* ═══════════════════════════════
   PHASE 3: REVEALED TAROT CARDS
   ═══════════════════════════════ */
.tr-reveal-header { text-align: center; margin-bottom: 28px; }
.tr-reveal-title { font-family:'Amiri',serif !important; font-size:28px !important; font-weight:700 !important; color:#e9d5ff; margin:0 0 8px 0 !important; border:none !important; padding:0 !important; }
.tr-reveal-question { font-size:15px; color:#94a3b8; font-style:italic; margin:0; line-height:1.6; }

.tr-three-cards { display:flex; justify-content:center; gap:20px; margin-bottom:36px; flex-wrap:wrap; perspective:1000px; }
.tr-revealed-card { width:170px; text-align:center; animation:trCardReveal 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }
.tr-revealed-card:nth-child(2) { animation-delay:0.25s; }
.tr-revealed-card:nth-child(3) { animation-delay:0.5s; }
@keyframes trCardReveal { from{opacity:0;transform:scale(0.4) rotateY(180deg)} to{opacity:1;transform:scale(1) rotateY(0deg)} }

/* ─── Realistic Tarot Card Face ─── */
.tr-tarot-face {
  width: 170px; height: 260px;
  border-radius: 12px;
  position: relative; overflow: hidden;
  margin: 0 auto 12px;
  /* Parchment base */
  background: linear-gradient(175deg, #f5ecd7 0%, #ede0c4 25%, #e2d3ae 50%, #dbc99e 75%, #d4c193 100%);
  border: 3px solid;
  border-image: linear-gradient(135deg, #c9a84c, #a07830, #d4b560, #8a6520, #c9a84c) 1;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.35),
    0 12px 32px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 0 40px rgba(120,90,40,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tr-tarot-face:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 16px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Gold ornamental outer frame */
.tr-tarot-frame-outer {
  position: absolute; inset: 6px;
  border-radius: 8px;
  border: 1.5px solid rgba(180,140,60,0.45);
  pointer-events: none; z-index: 2;
}
/* Inner ornamental frame */
.tr-tarot-frame-inner {
  position: absolute; inset: 11px;
  border-radius: 6px;
  border: 1px solid rgba(180,140,60,0.2);
  pointer-events: none; z-index: 2;
}

/* Corner ornaments */
.tr-tarot-corner {
  position: absolute; z-index: 5;
  color: #a08040; font-size: 14px; line-height: 1;
  opacity: 0.5;
}
.tr-tarot-corner-tl { top: 8px; right: 10px; }
.tr-tarot-corner-tr { top: 8px; left: 10px; transform: scaleX(-1); }
.tr-tarot-corner-bl { bottom: 8px; right: 10px; transform: scaleY(-1); }
.tr-tarot-corner-br { bottom: 8px; left: 10px; transform: scale(-1); }

/* Numeral at top center */
.tr-tarot-numeral {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: 'Amiri', serif;
  font-size: 14px; font-weight: 700;
  color: #5a4520; z-index: 5;
  letter-spacing: 2px;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

/* Central image area with scene */
.tr-tarot-image-area {
  position: absolute;
  top: 34px; left: 16px; right: 16px; bottom: 56px;
  border-radius: 4px; overflow: hidden;
  z-index: 1;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
/* Scene background gradient */
.tr-tarot-scene {
  position: absolute; inset: 0;
  border-radius: 4px;
}
/* Main symbol */
.tr-tarot-symbol {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 62px; z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
}
/* Decorative rays behind symbol */
.tr-tarot-rays {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; overflow: hidden;
}
.tr-tarot-rays::before {
  content: '';
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
}
/* Stars/dots scattered in scene */
.tr-tarot-scene-stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.tr-tarot-scene-star {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
}

/* Bottom banner */
.tr-tarot-banner {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 52px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 5;
  background: linear-gradient(to top, #f0e5cc 0%, #efe2c7 70%, #eddcc0 100%);
  border-top: 1px solid rgba(160,128,80,0.3);
}
.tr-tarot-banner::before {
  content: '━━ ✦ ━━';
  position: absolute; top: -9px;
  font-size: 10px; color: rgba(160,128,80,0.45);
  letter-spacing: 3px;
}
.tr-tarot-banner-name {
  font-family: 'Amiri', serif;
  font-size: 16px; font-weight: 700;
  color: #3d3018;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  line-height: 1.2;
}
.tr-tarot-banner-sub {
  font-size: 10px; color: #7a6a48;
  font-weight: 500; margin-top: 2px;
  letter-spacing: 0.5px;
}

/* Aged vignette overlay */
.tr-tarot-vignette {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(80,60,20,0.08) 100%);
}

/* Position label & name below card */
.tr-card-position { font-size:12px; color:#64748b; font-weight:500; margin-bottom:2px; }
.tr-card-label { font-family:'Amiri',serif; font-size:16px; font-weight:700; }

/* ─── Reading Sections ─── */
.tr-reading-card { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:18px; padding:24px 22px; margin-bottom:16px; animation:trFadeIn 0.5s ease both; }
.tr-reading-card:nth-child(2) { animation-delay:0.15s; }
.tr-reading-card:nth-child(3) { animation-delay:0.3s; }
.tr-reading-card-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tr-reading-card-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.tr-reading-card-meta { flex:1; }
.tr-reading-card-pos { font-size:12px; font-weight:500; margin-bottom:2px; }
.tr-reading-card-name { font-family:'Amiri',serif; font-size:18px; font-weight:700; color:#f1f5f9; }
.tr-reading-keywords { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.tr-reading-kw { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
.tr-reading-text { font-size:15px; color:#cbd5e1; line-height:1.9; }

/* ─── Summary ─── */
.tr-summary-section { background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(180,83,9,0.04)); border:1px solid rgba(124,58,237,0.1); border-radius:18px; padding:24px 22px; margin-bottom:24px; }
.tr-summary-title { font-family:'Amiri',serif; font-size:20px; font-weight:700; color:#fbbf24; margin-bottom:12px; text-align:center; }
.tr-summary-text { font-size:15px; color:#cbd5e1; line-height:1.9; text-align:center; }

/* ─── Actions ─── */
.tr-action-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.tr-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; }
.tr-btn-secondary:hover { background:rgba(255,255,255,0.08); color:#f1f5f9; border-color:rgba(255,255,255,0.15); }
.tr-disclaimer { font-size:12px; color:#475569; text-align:center; }

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

/* ─── Mobile ─── */
@media (max-width: 560px) {
  .tr-widget { padding: 24px 10px; }
  .tr-card-main { padding: 28px 14px; border-radius: 22px; }
  .tr-title { font-size: 24px !important; }
  .tr-deck-card { width: 48px; height: 72px; }
  .tr-deck-card::before { font-size: 13px; }
  .tr-tarot-face { width: 120px; height: 190px; }
  .tr-tarot-symbol { font-size: 42px; }
  .tr-tarot-banner { height: 42px; }
  .tr-tarot-banner-name { font-size: 13px; }
  .tr-tarot-numeral { font-size: 11px; top: 10px; }
  .tr-tarot-image-area { top: 26px; left: 12px; right: 12px; bottom: 44px; }
  .tr-revealed-card { width: 120px; }
  .tr-three-cards { gap: 10px; }
  .tr-spread-info { gap: 8px; }
  .tr-spread-card { padding: 10px 12px; }
}