/* Pages ported from the PO's design mockups follow the mockup's design (layout, tables, lists,
   sizes) on web and mobile. Only their colours and fonts come from the site theme
   (resources/css/app.css @theme). Doubled class so these win over each page's `.tmc90` rules. */
.tmc90.tmc90 {
    --orange: #FF851A;       /* --color-primary */
    --orange-lt: #FF851A;
    --green: #008B48;        /* --color-green */
    --red: #A11111;          /* --color-red */
    --blue: #065ABA;         /* --color-blue */
    --ff-ta: var(--font-tamil);
    --ff-num: var(--font-tamil);
}

/* TMC-130: one FAQ style sitewide, the site theme's (resources/views/shared/faqs.blade.php): rows split by a
   grey rule, 15.5px bold questions, a chevron on the right; the open question turns orange.
   Doubled class so it wins over the pages' own `.tmc90 details` / `summary` rules. */
.site-faq.site-faq{display:block; border:0; padding:0; max-width:none}
.site-faq.site-faq details{background:none; border:0; border-radius:0; padding:0; margin:0 0 8px}
.site-faq.site-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:16px 0; border-bottom:1px solid #E3E3E3; position:static;
  font-size:15.5px; line-height:1.65; font-weight:700; color:#000}
.site-faq.site-faq details:last-child:not([open]) summary{border-bottom:0}
.site-faq.site-faq summary::-webkit-details-marker{display:none}
.site-faq.site-faq summary::after{content:""; position:static; flex:0 0 auto; width:8px; height:8px; margin:-4px 8px 0 0;
  border:0; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); font-size:0}
.site-faq.site-faq details[open] summary{color:#FF851A}
.site-faq.site-faq details[open] summary::after{transform:rotate(-135deg); margin-top:4px}
.site-faq.site-faq details .ans{padding:12px 0 16px; margin:0; font-size:14px; line-height:1.95; color:#000; max-width:none}

/* One filter pill on every page (All · தேய்பிறை · வளர்பிறை on the viratham and muhurtham pages, the religions on
   பண்டிகை நாட்கள்), phones and desktop: white with a light border; the chosen one filled orange with white text,
   its icon and count white and a ✕ (tap again for All). Pirai icons orange, as on the viratham pages. Pages set
   only the row's margins. Doubled class so it wins over the pages' own rules. */
.tmc90.tmc90 .pfil{display:flex; flex-wrap:nowrap; gap:8px}
.tmc90.tmc90 .pf{display:inline-flex; align-items:center; gap:6px; font-family:var(--ff-ta); white-space:nowrap;
  font-size:13.5px; font-weight:400; line-height:1.5; padding:7px 14px; border-radius:32px;
  border:1px solid #E9E1D6; background:#fff; color:#35343D; cursor:pointer}
.tmc90.tmc90 .pf b{font-family:var(--ff-num); font-size:12px; font-weight:700; color:#8A817A}
.tmc90.tmc90 .pf .pic{width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.4; color:#E5772A}
.tmc90.tmc90 .pf .x{display:none; font-size:11px; margin-left:2px}
.tmc90.tmc90 .pf:hover{border-color:#FF851A}
.tmc90.tmc90 .pf:focus-visible{outline:2px solid #FF851A; outline-offset:2px}
.tmc90.tmc90 .pf[aria-pressed="true"]{background:#FF851A; border-color:#FF851A; color:#fff; font-weight:600}
.tmc90.tmc90 .pf[aria-pressed="true"] b,
.tmc90.tmc90 .pf[aria-pressed="true"] .pic,
.tmc90.tmc90 .pf[aria-pressed="true"] .x{color:#fff}
.tmc90.tmc90 .pf[aria-pressed="true"] .x{display:inline}
@media (max-width:420px){
  .tmc90.tmc90 .pfil{gap:6px}
  .tmc90.tmc90 .pf{flex:1 1 auto; justify-content:center; padding:6px 4px; gap:4px; font-size:clamp(11.5px,3.7vw,13px)}
  .tmc90.tmc90 .pf .pic{width:12px; height:12px}
  .tmc90.tmc90 .pf[aria-pressed="true"] .x{display:none}
}