/*
|--------------------------------------------------------------------------
| KundliLive - North Indian Chart Layout Engine v1
|--------------------------------------------------------------------------
|
| Reusable for D1, D9 and future North-Indian style divisional charts.
|
| Principle:
| - Every house gets a geometrically safe content zone.
| - The HOUSE wrapper never masks/cuts chart lines.
| - Only actual labels/badges have backgrounds.
| - Hindi and English share the SAME geometry.
|
*/

.kundli-chart.north-indian-chart {
    position: relative !important;

    width: 100% !important;
    max-width: 620px !important;
    aspect-ratio: 1 / 1 !important;

    min-height: 0 !important;
    margin: 0 auto !important;

    overflow: hidden !important;

    background: #fffdf9 !important;
    border-radius: 2px !important;
}


/* -------------------------------------------------------------
   CHART GEOMETRY LAYER
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .kundli-lines {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 1 !important;

    pointer-events: none !important;
}

.kundli-chart.north-indian-chart .kundli-lines rect,
.kundli-chart.north-indian-chart .kundli-lines line {
    fill: none !important;

    stroke: #aa8870 !important;
    stroke-width: 1.35 !important;

    vector-effect: non-scaling-stroke !important;
}


/* -------------------------------------------------------------
   UNIVERSAL SAFE HOUSE CONTAINER

   IMPORTANT:
   No white rectangular background here.
   This prevents diagonal lines from appearing broken.
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .k-house {
    position: absolute !important;

    left: var(--house-x) !important;
    top: var(--house-y) !important;

    width: var(--house-width) !important;
    max-width: none !important;

    transform: translate(-50%, -50%) !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    text-align: center !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: visible !important;

    z-index: 5 !important;

    pointer-events: none !important;
}


/* -------------------------------------------------------------
   12 GEOMETRY-SAFE ZONES

   Same coordinates for Hindi / English / future charts.
------------------------------------------------------------- */

/* Top central */
.kundli-chart.north-indian-chart .kh1 {
    --house-x: 50%;
    --house-y: 18%;
    --house-width: 27%;
}

/* Top-left */
.kundli-chart.north-indian-chart .kh2 {
    --house-x: 25%;
    --house-y: 10%;
    --house-width: 22%;
}

/* Left-upper side triangle - widest at Y≈25% */
.kundli-chart.north-indian-chart .kh3 {
    --house-x: 10.5%;
    --house-y: 25%;
    --house-width: 19%;
}

/* Left central */
.kundli-chart.north-indian-chart .kh4 {
    --house-x: 23%;
    --house-y: 50%;
    --house-width: 22%;
}

/* Left-lower side triangle - widest at Y≈75% */
.kundli-chart.north-indian-chart .kh5 {
    --house-x: 10.5%;
    --house-y: 75%;
    --house-width: 19%;
}

/* Bottom-left */
.kundli-chart.north-indian-chart .kh6 {
    --house-x: 25%;
    --house-y: 90%;
    --house-width: 22%;
}

/* Bottom central */
.kundli-chart.north-indian-chart .kh7 {
    --house-x: 50%;
    --house-y: 82%;
    --house-width: 27%;
}

/* Bottom-right */
.kundli-chart.north-indian-chart .kh8 {
    --house-x: 75%;
    --house-y: 90%;
    --house-width: 22%;
}

/* Right-lower side triangle */
.kundli-chart.north-indian-chart .kh9 {
    --house-x: 89.5%;
    --house-y: 75%;
    --house-width: 19%;
}

/* Right central */
.kundli-chart.north-indian-chart .kh10 {
    --house-x: 77%;
    --house-y: 50%;
    --house-width: 22%;
}

/* Right-upper side triangle */
.kundli-chart.north-indian-chart .kh11 {
    --house-x: 89.5%;
    --house-y: 25%;
    --house-width: 19%;
}

/* Top-right */
.kundli-chart.north-indian-chart .kh12 {
    --house-x: 75%;
    --house-y: 10%;
    --house-width: 22%;
}


