/* Temporary: prefer native fallback select when custom combobox misbehaves
   This forces the hidden native <select id="banner-raasi-select-fallback"> to
   be visible and hides the custom combobox markup. Remove after combobox is fixed. */
#banner-raasi-select-fallback {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: auto !important;
  min-width: 120px;          /* allow compact labels like "மேஷம்" */
  max-width: 260px;         /* avoid overly long dropdown on wide screens */
  padding: 6px 10px !important;
  font-size: 0.98rem !important;
  line-height: 1.1 !important;
  border: 1px solid rgba(123,44,191,0.18) !important; /* mild site purple */
  border-radius: 6px !important;
  background: #fff !important;
}

/* Hide custom combobox while keeping markup for future use */
#banner-raasi-combobox { display: none !important; }

/* Reduce vertical gap between dropdown and keyword text */
#affirmation-banner .banner-flex { align-items: center; }
#banner-keyword { margin-left: 8px; margin-top: 0; display: inline-block; }

.home-page {
  margin-top: 5px !important;
}

/* Card grid: always 2 columns */
.card-soon {
  font-size: .68rem;                 /* compact but legible */
  color: rgba(0,0,0,0.55);           /* dull black */
  margin-top: 3px;
  line-height: 1;                    /* compact */
  max-height: 1.2em;                 /* keep single-line visual */
  overflow: hidden;
  display: inline-block;             /* don't force block spacing */
  width: 100%;                       /* center within the card */
  text-align: center;
  white-space: nowrap;               /* keep it single-line */
  text-overflow: ellipsis;           /* truncate if too long */
  opacity: 0.95;
}

@media (max-width: 420px) {
  .card-soon { font-size: .64rem; color: rgba(0,0,0,0.5); }
}
 
/* Keep the sacred-bg the same width as the cards */
.home-wrapper.container {
  max-width: 760px;      /* match the top/bottom cards */
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;    /* a little breathing room */
  padding-right: 12px;
}

@media (max-width: 820px) {
  .home-wrapper.container { 
    max-width: 94vw;      /* comfy edge-to-edge feel on small screens */
  }
}


/* Palm text style for Astro Facts Gita meaning */
.astrofacts-gita .palm-text {
  font-size: 0.72rem;
  text-align: left;
  margin-top: 4px;
}
/* Palm text style for remedy balm */
.remedy-balm.palm-text {
  font-size: 0.72rem;
  text-align: left;
  margin-top: 4px;
}

/* === Affirmation card: match Good-Time look & spacing === */
.affirmation-banner-wrapper { max-width: 760px; margin: 0 auto 12px; margin-bottom: 18px;}

.banner-actions .next-btn {
  background: transparent;
  box-shadow: 0 2px 8px rgba(123,44,191,0.08);
  border: none;
  border-radius: 50%;
  font-size: 1em;
  margin: 0 0 0 0;
  padding: 6px 8px;
  transition: box-shadow 0.2s, transform 0.2s;
  outline: none;
}

.banner-actions .next-btn .emoji-colored {
  color: #7b2cbf;
  filter: none;
  font-size: 1rem;
  padding: 6px 8px;
}

.banner-actions .next-btn:active,
.banner-actions .next-btn:focus {
  box-shadow: 0 8px 32px rgba(123,44,191,0.18);
  transform: scale(1.08);
}
.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: 10px !important;
  margin-left: 12px;
  height: 100%;
}

.banner-detail-btn {
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  margin-left: 8px;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(123,44,191,0.08);
  display: inline-block;
  cursor: pointer;
}
/* home.css */

/* Push cards below header area (assume header height ~80px) */
.home-wrapper {
  padding-top: 96px; /* match fixed header height */
  padding-bottom: 5px !important;
  margin-top: 0 !important; /* remove the small margin you had */
}

.hero-card {
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  border: 1px solid #e0dcec;
  cursor: pointer;
}

.hero-card .emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  transition: transform 0.2s;
}

.hero-card .fw-bold {
  font-size: 1rem;
  color: #333;
}

.hero-card small {
  font-size: 0.75rem;
  color: #888;
}

.hero-card:hover {
  box-shadow: 0 0 10px rgba(123, 44, 191, 0.15);
  transform: translateY(-2px) scale(1.03);
}

.btn-home {
  background-color: #7b2cbf;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
  text-align: center;
}

.btn-home:hover {
  background-color: #6923a6;
  color: #fff;
}

.bg-light-green {
  background-color: #e8f5e9 !important;
}

.text-purple {
  color: #7b2cbf;
}

.border-purple {
  border-color: #7b2cbf !important;
}

/* Sacred background gradient */
.sacred-bg {
  background: linear-gradient(135deg, #fdf6ff 0%, #f3eaff 100%);
}

/* Affirmation Banner */
.affirmation-banner {
  margin-top: 5px !important;
  margin-bottom: 0.4rem;  /* tighten the gap below the banner */
  position: relative;
  font-size: 0.8rem;
  transition: opacity 0.3s, transform 0.2s;
  opacity: 1;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
  z-index: 1;                 /* keep it below the fixed header */
  margin: 16px auto 14px auto;/* more gap above the Good Time card */
  max-width: 100%;                 /* match GT card width */
  padding: 12px 14px;              /* tighter */
  animation: none;                 /* remove pulsating shadow */
  cursor: default;
}

.affirmation-banner:visited,
.affirmation-banner:active,
.affirmation-banner:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.affirmation-banner:hover {
  opacity: 0.92;
  transform: scale(1.02);
}

.banner-top-title {
  font-size: 0.88rem;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: left;
  align-items: left;
  margin-bottom: 4px;
}

@keyframes pulse {
  0% { box-shadow: 0 2px 12px rgba(123,44,191,0.10); }
  50% { box-shadow: 0 4px 24px rgba(123,44,191,0.18); }
  100% { box-shadow: 0 2px 12px rgba(123,44,191,0.10); }
}
.banner-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.banner-main {
  flex: 1;
  min-width: 0;
}

.banner-title{
  font-size: .9rem; margin: 0; line-height: 1.2;display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 6px;
}

.banner-raasi-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 6px;
}
/* Unified banner-text style for affirmation and remedy cards */
.banner-text {
  color: #1f2937;
  background: #faf5ff;
  border: 1px solid #34d399;
  font-size: 0.88rem;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 6px;
  margin: 4px 0 6px;
  font-weight: normal;
  text-align: left !important;
  word-break: break-word;
  white-space: normal;
  line-height: 1.5;
}

