/* ============================================================================
   ONEINDIA CALENDAR — DESKTOP
   All classes prefixed with `oi-calendar-`
   Blocks separated by 24px gap (via .oi-calendar-blocks)
   ========================================================================= */

/* ===== Base / typography ===== */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.oi-calendar-tamil { font-family: 'Noto Sans Tamil', sans-serif; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }

/* ===== Page wrapper + 24px gap stack ===== */
.oi-calendar-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 0;
}

/* ===== 2-column layout (650 main + 300 sidebar, 50px gap = 1000) ===== */
.oi-calendar-layout {
  display: grid;
  grid-template-columns: 650px 300px;
  gap: 50px;
  align-items: start;
}
.oi-calendar-main-col { min-width: 0; }
.oi-calendar-side-col {
  /*position: sticky;*/
  top: 24px;
  align-self: start;
}
.oi-calendar-side-ad {
  background: #f1f3f5;
  border-radius: 8px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.oi-calendar-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;            /* ← 24px gap between every block */
}

/* ===== Breadcrumb (Oneindia style — › chevron separator) ===== */
.oi-calendar-breadcrumb {
  font-size: 13px;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}
.oi-calendar-breadcrumb a {
  color: #6c757d;
  text-decoration: none;
}
.oi-calendar-breadcrumb a:hover {
  color: var(--oi-calendar-brand);
  text-decoration: underline;
}
.oi-calendar-breadcrumb__sep {
  color: #adb5bd;
  font-size: 12px;
  user-select: none;
}
.oi-calendar-breadcrumb__current {
  color: #212529;
  font-weight: 500;
}

