/* Karmic Zodiac — locked state, reading sections, score bar, timeline. */

.karmic-lock {
  max-width: 560px; margin: 40px auto; text-align: center;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 48px 32px;
}
.karmic-lock-glyph { color: var(--accent); margin-bottom: 14px; }
.karmic-lock .eyebrow { margin-bottom: .5em; }
.karmic-lock h2 { font-size: 1.5rem; margin-bottom: .5em; }
.karmic-lock-tagline {
  letter-spacing: .14em; text-transform: uppercase; font-size: .78rem;
  color: var(--text-dim); margin-bottom: 1.6em;
}

.karmic-score-panel {
  max-width: 560px; margin: 0 auto 2.4em; text-align: center;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 26px;
}
.karmic-score-label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.karmic-score-bar {
  height: 10px; border-radius: 6px; background: var(--border); overflow: hidden; margin: 10px 0 8px;
}
.karmic-score-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--garnet)));
}
.karmic-score-value { font-family: var(--font-display); font-size: 1.1rem; }
.karmic-score-note { font-size: .76rem; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }

.karmic-facts-strip {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 2.4em;
}
.karmic-fact-chip {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; font-size: .86rem;
}
.karmic-fact-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }

.karmic-section {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 28px; margin-bottom: 1.4em;
}
.karmic-section h3 { margin-bottom: .5em; font-size: 1.1rem; }
.karmic-section p { color: var(--text); line-height: 1.65; }

.karmic-timeline { margin-top: 1.4em; padding-left: 6px; border-left: 2px solid var(--border); }
.karmic-timeline-event {
  position: relative; padding: 0 0 20px 22px;
}
.karmic-timeline-event:last-child { padding-bottom: 0; }
.karmic-timeline-dot {
  position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-panel);
}
.karmic-timeline-date { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.karmic-timeline-theme { font-family: var(--font-display); font-size: 1rem; margin-top: 2px; }

.karmic-save-row { text-align: center; margin: 2.4em 0 1em; }

.karmic-locked {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; color: var(--text-dim);
}

/* --- birth-chart.php banner --- */
.karmic-banner {
  display: block; box-sizing: border-box; width: 100%;
  max-width: 640px; margin: 3em auto 4em; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
  padding: 36px 30px;
}
.karmic-banner .karmic-banner-glyph { color: var(--accent); margin-bottom: 10px; }
.karmic-banner h3 { font-size: 1.3rem; letter-spacing: .04em; margin-bottom: .4em; }
.karmic-banner p { color: var(--text-dim); margin-bottom: .3em; }
.karmic-banner .karmic-banner-tagline {
  letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; color: var(--text-dim); margin: .8em 0 1.4em;
}
.karmic-banner .karmic-banner-vip {
  display: inline-block; margin-top: 14px; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}

/* --- menu VIP badge --- */
.nav-badge, .more-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: .62rem; letter-spacing: .08em; font-weight: 700; vertical-align: middle;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
}

/* --- horoscope.php VIP Karmic Reading widget --- */
.karmic-vip-widget {
  max-width: 720px; margin: 0 auto 2.4em;
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  padding: 22px 26px;
}
.karmic-vip-widget .eyebrow { color: var(--accent); }
.karmic-vip-widget h3 { margin: .3em 0 .5em; }