/*
 * SmartAstroGuru additions (sadan): panchang tools, Choghadiya, mobile fixes.
 * Loaded after style.css. Colours follow the existing theme (purple, pink, green, blue).
 */
:root {
	--sag-purple: #800080;
	--sag-pink: #ed81f1;
	--sag-blue: #b0e0e6;
	--sag-green: #bfff9f;
	--sag-ink: #222;
	--sag-muted: #666;
	--sag-line: #d8c6dc;
	--sag-good: #e3f7d6;
	--sag-neutral: #fff6d1;
	--sag-bad: #fde0e0;
	--sag-today: #fff2a8;
}

/* ---------------------------------------------------------- homepage horoscope heading */
#horoscope-taber .sag-hi-heading { color: #c00; font-size: 16px; margin: 4px 0; }

/* ---------------------------------------------------------- choghadiya and hora */
.sag-chog { clear: both; margin: 10px 4px; padding: 8px; background: #fff; border: 1px solid var(--sag-line); }
.sag-chog h4 { color: var(--sag-purple); margin: 0 0 8px; font-size: 15px; }
.sag-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
table.sag-slots { width: 100%; border-collapse: collapse; margin: 0; font-size: 13px; }
table.sag-slots caption { text-align: left; font-weight: bold; color: var(--sag-purple); padding: 2px 0 4px; }
table.sag-slots td { padding: 3px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
table.sag-slots td.t { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.sag-slots small { color: var(--sag-muted); }
table.sag-slots em { font-style: normal; font-weight: bold; color: #c00; }
.q-good { background: var(--sag-good); }
.q-neutral { background: var(--sag-neutral); }
.q-bad { background: var(--sag-bad); }
table.sag-slots tr.now td { outline: 2px solid var(--sag-purple); outline-offset: -2px; }
.sag-legend { font-size: 12px; color: var(--sag-muted); margin: 8px 0 0; }
.sag-legend span { padding: 1px 6px; border-radius: 3px; color: var(--sag-ink); }

/* ---------------------------------------------------------- tool pages (shared) */
.sag-tool { margin: 10px 0 20px; color: var(--sag-ink); font-size: 14px; line-height: 1.45; }
.sag-tool h2 { color: var(--sag-purple); font-size: 18px; margin: 12px 0 8px; }
.sag-tool h3 { color: var(--sag-purple); font-size: 16px; margin: 12px 0 6px; }
.sag-tool button, .sag-tool select, .sag-tool input { font: inherit; }
.sag-btn, .sag-tool button.sag-btn {
	background: var(--sag-purple); color: #fff; border: 0; border-radius: 4px;
	padding: 6px 12px; cursor: pointer; min-height: 34px;
}
.sag-btn:hover { background: #5c005c; }
.sag-btn:disabled { opacity: .4; cursor: default; }
.sag-btn.alt { background: #fff; color: var(--sag-purple); border: 1px solid var(--sag-purple); }
.sag-tool select, .sag-tool input[type=text], .sag-tool input[type=date], .sag-tool input[type=time], .sag-tool input[type=number] {
	padding: 5px 6px; border: 1px solid #bbb; border-radius: 4px; min-height: 34px; box-sizing: border-box; max-width: 100%;
}
.sag-note { font-size: 12px; color: var(--sag-muted); margin: 8px 0; }
.sag-error { color: #b00; }
.sag-loading { color: var(--sag-muted); }
table.sag-kv { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
table.sag-kv th, table.sag-kv td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
table.sag-kv th { width: 42%; color: var(--sag-purple); font-weight: bold; }
table.sag-kv small { color: var(--sag-muted); }
.sag-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; margin: 8px 0 12px; }
.sag-form label { display: flex; flex-direction: column; gap: 3px; font-weight: bold; color: var(--sag-purple); font-size: 13px; }
.sag-form label span.hint { font-weight: normal; color: var(--sag-muted); font-size: 12px; }
.sag-card { border: 1px solid var(--sag-line); border-radius: 6px; padding: 10px 12px; margin: 10px 0; background: #fff; }
.sag-card.hl { background: #fbf2fc; }

/* ---------------------------------------------------------- month calendar */
.sag-month-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.sag-month-nav .prev, .sag-month-nav .next { font-size: 20px; line-height: 1; padding: 4px 12px; }
.sag-wk, .sag-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.sag-wk span { text-align: center; font-size: 12px; color: var(--sag-purple); padding: 3px 0; }
.sag-tool .sag-cell {
	display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
	min-height: 84px; padding: 4px 5px; border: 1px solid var(--sag-line); border-radius: 4px;
	background: #fff; color: var(--sag-ink); cursor: pointer; font-size: 11px; line-height: 1.25; overflow: hidden;
}
.sag-tool .sag-cell.empty { border: 0; background: transparent; cursor: default; }
.sag-tool .sag-cell:hover { border-color: var(--sag-purple); }
.sag-cell .dn { font-size: 16px; font-weight: bold; color: var(--sag-purple); }
.sag-cell .ti { font-weight: bold; }
.sag-cell .ti abbr { text-decoration: none; color: var(--sag-muted); font-weight: normal; }
.sag-cell .nk { color: var(--sag-muted); }
.sag-cell .fe { color: #b0006e; font-weight: bold; margin-top: 2px; }
.sag-tool .sag-cell.is-purnima { background: #fffbe6; }
.sag-tool .sag-cell.is-amavasya { background: #eef0f6; }
.sag-tool .sag-cell.has-fest { border-left: 4px solid #b0006e; }
.sag-tool .sag-cell.is-today { background: var(--sag-today); }
.sag-tool .sag-cell.is-selected { outline: 3px solid var(--sag-purple); outline-offset: -2px; }
.sag-day { margin-top: 14px; scroll-margin-top: 10px; }
.sag-fest-list { list-style: none; margin: 0 0 8px; padding: 0; }
.sag-fest-list li { margin: 3px 0; }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: #eee; color: var(--sag-ink); }
.tag.t-festivals { background: #ffd6ec; }
.tag.t-ekadashi { background: #dff3ff; }
.tag.t-pradosh { background: #e9e0ff; }
.tag.t-poornima { background: #fff1b8; }
.tag.t-amavasya { background: #dde1ea; }
.tag.t-shivaratri { background: #d9f5e4; }
.sag-chog-inline { margin: 0; }

@media (max-width: 600px) {
	.sag-tool .sag-cell { min-height: 54px; padding: 3px; font-size: 10px; }
	.sag-cell .nk, .sag-cell .fe { display: none; }
	.sag-cell .ti abbr { display: none; }
	.sag-cell .dn { font-size: 14px; }
	.sag-tool .sag-cell.has-fest { border-left-width: 3px; }
	table.sag-kv th { width: 45%; }
}

/* ---------------------------------------------------------- festival year */
.sag-filters { border: 1px solid var(--sag-line); border-radius: 6px; padding: 6px 10px; margin: 6px 0 10px; }
.sag-filters legend { color: var(--sag-purple); font-weight: bold; padding: 0 4px; }
.sag-filters label { display: inline-flex; align-items: center; gap: 4px; margin: 3px 10px 3px 0; cursor: pointer; }
.sag-small { font-size: 12px; font-weight: normal; margin-left: 6px; }
table.sag-fest-table { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
table.sag-fest-table td { padding: 4px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
table.sag-fest-table td.d { white-space: nowrap; font-weight: bold; color: var(--sag-purple); width: 60px; }
table.sag-fest-table td.w { color: var(--sag-muted); width: 36px; }
table.sag-fest-table td.k { text-align: right; width: 1%; white-space: nowrap; }
table.sag-fest-table tr.past td { opacity: .55; }
table.sag-fest-table tr.is-today td { background: var(--sag-today); }
table.sag-fest-table em { font-style: normal; color: #c00; font-weight: bold; }
@media (max-width: 600px) {
	table.sag-fest-table td.k { display: none; }
}

/* ---------------------------------------------------------- numerology and gemstones */
.sag-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.sag-cards .sag-card { margin: 0; }
.sag-card h3 { margin-top: 0; }
.sag-big { font-size: 26px; color: #c00; }
.sag-steps { font-size: 12px; color: var(--sag-muted); word-break: break-word; }
.sag-rashi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 8px 0 12px; }
.sag-tool button.sag-rashi {
	display: flex; flex-direction: column; align-items: center; padding: 8px 4px; cursor: pointer;
	border: 1px solid var(--sag-line); border-radius: 6px; background: #fff; color: var(--sag-ink);
}
.sag-tool button.sag-rashi:hover { border-color: var(--sag-purple); }
.sag-tool button.sag-rashi.is-selected { background: var(--sag-purple); color: #fff; border-color: var(--sag-purple); }
.sag-rashi .hi { font-size: 18px; }
.sag-rashi .nm { font-weight: bold; }
.sag-rashi .en { font-size: 11px; opacity: .8; }
.sag-gem { display: flex; gap: 12px; align-items: flex-start; }
.sag-gem img { flex: none; border-radius: 6px; object-fit: cover; }
.sag-table-wrap { overflow-x: auto; }
table.sag-gem-table th { text-align: left; color: var(--sag-purple); padding: 4px 6px; border-bottom: 2px solid var(--sag-line); }
@media (max-width: 600px) {
	.sag-gem { flex-direction: column; }
	.sag-gem img { width: 80px; height: 80px; }
}

/* ---------------------------------------------------------- homepage: coming up strip */
.sag-upcoming { display: none; }
.sag-upcoming.ready {
	display: block; margin: 6px 4px 10px; padding: 8px 10px; background: #fff8fd;
	border: 1px solid var(--sag-line); border-left: 4px solid var(--sag-purple); border-radius: 4px; font-size: 13px; line-height: 1.9;
}
.sag-upcoming strong { color: var(--sag-purple); }
.sag-upcoming .item { white-space: nowrap; margin-right: 10px; }
.sag-upcoming .when { color: var(--sag-muted); font-size: 12px; }
@media (max-width: 600px) {
	.sag-upcoming .item { display: block; white-space: normal; }
}

/* ---------------------------------------------------------- left sidebar: fold sections on phones */
@media (max-width: 700px) {
	#sidebar-left-taber.sag-acc .heading-divider {
		cursor: pointer; position: relative; padding: 8px 28px 8px 8px; margin: 2px 0;
		background: #fbf2fc; border: 1px solid var(--sag-line); border-radius: 4px;
	}
	#sidebar-left-taber.sag-acc .heading-divider::after {
		content: "+"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
		font-weight: bold; color: var(--sag-purple);
	}
	#sidebar-left-taber.sag-acc .heading-divider[aria-expanded="true"]::after { content: "\2212"; }
	#sidebar-left-taber.sag-acc li { display: none; }
	#sidebar-left-taber.sag-acc li.sag-open { display: list-item; }
	/* style.css gives the box a fixed height for the longest list (absolutely positioned); let it fit */
	#sidebar-left-taber.sag-acc { height: auto; }
	#sidebar-left-taber.sag-acc .content .visible { position: static; height: auto; }
}

/* ---------------------------------------------------------- right sidebar: fold categories on phones */
@media (max-width: 700px) {
	#secondary .sag-fold .widget-title { cursor: pointer; position: relative; padding-right: 24px; }
	#secondary .sag-fold .widget-title::after { content: "+"; position: absolute; right: 6px; color: var(--sag-purple); font-weight: bold; }
	#secondary .sag-fold.sag-open .widget-title::after { content: "\2212"; }
	#secondary .sag-fold > ul, #secondary .sag-fold > form, #secondary .sag-fold > select { display: none; }
	#secondary .sag-fold.sag-open > ul, #secondary .sag-fold.sag-open > form, #secondary .sag-fold.sag-open > select { display: block; }
}

/* ---------------------------------------------------------- English / Hindi filter */
.sag-lang { margin: 8px 0 12px; font-size: 14px; }
.sag-lang span { color: var(--sag-muted); margin-right: 4px; }
.sag-lang a { display: inline-block; padding: 3px 10px; margin-right: 4px; border: 1px solid var(--sag-line); border-radius: 14px; text-decoration: none; color: var(--sag-purple); }
.sag-lang a.is-current { background: var(--sag-purple); color: #fff; border-color: var(--sag-purple); }

/* ---------------------------------------------------------- header search */
/* #branding has a fixed height; the menu escapes it by floating and #main clears it, so float this too */
#branding .sag-header-search { float: left; width: 100%; box-sizing: border-box; display: flex; gap: 4px; justify-content: flex-end; padding: 6px 1.5% 8px; background: var(--sag-blue); }
#branding .sag-header-search input[type=search] {
	width: 220px; max-width: 60%; padding: 5px 8px; border: 1px solid #8ab; border-radius: 4px; font-size: 14px; box-sizing: border-box;
}
#branding .sag-header-search button {
	padding: 5px 12px; border: 0; border-radius: 4px; background: var(--sag-purple); color: #fff; font-size: 14px; cursor: pointer;
}
@media (max-width: 700px) {
	#branding .sag-header-search { justify-content: stretch; }
	#branding .sag-header-search input[type=search] { flex: 1; max-width: none; width: auto; }
}
/* the logo now has width/height attributes; keep it scaling on small screens */
#branding img[src*="logo-smart"] { max-width: 100%; height: auto; }

/* ---------------------------------------------------------- birth forms */
.sag-birth fieldset { border: 1px solid var(--sag-line); border-radius: 6px; padding: 8px 12px 0; margin: 0 0 10px; }
.sag-birth legend { color: var(--sag-purple); font-weight: bold; padding: 0 4px; }
.sag-tool .place { display: contents; }
.sag-other { display: contents; }
.sag-other[hidden] { display: none; }
.sag-check { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; cursor: pointer; }
.sag-sub { color: var(--sag-muted); margin-top: -4px; }
.sag-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.sag-toolbar .sag-btn[aria-pressed="true"] { background: var(--sag-purple); color: #fff; }
.sag-links a { display: inline-block; margin: 4px 14px 4px 0; font-weight: bold; }
.sag-notes li { margin: 4px 0; }

/* ---------------------------------------------------------- charts */
.sag-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 8px 0; }
.sag-charts figure { margin: 0; }
.sag-charts figcaption { text-align: center; color: var(--sag-purple); font-weight: bold; margin-top: 4px; }
svg.sag-chart { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; background: #fffdf5; }
svg.sag-chart .frame { fill: none; stroke: var(--sag-purple); stroke-width: 2; }
svg.sag-chart .lines { fill: none; stroke: var(--sag-purple); stroke-width: 1.2; }
svg.sag-chart text { font-family: Arial, sans-serif; text-anchor: middle; }
svg.sag-chart .sign { font-size: 12px; fill: #999; }
svg.sag-chart .sign.s { text-anchor: start; }
svg.sag-chart .pl { font-size: 14px; font-weight: bold; fill: #333; }
svg.sag-chart .asc { fill: #c00; }
svg.sag-chart .title { font-size: 16px; fill: var(--sag-purple); font-weight: bold; }
svg.sag-chart .asc-mark { stroke: #c00; stroke-width: 1.5; }
svg.sag-chart .g-Su { fill: #d35400; } svg.sag-chart .g-Mo { fill: #2c6fbb; } svg.sag-chart .g-Ma { fill: #c0392b; }
svg.sag-chart .g-Me { fill: #1e8449; } svg.sag-chart .g-Ju { fill: #b7950b; } svg.sag-chart .g-Ve { fill: #a0399f; }
svg.sag-chart .g-Sa { fill: #34495e; } svg.sag-chart .g-Ra, svg.sag-chart .g-Ke { fill: #6e6e6e; }
table.sag-planets th { text-align: left; color: var(--sag-purple); padding: 4px 6px; border-bottom: 2px solid var(--sag-line); }
.sag-dasha details { border: 1px solid var(--sag-line); border-radius: 4px; margin: 4px 0; padding: 4px 8px; background: #fff; }
.sag-dasha summary { cursor: pointer; padding: 3px 0; }
.sag-dasha em, .sag-planets em { font-style: normal; color: #c00; font-weight: bold; }

/* ---------------------------------------------------------- milan and janma */
.sag-score { display: flex; gap: 16px; align-items: center; }
.sag-score .big { font-size: 44px; font-weight: bold; color: var(--sag-purple); line-height: 1; white-space: nowrap; }
.sag-score .big small { font-size: 18px; color: var(--sag-muted); }
.sag-score h2 { margin: 0 0 4px; }
table.sag-koots th { text-align: left; color: var(--sag-purple); padding: 4px 6px; border-bottom: 2px solid var(--sag-line); }
table.sag-koots td.sc { font-weight: bold; white-space: nowrap; }
.sag-syl span { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border: 1px solid var(--sag-line); border-radius: 12px; }
.sag-syl span.on { background: var(--sag-purple); color: #fff; border-color: var(--sag-purple); }

@media print {
	#branding, #secondary, #secondary-left, #colophon, .adsbygoogle, .sag-birth, .sag-toolbar, .sag-links, .entry-content, .sag-header-search { display: none !important; }
	.sag-dasha details { break-inside: avoid; }
	#primary, #content { width: 100% !important; margin: 0 !important; }
}

/* ---------------------------------------------------------- homepage calendar: city */
#panchang .sag-cityrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 4px 6px; font-size: 13px; }
#panchang .sag-cityrow label { font-weight: bold; color: var(--sag-purple); }
#panchang .sag-cityrow select { padding: 3px 4px; max-width: 60%; }