/* ============================================================
   Smart MLA Governance System
   Design language: "Civic Receipt"
   The product replaces the paper acknowledgement slip handed out
   at an MLA office. So the interface borrows that artifact:
   perforated stubs, stamped tokens, monospaced reference numbers,
   and a lifecycle rail that reads like a franked docket.
   Palette and structure follow the Cyber Help India proposal deck.
   ============================================================ */

:root {
  /* Brand — carried over from the proposal deck */
  --ink         : #101B45;
  --ink-2       : #1B2A5E;
  --ink-3       : #2C3C74;
  --teal        : #2A7D9E;
  --teal-soft   : #E6F1F6;
  --saffron     : #EE9B3F;
  --saffron-soft: #FDF1E1;
  --gov-color   : #F47216;

  /* Surfaces */
  --paper:      #F2F5FA;
  --card:       #FFFFFF;
  --line:       #E2E8F3;
  --line-2:     #CBD5E9;

  /* Text */
  --text      : #16203F;
  --text-2    : #55618A;
  --text-3    : #8892B0;
  --text-white: #ffffff;

  /* Signals */
  --ok:         #1C8560;
  --ok-soft:    #E4F4EC;
  --warn:       #B9761A;
  --warn-soft:  #FCF1DF;
  --stop:       #BC3F3B;
  --stop-soft:  #FBEAE9;

  --radius:     10px;
  --radius-lg:  16px;
  --shadow:     0 1px 2px rgba(16,27,69,.05), 0 8px 24px -12px rgba(16,27,69,.18);
  --shadow-lg:  0 24px 60px -28px rgba(16,27,69,.45);

  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body:    'Public Sans', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-bn:      'Noto Sans Bengali', var(--font-body);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);
  font-size: .945rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main{
      min-height: calc(100vh - 25.65rem);
}

h1, h2, h3, h4, h5, .display-face {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -.02em;
  font-weight: 600;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--ink-2); }

.bn { font-family: var(--font-bn); font-weight: 400; }

/* Eyebrow labels — used only where a section genuinely has a code
   (module number, ward number, financial year). Not decoration. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
}
.eyebrow.on-dark { color: var(--saffron); }

.mono { font-family: var(--font-mono); font-variant-ligatures: none; }

.muted { color: var(--text-2); }
.tiny  { font-size: .78rem; }

/* ---------- Accessibility floor ---------- */
:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Public shell
   ============================================================ */
.gov-strip {
  background: var(--gov-color);
  color: #ffffff;
  font-size: .76rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* .gov-strip .mono { color: var(--text); } */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1030;
}

.brand-lockup { display: flex; align-items: center; gap: .8rem; }
.brand-seal {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%;              /* match the logo's own circular shape */
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3px rgba(212,168,67,.55); /* thin gold ring like a stamped medal */
}
.brand-seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-name  { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.15; font-size: 1.02rem; }
.brand-sub   { font-size: .74rem; color: var(--text-2); letter-spacing: .01em; }

.jansewa-seal {
    width: 95px;
    flex: 0 0 95px;
    border-radius: 5px;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3px rgba(212, 168, 67, .55);
    margin-left:5px;
    padding:0 11px;
}
.jansewa-seal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.navbar-nav .nav-link {
  color: var(--text);
  font-weight: 500;
  font-size: .9rem;
  padding: .5rem .85rem;
  border-radius: 8px;
}
.navbar-nav .nav-link:hover { background: var(--paper); color: var(--ink); }
.navbar-nav .nav-link.active { color: var(--ink); background: var(--teal-soft); }

/* ============================================================
   Hero — the thesis: "one docket, tracked end to end"
   ============================================================ */
.hero {
  background:
    radial-gradient(1100px 460px at 88% -12%, rgba(42,125,158,.55) 0%, transparent 62%),
    radial-gradient(720px 420px at 6% 110%, rgba(238,155,63,.24) 0%, transparent 60%),
    var(--ink);
  color: #fff;
  padding: 4.25rem 0 4.75rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* faint ward grid — the constituency as a lattice */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 3.2vw, 3rem);
  line-height: 1.06;
  font-weight: 700;
  max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--saffron); }
