/* ============================================================
   ASTRO LOGICS - shared styles for inner pages
   (marketplace, profile, chat, call, wallet, tools, horoscope,
    devotional, shop, blog, contact)
   ============================================================ */

/* ——— shared page header band ——— */
.ph { background:var(--grad-dawn); padding:clamp(28px,4vw,52px) 0 clamp(22px,3vw,36px); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.ph::after { content:"۞"; position:absolute; right:2%; top:-30%; font-size:16rem; color:rgba(201,162,39,.07); font-family:var(--font-deva); pointer-events:none; }
.ph h1 { font-size:clamp(2rem,4vw,3.2rem); }
.ph .lead { max-width:60ch; margin-top:.5rem; }
.ph .breadcrumb { margin-bottom:.8rem; }

.tabs { display:flex; gap:.4rem; flex-wrap:wrap; }
.tabs button, .tabs a { padding:.6rem 1.1rem; border-radius:var(--r-pill); font-weight:800; font-size:.9rem; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-2); transition:.2s; }
.tabs button.active, .tabs a.active { background:var(--grad-saffron); color:#fff; box-shadow:none; }
.tabs button:hover, .tabs a:hover { color:var(--saffron-deep); }
.tabs button.active:hover { color:#fff; }

.panel { display:none; }
.panel.active { display:block; animation:fade .4s var(--ease-out); }
@keyframes fade { from{opacity:0; transform:translateY(10px);} to{opacity:1;} }

/* ============ MARKETPLACE ============ */
.mkt { display:grid; gap:1.6rem; grid-template-columns:1fr; align-items:start; }
@media(min-width:960px){ .mkt{ grid-template-columns:262px 1fr; } }
.filters { position:sticky; top:calc(var(--nav-h) + 14px); background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:1.2rem; box-shadow:var(--sh-sm); }
.filters h4 { font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:1.1rem 0 .6rem; }
.filters h4:first-child { margin-top:0; }
.fchips { display:flex; flex-wrap:wrap; gap:.45rem; }
.fchip { font-size:.82rem; font-weight:700; padding:.4em .8em; border-radius:var(--r-pill); background:var(--bg-2); color:var(--ink-2); cursor:pointer; transition:.2s; border:1.5px solid transparent; }
.fchip:hover { border-color:var(--gold-soft); }
.fchip.on { background:#FFF1DC; color:var(--saffron-deep); border-color:var(--saffron); }
.mkt-bar { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:1.2rem; }
.search-box { display:flex; align-items:center; gap:.5rem; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:.55rem 1rem; flex:1; min-width:220px; }
.search-box input { border:none; background:none; outline:none; width:100%; }
.sortsel { padding:.6rem 1rem; border-radius:var(--r-pill); border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:.88rem; }
.filter-toggle { display:none; }
@media(max-width:959px){ .filters{ display:none; } .filters.open{ display:block; position:static; } .filter-toggle{ display:inline-flex; } }
.mkt-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }

/* ============ PROFILE ============ */
.pf-hero { display:grid; gap:1.6rem; grid-template-columns:1fr; align-items:center; }
@media(min-width:780px){ .pf-hero{ grid-template-columns:auto 1fr auto; } }
.pf-ava { position:relative; }
.pf-ava .ava-fallback { width:128px; height:128px; font-size:3rem; box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--gold-soft); }
.pf-ava .ac-status { position:absolute; bottom:8px; right:8px; width:22px; height:22px; border:3px solid #fff; border-radius:50%; background:var(--tulsi); }
.pf-name { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pf-badges { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }
.pf-meta { display:flex; gap:.4rem 1.4rem; flex-wrap:wrap; color:var(--ink-2); font-weight:600; font-size:.92rem; }
.pf-meta b { color:var(--ink); font-family:var(--font-display); }
.pf-cta { display:flex; flex-direction:column; gap:.6rem; min-width:200px; }
.pf-rate-big { font-family:var(--font-display); font-weight:600; font-size:1.6rem; color:var(--maroon); text-align:center; }
.pf-rate-big s { color:var(--ink-3); font-size:1rem; font-family:var(--font-body); font-weight:400; }
.pf-body { display:grid; gap:1.6rem; grid-template-columns:1fr; margin-top:2rem; align-items:start; }
@media(min-width:880px){ .pf-body{ grid-template-columns:1fr 320px; } }
.pf-section { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:1.5rem; box-shadow:var(--sh-sm); margin-bottom:1.2rem; }
.pf-section h3 { margin-bottom:.8rem; }
.spec-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.pf-aside { position:sticky; top:calc(var(--nav-h) + 14px); }
.rv { padding:1.1rem 0; border-bottom:1px dashed var(--line); }
.rv:last-child { border-bottom:none; }
.rv-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.4rem; }
.rv-head .ava-fallback { width:38px; height:38px; font-size:.95rem; }

/* ============ CHAT ============ */
body.app .foot { display:none; }
.chat-shell { max-width:840px; margin:1.2rem auto; padding:0 var(--gutter); }
.chat-win { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden; display:flex; flex-direction:column; height:calc(100vh - var(--nav-h) - 90px); min-height:520px; }
.chat-head { display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--line); background:var(--card-tint); }
.chat-head .ava-fallback { width:46px; height:46px; font-size:1.1rem; }
.chat-head .ch-info { flex:1; min-width:0; }
.chat-head .ch-info b { display:block; }
.chat-head .ch-info small { color:var(--tulsi-deep); font-weight:700; }
.chat-timer { font-family:var(--font-display); font-weight:600; color:var(--maroon); background:#FFF1DC; padding:.3rem .7rem; border-radius:var(--r-pill); font-size:.92rem; }
.chat-end { background:#FDE7E4; color:var(--bear,#C0392B); font-weight:800; padding:.5rem .9rem; border-radius:var(--r-pill); font-size:.85rem; }
.chat-bill { text-align:center; font-size:.78rem; color:var(--ink-3); background:var(--bg-2); padding:.5rem; }
.chat-thread { flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.7rem; background:linear-gradient(180deg,#FFFDF8,#FFF8EE); }
.msg { max-width:74%; padding:.7rem .95rem; border-radius:16px; font-size:.94rem; line-height:1.45; box-shadow:var(--sh-xs); }
.msg.them { background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; }
.msg.me { margin-left:auto; background:var(--grad-saffron); color:#fff; border-bottom-right-radius:5px; }
.msg .mtime { display:block; font-size:.66rem; opacity:.6; margin-top:.25rem; }
.chat-day { text-align:center; font-size:.74rem; color:var(--ink-3); margin:.4rem 0; }
.chat-input { display:flex; gap:.6rem; padding:.8rem; border-top:1px solid var(--line); background:#fff; align-items:center; }
.chat-input .ci-extra { font-size:1.3rem; color:var(--ink-3); }
.chat-input input { flex:1; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:.7rem 1.1rem; outline:none; }
.chat-input input:focus { border-color:var(--saffron); }
.chat-send { width:46px; height:46px; border-radius:50%; background:var(--grad-saffron); color:#fff; display:grid; place-items:center; font-size:1.1rem; box-shadow:var(--sh-sm); }

/* ============ CALL / VIDEO ============ */
.call-stage { max-width:560px; margin:2rem auto; text-align:center; padding:0 var(--gutter); }
.call-switch { display:inline-flex; gap:.3rem; background:var(--bg-2); padding:.3rem; border-radius:var(--r-pill); margin-bottom:1.6rem; }
.call-switch button { padding:.5rem 1.2rem; border-radius:var(--r-pill); font-weight:800; font-size:.9rem; color:var(--ink-3); }
.call-switch button.active { background:#fff; color:var(--saffron-deep); box-shadow:var(--sh-xs); }
.call-card { background:var(--ink-panel); color:#FFF1E0; border-radius:var(--r-xl); padding:2.6rem 2rem; box-shadow:var(--sh-lg); position:relative; overflow:hidden; }
.call-card::before { content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 0%, rgba(255,122,26,.3), transparent 70%); }
.call-ava { position:relative; z-index:1; width:120px; height:120px; margin:0 auto 1.2rem; border-radius:50%; }
.call-ava .ava-fallback { width:120px; height:120px; font-size:2.8rem; box-shadow:0 0 0 4px rgba(255,255,255,.12); }
.call-ava::after { content:""; position:absolute; inset:-14px; border-radius:50%; border:2px solid rgba(232,184,75,.5); animation:ring 1.8s var(--ease-out) infinite; }
@keyframes ring { 0%{ transform:scale(.85); opacity:1;} 100%{ transform:scale(1.25); opacity:0;} }
.call-card h2 { color:#fff; position:relative; z-index:1; }
.call-status { color:var(--gold-soft); font-weight:700; position:relative; z-index:1; margin:.4rem 0 .2rem; }
.call-hint { color:#E2CDB4; font-size:.9rem; position:relative; z-index:1; }
.call-controls { display:flex; justify-content:center; gap:1rem; margin-top:1.8rem; position:relative; z-index:1; }
.cc-btn { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:1.4rem; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(232,184,75,.3); }
.cc-btn.end { background:#E0453B; box-shadow:none; }
/* video */
.video-stage { max-width:980px; margin:1.4rem auto; padding:0 var(--gutter); }
.video-grid { position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(160deg,#3a2114,#150c06); box-shadow:var(--sh-lg); display:grid; place-items:center; }
.video-main { text-align:center; color:#FFF1E0; }
.video-main .ava-fallback { width:120px; height:120px; font-size:2.8rem; margin:0 auto .8rem; }
.video-self { position:absolute; right:16px; bottom:16px; width:150px; aspect-ratio:3/4; border-radius:14px; background:linear-gradient(160deg,#5B4636,#271810); box-shadow:var(--sh-md); display:grid; place-items:center; color:#E2CDB4; font-size:.8rem; border:2px solid rgba(255,255,255,.15); }
.video-bar { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:.7rem; }
.video-name { position:absolute; left:16px; top:16px; background:rgba(0,0,0,.4); color:#fff; padding:.4rem .8rem; border-radius:var(--r-pill); font-size:.84rem; font-weight:700; }

/* ============ WALLET / PLANS ============ */
.wallet-hero { background:var(--grad-ember); color:#FFF1E0; border-radius:var(--r-xl); padding:2rem; box-shadow:var(--sh-md); display:grid; gap:1.2rem; grid-template-columns:1fr; align-items:center; }
@media(min-width:720px){ .wallet-hero{ grid-template-columns:1fr auto; } }
.wallet-bal small { color:#FFD9B0; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.74rem; }
.wallet-bal .amt { font-family:var(--font-display); font-weight:600; font-size:3rem; color:#fff; line-height:1; }
.recharge-card { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:1.5rem; box-shadow:var(--sh-sm); }
.amt-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1rem 0; }
.amt-chip { padding:1rem; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--card-tint); text-align:center; font-weight:800; cursor:pointer; transition:.2s; position:relative; }
.amt-chip:hover { border-color:var(--gold-soft); }
.amt-chip.on { border-color:var(--saffron); background:#FFF1DC; color:var(--saffron-deep); }
.amt-chip .bonus { display:block; font-size:.68rem; color:var(--tulsi-deep); font-weight:800; }
.txn { display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; border-bottom:1px dashed var(--line); }
.txn:last-child { border-bottom:none; }
.txn .ti { display:flex; align-items:center; gap:.7rem; }
.txn .tic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; }
.txn .amt-pos { color:var(--tulsi-deep); font-weight:800; } .txn .amt-neg { color:var(--bear,#C0392B); font-weight:800; }
.bill-toggle { display:inline-flex; gap:.3rem; background:var(--bg-2); padding:.3rem; border-radius:var(--r-pill); }
.bill-toggle button { padding:.5rem 1.1rem; border-radius:var(--r-pill); font-weight:800; font-size:.86rem; color:var(--ink-3); }
.bill-toggle button.active { background:#fff; color:var(--saffron-deep); box-shadow:var(--sh-xs); }
.plan-grid { display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media(min-width:680px){ .plan-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .plan-grid{ grid-template-columns:repeat(4,1fr); } }
.plan { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:1.5rem; box-shadow:var(--sh-sm); position:relative; display:flex; flex-direction:column; }
.plan.pop { border-color:var(--gold-soft); box-shadow:var(--sh-md); background:linear-gradient(180deg,#FFFBF2,#FFF4E0); }
.plan h3 { font-family:var(--font-display); }
.plan .price { font-family:var(--font-display); font-weight:600; font-size:2.1rem; color:var(--maroon); margin:.4rem 0; }
.plan .price small { font-size:.9rem; color:var(--ink-3); font-family:var(--font-body); font-weight:600; }
.plan ul { margin:.8rem 0 1.2rem; flex:1; }
.plan ul li { padding:.35rem 0; font-size:.9rem; color:var(--ink-2); display:flex; gap:.5rem; }
.plan ul li::before { content:"✓"; color:var(--tulsi); font-weight:900; }

/* ============ TOOLS / KUNDLI ============ */
.tool-form { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:1.6rem; box-shadow:var(--sh-sm); }
.tool-form .grid2 { display:grid; gap:.9rem; grid-template-columns:1fr 1fr; }
.tool-result { display:grid; gap:1.4rem; grid-template-columns:1fr; margin-top:1.6rem; }
@media(min-width:860px){ .tool-result{ grid-template-columns:auto 1fr; } }
/* North Indian chart */
.kundli-chart { width:300px; height:300px; }
.kundli-chart text { font-family:var(--font-body); font-weight:800; }
.kundli-wrap { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:1.2rem; box-shadow:var(--sh-sm); }
.planet-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.planet-table th { text-align:left; color:var(--ink-3); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; padding:.5rem; border-bottom:2px solid var(--line); }
.planet-table td { padding:.55rem .5rem; border-bottom:1px solid var(--line-2); }
.planet-table tr:hover td { background:var(--card-tint); }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.detail-grid .di { background:var(--card-tint); border-radius:var(--r-sm); padding:.8rem 1rem; border:1px solid var(--line-2); }
.detail-grid .di small { color:var(--ink-3); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
.detail-grid .di b { display:block; font-size:1.05rem; margin-top:.1rem; }
.guna-score { font-family:var(--font-display); font-weight:600; font-size:3.4rem; color:var(--tulsi-deep); line-height:1; }
.choghadiya-table { width:100%; border-collapse:collapse; }
.choghadiya-table td { padding:.6rem .8rem; border-bottom:1px solid var(--line-2); font-size:.9rem; }
.cg-good { color:var(--tulsi-deep); font-weight:800; } .cg-bad { color:var(--bear,#C0392B); font-weight:800; } .cg-neutral{ color:var(--ink-3); font-weight:800; }

/* ============ HOROSCOPE ============ */
.sign-pills { display:flex; gap:.5rem; flex-wrap:wrap; }
.sign-pill { display:flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:var(--r-pill); background:#fff; border:1.5px solid var(--line); font-weight:700; cursor:pointer; font-size:.88rem; }
.sign-pill.on { background:var(--grad-saffron); color:#fff; border-color:transparent; }
.horo-card { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:1.8rem; box-shadow:var(--sh-sm); }
.horo-aspects { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.9rem; margin-top:1.2rem; }
.horo-asp { background:var(--card-tint); border-radius:var(--r-sm); padding:1rem; border:1px solid var(--line-2); }
.horo-asp .bar { height:6px; border-radius:3px; background:var(--bg-3); margin-top:.5rem; overflow:hidden; }
.horo-asp .bar i { display:block; height:100%; background:var(--grad-saffron); border-radius:3px; }

/* ============ DEVOTIONAL ============ */
.deva-hero { text-align:center; }
.deva-text { background:var(--card); border:1px solid var(--gold-soft); border-radius:var(--r-md); padding:1.8rem; box-shadow:var(--sh-sm); font-family:var(--font-deva); font-size:1.15rem; line-height:2.1; color:var(--ink); text-align:center; }
.deva-text .v { display:block; margin-bottom:.3rem; }
.deva-list { display:grid; gap:.7rem; grid-template-columns:1fr; }
@media(min-width:680px){ .deva-list{ grid-template-columns:repeat(2,1fr);} }
.deva-item { display:flex; align-items:center; gap:.9rem; padding:1rem 1.2rem; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-xs); transition:.2s; }
.deva-item:hover { transform:translateX(4px); border-color:var(--gold-soft); }
.deva-item .dic { font-size:1.6rem; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--grad-dawn); box-shadow:inset 0 0 0 1px var(--gold-soft); flex:none; }
.deva-item b { display:block; } .deva-item small { color:var(--ink-3); }

/* ============ SHOP ============ */
.shop-cats { display:flex; gap:.5rem; flex-wrap:wrap; }
.shop-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.product { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm); transition:.3s var(--ease); display:flex; flex-direction:column; }
.product:hover { transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--gold-soft); }
.product .pimg { aspect-ratio:1; display:grid; place-items:center; font-size:3.4rem; position:relative; box-shadow:inset 0 -30px 50px -28px rgba(0,0,0,.4); }
.product .ptag { position:absolute; top:10px; left:10px; background:var(--grad-gold); color:var(--maroon-deep); font-size:.66rem; font-weight:900; padding:.25em .6em; border-radius:5px; text-transform:uppercase; }
.product .pbody { padding:1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.product h4 { font-family:var(--font-body); font-weight:800; font-size:.96rem; }
.product .prate { font-size:.78rem; color:var(--ink-3); }
.product .pprice { font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--maroon); margin-top:.2rem; }
.product .pprice s { font-size:.82rem; color:var(--ink-3); font-family:var(--font-body); font-weight:400; margin-left:.3rem; }
.product .btn { margin-top:.6rem; }

/* ============ BLOG ============ */
.blog-feature { display:grid; gap:1.4rem; grid-template-columns:1fr; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); }
@media(min-width:780px){ .blog-feature{ grid-template-columns:1.1fr 1fr; } }
.blog-feature .bf-img { min-height:240px; display:grid; place-items:center; font-size:4rem; }
.blog-feature .bf-body { padding:2rem; }
.blog-list { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.cat-pills { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ============ CONTACT ============ */
.contact-grid { display:grid; gap:1.6rem; grid-template-columns:1fr; }
@media(min-width:820px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-info .ci-row { display:flex; gap:.9rem; align-items:flex-start; padding:1rem 0; border-bottom:1px dashed var(--line); }
.contact-info .ci-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; background:var(--grad-dawn); box-shadow:inset 0 0 0 1px var(--gold-soft); flex:none; }
.cform label { display:block; margin-bottom:.8rem; }
.cform label span { display:block; font-size:.78rem; font-weight:800; color:var(--ink-2); margin-bottom:.25rem; }
.cform input, .cform textarea, .tool-form input, .tool-form select { width:100%; padding:.72rem .9rem; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--card-tint); outline:none; transition:.2s; }
.cform input:focus, .cform textarea:focus, .tool-form input:focus, .tool-form select:focus { border-color:var(--saffron); box-shadow:0 0 0 3px rgba(255,122,26,.14); }