/* LifeVed Devotional — Tool/Content Pages (Listing + View) */

/* === PAGE CONTENT AREA === */
.page-content {
    padding-bottom: var(--space-lg);
}
.page-content .content-list { margin-bottom: var(--space-lg); }

/* === LISTING PAGE SUBTITLE (count) === */
.page-content > .fs-sm.text-muted {
    margin-bottom: var(--space-md);
    font-weight: 500;
}

/* === FILTER SECTION === */
.purpose-filter-section {
    background: linear-gradient(135deg, #fef9f0, #fdf5e6);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}
.purpose-filter-section h2 {
    font-size: var(--fs-base);
    margin-bottom: 12px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 600;
}
.purpose-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: var(--fs-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    min-height: 48px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%238b6e4e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* === VIDEO UPFRONT (immersive) === */
.video-hero {
    margin: -16px -16px 16px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* === GUIDED EXPERIENCE LAYOUT === */
.guided-header {
    text-align: center;
    padding: var(--space-lg) 0;
}
.guided-header-icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    display: block;
}
.guided-header h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    margin-bottom: var(--space-xs);
}
.guided-header p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* === STEP INDICATOR === */
.step-progress {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: var(--space-md) 0;
    padding: 0 var(--space-sm);
}
.step-dot {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    transition: background var(--duration);
}
.step-dot.done { background: var(--accent); }
.step-dot.current { background: var(--accent-light); animation: pulseGlow 2s infinite; }

/* === INFO CARD (benefits, timing, etc.) === */
.info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    margin-bottom: 10px;
}
.info-card-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-glow);
    border-radius: 50%;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.info-card-body { flex: 1; }
.info-card-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.info-card-value { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); margin-top: 2px; }

/* === TAG GRID (for mantras, categories) === */
.tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--space-sm) 0;
}
.tag-item {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* === OFFLINE INDICATOR === */
.offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.offline-badge.available { background: var(--success-bg); color: var(--success); }
.offline-badge.online-only { background: rgba(217,119,6,0.08); color: var(--warning); }

/* === CONTENT ITEM with IMAGE (for enhanced listings) === */
.content-item-img {
    width: 52px; height: 52px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bg-secondary), #fef3e0);
}
.content-item-img img { width: 100%; height: 100%; object-fit: cover; }

/* === DEITY PROFILE PAGE (Premium) === */
.deity-profile-hero {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(135deg, #fef9f0, #fdf3e4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    margin-bottom: var(--space-lg);
}
.dph-img {
    width: 100px; height: 100px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--accent-light);
    box-shadow: 0 4px 16px rgba(139, 110, 78, 0.15);
}
.dph-img img { width: 100%; height: 100%; object-fit: cover; }
.dph-body { flex: 1; }
.dph-name { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--text-primary); margin-bottom: 4px; }
.dph-aliases { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }

.deity-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: var(--space-lg);
}
@media (max-width: 480px) { .deity-info-grid { grid-template-columns: 1fr; } }

.deity-mantra-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, #fdf5e6, #fffbf0);
    border: 2px solid var(--accent-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}
.dmc-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: var(--accent);
    background: var(--accent-glow);
    border-radius: 50%;
    flex-shrink: 0;
}
.dmc-body { flex: 1; }
.dmc-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.dmc-text { font-size: 1.1rem; color: var(--accent); font-weight: 700; margin-top: 4px; line-height: 1.6; }

.deity-desc-text { line-height: 1.9; color: var(--text-primary); font-size: var(--fs-base); }

.deity-temples-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: var(--space-sm) 0;
}
@media (max-width: 480px) { .deity-temples-grid { grid-template-columns: 1fr; } }
.temple-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
}
.temple-chip-icon { font-size: 1.2rem; }
.temple-chip-body { flex: 1; }
.temple-chip-name { font-size: var(--fs-sm); font-weight: 600; display: block; color: var(--text-primary); }
.temple-chip-loc { font-size: var(--fs-xs); color: var(--text-muted); }

.deity-section {
    margin-bottom: var(--space-lg);
}
.deity-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}
.deity-section .section-header h3 { font-size: var(--fs-base); font-weight: 700; }
.see-all { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); text-decoration: none; }
.see-all:hover { text-decoration: underline; }

