/* =========================================
   GLOBAL, LAYOUT & SIZING
========================================= */
.ks-charts-grid { 
    display: flex !important; 
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 15px; 
    width: 100%; 
    align-items: flex-start; 
    justify-content: space-between;
}

.ks-charts-col { width: 100% !important; display: flex; flex-direction: column; gap: 12px; }
.ks-charts-grid .ks-chart-col { flex: 1 1 calc(33.333% - 10px) !important; max-width: 100% !important; display: flex; flex-direction: column; gap: 12px; }

/* =========================================
   CANVAS ASPECT RATIOS
========================================= */
.ks-canvas {
    width: 100%; 
    aspect-ratio: 1.15 / 1; 
    position: relative;
    background: var(--ks-bg); 
    border: 2px solid var(--ks-border); 
    border-radius: 4px;
    box-shadow: var(--ks-shadow); 
    overflow: hidden;
    transition: aspect-ratio 0.2s ease;
}
.ks-canvas.is-north { aspect-ratio: 1 / 1 !important; }

/* Headers */
.ks-chart-header { background: var(--ks-bg); border: 1px solid var(--ks-border); border-radius: 6px; padding: 0 10px; display: flex; align-items: center; justify-content: center; box-shadow: var(--ks-shadow); height: 46px; box-sizing: border-box; }
.ks-chart-title { font-weight: bold; color: var(--ks-text); text-align: center; white-space: nowrap;}
.ks-header-flex { display: flex; gap: 5px; justify-content: space-between; width: 100%; align-items: center;}
.ks-transit-input { background: var(--ks-input-bg); border: 1px solid var(--ks-input-border); color: var(--ks-text); border-radius: 4px; padding: 3px; font-size: 11px; outline: none; max-width: 100px; }
.ks-date-input { max-width: 130px; }

/* Dark Mode Dropdowns */
.ks-varga-dropdown { width: 100%; background-color: var(--ks-bg); border: none; color: var(--ks-text); font-weight: bold; text-align: center; outline: none; cursor: pointer; font-size: 14px;}
html[data-ks-theme="dark"] .ks-varga-dropdown option, html[data-ks-theme="combo"] .ks-varga-dropdown option, html[data-ks-theme="galaxy"] .ks-varga-dropdown option { background-color: #1a1c20 !important; color: #f0f0f0 !important; }
html[data-ks-theme="dark"] .ks-varga-dropdown option:hover, html[data-ks-theme="combo"] .ks-varga-dropdown option:hover, html[data-ks-theme="galaxy"] .ks-varga-dropdown option:hover { background-color: #000000 !important; color: #d4af37 !important; }

/* =========================================
   GRIDS
========================================= */
.ks-south-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); width: 100%; height: 100%; background: var(--ks-border); gap: 1px;}
.ks-south-cell { background: var(--ks-bg); position: relative; padding: 18px 2px 2px 2px; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 2px; overflow: hidden; }
.ks-s-0 { grid-area: 1 / 2; } .ks-s-1 { grid-area: 1 / 3; } .ks-s-2 { grid-area: 1 / 4; } .ks-s-3 { grid-area: 2 / 4; } .ks-s-4 { grid-area: 3 / 4; } .ks-s-5 { grid-area: 4 / 4; } .ks-s-6 { grid-area: 4 / 3; } .ks-s-7 { grid-area: 4 / 2; } .ks-s-8 { grid-area: 4 / 1; } .ks-s-9 { grid-area: 3 / 1; } .ks-s-10 { grid-area: 2 / 1; } .ks-s-11 { grid-area: 1 / 1; }
.ks-south-center { grid-area: 2 / 2 / 4 / 4; background: var(--ks-bg) !important; display:flex; align-items:center; justify-content:center; flex-direction: column; text-align:center; padding: 10px;}