.next-btn {
  color: #7b2cbf;
  font-size: 1.1em;
  border: none;
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(123,44,191,0.08);
}

/* Raasi Info Floating Box */
#raasi-info-box {
  max-width: 340px;
  font-size: 0.95rem;
  background-color: #fff;
  border-left: 4px solid #7b2cbf;
  animation: fadeInUp 0.3s ease-in-out;
  box-shadow: 0 2px 12px rgba(123,44,191,0.08);
  opacity: 1;
  transition: opacity 0.3s;
  position: sticky;
  top: 70px;    /* header height */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card grid: two-column layout by default for the six hero cards */
.card-grid {
  display: grid;
  /* Auto-fit columns: each card will be at least 220px, grow to fill available space.
     This keeps 2+ columns when viewport allows and gracefully shrinks to 1 when narrow. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* Responsive: stack to single column on very narrow screens (phones with small widths) */
@media (max-width: 420px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .affirmation-banner {
    max-width: 98vw;
    padding: 12px 6px;
  }
  .banner-raasi-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 5px;
  }
}

/* ===== Nalla Neram (Good Time) styles ===== */
.gt-card-wrap { max-width: 760px; margin: 8px auto 0 auto; }

/* Defensive: ensure gt-card-wrap sections using the HTML5 hidden attribute
  are removed from layout (no reserved space). This avoids flicker/empty
  gaps when JS toggles the attribute. */
.gt-card-wrap[hidden], #kuladev-wrap[hidden] { display: none !important; }

/* Ensure the second section (Good Time) never hugs the banner */
.gt-card-wrap + .gt-card-wrap {
  margin-top: 12px;
}

.good-time-card {
  padding:10px;
  margin-top: 2px;
  /* glass-effect handles background, shadow, border, radius */
  margin-top: 2px; 
}

