@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Work+Sans:wght@400;500;600;700&family=Noto+Serif+Tamil:wght@500;700&family=Noto+Serif+Telugu:wght@500;700&family=Noto+Serif+Kannada:wght@500;700&family=Noto+Serif+Malayalam:wght@500;700&display=swap');

:root {
    --jw-navy-deep: #060A1F;
    --jw-navy: #0D1330;
    --jw-navy-mid: #131B42;
    --jw-navy-light: #1C2555;
    --jw-gold: #D4AF37;
    --jw-gold-light: #F2D582;
    --jw-gold-pale: #FBECC0;
    --jw-gold-dark: #9A7410;
    --jw-text: #17172A;
    --jw-muted: #4C465D;
    --jw-line: rgba(212, 175, 55, .28);
    --jw-shadow: 0 14px 36px rgba(8, 10, 28, .25);
    --jw-radius: 18px;
    --jw-radius-lg: 24px;
    --jw-ease: cubic-bezier(.22, .8, .28, 1);
}

html,
body {
    background: #F2D582 !important;
}

body {
    color: var(--jw-text) !important;
    font-family: 'Work Sans', 'Noto Sans Tamil', sans-serif !important;
}

.site-header {
    background: var(--jw-navy) !important;
    border-bottom: 1px solid var(--jw-line) !important;
    box-shadow: 0 3px 14px rgba(6, 10, 31, .28) !important;
}

.site-logo,
.site-logo-text,
.main-menu a,
.site-language,
.site-language select,
.menu-toggle {
    color: var(--jw-gold-light) !important;
}

.site-logo:hover {
    color: var(--jw-gold) !important;
}

.site-logo-image img {
    padding: 0 !important;
}

.site-language select {
    background: var(--jw-navy-mid) !important;
    border-color: var(--jw-line) !important;
}

.main-menu a:hover,
.main-menu a.active {
    background: var(--jw-navy-light) !important;
}

.main-menu a.active {
    color: var(--jw-gold-light) !important;
}

.site-footer {
    background: var(--jw-navy-deep) !important;
    color: var(--jw-gold-light) !important;
    border-top-color: var(--jw-gold) !important;
}

.site-footer .footer-column h3,
.site-footer .footer-nav a,
.site-footer .footer-copy {
    color: var(--jw-gold-light) !important;
}

.site-footer .footer-nav a:hover {
    color: #fff !important;
}

/* Generator page */
.jathagam-page {
    background: transparent !important;
    color: var(--jw-text) !important;
    font-family: 'Work Sans', 'Noto Sans Tamil', sans-serif !important;
}

.jathagam-page .header-box {
    background: radial-gradient(circle at 85% 10%, rgba(212, 175, 55, .16), transparent 42%), linear-gradient(155deg, var(--jw-navy-mid), var(--jw-navy) 60%, var(--jw-navy-deep)) !important;
    border-color: var(--jw-line) !important;
    border-radius: var(--jw-radius-lg) !important;
    box-shadow: var(--jw-shadow) !important;
}

.jathagam-page .header-box h1,
.jathagam-page .header-box h2,
.jathagam-page .header-box h3 {
    font-family: 'Noto Serif Tamil', 'Cormorant Garamond', serif !important;
    color: #F2D578 !important;
    font-size: 33px;


}

.jathagam-page .header-box p {
    color: #FFF4D2 !important;
}

.jathagam-page .api-usage-bar {
    background: linear-gradient(135deg, var(--jw-navy), var(--jw-navy-deep)) !important;
    border-color: var(--jw-line) !important;
    box-shadow: var(--jw-shadow) !important;
}

.jathagam-page .card-custom {
    background: linear-gradient(155deg, var(--jw-navy-mid), var(--jw-navy)) !important;
    border: 1px solid var(--jw-line) !important;
    border-radius: var(--jw-radius) !important;
    color: #F5F1E8 !important;
    box-shadow: var(--jw-shadow) !important;
}

.jathagam-page .card-custom h2,
.jathagam-page .card-custom h3,
.jathagam-page .card-custom h4,
.jathagam-page .card-custom h5,
.jathagam-page .chart-title,
.jathagam-page .text-muted {
    color: var(--jw-gold-light) !important;
    font-family: 'Noto Serif Tamil', 'Cormorant Garamond', serif !important;
}

.jathagam-page .form-label {
    color: var(--jw-gold-pale) !important;
}

.jathagam-page .form-control,
.jathagam-page .form-select {
    background: rgba(255, 255, 255, .96) !important;
    color: var(--jw-text) !important;
    border-color: rgba(212, 175, 55, .48) !important;
    border-radius: 10px !important;
}