/* Scripture Hero Cards Grid */
.scripture-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: var(--space-xl);
}
.scripture-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform var(--duration), box-shadow var(--duration);
}
.scripture-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sc-img { width: 56px; height: 56px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; background: var(--bg-secondary); }
.sc-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-img-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--accent-glow); }
.sc-body { flex: 1; min-width: 0; }
.sc-title { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 2px; }
.sc-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.sc-meta { font-size: 11px; color: var(--accent); font-weight: 600; margin-top: 4px; }

/* Mode chooser */
.pj-mode-chooser { margin:var(--space-md) 0 var(--space-lg); }
.pj-mode-q { text-align:center; font-size:var(--fs-base); font-weight:600; color:var(--text-primary); margin-bottom:var(--space-md); }
.pj-mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .pj-mode-cards { grid-template-columns:1fr; } }
.pj-mode-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:var(--space-lg) var(--space-md); background:var(--bg-card); border:1.5px solid var(--border-card); border-radius:var(--radius-lg); cursor:pointer; transition:transform .15s, border-color .2s, box-shadow .2s; }
.pj-mode-card:hover { transform:translateY(-3px); border-color:var(--accent-light); box-shadow:var(--shadow-lg); }
.pj-mode-icon { font-size:2.2rem; }
.pj-mode-name { font-weight:700; font-size:var(--fs-base); color:var(--text-primary); }
.pj-mode-desc { font-size:0.78rem; color:var(--text-muted); line-height:1.5; }

/* Guided video stage */
.pj-video-intro { text-align:center; padding:var(--space-lg); background:linear-gradient(135deg,#fdf5e6,#fffbf0); border-radius:var(--radius-lg); margin-bottom:var(--space-md); }
.pj-video-om { font-size:2.4rem; display:block; margin-bottom:8px; }
.pj-video-intro h3 { font-family:var(--font-heading); font-size:var(--fs-lg); color:var(--accent); margin-bottom:6px; }
.pj-video-intro p { font-size:0.9rem; line-height:1.8; color:var(--text-secondary); }
.pj-video-frame { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-md); }

/* Puja DIY — GUIDED JOURNEY (premium devotional experience) */

/* Progress rail */
.pj-rail { display:flex; align-items:center; justify-content:center; gap:4px; margin:var(--space-md) 0 var(--space-lg); }
.pj-rail-step { display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0.4; transition:opacity .3s; }
.pj-rail-step.active, .pj-rail-step.done { opacity:1; }
.pj-rail-dot { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:var(--bg-secondary); border:2px solid var(--border); transition:all .3s; }
.pj-rail-step.active .pj-rail-dot { background:var(--accent-glow); border-color:var(--accent); transform:scale(1.1); box-shadow:0 0 0 4px var(--accent-glow); }
.pj-rail-step.done .pj-rail-dot { background:var(--accent); border-color:var(--accent); }
.pj-rail-label { font-size:0.66rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; }
.pj-rail-step.active .pj-rail-label { color:var(--accent); }
.pj-rail-line { flex:0 0 18px; height:2px; background:var(--border); margin-bottom:16px; }

/* Stages */
.pj-stage { display:none; animation:pjFade .45s ease; }
.pj-stage.active { display:block; }
@keyframes pjFade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.pj-section-title { font-family:var(--font-heading); font-size:var(--fs-lg); margin-bottom:8px; color:var(--text-primary); }

/* Hero */
.pj-hero { border-radius:var(--radius-lg); padding:var(--space-xl) var(--space-lg); text-align:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-light)); margin-bottom:var(--space-lg); background-size:cover; background-position:center; }
.pj-hero-om { font-size:2.6rem; display:block; animation:pjGlow 3s ease-in-out infinite; }
@keyframes pjGlow { 0%,100%{ text-shadow:0 0 12px rgba(255,220,150,.5);} 50%{ text-shadow:0 0 28px rgba(255,220,150,.95);} }
.pj-hero-title { font-family:var(--font-heading); font-size:var(--fs-xl); margin:8px 0; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.pj-hero-deity { font-size:var(--fs-sm); font-weight:600; opacity:.95; }

/* Bhaav card */
.pj-bhaav-card, .pj-sankalp-card, .pj-list-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-lg); padding:var(--space-lg); margin-bottom:var(--space-md); }
.pj-bhaav-intro { line-height:1.85; color:var(--text-secondary); font-size:var(--fs-base); }

