/**
 * ACRM Plugin - View Horoscope Frontend Page Styles
 * File Path (live plugin par): /wp-content/plugins/acrm-lms/includes/assets/css/acrm-view-horoscope.css
 * -----------------------------------------------------------------
 * Ye CSS pehle class-acrm-view-horoscope.php ke andar seedhe ek
 * <style> tag mein inline likha hua tha -- ab yahan is alag file
 * mein nikaal diya gaya hai, koi rule/value badla nahi gaya hai,
 * hoo-ba-hoo wahi CSS hai.
 */
.acrm-horo-page-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 100%; width: 100%; box-sizing: border-box; margin: 20px 0; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.04); }
/* NAYA (2nd round fix): pehle yahan ek fixed pixel max-width tha
   (1000px, fir 1050px) -- lekin theme ka menu/header apni jagah
   par kisi bada container (jo humein pata nahi) use kar raha hai,
   isliye fixed pixel value se hamesha thoda-bahut farak reh jaa
   raha tha. Ab max-width: 100% kar diya hai -- iska matlab ye card
   ab THEME KE APNE CONTENT CONTAINER (jispar bhi ye shortcode chal
   raha hai) ki poori chaudai le lega, wahi container jiske andar
   header/menu bhi render hota hai zyadatar themes mein -- isliye
   ab ye dono apne aap barabar rahenge, chahe theme ka container
   1050px ho, 1140px ho ya kuch aur. */
