/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    --bg:           #fdf8f2;
    --bg-card:      #ffffff;
    --bg-card2:     #fef9f0;
    --bg-nav:       #ffffff;
    --border:       #e8ddd0;
    --border-light: #f0e8dc;

    --text:         #0f2044;
    --text-muted:   #2a4a7f;
    --text-light:   #5a7aaa;

    --gold:         #c8860a;
    --gold-light:   #e8a020;
    --gold-bg:      #fef3dc;
    --gold-border:  #f0d080;

    --blue:         #1a3a6b;
    --blue-light:   #2a5298;
    --blue-bg:      #eef3fc;

    --saffron:      #e07b20;
    --saffron-light:#f09040;

    --nav-h:        64px;
    --radius:       12px;
    --radius-sm:    8px;
    --shadow:       0 2px 12px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 24px rgba(0,0,0,0.12);
}

[data-theme="dark"] {
    --bg:           #0e1424;
    --bg-card:      #111827;
    --bg-card2:     #1a2238;
    --bg-nav:       #0c1220;
    --border:       #1e2840;
    --border-light: #2a3a55;

    --text:         #e8e0d0;
    --text-muted:   #8090a8;
    --text-light:   #5a6f8a;

    --gold:         #d9b24a;
    --gold-light:   #f5e08c;
    --gold-bg:      rgba(217,178,74,0.08);
    --gold-border:  rgba(217,178,74,0.18);

    --blue:         #4a9eff;
    --blue-light:   #7ab8ff;
    --blue-bg:      #0a1628;

    --saffron:      #e8c96a;
    --saffron-light:#f5e08c;

    --shadow:       0 2px 12px rgba(0,0,0,0.4);
    --shadow-md:    0 4px 24px rgba(0,0,0,0.6);
}

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    transition: background 0.25s, color 0.25s;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

img { max-width: 100%; }

/* ── Shell Layout ───────────────────────────────────────────────────────────── */
.rk-shell { display: flex; flex-direction: column; min-height: 100vh; padding-top: 58px; }
.rk-shell-main { flex: 1; }

@media (max-width: 768px) {
    .rk-shell { padding-top: 52px; }
}

/* ── Page Wrap ──────────────────────────────────────────────────────────────── */
.rk-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}
.rk-wrap-sm {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.rk-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.rk-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.rk-hero {
    text-align: center;
    padding: 2.5rem 1.25rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.rk-hero-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    letter-spacing: 0.03em;
}
.rk-h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    margin-bottom: 0.6rem;
}
.rk-h1 span { color: var(--gold); }
.rk-sub {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto;
}

/* ── Rashi Grid ─────────────────────────────────────────────────────────────── */
.rk-rashi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.rk-rashi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.65rem;
    align-items: start;
    font-family: inherit;
    width: 100%;
}
.rk-rashi-card:hover,
.rk-rashi-card.active {
    border-color: var(--gold);
    background: var(--gold-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.rk-rashi-icon {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: center;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
}
.rk-rashi-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: opacity(0.6);
    transition: filter 0.2s;
}
.rk-rashi-card:hover .rk-rashi-icon img,
.rk-rashi-card.active .rk-rashi-icon img {
    filter: opacity(1);
}

[data-theme="light"] .rk-rashi-icon img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(77%) saturate(1209%) hue-rotate(197deg) brightness(93%) contrast(104%) opacity(0.85);
}
[data-theme="light"] .rk-rashi-card:hover .rk-rashi-icon img,
[data-theme="light"] .rk-rashi-card.active .rk-rashi-icon img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(77%) saturate(1209%) hue-rotate(197deg) brightness(93%) contrast(104%);
}
.rk-rashi-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    display: block;
    line-height: 1.2;
}
.rk-rashi-en {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.68rem;
    color: var(--text-light);
    display: block;
    margin-top: 0.1rem;
}
.rk-rashi-graha {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.68rem;
    color: var(--gold);
    display: block;
    margin-top: 0.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Rashifal Content ───────────────────────────────────────────────────────── */
.rk-pred-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-top: 1.5rem;
}
.rk-pred-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}
.rk-pred-rashi-img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    filter: opacity(0.75);
}
[data-theme="light"] .rk-pred-rashi-img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(77%) saturate(1209%) hue-rotate(197deg) brightness(93%) contrast(104%);
}
.rk-pred-icon { font-size: 2.5rem; }
.rk-pred-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rk-pred-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.2rem; }

.rk-area-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}
.rk-area-card {
    background: var(--bg-card2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 1rem;
}
.rk-area-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.rk-area-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; }

/* ── Rating Bar ─────────────────────────────────────────────────────────────── */
.rk-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}
.rk-rating-label { font-size: 0.8rem; color: var(--text-muted); }
.rk-stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.1em; }

/* ── Subscribe Banner ───────────────────────────────────────────────────────── */
.rk-subscribe {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    margin-top: 2rem;
    color: #fff;
}
[data-theme="dark"] .rk-subscribe {
    background: linear-gradient(135deg, #1a2a50 0%, #0d1a35 100%);
    border: 1px solid var(--border);
}
.rk-subscribe h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.rk-subscribe p { font-size: 0.9rem; opacity: 0.85; margin-bottom: 1.25rem; }
.rk-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gold);
    color: #1a1008;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.7rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.rk-subscribe-btn:hover {
    background: var(--gold-light);
    color: #1a1008;
    transform: translateY(-1px);
}

/* Footer is rendered by soulFooter() from /home/sahilsoul/shared/soul-shell.php */

/* ── Skeleton Loader ────────────────────────────────────────────────────────── */
.rk-skel {
    background: linear-gradient(90deg, var(--border) 25%, var(--border-light) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: rk-shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes rk-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.rk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
}
.rk-badge-gold { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-border); }
.rk-badge-blue { background: var(--blue-bg); color: var(--blue); }

/* ── AEO Accordion ──────────────────────────────────────────────────────────── */
details summary::-webkit-details-marker { display: none; }
details[open] summary span { transform: rotate(45deg); display: inline-block; }

.rk-aeo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    text-decoration: none;
}
.rk-aeo-link:hover { background: var(--gold); color: #fff; }


/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rk-rashi-grid { grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
    .rk-rashi-card { padding: 0.7rem 0.65rem; column-gap: 0.5rem; }
    .rk-rashi-name { font-size: 0.8rem; }
    .rk-rashi-en { font-size: 0.62rem; }
    .rk-rashi-graha { font-size: 0.6rem; }
    .rk-rashi-icon { width: 30px; height: 30px; }
    .rk-rashi-icon img { width: 24px; height: 24px; }

    .rk-area-grid { grid-template-columns: 1fr; }
    .rk-pred-wrap { padding: 1.25rem; }
}

@media (max-width: 480px) {
    .rk-rashi-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .rk-hero { padding: 1.5rem 1rem 1rem; }
}