.jathagam-page .form-control:focus,
.jathagam-page .form-select:focus {
    border-color: var(--jw-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .18) !important;
}

.jathagam-page .btn-primary,
.jathagam-page .btn-danger {
    background: linear-gradient(135deg, var(--jw-gold-light), var(--jw-gold)) !important;
    color: var(--jw-navy-deep) !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 24px rgba(212, 175, 55, .3) !important;
}

.jathagam-page .btn-primary:hover,
.jathagam-page .btn-danger:hover {
    background: linear-gradient(135deg, #FBECC0, var(--jw-gold)) !important;
    transform: translateY(-3px);
}

.jathagam-page .btn-secondary,
.jathagam-page .btn-reset,
.jathagam-page a.btn-danger {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(212, 175, 55, .55) !important;
    color: var(--jw-gold-pale) !important;
    border-radius: 12px !important;
}

.jathagam-page .btn-secondary:hover,
.jathagam-page .btn-reset:hover,
.jathagam-page a.btn-danger:hover {
    background: rgba(212, 175, 55, .12) !important;
}

.jathagam-page .rasi-summary-table,
.jathagam-page table.details-table {
    border-color: var(--jw-line) !important;
    background: var(--jw-navy) !important;
}

.jathagam-page .rasi-summary-table th,
.jathagam-page table.details-table th,
.jathagam-page .table th {
    background: var(--jw-navy-deep) !important;
    color: var(--jw-gold-light) !important;
}

.jathagam-page .rasi-summary-table td,
.jathagam-page table.details-table td,
.jathagam-page .table td {
    background: var(--jw-navy-mid) !important;
    color: #F5F1E8 !important;
    border-color: var(--jw-line) !important;
}

.jathagam-page .rasi-chart-table {
    background: var(--jw-navy) !important;
    border-color: var(--jw-gold) !important;
    box-shadow: 0 10px 26px rgba(6, 10, 31, .3) !important;
}

.jathagam-page .rasi-chart-table td {
    background: var(--jw-navy-mid) !important;
    color: var(--jw-gold-pale) !important;
    border-color: var(--jw-gold-dark) !important;
    font-size: 16px;

}

.jathagam-page .rasi-chart-table td:hover {
    background: var(--jw-navy-light) !important;
}

.jathagam-page .center-cell {
    background: linear-gradient(135deg, var(--jw-navy-deep), var(--jw-navy-light)) !important;
    color: var(--jw-gold-light) !important;
}

.jathagam-page .planet-tag {
    background: rgba(212, 175, 55, .14) !important;
    border-color: var(--jw-line) !important;
    color: var(--jw-gold-pale) !important;
    font-size: 16px;

}

.jathagam-page .planet-tag.lagna {
    background: var(--jw-navy-deep) !important;
    color: var(--jw-gold-light) !important;
}

.jathagam-page .alert-danger,
.jathagam-page .alert-warning,
.jathagam-page .alert-success {
    border-color: var(--jw-line) !important;
    background: var(--jw-navy-mid) !important;
    color: var(--jw-gold-pale) !important;
}

/* Compatibility page */
body:has(.selection-card) {
    padding: 0 !important;
}

body:has(.selection-card) .container {
    max-width: 1180px;
    padding: 28px 20px 90px;
}

.page-title {
    margin: 0 auto 30px !important;
    padding: 42px 28px !important;
    border-radius: var(--jw-radius-lg);
    background: radial-gradient(circle at 85% 10%, rgba(212, 175, 55, .16), transparent 42%), linear-gradient(155deg, var(--jw-navy-mid), var(--jw-navy) 60%, var(--jw-navy-deep));
    border: 1px solid var(--jw-line);
    box-shadow: var(--jw-shadow);
}

.page-title h1,
.page-title p {
    color: var(--jw-gold-light) !important;
    font-family: 'Noto Serif Tamil', 'Cormorant Garamond', serif !important;
}

.page-title p {
    color: #FFF4D2 !important;
}

.selection-card,
.info-card,
.charts-section,
.koota-section,
.score-section,
.dosha-section {
    background: linear-gradient(155deg, var(--jw-navy-mid), var(--jw-navy)) !important;
    border: 1px solid var(--jw-line);
    border-radius: var(--jw-radius) !important;
    box-shadow: var(--jw-shadow) !important;
    color: #F5F1E8;
}

.selection-card {
    padding: 30px !important;
}

.person-selection h3,
.info-card h2,
.charts-title,
.chart-box h4,
.koota-section h2,
.score-section h2,
.dosha-section h2 {
    color: var(--jw-gold-light) !important;
    font-family: 'Noto Serif Tamil', 'Cormorant Garamond', serif;
    text-align: center;
}

.field-group label,
.info-label {
    color: var(--jw-gold-pale) !important;
    font-size: 15px;

}

.person-selection input {
    height: 50px !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--jw-text) !important;
    border: 1px solid rgba(212, 175, 55, .48) !important;
    border-radius: 10px !important;
}