.acrm-horo-header { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #fff; padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; }
/* NOTE: plan-tier ke hisaab se header ka rang (jaise Bronze) PHP se seedhe
   is element par ek inline style="background:...;" attribute ke through
   set hota hai (dekhein class-acrm-view-horoscope.php) -- wahi is upar
   wale default gradient ko us waqt override kar deta hai. Isse ye dynamic
   (plan-tier-wise) rang static CSS file mein rehte hue bhi kaam karta
   rehta hai. */
.acrm-header-left { display: flex; align-items: center; gap: 15px; }
.acrm-astro-avatar-box { width: 50px; height: 50px; border-radius: 50%; background: #e2e8f0; border: 2px solid #ffffff; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #64748b; flex-shrink: 0; }
.acrm-horo-header h2 { margin: 0 0 3px 0; font-size: 18px; font-weight: 700; color: #fff; }
.acrm-horo-header p { margin: 0; font-size: 13px; color: #ffffff; font-weight: 600; }
.acrm-back-btn { background: rgba(255, 255, 255, 0.2); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.4); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; min-width: 145px; text-align: center; display: inline-block; box-sizing: border-box; }
.acrm-header-actions { display: flex; align-items: center; gap: 10px; }
.acrm-pdf-btn { background: #ffffff; color: #1d4ed8; border: 1px solid rgba(255, 255, 255, 0.4); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; min-width: 145px; text-align: center; display: inline-block; box-sizing: border-box; }
/* NAYA: "PDF Print" aur "Back to Dashboard" button -- text alag length
   ka hone ki wajah se pehle inki chaudai (width) alag-alag dikh rahi thi.
   Ab dono par same min-width + text-align:center laga diya hai taaki
   dono buttons hamesha ek jaisi (barabar) size ke dikhein. */
.acrm-horo-body { padding: 25px; }
.acrm-client-info-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; padding: 20px; margin-bottom: 25px; }
.acrm-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; font-size: 14px; }
.acrm-info-item label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 3px; }
.acrm-info-item span { font-weight: 600; color: #0f172a; }
/* NAYA: pehle yahan 4-tab grid (.acrm-all-tabs-grid/.acrm-tab-item) aur
   3-button grid (.acrm-feature-tabs-grid/.acrm-feature-tab-item) do alag
   horizontal button-row the. Ab "sabhi 7 button ek sath" wale naye
   list+viewer layout (.acrm-horo-viewer-menu / .acrm-viewer-menu-item,
   neeche define hai) mein convert ho gaye hain, isliye ye purani
   grid/tab CSS ab kahin istemal nahi hoti, hata di gayi hai. */
.acrm-chart-pane { display: none; }
.acrm-chart-pane.active { display: block; }
/* NAYA: "sabhi 7 button ek sath" wala layout -- Red Astro Professional
   jaisa concept, bas ULTA (options RIGHT side, view LEFT side). Isse
   aage jitne bhi naye options (Pitru Rin, Mahadasha, Baalig-Naabaalig
   Teva, Andhi Kundli, Makan Kundli, waghera) jode jayenge, page lamba
   nahi hoga -- bas is right-side list me ek aur button aa jayega. */
.acrm-horo-viewer-wrap { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 5px; }
.acrm-horo-viewer-content { flex: 1; min-width: 0; }
/* NAYA: buttons ab DONO side hain -- content ke LEFT mein ek column,
   RIGHT mein doosra column (bich mein horoscope/prediction/rin ka
   content). Dono column apni ek max-height ke baad khud scroll ho jaate
   hain -- taaki aage jitne bhi naye buttons jode jaayen, poora PAGE lamba
   hone ki jagah sirf usi column ke andar scroll ho jaaye. */
.acrm-horo-viewer-menu {
    width: 210px; flex-shrink: 0;
    display: flex; flex-direction: column;
    gap: 12px; padding-top: 4px;
    max-height: 520px; overflow-y: auto;
}
/* NAYA: rangeen (yellow/blue/red/green) button hata kar plain/classic
   3D-look button banaya hai, jaisa reference mockup me tha -- sabhi
   option ek jaisi gray/white style ke honge, koi color-coding nahi. */
.acrm-viewer-menu-item,
.acrm-viewer-menu-item.south-tab,
.acrm-viewer-menu-item.north-tab,
.acrm-viewer-menu-item.uchh-tab,
.acrm-viewer-menu-item.pred-tab,
.acrm-viewer-menu-item.remedy-tab {
    display: block; width: 100%; text-align: center;
    padding: 10px 18px; border-radius: 4px; font-weight: 700;
    font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b; cursor: pointer; transition: all 0.15s;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #fdfdfd 0%, #e2e2e2 100%);
    border: 1px solid #999;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
}
.acrm-viewer-menu-item:hover {
    background: linear-gradient(to bottom, #f7f7f7 0%, #d8d8d8 100%);
}
.acrm-viewer-menu-item.active,
.acrm-viewer-menu-item.south-tab.active,
.acrm-viewer-menu-item.north-tab.active,
.acrm-viewer-menu-item.uchh-tab.active,
.acrm-viewer-menu-item.pred-tab.active,
.acrm-viewer-menu-item.remedy-tab.active {
    background: linear-gradient(to bottom, #d6d6d6 0%, #b8b8b8 100%);
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.35);
    color: #0f172a;
}
/* Chhoti screen (mobile) par list content ke NICHE aa jaayegi, side-by-side nahi rahegi */
@media (max-width: 768px) {
    .acrm-horo-viewer-wrap { flex-direction: column; }
    .acrm-horo-viewer-menu {
        width: 100%; max-height: 260px;
        display: grid; grid-template-columns: repeat(2, 1fr);
    }
}
.acrm-report-box { background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; padding: 25px; text-align: center; }
/* NAYA (2026-09-13): North Indian style (diamond) chart ka SAANJHA wrapper --
   pehle ye height/width/border wali styling har North-style chart ke apne
   inline style="..." mein alag-alag (5 baar hoo-ba-hoo copy-paste) likhi hui
   thi. Astrologer ne kaha ki iski height thodi kam (420px se 380px) karni
   hai, aur AAGE bhi jitne bhi naye North-style chart banenge (Andha Tewa,
   Baalig Tewa, Naabaalig Tewa waghera), unmein bhi yahi wrapper istemal ho --
   isliye ab ye EK hi jagah (class ke roop mein) rakha hai. Naya North-style
   chart banate waqt bas yahi class ("acrm-north-chart-wrap") istemal karni
   hai, height/width dobara likhne ki zaroorat nahi. */
.acrm-north-chart-wrap { width: 100%; max-width: 500px; margin: 0 auto; height: 380px; border: 3px solid #1e293b; background: #fff; position: relative; }
.acrm-report-box h3 { margin-top: 0; color: #0f172a; font-size: 18px; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 20px; text-align: left; }
/* वर्षफल कैलकुलेटर बार स्टाइल */
.varshfal-calc-bar { display: flex; justify-content: center; align-items: center; gap: 15px; background: #fef3c7; border: 1px solid #fde68a; padding: 10px 15px; border-radius: 8px; margin-bottom: 20px; }
.varshfal-btn { background: #d97706; color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; font-weight: bold; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.varshfal-btn:hover { background: #b45309; }
/* साउथ इंडियन टेबल स्टाइल */
.acrm-kundli-table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 4px solid #334155; }
.acrm-kundli-table td { border: 1px solid #334155; height: 80px; position: relative; vertical-align: top; padding: 5px; background: radial-gradient(circle, #fef9c3 15%, #fbbf24 100%); text-align: left; }
.acrm-kundli-table td.center-box { background: #fefce8; text-align: center; vertical-align: middle; font-weight: 800; font-size: 16px; color: #92400e; border: 2px solid #334155; }
.house-num { font-weight: 900; font-size: 14px; color: #1e293b; display: block; margin-bottom: 4px; }
.planet-list { font-weight: 800; font-size: 11px; color: #1e3a8a; }