/* C:\xampp\htdocs\jathagam.ai\frontend\static\css\raasi_palan\daily_ai_report.html.css */

/* Page shell (match sacred surface look) */
.daily-ai-wrapper { background: linear-gradient(135deg, #fdf6ff 0%, #f3eaff 100%); border-radius: 16px; margin: 8px auto 14px; }
.daily-ai-page { max-width: 920px; margin: 0 auto; padding: 12px; }

.dar-head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin: 4px 0 8px; }
.dar-head { display:flex; align-items:center; justify-content:center; gap:.5rem; margin: 10px 0 8px; flex-direction:column; }
.dar-title { font-size: 1.25rem; font-weight: 900; color: #7b2cbf; margin: 6px 0; text-align:center; }
.dar-date { font-size: .82rem; color: #6b5c7b; margin-top:0.25rem; align-self:flex-end; }
.dar-date-chip{ display:inline-block; background:rgba(123,44,191,0.08); color:#4b2166; padding:.28rem .6rem; border-radius:999px; border:1px solid rgba(123,44,191,0.08); font-weight:700; font-size:.82rem }

/* Title halo / underline to establish hierarchy */
.dar-title{ position:relative }
.dar-title::after{ content:''; display:block; height:3px; width:46px; background:linear-gradient(90deg,#ffd54a,#ffd54a 60%, rgba(123,44,191,0)); border-radius:2px; margin:6px auto 0; opacity:.95 }
.dar-title.glow{ text-shadow: 0 6px 18px rgba(123,44,191,0.08), 0 2px 6px rgba(123,44,191,0.04) }

/* spacing to avoid touching accordion */
.dar-head{ margin-bottom:12px }

/* Restore horizontal layout on wider screens */
@media (min-width: 760px){
  .dar-head { flex-direction:row; align-items:baseline; position:relative; justify-content:center; }
  /* center the title visually while keeping the date at the right */
  .dar-title { font-size: 1.15rem; text-align:center; margin:0 auto; }
  .dar-date { position:absolute; right:12px; top:8px; }
}

/* Reuse your accordion look (kept light) */
.accordion { border: none; background: none; padding: 0; margin-bottom: 10px; }
.accordion-item { border-radius: 14px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(123,44,191,.06); overflow: hidden; }
.accordion-toggle {
  background: #f3e9ff; color:#7b2cbf; border:none; width:100%;
  padding:.65rem 1.1rem; font-weight:700; text-align:left; display:flex; justify-content:space-between; align-items:center;
}
.accordion-toggle { border-radius:14px; }
.accordion-toggle[aria-expanded="true"] { background:#ead8ff; font-size: 0.9rem;}
/* Base accordion content (closed) */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .36s cubic-bezier(.2,.9,.2,1),
    opacity .26s ease,
    transform .26s ease,
    padding .26s ease;
  box-sizing: border-box;
}

/* Open state */
.accordion-content.is-open {
  opacity: 1;
  transform: translateY(0);
  padding: .6rem 1rem .8rem;
}

/* Slight extra breathing room only when open (for CTA icons) */
.daily-ai-page .accordion-content.is-open {
  padding-bottom: 1.4rem;
}

/* When an accordion is open, ensure bottom corners are rounded and content has room for CTA */
.accordion-toggle[aria-expanded="true"]{ border-bottom-left-radius:0; border-bottom-right-radius:0 }

/* center smaller pieces of content but keep long paragraph bodies left-aligned for readability */
.accordion-content .palan-grid, .accordion-content .ranks-graph, .accordion-content .dar-card{ max-width:920px; margin:0 auto }
.accordion-content > .palan-grid, .accordion-content > .ranks-graph { width:95%; max-width:920px; margin:0 auto; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:center; padding:0 }
.accordion-content > .palan-grid .palan-card, .accordion-content > .ranks-graph .graph-row { width:100%; box-sizing:border-box; margin:0 }
.palan-body, .dar-card{ text-align:left }


/* Graph container for ranks */
.ranks-graph { display:flex; flex-direction:column; gap:0.6rem; }
.ranks-graph .graph-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:#fff;border:1px solid #ead8ff;border-radius:12px; transform:translateY(0); opacity:1}
.graph-label{width:30%;min-width:96px;font-weight:700;color:#3a1650}
.graph-bar-wrap{flex:1;background:#eaf8ee;border-radius:999px;height:12px;overflow:hidden;border:1px solid rgba(34,139,34,0.06)}
.graph-bar{height:100%;background:#7b2cbf;width:0%;transition:width 900ms cubic-bezier(.2,.9,.2,1);box-shadow:inset 0 -2px 4px rgba(0,0,0,0.04)}
.graph-score{width:44px;text-align:right;color:#7b2cbf;font-weight:700;padding-left:.4rem}
.graph-bar-wrap{margin-right:.5rem}

/* Top-3 highlight styles */
.graph-row.top-1{ background:linear-gradient(90deg, rgba(255,223,0,0.06), #fff); border-color: rgba(255,223,0,0.16)}
.graph-row.top-1 .graph-bar{background:linear-gradient(90deg,#ffd54a,#7b2cbf); height:14px; box-shadow:0 2px 8px rgba(255,193,7,0.12); border-radius:999px}
.graph-row.top-2{ background:linear-gradient(90deg, rgba(192,192,192,0.03), #fff); border-color: rgba(123,44,191,0.06)}
.graph-row.top-2 .graph-bar{background:linear-gradient(90deg,#bfc3c8,#7b2cbf); height:13px; box-shadow:0 2px 6px rgba(0,0,0,0.04); border-radius:999px}
.graph-row.top-3{ background:linear-gradient(90deg, rgba(205,127,50,0.02), #fff); border-color: rgba(205,127,50,0.06)}
.graph-row.top-3 .graph-bar{background:linear-gradient(90deg,#b87333,#7b2cbf); height:13px; box-shadow:0 2px 6px rgba(0,0,0,0.04); border-radius:999px}

/* Remove pointer cursor for graph rows (not links) */
.ranks-graph .graph-row{cursor:default}

/* Accordion open/close animation using class (avoid hidden attr for animation) */
.accordion-content:not(.is-open){ opacity:0; transform:translateY(-8px) }

/* Gita shimmer on load */
.dar-card.shimmer{ position:relative; overflow:hidden }
.dar-card.shimmer::before{ content:''; position:absolute; left:-40%; top:0; width:60%; height:100%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0)); transform:skewX(-12deg); animation: shimmer 1s ease-out }
@keyframes shimmer{ 0%{ left:-60% } 100%{ left:160% } }

/* heartbeat for date chip */
.dar-date-chip{ transform-origin:center; animation: heartbeat 4s ease-in-out infinite; }
@keyframes heartbeat{ 0%{ transform:scale(1) } 10%{ transform:scale(1.06) } 20%{ transform:scale(1) } 100%{ transform:scale(1) } }

@media (prefers-reduced-motion: reduce){
  .accordion-content{ transition:none }
  .dar-card.shimmer::before{ animation:none; display:none }
  .dar-date-chip{ animation:none }
}

/* Palan card tweaks */
.palan-card{position:relative;padding:.9rem 1rem;border:1px solid #ead8ff;border-radius:16px;background:#fff;margin:.55rem 0}
.palan-title{margin:0 0 .35rem 0;font-weight:800;color:#7b2cbf;display:flex;align-items:center;justify-content:space-between}
.palan-more{font-size:0.85rem;color:#6b5c7b;text-decoration:none;margin-left:8px}
.palan-more .dot{background:#f3e9ff;color:#7b2cbf;border-radius:999px;padding:4px 8px;font-weight:700}

@media (max-width:480px){
  .graph-label{width:38%;min-width:82px;font-size:0.94rem}
  .graph-score{min-width:40px;font-size:0.9rem}
}

/* Ranks bar block */
.ranks-wrap { display:flex; flex-direction:column; gap:.5rem; }
.rank-row {
  display:grid; grid-template-columns: 180px 1fr; gap:.6rem;
  align-items:center; background:#faf5ff; border:1px solid #e9d7ff; border-radius:12px; padding:.5rem .6rem;
  cursor:pointer;
}
.rank-row:hover { background:#f6ecff; }
.rank-left { display:flex; align-items:center; gap:.5rem; }
.rasi-name { font-weight:700; color:#5e2a9e; }
.rank-no { font-size:.8rem; color:#6b5c7b; }
.bar { width:100%; height:14px; background:#f3e8ff; border:1px solid #e9d7ff; border-radius:999px; overflow:hidden; }
.bar-fill { height:100%; width:0; background:#7b2cbf; }

.hint { margin-top:.35rem; font-size:.78rem; color:#6b5c7b; }
.empty { color:#6b5c7b; font-size:.9rem; padding:.25rem 0; }

@media (max-width: 620px){
  .rank-row { grid-template-columns: 1fr; }
  .rank-left { justify-content: space-between; }
}

/* C:\xampp\htdocs\jathagam.ai\frontend\static\css\raasi_palan\daily_ai_report.css */
.rank-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:.5rem;align-items:center;
  padding:.4rem .5rem;border:1px solid #e9d7ff;border-radius:12px;background:#faf5ff;margin:.35rem 0;text-decoration:none;color:inherit}
.rank-row:hover{background:#f6ecff;transform:translateY(-1px)}
.rank-no{font-weight:800;color:#7b2cbf;width:40px;text-align:center}
.rank-name{font-weight:700}
.rank-bar{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin:0 .25rem;min-width:120px}
.rank-bar i{display:block;height:100%;background:#7b2cbf}
.rank-score{font-weight:700;color:#7b2cbf;min-width:54px;text-align:right}

.preline { white-space: pre-line; }
.palan-card{padding:.75rem 1rem;border:1px solid #ead8ff;border-radius:14px;background:#fff;margin:.5rem 0}
.palan-title{font-weight:800;color:#7b2cbf;margin:0 0 .25rem 0}
.palan-body{white-space: pre-line;}


.rank-row{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:left;
  padding:.55rem .7rem;border:1px solid #ead8ff;border-radius:14px;background:#fff;margin:.4rem 0;text-decoration:none;color:inherit}
.rank-row:hover{background:#faf5ff}
.rank-no{font-weight:800;color:#7b2cbf;width:46px;text-align:center}
.rank-name{font-weight:700}
.rank-score{font-variant-numeric: tabular-nums; min-width:3.5rem; text-align:right}
.rank-bar{height:10px;background:#eee;border-radius:999px;overflow:hidden}
.rank-bar i{display:block;height:100%;background:#7b2cbf}
.rank-row.top-1 .rank-bar i{filter:brightness(1.05)}
.rank-row.top-2 .rank-bar i{opacity:.95}
.rank-row.top-3 .rank-bar i{opacity:.9}
@media (max-width:560px){ .rank-score{font-size:.875rem;opacity:.85} }

.palan-grid{display:block; width: 100%; align-items: center;}
.palan-grid{display:block; width: 100%; align-items: center;}
.palan-grid{display:flex; flex-direction:column; width: 100%; align-items: center; gap:12px}
.palan-card{padding:.9rem 1rem;border:1px solid #ead8ff;border-radius:16px;background:#fff;box-sizing:border-box;width:100%;margin:0}
.palan-title{margin:0 0 .35rem 0;font-weight:800;color:#7b2cbf}
.palan-body{white-space:pre-line;line-height:1.65}

/* subtle divine pulse on the container */
.daily-ai-wrapper{ animation: subtle-glow 6s ease-in-out infinite; }
@keyframes subtle-glow{ 0%{box-shadow:0 2px 10px rgba(123,44,191,0.03)} 50%{box-shadow:0 6px 22px rgba(123,44,191,0.05)} 100%{box-shadow:0 2px 10px rgba(123,44,191,0.03)} }


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .graph-bar{ transition:none }
  .daily-ai-wrapper{ animation:none }
  .accordion-content{ transition:none }
}

/* Astro Facts digest */
#acc-astrofacts .digest-line { margin: 6px 0 10px; color:#2c225a; line-height:1.55; }
#acc-astrofacts .gita-chip {
  display:inline-flex; gap:8px; align-items:baseline;
  padding:8px 10px; border-radius:10px;
  background: rgba(123,44,191,.06); border:1px solid rgba(123,44,191,.25);
}
#acc-astrofacts .gita-title { font-weight:700; color:#6b21a8; white-space:nowrap; }
#acc-astrofacts .gita-text { color:#312e81; }

/* Make astro accordion content stack vertically and right-align CTA */
.astro-content { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.astro-content .digest-line { margin:0; font-size:0.86rem; line-height:1.6; color:#2c225a }
.astro-content .banner-actions { display:flex; justify-content:flex-end; margin-bottom:6px }
.astro-content .icon-btn { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:8px; background: rgba(123,44,191,0.06); border:1px solid rgba(123,44,191,0.08); color:#4b2166 }

.banner-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end; /* right-align */
  gap: 10px; /* spacing between buttons */
  height: 100%;
  margin-top: 3px !important;
  margin-left: 3px;
  height: 100%;
}

.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid #ede9fe; background:#faf5ff;
  color:#7b2cbf; box-shadow:0 2px 10px rgba(123,44,191,.10);
  font-size:1rem; line-height:1; cursor:pointer; transition:transform .12s, box-shadow .12s, background .12s;
}

/* Fix: prevent CTA clipping inside the last (and any) accordion item */
.accordion-item { overflow: visible; }

/* If you prefer to change only the Astro Facts block: */
/* .accordion-item:has(#dar-content-astro) { overflow: visible; } */

/* Ensure there's enough room for the CTA at the bottom */
#dar-content-astro.accordion-content.is-open { padding-bottom: 1.4rem; }

/* Tiny safety padding so the button never hugs the edge */
.astro-content .banner-actions { padding-right: 6px; }
/* Replace the block above with this minimal tweak */
.astro-content .icon-btn {
  padding:0;                /* let width/height (40px) define the circle */
  border-radius:999px;      /* restore circle */
  background: #faf5ff;      /* optional: match other cards */
  border:1px solid #ede9fe; /* optional: match other cards */
  color:#7b2cbf;
}

/* Scope to the report page to avoid leaks from other pages */
.daily-ai-page .banner-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  height:auto;              /* let content decide */
  margin:8px 0 0 0;
  padding-right:6px;        /* keeps it inside the rounded corner */
}

/* More breathing room for any open accordion on the report */
.daily-ai-page .accordion-content.is-open { padding-bottom: 1.6rem; }

/* And make sure nothing clips shadows */
.daily-ai-page .accordion-item { overflow: visible; }

.gita-para { margin: 8px 0 10px; line-height: 1.6; }

/* Two-column layout for Gita paragraphs */
.gita-two {
  display: grid;
  grid-template-columns: 1fr;    /* mobile: stack */
  gap: 16px;
  align-items: start;
}
@media (min-width: 760px) {
  .gita-two { grid-template-columns: 1fr 1fr; }  /* desktop/tablet: side-by-side */
}
.gita-para { margin: 0; line-height: 1.65; }

/* Force Gita paragraphs to stack vertically on all screens */
.daily-ai-page .gita-two { grid-template-columns: 1fr !important; }