.person-selection input:focus {
    border-color: var(--jw-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .18) !important;
}

.btn {
    border-radius: 12px !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--jw-gold-light), var(--jw-gold)) !important;
    color: var(--jw-navy-deep) !important;
    box-shadow: 0 8px 24px rgba(212, 175, 55, .3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FBECC0, var(--jw-gold)) !important;
    transform: translateY(-3px);
}

.btn-secondary {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--jw-gold-pale) !important;
    border: 1px solid rgba(212, 175, 55, .55) !important;
}

.btn-secondary:hover {
    background: rgba(212, 175, 55, .12) !important;
    color: #fff !important;
}

.btn-download {
    background: linear-gradient(135deg, var(--jw-gold-light), var(--jw-gold)) !important;
    color: var(--jw-navy-deep) !important;
}

.info-row {
    border-color: var(--jw-line) !important;
}

.chart-box,
.dosha-card {
    background: rgba(6, 10, 31, .35) !important;
    border-color: var(--jw-line) !important;
}

.chart-person-title,
.info-card>div {
    color: #F5F1E8;
}

body:has(.selection-card) .rasi-chart-table {
    background: var(--jw-navy) !important;
    border: 2px solid var(--jw-gold) !important;
    border-collapse: separate !important;
    border-radius: 14px;
    overflow: hidden;
}

body:has(.selection-card) .rasi-chart-table td {
    height: 95px;
    background: var(--jw-navy-mid) !important;
    border-color: var(--jw-gold-dark) !important;
    color: var(--jw-gold-pale) !important;
}

body:has(.selection-card) .rasi-chart-table .center-cell {
    background: linear-gradient(135deg, var(--jw-navy-deep), var(--jw-navy-light)) !important;
    color: var(--jw-gold-light) !important;
}

body:has(.selection-card) .planet-tag {
    background: rgba(212, 175, 55, .14) !important;
    border: 1px solid var(--jw-line);
    color: var(--jw-gold-pale) !important;
    border-radius: 6px;
}

body:has(.selection-card) .planet-tag.lagna {
    background: var(--jw-navy-deep) !important;
    color: var(--jw-gold-light) !important;
}

.koota-table th {
    background: var(--jw-navy-deep) !important;
    color: var(--jw-gold-light) !important;
    text-align: center;

}

.koota-table th,
.koota-table td {
    border-color: var(--jw-line) !important;
    text-align: center;

}

.koota-table td {
    color: #F5F1E8;
    background: var(--jw-navy-mid);
}

.error {
    background: rgba(116, 35, 45, .35) !important;
    border-color: rgba(255, 150, 150, .45) !important;
    color: #FFE7E7 !important;
}

.score {
    color: var(--jw-gold-light) !important;
}

.percentage {
    color: var(--jw-gold-pale);
}

.recommendation {
    color: #F5F1E8;
}

.status-strong {
    color: #6FE0A1 !important;
}

.status-moderate {
    color: var(--jw-gold-light) !important;
}

.status-weak,
.status-dosha {
    color: #FF9B9B !important;
}

@media (max-width: 768px) {
    body:has(.selection-card) .container {
        padding: 20px 15px 60px;
    }

    .page-title {
        padding: 32px 20px !important;
    }

    .selection-card,
    .charts-section,
    .score-section,
    .koota-section,
    .dosha-section {
        padding: 22px !important;
    }
}

@media (max-width: 600px) {
    .page-title h1 {
        font-size: 28px !important;
    }

    .page-title p {
        font-size: 14px;
    }

    .selection-card,
    .charts-section,
    .score-section,
    .koota-section,
    .dosha-section {
        padding: 18px !important;
    }

    body:has(.selection-card) .rasi-chart-table {
        min-width: 350px;
    }
}

@media print {

    html,
    body {
        background: #fff !important;
    }

    .site-header,
    .site-footer,
    .no-print {
        display: none !important;
    }

    .selection-card,
    .info-card,
    .charts-section,
    .koota-section,
    .score-section,
    .dosha-section {
        box-shadow: none !important;
    }
}