.hero p.lead { color: #C8D3EC; max-width: 52ch; font-size: 1.02rem; }
.inPhoto{width:100%;max-width:150px;height:130px;overflow: hidden;}
.inPhoto img{width:100%;height:100%;object-fit:cover;}
@media(max-width:1399px){
.inPhoto{max-width:120px;height:116px;}
}
@media(max-width:991px){
.inPhoto{max-width:120px;height:125px;}
}
@media(max-width:767px){
.inPhoto{max-width:120px;height:105px;}
}
@media(max-width:480px){
.inPhoto{max-width:120px;height:90px;}
}

.mla-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  backdrop-filter: blur(6px);
}
.mla-card .who { font-family: var(--font-display); font-size: 1.12rem; color: #fff; font-weight: 600; }
.mla-card .where { font-size: .82rem; color: #A9B8DC; }

/* ---------- The signature element: the docket stub ---------- */
.docket {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--text);
}
.docket-head {
  background: var(--ink-2);
  color: #fff;
  padding: .85rem 1.15rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
}
.docket-head .label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; color: #9DB0DC; text-transform: uppercase; }
.docket-head .ticket { font-family: var(--font-mono); font-size: 1.06rem; color: var(--saffron); font-weight: 500; }

/* perforation between head and body — the tear-off line */
.perf {
  height: 14px;
  background: var(--ink-2);
  position: relative;
}
.perf::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed rgba(255,255,255,.35);
}
/* The dashed line alone reads as the tear-off; no notches needed. */

.docket-body { padding: 1.15rem 1.25rem 1.35rem; }

/* ---------- Lifecycle rail ---------- */
.rail { list-style: none; margin: 0; padding: 0; position: relative; }
.rail::before {
  content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px;
  width: 2px; background: var(--line-2);
}
.rail li {
  position: relative;
  padding: .38rem 0 .38rem 2rem;
  font-size: .87rem;
  color: var(--text-3);
}
.rail li::before {
  content: ''; position: absolute; left: 3px; top: .78rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-2);
}
.rail li.done { color: var(--text-2); }
.rail li.done::before { background: var(--ok); border-color: var(--ok); }
.rail li.now  { color: var(--ink); font-weight: 600; }
.rail li.now::before {
  background: var(--saffron); border-color: var(--saffron);
  box-shadow: 0 0 0 4px var(--saffron-soft);
}
.rail li .when { display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }

/* Horizontal rail for wide views */
.rail-h { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; overflow-x: auto; }
.rail-h li {
  flex: 1 1 0; min-width: 110px; text-align: center;
  position: relative; padding-top: 2rem;
  font-size: .78rem; color: var(--text-3);
}
.rail-h li::after {
  content: ''; position: absolute; top: 12px; left: 50%; right: -50%;
  height: 2px; background: var(--line-2);
}
.rail-h li:last-child::after { display: none; }
.rail-h li::before {
  content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-2); z-index: 2;
}
.rail-h li.done::before { background: var(--ok); border-color: var(--ok); }
.rail-h li.done::after  { background: var(--ok); }
.rail-h li.done { color: var(--text-2); }
.rail-h li.now::before  { background: var(--saffron); border-color: var(--saffron); box-shadow: 0 0 0 4px var(--saffron-soft); }
.rail-h li.now { color: var(--ink); font-weight: 700; }

/* Resolved stamp */
.stamp {
  display: inline-block;
  transform: rotate(-7deg);
  border: 2px solid var(--ok);
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  padding: .18rem .6rem;
  border-radius: 4px;
  opacity: .88;
}

/* ============================================================
   Cards, pills, stats
   ============================================================ */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: .9rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.card-body { padding: 1.1rem; }

