/*
Theme Name:   Sarkari Result Central
Theme URI:    https://sarkariresultcentral.com/
Description:  Pixel-perfect child theme for sarkariresultcentral.com — Tailwind + Alpine on a GeneratePress base. Mirrors the original React design (gradient header, status-coloured cards, detail pages, modals, EN/HI toggle, profile + eligibility filter).
Author:       Sarkari Result Central
Author URI:   https://sarkariresultcentral.com/
Template:     generatepress
Version:      0.1.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  sarkariresultcentral
*/

/* Reset GeneratePress containers that fight with Tailwind. */
.site,
.site-content,
.site-main,
#page,
.inside-article,
.inside-page-header,
.inside-footer-widgets,
.inside-site-info {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.entry-header,
.entry-meta,
.page-header-image,
.generate-back-to-top {
  display: none !important;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Inter", "Noto Sans Devanagari", "Helvetica Neue", Arial, sans-serif;
}

/* Reset default <button> styles from GeneratePress / browser so any button
 * without an explicit bg-* class doesn't inherit a dark/gray background.
 * Tailwind utility classes (bg-white, bg-indigo-600, etc.) still win. */
button {
  background-color: transparent;
  background-image: none;
  color: inherit;
  border: 0;
}
/* GeneratePress sets a dark background (#3f4d57) + white text on ANY button:hover
 * site-wide. Override across all the GP/native selectors so no unstyled button
 * ever goes dark on hover. Buttons with explicit Tailwind hover utilities
 * (e.g. .hover:bg-indigo-700) still win because class-based selectors have
 * higher specificity than these element/attribute selectors. */
button:hover, button:focus, button:active,
input[type="reset"]:hover,  input[type="reset"]:focus,
input[type="button"]:hover, input[type="button"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
.button:hover, .button:focus,
.menu-toggle:hover, .menu-toggle:focus {
  background-color: transparent;
  background-image: none;
  color: inherit;
}

/* Soft, eye-friendly hover for collapsible / panel-like buttons.
 * Uses indigo-50 (#ecfdf5) — pale lavender that matches the brand without
 * being harsh. Marked !important so any parent-theme rules can't dim it. */
.gsr-soft-btn:hover {
  background-color: rgb(236 253 245) !important;
}
.gsr-soft-btn:active {
  background-color: rgb(209 250 229) !important; /* indigo-100, a touch darker for press feedback */
}

/* ---------- Category pills (All / Latest Jobs / Results / …) ---------- */
/* Locked colours so any GeneratePress / browser default can't bleed through. */
.gsr-cat-pill {
  background-color: #ffffff !important;
  color: rgb(15 23 42) !important;             /* slate-900 — high contrast */
  border-color: rgb(226 232 240) !important;   /* slate-200 */
}
.gsr-cat-pill:hover {
  color: rgb(4 120 87) !important;            /* indigo-700 on hover */
  border-color: rgb(110 231 183) !important;   /* indigo-300 */
}
.gsr-cat-pill-active,
.gsr-cat-pill-active:hover {
  background-color: rgb(5 150 105) !important; /* indigo-600 */
  color: #ffffff !important;
  border-color: rgb(5 150 105) !important;
  box-shadow: 0 4px 10px -2px rgb(99 102 241 / 0.35);
}

/* ---------- Language switcher (EN / हिं) ---------- */
.gsr-lang-switch a {
  color: rgb(255 255 255) !important;
  letter-spacing: 0.02em;
  font-size: 1rem;                              /* 16px — comfortable tap target */
  line-height: 1.2;
}
.gsr-lang-switch a:hover {
  background-color: rgba(255, 255, 255, 0.20);
}
.gsr-lang-switch a.gsr-lang-active {
  background-color: #ffffff !important;
  color: rgb(4 120 87) !important;             /* indigo-700 — strong contrast on white */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---------- Header brand ---------- */
/* The brand name uses a crisp white-to-pale-indigo gradient so it pops against
 * the indigo→violet gradient header instead of fading into it. */
.gsr-brand-name {
  background: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);   /* subtle depth */
  letter-spacing: -0.01em;
}
/* Logo tile (GR) — subtle inner glow + smooth hover. */
.gsr-brand-link {
  transition: opacity .2s ease;
}
.gsr-brand-link:hover { opacity: 0.92; }
.gsr-brand-link:hover .gsr-brand-name {
  filter: brightness(1.08);
}

/* ---------- Search bar ---------- */
/* Wrapper gives it a visible "card" feel against the page background — soft indigo
 * tint + lifting shadow so the bar reads as a distinct UI element, not a void. */
.gsr-search-wrap {
  position: relative;
  padding: 4px;                              /* room for the outer ring effect */
  border-radius: 1rem;
  background: linear-gradient(135deg, rgb(236 253 245), rgb(240 253 250));
  box-shadow:
    0 10px 25px -10px rgba(99, 102, 241, 0.25),
    0 4px 10px -3px rgba(99, 102, 241, 0.10),
    inset 0 0 0 1px rgba(99, 102, 241, 0.10);
  transition: box-shadow .2s ease;
}
.gsr-search-wrap:focus-within {
  box-shadow:
    0 14px 30px -10px rgba(99, 102, 241, 0.40),
    0 6px 14px -3px rgba(99, 102, 241, 0.18),
    inset 0 0 0 2px rgba(99, 102, 241, 0.45);
}

/* The input itself: centered text + icon group, clear contrast. */
.gsr-search-input {
  width: 100%;
  padding: 1.1rem 3.5rem;                    /* equal left/right to allow centred content */
  font-size: 1.05rem;
  line-height: 1.4;
  color: rgb(15 23 42);                      /* slate-900 */
  background: #fff;
  border: 0;                                 /* the wrapper provides the visual border */
  border-radius: 0.75rem;
  text-align: center;                        /* placeholder + typed text both centred */
  outline: none;
}
.gsr-search-input::placeholder {
  color: rgb(71 85 105);                     /* slate-600 — readable, not loud */
  opacity: 1;
  font-weight: 500;
}

/* Icon: sit just left of where the centred text begins. We use absolute
 * positioning anchored 50% from left then translate left by half the
 * approx-placeholder-width — but simpler: keep icon at fixed left padding
 * since text-align centres around the available space minus padding. */
.gsr-search-icon {
  filter: drop-shadow(0 0 1px rgb(255 255 255));
}

/* Tailwind line-clamp polyfill (utility ships in Tailwind ≥3.3 but we add a safety net). */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth language transitions without layout shift. */
html { scroll-behavior: smooth; }

/* Hide elements with [x-cloak] before Alpine has hydrated. */
[x-cloak] { display: none !important; }

/* Screen-reader-only utility — keeps content in the DOM for SEO/a11y but visually hides it. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Kill default link underlines globally (override GeneratePress + browser default).
 * Also force link color to inherit from parent — fixes the browser's default
 * visited-link purple that was bleeding through on the header logo.
 * Tailwind's `.underline` utility still works for places we explicitly want one. */
a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}
.underline { text-decoration: underline; }   /* Tailwind utility keeps working */
a:hover.underline,
a:hover .underline { text-decoration: underline; }

/* ----- Lock Tailwind text-colour utilities so they survive the `color: inherit`
 *       reset above on :hover / :visited / :focus / :active. Without this,
 *       white text on coloured buttons (e.g. "Apply on official site") goes
 *       invisible on hover because the parent's dark colour bleeds through. */
.text-white,
.text-white:hover, .text-white:focus, .text-white:active, .text-white:visited,
a.text-white,
a.text-white:hover, a.text-white:focus, a.text-white:active, a.text-white:visited {
  color: #ffffff !important;
}
.text-white * { color: inherit; }            /* SVG icons inherit white via currentColor */

/* Same protection for indigo CTA labels used inside light buttons. */
.text-indigo-600,
.text-indigo-600:hover, .text-indigo-600:focus, .text-indigo-600:active, .text-indigo-600:visited,
a.text-indigo-600,
a.text-indigo-600:hover, a.text-indigo-600:focus, a.text-indigo-600:active, a.text-indigo-600:visited {
  color: rgb(5 150 105) !important;          /* indigo-600 */
}
.text-indigo-700,
.text-indigo-700:hover, .text-indigo-700:focus, .text-indigo-700:active, .text-indigo-700:visited,
a.text-indigo-700,
a.text-indigo-700:hover, a.text-indigo-700:focus, a.text-indigo-700:active, a.text-indigo-700:visited {
  color: rgb(4 120 87) !important;          /* indigo-700 */
}

/* Inside post content, allow underlines back ONLY if the editor explicitly added
 * an inline <u> or <ins> tag. WP/Gutenberg block links keep no underline. */
.entry-content u,
.entry-content ins { text-decoration: underline; }

/* ---------- Layout polish ---------- */

/* Subtle lift + shadow on cards when hovered. */
.gsr-card {
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.gsr-card:hover {
  transform: translateY(-2px);
  border-color: rgb(167 243 208);  /* indigo-200 */
  box-shadow: 0 4px 12px -2px rgb(99 102 241 / 0.08), 0 2px 4px -1px rgb(99 102 241 / 0.04);
}

/* ============================================================
 *  LAZY-RENDER CARDS BELOW THE FOLD  (May 2026 PSI fix)
 *  ----------
 *  `content-visibility: auto` lets the browser skip layout +
 *  paint for cards that are off-screen, dramatically cutting
 *  main-thread time on first paint. `contain-intrinsic-size`
 *  reserves space so scrollbar / scroll position stays stable
 *  while cards are skipped — without it, the page would jump.
 *  Cards become "active" (rendered normally) as they scroll
 *  into the viewport, with no JS required.
 *  We apply this only to the homepage filtered-pool grid
 *  (.gsr-cards-lazy) so other small grids — Top of the Week,
 *  Just-in marquee, etc. — keep their normal render path.
 * ============================================================ */
.gsr-cards-lazy > .gsr-card,
.gsr-cards-lazy > a {
  content-visibility: auto;
  contain-intrinsic-size: 220px 320px;
}

/* Section heading icon tile — soft gradient instead of flat indigo-50. */
section > .flex > span.w-7.h-7.bg-indigo-50 {
  background-image: linear-gradient(135deg, #ecfdf5 0%, #f5f3ff 100%);
}

/* ============================================================
 *  COLOURFUL SECTION HEADINGS (detail page)
 *  ----------
 *  Each section card uses a theme class (.gsr-sec--indigo,
 *  --emerald, --amber, --rose, --sky, --violet, --teal) which
 *  swaps the icon-tile gradient, the underline accent and the
 *  glow shadow. Falls back to indigo if no theme set.
 * ============================================================ */
.gsr-sec { position: relative; }
.gsr-sec-head {
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
/* Coloured accent underline beneath the heading */
.gsr-sec-head::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 3rem;
  height: 2px;
  border-radius: 999px;
  background: var(--sec-accent, linear-gradient(90deg, #4338CA, #6366F1));
}
.gsr-sec-icon {
  background: var(--sec-tile, linear-gradient(135deg, #4338CA 0%, #6366F1 100%)) !important;
  color: #ffffff !important;
  box-shadow:
    0 6px 14px -4px var(--sec-glow, rgba(99,102,241,0.45)),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.gsr-sec-icon i,
.gsr-sec-icon svg { color: #ffffff !important; stroke: #ffffff !important; }
.gsr-sec-title {
  background: var(--sec-text-grad, linear-gradient(135deg, #1e293b 0%, #334155 100%));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

.gsr-sec--indigo {
  --sec-tile:   linear-gradient(135deg, #4338CA 0%, #6366F1 100%);
  --sec-accent: linear-gradient(90deg, #4338CA, #6366F1);
  --sec-glow:   rgba(99,102,241,0.45);
  --sec-text-grad: linear-gradient(135deg, #312E81 0%, #4338CA 100%);
}
.gsr-sec--violet {
  --sec-tile:   linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
  --sec-accent: linear-gradient(90deg, #6D28D9, #8B5CF6);
  --sec-glow:   rgba(139,92,246,0.45);
  --sec-text-grad: linear-gradient(135deg, #4C1D95 0%, #6D28D9 100%);
}
.gsr-sec--emerald {
  --sec-tile:   linear-gradient(135deg, #047857 0%, #10B981 100%);
  --sec-accent: linear-gradient(90deg, #047857, #10B981);
  --sec-glow:   rgba(16,185,129,0.45);
  --sec-text-grad: linear-gradient(135deg, #064E3B 0%, #047857 100%);
}
.gsr-sec--amber {
  --sec-tile:   linear-gradient(135deg, #B45309 0%, #F59E0B 100%);
  --sec-accent: linear-gradient(90deg, #B45309, #F59E0B);
  --sec-glow:   rgba(245,158,11,0.45);
  --sec-text-grad: linear-gradient(135deg, #78350F 0%, #B45309 100%);
}
.gsr-sec--rose {
  --sec-tile:   linear-gradient(135deg, #BE185D 0%, #F43F5E 100%);
  --sec-accent: linear-gradient(90deg, #BE185D, #F43F5E);
  --sec-glow:   rgba(244,63,94,0.45);
  --sec-text-grad: linear-gradient(135deg, #881337 0%, #BE185D 100%);
}
.gsr-sec--sky {
  --sec-tile:   linear-gradient(135deg, #0369A1 0%, #0EA5E9 100%);
  --sec-accent: linear-gradient(90deg, #0369A1, #0EA5E9);
  --sec-glow:   rgba(14,165,233,0.45);
  --sec-text-grad: linear-gradient(135deg, #0C4A6E 0%, #0369A1 100%);
}
.gsr-sec--teal {
  --sec-tile:   linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
  --sec-accent: linear-gradient(90deg, #0F766E, #14B8A6);
  --sec-glow:   rgba(20,184,166,0.45);
  --sec-text-grad: linear-gradient(135deg, #134E4A 0%, #0F766E 100%);
}

/* ============================================================
 *  IMPORTANT DATES — colourful timeline cards
 *  Each row is a card with a coloured left accent + coloured
 *  date-value pill. Colours rotate per row (indigo → emerald →
 *  amber → rose → sky → violet → teal) so adjacent rows are
 *  visually distinct but harmonious.
 * ============================================================ */
.gsr-dates { display: flex; flex-direction: column; gap: 0.5rem; }

.gsr-date-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem 0.625rem 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid rgb(226 232 240);                /* slate-200 */
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.gsr-date-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--row-accent, linear-gradient(180deg, #4338CA, #6366F1));
}
.gsr-date-row:hover {
  transform: translateX(2px);
  border-color: rgb(167 243 208);                    /* indigo-200 */
  box-shadow: 0 6px 16px -6px var(--row-glow, rgba(99,102,241,0.30));
}

.gsr-date-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: var(--row-icon-bg, #ecfdf5);
  color: var(--row-icon-fg, #4338CA);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--row-icon-ring, rgba(99,102,241,0.18));
}
.gsr-date-icon i,
.gsr-date-icon svg { color: var(--row-icon-fg, #4338CA) !important; stroke: var(--row-icon-fg, #4338CA) !important; }

.gsr-date-label {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(51 65 85);                              /* slate-700 */
  line-height: 1.35;
}

.gsr-date-value {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--row-pill-bg, linear-gradient(135deg, #ecfdf5, #d1fae5));
  color: var(--row-pill-fg, #3730A3) !important;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--row-pill-ring, rgba(99,102,241,0.20));
}

/* Colour rotation — 6 distinct palettes, then repeats */
.gsr-date-row:nth-child(6n+1) {
  --row-accent:   linear-gradient(180deg, #4338CA, #6366F1);
  --row-glow:     rgba(99,102,241,0.32);
  --row-icon-bg:  #ecfdf5;  --row-icon-fg: #4338CA;  --row-icon-ring: rgba(67,56,202,0.20);
  --row-pill-bg:  linear-gradient(135deg, #ecfdf5, #a7f3d0);
  --row-pill-fg:  #3730A3;  --row-pill-ring: rgba(67,56,202,0.30);
}
.gsr-date-row:nth-child(6n+2) {
  --row-accent:   linear-gradient(180deg, #047857, #10B981);
  --row-glow:     rgba(16,185,129,0.32);
  --row-icon-bg:  #d1fae5;  --row-icon-fg: #047857;  --row-icon-ring: rgba(4,120,87,0.22);
  --row-pill-bg:  linear-gradient(135deg, #d1fae5, #a7f3d0);
  --row-pill-fg:  #065F46;  --row-pill-ring: rgba(4,120,87,0.32);
}
.gsr-date-row:nth-child(6n+3) {
  --row-accent:   linear-gradient(180deg, #B45309, #F59E0B);
  --row-glow:     rgba(245,158,11,0.32);
  --row-icon-bg:  #fef3c7;  --row-icon-fg: #B45309;  --row-icon-ring: rgba(180,83,9,0.22);
  --row-pill-bg:  linear-gradient(135deg, #fef3c7, #fde68a);
  --row-pill-fg:  #78350F;  --row-pill-ring: rgba(180,83,9,0.32);
}
.gsr-date-row:nth-child(6n+4) {
  --row-accent:   linear-gradient(180deg, #BE185D, #F43F5E);
  --row-glow:     rgba(244,63,94,0.32);
  --row-icon-bg:  #ffe4e6;  --row-icon-fg: #BE185D;  --row-icon-ring: rgba(190,24,93,0.22);
  --row-pill-bg:  linear-gradient(135deg, #ffe4e6, #fecdd3);
  --row-pill-fg:  #881337;  --row-pill-ring: rgba(190,24,93,0.32);
}
.gsr-date-row:nth-child(6n+5) {
  --row-accent:   linear-gradient(180deg, #0369A1, #0EA5E9);
  --row-glow:     rgba(14,165,233,0.32);
  --row-icon-bg:  #e0f2fe;  --row-icon-fg: #0369A1;  --row-icon-ring: rgba(3,105,161,0.22);
  --row-pill-bg:  linear-gradient(135deg, #e0f2fe, #bae6fd);
  --row-pill-fg:  #0C4A6E;  --row-pill-ring: rgba(3,105,161,0.32);
}
.gsr-date-row:nth-child(6n+6) {
  --row-accent:   linear-gradient(180deg, #6D28D9, #8B5CF6);
  --row-glow:     rgba(139,92,246,0.32);
  --row-icon-bg:  #ede9fe;  --row-icon-fg: #6D28D9;  --row-icon-ring: rgba(109,40,217,0.22);
  --row-pill-bg:  linear-gradient(135deg, #ede9fe, #ddd6fe);
  --row-pill-fg:  #4C1D95;  --row-pill-ring: rgba(109,40,217,0.32);
}

/* Mobile: keep the layout tight but readable */
@media (max-width: 480px) {
  .gsr-date-row { padding: 0.5rem 0.625rem 0.5rem 0.875rem; gap: 0.5rem; }
  .gsr-date-icon { width: 2rem; height: 2rem; }
  .gsr-date-label { font-size: 0.8125rem; }
  .gsr-date-value { font-size: 0.75rem; padding: 0.3rem 0.55rem; }
}

/* Filter row dropdowns: nicer focus ring. */
select:focus { outline: none; box-shadow: 0 0 0 2px rgb(99 102 241 / 0.2); }

/* Header Telegram + WhatsApp join buttons — hidden on small phones because the
   full-width join banners below the header already cover that screen real estate
   prominently, and duplicate CTAs on a 360px viewport just push the brand off. */
@media (max-width: 479px) {
  .gsr-header-join { display: none !important; }
}

/* ---------- "Just in" marquee ticker ---------- */
.gsr-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;                                /* leave room for hover lift */
  /* Soft fade-out on both edges so cards visibly enter/exit instead of hard cut. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
}
.gsr-marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: gsr-marquee 60s linear infinite;
  will-change: transform;
}
.gsr-marquee-track:hover {
  animation-play-state: paused;
}
/* PERF FIX (May 2026): marquee--static variant disables the auto-scrolling
   animation. The animation was the LCP killer (Lighthouse picked an off-
   screen card as the LCP candidate). Replaced with horizontal scroll on
   touch / drag — same content, no animation, faster paint. */
.gsr-marquee--static {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.gsr-marquee--static .gsr-marquee-track {
  animation: none;
  width: auto;
}
.gsr-marquee--static .gsr-justin-card {
  scroll-snap-align: start;
}
/* PERF FIX (May 2026, revised): marquee--animated is the post-load state.
   Reactivates the scroll AFTER window.load fires (LCP already locked in by
   then). Wins back the live ticker without re-introducing the LCP regression. */
.gsr-marquee--animated {
  overflow: hidden;
  overflow-x: hidden;
}
.gsr-marquee--animated .gsr-marquee-track {
  animation: gsr-marquee 60s linear infinite;
  width: max-content;
}
.gsr-marquee--animated .gsr-marquee-track:hover {
  animation-play-state: paused;
}
.gsr-justin-card {
  flex-shrink: 0;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.gsr-justin-card:hover {
  transform: translateY(-2px);
  border-color: rgb(110 231 183);                /* indigo-300 */
}
@keyframes gsr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }        /* duplicate set makes -50% seamless */
}
/* NOTE: The prefers-reduced-motion override that killed .gsr-marquee-track
   animation was removed May 2026 — the ticker is core to the homepage UX
   (signals "site is live, new postings daily"). Users with reduce-motion
   still get all info via the cards above; the marquee just adds motion. */

/* ----------------------------------------------------------------------------
 * Hindi switcher inline prompt — visible CTA encouraging EN readers to
 * switch to the Hindi version. Helps the rural-mobile persona who often
 * doesn't notice the small EN/HI toggle in the top-right header.
 * ---------------------------------------------------------------------------- */
.gsr-lang-prompt {
  text-decoration: none !important;
}
.gsr-lang-prompt:hover .lucide-arrow-right,
.gsr-lang-prompt:focus .lucide-arrow-right {
  transform: translateX(3px);
  transition: transform .15s ease;
}

/* ----------------------------------------------------------------------------
 * Status pill on listing cards — instant visibility of Open / Closed / Result-Out
 * status without users having to tap into the detail page. Maps each ACF
 * status value to a colored chip.
 * ---------------------------------------------------------------------------- */
.gsr-card-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gsr-card-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.gsr-card-status-pill--start          { background:#cffafe; color:#0e7490; }
.gsr-card-status-pill--new            { background:#dbeafe; color:#1d4ed8; }
.gsr-card-status-pill--last_date_today{ background:#fee2e2; color:#b91c1c; }
.gsr-card-status-pill--closing_soon   { background:#fef3c7; color:#b45309; }
.gsr-card-status-pill--out            { background:#dcfce7; color:#15803d; }
.gsr-card-status-pill--declared       { background:#dcfce7; color:#15803d; }
.gsr-card-status-pill--expired        { background:#f1f5f9; color:#64748b; }

/* ----------------------------------------------------------------------------
 * Homepage hero spacing — tightens the gap between stats strip → Just-in →
 * search bar → filter pills → "Latest Jobs" heading on the homepage.
 * ---------------------------------------------------------------------------- */
main.max-w-6xl { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.gsr-marquee   { padding: 2px 0 !important; }
/* "Just in" section sits in <section class="mb-4"> — pull that closer. */
section.mb-4:has(> .gsr-marquee) { margin-bottom: 0.5rem !important; }
/* Tighten the gap between filter pills and the first "Latest Jobs" heading. */
.space-y-7 > section:first-child { margin-top: 0.25rem !important; }
.space-y-7   { row-gap: 1.25rem !important; }

/* Status badges look crisper. */
[class*="border-green-200"],
[class*="border-blue-200"],
[class*="border-red-200"],
[class*="border-amber-200"],
[class*="border-teal-200"] {
  font-feature-settings: "tnum";
}

/* Body bg with a hint of warmth — a tiny softness vs pure slate-50. */
body.bg-slate-50 {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) fixed;
  background-color: #f8fafc;
}

/* ============================================================
 *  Imported post content — restyle tables, headings, branding
 * ============================================================ */

/* 1) Neutralise any inline color/background from imported HTML so the page
 *    looks consistent with the site theme (kills the old red/green/blue/maroon). */
.gsr-post-content [style*="color"]:not([style*="background"]) {
  color: inherit !important;
}
.gsr-post-content font[color] { color: inherit !important; }

/* 2) Hide competitor branding patterns that leak through from the source. */
.gsr-post-content a[href*="sarkariresult.com.cm" i],
.gsr-post-content a[href*="sarkariresult.com" i],
.gsr-post-content :is(p, span, h1, h2, h3, h4, h5, h6, div):is(:has(> a[href*="sarkariresult" i])) {
  display: none !important;
}

/* 3) Headings inside imported content — replace gaudy colors with our gradient. */
.gsr-post-content h1,
.gsr-post-content h2,
.gsr-post-content h3,
.gsr-post-content h4 {
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-align: center;
  margin: 1rem 0 0.75rem;
  line-height: 1.35;
}
.gsr-post-content h1 { font-size: 1.25rem; }
.gsr-post-content h2 { font-size: 1.1rem; }
.gsr-post-content h3 { font-size: 1rem; }

/* 4) Pretty tables. Each <table> in imported content gets a unified look,
 *    and we rotate the header gradient by table index so adjacent tables
 *    have visually distinct (but harmonious) colour bands. */
.gsr-post-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.75rem 0;
  border-radius: 0.625rem;
  overflow: hidden;
  border: 1px solid rgb(226 232 240);    /* slate-200 */
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.gsr-post-content table tr:first-child td,
.gsr-post-content table th {
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%) !important; /* indigo→violet (default) */
  color: #ffffff !important;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  text-align: center;
  border: 0 !important;
}
.gsr-post-content table tr:first-child td *,
.gsr-post-content table th * {
  color: #ffffff !important;
  background: transparent !important;
}
/* Rotate gradient colour per table for visual variety */
.gsr-post-content table:nth-of-type(2n) tr:first-child td,
.gsr-post-content table:nth-of-type(2n) th {
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important; /* emerald→teal */
}
.gsr-post-content table:nth-of-type(3n) tr:first-child td,
.gsr-post-content table:nth-of-type(3n) th {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important; /* amber→darker amber */
}
.gsr-post-content table:nth-of-type(4n) tr:first-child td,
.gsr-post-content table:nth-of-type(4n) th {
  background: linear-gradient(135deg, #db2777 0%, #be185d 100%) !important; /* pink→rose */
}
.gsr-post-content table:nth-of-type(5n) tr:first-child td,
.gsr-post-content table:nth-of-type(5n) th {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; /* sky→blue */
}

/* Body rows of imported tables */
.gsr-post-content table tr + tr td {
  background: #ffffff !important;
  color: rgb(30 41 59) !important;       /* slate-800 */
  padding: 0.55rem 0.8rem;
  border-top: 1px solid rgb(241 245 249) !important; /* slate-100 */
  vertical-align: top;
  text-align: left;
}
.gsr-post-content table tr + tr:nth-child(odd) td {
  background: rgb(248 250 252) !important; /* very faint slate stripe */
}
.gsr-post-content table strong {
  color: rgb(5 150 105);                 /* indigo-600 — highlights */
  font-weight: 600;
}

/* 5) Replace harsh inline yellow highlight with a soft brand highlight */
.gsr-post-content [style*="background-color: yellow"],
.gsr-post-content [style*="background:#ff" i],
.gsr-post-content mark {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: rgb(120 53 15) !important;       /* warm amber-900 text */
  padding: 0 0.25em;
  border-radius: 0.25rem;
  font-weight: 600;
}

/* 6) Lists inside imported content — tidy spacing */
.gsr-post-content ul,
.gsr-post-content ol {
  margin: 0.5rem 0 0.75rem 1.25rem;
  padding-left: 0.5rem;
}
.gsr-post-content ul li,
.gsr-post-content ol li { margin: 0.25rem 0; }
.gsr-post-content ul { list-style: disc; }
.gsr-post-content ol { list-style: decimal; }

/* 7) Mobile: tables scroll horizontally if too wide */
@media (max-width: 640px) {
  .gsr-post-content table { font-size: 0.8rem; display: block; overflow-x: auto; }
  .gsr-post-content table tbody { display: table; width: 100%; }
}

/* ============================================================
 *  FINAL "Ready to apply?" CTA (end of detail page)
 *  Placed after all content so users read dates/eligibility/fee
 *  first. Lower bounce, better dwell time, better rankings.
 * ============================================================ */
/* Expired-variant: muted neutral tone so users see "Reference only" not "Apply now" */
.gsr-final-cta--expired {
  background:
    linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1px solid rgb(203 213 225) !important;        /* slate-300 */
  box-shadow: 0 4px 12px -4px rgba(100, 116, 139, 0.15) !important;
}
.gsr-final-cta--expired .gsr-final-cta-icon {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important; /* slate */
}
.gsr-final-cta--expired .gsr-final-cta-title { color: #334155 !important; } /* slate-700 */
.gsr-final-cta--expired .gsr-final-cta-body  { color: #64748b !important; } /* slate-500 */
.gsr-final-cta--expired .gsr-final-cta-btn {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important; /* slate, not indigo */
  box-shadow: 0 8px 20px -6px rgba(100, 116, 139, 0.40) !important;
}
.gsr-final-cta--expired .gsr-final-cta-btn:hover {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
}
.gsr-final-cta--expired .gsr-final-cta-meta { color: #94a3b8 !important; } /* slate-400 */

.gsr-final-cta {
  position: relative;
  margin: 1.5rem 0 1rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background:
    radial-gradient(at 0% 0%, rgba(99,102,241,0.10), transparent 55%),
    radial-gradient(at 100% 100%, rgba(167,139,250,0.12), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid rgb(167 243 208);                    /* indigo-200 */
  border-radius: 1rem;
  box-shadow:
    0 8px 24px -10px rgba(99, 102, 241, 0.25),
    0 2px 6px -1px rgba(99, 102, 241, 0.08);
  overflow: hidden;
}
.gsr-final-cta::before {
  /* coloured top accent stripe */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4338CA 0%, #6366F1 50%, #8B5CF6 100%);
}

.gsr-final-cta-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}
.gsr-final-cta-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #4338CA 0%, #8B5CF6 100%);
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(99, 102, 241, 0.45);
}
.gsr-final-cta-icon i,
.gsr-final-cta-icon svg { color: #ffffff !important; stroke: #ffffff !important; }

.gsr-final-cta-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #312E81 0%, #4338CA 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.gsr-final-cta-body {
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(71 85 105);                                 /* slate-600 */
}

.gsr-final-cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.95rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #7C3AED 100%);
  color: #ffffff !important;
  box-shadow:
    0 10px 25px -8px rgba(99, 102, 241, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  isolation: isolate;
  overflow: hidden;
}
.gsr-final-cta-btn::after {
  /* gentle shimmer on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.18) 45%,
      rgba(255, 255, 255, 0.30) 50%,
      rgba(255, 255, 255, 0.18) 55%,
      transparent 100%);
  transform: translateX(-110%);
  transition: transform .55s ease;
  pointer-events: none;
}
.gsr-final-cta-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #3730A3 0%, #4F46E5 50%, #6D28D9 100%);
  box-shadow:
    0 14px 32px -8px rgba(99, 102, 241, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gsr-final-cta-btn:hover::after { transform: translateX(110%); }
.gsr-final-cta-btn:active      { transform: translateY(0); }

.gsr-final-cta-btn i,
.gsr-final-cta-btn svg { color: #ffffff !important; stroke: #ffffff !important; }

.gsr-final-cta-arrow {
  transition: transform .2s ease;
}
.gsr-final-cta-btn:hover .gsr-final-cta-arrow { transform: translateX(3px); }

.gsr-final-cta-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: rgb(100 116 139);                               /* slate-500 */
}
.gsr-final-cta-meta i,
.gsr-final-cta-meta svg { color: rgb(5 150 105); }       /* emerald-600 — "verified" */

@media (max-width: 480px) {
  .gsr-final-cta       { padding: 1rem 0.95rem 0.95rem; border-radius: 0.875rem; }
  .gsr-final-cta-title { font-size: 1rem; }
  .gsr-final-cta-body  { font-size: 0.84rem; }
  .gsr-final-cta-btn   { padding: 0.85rem 0.875rem; font-size: 0.9rem; }
  .gsr-final-cta-meta  { font-size: 0.72rem; }
}

/* ============================================================
 *  WhatsApp + Telegram action buttons (detail pages)
 * ============================================================ */
.gsr-btn-whatsapp,
.gsr-btn-telegram {
  position: relative;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  isolation: isolate;
}
.gsr-btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.gsr-btn-whatsapp:hover {
  background: linear-gradient(135deg, #2bdb6c 0%, #149c8c 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(37, 211, 102, 0.55);
}
.gsr-btn-telegram {
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.gsr-btn-telegram:hover {
  background: linear-gradient(135deg, #34b7f4 0%, #25aae6 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(42, 171, 238, 0.55);
}
.gsr-btn-whatsapp:active,
.gsr-btn-telegram:active { transform: translateY(0); }

/* ============================================================
 *  STATIC PAGES (about / contact / privacy / disclaimer / terms / faq)
 *  Brand-matching header card with iconified eyebrow + title,
 *  themed per page slug. Content typography mirrors detail pages
 *  so the legal pages don't look like a different site.
 * ============================================================ */

/* Header card themes — drives icon-tile gradient, glow + eyebrow gradient */
.gsr-page--indigo  { --page-tile: linear-gradient(135deg,#4338CA,#6366F1); --page-glow: rgba(99,102,241,0.45);  --page-text-grad: linear-gradient(135deg,#312E81,#4338CA); }
.gsr-page--violet  { --page-tile: linear-gradient(135deg,#6D28D9,#8B5CF6); --page-glow: rgba(139,92,246,0.45); --page-text-grad: linear-gradient(135deg,#4C1D95,#6D28D9); }
.gsr-page--emerald { --page-tile: linear-gradient(135deg,#047857,#10B981); --page-glow: rgba(16,185,129,0.45); --page-text-grad: linear-gradient(135deg,#064E3B,#047857); }
.gsr-page--amber   { --page-tile: linear-gradient(135deg,#B45309,#F59E0B); --page-glow: rgba(245,158,11,0.45); --page-text-grad: linear-gradient(135deg,#78350F,#B45309); }
.gsr-page--rose    { --page-tile: linear-gradient(135deg,#BE185D,#F43F5E); --page-glow: rgba(244,63,94,0.45);  --page-text-grad: linear-gradient(135deg,#881337,#BE185D); }
.gsr-page--sky     { --page-tile: linear-gradient(135deg,#0369A1,#0EA5E9); --page-glow: rgba(14,165,233,0.45); --page-text-grad: linear-gradient(135deg,#0C4A6E,#0369A1); }

.gsr-page-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: var(--page-tile, linear-gradient(135deg,#4338CA,#6366F1)) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 22px -6px var(--page-glow, rgba(99,102,241,0.45)),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.gsr-page-icon i,
.gsr-page-icon svg { color: #ffffff !important; stroke: #ffffff !important; }

.gsr-page-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--page-text-grad, linear-gradient(135deg,#312E81,#4338CA));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.15rem;
  line-height: 1.1;
}
.gsr-page-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: rgb(15 23 42);              /* slate-900 */
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.25;
}
.gsr-page-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgb(71 85 105);             /* slate-600 */
  background: linear-gradient(135deg, #f8fafc, #ecfdf5);
  border: 1px solid rgb(226 232 240);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.gsr-page-meta i,
.gsr-page-meta svg { color: rgb(99 102 241); }

/* ===== Content typography ===== */
.gsr-page-content { color: rgb(51 65 85); }   /* slate-700 */
.gsr-page-content > * + * { margin-top: 0.75rem; }
.gsr-page-content p { margin: 0 0 0.85rem; line-height: 1.7; }
.gsr-page-content p:last-child { margin-bottom: 0; }

.gsr-page-content h2 {
  position: relative;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  margin: 1.5rem 0 0.6rem;
  padding-bottom: 0.35rem;
  line-height: 1.35;
}
.gsr-page-content h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 2.5rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4338CA, #6D28D9);
}
.gsr-page-content h2:first-child { margin-top: 0.25rem; }

.gsr-page-content h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgb(51 65 85);              /* slate-700 */
  margin: 1.1rem 0 0.45rem;
  letter-spacing: -0.005em;
}

.gsr-page-content a {
  color: rgb(4 120 87) !important;  /* indigo-700 */
  text-decoration: underline;
  text-decoration-color: rgba(99,102,241,0.35);
  text-underline-offset: 2px;
  transition: text-decoration-color .15s ease;
}
.gsr-page-content a:hover {
  text-decoration-color: rgb(4 120 87);
}

.gsr-page-content ul,
.gsr-page-content ol {
  margin: 0.5rem 0 0.85rem 1.25rem;
  padding-left: 0.5rem;
}
.gsr-page-content ul { list-style: disc; }
.gsr-page-content ol { list-style: decimal; }
.gsr-page-content ul li,
.gsr-page-content ol li { margin: 0.3rem 0; line-height: 1.6; }
.gsr-page-content ul li::marker { color: rgb(99 102 241); }
.gsr-page-content ol li::marker { color: rgb(109 40 217); font-weight: 700; }

.gsr-page-content strong { color: rgb(30 41 59); font-weight: 700; }
.gsr-page-content em     { color: rgb(4 120 87); }
.gsr-page-content code {
  background: rgb(241 245 249);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.88em;
  color: rgb(190 24 93);             /* pink-700 */
}
.gsr-page-content blockquote {
  border-left: 3px solid rgb(99 102 241);
  background: linear-gradient(135deg, #fafbff, #f0f4ff);
  padding: 0.6rem 0.9rem;
  margin: 0.75rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  color: rgb(51 65 85);
  font-style: italic;
}
.gsr-page-content hr {
  border: 0;
  border-top: 1px solid rgb(226 232 240);
  margin: 1.25rem 0;
}
.gsr-page-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.75rem 0;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  overflow: hidden;
  font-size: 0.875rem;
}
.gsr-page-content th {
  background: linear-gradient(135deg, #4338CA, #6D28D9);
  color: #ffffff !important;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.gsr-page-content td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgb(241 245 249);
}

/* ===== Table of contents (legal pages) — auto-rendered from <h2> anchors ===== */
.gsr-toc {
  background: linear-gradient(135deg, #f8fafc 0%, #ecfdf5 100%);
  border: 1px solid rgb(167 243 208);                /* indigo-200 */
  border-left: 4px solid rgb(99 102 241);            /* indigo-500 — strong left accent */
  border-radius: 0.75rem;
  padding: 0.95rem 1.1rem 1rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 4px 12px -6px rgba(99,102,241,0.18);
}
.gsr-toc-heading {
  margin: 0 0 0.55rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(4 120 87);                             /* indigo-700 */
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.gsr-toc-heading::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4338CA, #6D28D9);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.gsr-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  columns: 1;
  column-gap: 1.25rem;
}
@media (min-width: 540px) { .gsr-toc-list { columns: 2; } }
.gsr-toc-list li {
  margin: 0 !important;
  padding: 0.2rem 0 !important;
  break-inside: avoid;
  font-size: 0.82rem;
  line-height: 1.4;
  counter-increment: gsr-toc;
}
.gsr-toc-list { counter-reset: gsr-toc; }
.gsr-toc-list li::marker { content: ''; }
.gsr-toc-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: rgb(51 65 85) !important;                   /* slate-700 */
  text-decoration: none !important;
  transition: color .15s ease;
}
.gsr-toc-list a::before {
  content: counter(gsr-toc, decimal-leading-zero);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgb(99 102 241);                            /* indigo-500 */
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.gsr-toc-list a:hover {
  color: rgb(4 120 87) !important;                  /* indigo-700 */
}
.gsr-toc-list a:hover::before { color: rgb(4 120 87); }

/* Section anchors get a tiny "#" tag on hover for sharable links */
.gsr-page-content h2[id] { scroll-margin-top: 1rem; }
.gsr-page-content h2[id]::before {
  content: counter(gsr-sec, decimal-leading-zero) ' ·';
  display: inline-block;
  margin-right: 0.45rem;
  font-size: 0.78em;
  font-weight: 700;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
  counter-increment: gsr-sec;
}
.gsr-page-content { counter-reset: gsr-sec; }

/* ============================================================
 *  HTML SITEMAP page (/sitemap/, /hi/sitemap/)
 *  Branded human-readable index — coloured category cards,
 *  collapsible per-category posting lists, XML-sitemap pointer.
 * ============================================================ */

/* --- Top: category-overview grid (6 cards, one per category) --- */
.gsr-sm-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 480px) { .gsr-sm-cat-grid { grid-template-columns: 1fr 1fr; } }

.gsr-sm-cat {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid rgb(226 232 240);                /* slate-200 */
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.gsr-sm-cat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sm-accent, linear-gradient(180deg, #4338CA, #6366F1));
}
.gsr-sm-cat:hover {
  transform: translateY(-1px);
  border-color: rgb(167 243 208);
  box-shadow: 0 6px 16px -6px var(--sm-glow, rgba(99,102,241,0.30));
}
.gsr-sm-cat-icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 0.5rem;
  background: var(--sm-icon-bg, #ecfdf5);
  color: var(--sm-icon-fg, #4338CA) !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--sm-icon-ring, rgba(99,102,241,0.18));
  flex-shrink: 0;
}
.gsr-sm-cat-icon i, .gsr-sm-cat-icon svg {
  color: var(--sm-icon-fg, #4338CA) !important;
  stroke: var(--sm-icon-fg, #4338CA) !important;
}
.gsr-sm-cat-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  line-height: 1.25;
}
.gsr-sm-cat-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgb(15 23 42);                              /* slate-900 */
  letter-spacing: -0.01em;
}
.gsr-sm-cat-count {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgb(100 116 139);                           /* slate-500 */
}
.gsr-sm-cat-arrow {
  color: rgb(148 163 184) !important;
  stroke: rgb(148 163 184) !important;
  flex-shrink: 0;
  transition: transform .2s ease, color .15s ease;
}
.gsr-sm-cat:hover .gsr-sm-cat-arrow {
  transform: translateX(3px);
  color: var(--sm-icon-fg, #4338CA) !important;
  stroke: var(--sm-icon-fg, #4338CA) !important;
}

/* --- Per-category theme palette (reused by the collapsibles below) --- */
.gsr-sm-cat--indigo  { --sm-accent: linear-gradient(180deg,#4338CA,#6366F1); --sm-glow: rgba(99,102,241,0.30); --sm-icon-bg:#ecfdf5; --sm-icon-fg:#4338CA; --sm-icon-ring: rgba(67,56,202,0.20); }
.gsr-sm-cat--emerald { --sm-accent: linear-gradient(180deg,#047857,#10B981); --sm-glow: rgba(16,185,129,0.30); --sm-icon-bg:#d1fae5; --sm-icon-fg:#047857; --sm-icon-ring: rgba(4,120,87,0.22); }
.gsr-sm-cat--violet  { --sm-accent: linear-gradient(180deg,#6D28D9,#8B5CF6); --sm-glow: rgba(139,92,246,0.30); --sm-icon-bg:#ede9fe; --sm-icon-fg:#6D28D9; --sm-icon-ring: rgba(109,40,217,0.22); }
.gsr-sm-cat--amber   { --sm-accent: linear-gradient(180deg,#B45309,#F59E0B); --sm-glow: rgba(245,158,11,0.30); --sm-icon-bg:#fef3c7; --sm-icon-fg:#B45309; --sm-icon-ring: rgba(180,83,9,0.22); }
.gsr-sm-cat--sky     { --sm-accent: linear-gradient(180deg,#0369A1,#0EA5E9); --sm-glow: rgba(14,165,233,0.30); --sm-icon-bg:#e0f2fe; --sm-icon-fg:#0369A1; --sm-icon-ring: rgba(3,105,161,0.22); }
.gsr-sm-cat--rose    { --sm-accent: linear-gradient(180deg,#BE185D,#F43F5E); --sm-glow: rgba(244,63,94,0.30);  --sm-icon-bg:#ffe4e6; --sm-icon-fg:#BE185D; --sm-icon-ring: rgba(190,24,93,0.22); }

/* --- Collapsible per-category posting list --- */
.gsr-sm-cat-block {
  margin: 0.5rem 0;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  overflow: hidden;
  position: relative;
}
.gsr-sm-cat-block::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sm-accent, linear-gradient(180deg, #4338CA, #6366F1));
}
.gsr-sm-cat-summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.65rem 0.8rem 0.65rem 0.95rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  outline: none;
}
.gsr-sm-cat-summary::-webkit-details-marker { display: none; }
.gsr-sm-cat-summary-icon {
  width: 1.7rem; height: 1.7rem;
  border-radius: 0.375rem;
  background: var(--sm-icon-bg, #ecfdf5);
  color: var(--sm-icon-fg, #4338CA) !important;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gsr-sm-cat-summary-icon i, .gsr-sm-cat-summary-icon svg {
  color: var(--sm-icon-fg, #4338CA) !important;
  stroke: var(--sm-icon-fg, #4338CA) !important;
}
.gsr-sm-cat-summary-label {
  flex: 1; min-width: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgb(15 23 42);
  letter-spacing: -0.01em;
}
.gsr-sm-cat-summary-count {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--sm-icon-bg, #ecfdf5);
  color: var(--sm-icon-fg, #4338CA);
  flex-shrink: 0;
}
.gsr-sm-cat-summary-chev {
  color: rgb(148 163 184) !important;
  stroke: rgb(148 163 184) !important;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.gsr-sm-cat-block[open] .gsr-sm-cat-summary-chev { transform: rotate(180deg); }

/* Post list inside each collapsible */
.gsr-sm-post-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0.25rem 0.5rem 0.4rem !important;
  border-top: 1px solid rgb(241 245 249);
}
.gsr-sm-post-list li { margin: 0 !important; padding: 0 !important; }
.gsr-sm-post-list li a {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem 0.35rem 0.5rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgb(51 65 85) !important;                   /* slate-700 */
  text-decoration: none !important;
  border-radius: 0.375rem;
  transition: background .12s ease, color .12s ease;
}
.gsr-sm-post-list li a:hover {
  background: var(--sm-icon-bg, #ecfdf5);
  color: var(--sm-icon-fg, #4338CA) !important;
}
.gsr-sm-post-arrow {
  color: var(--sm-icon-fg, #6366F1) !important;
  stroke: var(--sm-icon-fg, #6366F1) !important;
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.gsr-sm-post-title {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gsr-sm-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.25rem 0.95rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sm-icon-fg, #4338CA) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
}
.gsr-sm-view-all i, .gsr-sm-view-all svg {
  transition: transform .15s ease;
}
.gsr-sm-view-all:hover i, .gsr-sm-view-all:hover svg { transform: translateX(2px); }
.gsr-sm-empty {
  margin: 0;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: rgb(100 116 139);
  font-style: italic;
}

/* --- Static-pages grid --- */
.gsr-sm-static-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.6rem;
}
@media (min-width: 560px) { .gsr-sm-static-grid { grid-template-columns: repeat(3, 1fr); } }
.gsr-sm-static {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid rgb(226 232 240);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(51 65 85) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.gsr-sm-static:hover {
  border-color: rgb(167 243 208);
  color: rgb(4 120 87) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(99,102,241,0.18);
}
.gsr-sm-static-icon {
  color: rgb(99 102 241) !important;
  stroke: rgb(99 102 241) !important;
  flex-shrink: 0;
}

/* --- XML-sitemap pointer list --- */
.gsr-sm-xml {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gsr-sm-xml li { margin: 0 0 0.4rem 0 !important; }
.gsr-sm-xml li:last-child { margin: 0 !important; }
.gsr-sm-xml a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
  border: 1px solid rgb(216 180 254);                /* purple-300 */
  font-size: 0.85rem;
  color: rgb(76 29 149) !important;                  /* violet-900 */
  text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.gsr-sm-xml a:hover {
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
  border-color: rgb(167 139 250);
  transform: translateY(-1px);
}
.gsr-sm-xml a i, .gsr-sm-xml a svg {
  color: rgb(109 40 217) !important;
  stroke: rgb(109 40 217) !important;
  flex-shrink: 0;
}
.gsr-sm-xml-label {
  font-weight: 700;
  flex-shrink: 0;
}
.gsr-sm-xml code {
  background: transparent !important;
  color: rgb(109 40 217) !important;
  font-size: 0.78rem;
  padding: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsr-sm-xml-ext { margin-left: auto; flex-shrink: 0; }

@media (max-width: 480px) {
  .gsr-sm-cat-label, .gsr-sm-cat-summary-label { font-size: 0.85rem; }
  .gsr-sm-xml code { display: none; }
  .gsr-sm-xml a { font-size: 0.82rem; }
}

/* ===== Contact CTA on legal pages — same vibe as the detail-page Apply CTA ===== */
.gsr-page-contact {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  padding: 1.1rem 1.1rem 1rem;
  background:
    radial-gradient(at 0% 0%, rgba(16,185,129,0.10), transparent 55%),
    radial-gradient(at 100% 100%, rgba(20,184,166,0.12), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f4fdf9 100%);
  border: 1px solid rgb(167 243 208);                /* emerald-200 */
  border-radius: 1rem;
  box-shadow: 0 8px 24px -10px rgba(16,185,129,0.22), 0 2px 6px -1px rgba(16,185,129,0.06);
  overflow: hidden;
}
.gsr-page-contact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #047857, #10B981, #14B8A6);
}
.gsr-page-contact-head {
  display: flex; align-items: center; gap: 0.625rem;
  margin-bottom: 0.5rem;
}
.gsr-page-contact-icon {
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #047857, #10B981);
  color: #ffffff !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(16,185,129,0.45);
}
.gsr-page-contact-icon i,
.gsr-page-contact-icon svg { color: #ffffff !important; stroke: #ffffff !important; }
.gsr-page-contact-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #064E3B, #047857);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}
.gsr-page-contact-body {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(71 85 105);
}
.gsr-page-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #047857, #10B981, #14B8A6);
  color: #ffffff !important;
  box-shadow: 0 8px 20px -6px rgba(16,185,129,0.50), inset 0 1px 0 rgba(255,255,255,0.20);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.gsr-page-contact-btn:hover {
  background: linear-gradient(135deg, #065F46, #047857, #0F766E);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -6px rgba(16,185,129,0.60), inset 0 1px 0 rgba(255,255,255,0.25);
}
.gsr-page-contact-btn i,
.gsr-page-contact-btn svg { color: #ffffff !important; stroke: #ffffff !important; }
.gsr-page-contact-arrow { transition: transform .2s ease; }
.gsr-page-contact-btn:hover .gsr-page-contact-arrow { transform: translateX(3px); }

@media (max-width: 480px) {
  .gsr-page-title    { font-size: 1.2rem; }
  .gsr-page-icon     { width: 2.5rem; height: 2.5rem; }
  .gsr-page-icon svg { width: 1.25rem; height: 1.25rem; }
  .gsr-page-meta     { font-size: 0.72rem; }
  .gsr-page-content h2 { font-size: 1rem; }
  .gsr-page-content   { font-size: 0.875rem; }
  .gsr-page-contact   { padding: 0.95rem; }
}

/* ============================================================
 *  CLOSING-TODAY ALERT BAR (sticky below header)
 *  Marquee of postings with status = last_date_today / closing_soon.
 * ============================================================ */
.gsr-close-bar {
  /* Not sticky — sits in normal flow right under the header. Both the header
   * and a sticky alert bar both wanting top:0 created a stacking conflict.
   * The alert is dismissible per day, so a single top-of-page surface is fine. */
  position: relative;
  z-index: 20;
  background: linear-gradient(90deg, #BE123C 0%, #DC2626 50%, #B91C1C 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 2px 6px -2px rgba(220,38,38,0.40);
}
/* The icon is absolutely positioned in its own layer ABOVE the track. The
 * track itself sits underneath at z-index:1. A separate ::before pseudo on
 * the inner container paints an OPAQUE rectangle of the bar's red gradient
 * over the leftmost portion — this physically masks any scrolling marquee
 * pixel that would otherwise appear behind the icon. */
.gsr-close-bar-inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.45rem 1rem;
  overflow: hidden;
}
/* Opaque left mask — sits between the track and the icon, hides everything
 * the marquee tries to scroll into the icon's column. */
.gsr-close-bar-inner::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4rem;                     /* enough to cover icon + margin */
  background: linear-gradient(90deg, #BE123C 0%, #BE123C 60%, rgba(190,18,60,0) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Right edge — same idea, fades the marquee out cleanly at the bar's end. */
.gsr-close-bar-inner::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 4rem;
  background: linear-gradient(270deg, #B91C1C 0%, #B91C1C 60%, rgba(185,28,28,0) 100%);
  z-index: 2;
  pointer-events: none;
}
.gsr-close-bar-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;                      /* above the mask + track */
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.22);
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffffff !important;
}
.gsr-close-bar-icon i, .gsr-close-bar-icon svg { color: #ffffff !important; stroke: #ffffff !important; }

/* Marquee container — full-width inside the inner, sits behind the mask. */
.gsr-close-bar-track {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  gap: 0.5rem;
  animation: gsr-close-marquee 12s linear infinite;
  will-change: transform;
}
/* Pause on hover so users can read / click a card */
.gsr-close-bar:hover .gsr-close-bar-track,
.gsr-close-bar-track:hover,
.gsr-close-bar-track:active {
  animation-play-state: paused;
}
@keyframes gsr-close-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Respect reduced-motion preferences — fall back to a static scrollable row */
@media (prefers-reduced-motion: reduce) {
  .gsr-close-bar-track { animation: none; overflow-x: auto; }
}
.gsr-close-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(255,255,255,0.10);
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s ease;
}
.gsr-close-bar-item:hover {
  background: rgba(255,255,255,0.20);
}
.gsr-close-bar-item:hover .gsr-close-bar-arrow { transform: translateX(3px); }
.gsr-close-bar-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}
.gsr-close-bar-pill--urgent {
  background: #ffffff;
  color: #B91C1C !important;
  animation: gsr-close-pulse 2s ease-in-out infinite;
}
.gsr-close-bar-pill--soon {
  background: rgba(255,255,255,0.20);
  color: #ffffff !important;
}
.gsr-close-bar-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.gsr-close-bar-title {
  font-weight: 600;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsr-close-bar-arrow {
  transition: transform .2s ease;
  color: #ffffff !important;
  stroke: #ffffff !important;
}
/* .gsr-close-bar-dismiss has been removed — bar is no longer dismissible. */
.gsr-close-bar-dismiss { display: none !important; }
@keyframes gsr-close-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
@media (max-width: 480px) {
  .gsr-close-bar-title { max-width: 11rem; font-size: 0.75rem; }
  .gsr-close-bar-pill  { font-size: 0.6rem; }
}

/* ============================================================
 *  LIVE STATS STRIP (homepage, above just-in marquee)
 * ============================================================ */
.gsr-stats-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;            /* tighter vertical padding */
  margin: 0 0 0.5rem;                  /* tighter outer margin */
  background:
    radial-gradient(at 0% 0%, rgba(99,102,241,0.10), transparent 50%),
    radial-gradient(at 100% 100%, rgba(167,139,250,0.10), transparent 50%),
    linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
  border: 1px solid rgb(167 243 208);                /* indigo-200 */
  border-radius: 0.875rem;             /* slightly tighter radius */
  box-shadow: 0 4px 12px -6px rgba(99,102,241,0.20);
  flex-wrap: wrap;
}
.gsr-stats-strip-hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.gsr-stats-strip-num {
  font-size: 1.4rem;                   /* slightly smaller for tighter row */
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.gsr-stats-strip-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.gsr-stats-strip-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(71 85 105);                             /* slate-600 */
}
.gsr-stats-strip-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgb(5 150 105);                             /* emerald-600 */
}
.gsr-stats-strip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
  animation: gsr-stats-pulse 1.6s ease-in-out infinite;
}
@keyframes gsr-stats-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
  50%     { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.gsr-stats-strip-cats {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.gsr-stats-strip-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--sm-icon-bg, #ecfdf5);
  color: var(--sm-icon-fg, #4338CA) !important;
  border: 1px solid var(--sm-icon-ring, rgba(99,102,241,0.20));
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .15s ease;
}
.gsr-stats-strip-cat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px var(--sm-glow, rgba(99,102,241,0.30));
}
.gsr-stats-strip-cat i, .gsr-stats-strip-cat svg {
  color: var(--sm-icon-fg, #4338CA) !important;
  stroke: var(--sm-icon-fg, #4338CA) !important;
}
.gsr-stats-strip-cat-num {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.gsr-stats-strip-cat-label {
  font-weight: 500;
}
/* Reuse the colour palette defined for .gsr-sm-cat--* */
.gsr-stats-strip-cat--indigo  { --sm-icon-bg:#ecfdf5; --sm-icon-fg:#4338CA; --sm-icon-ring: rgba(67,56,202,0.20); --sm-glow: rgba(99,102,241,0.30); }
.gsr-stats-strip-cat--emerald { --sm-icon-bg:#d1fae5; --sm-icon-fg:#047857; --sm-icon-ring: rgba(4,120,87,0.22);  --sm-glow: rgba(16,185,129,0.30); }
.gsr-stats-strip-cat--violet  { --sm-icon-bg:#ede9fe; --sm-icon-fg:#6D28D9; --sm-icon-ring: rgba(109,40,217,0.22); --sm-glow: rgba(139,92,246,0.30); }
.gsr-stats-strip-cat--amber   { --sm-icon-bg:#fef3c7; --sm-icon-fg:#B45309; --sm-icon-ring: rgba(180,83,9,0.22);  --sm-glow: rgba(245,158,11,0.30); }
.gsr-stats-strip-cat--sky     { --sm-icon-bg:#e0f2fe; --sm-icon-fg:#0369A1; --sm-icon-ring: rgba(3,105,161,0.22); --sm-glow: rgba(14,165,233,0.30); }
.gsr-stats-strip-cat--rose    { --sm-icon-bg:#ffe4e6; --sm-icon-fg:#BE185D; --sm-icon-ring: rgba(190,24,93,0.22); --sm-glow: rgba(244,63,94,0.30); }
@media (max-width: 480px) {
  .gsr-stats-strip { padding: 0.7rem 0.85rem; gap: 0.5rem; }
  .gsr-stats-strip-num { font-size: 1.3rem; }
  .gsr-stats-strip-cats { gap: 0.3rem; width: 100%; }
  .gsr-stats-strip-cat { font-size: 0.7rem; padding: 0.25rem 0.45rem; }
  .gsr-stats-strip-cat-label { display: none; }
}

/* ============================================================
 *  SEARCH AUTOCOMPLETE DROPDOWN
 * ============================================================ */
.gsr-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border: 1px solid rgb(167 243 208);                /* indigo-200 */
  border-radius: 1rem;
  box-shadow:
    0 18px 40px -12px rgba(99,102,241,0.30),
    0 6px 16px -4px rgba(99,102,241,0.12);
  padding: 0.4rem;
  max-height: 24rem;
  overflow-y: auto;
}
.gsr-search-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: rgb(30 41 59) !important;                   /* slate-800 */
  text-decoration: none !important;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.gsr-search-item:hover,
.gsr-search-item-active {
  background: linear-gradient(135deg, #ecfdf5 0%, #f5f3ff 100%);
  color: rgb(4 120 87) !important;
}
.gsr-search-item-icon {
  width: 1.5rem; height: 1.5rem;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  color: rgb(99 102 241) !important;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gsr-search-item-icon i, .gsr-search-item-icon svg {
  color: rgb(99 102 241) !important;
  stroke: rgb(99 102 241) !important;
}
.gsr-search-item-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gsr-search-item-arrow {
  color: rgb(148 163 184) !important;
  stroke: rgb(148 163 184) !important;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.gsr-search-item:hover .gsr-search-item-arrow,
.gsr-search-item-active .gsr-search-item-arrow {
  color: rgb(99 102 241) !important;
  stroke: rgb(99 102 241) !important;
  transform: translateX(3px);
}
.gsr-search-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  font-size: 0.85rem;
  color: rgb(100 116 139);                           /* slate-500 */
}
.gsr-search-loading i, .gsr-search-loading svg {
  color: rgb(99 102 241) !important;
  stroke: rgb(99 102 241) !important;
}

/* ============================================================
 *  Back-to-top floating button (site-wide)
 *  Appears once user scrolls past ~400px. Bottom-right, brand
 *  gradient circle, fade + slide animation.
 * ============================================================ */
.gsr-back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #7C3AED 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 25px -8px rgba(99, 102, 241, 0.55),
    0 4px 10px -3px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transition: opacity .22s ease, transform .22s ease, box-shadow .2s ease, background .2s ease;
  padding: 0;
  isolation: isolate;
}
.gsr-back-to-top[hidden] { display: none; }
.gsr-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.gsr-back-to-top:hover {
  background: linear-gradient(135deg, #3730A3 0%, #4F46E5 50%, #6D28D9 100%) !important;
  transform: translateY(-2px) scale(1);
  box-shadow:
    0 14px 32px -8px rgba(99, 102, 241, 0.70),
    0 6px 14px -3px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.gsr-back-to-top:focus-visible {
  outline: 2px solid #fbbf24;                 /* amber-400 — high-contrast a11y ring */
  outline-offset: 2px;
}
.gsr-back-to-top:active {
  transform: translateY(0) scale(0.96);
}
.gsr-back-to-top-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #ffffff !important;
  stroke: #ffffff !important;
  pointer-events: none;
  transition: transform .2s ease;
}
.gsr-back-to-top:hover .gsr-back-to-top-icon {
  transform: translateY(-2px);
}

/* Larger tap target + a little more breathing room on phones */
@media (max-width: 480px) {
  .gsr-back-to-top {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 3rem;
    height: 3rem;
  }
  .gsr-back-to-top-icon { width: 1.35rem; height: 1.35rem; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .gsr-back-to-top { transition: opacity .15s ease; }
  .gsr-back-to-top:hover { transform: none; }
  .gsr-back-to-top:hover .gsr-back-to-top-icon { transform: none; }
}

/* ============================================================
 *  Layout — keep body as a plain block so `position: sticky` on
 *  the header works perfectly. Earlier attempts to use flex or
 *  grid on body broke sticky because:
 *    - flex column changed the scroll context for sticky children
 *    - grid 3-row layout didn't account for body's actual child
 *      count (header + main + footer + toast + back-to-top + scripts)
 *  Plain block flow is the right call here.
 * ============================================================ */
html, body { min-height: 100vh; }

/* Bullet-proof the sticky header against any plugin/parent-theme rule that
 * might try to override it. -webkit-sticky kept for older Safari. */
body > header,
header.sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

/* When the WordPress admin bar is visible (only for logged-in users),
 * push the sticky site header DOWN by the admin-bar's height so it doesn't
 * sit BEHIND the admin bar (which is what "header half-showing" looks like).
 * Admin bar: 32px desktop, 46px ≤782px. */
.admin-bar header.sticky,
.admin-bar body > header {
  top: 32px !important;
}
@media (max-width: 782px) {
  .admin-bar header.sticky,
  .admin-bar body > header {
    top: 46px !important;
  }
}

@media (min-width: 480px) {
  body > footer, body .site-info { padding-bottom: 0.5rem; }
}

/* ============================================================
 *  Footer disclaimer — "private aggregator, not a govt site"
 *  Compact variant: minimal vertical footprint, all original
 *  copy preserved (no content cut). Inline title + body block.
 * ============================================================ */
.gsr-footer-disclaimer {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%); /* warm amber tint */
  border: 1px solid #fcd34d;                                     /* amber-300 */
  border-left: 3px solid #d97706;                                /* amber-600 left accent */
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  margin: 0.25rem 0;
  box-shadow: 0 1px 3px -1px rgba(217, 119, 6, 0.10);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.45;
}
/* Stack the "IMPORTANT NOTICE" title and the icon as a single small group at
 * the start, so the body text wraps inline beside them and the whole block
 * stays one tight paragraph instead of a card with a separate header. */
.gsr-footer-disclaimer-head {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  margin: 0;
}
.gsr-footer-disclaimer-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: #b45309;                                                /* amber-700 */
  flex-shrink: 0;
}
.gsr-footer-disclaimer-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;                                                /* amber-800 */
  white-space: nowrap;
}
.gsr-footer-disclaimer-body {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #78350f;                                                /* amber-900 */
  flex: 1;
  min-width: 0;
}
.gsr-footer-disclaimer-body strong {
  color: #7c2d12;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.55);
  padding: 0 0.25em;
  border-radius: 0.2rem;
}
@media (max-width: 480px) {
  .gsr-footer-disclaimer {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.65rem;
  }
  .gsr-footer-disclaimer-body { font-size: 0.7rem; }
}

/* ============================================================
 *  FOOTER (dark gradient brand footer)
 * ============================================================ */
.gsr-footer {
  position: relative;
  isolation: isolate;
}
.gsr-footer::before {
  /* Thin decorative gradient line above the dark footer */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0,
      rgba(99,102,241,0.6) 30%,
      rgba(167,139,250,0.6) 70%,
      transparent 100%);
}
.gsr-footer-gradient {
  background:
    radial-gradient(at 20% 10%, rgba(99,102,241,0.30), transparent 50%),
    radial-gradient(at 80% 90%, rgba(167,139,250,0.30), transparent 50%),
    linear-gradient(135deg, #1e1b4b 0%, #064e3b 50%, #4c1d95 100%);
}
/* Faint dot pattern overlay for texture */
.gsr-footer-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: -1;
}
.gsr-footer .gsr-brand-name {
  /* Already gradient-clipped from header; keep same look here */
  background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Explicit grid (independent of Tailwind purge) */
.gsr-footer-grid {
  display: grid;
  gap: 1.5rem 1.75rem;
  grid-template-columns: 1fr;            /* mobile: stacked */
  align-items: start;
}
@media (min-width: 640px) {
  .gsr-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
.gsr-footer-col { min-width: 0; }
.gsr-footer-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(110 231 183);              /* indigo-300 */
  margin-bottom: 0.6rem;
}
.gsr-footer-list { list-style: none; padding: 0; margin: 0; }
.gsr-footer-list li { margin: 0; }
.gsr-footer-list li + li { margin-top: 4px; }
.gsr-footer-list a {
  font-size: 13px;
  color: rgb(209 250 229);              /* indigo-100 */
  text-decoration: none;
  transition: color 0.15s ease;
}
.gsr-footer-list a:hover { color: #fff; }

/* ============================================================
 *  MOBILE OPTIMIZATIONS
 * ============================================================ */

/* Brand-tinted tap highlight on touch */
* { -webkit-tap-highlight-color: rgba(99, 102, 241, 0.18); }

/* Prevent iOS auto-zoom when focusing inputs (must be ≥16px) */
input, select, textarea, button {
  font-size: 16px;
}

/* Smooth momentum scrolling on iOS for all overflow-x containers */
.gsr-scroll-x,
.gsr-marquee,
.gsr-cat-pills,
.gsr-table-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Hide native scrollbars on horizontal scroll lanes (still scrollable by touch/trackpad) */
.gsr-scroll-x::-webkit-scrollbar,
.gsr-cat-pills::-webkit-scrollbar {
  display: none;
}
.gsr-scroll-x,
.gsr-cat-pills { scrollbar-width: none; }

/* Marquee — also pause on touch (mobile), not just hover */
.gsr-marquee-track:active,
.gsr-marquee:active .gsr-marquee-track {
  animation-play-state: paused;
}

/* ----- Phone-sized viewport (≤640px) ----- */
@media (max-width: 640px) {

  /* Tighter header */
  header .max-w-6xl { padding-left: 0.75rem; padding-right: 0.75rem; }
  .gsr-brand-name   { font-size: 1.05rem !important; }
  .gsr-brand-link > div:first-child {   /* GR tile */
    width: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 0.875rem !important;
  }
  .gsr-lang-switch a {
    padding: 0.5rem 0.75rem !important;
    min-width: 2.5rem !important;
    font-size: 0.95rem !important;
  }

  /* Search bar — tighter padding */
  .gsr-search-wrap { padding: 3px; border-radius: 0.75rem; }
  .gsr-search-input {
    padding: 0.875rem 2.75rem !important;
    font-size: 1rem !important;
    border-radius: 0.625rem !important;
  }
  .gsr-search-icon { left: 1rem !important; }

  /* Category pills: horizontal scroll instead of wrap on mobile.
   * Each pill keeps its natural width, the row scrolls. */
  .gsr-cat-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* Soft fade on right edge to hint there's more */
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
            mask-image: linear-gradient(to right, black 90%, transparent 100%);
  }
  .gsr-cat-pill {
    flex: 0 0 auto !important;
    min-width: auto !important;
    padding: 0.5rem 1rem !important;
    white-space: nowrap;
  }

  /* Filter row: stack each control on its own row for full-width tap target */
  .gsr-filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .gsr-filter-row > * { width: 100% !important; min-width: 0 !important; }
  .gsr-filter-row > span:first-child { display: none; }   /* hide "Filter" label */

  /* Reduce section card padding on small screens */
  main section .bg-white.border,
  main .bg-white.border.border-slate-200.rounded-xl {
    padding: 0.875rem !important;
  }

  /* Make any wide table scroll horizontally */
  main .overflow-hidden.rounded-lg.border,
  main .divide-y.divide-slate-100 {
    overflow-x: auto;
  }

  /* H1 / H2 sizing trim */
  main h1 { font-size: 1.125rem !important; line-height: 1.4; }
  main h2 { font-size: 1rem !important; }

  /* Just-in cards slightly narrower */
  .gsr-justin-card { min-width: 14rem !important; width: 14rem !important; }

  /* Tap targets — minimum 40px for buttons */
  button, a.button, .gsr-cat-pill, .gsr-search-input { min-height: 40px; }

  /* Detail-page outer padding — tighten */
  main.max-w-3xl, main.max-w-6xl { padding-left: 0.75rem; padding-right: 0.75rem; }

  /* Footer collapsible buttons full-tap area */
  footer button { min-height: 48px; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  footer button span.text-sm { font-size: 0.9rem; line-height: 1.35; }

  /* Footer "quick links" grid — single column on phone */
  footer .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----- Tablet-and-up (≥768px) — restore comfort sizes ----- */
@media (min-width: 768px) {
  input, select, textarea { font-size: 0.875rem; }
  input.gsr-search-input { font-size: 1.05rem; }
}

/* ============================================================================
 * TELEGRAM + WHATSAPP CHANNEL CTAs — centered, eye-catching homepage row
 * Two brand-colored buttons side-by-side on desktop, stacked on mobile.
 * Content is HORIZONTALLY CENTERED inside each button (no wasted whitespace).
 * Features: pulsing LIVE badge, animated sheen, hover lift + glow.
 * ============================================================================ */
.gsr-channel-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}
@media (max-width: 540px) {
  .gsr-channel-cta-row { grid-template-columns: 1fr; gap: 0.6rem; }
}

.gsr-channel-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;          /* center the inner content block */
  min-height: 52px;                 /* trimmed from 76px */
  padding: 0.45rem 0.7rem;          /* trimmed from 0.75rem 1rem */
  border-radius: 0.75rem;           /* tighter rounding */
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  isolation: isolate;
}
.gsr-channel-cta:hover,
.gsr-channel-cta:focus {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.08) saturate(1.1);
  color: #ffffff !important;
}

/* Inner content block — centered, contains icon + text together */
.gsr-channel-cta-content {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  z-index: 2;
  position: relative;
}

/* Moving diagonal sheen — sweeps across every 4s for "alive" effect */
.gsr-channel-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  transform: skewX(-20deg);
  z-index: 1;
  animation: gsr-channel-sheen 4s ease-in-out infinite;
}
@keyframes gsr-channel-sheen {
  0%, 65% { left: -80%; }
  100%    { left: 140%; }
}

/* Subtle radial highlight in top-left (gives depth) */
.gsr-channel-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.18), transparent 50%);
  z-index: 0;
  pointer-events: none;
}

/* Telegram — official brand gradient + glow */
.gsr-channel-cta--telegram {
  background: linear-gradient(135deg, #0088CC 0%, #2AABEE 50%, #229ED9 100%);
  box-shadow:
    0 8px 22px -6px rgba(0,136,204,0.50),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.gsr-channel-cta--telegram:hover {
  box-shadow:
    0 14px 32px -6px rgba(0,136,204,0.65),
    0 0 0 1px rgba(255,255,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* WhatsApp — official brand gradient + glow */
.gsr-channel-cta--whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #1FB955 50%, #128C7E 100%);
  box-shadow:
    0 8px 22px -6px rgba(37,211,102,0.50),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.gsr-channel-cta--whatsapp:hover {
  box-shadow:
    0 14px 32px -6px rgba(37,211,102,0.65),
    0 0 0 1px rgba(255,255,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Icon chip — circle with brand SVG (compact) */
.gsr-channel-cta-icon {
  flex-shrink: 0;
  width: 1.85rem; height: 1.85rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
  transition: transform .25s ease;
}
.gsr-channel-cta:hover .gsr-channel-cta-icon { transform: scale(1.08) rotate(-5deg); }
.gsr-channel-cta-icon svg { display: block; width: 1.1rem; height: 1.1rem; }

.gsr-channel-cta-text {
  line-height: 1.2;
}
.gsr-channel-cta-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.gsr-channel-cta-arrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.92rem;
  opacity: 0.85;
  transition: transform .25s ease, opacity .25s ease;
}
.gsr-channel-cta:hover .gsr-channel-cta-arrow {
  transform: translateX(4px);
  opacity: 1;
}
.gsr-channel-cta-sub {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.92;
  margin-top: 0.05rem;
  letter-spacing: 0.005em;
}

/* Pulsing LIVE badge — top-right corner (compact) */
.gsr-channel-cta-live {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.08rem 0.32rem;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gsr-channel-cta-live-dot {
  width: 0.32rem; height: 0.32rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: gsr-channel-pulse 1.5s ease-in-out infinite;
}
.gsr-channel-cta-live-text {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
}
@keyframes gsr-channel-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@media (max-width: 480px) {
  .gsr-channel-cta { min-height: 48px; padding: 0.4rem 0.65rem; }
  .gsr-channel-cta-icon { width: 1.7rem; height: 1.7rem; }
  .gsr-channel-cta-icon svg { width: 1rem; height: 1rem; }
  .gsr-channel-cta-title { font-size: 0.78rem; }
  .gsr-channel-cta-sub { font-size: 0.62rem; }
}

/* ============================================================================
 * EXPIRING SOON section — urgent deadline cards at top of homepage. Subtle
 * red-amber gradient backdrop so users notice it but it doesn't scream.
 * ============================================================================ */
.gsr-expiring-soon-section {
  background:
    radial-gradient(at 0% 0%, rgba(248,113,113,0.08), transparent 60%),
    radial-gradient(at 100% 100%, rgba(251,191,36,0.08), transparent 60%);
  padding: 0.7rem 0.85rem;              /* mild squeeze vs original 0.85rem all-round */
  border: 1px solid rgb(254 226 226);   /* red-100 */
  border-radius: 0.875rem;
  margin-bottom: 0.75rem;
}
.gsr-expiring-soon-section .gsr-card {
  border-color: rgb(252 165 165);       /* red-300 — emphasises urgency */
}
.gsr-expiring-soon-section .gsr-card:hover {
  border-color: rgb(220 38 38);         /* red-600 */
  box-shadow: 0 4px 12px -2px rgba(239,68,68,0.18);
}
@keyframes gsr-soft-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.gsr-expiring-soon-section .animate-pulse {
  animation: gsr-soft-pulse 1.6s ease-in-out infinite;
}

/* ============================================================================
 * PURGED TAILWIND CLASS RESTORATIONS — re-add the `.5` fraction utilities
 * that were stripped from the compiled tailwind.css during the build pass.
 * Without these, absolute-positioned icons inside select wrappers landed at
 * `left: auto` and ended up overlapping the first letter of the dropdown
 * label (visible on Qualification / State / Department filters).
 * ============================================================================ */
.left-3\.5  { left:  0.875rem; }
.right-3\.5 { right: 0.875rem; }
.top-3\.5   { top:   0.875rem; }
.bottom-3\.5{ bottom:0.875rem; }
.pl-3\.5    { padding-left:  0.875rem; }
.pr-3\.5    { padding-right: 0.875rem; }
.pt-3\.5    { padding-top:   0.875rem; }
.pb-3\.5    { padding-bottom:0.875rem; }
.mt-3\.5    { margin-top:    0.875rem; }
.mb-3\.5    { margin-bottom: 0.875rem; }
.ml-3\.5    { margin-left:   0.875rem; }
.mr-3\.5    { margin-right:  0.875rem; }
.w-3\.5     { width:  0.875rem; }
.h-3\.5     { height: 0.875rem; }
.gap-3\.5   { gap:    0.875rem; }

/* Belt-and-suspenders: ensure the icon inside the filter dropdown wrapper is
 * positioned correctly EVEN IF Tailwind classes are missing. */
.gsr-filter-row > div.relative > i[data-lucide],
.gsr-filter-row > div.relative > svg.lucide {
  position: absolute !important;
  left: 0.875rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
.gsr-filter-row > div.relative > i[data-lucide][data-lucide="chevron-down"],
.gsr-filter-row > div.relative > svg.lucide-chevron-down {
  left: auto !important;
  right: 0.75rem !important;
}

/* ============================================================================
 * COMPACT SPACING PASS — site-wide vertical rhythm tightening.
 * Reduces the white space between every major block (header, hero strip,
 * sections, cards, footer) without sacrificing readability or breaking
 * mobile-tap-target sizes (those stay >= 40px).
 *
 * Order in the cascade: this block lives at the END of style.css so it
 * overrides earlier rules + Tailwind utility classes (mb-3, mb-4, etc.).
 * ============================================================================ */

/* Header — closing-soon bar is sticky below, header doesn't need fat padding */
header.bg-gradient-to-r > div {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

/* Main content wrapper — minimal vertical breathing */
main.max-w-6xl,
main.max-w-3xl {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

/* Homepage hero stack */
.gsr-stats-strip      { margin: 0 0 0.4rem !important; padding: 0.5rem 0.85rem !important; }
.gsr-marquee          { padding: 1px 0 !important; }
section.mb-4          { margin-bottom: 0.55rem !important; }
section.mb-3          { margin-bottom: 0.45rem !important; }
section.mb-5          { margin-bottom: 0.65rem !important; }

/* Filter row + category sections — was space-y-7 (1.75rem), now 1rem */
.space-y-7 > * + *    { margin-top: 0.9rem !important; }
.space-y-7            { margin-top: 0.25rem !important; }
.space-y-3 > * + *    { margin-top: 0.5rem !important; }

/* Card sections on single posting (.gsr-sec): each one was mb-3 (12px) */
.gsr-sec              { margin-bottom: 0.5rem !important; padding: 0.85rem !important; }
.gsr-sec-head         { margin-bottom: 0.45rem !important; }

/* "On this page" TOC card */
.gsr-toc              { margin-bottom: 0.55rem !important; padding: 0.7rem 0.9rem !important; }

/* Hindi switcher prompt */
.gsr-lang-prompt      { margin-bottom: 0.55rem !important; padding: 0.45rem 0.7rem !important; }

/* Final "Ready to apply" CTA */
.gsr-final-cta        { margin-top: 0.85rem !important; padding: 1rem !important; }

/* Social CTA buttons (whatsapp/telegram) */
.gsr-social-cta       { margin-bottom: 0.55rem !important; }

/* Listing cards on homepage hubs */
.gsr-card             { padding: 0.8rem !important; }

/* Just-in marquee cards */
.gsr-justin-card      { padding: 0.55rem !important; }

/* Closing-soon alert bar inner row */
.gsr-close-bar-inner  { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }

/* Footer — was mt-10 (2.5rem), pt-6 pb-6 (1.5rem each) — too much */
footer.mt-10          { margin-top: 1rem !important; padding-top: 0.85rem !important; padding-bottom: 0.75rem !important; }
.gsr-footer-disclaimer{ padding: 0.7rem 0.9rem !important; margin-bottom: 0.5rem !important; }

/* Tablet+ — bump the top/bottom main padding a tiny bit so it doesn't feel cramped on wide monitors */
@media (min-width: 1024px) {
  main.max-w-6xl,
  main.max-w-3xl    { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
  .space-y-7 > * + *{ margin-top: 1.1rem !important; }
}


/* ============================================================
 *  NEW posting indicators — applied to cards published recently
 *  ============================================================
 *  .gsr-card--new   → posting < 24 hours old (subtle indigo glow)
 *  .gsr-card--fresh → posting < 6 hours old  (stronger rose/pink glow)
 *  .gsr-new-pill    → animated NEW pill in card top-left
 * ============================================================ */

/* ---- The animated "NEW" / "JUST IN" pill ---- */
.gsr-new-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(99, 102, 241, 0.5);
  animation: gsr-new-pulse 2s ease-in-out infinite;
  white-space: nowrap;
}

.gsr-new-pill--fresh {
  /* JUST IN pill — hotter colors for very recent (<6h) postings */
  background: linear-gradient(135deg, #ec4899 0%, #ef4444 100%);
  box-shadow: 0 2px 8px -1px rgba(236, 72, 153, 0.6);
  animation: gsr-new-pulse-fresh 1.2s ease-in-out infinite;
}

@keyframes gsr-new-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 6px -1px rgba(99, 102, 241, 0.5); }
  50%      { transform: scale(1.05); box-shadow: 0 3px 10px -1px rgba(99, 102, 241, 0.75); }
}

@keyframes gsr-new-pulse-fresh {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px -1px rgba(236, 72, 153, 0.6); }
  50%      { transform: scale(1.08); box-shadow: 0 4px 14px -1px rgba(236, 72, 153, 0.85); }
}

/* ---- Card-level highlight for new postings ---- */
.gsr-card--new {
  border-color: #a7f3d0 !important;     /* indigo-200 */
  box-shadow:
    0 0 0 1px #10b981,
    0 4px 12px -2px rgba(99, 102, 241, 0.25);
  position: relative;
}

.gsr-card--fresh {
  /* Stronger treatment for very-recent postings */
  border-color: #fbcfe8 !important;     /* pink-200 */
  box-shadow:
    0 0 0 2px #ec4899,
    0 6px 18px -2px rgba(236, 72, 153, 0.35);
  position: relative;
  animation: gsr-card-fresh-glow 3s ease-in-out infinite;
}

@keyframes gsr-card-fresh-glow {
  0%, 100% { box-shadow: 0 0 0 2px #ec4899, 0 6px 18px -2px rgba(236, 72, 153, 0.35); }
  50%      { box-shadow: 0 0 0 2px #ec4899, 0 8px 24px -2px rgba(236, 72, 153, 0.55); }
}

/* "NEW corner ribbon" alternative — visible even when scrolled-past status */
.gsr-card--fresh::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent #ec4899 transparent transparent;
  border-top-right-radius: 0.75rem;
  pointer-events: none;
}

/* =============================================================================
 *  Compact dense job rows (sarkariresultcentral) — small "list" cards.
 *  Self-contained (no Tailwind dependency) so density is fully controlled here.
 * ============================================================================= */
.src-list{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;overflow:hidden;
}
.src-list > .src-row + .src-row{border-top:1px solid #f1f5f9;}
.src-row{position:relative;}
.src-row__link{
  display:flex;align-items:center;gap:.625rem;
  padding:.5rem .75rem;text-decoration:none;color:inherit;
  transition:background .12s ease;
}
.src-row__link:hover{background:#f8fafc;}
.src-row--fresh{background:linear-gradient(90deg,#fff7ed 0,#fff 60%);}
.src-row--new::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#10b981;}
.src-row--fresh::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#f97316;}

.src-row__icon{
  flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:.5rem;
  background:#ecfdf5;color:#059669;display:flex;align-items:center;justify-content:center;
}
.src-row__icon svg{width:.95rem;height:.95rem;}

.src-row__body{min-width:0;flex:1 1 auto;}
.src-row__title{
  display:block;font-size:.875rem;line-height:1.2;font-weight:600;color:#1e293b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.src-row__link:hover .src-row__title{color:#059669;}
.src-row__new{
  display:inline-block;font-size:.625rem;font-weight:700;letter-spacing:.02em;
  color:#047857;margin-right:.25rem;vertical-align:middle;
}
.src-row__new.is-fresh{color:#ea580c;}
.src-row__meta{
  display:block;margin-top:.125rem;font-size:.6875rem;line-height:1.2;color:#64748b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.src-row__cat{font-weight:600;color:#475569;}
.src-row__sep{margin:0 .35rem;color:#cbd5e1;}
.src-row__date{color:#475569;}

.src-row__right{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;}
.src-row__elig{font-size:.625rem;font-weight:600;color:#16a34a;}
.src-row__status{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.625rem;font-weight:600;padding:.125rem .4rem;border-radius:9999px;line-height:1;
}
.src-row__dot{width:.375rem;height:.375rem;border-radius:9999px;display:inline-block;}
.src-row__time{font-size:.625rem;color:#94a3b8;white-space:nowrap;}
.src-row__chev{width:1rem;height:1rem;color:#cbd5e1;flex:0 0 auto;}
.src-row__chev svg{width:1rem;height:1rem;}

/* progressive hiding on narrow screens — keep it scannable */
@media (max-width:640px){
  .src-row__time{display:none;}
  .src-row__meta .src-row__org{display:none;}
}

/* ============================================================================
 *  SRC EMERALD/TEAL RE-THEME — visual differentiation from gov (indigo).
 *  Re-tints every indigo/violet/purple utility used in templates to emerald/teal
 *  so the front-end looks distinct without renaming classes (Tailwind is purged).
 * ========================================================================== */
.bg-indigo-50{background-color:#ecfdf5!important}
.bg-indigo-100{background-color:#d1fae5!important}
.bg-indigo-500{background-color:#10b981!important}
.bg-indigo-600{background-color:#059669!important}
.hover\:bg-indigo-50:hover{background-color:#ecfdf5!important}
.hover\:bg-indigo-100:hover{background-color:#d1fae5!important}
.hover\:bg-indigo-700:hover{background-color:#047857!important}
.text-indigo-500{color:#10b981!important}
.text-indigo-600{color:#059669!important}
.text-indigo-700{color:#047857!important}
.text-indigo-900{color:#064e3b!important}
.hover\:text-indigo-600:hover{color:#059669!important}
.hover\:text-indigo-700:hover{color:#047857!important}
.hover\:text-indigo-800:hover{color:#065f46!important}
.border-indigo-100{border-color:#d1fae5!important}
.border-indigo-200{border-color:#a7f3d0!important}
.border-indigo-400{border-color:#34d399!important}
.border-indigo-600{border-color:#059669!important}
.hover\:border-indigo-300:hover{border-color:#6ee7b7!important}
.ring-indigo-400{--tw-ring-color:#34d399!important}
/* gradients: indigo -> emerald, violet/purple -> teal */
.from-indigo-700{--tw-gradient-from:#047857 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(4 120 87 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-indigo-600{--tw-gradient-from:#059669 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(5 150 105 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-indigo-50{--tw-gradient-from:#ecfdf5 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgb(236 253 245 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.via-purple-600{--tw-gradient-to:rgb(13 148 136 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),#0d9488 var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.via-purple-50{--tw-gradient-to:rgb(240 253 250 / 0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),#f0fdfa var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.to-violet-700{--tw-gradient-to:#0f766e var(--tw-gradient-to-position)!important}

/* ============================================================================
 *  CLASSIC SARKARI BOX-GRID home (sarkariresultcentral) — distinct from gov.
 * ========================================================================== */
.srhome{max-width:72rem;margin:0 auto;padding:.75rem 1rem 2.5rem}
.srmarquee{display:flex;align-items:center;gap:.6rem;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:.55rem;padding:.4rem .55rem;margin:.6rem 0 1rem;overflow:hidden}
.srmarquee>b{flex:0 0 auto;background:#059669;color:#fff;padding:.2rem .5rem;border-radius:.35rem;font-size:.68rem;font-weight:800;letter-spacing:.05em}
.srmarquee__win{flex:1;overflow:hidden}
.srmarquee__track{display:inline-flex;gap:2.5rem;white-space:nowrap;will-change:transform;animation:srscroll 45s linear infinite}
.srmarquee__track:hover{animation-play-state:paused}
.srmarquee a{color:#334155;text-decoration:none;font-size:.8rem}
.srmarquee a:hover{color:#059669}
@keyframes srscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.srhome__intro{font-size:.84rem;color:#475569;line-height:1.6;margin:.25rem 0 1.25rem;padding:.75rem .9rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.55rem}
.srhome__intro em{color:#64748b}
.srgrid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.srgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.srgrid{grid-template-columns:repeat(3,1fr)}}
.srbox{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:.6rem;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.srbox__head{margin:0;background:var(--ac,#059669);color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.02em;padding:.55rem .75rem;text-align:center}
.srbox__list{list-style:none;margin:0;padding:.35rem .8rem;flex:1}
.srbox__list li{display:flex;gap:.45rem;align-items:flex-start;padding:.4rem 0;border-bottom:1px dashed #e5e7eb;font-size:.84rem;line-height:1.4}
.srbox__list li:last-child{border-bottom:0}
.srbox__list a{color:#1e293b;text-decoration:none;flex:1}
.srbox__list a:hover{color:var(--ac,#059669);text-decoration:underline}
.srbox__new{flex:0 0 auto;background:#fee2e2;color:#dc2626;font-size:.58rem;font-weight:800;letter-spacing:.04em;padding:.08rem .32rem;border-radius:.3rem;margin-top:.15rem}
.srbox__empty{color:#94a3b8;font-style:italic;border-bottom:0!important}
.srbox__more{display:block;text-align:center;padding:.5rem;background:#f8fafc;color:var(--ac,#059669);font-weight:700;font-size:.78rem;text-decoration:none;border-top:1px solid #eef2f6}
.srbox__more:hover{background:#f1f5f9}

/* Shared content wrapper — header strip aligns to the same column as .srhome */
.srwrap{max-width:72rem;margin-left:auto;margin-right:auto;padding:.6rem 1rem}

/* ============================================================================
 *  SITE CONTENT WIDTH — single knob. Shrinks every top-level container
 *  (header strip, homepage box-grid, category hubs) from left & right.
 *  Tune --site-w to taste (72rem = old/gov width; 60rem = narrower).
 * ========================================================================== */
:root{--site-w:72rem}
.max-w-6xl{max-width:var(--site-w)!important}
.srhome{max-width:var(--site-w)!important}
.srwrap{max-width:var(--site-w)!important}

/* Narrow centered green header bar (page bg shows on its left/right) */
.srhead-bar{border-radius:0 0 .9rem .9rem}

/* ===== Expiring Jobs — vertical bottom->up auto-scroll panel ===== */
.srexp{background:#fff;border:1px solid #e2e8f0;border-top:3px solid #dc2626;border-radius:.6rem;overflow:hidden;margin-bottom:1.1rem;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.srexp__head{margin:0;background:#dc2626;color:#fff;font-weight:700;font-size:.92rem;letter-spacing:.02em;padding:.5rem .75rem;text-align:center}
.srexp__win{height:11rem;overflow:hidden;position:relative}
.srexp__track{list-style:none;margin:0;padding:0;will-change:transform;animation:srvscroll 9s linear infinite}
.srexp__win:hover .srexp__track{animation-play-state:paused}
.srexp__track li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.45rem .8rem;border-bottom:1px dashed #f1f5f9;font-size:.82rem;line-height:1.35}
.srexp__track a{color:#1e293b;text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srexp__track a:hover{color:#dc2626}
.srexp__date{flex:0 0 auto;color:#dc2626;font-weight:700;font-size:.68rem;white-space:nowrap}
@keyframes srvscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ===== Smaller job cards (compact dense rows) ===== */
.src-row__link{padding:.35rem .6rem;gap:.5rem}
.src-row__icon{width:1.4rem;height:1.4rem;border-radius:.4rem}
.src-row__icon svg{width:.8rem;height:.8rem}
.src-row__title{font-size:.8rem;line-height:1.15}
.src-row__meta{font-size:.64rem;margin-top:.05rem}
.src-row__new{font-size:.58rem}
.src-row__status{font-size:.56rem;padding:.08rem .32rem}
.src-row__dot{width:.32rem;height:.32rem}
.src-row__time{font-size:.56rem}
.src-row__chev{width:.85rem;height:.85rem}
.src-row__chev svg{width:.85rem;height:.85rem}

/* ===== Inner category pages: gov-style card GRID at HALF size ===== */
.src-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem;background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
.srcard{background:#fff;border:1px solid #e2e8f0;border-radius:.55rem;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:box-shadow .12s,border-color .12s}
.srcard:hover{border-color:#a7f3d0;box-shadow:0 3px 10px rgba(5,150,105,.12)}
.srcard--new{border-left:3px solid #059669}
.srcard--fresh{border-left:3px solid #f97316}
.srcard__link{display:block;padding:.5rem .6rem;text-decoration:none;color:inherit}
.srcard__top{display:flex;align-items:center;gap:.35rem;margin-bottom:.3rem}
.srcard__status{display:inline-flex;align-items:center;gap:.22rem;font-size:.56rem;font-weight:700;padding:.08rem .34rem;border-radius:9999px;line-height:1}
.srcard__dot{width:.34rem;height:.34rem;border-radius:9999px;display:inline-block}
.srcard__new{font-size:.62rem;line-height:1}
.srcard__elig{font-size:.55rem;font-weight:700;color:#16a34a}
.srcard__time{margin-left:auto;font-size:.55rem;color:#94a3b8;white-space:nowrap}
.srcard__title{margin:0;font-size:.8rem;font-weight:600;line-height:1.25;color:#1e293b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srcard__link:hover .srcard__title{color:#059669}
.srcard__ic svg{width:.8rem;height:.8rem;vertical-align:-2px;color:#059669}
.srcard__meta{margin-top:.3rem;font-size:.64rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srcard__cat{font-weight:600;color:#475569}
.srcard__sep{margin:0 .3rem;color:#cbd5e1}
.srcard__date{margin-top:.25rem;font-size:.64rem;color:#475569}
.srcard__date strong{color:#dc2626}

/* ===== RICH COMPACT job card (half-size gov card, emerald) ===== */
.src-list{grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))!important;gap:.65rem!important}
.jcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:.6rem;padding:.55rem .6rem;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:box-shadow .12s,border-color .12s}
.jcard:hover{border-color:#a7f3d0;box-shadow:0 4px 12px rgba(5,150,105,.12)}
.jcard--new{border-color:#6ee7b7}
.jcard--fresh{border-color:#fda4af;background:linear-gradient(180deg,#fff7f7,#fff 42%)}
.jcard__top{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-bottom:.35rem}
.jcard__badge{font-size:.54rem;font-weight:800;letter-spacing:.03em;padding:.1rem .36rem;border-radius:9999px;color:#fff;line-height:1.3}
.jcard__badge.is-new{background:#059669}
.jcard__badge.is-fresh{background:#e11d48}
.jcard__status{display:inline-flex;align-items:center;gap:.22rem;font-size:.56rem;font-weight:700;padding:.08rem .34rem;border-radius:9999px;line-height:1}
.jcard__dot{width:.34rem;height:.34rem;border-radius:9999px;display:inline-block}
.jcard__elig{display:inline-flex;align-items:center;gap:.15rem;font-size:.55rem;font-weight:700;color:#16a34a}
.jcard__elig svg{width:.6rem;height:.6rem}
.jcard__time{margin-left:auto;display:inline-flex;align-items:center;gap:.2rem;font-size:.54rem;color:#94a3b8;white-space:nowrap}
.jcard__time svg{width:.6rem;height:.6rem}
.jcard__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;font-weight:600;line-height:1.25;color:#1e293b;text-decoration:none;margin-bottom:.4rem}
.jcard__title:hover{color:#059669}
.jcard__tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.4rem}
.jtag{display:inline-flex;align-items:center;gap:.2rem;font-size:.56rem;background:#f1f5f9;color:#475569;padding:.1rem .35rem;border-radius:.35rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jtag svg{width:.62rem;height:.62rem;flex:0 0 auto;color:#059669}
.jcard__date{display:flex;align-items:center;gap:.25rem;font-size:.6rem;color:#64748b;margin-bottom:.5rem}
.jcard__date svg{width:.66rem;height:.66rem;flex:0 0 auto;color:#059669}
.jcard__date strong{color:#dc2626;font-weight:700}
.jcard__btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.2rem;font-size:.66rem;font-weight:700;background:#ecfdf5;color:#047857;padding:.35rem;border-radius:.4rem;text-decoration:none;transition:background .12s}
.jcard__btn:hover{background:#d1fae5}
.jcard__btn svg{width:.75rem;height:.75rem}

/* ===== FULL-SIZE gov-style cards (match govsarkariresult look), emerald ===== */
.src-list{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))!important;gap:1rem!important}
.jcard{padding:.85rem .9rem!important;border-radius:.7rem!important;border-width:1.5px!important}
.jcard--new{border-color:#10b981!important}
.jcard--fresh{border-color:#fb7185!important;background:linear-gradient(180deg,#fff6f7,#fff 38%)!important}
.jcard__top{gap:.4rem;margin-bottom:.5rem}
.jcard__badge{font-size:.62rem;padding:.14rem .5rem}
.jcard__status{font-size:.66rem;padding:.16rem .5rem}
.jcard__dot{width:.4rem;height:.4rem}
.jcard__elig{font-size:.66rem;gap:.2rem}
.jcard__elig svg{width:.8rem;height:.8rem}
.jcard__time{font-size:.66rem;gap:.25rem}
.jcard__time svg{width:.8rem;height:.8rem}
.jcard__title{font-size:.95rem;line-height:1.3;margin-bottom:.55rem}
.jcard__tags{gap:.35rem;margin-bottom:.55rem}
.jtag{font-size:.66rem;padding:.16rem .45rem;border-radius:.4rem;gap:.25rem}
.jtag svg{width:.78rem;height:.78rem}
.jcard__date{font-size:.72rem;margin-bottom:.7rem;gap:.3rem}
.jcard__date svg{width:.82rem;height:.82rem}
.jcard__btn{font-size:.78rem;padding:.5rem;border-radius:.45rem;gap:.25rem}
.jcard__btn svg{width:.9rem;height:.9rem}
/* corner "JUST IN" ribbon for fresh cards */
.jcard__ribbon{position:absolute;top:.9rem;right:-2.4rem;transform:rotate(45deg);background:#e11d48;color:#fff;font-size:.55rem;font-weight:800;letter-spacing:.06em;padding:.16rem 2.4rem;box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:1}

/* ===== Homepage category sections + HALF-SIZE detailed cards ===== */
.srsec{margin-bottom:1.4rem}
.srsec__head{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 .65rem}
.srsec__head .ic{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:.4rem;color:#fff;display:flex;align-items:center;justify-content:center}
.srsec__head .ic svg{width:.9rem;height:.9rem}
.srsec__head h2{margin:0;font-size:1rem;font-weight:800;color:#0f172a}
.srsec__more{margin-left:auto;font-size:.74rem;font-weight:700;text-decoration:none;white-space:nowrap}
.srsec__more:hover{text-decoration:underline}
@media(max-width:480px){.srsec__more{font-size:.64rem}}
.jcards-half{grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr))!important;gap:.6rem!important}
.jcards-half .jcard{padding:.5rem .55rem!important;border-radius:.5rem!important}
.jcards-half .jcard__top{gap:.25rem;margin-bottom:.3rem}
.jcards-half .jcard__badge{font-size:.5rem!important;padding:.08rem .32rem!important}
.jcards-half .jcard__status{font-size:.5rem!important;padding:.06rem .3rem!important}
.jcards-half .jcard__dot{width:.3rem!important;height:.3rem!important}
.jcards-half .jcard__elig{font-size:.5rem!important}
.jcards-half .jcard__time{font-size:.5rem!important}
.jcards-half .jcard__time svg,.jcards-half .jcard__elig svg{width:.6rem!important;height:.6rem!important}
.jcards-half .jcard__title{font-size:.76rem!important;margin-bottom:.35rem!important;line-height:1.2!important}
.jcards-half .jcard__tags{gap:.2rem;margin-bottom:.35rem}
.jcards-half .jtag{font-size:.52rem!important;padding:.08rem .3rem!important}
.jcards-half .jtag svg{width:.62rem!important;height:.62rem!important}
.jcards-half .jcard__date{font-size:.58rem!important;margin-bottom:.4rem!important}
.jcards-half .jcard__date svg{width:.66rem!important;height:.66rem!important}
.jcards-half .jcard__btn{font-size:.6rem!important;padding:.34rem!important}
.jcards-half .jcard__btn svg{width:.7rem!important;height:.7rem!important}
.jcards-half .jcard__ribbon{font-size:.46rem!important;top:.7rem!important;right:-2.5rem!important;padding:.12rem 2.5rem!important}

/* Remove the diagonal "JUST IN" corner ribbon (the JUST IN pill already covers it) */
.jcard__ribbon{display:none!important}

/* breathing room above the Expiring Jobs red bar */
.srexp{margin-top:1.15rem!important}

/* Mobile header: SHOW Telegram/WhatsApp buttons (compact); free space by hiding tagline */
@media (max-width:479px){
  .gsr-header-join{display:inline-flex!important;padding:.3rem .55rem!important;font-size:.66rem!important;gap:.28rem!important}
  .gsr-header-join svg{width:.85rem!important;height:.85rem!important}
  .gsr-brand-tagline{display:none!important}
  .srhead-bar{gap:.4rem!important;padding:.5rem .55rem!important}
  .gsr-brand-name{font-size:.98rem!important}
  .srhead-bar .ml-auto{gap:.3rem!important}
}

/* ===== Footer SEO about block ===== */
.src-footer-seo{text-align:center;margin:.5rem 0 1rem;padding:.9rem 1rem;background:#f8fafc;border:1px solid #eef2f7;border-radius:.6rem}
.src-footer-seo__h{font-size:.95rem;font-weight:700;color:#1e293b;margin:0 0 .35rem}
.src-footer-seo__p{font-size:.8rem;line-height:1.7;color:#64748b;margin:0 auto;max-width:1100px;text-align:justify;text-align-last:center}
.src-footer-seo__p strong{color:#475569;font-weight:600}
/* ===== Empty category section placeholder (homepage) ===== */
.srsec__empty{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;background:#f8fafc;border:1px dashed #e2e8f0;border-radius:.7rem;color:#64748b;font-size:.85rem}
.srsec__empty svg{width:1.1rem;height:1.1rem;color:#94a3b8;flex:0 0 auto}
.srsec__empty a{font-weight:600}