/* ═══════════════════════════════════════════════════════════════════════════
* Star Panchang - consolidated stylesheet
* Merged from former app.css + star-panchang.css.
* Loaded by every PHP page (pages under /html/,
* personal/*).
*
* SECTIONS
* 1. Tokens (CSS variables)
* 2. Reset + base typography + utilities
* 3. Header band + change-inputs button
* 4. Modal overlay + form
* 5. Place-search row + dropdown
* 6. Birth-data input panel (legacy + filter forms)
* 7. Buttons + combobox + picked-card
* 8. Layout containers + report head
* 9. Section card + sub-header
* 10. Tables + tags
* 11. Calendar card + month nav + grid + festival pills
* 12. Calendar legend + footer-links
* 13. panchang.php helpers (two-col, error-box, charts)
* 14. Home / index.php - hero
* 15. Home - quick-access card grid + feat-cards
* 16. Home - featured Personal Dashboard card
* 17. Home - "need birth details" redirect banner
* 18. Personal dashboard + sub-page chrome
* 19. Dashboard group headings
* 20. Dosha / forecast blocks (prediction pages)
* 21. Chart-style toggle + chart-meaning
* 22. Chart-picker + prediction card
* 23. Per-planet rows + dignity tags
* 24. Forecast cards (today/tomorrow/weekly/monthly)
* 25. Sade Sati remedies + life-domain themes
* 26. Sarva-Ashtakavarga colour bands
* 27. Planet jump-nav
* 28. Match-horoscope two-side layout
* 29. Dashboard greeting badges
* 30. Vimshottari dasha drill-down tree
* 31. Zodiac chooser + horoscope page
* 32. Sidenav (legacy)
* 33. Print
* ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');
/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root {
--saffron: #F58220;
--saffron-dark: #E07414;
--saffron-light: #FED7AA;
--saffron-bg: #FFF7ED;
--maroon: #B91C1C;
--maroon-dark: #7F1D1D;
--cream: #FCFAF6;
--cream-warm: #FEF3C7;
--orange-50: #FFF7ED;
--orange-100: #FFEDD5;
--gray-text: #1F2937;
--gray-muted: #6B7280;
--gray-line: #E5E7EB;
--gray-soft-line: #F3F0EA;
--green-good: #16A34A;
--green-bg: #DCFCE7;
--red-bad: #DC2626;
--red-bg: #FEE2E2;
--amber: #D97706;
--amber-bg: #FEF3C7;
--blue-info: #2563EB;
--blue-bg: #DBEAFE;
/* --font-body: 'Segoe UI', Tahoma, Arial, sans-serif; */
--font-body: 'Hind Siliguri', Tahoma, Arial, sans-serif;
--font-mono: 'Consolas', 'Courier New', monospace;
--container-max: 1280px;
}
/* ── 2. Reset + base typography + utilities ────────────────────────── */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--gray-text);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--saffron-dark);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0 0 8px;
}
p:last-child {
margin-bottom: 0;
}
strong {
font-weight: 700;
}
ul,
ol {
padding-left: 22px;
}
hr {
border: none;
border-top: 1px solid var(--gray-line);
margin: 14px 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--maroon);
color: #fff;
padding: 8px 14px;
z-index: 1000;
border-radius: 0 0 4px 0;
}
.skip-link:focus {
left: 0;
}
.mono {
font-family: var(--font-mono);
font-size: 12.5px;
}
.muted {
color: var(--gray-muted);
font-size: 12px;
}
.dim {
color: #6B7280;
font-style: italic;
}
.error {
color: var(--maroon-dark);
font-family: var(--font-mono);
font-size: 12px;
background: var(--red-bg);
padding: 10px 12px;
border-radius: 3px;
border-left: 3px solid var(--red-bad);
}
/* ── 3. Header band + change-inputs button ─────────────────────────── */
header {
background: linear-gradient(135deg, var(--saffron) 0%, var(--maroon) 100%);
color: #fff;
padding: 22px 28px 18px 28px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
position: sticky;
top: 0;
z-index: 900;
display: flex;
flex-direction: row;
justify-content: space-between;
}
header .brand {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 4px;
}
header h1 {
font-size: 30px;
font-weight: 800;
letter-spacing: 0.5px;
}
header .tag-line {
font-size: 15px;
opacity: 0.92;
margin-top: 3px;
}
.brand {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
color: #fff;
}
.brand:hover {
text-decoration: none;
}
.om-glyph {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, 0.4);
line-height: 1;
flex-shrink: 0;
}
.brand-holder {
width: 100%;
}
.brand-title-section {
display: flex;
justify-content: space-between;
width: 100%;
}
header .header-actions {
position: absolute;
top: 23%;
right: 45px;
transform: translateY(-50%);
}
header .change-inputs-btn {
background: var(--saffron);
color: #fff;
border: none;
padding: 9px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
header .change-inputs-btn:hover {
filter: brightness(0.95);
}
/* ── 4. Modal overlay + form ───────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 40px 16px;
overflow-y: auto;
}
.modal-overlay.open {
display: flex;
}
.modal-card {
background: #fff;
border-radius: 8px;
width: min(960px, 100%);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
max-height: calc(100vh - 80px);
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-head {
padding: 14px 20px;
background: var(--maroon);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-head h2 {
margin: 0;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.4px;
}
.modal-head .close-btn {
background: none;
border: none;
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.modal-body {
padding: 18px 20px;
overflow-y: auto;
}
.modal-body form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
align-items: end;
}
.modal-body form>div {
display: flex;
flex-direction: column;
gap: 4px;
}
.modal-body form label {
font-size: 11px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.modal-body form input,
.modal-body form select {
padding: 8px 10px;
border: 1px solid var(--gray-line);
border-radius: 4px;
font-size: 13px;
font-family: inherit;
}
.modal-body .submit-row {
grid-column: 1 / -1;
text-align: right;
padding-top: 6px;
}
.modal-body button[type="submit"] {
background: var(--saffron);
color: #fff;
border: none;
padding: 16px 22px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.modal-body button[type="submit"]:hover {
filter: brightness(0.95);
}
/* ── 5. Place row (Country 1 : City 2) + dropdown ──────────────────── */
.modal-body .form-row-place {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 12px 14px;
}
.modal-body .form-row-place>div {
display: flex;
flex-direction: column;
gap: 4px;
}
.geo-input-wrap {
position: relative;
flex: 1;
min-width: 0;
}
.geo-input-wrap input {
width: 100%;
box-sizing: border-box;
}
.place-search-row {
background: var(--saffron-bg);
border: 1px solid var(--orange-100);
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 4px;
}
.place-search-row>label {
font-size: 11px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.4px;
display: block;
margin-bottom: 6px;
}
.geo-search-wrap {
display: flex;
gap: 8px;
align-items: stretch;
}
.geo-search-wrap>select {
flex: 0 0 auto;
min-width: 160px;
padding: 8px 10px;
border: 1px solid var(--gray-line);
border-radius: 4px;
font-size: 13px;
font-family: inherit;
}
.geo-search-wrap input,
.geo-input-wrap input {
padding: 8px 10px;
border: 1px solid var(--gray-line);
border-radius: 4px;
font-size: 13px;
font-family: inherit;
}
.cell-country select,
.cell-city input {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
border: 1px solid var(--gray-line);
border-radius: 4px;
font-size: 13px;
font-family: inherit;
}
.geo-dropdown {
position: absolute;
left: 0;
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 6px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
max-height: 280px;
overflow-y: auto;
z-index: 1100;
width: max-content;
max-width: min(560px, calc(100vw - 40px));
}
.geo-dropdown .geo-item {
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid var(--gray-soft-line);
display: flex;
justify-content: space-between;
gap: 12px;
}
.geo-dropdown .geo-item:last-child {
border-bottom: none;
}
.geo-dropdown .geo-item:hover,
.geo-dropdown .geo-item.active {
background: var(--saffron-bg);
color: var(--maroon-dark);
}
.geo-dropdown .geo-item .nm {
font-weight: 600;
}
.geo-dropdown .geo-item .meta {
color: var(--gray-muted);
font-size: 11.5px;
}
.geo-dropdown .geo-empty,
.geo-dropdown .geo-error {
padding: 10px 12px;
font-size: 12.5px;
color: var(--gray-muted);
font-style: italic;
}
/* ── 6. Birth-data input panel ─────────────────────────────────────── */
.input-panel {
background: #fff;
border-bottom: 3px solid var(--saffron);
padding: 14px 28px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.input-panel[aria-hidden="true"] {
display: none;
}
.input-panel form,
.input-panel .form-grid {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 2fr 1fr 1fr auto;
gap: 10px;
align-items: end;
}
.input-panel label,
.input-panel .field-label {
display: block;
font-size: 10.5px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 3px;
}
.input-panel .field {
display: block;
}
.input-panel .field-full {
grid-column: 1 / -1;
}
.input-panel input,
.input-panel select {
width: 100%;
padding: 6px 9px;
border: 1px solid var(--gray-line);
border-radius: 4px;
font-size: 13px;
background: #fff;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input-panel input:focus,
.input-panel select:focus {
outline: none;
border-color: var(--saffron);
box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.2);
}
/* ── 7. Buttons + combobox + picked-card ───────────────────────────── */
.btn,
.input-panel button,
.btn-primary {
padding: 8px 18px;
background: linear-gradient(180deg, var(--saffron) 0%, var(--saffron-dark) 100%);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 4px rgba(245, 130, 32, 0.3);
transition: transform 0.1s, box-shadow 0.15s;
font-family: inherit;
display: inline-block;
text-align: center;
}
.btn:hover,
.input-panel button:hover,
.btn-primary:hover {
box-shadow: 0 3px 8px rgba(245, 130, 32, 0.4);
transform: translateY(-1px);
text-decoration: none;
color: #fff;
}
.btn:active,
.input-panel button:active,
.btn-primary:active {
transform: translateY(0);
}
.btn-ghost {
background: transparent;
color: var(--maroon);
border: 1px solid var(--maroon);
box-shadow: none;
}
.btn-ghost:hover {
background: var(--orange-50);
color: var(--maroon);
box-shadow: none;
transform: none;
}
.btn-sm {
padding: 5px 11px;
font-size: 11.5px;
}
.combobox {
position: relative;
}
.combobox-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
list-style: none;
padding: 0;
margin: 2px 0 0;
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 4px;
max-height: 260px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 20;
}
.combobox-list li {
padding: 7px 10px;
cursor: pointer;
font-size: 13px;
border-bottom: 1px solid var(--gray-soft-line);
}
.combobox-list li:last-child {
border-bottom: none;
}
.combobox-list li:hover,
.combobox-list li[aria-selected="true"] {
background: var(--orange-50);
}
.combobox-hint {
font-size: 11px;
color: var(--gray-muted);
margin-top: 3px;
}
.picked-card {
background: var(--orange-50);
border: 1px solid var(--orange-100);
border-radius: 4px;
padding: 8px 12px;
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
align-items: center;
margin-top: 4px;
}
.picked-row {
display: flex;
align-items: center;
gap: 8px;
}
.picked-label {
font-size: 10.5px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.picked-value {
font-size: 12.5px;
}
.picked-clear {
background: transparent;
border: 1px solid var(--maroon);
color: var(--maroon);
padding: 4px 10px;
border-radius: 3px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.picked-clear:hover {
background: var(--orange-100);
}
/* ── 8. Layout containers + report head ────────────────────────────── */
.container {
max-width: var(--container-max);
margin: 22px auto;
padding: 0 18px;
}
.chart-container {
padding-bottom: 40px;
}
.report-head {
margin-bottom: 18px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--gray-line);
border-left: 4px solid var(--saffron);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.kicker {
font-size: 10.5px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 4px;
}
.report-head h1 {
font-size: 22px;
font-weight: 700;
color: var(--maroon-dark);
margin: 0 0 4px;
}
.report-sub {
font-size: 13px;
color: var(--gray-text);
}
/* ── 9. Section card + sub-header ──────────────────────────────────── */
.section {
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 6px;
margin-bottom: 22px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.section-header {
background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-dark) 100%);
color: #fff;
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
border-bottom: 2px solid var(--saffron);
display: flex;
align-items: center;
gap: 10px;
}
.section-header::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
background: var(--saffron);
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.3);
flex-shrink: 0;
}
.section-body {
padding: 0;
}
.sub-header {
background: var(--orange-50);
color: var(--maroon);
padding: 7px 16px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--orange-100);
border-top: 1px solid var(--orange-100);
}
.section .sub-header:first-child {
border-top: none;
}
.section-error .section-header {
background: linear-gradient(180deg, var(--red-bad) 0%, #991B1B 100%);
}
.section>p,
.section>.sub-header+p {
padding: 10px 18px;
margin: 0;
color: var(--gray-muted);
font-size: 12.5px;
background: #FAFAF8;
border-bottom: 1px solid var(--gray-soft-line);
}
/* ── 10. Tables + tags ─────────────────────────────────────────────── */
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
th {
background: var(--orange-50);
color: var(--maroon);
text-align: left;
padding: 8px 14px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
border-bottom: 2px solid var(--saffron-light);
white-space: nowrap;
}
td {
padding: 7px 14px;
border-bottom: 1px solid var(--gray-soft-line);
vertical-align: middle;
line-height: 1.5;
}
tr:last-child td {
border-bottom: none;
}
tr:hover td {
background: var(--orange-50);
}
tbody th {
background: transparent;
color: var(--gray-muted);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
border-bottom: 1px solid var(--gray-soft-line);
width: 220px;
white-space: nowrap;
}
.wrap-table th,
.wrap-table td {
white-space: normal !important;
word-wrap: break-word;
overflow-wrap: break-word;
}
.ss-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
margin-top: 4px;
background: var(--cream);
color: var(--maroon-dark);
border: 1px solid var(--saffron-light);
border-radius: 4px;
overflow: hidden;
}
.ss-table th {
background: var(--saffron-bg);
color: var(--maroon-dark);
padding: 7px 10px;
text-align: left;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
border-bottom: 2px solid var(--saffron-light);
}
.ss-table td {
padding: 6px 10px;
border-bottom: 1px solid var(--gray-soft-line);
vertical-align: top;
color: var(--maroon-dark);
}
.ss-table tr:nth-child(even) td {
background: #FFFBF3;
}
.ss-table tr:hover td {
background: var(--cream-warm);
}
/* ── Stacked-block fallback for narrow screens ────────────────────
Apply class `ss-table-stack` to any ss-table whose last column
carries long-form text (e.g. tarabalam result column). Below 800px,
each row collapses into a card-style block: column headers are
shown inline before each cell value via data-label attribute. */
@media (max-width: 800px) {
.ss-table-stack {
border: none;
background: transparent;
}
.ss-table-stack thead {
display: none;
}
.ss-table-stack tr,
.ss-table-stack tr:nth-child(even) td,
.ss-table-stack tr:hover td {
background: transparent;
}
.ss-table-stack tbody tr {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 6px;
margin: 0 0 12px;
padding: 10px 12px;
background: var(--cream);
border: 1px solid var(--saffron-light);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
text-align: center;
}
.ss-table-stack tbody tr:nth-child(even) {
background: #FFFBF3;
}
/* Standard cells: label on top, value below, centered. Each cell
fills one grid column → tara num + name share row 1, nature +
nakshatra share row 2 (when both cells fit). The result cell
(ss-cell-block) spans both columns. */
.ss-table-stack td {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 2px;
padding: 4px 6px;
border-bottom: 1px dashed var(--gray-soft-line);
}
.ss-table-stack td::before {
content: attr(data-label);
font-weight: 700;
color: var(--maroon);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Long-form result cell: spans both columns, label on its own line
in bold, value flowing as a left-aligned paragraph below. */
.ss-table-stack td.ss-cell-block {
grid-column: 1 / -1;
display: block;
text-align: left;
border-bottom: none;
padding-top: 6px;
}
/* The result cell carries its own Result: in the
HTML body, so hide the auto-prefix to avoid duplication. */
.ss-table-stack td.ss-cell-block::before {
content: none;
}
}
.ss-table strong {
color: var(--maroon);
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Reserve room below the table so the horizontal scrollbar doesn't
sit on top of the last row's bottom border. */
padding-bottom: 14px;
scrollbar-gutter: stable;
}
.table-scroll table {
min-width: 720px;
}
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.tag-good {
background: var(--green-bg);
color: var(--green-good);
}
.tag-bad {
background: var(--red-bg);
color: var(--red-bad);
}
.tag-info {
background: var(--blue-bg);
color: var(--blue-info);
}
.tag-saffron {
background: var(--saffron-light);
color: var(--maroon);
}
.tag-retro {
background: var(--saffron-light);
color: var(--maroon);
}
.tag-comb {
background: var(--red-bg);
color: var(--red-bad);
}
.tag-neutral {
background: var(--cream-warm);
color: var(--amber);
}
/* ── 11. Calendar card + month-nav + grid + festival pills ─────────── */
.calendar-card {
max-width: 1400px;
margin: 22px auto 30px;
background: #FFFAF0;
border: 2px solid #FBBF24;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
padding: 4px;
overflow: hidden;
}
#dpPHeaderId {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
background: var(--maroon);
color: #fff;
border-bottom: 3px solid var(--saffron);
border-radius: 16px 16px 0 0;
margin: 0 0 4px;
gap: 10px;
transform: translateZ(0);
backface-visibility: hidden;
}
#dpPHeaderId .dpPLeft {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
#dpPHeaderId .dpPTitle {
font-size: 18px;
font-weight: 900;
letter-spacing: 0.4px;
}
#dpPHeaderId .dpPMonths {
font-size: 13px;
font-weight: 600;
color: #FED7AA;
}
#dpPHeaderId .dpPRange {
font-size: 11px;
color: rgba(255, 255, 255, 0.78);
font-weight: 500;
}
#dpPHeaderId .dpPRight {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#dpPHeaderId .dpEra {
display: inline-flex;
align-items: baseline;
gap: 4px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
padding: 3px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
#dpPHeaderId .dpEra .lbl {
font-size: 9.5px;
opacity: 0.78;
text-transform: uppercase;
letter-spacing: 1px;
}
#dpPHeaderId .dpEra .val {
font-weight: 800;
color: #FEF3C7;
}
.month-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px 12px;
border-bottom: 2px dashed rgba(245, 130, 32, 0.35);
margin-bottom: 4px;
}
.month-title {
font-size: 24px;
font-weight: 900;
background: linear-gradient(135deg, var(--maroon) 0%, #C2410C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.3px;
}
.month-title .place {
color: var(--gray-muted);
font-weight: 500;
font-size: 13px;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
margin-left: 8px;
}
.nav-btn {
color: #fff;
text-decoration: none;
padding: 9px 20px;
font-size: 12px;
font-weight: 700;
background: linear-gradient(135deg, var(--maroon) 0%, #B91C1C 100%);
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 12px rgba(122, 31, 31, 0.28);
transition: all 0.18s ease;
letter-spacing: 0.4px;
}
.nav-btn:hover {
background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(122, 31, 31, 0.4);
}
.nav-form {
display: contents;
}
.nav-form .nav-btn {
border: none;
cursor: pointer;
font-family: inherit;
}
.dpMonthGrid {
display: grid;
grid-template-columns: 92px repeat(var(--week-count, 6), minmax(0, 1fr));
grid-template-rows: repeat(7, minmax(110px, auto));
gap: 10px;
padding: 14px;
background: #fff;
}
.dpHeadCell {
grid-column: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: 1.6px;
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.dpHeadCell.sun {
background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
}
.dpHeadCell.sat {
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
}
.dpDayCell {
background: #fff;
border-radius: 8px;
padding: 8px 10px 7px;
display: flex;
flex-direction: column;
border: 2px solid rgba(122, 31, 31, 0.14);
min-height: 110px;
position: relative;
}
.dpDayCell.clickable {
cursor: pointer;
}
.dpDayCell.clickable:hover {
border-color: var(--saffron);
}
.dpDayCell.shukla {
background: linear-gradient(160deg, #FFFDE7 0%, #FEF3C7 100%);
}
.dpDayCell.krishna {
background: linear-gradient(160deg, #FAF8FE 0%, #EDE9FE 100%);
}
.dpDayCell.sun-col.shukla {
background: linear-gradient(160deg, #FFF1EC 0%, #FECACA 100%);
}
.dpDayCell.sun-col.krishna {
background: linear-gradient(160deg, #FFF5F2 0%, #FED7D7 100%);
}
.dpDayCell.sat-col.shukla {
background: linear-gradient(160deg, #F5EFFD 0%, #DDD6FE 100%);
}
.dpDayCell.sat-col.krishna {
background: linear-gradient(160deg, #F5F0FC 0%, #DDD6FE 100%);
}
.dpDayCell.today {
background: linear-gradient(160deg, #D5DEFA 0%, #BCFFBD 100%) !important;
}
.dpDayCell.has-festival::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 28px;
background: radial-gradient(circle at top right, rgba(245, 130, 32, 0.35), transparent 70%);
pointer-events: none;
}
.dpDayHead {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.10);
margin: -8px -10px 5px;
padding: 5px 10px;
border-radius: 6px 6px 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.dpDayNum {
font-size: 20px;
font-weight: 800;
color: #1F2937;
line-height: 1;
}
.dpDayCell.sun-col .dpDayNum {
color: #B91C1C;
}
.dpDayCell.sat-col .dpDayNum {
color: #6D28D9;
}
.dpMoonPhase {
font-size: 18px;
line-height: 1;
margin-left: auto;
order: 2;
}
.dpAltDate {
flex-basis: 100%;
order: 3;
margin-top: 2px;
color: var(--maroon-dark);
font-weight: 600;
display: inline-flex;
align-items: baseline;
gap: 3px;
}
.dpAltDate .alt-num {
font-size: 14px;
line-height: 1.1;
}
.dpAltDate .alt-mon {
font-size: 9.5px;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.4px;
opacity: 0.85;
}
.dpRow {
font-size: 11px;
line-height: 1.35;
color: #4B5563;
margin-top: 3px;
}
.dpRow .val {
font-weight: 700;
color: var(--maroon-dark);
font-size: 12px;
display: block;
}
.dpRow .end {
color: #6B7280;
font-size: 10px;
display: block;
margin-top: 1px;
}
.dpSun {
margin-top: auto;
padding-top: 4px;
font-size: 10px;
color: var(--gray-muted);
font-weight: 500;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.dpFests {
margin-top: 5px;
display: flex;
flex-direction: column;
gap: 2px;
}
.dpFest {
font-size: 10px;
line-height: 1.35;
padding: 2px 8px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
background: #FED7AA;
color: #7C2D12;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
user-select: none;
}
.dpFest:hover {
filter: brightness(0.95);
}
.dpFest:focus {
outline: 2px solid var(--saffron);
outline-offset: 1px;
}
.dpFest.cat-Diwali {
background: #FEF3C7;
color: #92400E;
}
.dpFest.cat-Durga {
background: #FCA5A5;
color: #7F1D1D;
}
.dpFest.cat-Sankranti {
background: #FED7AA;
color: #7C2D12;
}
.dpFest.cat-Ekadashi {
background: #DBEAFE;
color: #1E3A8A;
}
.dpFest.cat-Pradosh {
background: #DDD6FE;
color: #4C1D95;
}
.dpFest.cat-Sankashti {
background: #FEE2E2;
color: #991B1B;
}
.dpFest.cat-Goddess,
.dpFest.cat-GoddessPuja {
background: #FBCFE8;
color: #9D174D;
}
.dpFest.cat-Vishnu,
.dpFest.cat-VishnuAvatar {
background: #BBF7D0;
color: #166534;
}
.dpFest.cat-Krishna {
background: #BFDBFE;
color: #1E3A8A;
}
.dpFest.cat-Shiva {
background: #DDD6FE;
color: #4C1D95;
}
.dpFest.cat-Buddha {
background: #FED7AA;
color: #92400E;
}
.dpFest.cat-Devata {
background: #FBCFE8;
color: #831843;
}
.dpFest.cat-Surya {
background: #FEF3C7;
color: #B45309;
}
.dpFest.cat-Vrat {
background: #DCFCE7;
color: #166534;
}
.dpFest.cat-Pitri {
background: #E5E7EB;
color: #374151;
}
.dpFest.cat-Auspicious,
.dpFest.cat-AuspiciousDay {
background: #DCFCE7;
color: #064E3B;
}
.dpFest.cat-NewYear {
background: #FFE4D1;
color: #7C2D12;
}
.dpFest.cat-Guru {
background: #DDD6FE;
color: #4C1D95;
}
.dpFest.cat-Festival {
background: #FFE4D1;
color: #7C2D12;
}
.dpFest.cat-Amavasya {
background: #E5E7EB;
color: #1F2937;
}
.dpFest.cat-Purnima {
background: #FEF3C7;
color: #78350F;
}
/* ── 12. Calendar legend + footer-links ────────────────────────────── */
.legend {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
padding: 0px 28px;
font-size: 12px;
margin: 0px auto 8px;
max-width: 1380px;
}
.legend .pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
font-weight: 600;
}
.swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
}
.swatch-shukla {
background: #FEF3C7;
}
.swatch-krishna {
background: #EDE9FE;
}
.swatch-today {
background: linear-gradient(135deg, #D5DEFA, #BCFFBD);
}
.footer-links {
text-align: center;
color: var(--gray-text);
margin: 28px auto 110px;
padding: 14px 22px 18px;
max-width: 1380px;
font-size: 12px;
line-height: 2;
border-top: 1px solid var(--gray-soft-line);
}
.footer-links a {
color: var(--maroon-dark);
text-decoration: none;
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
background: rgba(122, 31, 31, 0.06);
border: 1px solid rgba(122, 31, 31, 0.22);
margin: 4px 3px;
display: inline-block;
transition: background .15s, color .15s, border-color .15s;
}
.footer-links a:hover {
background: var(--saffron);
color: #fff;
border-color: var(--saffron);
}
/* ── 13. panchang.php helpers ──────────────────────────────────────── */
.error-box {
margin: 22px;
padding: 14px 18px;
background: var(--red-bg);
border-left: 4px solid var(--red-bad);
color: var(--red-bad);
border-radius: 4px;
font-weight: 600;
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.two-col-stretch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
align-items: start;
margin-bottom: 22px;
}
.two-col-stretch .col-stack {
display: flex;
flex-direction: column;
gap: 22px;
}
.two-col-stretch .col-stack .section,
.two-col-stretch>.section {
margin-bottom: 0;
}
.yoga-table th {
font-size: 11px;
}
.yoga-table td {
font-size: 12.5px;
}
.label.tall {
vertical-align: top;
padding-top: 9px;
}
/* planet-table inherits the ss-table look - light cream + deep maroon. */
.planet-table {
width: 100%;
border-collapse: collapse;
font-size: 12.8px;
background: var(--cream);
color: var(--maroon-dark);
border: 1px solid var(--saffron-light);
border-radius: 4px;
overflow: hidden;
}
.planet-table th {
background: var(--saffron-bg);
color: var(--maroon-dark);
padding: 7px 10px;
text-align: left;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
border-bottom: 2px solid var(--saffron-light);
}
.planet-table td {
font-size: 12.8px;
padding: 6px 10px;
border-bottom: 1px solid var(--gray-soft-line);
color: var(--maroon-dark);
}
.planet-table tr:nth-child(even) td {
background: #FFFBF3;
}
.planet-table tr:hover td {
background: var(--cream-warm);
}
.planet-table strong {
color: var(--maroon);
}
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
padding: 18px;
}
.chart-card {
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 6px;
overflow: hidden;
}
.chart-card-head {
background: var(--saffron);
color: #fff;
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid var(--orange-100);
}
.chart-card-body {
padding: 4px;
text-align: center;
}
.chandra-table td {
text-align: center;
font-size: 12.5px;
}
.chandra-table td.rashi {
text-align: left;
font-weight: 600;
}
.chandra-strong {
background: var(--green-bg);
color: var(--green-good);
}
.chandra-weak {
background: var(--red-bg);
color: var(--red-bad);
}
/* ── 14. Home / index.php - hero ───────────────────────────────────── */
.home-hero {
max-width: 1200px;
margin: 28px auto 22px;
padding: 0 22px;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 26px;
align-items: stretch;
}
.hero-inner {
display: contents;
}
.hero-headline {
background: linear-gradient(135deg, #FFFAF0 0%, #FEF3C7 100%);
border: 2px solid #FBBF24;
border-radius: 12px;
padding: 22px 26px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
position: relative;
overflow: hidden;
}
.hero-headline::before {
content: 'ॐ';
position: absolute;
bottom: 0;
right: 0;
font-size: 180px;
line-height: 1;
color: rgba(245, 130, 32, 0.07);
pointer-events: none;
}
.hero-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--maroon);
margin-bottom: 8px;
}
.hero-title {
margin: 0;
font-size: 32px;
font-weight: 800;
color: var(--maroon-dark);
line-height: 1.12;
}
.hero-current {
margin-top: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: start;
gap: 6px 14px;
font-size: 13.5px;
color: var(--gray-text);
line-height: 1.5;
}
.hero-cur-item {
display: inline;
}
.hero-cur-lbl {
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.4px;
font-size: 11.5px;
margin-right: 4px;
}
.hero-blessing {
font-family: 'Noto Sans Devanagari', 'Mangal', serif;
font-size: 18px;
font-weight: 600;
color: var(--maroon);
line-height: 1.4;
padding: 10px 0;
border-top: 1px dashed rgba(122, 31, 31, 0.18);
border-bottom: 1px dashed rgba(122, 31, 31, 0.18);
}
.hero-blessing-trans {
display: block;
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
font-style: italic;
color: var(--gray-muted);
letter-spacing: 0.3px;
margin-top: 4px;
}
.hero-bengali {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
font-size: 14px;
color: var(--gray-text);
}
.hero-bengali .bn-day {
font-size: 24px;
font-weight: 800;
color: var(--maroon);
}
.hero-bengali .bn-month {
font-weight: 700;
}
.hero-bengali .bn-year {
color: var(--gray-muted);
}
.hero-bengali .bn-bn {
font-family: 'Noto Sans Bengali', 'Mangal', serif;
margin-left: auto;
color: var(--maroon-dark);
font-weight: 700;
}
.hero-snapshot {
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 12px;
padding: 18px 20px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
gap: 8px;
}
.snap-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px dashed rgba(122, 31, 31, 0.10);
font-size: 13.5px;
}
.snap-row:last-of-type {
border-bottom: none;
}
.snap-lbl {
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--maroon);
}
.snap-val {
font-weight: 700;
color: var(--gray-text);
text-align: right;
}
.snap-cta-form {
margin-top: 6px;
}
.snap-cta {
width: 100%;
padding: 16px;
background: var(--saffron);
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(245, 130, 32, 0.28);
}
.snap-cta:hover {
filter: brightness(0.95);
}
/* ── 15. Home - quick-access card grid + feat-cards ────────────────── */
.home-cards {
max-width: 1200px;
margin: 0 auto 40px;
/* padding: 0 22px; */
}
.home-cards-heading {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--maroon);
margin: 8px 0 14px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.card-grid.card-grid-pair {
grid-template-columns: repeat(2, 1fr);
}
.card-form {
display: contents;
}
.card-form .feat-card {
width: 100%;
text-align: left;
}
.feat-card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 14px;
row-gap: 4px;
background: linear-gradient(135deg, var(--saffron-bg) 0%, #ffffff 80%);
border: 1px solid rgba(122, 31, 31, 0.18);
border-radius: 14px;
padding: 14px 16px;
text-decoration: none;
color: inherit;
cursor: pointer;
font: inherit;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feat-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(122, 31, 31, 0.18);
border-color: var(--maroon);
text-decoration: none;
}
.feat-icon {
grid-row: 1 / span 2;
align-self: center;
width: 88px;
height: 88px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
line-height: 1;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), inset 0 0 0 2px rgba(122, 31, 31, 0.12);
}
.feat-name {
grid-column: 2;
font-size: 18px;
font-weight: 800;
color: var(--maroon-dark);
letter-spacing: 0.2px;
}
.feat-desc {
grid-column: 2;
font-size: 12.5px;
line-height: 1.5;
color: var(--gray-muted);
}
button.feat-card {
text-align: left;
font: inherit;
color: inherit;
}
/* ── 16. Home - featured Personal Dashboard wide card ──────────────── */
.home-feature {
max-width: 1200px;
margin: 4px auto 28px;
padding: 0 22px;
}
.feature-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
width: 100%;
padding: 22px 28px;
background: linear-gradient(135deg, var(--maroon) 0%, #C2410C 100%);
color: #fff;
border: none;
border-radius: 14px;
box-shadow: 0 8px 22px rgba(122, 31, 31, 0.30);
cursor: pointer;
font: inherit;
text-align: left;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(122, 31, 31, 0.40);
filter: brightness(1.05);
}
.feature-icon {
font-size: 56px;
line-height: 1;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.16);
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.28);
flex-shrink: 0;
box-sizing: border-box;
}
.feature-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.feature-title {
font-size: 22px;
font-weight: 800;
letter-spacing: 0.3px;
line-height: 1.2;
}
.feature-desc {
font-size: 13px;
line-height: 1.55;
opacity: 0.92;
}
.feature-cta {
background: #fff;
color: var(--maroon-dark);
padding: 11px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
/* ── 17. Home - "need birth details" redirect banner ───────────────── */
.need-birth-banner {
max-width: 1200px;
margin: 18px auto 0;
padding: 14px 22px;
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border: 1.5px solid var(--saffron);
border-left: 5px solid var(--maroon);
border-radius: 10px;
font-size: 14px;
color: var(--maroon-dark);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
box-shadow: 0 4px 12px rgba(122, 31, 31, 0.10);
}
.need-birth-banner strong {
font-size: 15px;
font-weight: 800;
}
.need-birth-cta {
margin-left: auto;
padding: 8px 16px;
background: var(--maroon);
color: #fff;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(122, 31, 31, 0.25);
transition: filter 0.15s ease;
}
.need-birth-cta:hover {
filter: brightness(1.08);
}
/* ── 18. Personal dashboard + sub-page chrome ──────────────────────── */
.personal-main {
max-width: 1200px;
margin: 0 auto;
padding: 10px 22px;
}
.dashboard-greeting {
max-width: 1200px;
margin: 24px auto 18px;
padding: 18px 24px;
background: linear-gradient(135deg, #FFFAF0 0%, #FEF3C7 100%);
border: 2px solid #FBBF24;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
display: flex;
flex-direction: row;
justify-content: space-between;
}
.dashboard-greeting .greet-name {
font-size: 22px;
font-weight: 800;
color: var(--maroon-dark);
margin-bottom: 6px;
}
.dashboard-greeting .greet-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
font-size: 12.5px;
color: var(--gray-text);
}
.dashboard-greeting .greet-meta strong {
color: var(--maroon);
font-weight: 700;
}
.personal-page {
max-width: 1000px;
margin: 28px auto;
padding: 24px;
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.personal-h2 {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 14px 20px 6px;
font-size: 18px;
font-weight: 800;
letter-spacing: .04em;
color: #7C2D12;
text-transform: uppercase;
background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
border: 1px solid #FED7AA;
border-bottom: 0;
border-left: 4px solid #B91C1C;
border-radius: 14px 14px 0 0;
width: 100%;
box-sizing: border-box;
}
.personal-h2::before {
content: '✷';
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #FFEDD5;
color: #B91C1C;
font-size: 14px;
border: 1px solid #FED7AA;
}
.personal-lede {
margin: 0 0 18px;
padding: 4px 20px 14px;
font-size: 13px;
line-height: 1.55;
color: #9A3412;
background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
border: 1px solid #FED7AA;
border-top: 0;
border-left: 4px solid #B91C1C;
border-radius: 0 0 14px 14px;
box-shadow: 0 2px 8px rgba(124, 45, 18, .08);
}
.personal-stub {
background: var(--saffron-bg);
border-left: 3px solid var(--saffron);
padding: 14px 18px;
border-radius: 6px;
font-size: 13.5px;
line-height: 1.6;
}
.personal-stub ul {
margin: 8px 0 12px 20px;
padding: 0;
}
.personal-stub li {
margin: 2px 0;
}
.dashboard-return {
max-width: 980px;
margin: 18px auto;
padding: 0 24px;
text-align: left;
}
.dashboard-return-form {
display: inline-block;
}
.dashboard-return-btn {
background: var(--maroon);
color: #fff;
border: none;
padding: 9px 20px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.4px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(122, 31, 31, 0.25);
}
.dashboard-return-btn:hover {
background: var(--maroon-dark);
box-shadow: 0 6px 16px rgba(122, 31, 31, 0.4);
}
/* ── 19. Dashboard group headings ──────────────────────────────────── */
.home-cards-heading {
display: flex;
align-items: center;
gap: 12px;
margin-top: 32px;
padding: 12px 18px 12px 16px;
background: linear-gradient(90deg, #FEF3C7 0%, #FFFAF0 60%, #FFFFFF 100%);
border-left: 5px solid var(--maroon);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(122, 31, 31, 0.08);
color: var(--maroon-dark);
font-size: 15px;
}
.home-cards-heading:first-of-type {
margin-top: 12px;
}
.home-cards-heading .grp-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--saffron);
box-shadow: 0 1px 3px rgba(245, 130, 32, 0.20);
font-size: 17px;
line-height: 1;
flex-shrink: 0;
}
.page-banner {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
margin: 32px 0 15px 0;
padding: 12px 18px 12px 16px;
background: linear-gradient(90deg, #FEF3C7 0%, #FFFAF0 60%, #FFFFFF 100%);
border-left: 5px solid var(--maroon);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(122, 31, 31, 0.08);
color: var(--maroon-dark);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
justify-content: space-between;
}
.page-banner:first-of-type {
margin-top: 12px;
}
.page-banner .grp-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--saffron);
box-shadow: 0 1px 3px rgba(245, 130, 32, 0.20);
font-size: 17px;
line-height: 1;
flex-shrink: 0;
}
/* ── 20. Dosha / forecast blocks ───────────────────────────────────── */
.dosha-summary {
margin: 16px 0;
padding: 14px 18px;
border-radius: 10px;
border: 1px solid var(--gray-line);
}
.dosha-summary.dosha-active {
background: #FFF5F5;
border-color: #FCA5A5;
}
.dosha-summary.dosha-clear {
background: #F0FDF4;
border-color: #86EFAC;
}
.dosha-status {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.dosha-badge {
padding: 4px 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dosha-badge-active {
background: var(--red-bad);
color: #fff;
}
.dosha-badge-partial {
background: var(--saffron);
color: #fff;
}
.dosha-badge-clear {
background: var(--green-good);
color: #fff;
}
.dosha-severity {
padding: 3px 10px;
border-radius: 999px;
background: rgba(122, 31, 31, 0.08);
font-size: 11px;
font-weight: 700;
color: var(--maroon-dark);
}
.dosha-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
font-size: 12.5px;
color: var(--gray-text);
}
.dosha-meta strong {
color: var(--maroon);
font-weight: 700;
}
.dosha-block {
margin: 14px 0;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--gray-line);
border-left: 3px solid var(--saffron);
border-radius: 6px;
}
.dosha-block-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--maroon);
margin-bottom: 8px;
}
.dosha-list {
margin: 0 0 0 20px;
padding: 0;
font-size: 13px;
line-height: 1.55;
}
.dosha-list li {
margin: 3px 0;
}
/* ── 21. Chart-style toggle + chart-meaning ────────────────────────── */
.chart-style-toggle {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 16px;
background: var(--saffron-bg);
border: 1px solid var(--orange-100);
border-radius: 8px;
margin: 14px 0 22px;
}
.chart-style-toggle .chart-style-lbl {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--maroon);
}
.chart-style-toggle .style-form {
display: inline-flex;
}
.chart-style-toggle .style-btn {
background: #fff;
color: var(--maroon-dark);
border: 1px solid rgba(122, 31, 31, 0.22);
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.chart-style-toggle .style-btn:hover {
background: rgba(122, 31, 31, 0.06);
}
.chart-style-toggle .style-btn.active {
background: var(--maroon);
color: #fff;
border-color: var(--maroon);
}
.chart-meaning {
padding: 8px 12px;
font-size: 11px;
color: var(--gray-muted);
text-align: center;
border-top: 1px solid var(--gray-soft-line);
line-height: 1.4;
}
/* ── 22. Chart-picker + prediction card ────────────────────────────── */
.chart-picker-form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin: 10px 0 18px;
}
.chart-picker-form label {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--maroon);
}
.chart-picker-form select {
padding: 8px 12px;
min-width: 280px;
border: 1px solid var(--gray-line);
border-radius: 6px;
background: #fff;
font-size: 13px;
font-family: inherit;
color: var(--gray-text);
font-weight: 600;
}
.chart-picker-form select:focus {
outline: 2px solid var(--saffron);
}
.pred-card {
background: #fff;
border: 1px solid var(--gray-line);
border-left: 4px solid var(--saffron);
border-radius: 10px;
margin: 14px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pred-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: linear-gradient(180deg, #FFFAF0 0%, #FEF3C7 100%);
border-bottom: 1px solid rgba(245, 130, 32, 0.25);
border-radius: 10px 10px 0 0;
gap: 10px;
}
.pred-card-title {
font-size: 14px;
font-weight: 800;
color: var(--maroon-dark);
}
.pred-band {
padding: 3px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.5px;
}
.pred-band-excellent,
.pred-band-very-good,
.pred-band-strong {
background: #DCFCE7;
color: #166534;
}
.pred-band-good,
.pred-band-favourable,
.pred-band-favorable {
background: #DCFCE7;
color: #166534;
}
.pred-band-moderate,
.pred-band-mixed,
.pred-band-neutral {
background: #FEF3C7;
color: #92400E;
}
.pred-band-weak,
.pred-band-challenging {
background: #FEE2E2;
color: #991B1B;
}
.pred-card-body {
padding: 14px 18px;
font-size: 13px;
line-height: 1.6;
}
.pred-meta {
font-size: 11.5px;
color: var(--gray-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.pred-section {
margin: 12px 0;
}
.pred-section-title {
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--maroon);
padding-bottom: 4px;
margin-bottom: 6px;
border-bottom: 1px solid rgba(122, 31, 31, 0.10);
}
.pred-text {
font-size: 13px;
line-height: 1.65;
color: var(--gray-text);
}
/* ── 23. Per-planet rows + dignity tags ────────────────────────────── */
.pred-planet-row {
background: #FAFAF8;
border: 1px solid var(--gray-soft-line);
border-left: 3px solid var(--saffron);
border-radius: 6px;
padding: 10px 14px;
margin: 8px 0;
}
.pred-planet-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.pred-planet-name {
font-size: 13.5px;
font-weight: 800;
color: var(--maroon-dark);
letter-spacing: 0.2px;
}
.pred-planet-text {
font-size: 12.8px;
line-height: 1.6;
color: var(--gray-text);
}
/* ── 24. Forecast cards (today/tomorrow/weekly/monthly) ────────────── */
.forecast-card {
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 10px;
margin: 14px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
.forecast-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-dark) 100%);
color: #fff;
gap: 10px;
}
.forecast-card-title {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.4px;
}
.forecast-card-meta {
font-size: 11.5px;
opacity: 0.85;
margin-top: 2px;
}
.forecast-card-body {
padding: 16px 20px;
font-size: 13px;
line-height: 1.6;
color: var(--gray-text);
}
.gem-table-wrap {
position: relative;
overflow: hidden;
}
.gem-table-wrap .gem-watermark {
position: absolute;
right: 14px;
bottom: 20px;
font-size: 120px;
line-height: 1;
opacity: 0.35;
pointer-events: none;
user-select: none;
z-index: 2;
}
.forecast-band {
padding: 4px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.5px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.forecast-band-excellent,
.forecast-band-very-good,
.forecast-band-strong,
.forecast-band-good,
.forecast-band-favourable,
.forecast-band-favorable,
.forecast-band-positive,
.forecast-band-beneficial {
background: #DCFCE7;
color: #166534;
}
.forecast-band-moderate,
.forecast-band-mixed,
.forecast-band-neutral,
.forecast-band-fair {
background: #FEF3C7;
color: #92400E;
}
.forecast-band-challenging,
.forecast-band-difficult,
.forecast-band-weak,
.forecast-band-poor {
background: #FEE2E2;
color: #991B1B;
}
.forecast-summary {
display: block;
background: var(--saffron-bg);
border-left: 3px solid var(--saffron);
padding: 12px 16px;
border-radius: 0 6px 6px 0;
font-size: 13.5px;
line-height: 1.65;
margin: 0 0 16px;
}
.forecast-theme {
background: linear-gradient(160deg, #FEF3C7 0%, #FDE68A 100%);
border-left: 3px solid #B45309;
padding: 12px 16px;
border-radius: 0 6px 6px 0;
margin: 0 0 16px;
}
.forecast-theme-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #7C2D12;
margin-bottom: 4px;
}
.forecast-theme-text {
font-size: 13px;
line-height: 1.6;
color: #44403C;
}
.forecast-arcs,
.forecast-transits {
margin: 0 0 16px;
}
.forecast-arcs-label,
.forecast-domain-section-label {
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--maroon);
padding-bottom: 4px;
border-bottom: 1px solid rgba(122, 31, 31, 0.10);
margin: 12px 0 8px;
}
.forecast-arc-row {
background: #FAFAF8;
border: 1px solid var(--gray-soft-line);
border-left: 3px solid var(--saffron);
border-radius: 6px;
padding: 10px 14px;
margin: 6px 0;
}
.forecast-arc-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.forecast-arc-name {
font-size: 12.5px;
font-weight: 700;
color: var(--maroon-dark);
}
.forecast-arc-text {
font-size: 12.5px;
line-height: 1.55;
color: var(--gray-text);
}
.forecast-domain {
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 6px;
padding: 10px 14px;
margin: 6px 0;
}
.forecast-domain-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.forecast-domain-name {
font-size: 12.5px;
font-weight: 700;
color: var(--maroon);
}
.forecast-domain-text {
font-size: 12.8px;
line-height: 1.6;
color: var(--gray-text);
}
.score-ring {
--p: 0;
--c: #10b981;
--sz: 78px;
--th: 8px;
width: var(--sz);
height: var(--sz);
position: relative;
flex: 0 0 auto;
background: conic-gradient(var(--c) calc(var(--p) * 1%), #e5e7eb 0);
border-radius: 50%;
display: grid;
place-items: center;
}
.score-ring::before {
content: "";
position: absolute;
inset: var(--th);
background: #fff;
border-radius: 50%;
}
.score-ring>span {
position: relative;
font-weight: 700;
font-size: 18px;
color: #111827;
}
.score-ring-good {
--c: #10b981;
}
.score-ring-moderate {
--c: #f59e0b;
}
.score-ring-challenging {
--c: #ef4444;
}
.forecast-card-head {
display: flex;
align-items: center;
gap: 16px;
}
.forecast-card-head>div:first-child {
flex: 1;
}
.score-breakdown {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-bottom: 16px;
padding: 14px;
background: #f9fafb;
border-radius: 10px;
}
/* When the screen can't hold all six progress circles in one row,
collapse to exactly 3 per row → 2 rows × 3 columns. */
@media (max-width: 640px) {
.score-breakdown {
grid-template-columns: repeat(3, 1fr);
}
}
.score-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.score-cell-label {
font-size: 11px;
font-weight: 600;
color: #374151;
text-transform: uppercase;
letter-spacing: .04em;
}
.score-ring-sm {
--p: 0;
--c: #10b981;
--sz: 60px;
--th: 6px;
width: var(--sz);
height: var(--sz);
position: relative;
background: conic-gradient(var(--c) calc(var(--p) * 1%), #e5e7eb 0);
border-radius: 50%;
display: grid;
place-items: center;
}
.score-ring-sm::before {
content: "";
position: absolute;
inset: var(--th);
background: #fff;
border-radius: 50%;
}
.score-ring-sm>span {
position: relative;
font-weight: 700;
font-size: 14px;
color: #111827;
}
.score-ring-sm.score-ring-good {
--c: #10b981;
}
.score-ring-sm.score-ring-moderate {
--c: #f59e0b;
}
.score-ring-sm.score-ring-challenging {
--c: #ef4444;
}
.forecast-domain {
position: relative;
overflow: hidden;
}
.forecast-domain::before {
content: attr(data-emoji);
position: absolute;
right: 10px;
bottom: 10px;
font-size: 160px;
line-height: 1;
opacity: 0.2;
pointer-events: none;
user-select: none;
transform: rotate(-12deg);
}
.forecast-domain>* {
position: relative;
z-index: 1;
}
/* ── 25. Sade Sati remedies + life-domain themes ───────────────────── */
.remedy-group+.remedy-group {
margin-top: 12px;
}
.remedy-group-title {
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--maroon-dark);
padding: 4px 0;
margin-bottom: 4px;
border-bottom: 1px dashed rgba(122, 31, 31, 0.18);
}
.life-theme {
margin: 10px 0;
padding: 8px 12px;
background: #FAFAF8;
border-left: 3px solid var(--saffron);
border-radius: 0 6px 6px 0;
}
.life-theme+.life-theme {
margin-top: 12px;
}
.life-theme-label {
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--maroon-dark);
margin-bottom: 4px;
}
.life-theme-text {
font-size: 13px;
line-height: 1.65;
color: var(--gray-text);
}
/* ── 26. Sarva-Ashtakavarga colour bands ───────────────────────────── */
.av-table {
width: 100%;
border-collapse: collapse;
}
.av-table td {
text-align: center;
font-weight: 700;
font-size: 13px;
}
.av-vhigh {
background: #BBF7D0;
color: #14532D;
}
.av-high {
background: #DCFCE7;
color: #166534;
}
.av-mid {
background: #FEF3C7;
color: #92400E;
}
.av-low {
background: #FEE2E2;
color: #991B1B;
}
/* ── 27. Planet jump-nav ───────────────────────────────────────────── */
.planet-jump {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
padding: 10px 14px;
background: var(--saffron-bg);
border: 1px solid var(--orange-100);
border-radius: 8px;
margin: 4px 0 18px;
}
.planet-jump-lbl {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--maroon);
margin-right: 4px;
}
.planet-jump-link {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: #fff;
color: var(--maroon-dark);
border: 1px solid rgba(122, 31, 31, 0.22);
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.planet-jump-link:hover {
background: var(--maroon);
color: #fff;
border-color: var(--maroon);
}
/* ── 28. Match-horoscope two-side layout ───────────────────────────── */
.match-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 14px 0;
}
.match-side {
background: var(--saffron-bg);
border: 1px solid var(--orange-100);
border-radius: 8px;
overflow: hidden;
}
.match-side-head {
padding: 10px 14px;
background: var(--maroon);
color: #fff;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.3px;
}
.match-side-body {
padding: 10px 14px;
font-size: 12.5px;
line-height: 1.5;
color: var(--gray-text);
}
.match-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 14px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 8px;
margin-top: 8px;
}
.match-form>div {
display: flex;
flex-direction: column;
gap: 4px;
}
.match-form label {
font-size: 11px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.match-form input,
.match-form select {
padding: 8px 10px;
border: 1px solid var(--gray-line);
border-radius: 4px;
font-size: 13px;
font-family: inherit;
}
/* ── 29. Dashboard greeting badges ─────────────────────────────────── */
.dashboard-greeting .greet-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.dashboard-greeting .greet-badge {
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(122, 31, 31, 0.10);
border: 1px solid rgba(122, 31, 31, 0.22);
color: var(--maroon-dark);
font-size: 12px;
font-weight: 600;
}
.dashboard-greeting .greet-badge strong {
color: var(--maroon);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
font-size: 10px;
}
/* ── 30. Vimshottari dasha drill-down tree ─────────────────────────── */
.dasha-tree {
background: #FAFAF8;
border: 1px solid var(--gray-line);
border-left: 4px solid var(--saffron);
border-radius: 6px;
margin: 6px 0;
overflow: hidden;
}
.dasha-tree.md-active {
border-left-color: var(--green-good);
background: #F0FDF4;
}
.dasha-tree.md-past {
border-left-color: var(--gray-muted);
background: #F9FAFB;
opacity: 0.85;
}
.dasha-tree.md-upcoming {
border-left-color: var(--saffron);
}
.dasha-tree summary {
cursor: pointer;
list-style: none;
padding: 9px 14px;
font-family: inherit;
user-select: none;
}
.dasha-tree summary::-webkit-details-marker {
display: none;
}
.dasha-tree summary::before {
content: '▶';
display: inline-block;
width: 14px;
color: var(--maroon);
transition: transform 0.15s ease;
margin-right: 4px;
font-size: 9px;
}
.dasha-tree[open]>summary::before {
transform: rotate(90deg);
}
.dasha-tree summary:hover {
background: rgba(245, 130, 32, 0.06);
}
.dasha-summary-row {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
width: calc(100% - 22px);
}
.dasha-lord {
font-size: 13px;
font-weight: 800;
color: var(--maroon-dark);
min-width: 140px;
}
.dasha-period {
font-size: 12.5px;
color: var(--gray-text);
font-variant-numeric: tabular-nums;
flex: 1;
}
.dasha-children {
padding: 0 8px 8px 24px;
background: rgba(245, 130, 32, 0.03);
border-top: 1px dashed rgba(122, 31, 31, 0.10);
}
.dasha-tree-2 {
margin-top: 4px;
border-left-width: 3px;
}
.dasha-tree-2.ad-active {
border-left-color: var(--green-good);
background: #F0FDF4;
}
.dasha-tree-3 {
margin-top: 3px;
border-left-width: 2px;
background: #FFFCF5;
}
.dasha-tree-3.pd-active {
border-left-color: var(--green-good);
}
.dasha-leaf {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding: 6px 10px;
margin: 2px 0;
background: #fff;
border: 1px solid var(--gray-soft-line);
border-left: 2px solid var(--saffron);
border-radius: 4px;
font-size: 12px;
}
.dasha-leaf.sd-active {
border-left-color: var(--green-good);
background: #F0FDF4;
}
.dasha-leaf.sd-past {
opacity: 0.7;
}
.dasha-leaf .dasha-lord {
font-size: 12px;
min-width: 160px;
}
.dasha-leaf .dasha-period {
font-size: 11.5px;
}
/* ── 31. Zodiac chooser + horoscope page ───────────────────────────── */
.zodiac-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
max-width: 1200px;
margin: 0 auto;
padding: 0 14px;
}
.zodiac-card {
--zod-bg: #fce7e7;
background: linear-gradient(135deg, var(--zod-bg) 0%, #ffffff 80%);
border: 1px solid rgba(122, 31, 31, 0.18);
border-radius: 14px;
padding: 14px 16px;
cursor: pointer;
font: inherit;
color: var(--gray-text);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: 14px;
position: relative;
overflow: hidden;
}
.zodiac-card .zod-watermark {
position: absolute;
right: 10px;
bottom: 6px;
font-size: 56px;
line-height: 1;
color: var(--maroon-dark);
opacity: 0.18;
pointer-events: none;
user-select: none;
}
.zodiac-card>.zod-emoji,
.zodiac-card>.zod-body {
position: relative;
z-index: 1;
}
.zodiac-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(122, 31, 31, 0.18);
border-color: var(--maroon);
}
.zodiac-card .zod-emoji {
flex: 0 0 auto;
width: 88px;
height: 88px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
line-height: 1;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), inset 0 0 0 2px rgba(122, 31, 31, 0.12);
}
.zodiac-card .zod-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.zodiac-card .zod-en {
font-size: 18px;
font-weight: 800;
color: var(--maroon-dark);
letter-spacing: 0.2px;
}
.zodiac-card .zod-sa {
font-size: 12.5px;
font-weight: 600;
opacity: 0.78;
}
.zodiac-card .zod-lord {
font-size: 11px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.6px;
opacity: 0.9;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(122, 31, 31, 0.12);
}
.zodiac-banner {
--zod-bg: #fce7e7;
background: linear-gradient(135deg, var(--zod-bg) 0%, #ffffff 85%);
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
border-radius: 12px;
margin: 14px auto;
max-width: 980px;
border: 1px solid rgba(122, 31, 31, 0.20);
position: relative;
overflow: hidden;
}
.zodiac-banner .zod-watermark {
position: absolute;
right: 14px;
bottom: 10px;
font-size: 64px;
line-height: 1;
color: var(--maroon-dark);
opacity: 0.18;
pointer-events: none;
user-select: none;
}
.zodiac-banner>.zod-banner-sym,
.zodiac-banner>.zod-banner-text {
position: relative;
z-index: 1;
}
.zod-banner-sym {
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1;
color: var(--maroon-dark);
}
.zod-banner-emoji {
font-size: 54px;
}
.zod-banner-name {
font-size: 26px;
font-weight: 800;
color: var(--maroon-dark);
}
.zod-banner-period {
font-size: 13px;
font-weight: 600;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.6px;
margin-top: 2px;
}
.zodiac-period-tabs {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 6px;
margin: 6px auto 14px;
max-width: 980px;
padding: 0 10px;
}
.zodiac-tab-form {
display: inline-flex;
flex: 1 1 0;
min-width: 0;
}
.zodiac-tab {
width: 100%;
background: linear-gradient(135deg, var(--amber-bg) 0%, var(--saffron-light) 100%);
color: var(--maroon-dark);
border: 1px solid;
padding: clamp(6px, 1.4vw, 8px) clamp(8px, 2.4vw, 16px);
border-radius: 999px;
font-size: clamp(10.5px, 2.4vw, 13px);
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
text-align: center;
}
.zodiac-tab:hover {
background: rgba(122, 31, 31, 0.06);
}
.zodiac-tab.active {
background: var(--maroon);
color: #fff;
border-color: var(--maroon);
}
/* ── 32. Sidenav (legacy) ──────────────────────────────────────────── */
.sidenav {
display: none;
}
/* ── 33. Responsive media queries (grouped at the end) ─────────────── */
@media (max-width: 1100px) {
.input-panel form {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 980px) {
.input-panel form,
.input-panel .form-grid {
grid-template-columns: 1fr 1fr;
}
.input-panel .field-full {
grid-column: 1 / -1;
}
}
/* Below 600px - distribute the available width equally among fields, no
horizontal scroll. The minmax(0,1fr) lets inputs shrink below their
browser-default min-width (date/time pickers); min-width:0 on inputs
themselves seals the deal so no field forces overflow. */
@media (max-width: 600px) {
header {
padding: 12px;
}
header h1 {
font-size: 25px;
font-weight: 600;
}
.brand {
gap: 10px;
}
.om-glyph {
width: 50px;
height: 50px;
font-size: 25px;
}
.input-panel {
padding: 8px;
}
.input-panel form,
.input-panel .form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.input-panel .field {
min-width: 0;
}
.input-panel .field-full {
grid-column: 1 / -1;
}
.input-panel input,
.input-panel select {
min-width: 0;
width: 100%;
box-sizing: border-box;
font-size: 12.5px;
padding: 6px 7px;
}
.input-panel button {
width: 100%;
padding: 8px 12px;
}
}
@media (max-width: 900px) {
.personal-main {
padding: 10px 2px;
}
.dashboard-greeting {
flex-direction: column;
}
.two-col,
.two-col-stretch {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
.home-hero {
grid-template-columns: 1fr;
gap: 18px;
}
.hero-title {
font-size: 22px;
}
.feature-card {
grid-template-columns: 1fr;
text-align: center;
padding: 18px;
}
.feature-icon {
margin: 0 auto;
}
.feature-cta {
width: 100%;
padding: 10px;
}
#dpPHeaderId {
padding: 10px 12px;
border-radius: 0;
margin: 0;
gap: 6px;
}
#dpPHeaderId .dpPTitle {
font-size: 14px;
}
#dpPHeaderId .dpPMonths {
font-size: 11px;
}
#dpPHeaderId .dpEra {
padding: 2px 7px;
font-size: 10px;
}
#dpPHeaderId .dpEra .lbl {
font-size: 8px;
letter-spacing: 0.6px;
}
.calendar-card {
margin: 0;
padding: 0;
border-radius: 0;
border-width: 0 0 1px 0;
box-shadow: none;
}
.calendar-card::before {
display: none;
}
.month-nav {
padding: 8px 10px;
border-bottom: 1px solid rgba(245, 130, 32, 0.3);
}
.month-title {
font-size: 16px;
}
.month-title .place {
display: none;
}
.nav-btn {
padding: 6px 12px;
font-size: 11px;
}
.dpMonthGrid {
grid-template-columns: 44px repeat(var(--week-count, 6), minmax(0, 1fr));
grid-template-rows: repeat(7, minmax(80px, auto));
gap: 0;
padding: 0;
border-top: 1px solid rgba(122, 31, 31, 0.22);
}
.dpDayCell {
border-radius: 4px !important;
border-width: 1px;
padding: 4px 5px;
margin: 1px;
min-height: 80px;
}
.dpHeadCell {
border-radius: 0;
font-size: 10px;
box-shadow: none;
}
.dpDayHead {
margin: -4px -5px 3px;
padding: 3px 5px;
border-radius: 3px 3px 0 0;
}
.dpDayNum {
font-size: 16px;
}
.dpAltDate {
margin-left: 0;
}
.dpAltDate .alt-num {
font-size: 11.5px;
}
.dpAltDate .alt-mon {
font-size: 8px;
}
.dpRow {
font-size: 9.5px;
margin-top: 2px;
line-height: 1.25;
}
.dpRow .val {
font-size: 10.5px;
}
.dpRow .end {
font-size: 8.5px;
}
.dpFest {
font-size: 8.8px;
padding: 2px 6px;
}
.dpSun {
font-size: 8.5px;
padding-top: 3px;
}
.legend {
gap: 8px;
padding: 8px 10px;
font-size: 10.5px;
}
.legend .pill {
padding: 3px 9px;
font-size: 10px;
}
.footer-links a {
padding: 3px 8px;
margin: 4px;
font-size: 10.5px;
}
}
@media (max-width: 700px) {
header .header-actions {
position: static;
transform: none;
margin-top: 10px;
padding: 0 4px;
}
header .change-inputs-btn {
width: 100%;
padding: 11px 16px;
font-size: 13.5px;
}
/*
.modal-body form {
grid-template-columns: 1fr;
}
.modal-body .form-row-place {
grid-template-columns: 1fr;
}
*/
.match-pair,
.match-form {
grid-template-columns: 1fr;
}
.dasha-children {
padding-left: 14px;
}
.dasha-lord,
.dasha-leaf .dasha-lord {
min-width: 100%;
}
.dasha-period {
width: 100%;
}
}
/* Below 660px keep dashboard cards in a 2-column grid (so the home page
doesn't collapse to a single tall column on phones). */
@media (max-width: 660px) {
.home-cards .card-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
.home-cards .feat-card {
padding: 10px 10px;
column-gap: 10px;
border-radius: 12px;
}
.home-cards .feat-name {
font-size: 14px;
letter-spacing: 0;
}
.home-cards .feat-desc {
font-size: 11.5px;
line-height: 1.45;
}
.home-cards .feat-icon {
width: 56px;
height: 56px;
font-size: 30px;
}
}
/* Below 600px - stack feat-card contents vertically (icon on top, then name + desc) */
@media (max-width: 600px) {
.feat-card {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
justify-items: center;
text-align: center;
row-gap: 6px;
}
.feat-icon {
grid-row: 1;
grid-column: 1;
}
.feat-name {
grid-row: 2;
grid-column: 1;
}
.feat-desc {
grid-row: 3;
grid-column: 1;
}
/* button.feat-card overrides */
button.feat-card {
text-align: center;
}
}
@media print {
.skip-link,
.input-panel {
display: none;
}
body {
background: #fff;
}
.section {
break-inside: avoid;
box-shadow: none;
}
}
/* ── Year/month + location filter strip (top of .container) ─── */
.puja-filter-bar {
margin: 0 0 22px;
/* sits inside .container; bottom-margin
separates it from the puja month grid */
padding: 14px 22px;
background: linear-gradient(135deg, #FFFAF0 0%, #FEF3C7 100%);
border: 1.5px solid #FBBF24;
border-left: 5px solid var(--maroon);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(122, 31, 31, 0.08);
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 12px 18px;
}
.puja-filter-bar .pf-row {
display: flex;
flex-direction: column;
gap: 3px;
}
.puja-filter-bar label {
font-size: 11px;
font-weight: 700;
color: var(--maroon);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.puja-filter-bar input[type="number"],
.puja-filter-bar select {
padding: 7px 10px;
border: 1px solid var(--gray-line);
border-radius: 6px;
font-size: 13px;
font-family: inherit;
background: #fff;
color: var(--gray-text);
min-width: 100px;
}
.puja-filter-bar select {
min-width: 160px;
}
.puja-filter-bar .pf-place {
flex: 1 1 200px;
min-width: 200px;
font-size: 12.5px;
color: var(--maroon-dark);
line-height: 1.45;
}
.puja-filter-bar .pf-place strong {
display: block;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--maroon);
font-weight: 700;
margin-bottom: 2px;
}
.puja-filter-bar .pf-actions {
display: flex;
gap: 8px;
margin-left: auto;
}
.puja-filter-bar .pf-btn {
padding: 8px 18px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
border: none;
font-family: inherit;
transition: filter 0.15s ease;
}
.puja-filter-bar .pf-btn-primary {
background: var(--saffron);
color: #fff;
box-shadow: 0 3px 8px rgba(245, 130, 32, 0.30);
}
.puja-filter-bar .pf-btn-ghost {
background: #fff;
color: var(--maroon-dark);
border: 1px solid var(--maroon);
}
.puja-filter-bar .pf-btn:hover {
filter: brightness(1.05);
}
@media (max-width: 700px) {
.puja-filter-bar {
padding: 12px 16px;
}
.puja-filter-bar .pf-actions {
width: 100%;
}
.puja-filter-bar .pf-btn {
flex: 1 1 0;
}
}
.error-box {
margin: 22px;
padding: 14px 18px;
background: var(--red-bg);
border-left: 4px solid var(--red-bad);
color: var(--red-bad);
border-radius: 4px;
font-weight: 600;
}
.puja-month-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
padding: 18px;
}
.puja-month-card {
background: #fff;
border: 1px solid var(--gray-line);
border-radius: 6px;
overflow: hidden;
}
.puja-month-head {
background: linear-gradient(180deg, var(--maroon) 0%, var(--maroon-dark) 100%);
color: #fff;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--saffron);
}
.puja-month-body {
padding: 0;
}
.puja-month-empty {
padding: 14px;
color: var(--gray-muted);
font-size: 12.5px;
font-style: italic;
}
.puja-month-foot {
display: flex;
justify-content: flex-end;
padding: 10px 14px;
border-top: 1px solid var(--gray-soft-line);
background: #FAFAF8;
}
/* .puja-row and .puja-month-more are