.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  height: 100%;
  box-shadow: var(--shadow);
}
.stat .k { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.stat .t { font-size: .78rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .07em; }
.stat .d { font-size: .76rem; color: var(--text-3); margin-top: .35rem; }
.stat.accent-saffron { border-left-color: var(--saffron); }
.stat.accent-ok      { border-left-color: var(--ok); }
.stat.accent-stop    { border-left-color: var(--stop); }

.pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.stat-new    { background: var(--teal-soft);   color: #1D5D77; }
.stat-review { background: var(--warn-soft);   color: var(--warn); }
.stat-work   { background: var(--saffron-soft);color: #9B5F0E; }
.stat-done   { background: var(--ok-soft);     color: var(--ok); }
.stat-stop   { background: var(--stop-soft);   color: var(--stop); }
.stat-awarded   { background: #f4e6f6; color: #9017a1; }

.pri-low    { color: var(--text-2); }
.pri-med    { color: var(--teal); }
.pri-high   { color: var(--warn); font-weight: 600; }
.pri-urgent { color: var(--stop); font-weight: 700; }
.pri-urgent::before, .pri-high::before { content: '▲ '; font-size: .7em; }

/* ---------- Category tiles ---------- */
.tile {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: var(--shadow-lg);
}
.tile i { font-size: 1.4rem; color: var(--teal); }
.tile .name { font-weight: 600; color: var(--ink); margin-top: .5rem; font-size: .92rem; }
.tile .name-bn { font-family: var(--font-bn); font-size: .8rem; color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 600; font-size: .9rem; padding: .55rem 1.1rem; }
.btn-primary { background: var(--ink); border-color: var(--ink); }
.btn-primary:hover, .btn-primary:focus { background: var(--ink-2); border-color: var(--ink-2); }
.btn-accent { background: var(--saffron); border-color: var(--saffron); color: #2B1B02; }
.btn-accent:hover { background: #E08D2E; border-color: #E08D2E; color: #2B1B02; }
.btn-teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-teal:hover { background: #23697F; border-color: #23697F; color: #fff; }
.btn-outline-ink { border: 1px solid var(--line-2); color: var(--ink); background: #fff; }
.btn-outline-ink:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn-light-ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.btn-light-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Forms ---------- */
.form-label { font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.form-label .req { color: var(--stop); }
.form-control, .form-select {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-size: .9rem;
  padding: .55rem .75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(42,125,158,.15);
}
.form-select {
    padding: .55rem 1.6rem .55rem .55rem;
}
.form-text { font-size: .78rem; color: var(--text-3); }
.form-section {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  margin-top: 1.35rem;
}
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* radio card group for priority / slots */
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice label {
  display: block; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: .55rem .7rem; font-size: .85rem; text-align: center;
  transition: all .15s ease;
}
.choice input:checked + label { border-color: var(--ink); background: var(--ink); color: #fff; }
.choice input:focus-visible + label { outline: 3px solid var(--saffron); outline-offset: 2px; }

/* ---------- Tables ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff;}
.table-pagination{padding-bottom: 15px;}
.table { margin: 0; font-size: .875rem; }
.table > thead > tr > th {
  background: #F7F9FD;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  padding: .7rem .85rem;
  white-space: nowrap;
}
.table > tbody > tr > td { padding: .75rem .85rem; vertical-align: middle; border-color: var(--line); }
.table > tbody > tr:hover { background: #FAFCFF; }
.table a.ref { font-family: var(--font-mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.table a.ref:hover { color: var(--teal); }

/* ---------- Empty state: an invitation, not an apology ---------- */
.empty {
  text-align: center;
  padding: 2.75rem 1.25rem;
  color: var(--text-2);
}
.empty i { font-size: 2rem; color: var(--line-2); display: block; margin-bottom: .6rem; }
.empty h6 { font-family: var(--font-display); color: var(--ink); margin-bottom: .25rem; }

/* ---------- Progress ---------- */
.bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.bar > span.warn { background: var(--saffron); }
.bar > span.ok   { background: var(--ok); }
.bar > span.stop { background: var(--stop); }

/* ============================================================
   Admin shell
   ============================================================ */
.admin-body { background: var(--paper); }
.sidebar {position: fixed; top: 0; bottom: 0; left: 0; width: 254px; background: var(--ink); overflow: hidden; z-index: 1040; transition: transform .25s ease; }
.sidebar .brand-lockup {padding: 1.35rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar .brand-name {color: #fff; font-size: .95rem; }
.sidebar .brand-sub  {color: #8D9CC6; }
.sidebar-scroll {height: calc(100vh - 85px); position: relative; overflow: hidden; padding: .85rem .75rem 2rem; }
.side-group {font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #6E7EAB; padding: 1rem .75rem .35rem; }
.side-link {display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 8px; color: #C2CCE6; font-size: .875rem; font-weight: 500; margin-bottom: .12rem; }
.side-link i {font-size: 1rem; width: 18px; text-align: center; color: #8494C0; }
.side-link:hover {background: rgba(255,255,255,.07); color: #fff; }
.side-link.active {background: var(--teal); color: #fff; }
.side-link.active i {color: #fff; }
.side-link .count {margin-left: auto; font-family: var(--font-mono); font-size: .7rem; background: var(--saffron); color: #2B1B02; border-radius: 999px; padding: .05rem .45rem; font-weight: 600; }
.main { margin-left: 254px; min-height: 100vh; }
.topbar {background: #fff; border-bottom: 1px solid var(--line); padding: .7rem 1.35rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 1020; }
.topbar h1 { font-size: 1.12rem; margin: 0; }
.content { padding: 1.35rem; }

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(16,27,69,.5); z-index: 1035; display: none;
}

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .sidebar-backdrop.show { display: block; }
  .jansewa-seal{display: none;}
}

/* ---------- Avatar ---------- */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal);
  display: grid; place-items: center;
  font-weight: 700; font-size: .82rem;
  flex: 0 0 34px;
}

/* ---------- Timeline (complaint history) ---------- */
.tl { list-style: none; margin: 0; padding: 0 0 0 1.35rem; position: relative; }
.tl::before { content: ''; position: absolute; left: 5px; top: .4rem; bottom: .4rem; width: 2px; background: var(--line); }
.tl li { position: relative; padding-bottom: 1.15rem; }
.tl li::before {
  content: ''; position: absolute; left: -1.35rem; top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--teal);
}
.tl li:last-child { padding-bottom: 0; }
.tl .tl-time { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #A6B4D8;
  padding: 2.5rem 0 1.25rem;
  font-size: .86rem;
  margin-top: 3rem;
}
.site-footer h6 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; margin-bottom: .85rem; }
.site-footer a { color: #A6B4D8; display: block; padding: .18rem 0; }
.site-footer a:hover { color: var(--saffron); }
.footer-rule { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.75rem; padding-top: 1rem; font-size: .78rem; color: #7C8BB5; }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-aside {
  background:
    radial-gradient(800px 420px at 20% 8%, rgba(42,125,158,.5), transparent 60%),
    var(--ink);
  color: #fff; padding: 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-panel { display: grid; place-items: center; padding: 2.5rem 1.5rem; background: #fff; }
.auth-card { width: 100%; max-width: 400px; }
@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { padding: 2rem 1.5rem; }
}

/* ---------- Print: a ticket should print like a receipt ---------- */
@media print {
  .sidebar, .topbar, .site-header, .site-footer, .gov-strip, .no-print { display: none !important; }
  .main { margin-left: 0; }
  body { background: #fff; }
  .card,.docket { box-shadow: none; border: 1px solid #999; }
}

input[readonly], textarea[readonly] { background-color: #f5f5f5; border: 1px solid #ddd; cursor: not-allowed; }
input[readonly]:focus, textarea[readonly]:focus { background-color: #f5f5f5;outline: none; box-shadow: none; cursor: not-allowed; }
input[readonly], textarea[readonly] { caret-color: transparent; }




/* ====== MLA HERO — non-cropping frame + separate caption card ====== */
.mla-photo-frame{
  position:relative;width:100%;border-radius:18px;overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-lg);border:1px solid rgba(212,168,67,.4);background:#0b1330;
}
/* frame ratio matches the real photo (1280x951) so nothing left/right gets cut */
.mla-image-wrap{position:relative;width:100%;aspect-ratio:1280/951;overflow:hidden}
.mla-image-wrap img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center 15%;
  transform:scale(1);animation:mlaSlowZoom 16s ease-in-out infinite alternate;will-change:transform;
}
@keyframes mlaSlowZoom{0%{transform:scale(1)}100%{transform:scale(1.035)}}
.mla-image-shine{
  position:absolute;z-index:2;top:0;left:-80%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.04) 35%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.04) 65%,transparent 100%);
  transform:skewX(-18deg);animation:mlaLightSweep 7s ease-in-out infinite;pointer-events:none;
}
@keyframes mlaLightSweep{
  0%{left:-80%;opacity:0} 15%{opacity:1} 45%{left:130%;opacity:.7} 50%{opacity:0} 100%{left:130%;opacity:0}
}

/* caption card — badge, name and location all live here now, off the photo */
.mla-caption-card{
  margin-top:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:20px 22px;backdrop-filter:blur(6px);
}
.mla-caption-badge{
  display:inline-flex;align-items:center;margin-bottom:12px;padding:6px 12px;
  border:1px solid rgba(212,168,67,.7);border-radius:999px;background:rgba(212,168,67,.12);
  color:#e5c36a;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.mla-caption-card h2{margin:0;color:#fff;font-size:1.45rem;font-weight:800;line-height:1.2}
.mla-caption-card p{margin:8px 0 0;color:#c8d3ec;font-size:.85rem}

/* ---- Hero CTA buttons ---- */
.hero-cta-row .btn{min-width:190px}
.btn-gold{background:transparent;border:2px solid #d4a843;color:#f3dda3}
.btn-gold:hover{background:#d4a843;border-color:#d4a843;color:#241a00}

@media (max-width:991.98px){
  .mla-photo-frame,.mla-caption-card{max-width:560px;margin-inline:auto}
  .mla-caption-card{margin-top:12px;margin-bottom:8px}
  .hero-cta-row .btn{min-width:0;flex:1 1 45%}
}
@media (max-width:575.98px){
  .mla-caption-card{padding:16px 18px}
  .mla-caption-card h2{font-size:1.2rem}
  .hero-cta-row{flex-direction:column}
  .hero-cta-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .mla-image-shine,.mla-image-wrap img{animation:none}
}








/* ====== Notidy CSS =========== */
#ajax-notify-container{position:fixed;top:20px;right:20px;z-index:99999;width:min(420px,calc(100vw - 40px))}
#ajax-notify-container .ajax-notify{animation:notifyIn .35s ease-out forwards;will-change:transform,opacity}
#ajax-notify-container .ajax-notify.notify-exit{animation:notifyOut .3s ease-in forwards}
@keyframes notifyIn{
from{opacity:0;transform:translateX(110%)}
to{opacity:1;transform:translateX(0)}
}
@keyframes notifyOut{
from{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(110%)}
}



@media (max-width: 991.98px) {
  .nav-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .nav-buttons .btn {
    flex: 1;
    width: 50%;
  }
}


.pagination-custom{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.5rem}
.pagination-custom .page-item{list-style:none}
.pagination-custom .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line,#e2e8f3);background:var(--card,#fff);color:var(--text-2,#55618a);font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s ease;font-family:var(--font-body, 'Public Sans', sans-serif)}
.pagination-custom .page-link:hover{background:var(--teal-soft,#e6f1f6);border-color:var(--teal,#2a7d9e);color:var(--teal,#2a7d9e);transform:translateY(-1px);box-shadow:0 2px 8px rgba(42,125,158,.15)}
.pagination-custom .page-item.active .page-link{background:var(--teal,#2a7d9e);border-color:var(--teal,#2a7d9e);color:var(--text-white,#fff);box-shadow:0 4px 12px rgba(42,125,158,.3)}
.pagination-custom .page-item.active .page-link:hover{background:var(--ink-2,#1b2a5e);border-color:var(--ink-2,#1b2a5e);box-shadow:0 4px 16px rgba(16,27,69,.3);transform:translateY(-1px)}
.pagination-custom .page-item.disabled .page-link{opacity:.5;cursor:not-allowed;pointer-events:none;}
.pagination-custom .page-item .page-link:focus{outline:0;box-shadow:0 0 0 3px rgba(42,125,158,.2)}
.pagination-custom .page-item:not(.disabled):not(.active) .page-link:active{transform:scale(.95)}
.pagination-custom .page-item .page-link .bi{font-size:.875rem}
.pagination-custom .page-item.ellipsis .page-link{border:none;background:0 0;color:var(--text-3,#8892b0);pointer-events:none;min-width:30px}
.pagination-info{color:var(--text-3,#8892b0);font-size:.8125rem;font-family:var(--font-body, 'Public Sans', sans-serif)}
@media (max-width:768px){
.pagination-custom .page-link{min-width:34px;height:34px;font-size:.8125rem;padding:0 8px}
.pagination-custom{gap:4px}
}
@media (max-width:576px){
.pagination-custom .page-link{min-width:30px;height:30px;font-size:.75rem;padding:0 6px}
.pagination-custom .page-item .page-link .bi{font-size:.75rem}
}

.status-btn.active{background: var(--ink) !important;border-color: var(--ink) !important; color: #fff !important;}

@media (min-width: 992px) {
    .notifications-sidebar {
        position: sticky;
        top: 75px;
        align-self: flex-start;
    }
}
.bg-accent{
  background-color: var(--saffron) ;
}

.social-links a {
    color: inherit;
    text-decoration: none;
    font-size: 15px;
    transition: opacity 0.2s ease;
}

.social-links a:hover {
    opacity: 0.7;
}


.event-card{background:#fff;border-radius:16px;border:1px solid var(--line,#e5e7eb);overflow:hidden;transition:all .3s ease;height:100%;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.event-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.1);border-color:var(--accent,#d4a843)}
.event-card .event-card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.event-card .card-img-wrapper{width:100%;background:#f3f4f6;overflow:hidden;aspect-ratio:16/10;position:relative;flex-shrink:0}
.event-card .card-img-top{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.event-card:hover .card-img-top{transform:scale(1.03)}
.event-card .card-img-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#f3f4f6 0,#e5e7eb 100%);display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:#9ca3af}
.event-card .card-body{padding:1.25rem 1.25rem .5rem !important;flex:1;display:flex;flex-direction:column}
.event-card .card-title{font-size:1.1rem;font-weight:600;color:var(--ink,#1a1a2e);margin-bottom:.5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.event-card .card-text{font-size:.9rem;color:#4b5563;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.event-card .card-footer{background:0 0;border-top:1px solid var(--line,#e5e7eb);padding:.75rem 1.25rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem;flex-shrink:0}
.event-card .event-date{font-size:.8rem;color:#6b7280;display:flex;align-items:center;gap:.4rem}
.event-card .photo-badge{font-size:.75rem;color:#6b7280;display:flex;align-items:center;gap:.3rem;background:#f3f4f6;padding:.2rem .7rem;border-radius:20px}
.event-card .featured-badge{position:absolute;top:12px;right:12px;background:#d4a843;color:#fff;padding:.2rem .7rem;border-radius:30px;font-size:.7rem;font-weight:600;display:flex;align-items:center;gap:.3rem;box-shadow:0 2px 10px rgba(212,168,67,.35);letter-spacing:.3px}
.event-card.small .card-img-wrapper{aspect-ratio:16/9}
.event-card.small .card-body{padding:.75rem 1rem .25rem}
.event-card.small .card-title{font-size:.95rem}
.event-card.small .card-text{font-size:.8rem}
.event-card.small .card-footer{padding:.5rem 1rem .75rem}
.event-card.large .card-img-wrapper{aspect-ratio:16/8}
.event-card.large .card-title{font-size:1.3rem}
.event-card.large .card-text{font-size:1rem}
.event-card.compact .card-body{padding:.75rem}
.event-card.compact .card-footer{padding:.5rem .75rem}
.event-card.borderless{border:none;border-radius:0;box-shadow:none}
.event-card.borderless:hover{transform:none;box-shadow:none}
.event-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.event-card-grid .event-card{height:100%}
@media (max-width:576px){
.event-card .card-title{font-size:1rem}
.event-card-grid{grid-template-columns:1fr;gap:1rem}
}
.event-card .card-img-top{transition: transform .4s ease !important;}

.card-img-wrapper{position:relative;width:100%;height:220px;overflow:hidden;background:#f1f3f5}
.card-img-wrapper .lazy-image{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.card-img-wrapper .lazy-image.loaded{opacity:1}
.image-loading-placeholder{position:absolute;inset:0;z-index:1;overflow:hidden;background:#eee;opacity:1;visibility:visible;transition:opacity .2s ease}
.card-img-wrapper.image-loaded .image-loading-placeholder{opacity:0;visibility:hidden;pointer-events:none}
.skeleton-shimmer{width:100%;height:100%;background:linear-gradient(90deg,#eee 25%,#e2e2e2 50%,#eee 75%);background-size:200% 100%;animation:image-shimmer 1.5s infinite}
@keyframes image-shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
.card-img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f1f3f5;color:#adb5bd;font-size:2.5rem}
.image-error-placeholder{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;background:#f1f3f5;color:#adb5bd;font-size:2.5rem}
.card-img-wrapper.image-error .image-error-placeholder{display:flex}
.card-img-wrapper .lazy-image.load-error{display:none}
.hidden-badge{background-color: #e2e3e5; color: #41464b; border: 1px solid #d3d6d8; padding: 0.25rem 0.5rem; margin-top: 0.25rem; display: inline-block; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.375rem;font-weight:500;font-size:.7rem;letter-spacing:.3px;border-radius:20px;}
.hidden-badge i{font-size:.65rem;}
.bg-primary{background-color: var(--teal) !important ;}
.dropdown-item.active, .dropdown-item:active{background-color:#2A7D9E}

/* ============================================================
   Fancy Dropdown Menus
   ============================================================ */
.mega-nav{position:relative}
.fancy-dropdown{--dd-radius:14px;border:1px solid rgba(0,0,0,.06);border-radius:var(--dd-radius);padding:8px;margin-top:12px;min-width:320px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -8px rgba(16,24,40,.18);opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top center;pointer-events:none;will-change:opacity,transform}
.fancy-dropdown.show,.mega-nav.is-open>.fancy-dropdown,.mega-nav:focus-within>.fancy-dropdown{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;animation:dd-in .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes dd-in{
from{opacity:0;transform:translateY(-8px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.fancy-dropdown::before{content:"";position:absolute;top:-6px;left:28px;width:12px;height:12px;background:#fff;border-left:1px solid rgba(0,0,0,.06);border-top:1px solid rgba(0,0,0,.06);transform:rotate(45deg);border-top-left-radius:3px}
.fancy-dropdown .dropdown-header{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#8892a4;padding:10px 14px 6px}
.fancy-dropdown .dropdown-item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;color:#1f2a44;font-weight:500;line-height:1.2;transition:background-color .18s ease,transform .18s ease,color .18s ease}
.fancy-dropdown .dropdown-item+.dropdown-item{margin-top:2px}
.fancy-dropdown .di-icon{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f4f6fb;color:#2b3a67;font-size:1.05rem;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.fancy-dropdown .di-text{display:flex;flex-direction:column}
.fancy-dropdown .di-text strong{font-size:.92rem;font-weight:600}
.fancy-dropdown .di-text small{font-size:.76rem;color:#6b7a90;margin-top:2px}
.fancy-dropdown .dropdown-item:focus,.fancy-dropdown .dropdown-item:hover{background:linear-gradient(90deg,#eef3ff 0,#f7faff 100%);color:#12234f;transform:translateX(2px);outline:0}
.fancy-dropdown .dropdown-item:focus .di-icon,.fancy-dropdown .dropdown-item:hover .di-icon{background:#2b3a67;color:#fff;transform:scale(1.05)}
.fancy-dropdown .dropdown-item.active{background:linear-gradient(90deg,#e6edff 0,#f2f6ff 100%);color:#12234f}
.fancy-dropdown .dropdown-item.active .di-icon{background:#2b3a67;color:#fff}
.mega-nav>.nav-link.dropdown-toggle::after{transition:transform .22s ease}
.mega-nav.show>.nav-link.dropdown-toggle::after{transform:rotate(180deg)}
@media (max-width:991.98px){
.fancy-dropdown{min-width:100%;margin-top:6px;box-shadow:0 6px 20px rgba(16,24,40,.1);animation:dd-in-mobile .2s ease forwards}
.fancy-dropdown::before{display:none}
@keyframes dd-in-mobile{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}
}
@media (prefers-reduced-motion:reduce){
.fancy-dropdown,.fancy-dropdown .di-icon,.fancy-dropdown .dropdown-item{animation:none!important;transition:none!important}
}

@media (min-width:992px){
.mega-nav>.nav-link.dropdown-toggle{pointer-events:auto}
.mega-nav.is-open>.dropdown-menu,.mega-nav:focus-within>.dropdown-menu{display:block;opacity:1;transform:translateY(0) scale(1);animation:dd-in .22s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:auto}
.mega-nav.is-open>.nav-link.dropdown-toggle::after,.mega-nav:focus-within>.nav-link.dropdown-toggle::after{transform:rotate(180deg)}
.mega-nav.is-open>.nav-link{color:var(--bs-accent,#c8102e)}
.mega-nav>.dropdown-menu::after{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
}

.user-trigger{padding:4px 10px 4px 4px!important;border-radius:999px;transition:background-color .18s ease}
.user-nav.show>.user-trigger,.user-trigger:hover{background:rgba(43,58,103,.06)}
.avatar{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;background:linear-gradient(135deg,#2b3a67,#4a5c94);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.02em;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(43,58,103,.25)}
.user-firstname{font-weight:600;font-size:.92rem;color:#1f2a44}
.user-dropdown{min-width:280px;margin-top:10px;padding:8px}
.user-dropdown::before{left:auto!important;right:22px!important}
.user-head{display:flex;align-items:center;gap:12px;padding:10px 12px}
.user-head-avatar{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2b3a67,#4a5c94);color:#fff;font-weight:700;font-size:1.05rem;box-shadow:0 2px 8px rgba(43,58,103,.22)}
.user-head-info{display:flex;flex-direction:column;min-width:0}
.user-head-info strong{font-size:.95rem;color:#1f2a44;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-head-info small{font-size:.74rem;color:#6b7a90;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:2px}
.user-dropdown .item-danger{color:#c8302e}
.user-dropdown .item-danger .di-icon{background:#fdecec;color:#c8302e}
.user-dropdown .item-danger:focus,.user-dropdown .item-danger:hover{background:linear-gradient(90deg,#fdecec 0,#fff5f5 100%);color:#a51f1f}
.user-dropdown .item-danger:focus .di-icon,.user-dropdown .item-danger:hover .di-icon{background:#c8302e;color:#fff}
@media (max-width:991.98px){
.user-dropdown{min-width:100%}
.user-dropdown::before{display:none}
.user-trigger{padding:6px 12px 6px 6px!important}
}
.user-nav .dropdown-item{align-items: center;}
.user-nav .di-icon{flex: 0 0 24px;height: 24px;font-size: 0.9rem;}


.quick-actions-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.qa-btn{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;position:relative;min-height:68px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.qa-btn:hover{border-color:var(--ink-3);box-shadow:var(--shadow);transform:translateY(-2px);color:inherit}
.qa-btn-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius);background:var(--paper);color:var(--ink);font-size:1.15rem;transition:background .2s ease,color .2s ease}
.qa-btn:hover .qa-btn-icon{background:var(--ink);color:var(--text-white)}
.qa-btn-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.qa-btn-title{font-family:var(--font-body);font-size:.94rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-btn-sub{font-size:.78rem;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-btn-arrow{margin-left:auto;color:var(--ink);font-size:.88rem;opacity:0;transform:translateX(-3px);transition:opacity .2s ease,transform .2s ease}
.qa-btn:hover .qa-btn-arrow{opacity:.6;transform:translateX(0)}
.eyebrow.on-accent{color:var(--ink)}
@media (max-width:991px){
.quick-actions-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:575px){
.quick-actions-row{grid-template-columns:1fr;gap:.5rem}
.qa-btn{min-height:58px;padding:.7rem .85rem;gap:.7rem}
.qa-btn-icon{width:36px;height:36px;font-size:1rem}
.qa-btn-title{font-size:.88rem}
.qa-btn-sub{font-size:.74rem}
.qa-btn-arrow{display:none}
}
.event-card  .more {font-size: .76rem;color: var(--teal);font-weight: 700;display: inline-flex;align-items: center;gap: .35rem;transition: all .22s;}


.premium-float-container{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:92%;max-width:420px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);border-radius:24px;padding:8px;box-shadow:0 12px 35px rgba(0,0,0,.15),0 4px 10px rgba(0,0,0,.05);z-index:9999;gap:8px;align-items:center;justify-content:space-between}
.premium-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:18px;padding:12px 10px;transition:all .3s cubic-bezier(.4, 0, .2, 1);position:relative;overflow:hidden}
.premium-btn .icon-wrapper{display:flex;align-items:center;justify-content:center}
.premium-btn .text-wrapper{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.primary-action{background:linear-gradient(135deg,#f36c21 0,#e05a15 100%);color:#fff;box-shadow:0 4px 15px rgba(243,108,33,.4)}
.primary-action .btn-label{font-family:sans-serif;font-weight:700;font-size:14px;letter-spacing:.3px}
.primary-action .btn-sublabel{font-family:sans-serif;font-size:10px;font-weight:500;opacity:.85}
.primary-action:active{transform:scale(.97);box-shadow:0 2px 8px rgba(243,108,33,.4)}
.secondary-action{background:rgba(26,26,46,.05);color:#1a1a2e;border:1px solid rgba(26,26,46,.08)}
.secondary-action .btn-label{font-family:sans-serif;font-weight:700;font-size:14px;letter-spacing:.3px}
.secondary-action .btn-sublabel{font-family:sans-serif;font-size:10px;font-weight:500;opacity:.6}
.secondary-action:active{transform:scale(.97);background:rgba(26,26,46,.1)}
@media screen and (max-width:768px){
.premium-float-container{display:flex}
body{padding-bottom:100px}
}