/* Breathe */
.pj-breathe { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:var(--space-md); }
.pj-breathe-circle { width:96px; height:96px; border-radius:50%; background:radial-gradient(circle,var(--accent-glow),transparent); border:2px solid var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color:var(--accent); transition:transform 4s ease, box-shadow 4s ease; }
.pj-breathe-circle.bc-in { transform:scale(1.5); box-shadow:0 0 40px var(--accent-glow); }
.pj-breathe-circle.bc-hold { transform:scale(1.5); }
.pj-breathe-circle.bc-out { transform:scale(1); }
.pj-breathe-btn { background:var(--accent-glow); color:var(--accent); border:1px solid var(--accent-light); border-radius:50px; padding:9px 18px; font-weight:700; font-size:0.82rem; cursor:pointer; }

/* Facts */
.pj-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:var(--space-md); }
@media (max-width:420px){ .pj-facts { grid-template-columns:1fr; } }
.pj-fact { display:flex; gap:10px; align-items:flex-start; padding:12px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius); }
.pj-fact span { font-size:1.2rem; flex-shrink:0; }
.pj-fact b { font-size:0.7rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); display:block; }
.pj-fact p { font-size:0.84rem; color:var(--text-primary); margin-top:2px; line-height:1.4; }

/* Sankalp */
.pj-sankalp-help { font-size:0.85rem; color:var(--text-secondary); line-height:1.7; margin-bottom:12px; }
.pj-sankalp-inputs { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.pj-sankalp-inputs input { padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius); font-size:0.9rem; font-family:inherit; background:var(--bg-secondary); }
.pj-sankalp-inputs input:focus { outline:none; border-color:var(--accent); background:#fff; }
.pj-sankalp-text { background:linear-gradient(135deg,#fdf5e6,#fffbf0); border:1px dashed var(--accent-light); border-radius:var(--radius); padding:14px 16px; font-size:0.95rem; line-height:1.8; color:var(--text-primary); font-style:italic; }

/* CTA */
.pj-cta { width:100%; background:linear-gradient(135deg,var(--accent),var(--accent-light)); color:#fff; border:none; border-radius:50px; padding:15px 24px; font-weight:700; font-size:0.95rem; cursor:pointer; margin-top:var(--space-md); box-shadow:0 6px 20px var(--accent-glow); transition:transform .15s; }
.pj-cta:active { transform:scale(0.98); }
.pj-nav-btns { display:flex; gap:10px; align-items:center; margin-top:var(--space-md); }
.pj-nav-btns .pj-cta { margin-top:0; flex:1; }
.pj-nav-back { background:var(--bg-secondary); color:var(--text-secondary); border:1px solid var(--border); border-radius:50px; padding:15px 20px; font-weight:600; font-size:0.85rem; cursor:pointer; flex-shrink:0; }

/* Samagri */
.pj-samagri-list { display:flex; flex-direction:column; gap:8px; margin:var(--space-md) 0; }
.pj-samagri-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius); cursor:pointer; transition:background .2s; }
.pj-samagri-item:active { background:var(--bg-card-hover); }
.pj-samagri-item input { display:none; }
.pj-check-box { width:22px; height:22px; border-radius:6px; border:2px solid var(--border-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.pj-check:checked + .pj-check-box { background:var(--accent); border-color:var(--accent); }
.pj-check:checked + .pj-check-box::after { content:'✓'; color:#fff; font-size:0.85rem; font-weight:700; }
.pj-check-text { font-size:0.9rem; color:var(--text-primary); line-height:1.4; }
.pj-check:checked ~ .pj-check-text { color:var(--text-muted); text-decoration:line-through; }
.pj-samagri-count { text-align:center; font-size:0.82rem; font-weight:700; color:var(--accent); margin-top:8px; }

/* Steps */
.pj-step-progress { display:flex; align-items:center; gap:12px; margin-bottom:var(--space-md); }
.pj-step-bar { flex:1; height:8px; background:var(--bg-secondary); border-radius:50px; overflow:hidden; }
.pj-step-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-light)); border-radius:50px; transition:width .4s ease; width:0; }
.pj-step-count { font-size:0.75rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.pj-step-toolbar { display:flex; justify-content:flex-end; margin-bottom:10px; }
.pj-tool-btn { background:var(--bg-secondary); border:1px solid var(--border); border-radius:50px; padding:7px 14px; font-size:0.78rem; font-weight:600; color:var(--text-secondary); cursor:pointer; }

.pj-step-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-lg); padding:var(--space-lg); position:relative; }
.pj-step-card.pj-anim-in { animation:pjStepIn .4s ease; }
@keyframes pjStepIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
.pj-step-num { position:absolute; top:-14px; left:var(--space-lg); width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; box-shadow:0 3px 10px var(--accent-glow); }
.pj-step-instr { font-size:1.05rem; line-height:1.9; color:var(--text-primary); margin-top:10px; }

/* Mantra card */
.pj-mantra-card { background:linear-gradient(135deg,#fdf5e6,#fffbf0); border:1.5px solid var(--accent-light); border-radius:var(--radius); padding:var(--space-md) var(--space-lg); margin-top:var(--space-md); }
.pj-mantra-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); margin-bottom:8px; }
.pj-mantra-sanskrit { font-size:1.18rem; line-height:1.85; color:var(--text-primary); font-weight:600; }
.pj-mantra-chant { font-size:0.72rem; color:var(--accent); font-weight:700; margin-top:6px; }
.pj-mantra-meaning { display:none; margin-top:10px; padding-top:10px; border-top:1px dashed var(--accent-light); font-size:0.9rem; line-height:1.75; color:var(--text-secondary); }
.pj-mantra-meaning.show { display:block; }
.pj-mantra-src { font-size:0.75rem; color:var(--text-muted); }

/* Completion */
.pj-complete-hero { text-align:center; padding:var(--space-xl) var(--space-lg); background:linear-gradient(135deg,#fdf5e6,#fffbf0); border-radius:var(--radius-lg); margin-bottom:var(--space-lg); }
.pj-complete-burst { font-size:3.4rem; animation:pjBurst .8s ease; }
@keyframes pjBurst { 0%{ transform:scale(0) rotate(-30deg); opacity:0;} 60%{ transform:scale(1.3) rotate(8deg);} 100%{ transform:scale(1) rotate(0); opacity:1;} }
.pj-complete-hero h2 { font-family:var(--font-heading); font-size:var(--fs-xl); color:var(--accent); margin:10px 0 4px; }
.pj-complete-hero p { color:var(--text-secondary); font-size:var(--fs-base); }
.pj-complete-prayer { text-align:center; }
.pj-complete-prayer .pj-mantra-sanskrit { font-size:1.05rem; }

.pj-benefit-list { list-style:none; padding:0; margin:8px 0 0; }
.pj-benefit-list li { position:relative; padding:7px 0 7px 26px; font-size:0.9rem; line-height:1.6; color:var(--text-secondary); border-bottom:1px solid var(--border); }
.pj-benefit-list li::before { content:'🌟'; position:absolute; left:0; top:7px; font-size:0.8rem; }

.pj-dodont { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:var(--space-md); }
@media (max-width:480px){ .pj-dodont { grid-template-columns:1fr; } }
.pj-do, .pj-dont { padding:14px; border-radius:var(--radius); border:1px solid var(--border-card); }
.pj-do { background:rgba(22,163,74,0.05); }
.pj-dont { background:rgba(220,38,38,0.04); }
.pj-do h4 { color:#16a34a; font-size:0.82rem; margin-bottom:8px; }
.pj-dont h4 { color:#dc2626; font-size:0.82rem; margin-bottom:8px; }
.pj-do ul, .pj-dont ul { list-style:none; padding:0; margin:0; }
.pj-do li, .pj-dont li { font-size:0.8rem; line-height:1.55; color:var(--text-secondary); padding:4px 0; }

.pj-humble-note { background:var(--bg-secondary); border-left:3px solid var(--accent); border-radius:10px; padding:14px; font-size:0.82rem; line-height:1.7; color:var(--text-secondary); margin-bottom:var(--space-md); }
.pj-crosslinks { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--space-md); }
.pj-crosslink { flex:1; min-width:140px; text-align:center; background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius); padding:14px; font-weight:600; font-size:0.85rem; color:var(--text-primary); text-decoration:none; }
.pj-crosslink:hover { background:var(--bg-card-hover); border-color:var(--accent-light); }

/* Puja Vidhi listing — guided journey cards */
.pv-intro-banner { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#fdf5e6,#fffbf0); border:1px solid var(--accent-light); border-radius:var(--radius-lg); padding:var(--space-md) var(--space-lg); margin-bottom:var(--space-lg); }
.pv-intro-om { font-size:2.2rem; flex-shrink:0; }
.pv-intro-banner h2 { font-family:var(--font-heading); font-size:var(--fs-lg); color:var(--accent); margin-bottom:2px; }
.pv-intro-banner p { font-size:0.84rem; color:var(--text-secondary); line-height:1.55; }

.pv-journey-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.pv-journey-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:var(--text-primary); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; }
.pv-journey-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.pv-jc-media { position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,var(--bg-secondary),#fef3e0); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pv-jc-media img { width:100%; height:100%; object-fit:cover; }
.pv-jc-icon { font-size:2.4rem; }
.pv-jc-media .lock-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.5); border-radius:50%; padding:4px 7px; }
.pv-jc-body { padding:12px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pv-jc-title { font-weight:700; font-size:0.92rem; line-height:1.35; }
.pv-jc-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:0.72rem; color:var(--text-muted); font-weight:600; }
.pv-jc-cta { margin-top:auto; font-size:0.78rem; font-weight:700; color:var(--accent); }

/* Category sections */
.pv-cat-section { margin-bottom:var(--space-xl); }
.pv-cat-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:var(--space-md); padding-bottom:8px; border-bottom:2px solid var(--border); }
.pv-cat-header h2 { font-family:var(--font-heading); font-size:var(--fs-lg); color:var(--text-primary); }
.chip-free { font-size:0.62rem; background:var(--success,#2e7d32); color:#fff; padding:1px 6px; border-radius:50px; margin-left:4px; vertical-align:middle; }

/* Mode pills on cards */
.pv-jc-modes { position:absolute; bottom:6px; left:6px; display:flex; gap:4px; flex-wrap:wrap; }
.pv-mode-pill { font-size:0.62rem; font-weight:700; background:rgba(0,0,0,.55); color:#fff; padding:2px 7px; border-radius:50px; backdrop-filter:blur(4px); }

/* Smaller card grid + video thumbnail treatment (vrat katha listing) */
.pv-grid-sm { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
@media (min-width:768px){ .pv-grid-sm { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); } }
.pv-grid-sm .pv-jc-media { aspect-ratio:16/9; }
.pv-grid-sm .pv-jc-body { padding:10px 12px; gap:5px; }
.pv-grid-sm .pv-jc-title { font-size:0.85rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pv-grid-sm .pv-jc-meta { font-size:0.68rem; }
.pv-jc-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.95rem; padding-left:3px; backdrop-filter:blur(3px); border:1.5px solid rgba(255,255,255,.7); transition:transform .15s, background .2s; }
.pv-journey-card:hover .pv-jc-play { transform:translate(-50%,-50%) scale(1.12); background:var(--accent); }
.lv-more-hidden { display:none !important; }
.lv-viewmore-btn { display:block; width:100%; max-width:280px; margin:var(--space-lg) auto 0; background:var(--bg-card); border:1.5px solid var(--accent-light); color:var(--accent); border-radius:50px; padding:13px 24px; font-weight:700; font-size:0.88rem; cursor:pointer; transition:background .2s; }
.lv-viewmore-btn:hover { background:var(--accent-glow); }

/* ============================================================
   VRAT KATHA — GUIDED JOURNEY (extends pj- styles)
   ============================================================ */
.vk-hero { min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.vk-rail .pj-rail-dot { font-size:1rem; }

.vk-vidhi-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-lg); padding:var(--space-lg); margin-bottom:var(--space-md); }
.vk-text { line-height:2; color:var(--text-primary); font-size:var(--fs-base); }

/* Katha block */
.vk-katha-block { margin-top:var(--space-md); }
.vk-tabs { display:flex; gap:6px; margin-bottom:12px; }
.vk-katha-card, .vk-aarti-card { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-lg); padding:var(--space-lg); }
.vk-katha-pane { line-height:2.05; color:var(--text-primary); font-size:1.04rem; white-space:normal; animation:pjFade .35s ease; }
.vk-katha-pane:not(.active) { display:none; }

/* Aarti card on ending */
.vk-aarti-card { margin-bottom:var(--space-md); background:linear-gradient(135deg,#fdf5e6,#fffbf0); border:1.5px solid var(--accent-light); }
.vk-aarti-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.vk-aarti-icon { font-size:1.6rem; animation:pjGlow 3s ease-in-out infinite; }
.vk-aarti-head h3 { font-family:var(--font-heading); font-size:var(--fs-lg); color:var(--accent); }
.vk-aarti-pane { line-height:2; color:var(--text-primary); font-size:1.05rem; }
.vk-aarti-pane:not(.active) { display:none; }

.vk-complete-hero .pj-complete-burst { animation:pjBurst .9s ease; }

/* ============================================================
   VRAT KATHA — DISCOVERY LANDING (premium 9.5 design)
   ============================================================ */
.vk-hero-banner { text-align:center; padding:var(--space-xl) var(--space-lg); background:linear-gradient(135deg,#7b1fa2 0%,#e65100 60%,#ff8f00 100%); border-radius:var(--radius-lg); color:#fff; margin-bottom:var(--space-lg); box-shadow:0 10px 30px rgba(123,31,162,0.18); }
.vk-hero-om { font-size:2.6rem; display:block; animation:pjGlow 3s ease-in-out infinite; }
.vk-hero-banner h2 { font-family:var(--font-heading); font-size:var(--fs-xl); margin:8px 0 6px; text-shadow:0 2px 8px rgba(0,0,0,.25); }
.vk-hero-banner p { font-size:0.86rem; opacity:.95; line-height:1.6; max-width:520px; margin:0 auto; }

/* Guided finder */
.vk-finder { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-lg); padding:var(--space-lg); margin-bottom:var(--space-xl); box-shadow:var(--shadow-glow); }
.vk-finder-head { display:flex; align-items:center; gap:12px; margin-bottom:var(--space-md); }
.vk-finder-head > span { font-size:2rem; flex-shrink:0; }
.vk-finder-head h3 { font-family:var(--font-heading); font-size:var(--fs-lg); color:var(--text-primary); }
.vk-finder-head p { font-size:0.8rem; color:var(--text-muted); line-height:1.5; }
.vk-intent-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
.vk-intent { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:var(--text-primary); transition:transform .15s, border-color .2s, background .2s; text-align:center; }
.vk-intent:hover { transform:translateY(-3px); border-color:var(--accent); background:var(--accent-glow); }
.vk-intent-icon { font-size:1.7rem; }
.vk-intent-label { font-size:0.74rem; font-weight:600; line-height:1.3; }

/* Section heads */
.vk-section-head { margin:var(--space-lg) 0 var(--space-md); }
.vk-section-head h3 { font-family:var(--font-heading); font-size:var(--fs-lg); color:var(--text-primary); position:relative; padding-left:14px; }
.vk-section-head h3::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:22px; background:linear-gradient(var(--accent),var(--accent-light)); border-radius:3px; }

/* Category cards */
.vk-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin-bottom:var(--space-md); }
.vk-cat-card { display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 8px; background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius); text-decoration:none; color:var(--text-primary); transition:transform .15s, box-shadow .2s; position:relative; }
.vk-cat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.vk-cat-icon { font-size:1.9rem; }
.vk-cat-name { font-size:0.74rem; font-weight:700; text-align:center; line-height:1.3; }
.vk-cat-count { font-size:0.66rem; font-weight:700; color:#fff; background:var(--accent); border-radius:50px; padding:1px 8px; }
.vk-cat-free { position:absolute; top:6px; right:6px; font-size:0.56rem; font-weight:700; background:var(--success,#2e7d32); color:#fff; padding:1px 6px; border-radius:50px; }
.pj-hero-banner { background:linear-gradient(135deg,#c2410c 0%,#e65100 55%,#ff8f00 100%) !important; box-shadow:0 10px 30px rgba(194,65,12,0.18) !important; }

/* Vrat cards — premium streaming-style */
.vk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
@media (min-width:768px){ .vk-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }
.vk-card { display:block; text-decoration:none; color:var(--text-primary); border-radius:var(--radius); overflow:hidden; transition:transform .18s; }
.vk-card:hover { transform:translateY(-4px); }
.vk-card-media { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--bg-secondary),#fef3e0); overflow:hidden; border-radius:var(--radius); }
.vk-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.vk-card:hover .vk-card-media img { transform:scale(1.06); }
.vk-card-icon { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:2.4rem; }
.vk-card-grad { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%); }
.vk-card-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.95rem; padding-left:3px; border:1.5px solid rgba(255,255,255,.75); backdrop-filter:blur(3px); transition:transform .15s, background .2s; }
.vk-card:hover .vk-card-play { transform:translate(-50%,-50%) scale(1.12); background:var(--accent); }
.vk-card-tags { position:absolute; top:7px; left:7px; display:flex; flex-wrap:wrap; gap:4px; }
.vk-tag { font-size:0.6rem; font-weight:700; background:rgba(0,0,0,.55); color:#fff; padding:2px 7px; border-radius:50px; backdrop-filter:blur(4px); }
.vk-card-media .lock-badge { position:absolute; top:7px; right:7px; background:rgba(0,0,0,.5); border-radius:50%; padding:3px 6px; }
.vk-card-title { font-size:0.84rem; font-weight:600; line-height:1.35; margin-top:8px; padding:0 2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Results header */
.vk-back-chip { display:inline-block; font-size:0.78rem; font-weight:600; color:var(--accent); text-decoration:none; margin:4px 0 10px; }
.vk-results-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:var(--space-sm); flex-wrap:wrap; }
.vk-results-head h2 { font-family:var(--font-heading); font-size:var(--fs-lg); color:var(--text-primary); }
.vk-results-head span { font-size:0.78rem; color:var(--text-muted); font-weight:600; }

/* ============================================================
   PUJA — PREMIUM DEVOTIONAL EXPERIENCE (steps + victory)
   ============================================================ */
.pj-hero-puja { min-height:190px; }
.pj-hero-badges { display:flex; gap:8px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
.pj-hbadge { font-size:0.72rem; font-weight:700; background:rgba(255,255,255,.22); color:#fff; padding:4px 12px; border-radius:50px; backdrop-filter:blur(4px); }

/* Ritual (DIY step) ambiance */
.pj-ritual { background:radial-gradient(120% 80% at 50% 0%, #fff6e8 0%, var(--bg-primary) 70%); border-radius:var(--radius-lg); padding:var(--space-md) 4px 4px; }
.pj-ritual-progress { padding:0 4px; }
.pj-ritual-bar { height:10px; background:var(--bg-secondary); border-radius:50px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.08); }
.pj-ritual-fill { height:100%; width:0; border-radius:50px; background:linear-gradient(90deg,#e65100,#ff8f00,#ffd27a); box-shadow:0 0 12px rgba(255,143,0,.5); transition:width .5s cubic-bezier(.4,0,.2,1); }
.pj-ritual-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:10px; }
.pj-ritual-count { font-size:0.74rem; font-weight:800; color:var(--accent); letter-spacing:.3px; }
.pj-ritual-msg { font-size:0.74rem; font-weight:600; color:var(--text-muted); }

/* Premium step card */
.pj-step-card2 { background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-lg); padding:var(--space-xl) var(--space-lg) var(--space-lg); margin-top:18px; text-align:center; box-shadow:0 6px 24px rgba(180,120,40,.08); position:relative; }
.pj-step-medallion { width:62px; height:62px; margin:-46px auto 14px; border-radius:50%; background:radial-gradient(circle,#fff,#fdf0d8); border:3px solid var(--accent-light); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(230,81,0,.22); position:relative; }
.pj-step-medallion::before { content:''; position:absolute; inset:-7px; border-radius:50%; border:1.5px dashed var(--accent-light); opacity:.5; animation:pjSpin 18s linear infinite; }
@keyframes pjSpin { to { transform:rotate(360deg); } }
.pj-step-medallion span { font-size:1.5rem; font-weight:800; color:var(--accent); }
.pj-step-instr2 { font-size:1.12rem; line-height:1.95; color:var(--text-primary); }
.pj-step-card2 .pj-mantra-card { text-align:left; margin-top:18px; }
.pj-step-done { box-shadow:0 6px 20px rgba(46,125,50,.18); }

/* Victory / completion */
.pj-victory { position:relative; text-align:center; padding:var(--space-xl) var(--space-lg) var(--space-lg); margin-bottom:var(--space-lg); border-radius:var(--radius-lg); background:radial-gradient(110% 90% at 50% 0%, #fff3d6 0%, #fffaf2 60%); overflow:hidden; }
.pj-victory-rays { position:absolute; top:-40%; left:50%; width:340px; height:340px; transform:translateX(-50%); background:conic-gradient(from 0deg, rgba(255,180,80,.18) 0 12deg, transparent 12deg 30deg); border-radius:50%; animation:pjSpin 40s linear infinite; }
.pj-victory-medallion { position:relative; width:96px; height:96px; margin:0 auto 4px; border-radius:50%; overflow:hidden; border:4px solid #fff; box-shadow:0 8px 26px rgba(230,81,0,.28); }
.pj-victory-medallion img { width:100%; height:100%; object-fit:cover; }
.pj-victory-medallion span { font-size:2.6rem; line-height:96px; }
.pj-victory-burst { position:relative; font-size:2rem; margin-top:-6px; animation:pjBurst .9s ease; }
.pj-victory-title { position:relative; font-family:var(--font-heading); font-size:1.7rem; color:var(--accent); margin:6px 0 4px; }
.pj-victory-sub { position:relative; font-size:0.92rem; color:var(--text-secondary); line-height:1.6; max-width:440px; margin:0 auto 12px; }
.pj-victory-seal { position:relative; display:inline-block; font-size:0.78rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#e65100,#ff8f00); padding:8px 18px; border-radius:50px; box-shadow:0 6px 16px rgba(230,81,0,.3); letter-spacing:.3px; }

/* Experience chooser (start screen) */
.pj-chooser { animation:pjFade .4s ease; }
.pj-chooser-hero { border-radius:var(--radius-lg); padding:var(--space-lg); text-align:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-light)); background-size:cover; background-position:center; margin-bottom:var(--space-md); }
.pj-chooser-hero .pj-hero-om { font-size:2.2rem; display:block; }
.pj-chooser-hero h2 { font-family:var(--font-heading); font-size:var(--fs-lg); margin-top:6px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.pj-chooser-q { text-align:center; font-size:var(--fs-base); font-weight:700; color:var(--text-primary); margin-bottom:var(--space-md); }
.pj-chooser-cards { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .pj-chooser-cards { grid-template-columns:1fr 1fr; } }
.pj-chooser-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:var(--space-lg); background:var(--bg-card); border:1.5px solid var(--border-card); border-radius:var(--radius-lg); cursor:pointer; transition:transform .15s, border-color .2s, box-shadow .2s; }
.pj-chooser-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.pj-cc-icon { font-size:2.6rem; }
.pj-cc-name { font-weight:800; font-size:1rem; color:var(--text-primary); }
.pj-cc-desc { font-size:0.8rem; color:var(--text-muted); line-height:1.55; }
.pj-cc-go { margin-top:4px; font-size:0.8rem; font-weight:700; color:var(--accent); }