.ks-middle-title { font-weight: bold; color: var(--ks-title-middle, var(--ks-border)); font-size: 16px; margin-bottom:4px; }
.ks-middle-desc { font-size: 12px; color: var(--ks-text, #f0f0f0); opacity: 0.9; font-weight: normal; line-height: 1.3;}

.ks-north-grid { width: 100%; height: 100%; position: relative; background: var(--ks-bg); }
.ks-north-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;}
.ks-north-svg line, .ks-north-svg polygon { stroke: var(--ks-border); stroke-width: 1px; fill: none; }
.ks-north-cell { position: absolute; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; padding: 2px; overflow: hidden; z-index: 2;}

.ks-n-1 { top: 25%; left: 50%; width: 40%; height: 40%; } .ks-n-2 { top: 15%; left: 20%; width: 25%; height: 25%; } .ks-n-3 { top: 35%; left: 15%; width: 25%; height: 25%; } .ks-n-4 { top: 50%; left: 25%; width: 40%; height: 40%; } .ks-n-5 { top: 65%; left: 15%; width: 25%; height: 25%; } .ks-n-6 { top: 85%; left: 20%; width: 25%; height: 25%; } .ks-n-7 { top: 75%; left: 50%; width: 40%; height: 40%; } .ks-n-8 { top: 85%; left: 80%; width: 25%; height: 25%; } .ks-n-9 { top: 65%; left: 85%; width: 25%; height: 25%; } .ks-n-10 { top: 50%; left: 75%; width: 40%; height: 40%; } .ks-n-11 { top: 35%; left: 85%; width: 25%; height: 25%; } .ks-n-12 { top: 15%; left: 80%; width: 25%; height: 25%; }

/* =========================================
   THE FIX: STRICT BLACK BORDERS FOR MULTI THEME
========================================= */
html[data-ks-theme="multi"] .ks-canvas { border-color: #000000 !important; }
html[data-ks-theme="multi"] .ks-south-grid { background: #000000 !important; }
html[data-ks-theme="multi"] .ks-north-svg line, html[data-ks-theme="multi"] .ks-north-svg polygon { stroke: #000000 !important; stroke-width: 1px !important; }

html[data-ks-theme="multi"] .ks-sign-fire { background-color: #f49f7a !important; } 
html[data-ks-theme="multi"] .ks-sign-earth { background-color: #c5a47e !important; } 
html[data-ks-theme="multi"] .ks-sign-air { background-color: #ebe07a !important; } 
html[data-ks-theme="multi"] .ks-sign-water { background-color: #a9d5dd !important; } 
html[data-ks-theme="multi"] .ks-south-center { background: #ffffff !important; }

/* =========================================
   TYPOGRAPHY & POPUPS
========================================= */
.ks-planet-block span { font-family: inherit; }
.kalasutra-module[data-ks-lang="en"] .ks-planet-block { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 14px; }

/* STRICT LIGHT/NORMAL FONT FOR TELUGU */
.kalasutra-module[data-ks-lang="te"] .ks-planet-block, 
.kalasutra-module[data-ks-lang="te"] .ks-planet-block span { 
    font-family: 'Mallanna', sans-serif !important; 
    font-weight: normal !important; /* Forces Light/Normal instead of Bold */
    font-size: 18px; 
}

.ks-planet-block { display: flex; align-items: baseline; gap: 2px; color: var(--ks-text); cursor: pointer; padding: 0 2px; transition: transform 0.1s ease;}
.ks-planet-block:hover { transform: scale(1.05); }
.kalasutra-module[data-ks-lang="en"] .ks-color-special, .kalasutra-module[data-ks-lang="te"] .ks-color-special { font-weight: bold !important; }

.ks-deg { font-size: 10px; font-weight: normal; opacity: 0.8; }
.ks-sign-num { position: absolute; font-size: 11px; font-weight: normal; opacity: 1; color: #10b981; }

.ks-n-1 .ks-sign-num { bottom: 2px; left: 50%; transform: translateX(-50%); } .ks-n-2 .ks-sign-num { bottom: 2px; right: 2px; } .ks-n-3 .ks-sign-num { bottom: 2px; right: 2px; } .ks-n-4 .ks-sign-num { top: 50%; right: 2px; transform: translateY(-50%); } .ks-n-5 .ks-sign-num { top: 2px; right: 2px; } .ks-n-6 .ks-sign-num { top: 2px; right: 2px; } .ks-n-7 .ks-sign-num { top: 2px; left: 50%; transform: translateX(-50%); } .ks-n-8 .ks-sign-num { top: 2px; left: 2px; } .ks-n-9 .ks-sign-num { top: 2px; left: 2px; } .ks-n-10 .ks-sign-num { top: 50%; left: 2px; transform: translateY(-50%); } .ks-n-11 .ks-sign-num { bottom: 2px; left: 2px; } .ks-n-12 .ks-sign-num { bottom: 2px; left: 2px; }

.ks-south-cell .ks-sign-num { top: 2px; right: 4px; color: var(--ks-text); opacity: 0.6; font-weight: bold; bottom: auto; left: auto; transform: none; }

/* THE FIX: INCREASED HOUSE FONT SIZE AND ADDED HOVER CURSOR */
/* THE FIX: KP OVERLAPPING HOUSES WRAPPER */
.ks-cusp-wrapper {
    position: absolute;
    top: 2px;
    left: 4px;
    right: 4px; /* Give it space to expand horizontally */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Automatically wrap side-by-side if multiple exist */
    gap: 8px;
    z-index: 10;
    pointer-events: none; /* Let hover pass through the wrapper */
}

.ks-north-cell .ks-cusp-wrapper {
    left: 0;
    right: 0;
    justify-content: center; /* Center them perfectly in North Chart */
}

.ks-house-cusp { 
    font-size: 11px; 
    font-weight: 600; 
    opacity: 0.85; 
    color: var(--ks-text); 
    cursor: help; 
    pointer-events: auto; /* Re-enable hover specifically for the text */
    white-space: nowrap;
}
}
.ks-north-cell .ks-house-cusp { top: 2px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; }

/* --- THE INNER GLOW ASPECT HIGHLIGHT --- */
.ks-aspect-target {
    /* 1. Forcefully kill the solid background fill */
    background-color: transparent !important; 
    background: none !important; 
    
    /* 2. Create a sharp Inner Glow (0px offset, 18px blur, 4px spread) */
    box-shadow: inset 0px 0px 18px 4px rgba(212, 175, 55, 0.9) !important;
    
    /* 3. Ensure the cell border remains visible */
    z-index: 2; 
    
    transition: box-shadow 0.2s ease-in-out;
}
.ks-color-retro { color: #ef4444 !important; } .ks-color-combust { color: #ef4444 !important; } 
.ks-color-asc { color: #10b981 !important; }
.ks-color-sl { color: #eab308 !important; } .ks-color-hl { color: #db2777 !important; } .ks-color-gl { color: #3b82f6 !important; } .ks-color-il { color: #a855f7 !important; } .ks-color-gulika { color: #84cc16 !important; } .ks-color-mandi { color: #9ca3af !important; } .ks-color-sphuta { color: #14b8a6 !important; } 

.ks-tooltip { 
    position: fixed; 
    /* Added fallback colors so it stays dark even outside the widget */
    background: var(--ks-bg, #111827) !important; 
    border: 1px solid var(--ks-border, #374151) !important; 
    color: var(--ks-text, #f3f4f6) !important; 
    padding: 10px 14px; 
    border-radius: 6px; 
    font-size: 12px; 
    /* Absolute maximum z-index allowed by browsers */
    z-index: 2147483647 !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.8); 
    pointer-events: none; 
    line-height: 1.6;
}

@media (max-width: 1024px) { .ks-charts-grid { flex-wrap: wrap !important; } .ks-charts-grid .ks-chart-col { flex: 1 1 100% !important; } }