.gt-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.gt-header h3 { font-size:0.92rem; margin:0; }
.gt-sub { font-size:.78rem; color:#6b7280; }

.gt-body { display:grid; gap:6px; margin-top:8px; }
.gt-row { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; background:#fff;
  border:1px solid #eee; border-radius:10px; }
.gt-row.good { border-color:#34d399; }
.gt-row.warn { border-color:#fca5a5; }
.gt-label { font-weight:600; font-size: .92rem; }
.gt-value { font-variant-numeric:tabular-nums; font-size: .92rem;white-space: nowrap;}

.gt-footer { margin-top:10px; display:flex; justify-content:flex-end; }
.gt-cta { background:#7b2cbf; color:#fff; border:none; border-radius:10px; padding:8px 12px; font-weight:600; cursor:pointer; }
.gt-cta:disabled { opacity:.5; cursor:not-allowed; }
.gt-note { margin-top:6px; font-size:.74rem; color:#6b7280; }

.gt-skeleton {
  height:36px; border-radius:10px;
  background:linear-gradient(90deg,#eee,#f6f6f6,#eee);
  background-size:200% 100%; animation:gt-sh 1.3s infinite;
}
@keyframes gt-sh { 0%{background-position:0 0} 100%{background-position:200% 0} }

/* Modal */
.gt-modal { position:fixed; inset:0; display:none; }
.gt-modal.show { display:block; }
.gt-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }

.gt-close { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; padding:6px 10px; cursor:pointer; }
.gt-modal-body { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 820px){ .gt-modal-body{ grid-template-columns:1fr; } }

.gt-wheel-wrap { display:grid; gap:8px; }

/* Legend + list tidy */
.gt-wheel-legend{ display:grid; margin: 8px 10px 0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; font-size:.78rem; }
.chip{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.chip.good{ background:#34d399; } .chip.bad{ background:#ef4444; } .chip.bad2{ background:#fb923c; } .chip.bad3{ background:#f59e0b; }
.chip.day{ background:#93c5fd; } .chip.night{ background:#c7c7c7; }

.badge { font-size:.72rem; padding:2px 6px; border-radius:6px; margin-left:8px; background:#f3f4f6; }
.badge.good{ background:#dcfce7; }
.badge.bad{  background:#fee2e2; }

/* Emoji button (borrow look from .next-btn) */
.gt-emoji-btn {
  width: 42px; height: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.gt-emoji-btn:disabled { opacity: .55; cursor: not-allowed; }

/* spacing harmony with next section */
.gt-card-wrap { margin-top: 8px; }

.gt-card-wrap:first-of-type {
  margin-top: 0; /* remove accidental double gap */
}

@keyframes pulseBadge {
  0% { box-shadow: 0 0 0 0 rgba(123, 44, 191, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(123, 44, 191, 0); }
  100% { box-shadow: 0 0 0 0 rgba(123, 44, 191, 0); }
}

/* === Pair the two cards visually (compact, same rhythm) === */

/* Global compact heading + subtext for both cards */
.gt-header h3 {
  font-size: 0.92rem;     /* compact */
  line-height: 1.2;
  margin: 0;
}
.gt-sub {
  font-size: 0.74rem;    /* slightly smaller */
}

.gt-card-wrap { margin-top: 0; }

/* Keep times on one line on small screens */
.gt-value { white-space: nowrap; }

/* === Harmonize Affirmation & Nalla Neram cards === */

/* Match corner radius, border, padding */
.good-time-card {
  border-radius: 14px;
  border: 1px solid #e0dcec;
  padding: 12px 14px;
}

/* Match subtext size */
.gt-sub {
  font-size: 0.74rem;
}


/* Compact row heights in Nalla Neram */
.gt-row {
  padding: 5px 8px;
}
.gt-label,
.gt-value {
  font-size: 0.88rem;
}

.title-left{ display:flex; align-items:center; text-align:right; gap:4px; flex:1 1 auto; flex-wrap:wrap; min-width:0; }
.title-left span{ line-height:1.2; }

/* Keep festival banner lamp, title and today-badge on a single line.
   Prevent the badge from wrapping to next line on narrow screens and
   ellipsize long titles so the layout remains tidy (mobile friendly). */
.festival-banner .banner-title { display:flex; align-items:center; gap:8px; }
.festival-banner .title-left { flex: 1 1 auto; min-width: 0; }
.festival-banner .festival-emoji { flex: 0 0 auto; margin-right:6px; }
.festival-banner .festival-title {
  display: block;
  white-space: nowrap;         /* prevent internal wrapping */
  overflow: hidden;            /* hide overflow */
  text-overflow: ellipsis;     /* show ... when truncated */
}
.festival-banner .today-badge {
  flex: 0 0 auto;              /* keep badge size stable */
  margin-left: 8px;
  white-space: nowrap;         /* never wrap the badge */
}

@media (max-width: 420px) {
  /* Slightly reduce badge size on very narrow devices so it fits */
  .festival-banner .today-badge { font-size: .70rem; padding: 3px 6px; }
  /* Reduce gap and allow the icon to shrink modestly */
  .festival-banner .banner-title { gap:6px; }
  .festival-banner .festival-emoji { font-size: 1.05rem; }
  .festival-banner .festival-title { font-size: .96rem; }
}

.gt-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gt-note{ font-size:.72rem; color:#6b7280; }

/* same soft purple shadow for both cards */
.site-shadow{
  box-shadow:0 8px 24px rgba(123,44,191,0.12);
  border:2px solid #7b2cbf !important;
  border-radius:14px;
  transition:box-shadow .2s, transform .2s;
}
.site-shadow:hover{ box-shadow:0 12px 32px rgba(123,44,191,0.18); transform:translateY(-2px); }

/* tiny fonts everywhere, consistent */

.gt-label, .gt-value{ font-size:0.88rem; }

.gt-header h3 {
  font-weight: 700;      /* bold */
  font-size: 0.92rem;    /* a touch larger for hierarchy */
}
@media (max-width: 420px){
  .gt-header h3 { font-size: 0.92rem; }
}

/* Modal: sit above EVERYTHING, allow scrolling inside */
.gt-modal{ position:fixed; inset:0; display:none; z-index: 9999; }
.gt-modal.show{ display:block; }

.gt-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);           /* soft blur behind */
  -webkit-backdrop-filter: blur(4px);
}


/* make sure any fixed header doesn't sit above the modal */
.header, .navbar { z-index: 1000; }     /* example — lower than modal */

/* Modal refresh */
.gt-modal { position:fixed; inset:0; display:none; }
.gt-modal.show { display:block; }
.gt-modal-backdrop { position:absolute; inset:0; backdrop-filter: blur(2px); background:rgba(0,0,0,.35); }

.gt-modal-body{ padding:8px 14px 12px; overflow:auto; display:grid; grid-template-columns:1fr; gap:12px; }
/* Scrollable modal body: distinct background for contrast */
.gt-modal-body {
  background: #f3f0fa; /* slightly different light purple for scroll area */
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(123,44,191,0.08);
}
@media (min-width: 760px){ .gt-modal-body{ grid-template-columns:1fr 1fr; } }

.time-chip{ font-variant-numeric:tabular-nums; font-size:.9rem; padding:2px 8px; border-radius:999px; }
.time-good{ border:1px solid #bbf7d0; color:#065f46; background:#f0fdf4; }
.time-bad{ border:1px solid #fecaca; color:#7f1d1d; background:#fef2f2; }

/* Minimal wheel ring */
#gt-wheel { display:block; max-width:460px; margin:6px auto; }

/* Modal footer with icon buttons */
.gt-modal-footer{
  padding:10px 12px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid #f1f1f1;
}

.gt-modal-badge{
  position: absolute;
  left: 14px;              /* badge left of centered title */
  top: 10px;
  font-size: .7rem;
  padding: 2px 8px;
}



/* make sure close button doesn't sit above modal content */
.gt-close{
  position: absolute;
  right: 12px;
  top: 8px;
}

/* tiny tweak so badges in list feel subtle */
.badge.good{ background:#e7f8ee; }
.badge.bad{  background:#fde8e8; }


.gt-modal-title {
  font-size: 1.02rem;      /* smaller title */
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gt-modal-title h4 {
  font-size: 1rem;
  line-height: 1.1;
  margin: 0;
}

/* === Today badge pulse animation === */
.today-badge {
  background: #7b2cbf;       /* site purple */
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  animation: pulseBadge 2.5s infinite;
}

/* Tiny variant for the 🗓️ இன்று badge inside ticker (keeps layout snug) */
.today-badge.tiny { font-size: .68rem; padding: 2px 6px; }





.time-chip{ 
  display:inline-block; border-radius:999px; padding:4px 10px; font-size:.82rem; 
}
.time-good{ background:#dcfce7; color:#065f46; }
.time-bad{  background:#fee2e2; color:#991b1b; }

/* Floating modal footer actions */
.gt-modal-actions{
  position:sticky;
  bottom:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:32px;
  width:100%;
}

/* unified emoji icon button */
.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;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(123,44,191,.16); }
.icon-btn:active{ transform:translateY(0); }
.icon-btn:disabled{ opacity:.55; cursor:not-allowed; }

.gt-modal-content {
  position: relative;
  z-index: 1;
  max-width: 940px;
  width: 92%;
  margin: 14px auto;
  /* glass-effect handles background, shadow, border, radius */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  font-size: .92rem; /* shrink overall */
  border: 2px solid rgba(123,44,191,.18); /* site purple, very mild */
  padding: 12px 12px 54px;
  padding-bottom: 90px; /* more space for bottom action row */
}

.gt-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* centered title */
  gap: 8px;
  padding: 10px 36px 6px;
}
.gt-modal-header .gt-close{
  position:absolute; right:10px; top:8px;
}

#gt-modal-title{
  flex:1; text-align:center;           /* center the title */
  font-weight:700; letter-spacing:.2px;
}


/* List rows: aligned, subtle */
.gt-times-list{ display:grid; gap:8px; }

.gt-times-list .item .badge{
  font-size: .78rem;
  border-radius: 999px;
  padding: 4px 10px;
}

/* Compact list items + small time chip */
.gt-times-list .item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border:1px solid #eee; border-radius:12px; margin-bottom:10px;
  font-size:.92rem;
}

.time-chip{ white-space:nowrap; }

/* Footer buttons: a touch smaller */
.gt-modal .icon-btn{ width:36px; height:36px; }

/* Prevent background page from scrolling when modal is open */
body.gt-modal-open{ overflow:hidden; }

/* Disclaimer Banner Styling */
.ai-disclaimer {
    background-color: #f3e8ff; /* light purple */
    color: #7b2cbf; /* brand purple */
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}

/* Extra bottom spacing for last cards */
.home-wrapper {
    padding-bottom: 60px; /* more space so background doesn't stick */
}

/* Live Ticker */
.gticker {
  max-width: 760px; margin: 0 auto 8px;
  border: 1px solid #e0dcec; border-radius: 12px;
  padding: 6px 10px; font-size: 0.88rem;
  box-shadow: 0 2px 8px rgba(123,44,191,0.06);
}
.gticker .gticker-inner { display: flex; align-items: center; gap: 8px; }



.gtick-good    { background: #f0fdf4; border-color: #bbf7d0; }
.gtick-bad     { background: #fef2f2; border-color: #fecaca; }
.gtick-neutral { background: #f8fafc; border-color: #e5e7eb; }

.gticker .gticker-text strong { font-weight: 700; }

/* more breathing room at the bottom of page */
.home-wrapper { padding-bottom: 72px; }

/* Ticker v2 extras */
.gticker { position: relative; overflow: hidden; }
.gticker .gticker-actions {
  margin-left: auto; display: inline-flex; gap: 6px; align-items: center;
}
.gt-xbtn {
  border: 1px solid #ede9fe; background: #faf5ff; color: #7b2cbf;
  width: 26px; height: 26px; border-radius: 999px; line-height: 1; cursor: pointer;
}
.gtick-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.gtick-fill  {
  height: 100%;
  width: 0%;
  /* match the site’s organic easing + slightly longer duration */
  transition: width 0.6s cubic-bezier(.22,.61,.36,1);
  will-change: width; /* hint for smoother anim */
}

.gtick-good .gtick-fill  { background: #34d399; }   /* green */
.gtick-bad .gtick-fill   { background: #ef4444; }   /* red */
.gtick-neutral .gtick-fill { background: #93c5fd; } /* blue */

/* Compact pill on narrow screens */
@media (max-width: 420px) {
  .gticker { border-radius: 999px; padding: 6px 10px; }
  .gticker .gticker-inner { gap: 6px; }
  .gticker .gticker-text { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Ticker motion --- */
.gtick-animate {
  animation: gtickIn .15s ease-out;
}
@keyframes gtickIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Dark mode palette (ticker only) --- */
@media (prefers-color-scheme: dark) {
  /* Override ticker palette in dark mode to match light mode */
  .gticker {
    background: #f8fafc;
    color: inherit;
    border-color: #e5e7eb;
  }
  .gt-xbtn {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #7c3aed;
  }
  .gtick-meter { background: transparent; }
  /* Use the same progress colours as light mode */
  .gtick-good .gtick-fill  { background: #34d399; }
  .gtick-bad  .gtick-fill  { background: #ef4444; }
  .gtick-neutral .gtick-fill { background: #93c5fd; }
}

/* modal: win any z-index contest */
.gt-modal { z-index: 2147483647 !important; }

/* Modal background overlay: soft purple tint */
.gt-modal {
  background: rgba(123,44,191,0.10); /* soft purple overlay, matches site theme */
}

/* Modal content background: light purple */
.gt-modal-content {
  background: #f3e8ff; /* light purple background for modal content */
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(123,44,191,0.18);
}

/* make sure all site headers/navs are well below the modal */
.header, .navbar, .site-header, .topbar { z-index: 1000 !important; }

/* if any parent had transform/filter (new stacking context), neutralize the page root */
html, body { transform: none !important; filter: none !important; }

/* keep the background from scrolling while open (you already toggle this class) */
body.gt-modal-open { overflow: hidden; position: fixed; width: 100%; }

.gt-bottom {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  animation: gtickIn 0.15s ease-out;
}

/* auto hide after 8s */
.gt-bottom.hide {
  opacity: 0;
  transition: opacity 0.4s ease-in;
  pointer-events: none;
}

/* Backdrop for popup mode */
.gtick-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.28);
  opacity: 0; transition: opacity .18s ease-out;
  z-index: 1999;
}
.gtick-backdrop.show { opacity: 1; }

/* Popup container */
.gt-popup {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translate(-50%, 14px); /* start slightly below */
  z-index: 2000;
  width: min(92vw, 760px);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}

/* When shown, slide up & fade in */
.gt-popup.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* When hiding, fade out quickly */
.gt-popup.hide {
  opacity: 0;
  pointer-events: none;
}

/* Slightly larger text in popup for readability */
.gt-popup .gticker-text { font-size: .9rem; }

/* Backdrop for popup mode */
.gtick-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.28);
  opacity: 0; transition: opacity .18s ease-out;
  z-index: 1999;
}
.gtick-backdrop.show { opacity: 1; }

/* Popup container */
.gt-popup {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translate(-50%, 14px);
  z-index: 2000;
  width: min(92vw, 760px);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.gt-popup.show { transform: translate(-50%, 0); opacity: 1; }
.gt-popup.hide { opacity: 0; pointer-events: none; }
.gt-popup .gticker-text { font-size: .9rem; }

/* Popup: allow multi-line, dynamic height */
.gt-popup .gticker-inner {
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 6px;
}
.gt-popup .gticker-text {
  white-space: normal;         /* <-- stop truncation */
  overflow: visible;
  line-height: 1.35;
}

/* Put close button at top-right visually */
.gt-popup .gticker-actions { align-self: flex-start; }

/* Options row (checkbox) */
.gticker-options {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.gtick-opt {
  font-size: .8rem;
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #faf5ff;
  border: 1px solid #ede9fe;
  border-radius: 10px;
  padding: 4px 8px;
}
.gtick-opt input[type="checkbox"] {
  width: 14px; height: 14px;
}

/* Backdrop for popup mode */
.gtick-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.28);
  opacity: 0; transition: opacity .18s ease-out;
  z-index: 1999;
}
.gtick-backdrop.show { opacity: 1; }

/* Popup container */
.gt-popup {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translate(-50%, 14px);
  z-index: 2000;
  width: min(92vw, 760px);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.gt-popup.show { transform: translate(-50%, 0); opacity: 1; }
.gt-popup.hide { opacity: 0; pointer-events: none; }

/* Allow multi-line text + dynamic height */
.gt-popup .gticker-inner { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
.gt-popup .gticker-text { white-space: normal; overflow: visible; line-height: 1.35; }
.gt-popup .gticker-actions { align-self: flex-start; }

/* Advice line inside popup */
.gt-popup .gticker-advice {
  width: 100%;
  margin-top: 6px;
  font-size: .88rem;
  line-height: 1.4;
  background: #faf5ff;
  border: 1px solid #ede9fe;
  border-radius: 10px;
  padding: 8px 10px;
  white-space: normal;
}

/* tiny shimmer while advice loads */
.advice-skeleton {
  position: relative;
  color: transparent;               /* hide placeholder text color */
}
.advice-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #f5f3ff, #faf5ff, #f5f3ff);
  background-size: 200% 100%;
  animation: adviceSH 1.2s infinite linear;
  border-radius: 10px;
}
@keyframes adviceSH { 0%{background-position:0% 0} 100%{background-position:200% 0} }

/* Popup ticker: let content grow naturally */
.gt-popup { 
  overflow: visible;                 /* allow the advice pill's shadow */
  padding: 10px 12px;                /* a bit more breathing room */
}

/* Make the first row wrap cleanly when text is long */
.gt-popup .gticker-inner {
  align-items: flex-start;
  flex-wrap: wrap;                   /* badge + line can wrap before advice */
  gap: 8px;
}

/* In popup, allow the main line to wrap (bar can stay compact) */
.gt-popup .gticker-text {
  white-space: normal !important;    /* override mobile ellipsis rule */
  line-height: 1.35;
  flex: 1 1 100%;                    /* full width so advice goes under it */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Advice pill: slightly larger & comfier to read */
.gt-popup .gticker-advice {
  width: 100%;
  margin-top: 6px;
  font-size: .92rem;                 /* a touch bigger */
  line-height: 1.5;
  background: #faf5ff;
  border: 1px solid #ede9fe;
  border-radius: 10px;
  padding: 10px 12px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Keep the progress bar below content without visually crowding */
.gtick-meter { height: 3px; }

@media (max-width: 420px) {
  .gt-popup { padding: 10px 10px; }
  .gt-popup .gticker-advice { font-size: .9rem; line-height: 1.45; }
}

.ai-disclaimer {
  margin-top: 1rem;
  padding: 8px 12px;
  font-size: 0.65rem;
  color: #4a3f6a;
  background: #f5f0ff;
  border-left: 4px solid #7b2cbf;
  border-radius: 6px;
  text-align: center;
  line-height: 1.4;
}
.ai-disclaimer strong {
  color: #5e2a9e;
}

/* Affirmation banner enhancements */
.raasi-name {
  font-weight: 700;
}

.palan-keyword {
  background: #f3e8ff;     /* light brand purple background */
  color: #5e2a9e;          /* deeper brand purple text */
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  line-height: 1.4;
}

/* Advice block under the header line */
.gticker-advice {
  margin-top: 6px;
  font-size: .92rem;
  line-height: 1.5;
  background: #faf5ff;
  border: 1px solid #ede9fe;
  border-radius: 10px;
  padding: 10px 12px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.advice-skeleton {
  opacity: .7;
}

/* Next best time teaser */
.gtick-next {
  margin-top: 6px;
  font-size: .86rem;
  color: #5e2a9e;
}

/* Share button (in actions) */
.gt-share {
  border: 1px solid #ede9fe;
  background: #faf5ff;
  color: #7b2cbf;
  width: 26px; height: 26px;
  border-radius: 999px;
  line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 4px;
}
.gt-share:hover { filter: brightness(0.98); }

/* Mind-balm styling */
.gtick-balm {
  margin-top: 4px;
  font-size: 0.85rem;
  font-style: italic;
  color: #6b4f99;
}

/* Slower, smoother entrance */
.fade-in {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.6s cubic-bezier(.22,.61,.36,1),
              transform 0.6s cubic-bezier(.22,.61,.36,1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.gticker-popup {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1),
              opacity 0.6s cubic-bezier(.22,.61,.36,1);
}
.gticker-popup.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Birthday Palan card accent */
.card-grid a[href="/birthday_numerology_palan"] .hero-card {
  border: 2px solid #7b2cbf;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-grid a[href="/birthday_numerology_palan"] .hero-card .emoji {
  font-size: 2.2rem;
}
.card-grid a[href="/birthday_numerology_palan"] .hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(123,44,191,0.25);
}
.card-grid a[href="/birthday_numerology_palan"] .hero-card small {
  color: #7b2cbf;
  font-weight: 500;
}

.remedy-title {
  display: inline-flex; align-items: center; gap: 8px;
}
.remedy-title .emoji { font-size: 1.1rem; }

.remedy-body { margin-top: 8px; }


/* === Daily Remedy Tip (match Affirmation & Good-Time headers) === */
.remedy-wrap { max-width: 760px; margin: 0 auto 10px; }

.remedy-card {
  background: #faf5ff;
  border: 1px solid #e0dcec;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 12px rgba(123,44,191,0.06);
}

.remedy-head { 
  display: flex; align-items: center; justify-content: space-between; gap: 8px; 
}

/* entrance */
.remedy-card.fade-in { opacity: 0; transform: translateY(4px); }
.remedy-card.fade-in.visible { opacity: 1; transform: translateY(0); transition: opacity .35s, transform .35s; }

/* === Astro Facts MVP card === */
.astrofacts-wrap { max-width: 760px; margin: 0 auto 12px; }
.astrofacts-card {
  background: #faf5ff;
  border: 1px solid #e0dcec;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 12px rgba(123,44,191,0.08);
}
.astrofacts-body { display: grid; gap: 8px; }
.astrofacts-gita {
  font-size: .86rem; color: #4b5563;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.astrofacts-gita .gita-ref {
  background: #faf5ff; border: 1px solid #ede9fe; border-radius: 999px;
  padding: 2px 8px; font-weight: 700; color: #7b2cbf;
}
.astrofacts-gita .sep { opacity: .6; }

#gita-card .gita-avatar{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
}
#gita-card .gita-text{ line-height:1.55; }

/* Gita Card Styles */
.gita-card {
  background: #faf5ff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(123,44,191,0.10);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px;
  margin-bottom: 12px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.gita-avatar {
  border: 2px solid #7b2cbf;
  background: #f3f0ff;
}
.gita-content {
  flex: 1 1 auto;
    /* glass-effect handles background, shadow, border, radius */
  font-weight: 600;
}
.gita-chapter {
  font-size: 0.95rem;
  color: #7b2cbf;
  margin-bottom: 2px;
}
#gita-speaker {
  font-size: 0.88em;
  color: #7b2cbf; /* Example: site accent purple, adjust as needed */
  font-weight: 500;
  margin-bottom: 4px;
}

.gita-text {
  font-size: 0.88rem;
  margin-top: 6px;
  color: #1f2937;
  background: #faf5ff;
  border: 1px solid #34d399;
  border-radius: 12px;
  line-height: 1.5;
  padding: 10px 12px;
}

/* Main card text area: soft site background for pleasant, unified look */
.banner-text,
.gita-text,
.remedy-tip,
.astrofacts-card .banner-text {
  border: 1px solid #ede9fe; /* very light lavender */
  background: #f4eff8;        /* soft site color */
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: #1f2937;
}

.gita-speaker {
  font-size: 0.88em;
  color: #7b2cbf; /* optional: site accent color */
  font-weight: 500;
}

/* Modal layout */
.gt-modal{ position:fixed; inset:0; display:none; z-index:2147483647; background: rgba(123,44,191,0.10); }
.gt-modal.show{ display:block; }
.gt-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(4px); }

.gt-modal-content{
  position:relative;
  z-index:1;
  max-width:940px;
  width:92%;
  margin:14px auto;
  display:flex;                 /* flex column container */
  flex-direction:column;
  max-height:88vh;
  background:linear-gradient(135deg, #fdf6ff 0%, #f3eaff 100%);
  border-radius:18px;
  border:2px solid rgba(123,44,191,.18);
  box-shadow:0 8px 32px rgba(123,44,191,0.18);
  padding:12px;                 /* no huge bottom padding */
}

/* Header */
.gt-modal-header{
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:6px 36px 6px;
}
.gt-modal-title{ font-size:0.85rem; font-weight:800; text-align:left; color: #7b2cbf; }
.gt-modal-header .gt-close{ position:absolute; right:5px; top:4px; color: #7b2cbf; border: 1px solid #7b2cbf;}

/* Scroll area */
.gt-modal-body{
  flex:1 1 auto;                /* take remaining height */
  overflow:auto;
  background:#f4eff8;
  border-radius:14px;
  box-shadow:0 2px 12px rgba(123,44,191,0.08);
  padding:12px 14px;
  margin-top:8px;
  /* keep body from running under the sticky footer */
  max-height: calc(86vh - 120px);  /* header+footer allowance */
}

/* Times list */
.gt-times-list{ display:grid; gap:5px; }
.gt-times-list .item{
  display:flex; align-items:center; justify-content:space-between;
  gap:5px; padding:6px 8px; border:1px solid #eee; border-radius:12px;
  font-size:.78rem;
}

/* Time chips */
.time-chip{ font-variant-numeric:tabular-nums; white-space:nowrap; border-radius:999px; padding:4px 10px; font-size:.82rem; }
.time-good{ background:#dcfce7; color:#065f46; border:1px solid #bbf7d0; }
.time-bad { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* Sticky footer actions — no extra empty space */
.gt-modal-actions{
  position:sticky; bottom:0;
  display:flex; justify-content:center; align-items:center; gap:18px;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  margin-top:8px;
  background: linear-gradient(135deg, #fdf6ff 0%, #f3eaff 100%);
}

/* Banner raasi select */
.raasi-select {
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 36px 8px 12px; /* leave room for custom arrow on the right */
  border: 2px solid #f3e8ff;
  background: linear-gradient(180deg,#fff,#fbf8ff);
  color: #3b0b6f; /* deep purple text */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%237b2cbf' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.raasi-select:focus {
  outline: none;
  border-color: #7b2cbf;
  box-shadow: 0 6px 18px rgba(123,44,191,0.12);
}
.raasi-select option { color: #111; }

/* Try to style the open dropdown items: prefer site purple/pink for selected & hover */
.raasi-select option { background: #fff; color: #7b2cbf; }
.raasi-select option:hover { background: #f6e6fb; color: #7b2cbf; }
.raasi-select option:checked, .raasi-select option[selected] { background: #ffdff6; color: #7b2cbf; }

/* Some browsers require :hover on select for the displayed value */
.raasi-select:hover { color: #7b2cbf; }

/* Edge/IE specific tweak: change the expand arrow color by overlaying a small SVG (for IE/Edge this may not apply) */
.raasi-select::-ms-expand { display: block; }

/* Combobox (custom) styles */
.raasi-combobox { display:inline-block; position:relative; }
.raasi-button {
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:2px solid #f3e8ff; background:#fff; color:#7b2cbf; cursor:pointer;
}
.raasi-button:focus { outline:none; box-shadow:0 6px 18px rgba(123,44,191,0.12); }
.raasi-arrow { font-size:2rem; margin-left:6px; color:#7b2cbf }
.raasi-options {
  position:absolute !important;
  left:0;
  top:calc(100% + 6px);
  z-index:12000;
  display:none !important; /* shown only when combobox expanded/open */
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  width: 220px;
  background: #fff;
  border: 1px solid #f1e6fb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border-radius: 10px;
  max-height: 320px;
  overflow: auto;
  box-sizing: border-box;
}
.raasi-option { display:block; padding:8px 12px; cursor:pointer; color:#3b0b6f; }
.raasi-option:focus, .raasi-option:hover { background:#f6e6fb; color:#7b2cbf; outline:none; }
.raasi-option[aria-selected='true'] { background:#ffdff6; color:#7b2cbf; font-weight:700; }

/* Responsive: make the listbox full width on small screens */
@media (max-width:420px){ .raasi-options{ width:calc(100vw - 48px); left:0; right:0; } }

/* Show listbox when combobox is expanded (ARIA attribute) */
.raasi-combobox[aria-expanded="true"] .raasi-options { display: block !important; }
.raasi-combobox.open .raasi-options { display: block !important; }

/* ====== vertical rhythm: affirmation -> kuladev -> gita ======
   Make spacing consistent and avoid momentary gaps/flashes.
   Tweak values (6px / 10px) if you want tighter or looser spacing. */
.affirmation-banner-wrapper {
  margin-bottom: 6px !important; /* reduce gap below affirmation */
}

/* ensure the kuladev slot/wrap aligns with other card max-width and spacing */
#kuladev-slot,
#kuladev-wrap {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;    /* small gap above kuladev */
  margin-bottom: 8px; /* small gap below kuladev */
  padding: 0;         /* slot itself should not add spacing */
}

/* if the template section is inserted, make sure it doesn't reintroduce hidden spacing */
#kuladev-wrap[hidden],
#kuladev-slot:empty { 
  display: none !important;
}

/* Gita card: keep same rhythm as kuladev */
#gita-wrap {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Keep Good-Time / other gt-card-wrap spacing consistent after these */
.gt-card-wrap { margin-top: 6px; margin-bottom: 8px; }

/* 🛕 Kuladeivam card – interior spacing and look */
.kuladev-card {
  padding: 12px 14px;               /* match Good Time/Gita cards */
  background: #faf5ff;              /* same soft site bg used elsewhere */
}

/* Header breathing room inside the card */
.kuladev-card .gt-header {
  margin-top: 2px;
  margin-bottom: 6px;
}

/* Keep the badge from hugging edges when content wraps */
.kuladev-card .today-badge {
  margin-left: auto;
}

/* Vertical rhythm: Affirmation → Kuladeivam → Gita */
.affirmation-banner-wrapper { 
  margin-bottom: 12px !important;   /* more gap below the banner */
}

/* The slot (wrapper) that we dynamically fill, and the inserted section */
#kuladev-slot,
#kuladev-wrap {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;                 /* space above Kuladeivam card */
  margin-bottom: 12px;              /* space below Kuladeivam card */
}

/* Gita wrap spacing to avoid touching Kuladeivam */
#gita-wrap {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Hide popup ticker from layout until it's shown */
.gt-popup:not(.show) { display: none; }

/* === Lucky Trio (Color • Number • Flower) === */
.lucky-wrap { max-width: 760px; margin: 0 auto 12px; } /* adds bottom gap so it won't touch Remedy */
.lucky-card {
  background: #faf5ff;
  border: 1px solid #e0dcec;
  border-radius: 14px;
  padding: 12px 14px;                 /* inner breathing room */
  box-shadow: 0 2px 12px rgba(123,44,191,0.06);
}

/* small legend line under the title */
.lucky-legend {
  font-size: .82rem;
  color: #6b7280;
  margin: 6px 0 4px;
}

/* responsive grid for the 12 mini tiles */
.lucky-scroller {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 480px) { .lucky-scroller { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .lucky-scroller { grid-template-columns: repeat(4, 1fr); } }

/* the mini tile itself */
.lucky-tile {
  width: 100%;
  text-align: left;
  padding: 8px 10px;                  /* avoid text touching walls */
  border: 1px solid #e0dcec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
  cursor: pointer;
}

/* name + values */
.lucky-name {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 4px;
  color: #111827;
  line-height: 1.2;
}
.lucky-values { display: grid; gap: 2px; font-size: .85rem; color: #1f2937; }

/* give Remedy a bit of breathing room just in case */
.remedy-wrap { margin-top: 12px; }

/* Lucky: horizontal rail */
.lucky-scroller {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;                 /* room for hidden scrollbar */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;   /* iOS momentum */
}

.lucky-tile {
  flex: 0 0 auto;                      /* don't shrink */
  width: 160px;                         /* 150–180 works well */
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #e0dcec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,.04);
  scroll-snap-align: start;
  cursor: pointer;
}

/* optional: hide scrollbar, keep scrollable */
.lucky-scroller::-webkit-scrollbar { height: 6px; }
.lucky-scroller::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 999px; }
.lucky-scroller { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.12) transparent; }

/* Rāsi selector (native select + overlay arrow) */
.raasi-select-wrap {
  position: relative;
  display: inline-block;
}

#banner-raasi-select-fallback.raasi-select {
  -webkit-appearance: none;
  appearance: none;         /* allow custom visuals */
  padding-right: 32px;      /* room for the arrow */
  background-color: #fff;   /* avoid transparency artifacts */
  z-index: auto !important; /* ensure wrapper arrow can sit above */
}

/* Draw the arrow above the select; doesn't block clicks */
.raasi-select-wrap::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path fill='%237b2cbf' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  pointer-events: none;     /* clicks pass through */
  z-index: 20;              /* sit above the select */
}

.gticker.inline {
  margin: 0 auto 10px;
  background: #faf5ff;
}

/* ===== Ticker (card-like, match other cards) ===== */
.gticker {
  max-width: 760px;
  margin: 0 auto 10px;
  background: #faf5ff;                  /* same family as other cards */
  border: 1px solid #e0dcec;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.9rem;
  box-shadow: 0 2px 12px rgba(123,44,191,.06);
}

/* Row 1: badge + title/time on left, next on right, then actions */
.gticker-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gticker-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.gticker-title .gticker-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gticker-row1 .gtick-next {
  margin-left: auto;
  font-size: .86rem;
  color: #5e2a9e;
  white-space: nowrap;
}
.gticker-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.gt-share, .gt-xbtn {
  border: 1px solid #ede9fe;
  background: #faf5ff;
  color: #7b2cbf;
  width: 26px; height: 26px;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Row 2: advice */
.gticker-advice {
  margin-top: 6px;
  font-size: .92rem;
  line-height: 1.5;
  background: #faf5ff;
  border: 1px solid #ede9fe;
  border-radius: 10px;
  padding: 10px 12px;
  word-break: break-word;
}

/* Row 3: palm/balm */
.gtick-balm {
  margin-top: 6px;
  font-size: .86rem;
  font-style: italic;
  color: #6b4f99;
}

/* Progress bar (bottom border) */
.gtick-meter { position: relative; height: 3px; margin-top: 8px; background: transparent; }
.gtick-fill  { height: 100%; width: 0%; transition: width .6s cubic-bezier(.22,.61,.36,1); }
.gtick-good .gtick-fill    { background: #34d399; }
.gtick-bad .gtick-fill     { background: #ef4444; }
.gtick-neutral .gtick-fill { background: #93c5fd; }

/* Tiny badge */
.today-badge.tiny { font-size: .68rem; padding: 2px 6px; }

/* ==== Ticker mobile refinements & progress redesign ==== */

/* Let the top row wrap cleanly on narrow screens */
.gticker-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gticker-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}
.gticker-title .gticker-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gticker-row1 .gtick-next {
  margin-left: auto;
  font-size: .86rem;
  color: #5e2a9e;
  white-space: nowrap;
}

/* Footer actions now live under the bar */
.gticker-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.gt-share, .gt-xbtn {
  border: 1px solid #ede9fe;
  background: #faf5ff;
  color: #7b2cbf;
  width: 28px; height: 28px;
  border-radius: 999px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Progress bar: green completed, mild site pink for the remaining track with a border */
.gtick-meter {
  position: relative;
  height: 6px;                 /* a touch taller for visibility */
  margin-top: 8px;
  background: #f7eaff;         /* mild site pink/lavender */
  border: 1px solid #ead9ff;   /* gentle border outlining remaining part */
  border-radius: 999px;
  overflow: hidden;            /* clip inner fill nicely */
}
.gtick-fill {
  height: 100%;
  width: 0%;
  background: #22c55e;         /* green (completed) */
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}

/* Keep palette consistent across states (only the fill color matters) */
.gtick-good .gtick-fill    { background: #22c55e; }  /* green */
.gtick-bad .gtick-fill     { background: #ef4444; }  /* red if you swap to "avoid" */
.gtick-neutral .gtick-fill { background: #22c55e; }  /* default to green for neutral */

/* Mobile tweaks: prevent overlap, allow text to wrap */
@media (max-width: 420px) {
  .gticker { padding: 10px 12px; border-radius: 14px; }
  .gticker-title .gticker-text { white-space: normal; }
  .gticker-row1 .gtick-next { max-width: 100%; }
}

/* --- Improved Time Ticker Multilingual Alignment --- */

.gticker-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  line-height: 1.4;
}

/* Badge always stays left, rest wraps nicely */
.gticker-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Prevent text from getting too tight in wide scripts like Malayalam */
.gticker-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset;
  word-break: break-word;
}

/* Next good time moves to a new line automatically */
.gtick-next {
  flex: 1 1 100%;
  font-size: 0.9rem;
  color: var(--purple-700, #7b2cbf);
  text-align: right;
  white-space: normal;
  margin-top: 2px;
}

/* Badge visually consistent in all languages */
.today-badge.tiny {
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: #7b2cbf;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Mobile adjustments --- */
@media (max-width: 480px) {
  .gticker-row1 {
    flex-direction: column;
    align-items: flex-start;
  }
  .gticker-title {
    width: 100%;
  }
  .gtick-next {
    text-align: left;
    margin-top: 4px;
  }
}