/* -------------------------------------------------------------
   HOUSE NUMBER
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .k-house-no {
    display: table !important;

    width: max-content !important;
    max-width: 100% !important;

    margin: 0 auto 3px !important;
    padding: 1px 3px !important;

    background: #fffdf9 !important;

    border-radius: 3px !important;

    color: #8d7d70 !important;

    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    position: relative !important;
    z-index: 7 !important;
}


/* -------------------------------------------------------------
   LAGNA BADGE
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .k-lagna {
    display: inline-block !important;

    margin-right: 4px !important;

    padding: 3px 7px !important;

    border-radius: 12px !important;

    background: #9b3023 !important;
    color: #fff !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}


/* -------------------------------------------------------------
   RASHI
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .k-rashi {
    display: table !important;

    width: max-content !important;
    max-width: 100% !important;

    margin: 0 auto 6px !important;
    padding: 1px 4px !important;

    background: #fffdf9 !important;

    border-radius: 3px !important;

    color: #792b20 !important;

    font-size: 17px !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;

    white-space: nowrap !important;

    position: relative !important;
    z-index: 7 !important;
}


/* -------------------------------------------------------------
   PLANET STACK
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .k-planets {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* -------------------------------------------------------------
   PLANET BADGE

   Badge always owns its complete background.
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .k-planet {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    gap: 5px !important;

    margin: 0 auto !important;
    padding: 5px 7px !important;

    border-radius: 7px !important;

    white-space: nowrap !important;

    overflow: visible !important;

    position: relative !important;
    z-index: 8 !important;
}

.kundli-chart.north-indian-chart .k-planet-name {
    display: inline-block !important;

    flex: 0 1 auto !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    white-space: nowrap !important;
}

.kundli-chart.north-indian-chart .k-planet-degree {
    display: inline-block !important;

    flex: 0 0 auto !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;

    opacity: .88 !important;
}


/* -------------------------------------------------------------
   PLANET STATUS COLORS
------------------------------------------------------------- */

.kundli-chart.north-indian-chart .k-planet-positive {
    background: #edf8ef !important;
    border: 1px solid #a7d8b1 !important;
}

.kundli-chart.north-indian-chart .k-planet-positive .k-planet-name,
.kundli-chart.north-indian-chart .k-planet-positive .k-planet-degree {
    color: #16723a !important;
}


.kundli-chart.north-indian-chart .k-planet-negative {
    background: #fff0ef !important;
    border: 1px solid #efa6a1 !important;
}

.kundli-chart.north-indian-chart .k-planet-negative .k-planet-name,
.kundli-chart.north-indian-chart .k-planet-negative .k-planet-degree {
    color: #c33129 !important;
}


.kundli-chart.north-indian-chart .k-planet-neutral {
    background: #f6eadf !important;
    border: 1px solid #dfc8b5 !important;
}

.kundli-chart.north-indian-chart .k-planet-neutral .k-planet-name,
.kundli-chart.north-indian-chart .k-planet-neutral .k-planet-degree {
    color: #66483a !important;
}


/* -------------------------------------------------------------
   ENGLISH TYPOGRAPHY ONLY
   Geometry remains identical.
------------------------------------------------------------- */

.kundli-chart.north-indian-chart.lang-en .k-rashi {
    font-size: 16px !important;
}

.kundli-chart.north-indian-chart.lang-en .k-planet-name {
    font-size: 13px !important;
}

.kundli-chart.north-indian-chart.lang-en .k-planet-degree {
    font-size: 11px !important;
}


/*
 * Side triangles have the smallest horizontal safe area.
 * Only typography scales slightly; POSITION NEVER changes.
 */
.kundli-chart.north-indian-chart.lang-en .kh3 .k-planet-name,
.kundli-chart.north-indian-chart.lang-en .kh5 .k-planet-name,
.kundli-chart.north-indian-chart.lang-en .kh9 .k-planet-name,
.kundli-chart.north-indian-chart.lang-en .kh11 .k-planet-name {
    font-size: 12.5px !important;
}

.kundli-chart.north-indian-chart.lang-en .kh3 .k-planet-degree,
.kundli-chart.north-indian-chart.lang-en .kh5 .k-planet-degree,
.kundli-chart.north-indian-chart.lang-en .kh9 .k-planet-degree,
.kundli-chart.north-indian-chart.lang-en .kh11 .k-planet-degree {
    font-size: 10.5px !important;
}


/* -------------------------------------------------------------
   MOBILE
------------------------------------------------------------- */

@media (max-width: 700px) {

    .kundli-chart.north-indian-chart .k-house-no {
        font-size: 8px !important;
        margin-bottom: 2px !important;
    }

    .kundli-chart.north-indian-chart .k-lagna {
        font-size: 7px !important;
        padding: 2px 4px !important;
    }

    .kundli-chart.north-indian-chart .k-rashi {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    .kundli-chart.north-indian-chart .k-planets {
        gap: 2px !important;
    }

    .kundli-chart.north-indian-chart .k-planet {
        gap: 2px !important;
        padding: 3px 4px !important;
    }

    .kundli-chart.north-indian-chart .k-planet-name {
        font-size: 9px !important;
    }

    .kundli-chart.north-indian-chart .k-planet-degree {
        font-size: 8px !important;
    }

    .kundli-chart.north-indian-chart.lang-en .k-planet-name {
        font-size: 8px !important;
    }

    .kundli-chart.north-indian-chart.lang-en .k-planet-degree {
        font-size: 7px !important;
    }
}