/* ============================================================================
   RelationshipLab shared theme
   Fonts: Vazirmatn (Persian UI/body) + Lalezar (Persian display headlines).
   No Arabic-styled faces anywhere (no Aref Ruqaa / Reem Kufi / Tajawal / etc).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&family=Lalezar&display=swap');

:root{
  --font-body: 'Vazirmatn', sans-serif;
  --font-display: 'Lalezar', 'Vazirmatn', sans-serif;

  --bg: #FFF9F0;
  --card: #FFFFFF;
  --card-soft: #FFF3E3;
  --ink: #2E2A24;
  --ink-mute: #8a8172;
  --line: #EFE3CE;

  --joy: #FF9F5A;       /* warm coral - primary accent, used sparingly */
  --joy-dim: #E8853C;
  --calm: #7FB89A;      /* sage green - calm accent */
  --calm-dim: #5f9877;
  --sky: #6FA8C9;       /* soft sky blue */
  --lavender: #B6A6D8;

  --good: #6FAE7C;      /* confidence badge: strong */
  --mid: #D9A441;       /* confidence badge: moderate */
  --pop: #C97BA0;       /* confidence badge: popular/contested */

  --shadow-soft: 0 20px 50px -24px rgba(60,45,20,.28);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.display{ font-family: var(--font-display); }
.mono-num{ font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing:.02em; }

/* ---------- layout helpers ---------- */
.rl-stage{ width:100%; max-width:580px; margin:0 auto; padding:24px; }
.rl-card{
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
@media (max-width:420px){ .rl-card{ padding:28px 20px; } }

/* ---------- gentle motion vocabulary ---------- */
@keyframes rl-fade-up{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@keyframes rl-fade{ from{opacity:0;} to{opacity:1;} }
@keyframes rl-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes rl-float{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-8px) rotate(3deg); } }
@keyframes rl-pop{ 0%{ transform:scale(.7); opacity:0; } 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }
@keyframes rl-shimmer{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
@keyframes rl-confetti-fall{ 0%{ transform:translateY(-20px) rotate(0deg); opacity:1; } 100%{ transform:translateY(160px) rotate(340deg); opacity:0; } }

.rl-enter{ animation: rl-fade-up .6s cubic-bezier(.2,.8,.2,1) forwards; }
.rl-fade{ animation: rl-fade .35s ease forwards; }
.rl-breathe{ animation: rl-breathe 3.2s ease-in-out infinite; }
.rl-float{ animation: rl-float 4.5s ease-in-out infinite; display:inline-block; }
.rl-pop{ animation: rl-pop .5s cubic-bezier(.25,1.4,.4,1) forwards; }

/* ---------- buttons ---------- */
.rl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border:none; border-radius: var(--radius-md);
  padding:16px; font-family: var(--font-body); font-size:16px; font-weight:700;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  background: var(--ink); color:#fff;
}
.rl-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.35); }
.rl-btn:active{ transform:translateY(0); }
.rl-btn.rl-btn-outline{ background:none; border:1.5px solid var(--line); color:var(--ink); }
.rl-btn.rl-btn-outline:hover{ background:var(--card-soft); }

/* ---------- confidence badges ---------- */
.rl-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:99px; margin-bottom:16px;
}
.rl-badge.rl-badge-good{ background:#eaf5ec; color:#3f7a4e; }
.rl-badge.rl-badge-mid{ background:#faf1de; color:#8f6a1f; }
.rl-badge.rl-badge-pop{ background:#f8e9f0; color:#9c4d72; }

.rl-badge-detail{
  font-size:12.5px; color:var(--ink-mute); line-height:1.9; background:var(--card-soft);
  border-radius: var(--radius-sm); padding:14px 16px; margin-bottom:18px;
}

/* ---------- progress ---------- */
.rl-progress-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-mute); margin-bottom:8px; }
.rl-progress-track{ height:8px; border-radius:99px; background:var(--card-soft); overflow:hidden; margin-bottom:26px; }
.rl-progress-fill{ height:100%; border-radius:99px; transition:width .4s ease; }

/* ---------- likert scale (shared across likert-based tests) ---------- */
.rl-qtext{ font-size:18px; font-weight:700; line-height:1.85; min-height:92px; margin-bottom:26px; }
.rl-scale{ display:flex; justify-content:space-between; align-items:flex-end; gap:6px; margin-bottom:10px; }
.rl-opt{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; background:none; border:none; font-family:inherit; }
.rl-dot{ border-radius:50%; background:var(--card-soft); border:2px solid var(--line); transition:all .15s ease; }
.rl-opt:hover .rl-dot{ transform:scale(1.1); }
.rl-opt.rl-selected .rl-dot{ border-color:transparent; }
.rl-scale-caption{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-mute); margin-bottom:22px; }
.rl-backlink{ text-align:center; font-size:12.5px; color:var(--ink-mute); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* ---------- forced-choice cards ---------- */
.rl-choice{
  display:block; width:100%; text-align:right; border:2px solid var(--line);
  background: var(--bg); border-radius: var(--radius-md); padding:20px 18px; margin-bottom:14px;
  font-family: var(--font-body); font-size:15.5px; line-height:1.9; color:var(--ink);
  cursor:pointer; transition:all .15s ease;
}
.rl-choice:hover{ transform:translateX(-3px); }
.rl-or{ text-align:center; font-family:var(--font-display); font-size:20px; margin:2px 0 14px; color:var(--joy-dim); }

/* ---------- floating emoji decoration ---------- */
.rl-emoji-row{ text-align:center; font-size:28px; margin-bottom:6px; letter-spacing:10px; }
.rl-emoji-row span{ display:inline-block; }
.rl-emoji-row span:nth-child(1){ animation: rl-float 4s ease-in-out infinite; }
.rl-emoji-row span:nth-child(2){ animation: rl-float 4.6s ease-in-out infinite .3s; }
.rl-emoji-row span:nth-child(3){ animation: rl-float 5.2s ease-in-out infinite .6s; }

/* ---------- confetti burst container ---------- */
.rl-confetti-piece{ position:absolute; top:0; font-size:18px; pointer-events:none; animation: rl-confetti-fall 1.4s ease-in forwards; }

/* ---------- consent modal ---------- */
.rl-modal-backdrop{
  position:fixed; inset:0; background:rgba(46,42,36,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000;
}
.rl-modal{
  background:#fff; border-radius: var(--radius-lg); padding:32px 28px; max-width:460px; width:100%;
  box-shadow: var(--shadow-soft); animation: rl-fade-up .4s cubic-bezier(.2,.8,.2,1) forwards;
}

/* ---------- misc text ---------- */
.rl-eyebrow{ text-align:center; font-size:11.5px; letter-spacing:.12em; color:var(--ink-mute); margin-bottom:14px; font-weight:700; }
.rl-lead{ font-size:15px; line-height:2; color:var(--ink-mute); margin-bottom:18px; }
.rl-disclaimer{ font-size:11.5px; color:var(--ink-mute); text-align:center; margin-top:16px; line-height:1.9; }
.rl-h1{ font-family:var(--font-display); font-size:32px; line-height:1.5; margin-bottom:12px; color:var(--ink); }

[hidden]{ display:none !important; }