.oi-breadcrumb       { color: #adb5bd; }   /* the " | " inherits this */
.oi-breadcrumb a     { color: #212529; }   /* Home — dark */
.oi-breadcrumb a:hover { color: #ED1C24; } /* brand red on hover */
.oi-breadcrumb span  { color: #9ca3af; }   /* current page — muted grey */

/* ===== Tokens ===== */
:root {
  --oi-calendar-dark:           #1a1f33;
  --oi-calendar-dark-soft:      #272b3d;
  --oi-calendar-line:           #e5e7eb;
  --oi-calendar-line-soft:      #E5E7EB;
  --oi-calendar-line-soft-2:    #f1f3f5;
  --oi-calendar-text:           #111827;
  --oi-calendar-muted:          #6b7280;
  --oi-calendar-muted-2:        #9ca3af;
  --oi-calendar-brand:          #EF4444;
  --oi-calendar-brand-blue:     #2563EB;

  /* day state colors */
  --oi-calendar-today-bg:       #EFF6FF;
  --oi-calendar-today-border:   #4a90c8;
  --oi-calendar-today-borderbg: #0156FF;
  --oi-calendar-fest-bg:        #fdecec;

  /* pastel card heads */
  --oi-calendar-tint-mint:      #dff0e7;
  --oi-calendar-tint-cream:     #fdf0c4;
  --oi-calendar-tint-pink:      #fde2e2;
  --oi-calendar-tint-lavender:  #ebe6fa;
  --oi-calendar-tint-peach:     #ffe4cc;
  --oi-calendar-tint-sky:       #e0e7fb;
  --oi-calendar-tint-rose:      #fde2e7;
  --oi-calendar-sky-color:      #BFDBFE;

  /* legend / indicators */
  --oi-calendar-amavasi:        #0f172a;
  --oi-calendar-pournami:       #ffffff;
  --oi-calendar-pournami-bd:    #0f172a;
  --oi-calendar-chathurthi:     #f5c518;
  --oi-calendar-karthikai-bd:   #6b7280;

  /* misc */
  --oi-calendar-shadow-sm:      0 1px 2px rgba(15,23,42,.04);
}

/* ===== Generic card wrapper ===== */
.oi-calendar-card {
  background: #ffffff;
  border: 1px solid var(--oi-calendar-line);
  border-radius: 12px;
  box-shadow: var(--oi-calendar-shadow-sm);
  overflow: hidden;
}

/* =========================================================================
   BLOCK A — PAGE TITLE (H1) — Oneindia content style
   ========================================================================= */
.oi-calendar-page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

/* =========================================================================
   BLOCK B — INTRO DESCRIPTION
   ========================================================================= */
.oi-calendar-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 30px;
  color: #28313a;
}
.oi-calendar-intro__more {
  display: inline-block;
  font-size: 16px;
  color: #28313a;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.oi-calendar-intro__more:hover {
  color: var(--oi-calendar-brand);
}

/* =========================================================================
   BLOCK C — TOP ADVERTISEMENT
   ========================================================================= */
.oi-calendar-topad {
  background: #f1f3f5;
  border-radius: 8px;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* =========================================================================
   BLOCK 1 — MAIN CALENDAR
   ========================================================================= */
.oi-calendar-main { /* card */ }

.oi-calendar-main__head {
  background: var(--oi-calendar-dark);
  color: #fff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.oi-calendar-main__title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;
}
.oi-calendar-main__sub {
  font-size: 11.5px;
  color: #9ca3af;
  margin-top: 3px;
  letter-spacing: .02em;
}
.oi-calendar-main__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.oi-calendar-main__lang,
.oi-calendar-main__year {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.oi-calendar-main__lang:hover,
.oi-calendar-main__year:hover { background: rgba(255,255,255,.14); }
.oi-calendar-main__chev { font-size: 9px; opacity: .85; }
.oi-calendar-main__nav {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oi-calendar-main__nav:hover { background: rgba(255,255,255,.14); }

/* Weekday header row */
.oi-calendar-main__weekrow,
.oi-calendar-mini__weekrow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafbfc;
  border-bottom: 1px solid var(--oi-calendar-line-soft);
}
.oi-calendar-main__weekrow div,
.oi-calendar-mini__weekrow div {
  padding: 10px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.oi-calendar-main__weekrow .oi-calendar-we,
.oi-calendar-mini__weekrow .oi-calendar-we { color: var(--oi-calendar-brand); }

/* Days grid */
.oi-calendar-main__grid {
  display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    overflow: hidden;
}
.oi-calendar-main__grid > * {
    min-width: 0;
    box-sizing: border-box;
}
.oi-calendar-day {
  position: relative;
  min-height: 96px;
  padding: 10px 12px;
  border-right: 1px solid var(--oi-calendar-line-soft);
  border-bottom: 1px solid var(--oi-calendar-line-soft);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  transition: background .15s ease;
}
.oi-calendar-day:nth-child(7n) { border-right: none; }
.oi-calendar-day--empty { background: #fafbfc; }
.oi-calendar-day:not(.oi-calendar-day--empty):hover { background: #fffaf2; }

.oi-calendar-day__tdate {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  color: #374151;
}
.oi-calendar-day__num {
  font-size: 28px;
  font-weight: 700;
  line-height: 30px;
  color: #111827;
  margin-top: 6px;
}
.oi-calendar-day--weekend .oi-calendar-day__num,
.oi-calendar-day--fest .oi-calendar-day__num {
  color: var(--oi-calendar-brand);
}
.oi-calendar-day__nak {
  font-size: 10px;
  color: #374151;
  margin-top: 7px;
  line-height: 13px;
}
.oi-calendar-day__tithi {
  font-size: 10px;
  color: #374151;
  margin-top: 2px;
  line-height: 13px;
  font-weight: 700;
}
.oi-calendar-day__extra {
  font-size: 10.5px;
  color: var(--oi-calendar-brand);
  margin-top: 4px;
  font-weight: 600;
}
.oi-calendar-legendouter {padding: 15px;}

/* Day indicators (top-left) */
.oi-calendar-day__mark {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.oi-calendar-day__mark--amavasi { background: var(--oi-calendar-amavasi); }
.oi-calendar-day__mark--pournami {
  background: var(--oi-calendar-pournami);
  border: 1.5px solid var(--oi-calendar-pournami-bd);
}
.oi-calendar-day__mark--karthikai {
  background: #fff;
  border: 1.5px solid var(--oi-calendar-karthikai-bd);
}
.oi-calendar-day__moon {
  position: absolute;
  top: 7px;
  left: 9px;
  font-size: 13px;
  color: var(--oi-calendar-chathurthi);
}

/* Today / selected day (May 8) */
.oi-calendar-day--today {
  background: var(--oi-calendar-today-bg);
  box-shadow: inset 0 0 0 2px var(--oi-calendar-today-border);
}
.oi-calendar-day--today:before {background: var(--oi-calendar-today-borderbg);width: 3px;position: absolute;left: 0;top: 0;bottom: 0;content: '';}
.oi-calendar-day--today .oi-calendar-day__num { color: var(--oi-calendar-brand); }

/* Festival tint (subtle pink for festival days, like 14, 15) */
.oi-calendar-day--fest-tint { background: #fff5f5; }

/* =========================================================================
   BLOCK 2 — LEGEND
   ========================================================================= */
.oi-calendar-legend {
  background: #FAFAFA;
  border: 1px solid var(--oi-calendar-line);
  border-radius: 12px;
  padding: 14px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  font-size: 13px;
  color: #374151;
  box-shadow: var(--oi-calendar-shadow-sm);
}
.oi-calendar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.oi-calendar-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.oi-calendar-legend__dot--amavasi  { background: var(--oi-calendar-amavasi); }
.oi-calendar-legend__dot--pournami {
  background: #fff;
  border: 1.5px solid var(--oi-calendar-pournami-bd);
}
.oi-calendar-legend__dot--karthikai {
  background: #fff;
  border: 1.5px solid var(--oi-calendar-karthikai-bd);
}
.oi-calendar-legend__moon {
  display: inline-block;
  font-size: 14px;
  color: var(--oi-calendar-chathurthi);
  line-height: 1;
}

/* =========================================================================
   BLOCK 3 — DESCRIPTION (Tamil calendar info block)
   ========================================================================= */
.oi-calendar-desc {
  background: #f8fafc;
  border: 1px solid var(--oi-calendar-line);
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: var(--oi-calendar-shadow-sm);
}
.oi-calendar-desc p {
  margin: 0 0 12px;
  color: #4b5563;
  font-size: 16px;
  line-height: 30px;
}
.oi-calendar-desc p:last-child { margin-bottom: 0; }
.oi-calendar-desc strong { color: #111827; font-weight: 600; }
.oi-calendar-desc a { color: var(--oi-calendar-brand-blue); font-weight: 600; }
.oi-calendar-desc a:hover { text-decoration: underline; }

/* =========================================================================
   BLOCK 4 — PANCHANG SECTION
   ========================================================================= */
.oi-calendar-panch { /* container */ }

.oi-calendar-panch__head {
  background: var(--oi-calendar-dark);
  color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.oi-calendar-panch__head::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.10) 0%, rgba(245,158,11,0) 70%);
  pointer-events: none;
  /* Replicates the old overflow:hidden clipping for just this decorative
     circle, without clipping the dropdown panel that sits in this header. */
  clip-path: inset(40px 40px 0 0);
}
.oi-calendar-panch__date {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: #fff;
}
.oi-calendar-panch__sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 3px;
}
.oi-calendar-panch__controls { display: flex; align-items: center; gap: 6px; }
.oi-calendar-panch__lang,
.oi-calendar-panch__year {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.oi-calendar-panch__nav {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oi-calendar-panch__chev { font-size: 9px; }

/* Inner cards body */
.oi-calendar-panch__body {
  background: #fff;
  border: 1px solid var(--oi-calendar-line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oi-calendar-panch__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Info card (used inside panchang) */
.oi-calendar-info {
  background: #fff;
  border: 1px solid var(--oi-calendar-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px #0000000D;box-shadow: 0px 2px 12px 0px #00000012;
}
.oi-calendar-info__head {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  letter-spacing: .04em;
  text-transform: capitalize;
}
.oi-calendar-info__head svg { width: 14px; height: 14px; }

/* Pastel head variants */
.oi-calendar-info__head--mint     { background: var(--oi-calendar-tint-mint); }
.oi-calendar-info__head--mint svg { color: #16a34a; }
.oi-calendar-info__head--cream    { background: linear-gradient(93.44deg, #FFFBEB 0%, #FEF3C7 100%); border-bottom: 1px solid #FDE68A;}
.oi-calendar-info__head--cream svg{ color: #b45309; }
.oi-calendar-info__head--pink     { background: linear-gradient(93.44deg, #FFF1F2 0%, #FECACA 100%);border-bottom: 1px solid #FCA5A5;}
.oi-calendar-info__head--pink svg { color: var(--oi-calendar-brand); }
.oi-calendar-info__head--lavender { background: linear-gradient(93.44deg, #F5F3FF 0%, #EDE9FE 100%);border-bottom: 1px solid #C4B5FD;}
.oi-calendar-info__head--lavender svg { color: #6d28d9; }
.oi-calendar-info__head--peach    {background: linear-gradient(97.03deg, #FFF7ED 0%, #FED7AA 100%);border-bottom: 1px solid #FDBA74;}
.oi-calendar-info__head--peach svg{ color: #c2410c; }
.oi-calendar-info__head--sky      { background: linear-gradient(97.03deg, #EEF2FF 0%, #C7D2FE 100%);border-bottom: 1px solid #A5B4FC;}
.oi-calendar-info__head--sky svg  { color: #4338ca; }
.oi-calendar-info__head--rose     { background: linear-gradient(97.03deg, #FDF2F8 0%, #FBCFE8 100%);border-bottom: 1px solid #F9A8D4;}
.oi-calendar-info__head--rose svg { color: #be185d; }

.oi-calendar-info__head--mint1    { background: linear-gradient(97.03deg, #F0FDF4 0%, #BBF7D0 100%);border-bottom: 1px solid #86EFAC; }


.oi-calendar-info__body { padding: 4px 18px; }
.oi-calendar-info__entry {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--oi-calendar-line-soft);
  font-size: 14px;color: #111827;
}
.oi-calendar-info__entry:last-child { border-bottom: none; }
.oi-calendar-info__label { color: #111827; font-weight: 400; }
.oi-calendar-info__val   { color: #111827; font-weight: 700; }
.oi-calendar-info__val-muted {
  color: #6B7280;
  font-weight: 400;
  font-size: 14px;
  margin-left: 4px;
}
.oi-calendar-info__val-stack {
  display: block;
  margin-top: 2px;
  color: #111827;
  font-weight: 500;
  font-size: 12.5px;
}

/* Planet Position grid */
.oi-calendar-planet {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.oi-calendar-planet__cell {
  height: 46px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: #fdf0c4;
  color: #111827;
}
.oi-calendar-planet__cell--head {
  background: #fde68a;
  color: #111827;
}
.oi-calendar-planet__cell--empty {
  background: #f3f4f6;
  color: #cbd5e1;
  font-weight: 400;
}

.oi-calendar-planet-tablewrap {margin: 20px auto;max-width: 300px;max-height: 300px;}
.oi-calendar-planet-tablewrap table {border-collapse: collapse;border: 1px solid #FDE68A;table-layout: fixed;width: 300px;height: 300px;}
.oi-calendar-planet-tablewrap table td {height: 25%;vertical-align: middle;width: 25%;border: 1px solid #FDE68A;text-align: center;}


/* Important Timings grid */
.oi-calendar-timings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.oi-calendar-timings__cell {
  padding: 16px 20px;
  border-right: 1px solid var(--oi-calendar-line-soft);
  border-bottom: 1px solid var(--oi-calendar-line-soft);
}
.oi-calendar-timings__cell:nth-child(3n) { border-right: none; }
.oi-calendar-timings__cell:nth-last-child(-n+3) { border-bottom: none; }
.oi-calendar-timings__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}
.oi-calendar-timings__label::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: #111827;
}
.oi-calendar-timings__val {
  font-size: 14px;
  color: #111827;
  font-weight: 400;
  line-height: 1.5;
}
.oi-calendar-timings__val + .oi-calendar-timings__val { margin-top: 2px; }

/* Sunrise/Sunset / Moonrise/Moonset */
.oi-calendar-sunmoon {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.oi-calendar-sunmoon__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oi-calendar-sunmoon__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b45309;
}
.oi-calendar-sunmoon__icon--moon { color: #4338ca; }
.oi-calendar-sunmoon__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.oi-calendar-sunmoon__time {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-top: 4px;
}
.oi-calendar-sunmoon__sep {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  gap: 4px;
}
.oi-calendar-sunmoon__sep-line {
  width: 1px;
  height: 28px;
  background: #e5e7eb;
}

/* Festivals & Events / Marriage Muhurats */
.oi-calendar-event {
  margin: 14px 16px;
  padding: 12px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background: linear-gradient(100.13deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 1px solid #86EFAC;
}
.oi-calendar-event__ico { color: #16a34a; }
.oi-calendar-event--muted {
  background: linear-gradient(99.58deg, #FDF2F8 0%, #FCE7F3 100%);
  border-color: #F9A8D4;
  color: #111827;
  font-weight: 700;
}
.oi-calendar-event--muted .oi-calendar-event__ico { color: #be185d; }

/* =========================================================================
   BLOCK 5 — TAMIL CALENDAR (combined: mini cal + festivals)
   ========================================================================= */

/* Top title bar (sits outside the gradient frame) */
.oi-calendar-tc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0 4px;
}
.oi-calendar-tc__bar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: rgba(28, 32, 56, 0.45);
  letter-spacing: -0.2px;
}
.oi-calendar-tc__bar-actions {
  display: flex;
  gap: 8px;
}
.oi-calendar-tc__btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  background: #1a1f33;
  color: #fff;
  border: 1px solid #1a1f33;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.oi-calendar-tc__btn:hover { background: #272b3d; }
.oi-calendar-tc__btn--solid {
  background: #ffffff;
  color: #1a1f33;
  border-color: #ffffff;
}
.oi-calendar-tc__btn--solid:hover { background: #f3f4f6; }

/* Purple → magenta gradient frame */
.oi-calendar-tc__frame {
  /*background: linear-gradient(135deg, #be185d 0%, #6d28d9 35%, #4c1d95 100%);
  border-radius: 14px;
  padding: 30px;*/
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Inner white card */
.oi-calendar-tc__card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

/* Calendar header — cream/yellow gradient with centered title */
.oi-calendar-tc__head {
  background: linear-gradient(107.15deg, #FEF3C7 25.87%, #FDE68A 79.03%);
  text-align: center;
  padding: 18px 20px;
  border-bottom: 1px solid #f3e8a0;
}
.oi-calendar-tc__head-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1d2e;
  letter-spacing: -0.2px;
}
.oi-calendar-tc__head-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #6b7280;
}

/* Week row */
.oi-calendar-tc__weekrow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #fafbfc;
  border-bottom: 1px solid var(--oi-calendar-line-soft);
}
.oi-calendar-tc__weekrow > div {
  padding: 10px 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oi-calendar-tc__we { color: var(--oi-calendar-brand); }

/* Days grid */
.oi-calendar-tc__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    overflow: hidden;
}
.oi-calendar-tc__grid > * {
    min-width: 0;
    box-sizing: border-box;
}
.oi-calendar-tc__day {
  position: relative;
  min-height: 80px;
  padding: 8px 10px;
  border-right: 1px solid var(--oi-calendar-line-soft);
  border-bottom: 1px solid var(--oi-calendar-line-soft);
  background: #ffffff;
}
.oi-calendar-tc__day:nth-child(7n) { border-right: none; }
.oi-calendar-tc__day:nth-last-child(-n+7) { border-bottom: none; }
.oi-calendar-tc__day--empty { background: #ffffff; }

.oi-calendar-tc__day-td {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
}
.oi-calendar-tc__day-num {
  font-size: 18px;
  font-weight: 700;
  color: #1a1d2e;
  line-height: 1;
  margin-top: 4px;
}
.oi-calendar-tc__day--weekend .oi-calendar-tc__day-num,
.oi-calendar-tc__day--fest .oi-calendar-tc__day-num {
  color: var(--oi-calendar-brand);
}
.oi-calendar-tc__day-nak {
  margin-top: 6px;
  font-size: 11px;
  color: #4b5563;
  line-height: 1.2;
}
.oi-calendar-tc__day-tithi {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--oi-calendar-muted);
  line-height: 1.2;
  font-weight: 600;
}
.oi-calendar-tc__day-extra {
  margin-top: 2px;
  font-size: 10px;
  color: var(--oi-calendar-brand);
  font-weight: 600;
  line-height: 1.2;
}
.oi-calendar-tc__day-pournami {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--oi-calendar-brand);
  font-weight: 600;
  line-height: 1.2;
}
.oi-calendar-tc__day-chathurthi {
  margin-top: 3px;
  font-size: 10px;
  color: #b45309;
  font-weight: 600;
  line-height: 1.2;
}
.oi-calendar-tc__day-mark {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.oi-calendar-tc__day-mark--amavasi { background: #0f172a; }
.oi-calendar-tc__day-mark--pournami {
  background: #ffffff;
  border: 1.5px solid #0f172a;
}
.oi-calendar-tc__day-moon {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 11px;
  color: #f59e0b;
}

/* Festival day tints */
.oi-calendar-tc__day--fest      { background: #fde2e2; }   /* pink — May Day / Vaikasi 1 */
.oi-calendar-tc__day--fest-soft { background: #fdecec; }   /* lighter pink — Karthikai */
.oi-calendar-tc__day--today {
  background: #e6f1fa;
  box-shadow: inset 0 0 0 2px #4a90c8;
}
.oi-calendar-tc__day--today .oi-calendar-tc__day-num { color: var(--oi-calendar-brand); }

/* Festivals & Important Days inner card */
.oi-calendar-tc__festhead {
  background: linear-gradient(93.44deg, #FFF1F2 0%, #FECACA 100%);
  border-bottom: 1px solid #FCA5A5;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #fbd5d5;
}
.oi-calendar-tc__festhead svg { color: var(--oi-calendar-brand); flex-shrink: 0; }

.oi-calendar-tc__festgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.oi-calendar-tc__festitem {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  font-size: 13px;
  border-right: 1px solid #eef0f3;
  border-bottom: 1px solid #eef0f3;
  background: #DFE5FF;
}
.oi-calendar-tc__festitem:nth-child(2n) { border-right: none; }
.oi-calendar-tc__festitem:nth-last-child(-n+2) { border-bottom: none; }
/* Alternating row stripes — pairs (1,2), (5,6), (9,10) get the light blue */
.oi-calendar-tc__festitem:nth-child(4n+1),
.oi-calendar-tc__festitem:nth-child(4n+2) {
  background: #ECF0FF;
}
.oi-calendar-tc__festdate {
  font-weight: 500;
  color: #374151;
  font-size: 13px;
  text-transform: uppercase;
}
.oi-calendar-tc__festev {
  color: #374151;
}

/* =========================================================================
   BLOCK 7 — MAY 2026 — FESTIVALS & HOLIDAYS
   ========================================================================= */
.oi-calendar-fest {}
.oi-calendar-fest__head {
  background: var(--oi-calendar-dark);
  color: #fff;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oi-calendar-fest__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.oi-calendar-fest__tag {
  font-size: 12.5px;
  color: #9ca3af;
  font-weight: 500;
}
.oi-calendar-fest__cols {
  display: grid;
  grid-template-columns: 90px 1fr;
  background: #F3F4F6;
  padding: 12px 22px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid #E5E7EB;
}
.oi-calendar-fest__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 13.5px;
}
.oi-calendar-fest__row:last-child { border-bottom: none; }
.oi-calendar-fest__row:nth-child(even) { background: #FAFAFA; }
.oi-calendar-fest__date {
  font-weight: 700;
  color: #111827;
  font-size: 13px;
  text-transform: uppercase;
}
.oi-calendar-fest__date--red { color: var(--oi-calendar-brand); }
.oi-calendar-fest__ev {
  color: #374151;
  display: flex;
  align-items: center;
  gap: 10px;
}
.oi-calendar-fest__dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.oi-calendar-fest__dot--brand    { background: var(--oi-calendar-brand); border-radius: 2px; }
.oi-calendar-fest__dot--pournami {
  background: #fff;
  border: 1.5px solid var(--oi-calendar-pournami-bd);
}
.oi-calendar-fest__dot--amavasi  { background: var(--oi-calendar-amavasi); }
.oi-calendar-fest__moon {
  display: inline-block;
  font-size: 14px;
  color: var(--oi-calendar-chathurthi);
}

/* =========================================================================
   JS UI: dropdowns, toast, selected day
   ========================================================================= */

/* Dropdown wrapper sits inline around the trigger button */
.oi-calendar-dropdown-wrap {
  position: relative;
  display: inline-block;
}

/* Dropdown menu (Language / Year) */
.oi-calendar-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--oi-calendar-line);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
  z-index: 50;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.oi-calendar-dropdown--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.oi-calendar-dropdown--year { min-width: 84px; }
.oi-calendar-dropdown__item {
  padding: 8px 14px;
  font-size: 13px;
  color: #212529;
  cursor: pointer;
  white-space: nowrap;
}
.oi-calendar-dropdown__item:hover { background: #f3f4f6; }
.oi-calendar-dropdown__item--active {
  background: #fef2f2;
  color: var(--oi-calendar-brand);
  font-weight: 600;
}

/* Selected day (after click) — same visual as today */
.oi-calendar-day--selected {
  background: var(--oi-calendar-today-bg);
  box-shadow: inset 0 0 0 2px var(--oi-calendar-today-border);
}
.oi-calendar-day--selected .oi-calendar-day__num { color: var(--oi-calendar-brand); }
.oi-calendar-mini-day--selected {
  background: var(--oi-calendar-today-bg);
  box-shadow: inset 0 0 0 2px var(--oi-calendar-today-border);
}
.oi-calendar-mini-day--selected .oi-calendar-mini-day__num { color: var(--oi-calendar-brand); }
.oi-calendar-tc__day--selected {
  background: #e6f1fa;
  box-shadow: inset 0 0 0 2px #4a90c8;
}
.oi-calendar-tc__day--selected .oi-calendar-tc__day-num { color: var(--oi-calendar-brand); }

/* Toast for Share fallback */
.oi-calendar-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  background: #1a1f33;
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
}
.oi-calendar-toast--in {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* faq style */
.main-head-two {
  font-family: Arial;
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  leading-trim: none;
  line-height: 30px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #28313a;
  margin-bottom: 24px;
}
.month-wise {
  margin-bottom: 40px;
}
.each-moth {
  margin-bottom: 16px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 5px 0px #0000001a;
}
.month-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 25px;
}
.month-q > p {
  font-family: Arial;
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #28313a;
}
.each-moth.active .month-q img {
  transform: rotate(180deg);
  border: 0 none;
  max-width: 100%;
}
.oi-cal-dailycal-news-list {
  padding: 0px 20px 20px 20px;
}
/* faq style */


/* rifght side latest article */
.oi-article-updates ul {padding: 0px;}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit; /* optional */
}

.oi-article-updates{padding: 24px 23px;background: #f2f5f5; border-radius: 16px;margin-bottom: 20px;}
.oi-article-updates-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    margin: 3px;
}

.oi-article-updates-thumb img {
    border-radius: 14px;
    max-width: 100%;
    display: block;
    height: 100%;
    width: 100%;
    transition: all 0.3s ease;
}
.oi-article-updates-dtls {
    height: 62px;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;font-size: 16px;line-height: 21px;margin: 8px 0px;
}
.oi-article-updates-dtls a {
    color: var(--font-color-secondary);
}
.oi-article-updates-ctry{font-size: 14px;color: #8F99A3;line-height: 17px;}
.oi-article-updates ul li{padding-bottom: 33px;padding-top: 24px; border-bottom: 1px solid var(--all-border-color);}
.oi-article-updates ul li:first-child{padding-top: 0px;}
.oi-article-updates ul li:last-child{padding-bottom: 0px;border-bottom: none;}
.ad-2img{width: 100%;display: block;}
.oi-article-updates ul li:hover .oi-article-updates-thumb img {transform: scale(1.2);}


.more-article-thumb img{width: 100%;display: block;border-radius: 12px;}
.more-article-desc {
    height: 40px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-size: 15px;font-weight: 700;
    line-height: 20px;
    margin-top: 8px;
}
.more-article-desc a{color: var(--font-color-secondary);}
.more-art-split{display: flex;align-items: center;justify-content: space-between;padding-top: 4px;color: #8F99A3;font-size: 13px;font-weight: bold;}
.more-article-signup {
    width: 80px;
    height: 40px;
    background: var(--signup) 0 0 no-repeat;
    display: inline-block;
    vertical-align: middle;
}
.oi-more-articles-block ul li{padding-bottom: 24px;}