/* =========================================================================
   GCOI World Congress — component layer
   Extends (does not replace) the ported globalcoi.com bootstrap/mobirise
   theme. Tokens documented in DESIGN.md — keep this file the single source
   for anything defined there.
   ========================================================================= */

:root {
  --gcoi-primary: #E15126;
  --gcoi-primary-dark: #AD4628;
  --gcoi-primary-light: #ED6436;
  --gcoi-accent-gold: #D08900;
  --gcoi-ink: #1B2026;
  --gcoi-body: #232323;
  --gcoi-surface: #FFFFFF;
  --gcoi-surface-muted: #EEEEEE;
  --congress-navy: #152A54;
  --congress-navy-light: #E7ECF5;

  --status-pending: #B7791F;
  --status-pending-bg: #FBF0DC;
  --status-verified: #1E824C;
  --status-verified-bg: #E1F5EA;
  --status-rejected: #C0392B;
  --status-rejected-bg: #FBE6E3;
  --status-draft: #6B7280;
  --status-draft-bg: #EEEEEE;

  --radius-card: 12px;
  --shadow-card: 0 1px 2px rgba(27,32,38,.06), 0 8px 24px rgba(27,32,38,.06);
  --ease: cubic-bezier(.4,0,.2,1);
}

/* The theme's .navbar-collapse{width:100% !important} assumes the logo
   stays hidden (its original, now-fixed default) so the nav links/buttons
   alone can claim the full row. With a visible logo as a sibling flex item,
   forcing the collapse to 100% overflows the row and wraps it onto its own
   line. Let it share space with the logo instead. */
@media (min-width: 992px) {
  .cid-u2a9TufIUR .navbar-collapse {
    width: auto !important;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Theme's nav-link padding (~27px each side) plus the now-visible logo
     leaves the row ~10-15px too tight to fit without wrapping; trimming it
     gives back well over that with room to spare. */
  .cid-u2a9TufIUR .nav-link {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- Skip link (keyboard/screen-reader users) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--congress-navy); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Mobile nav: Register/Login buttons ----------
   The theme shows .buttdivtop (Register/Login) inline in the top row on
   every screen <992px, while .buttdivbottom (the same buttons again, inside
   the collapsible hamburger menu) is desktop-only. That crowds logo +
   2 buttons + hamburger into one row on phones, causing overlap. Swap it:
   hide the inline pair and show the menu pair instead below 992px, the
   usual mobile-nav pattern. */
@media (max-width: 991px) {
  .cid-u2a9TufIUR .buttdivtop { display: none !important; }
  .cid-u2a9TufIUR .buttdivbottom { display: flex !important; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
}

/* ---------- Logo lockup in the ported header ----------
   Deliberately NOT using the theme's .logodiv/.logodivlogo classes here:
   .logodiv is display:none at >=992px and .logodivlogo caps at 80px wide
   in that theme (both sized for a different, icon-only mobile-nav logo the
   original markup doesn't have here) — inheriting either hid this lockup
   entirely on desktop and crushed it on mobile. This block owns its sizing
   at every breakpoint instead. */
.congress-logolockup { display: flex; align-items: center; padding-left: 1rem; flex: 0 1 auto; min-width: 0; }
.congress-logolockup-link { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.congress-logolockup-img { height: 42px; width: auto; max-width: none; flex-shrink: 0; }
.congress-logolockup-divider { width: 1px; height: 28px; background: rgba(27,32,38,.15); display: inline-block; flex-shrink: 0; }
.congress-logolockup-word {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--congress-navy);
  font-weight: 400;
}
.congress-logolockup-word strong { color: var(--gcoi-primary); font-weight: 700; }
/* Top utility bar: the ported theme's default (1.2rem text, col-lg-4/4/4
   split, 0.5rem top padding) makes the date/venue line wrap to two lines
   at desktop widths, inflating the bar's height. Slimmer padding + a wider
   date column + a touch smaller/nowrap text keeps it on one line. */
.cid-u2a9DqTVOB .menu-farmeat-top { padding: .4rem 1rem !important; }
.cid-u2a9DqTVOB .top-text.congress-topbar-date,
.cid-u2a9DqTVOB .top-text .congress-topbar-email {
  font-size: 1rem !important;
}
/* The ported theme hides .mstthree (home/mail icons) outright between
   769-991px (tablet/iPad portrait) via `display:none`, while still showing
   it on phones (<=768px, its own later rule wins there) and desktop
   (>=992px). The date text has no such rule, so it stayed visible while
   the icons vanished — icons should take priority at every width. */
@media (min-width: 769px) and (max-width: 991px) {
  .cid-u2a9DqTVOB .mstthree { display: block !important; text-align: right; }
}
.congress-topbar-date,
.cid-u2a9DqTVOB .mstone .top-text {
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
/* Below desktop, the venue name doesn't fit next to the dates without the
   ellipsis chopping mid-word ("...MAHSA Univer…") — drop the venue clause
   entirely instead of truncating it, so tablet screens show the complete
   "January 25-27, 2027" rather than a partial string. On phones there's
   no room for the topbar date line at all, so it's hidden outright. */
@media (max-width: 991px) {
  .congress-topbar-venue { display: none; }
}
@media (max-width: 575px) {
  .congress-topbar-date { display: none; }
}
@media (max-width: 767px) {
  .congress-logolockup { padding-left: .5rem; }
  .congress-logolockup-img { height: 32px; }
  .congress-logolockup-word { font-size: .8rem; white-space: nowrap; }
}
@media (max-width: 400px) {
  .congress-logolockup-word { display: none; }
  .congress-logolockup-divider { display: none; }
}

/* ---------- Buttons ----------
   The public theme (mbr-additional.css) already styles .btn-primary per
   block for pages that load it; admin pages don't load that stylesheet, so
   this rule makes congress.css self-sufficient for brand-correct buttons
   everywhere (and reinforces the pill shape/orange fill on public pages too). */
.btn-primary {
  background-color: var(--gcoi-primary) !important;
  border-color: var(--gcoi-primary) !important;
  color: #fff !important;
  border-radius: 100px;
  font-weight: 500;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--gcoi-primary-dark) !important;
  border-color: var(--gcoi-primary-dark) !important;
  color: #fff !important;
}

/* ---------- Buttons: outline variant used throughout new surfaces ---------- */
.btn-primary-outline {
  background: transparent !important;
  border: 2px solid var(--gcoi-primary);
  color: var(--gcoi-primary) !important;
  border-radius: 100px;
  font-weight: 500;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.btn-primary-outline:hover,
.btn-primary-outline:focus {
  background: var(--gcoi-primary) !important;
  color: #fff !important;
}
/* The ported theme's per-block .btncodetop/.btncode rules force
   color:#fff !important at (0,0,2,0) specificity, which otherwise beats a
   plain .btn-primary-outline !important at (0,0,1,0) and makes this button's
   text invisible against its own transparent background. Match specificity
   (two classes) so source order — this file loads after the theme — wins. */
.btncodetop.btn-primary-outline,
.btncode.btn-primary-outline {
  color: var(--gcoi-primary) !important;
  background: transparent !important;
}
.btncodetop.btn-primary-outline:hover,
.btncode.btn-primary-outline:hover {
  color: #fff !important;
  background: var(--gcoi-primary) !important;
}
.btn-secondary-outline {
  background: transparent !important;
  border: 2px solid var(--congress-navy);
  color: var(--congress-navy) !important;
  border-radius: 100px;
  font-weight: 500;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.btn-secondary-outline:hover,
.btn-secondary-outline:focus {
  background: var(--congress-navy) !important;
  color: #fff !important;
}
.btncodetop.btn-secondary-outline,
.btncode.btn-secondary-outline {
  color: var(--congress-navy) !important;
  border-color: var(--congress-navy) !important;
  background: transparent !important;
}
.btncodetop.btn-secondary-outline:hover,
.btncode.btn-secondary-outline:hover {
  color: #fff !important;
  background: var(--congress-navy) !important;
}
.btn-navy {
  background: var(--congress-navy);
  border: none;
  color: #fff;
  border-radius: 100px;
  font-weight: 500;
}
.btn-navy:hover, .btn-navy:focus { background: #0e1e3f; color: #fff; }

/* ---------- Section shell for new (non-mobirise) pages ---------- */
.congress-section { padding: 4rem 0; }
.congress-section--muted { background: var(--gcoi-surface-muted); }
.congress-section--navy { background: var(--congress-navy); color: #fff; }
.congress-section--navy h1, .congress-section--navy h2, .congress-section--navy h3 { color: #fff; }
.congress-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gcoi-primary);
}
.congress-heading { color: var(--gcoi-ink); font-weight: 300; }
.congress-heading strong { font-weight: 700; }

/* ---------- Hero ----------
   Two-column composition: content owns the primary reading path on the
   left, the GCOI/emblem/MAHSA credential mark sits beside it on the right
   as supporting evidence, not stacked above it. Previously the logo plate
   was a full-width block ABOVE the headline (pushing the actual message
   down the page) with a second, much larger duplicate emblem floated
   separately as a "watermark" — the two together were most of the hero's
   excess height. Consolidated into one compact mark, freeing ~180px of
   stacked height, so the base padding is trimmed to match the leaner
   content instead of padding out empty space. */
.congress-hero {
  position: relative;
  background-color: #050d24;
  background-image: linear-gradient(180deg, rgba(5, 13, 36, 0.2) 0%, rgba(5, 13, 36, 0.05) 50%, rgba(5, 13, 36, 0.35) 100%), url('../images/hero-bg-kl.jpg');
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
  padding: 4.5rem 0 4rem;
}
@media (max-width: 767px) {
  .congress-hero { padding: 2.75rem 0 2.5rem; }
}
.congress-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.congress-hero__bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  display: block;
}
.congress-hero__bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(5, 13, 36, 0.2) 0%, rgba(5, 13, 36, 0.05) 50%, rgba(5, 13, 36, 0.35) 100%);
  z-index: 1;
}
.congress-hero__content { position: relative; z-index: 2; }
.congress-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 0.5rem;
  color: #ffffff;
}
.text-orange-accent {
  color: #ffffff;
}
.fee-flyer-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* Side by side from small screens up — two tall portrait flyers stacked
   in a single narrow column made this block roughly twice as tall as the
   text beside it on desktop, leaving a large empty gap next to the text.
   Only true phone widths keep the column stack, where side-by-side would
   make each flyer too narrow to read. */
@media (min-width: 576px) {
  .fee-flyer-stack { flex-direction: row; align-items: flex-start; }
  .fee-flyer-thumb { width: calc(50% - .625rem); }
}

/* Clickable flyer thumbnails — a subtle zoom + darken overlay on hover
   signals they open full size, rather than being static, uninteractive
   images. */
.fee-flyer-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  line-height: 0;
}
.fee-flyer-thumb img {
  width: 100%;
  display: block;
  transition: transform .35s ease;
}
.fee-flyer-thumb:hover img,
.fee-flyer-thumb:focus-visible img { transform: scale(1.04); }
.fee-flyer-thumb__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .5rem;
  background: linear-gradient(180deg, rgba(5,13,36,0) 55%, rgba(5,13,36,.72) 100%);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .25s ease;
  padding-bottom: 1.1rem;
}
.fee-flyer-thumb:hover .fee-flyer-thumb__overlay,
.fee-flyer-thumb:focus-visible .fee-flyer-thumb__overlay { opacity: 1; }
.fee-flyer-thumb:focus-visible { outline: 3px solid var(--congress-navy); outline-offset: 3px; }
@media (hover: none) {
  /* Touch devices can't hover — keep a permanent hint instead. */
  .fee-flyer-thumb__overlay { opacity: 1; background: linear-gradient(180deg, rgba(5,13,36,0) 70%, rgba(5,13,36,.78) 100%); padding-bottom: .75rem; font-size: .8rem; }
}

/* Lightbox for viewing a flyer full size. */
.flyer-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.flyer-lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease;
}
.flyer-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 13, 36, .88);
}
.flyer-lightbox__inner {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 640px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(.96);
  transition: transform .2s ease;
}
.flyer-lightbox.is-open .flyer-lightbox__inner { transform: scale(1); }
.flyer-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  display: block;
}
.flyer-lightbox__caption {
  color: #fff;
  opacity: .85;
  font-size: .88rem;
  margin: .9rem 0 0;
  text-align: center;
  max-width: 90%;
}
.flyer-lightbox__close {
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--congress-navy);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .15s ease;
}
.flyer-lightbox__close:hover { transform: scale(1.08); }
.flyer-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.flyer-lightbox__nav:hover { background: rgba(255,255,255,.28); }
.flyer-lightbox__nav--prev { left: -1.25rem; }
.flyer-lightbox__nav--next { right: -1.25rem; }
@media (max-width: 767px) {
  .flyer-lightbox__nav--prev { left: .5rem; }
  .flyer-lightbox__nav--next { right: .5rem; }
  .flyer-lightbox__close { top: .5rem; right: .5rem; }
}
.congress-hero__location {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: .65rem 0 1.35rem;
}
.congress-hero__location-text {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(1.4rem, 3.1vw, 2.15rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FF7A59;
  text-shadow: 0 2px 18px rgba(255, 122, 89, .35);
  white-space: nowrap;
}
.congress-hero__location-text i {
  font-size: .62em;
  color: #FF7A59;
}
.congress-hero__location-rule {
  flex: 1 1 auto;
  min-width: 32px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 122, 89, .75), rgba(255, 122, 89, 0));
  border-radius: 2px;
}
@media (max-width: 480px) {
  .congress-hero__location-rule { display: none; }
}

/* ---------- Contact persons (footer + contact page) ----------
   One shared visual language for "who to contact, and how" — a role
   label, the doctor's name, then a Call / WhatsApp action pair — used in
   both the site footer and the /contact page so the two never drift. */
.contact-person-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.1rem;
}
.contact-person__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gcoi-primary);
  margin-bottom: .15rem;
}
.contact-person__name {
  display: block;
  font-weight: 700;
  color: var(--congress-navy);
  font-size: 1rem;
  margin-bottom: .55rem;
}
.contact-person__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.contact-action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  font-style: normal;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.contact-action:hover { transform: translateY(-1px); }
.contact-action i { font-style: normal; }
.contact-action--call {
  border: 1.5px solid var(--congress-navy);
  color: var(--congress-navy) !important;
  background: transparent;
}
.contact-action--call:hover { background: var(--congress-navy); color: #fff !important; }
.contact-action--whatsapp {
  border: 1.5px solid #25D366;
  background: #25D366;
  color: #fff !important;
}
.contact-action--whatsapp:hover { background: #1DA851; border-color: #1DA851; }

/* Contact page cards center the same actions under the doctor's name. */
.contact-person-card .contact-person__label,
.contact-person-card .contact-person__name { text-align: center; }
.contact-person__phone-text {
  font-weight: 600;
  color: var(--gcoi-ink, #1b2026);
  margin-bottom: .85rem;
}

/* Footer contact list — plain, matching the rest of the footer's theme
   (no card box). Phone number is shown as text, not a link; Call and
   WhatsApp are two narrow buttons underneath it instead. */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.1rem;
}
.footer-contact-person {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.contact-phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .2rem;
}
.footer-contact-person__body { min-width: 0; }
.footer-contact-person .contact-person__name { margin-bottom: .15rem; }
.footer-contact-person__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin-top: .15rem;
}
.footer-contact-person__phone {
  font-weight: 600;
  color: var(--gcoi-ink, #1b2026);
  font-size: .95rem;
  white-space: nowrap;
}
.footer-contact-person .contact-person__actions {
  gap: .4rem;
}
.footer-contact-person .contact-action,
.contact-person-card .contact-action {
  padding: .2rem .7rem;
  font-size: .76rem;
  line-height: 1.4;
  min-width: 0;
  justify-content: center;
}

.text-orange {
  color: var(--gcoi-primary) !important;
}
.hero-btn-fees {
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}
.hero-btn-fees:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Credential mark: GCOI | congress emblem | MAHSA */
.congress-hero__logoplate {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: .5rem .65rem;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  padding: 1.1rem 1.25rem;
  width: 100%;
}
.congress-hero__logo { height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.congress-hero__logo--emblem { height: 46px; }
.congress-hero__logoplate-divider { width: 1px; align-self: stretch; background: rgba(27,32,38,.12); }
@media (min-width: 1200px) {
  .congress-hero__logo { height: 42px; }
  .congress-hero__logo--emblem { height: 56px; }
  .congress-hero__logoplate { gap: .75rem 1rem; padding: 1.1rem 1.25rem; }
}
@media (max-width: 991px) {
  .congress-hero__logoplate { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .congress-hero__logoplate { gap: .6rem .85rem; padding: .85rem 1rem; }
  .congress-hero__logo { height: 28px; }
  .congress-hero__logo--emblem { height: 38px; }
}
@media (max-width: 359px) {
  .congress-hero__logoplate-divider { display: none; }
  .congress-hero__logo { height: 24px; }
  .congress-hero__logo--emblem { height: 32px; }
}
.congress-hero__meta {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  font-size: .95rem; color: rgba(255,255,255,.85); margin: 1.25rem 0 2rem;
}
.congress-hero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.congress-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.08; margin-bottom: 1rem; }
.congress-hero p.lead { color: rgba(255,255,255,.85); font-size: 1.15rem; max-width: 42rem; }
.congress-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.congress-hero__actions .btn { padding: .85rem 1.75rem; font-size: 1rem; }
@media (max-width: 767px) {
  .congress-hero__actions {
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .congress-hero__actions .btn {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.88rem !important;
    white-space: nowrap;
    text-align: center;
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* ---------- Hero Countdown Timer ---------- */
.congress-countdown-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(10, 22, 54, 0.75) 0%, rgba(22, 12, 42, 0.75) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 30px rgba(225, 81, 38, 0.12);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.congress-countdown-card:hover {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 36px rgba(225, 81, 38, 0.22);
}
.congress-countdown-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  background: rgba(225, 81, 38, 0.14);
  border: 1px solid rgba(225, 81, 38, 0.35);
  padding: 0.35rem 1rem;
  border-radius: 50px;
  width: 100%;
}
.countdown-pulse {
  width: 9px;
  height: 9px;
  background-color: #FF5226;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 82, 38, 0.8);
  animation: countdownPulse 1.8s infinite;
  flex-shrink: 0;
}
@keyframes countdownPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 38, 0.8);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 38, 0);
  }
}
.countdown-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFA07A;
  text-shadow: 0 0 12px rgba(255, 122, 89, 0.4);
}
.congress-countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
}
.countdown-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.85rem 0.4rem;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.countdown-box:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(241, 90, 36, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 24px rgba(241, 90, 36, 0.3);
}
.countdown-num {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.countdown-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.4rem;
  text-transform: uppercase;
}
@media (max-width: 991px) {
  .congress-countdown-card {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 576px) {
  .countdown-num { font-size: 1.35rem; }
  .countdown-label { font-size: 0.58rem; }
  .congress-countdown-card { padding: 0.85rem 0.75rem; }
}

/* ---------- Category cards (registration category select) ---------- */
/* The bundled Bootstrap here is v4 — "row g-4" (a Bootstrap 5 gutter
   utility) is a no-op, so wrapped rows of category cards had almost no
   vertical breathing room. Add it directly on each card's column. */
.row > [class*="col"]:has(> .category-card) {
  margin-bottom: 1.75rem;
}
.category-card {
  display: block;
  border: 2px solid rgba(27,32,38,.08);
  border-radius: var(--radius-card);
  background: var(--gcoi-surface);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  height: 100%;
  cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(27,32,38,.08), 0 16px 32px rgba(27,32,38,.10); color: inherit; }
.category-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.category-card.is-selected,
.category-card:has(input:checked) {
  border-color: var(--congress-navy);
  background: var(--congress-navy-light);
}
.category-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--congress-navy-light); color: var(--congress-navy);
  font-size: 1.35rem; margin-bottom: 1rem;
}
.category-card__title { font-weight: 700; color: var(--gcoi-ink); margin-bottom: .35rem; font-size: 1.05rem; }
.category-card__note { font-size: .875rem; color: #6b7280; margin-bottom: .75rem; }
.category-card__price { font-weight: 700; color: var(--gcoi-primary); font-size: 1.1rem; }
.category-card__price small { font-weight: 400; color: #6b7280; font-size: .75rem; display: block; }

/* ---------- Wizard step rail ---------- */
.wizard-rail {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 auto 2.5rem; max-width: 640px; list-style: none; padding: 0;
}
.wizard-rail li { display: flex; align-items: center; flex: 1; }
.wizard-rail li:last-child { flex: 0 0 auto; }
.wizard-rail__dot {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gcoi-surface-muted); color: #9aa1ab; font-weight: 700; font-size: .9rem;
  border: 2px solid transparent; flex-shrink: 0;
}
.wizard-rail__label { font-size: .8rem; margin-left: .5rem; color: #9aa1ab; font-weight: 600; white-space: nowrap; }
.wizard-rail__line { flex: 1; height: 2px; background: var(--gcoi-surface-muted); margin: 0 .75rem; }
.wizard-rail li.is-done .wizard-rail__dot { background: var(--congress-navy); color: #fff; }
.wizard-rail li.is-done .wizard-rail__label { color: var(--congress-navy); }
.wizard-rail li.is-done + li .wizard-rail__line { background: var(--congress-navy); }
.wizard-rail li.is-active .wizard-rail__dot { background: #fff; color: var(--congress-navy); border-color: var(--congress-navy); }
.wizard-rail li.is-active .wizard-rail__label { color: var(--congress-navy); }
@media (max-width: 575px) { .wizard-rail__label { display: none; } }

/* ---------- Form card shell ---------- */
.congress-card {
  background: var(--gcoi-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}
@media (max-width: 575px) { .congress-card { padding: 1.25rem; } }
.congress-form-section + .congress-form-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(27,32,38,.08); }
.congress-form-section__title { font-weight: 700; font-size: 1.05rem; color: var(--gcoi-ink); margin-bottom: 1.25rem; }
.congress-form-section__title .step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--congress-navy); color: #fff;
  font-size: .8rem; margin-right: .5rem;
}
.form-label { font-weight: 600; color: var(--gcoi-ink); font-size: .9rem; margin-bottom: .4rem; display: inline-block; }
.form-label .required { color: var(--status-rejected); margin-left: 2px; }
.form-control,
.form-select,
select.form-control,
select.form-select,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="date"].form-control,
input[type="password"].form-control {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: var(--gcoi-ink, #1b2026) !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(27, 32, 38, 0.18) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

select.form-control,
select.form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.25rem !important;
}

input[type="date"].form-control {
  font-family: inherit !important;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.form-control:focus, .form-select:focus { border-color: var(--congress-navy) !important; box-shadow: 0 0 0 3px var(--congress-navy-light) !important; }
.form-text-help { font-size: .8rem; color: #6b7280; }
.invalid-feedback-block { color: var(--status-rejected); font-size: .82rem; margin-top: .35rem; }

/* ---------- Referral / Study Centre custom radio alignment ---------- */
.referral-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  align-items: center;
}
.custom-radio-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0.25rem 0.6rem 0.25rem 0 !important;
  font-size: 0.95rem !important;
  color: var(--gcoi-ink, #1b2026) !important;
  font-weight: 500 !important;
  user-select: none;
}
.custom-radio-option input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: var(--congress-navy, #152a54) !important;
  vertical-align: middle !important;
}
.custom-radio-option .radio-label {
  line-height: 1.2;
}

/* ---------- Fee breakdown card ---------- */
.fee-card { background: var(--gcoi-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.fee-card__head { background: var(--congress-navy); color: #fff; padding: 1.1rem 1.5rem; font-weight: 700; }
.fee-card__body { padding: 1.25rem 1.5rem; }
.fee-line { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .92rem; color: var(--gcoi-body); }
.fee-line--tax { color: #6b7280; }
.fee-line--total { border-top: 2px solid var(--gcoi-ink); margin-top: .5rem; padding-top: .85rem; font-weight: 700; font-size: 1.15rem; color: var(--gcoi-ink); }
.fee-line--total .fee-amount { color: var(--gcoi-primary); }
.fee-amount-cell { display: flex; flex-direction: column; gap: .4rem; }
.fee-amount-cell .fee-amount { font-weight: 700; font-size: 1.05rem; color: var(--gcoi-ink); }
.fee-tax-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.fee-tax-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; color: #6b7280;
  background: var(--gcoi-surface-muted); border-radius: 100px;
  padding: .2rem .6rem; white-space: nowrap;
}
.fee-tax-chip strong { color: var(--gcoi-primary); font-weight: 700; }

/* Sits between the eligible rows and International Student on the fees
   table, so the banquet-free perk reads as scoped to the rows above it,
   not as a blanket footnote under the whole international table. */
.fees-banner-row td {
  background: none;
  padding: .6rem 1rem;
}
.fees-banner {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 1.1rem;
  background: linear-gradient(90deg, rgba(225, 81, 38, .09), rgba(225, 81, 38, .02));
  border: 1px solid rgba(225, 81, 38, .28);
  border-radius: 10px;
  text-align: left;
}
.fees-banner__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gcoi-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  box-shadow: 0 2px 6px rgba(225, 81, 38, .35);
}
.fees-banner__text {
  color: var(--congress-navy);
  font-size: .88rem;
  line-height: 1.5;
}
.fees-banner__text strong { color: var(--gcoi-primary); }
.fee-tier-badge {
  /* White-on-gold here was ~3:1, failing WCAG AA (needs 4.5:1 at this size);
     dark ink on the same gold clears 6:1. */
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .6rem; border-radius: 100px; background: var(--gcoi-accent-gold); color: var(--gcoi-ink); margin-bottom: .75rem;
}

/* ---------- Mobile fixed fee bar ----------
   Below 992px the fee card falls out of the sticky sidebar and stacks
   under the whole form, so the total is invisible until the visitor
   scrolls past every field. This collapsed bar pins the total to the
   viewport bottom and expands in place (never over the form) on tap. */
.mobile-fee-bar { display: none; }
@media (max-width: 991px) {
  .fee-sidebar-col { display: none; }

  .mobile-fee-bar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--gcoi-surface);
    border-top: 1px solid rgba(27,32,38,.1);
    box-shadow: 0 -6px 20px rgba(27,32,38,.14);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-fee-bar__summary {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .65rem 1rem; background: none; border: none; text-align: left; cursor: pointer;
  }
  .mobile-fee-bar__label { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
  .mobile-fee-bar__category {
    font-size: .78rem; font-weight: 600; color: var(--gcoi-body);
    max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobile-fee-bar .fee-tier-badge--compact { margin-bottom: 0; }
  .mobile-fee-bar__total { display: flex; align-items: baseline; gap: .5rem; flex-shrink: 0; }
  .mobile-fee-bar__total-label { font-size: .72rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
  .mobile-fee-bar__total-amount { font-weight: 700; font-size: 1.2rem; color: var(--gcoi-primary); }
  .mobile-fee-bar__chevron { color: var(--gcoi-body); font-size: .8rem; transition: transform .25s var(--ease); }
  .mobile-fee-bar.is-open .mobile-fee-bar__chevron { transform: rotate(180deg); }

  .mobile-fee-bar__details {
    max-height: 0; overflow: hidden; transition: max-height .25s var(--ease);
    border-top: 1px solid rgba(27,32,38,.08);
  }
  .mobile-fee-bar.is-open .mobile-fee-bar__details { max-height: 70vh; overflow-y: auto; padding: .5rem 1rem .85rem; }
  .mobile-fee-bar__details .fee-line { font-size: .88rem; }
  .mobile-fee-bar__details .fee-line--total { font-size: 1rem; }

  /* Keeps the submit button clear of the fixed bar's collapsed height. */
  #regForm { padding-bottom: 62px; }
}

/* ---------- Payment instructions panel ---------- */
.payment-account-option {
  display: block; border: 2px solid rgba(27,32,38,.1); border-radius: var(--radius-card);
  padding: 1rem 1.25rem; margin-bottom: .85rem; cursor: pointer; transition: border-color .15s var(--ease);
}
.payment-account-option:has(input:checked) { border-color: var(--congress-navy); background: var(--congress-navy-light); }
.payment-account-option input { margin-right: .6rem; }
.payment-detail-grid { display: grid; grid-template-columns: minmax(140px,auto) 1fr; gap: .4rem 1rem; font-size: .9rem; margin-top: 1rem; }
.payment-detail-grid dt { color: #6b7280; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.payment-detail-grid dd { margin: 0; color: var(--gcoi-ink); font-family: 'Open Sans', sans-serif; min-width: 0; overflow-wrap: anywhere; }
/* Account numbers/IBANs and the MAHSA e-Pay URL are single unbroken tokens
   that can exceed the card's width on phones — the grid's dt column stays
   140px minimum, which is already tight for labels like "Please Specify
   Other Programme" at 320-375px viewports, so both columns need to wrap. */
@media (max-width: 575px) {
  /* Two narrow columns squeeze long values (IBANs, the MAHSA e-Pay URL)
     into a ~140px-wide track, wrapping them into a tall dribble of a couple
     characters per line. Stacking dt above dd gives values the full card
     width instead. */
  .payment-detail-grid { grid-template-columns: 1fr; gap: 0; font-size: .85rem; }
  .payment-detail-grid dt { margin-top: .6rem; }
  .payment-detail-grid dt:first-child { margin-top: 0; }
  .payment-detail-grid dd { margin-top: .15rem; }
}
/* ---------- Settlement currency toggle ----------
   Which currency the delegate pays in is a real financial decision (USD vs.
   the account's local INR/AED total), not a minor sub-option — so it gets
   its own accent-bordered panel and a segmented control sized like the
   bank-account cards above it, instead of a plain radio pair. */
.currency-toggle-panel {
  border: 2px solid var(--gcoi-accent-gold); background: #FFFBF0; border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem; margin: 1rem 0 1.25rem;
}
.currency-toggle-panel__title {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--gcoi-ink); margin-bottom: .75rem; font-size: .98rem;
}
.currency-toggle-panel__title i { color: var(--gcoi-accent-gold); }
.currency-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
.currency-toggle__option {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem;
  border: 2px solid rgba(27,32,38,.12); border-radius: 10px; background: #fff;
  padding: .85rem .75rem; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.currency-toggle__option:hover { border-color: var(--gcoi-primary-light); }
.currency-toggle__option:has(input:checked) {
  border-color: var(--congress-navy); background: var(--congress-navy-light);
  box-shadow: 0 2px 10px rgba(21,42,84,.15);
}
.currency-toggle__option input {
  position: absolute; top: .65rem; right: .65rem; width: 18px !important; height: 18px !important;
  margin: 0 !important; accent-color: var(--congress-navy, #152a54) !important;
}
.currency-toggle__code { font-size: 1.15rem; font-weight: 800; color: var(--gcoi-ink); letter-spacing: .02em; }
.currency-toggle__option:has(input:checked) .currency-toggle__code { color: var(--congress-navy); }
.currency-toggle__hint { font-size: .78rem; color: #6b7280; }
@media (max-width: 420px) {
  .currency-toggle { grid-template-columns: 1fr; }
}

.copy-btn { border: none; background: none; color: var(--congress-navy); font-size: .8rem; margin-left: .5rem; cursor: pointer; }
.payment-portal-link {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--congress-navy); color: #fff !important; text-decoration: none;
  padding: .55rem 1.1rem; border-radius: 100px; font-weight: 700; font-size: .85rem;
  box-shadow: 0 2px 8px rgba(21,42,84,.25); transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.payment-portal-link:hover, .payment-portal-link:focus {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,42,84,.35); color: #fff;
}

/* ---------- Upload dropzone ---------- */
.upload-dropzone {
  border: 2px dashed rgba(27,32,38,.2); border-radius: var(--radius-card);
  padding: 1.5rem; text-align: center; background: #fafbfc; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.upload-dropzone:hover, .upload-dropzone.is-dragover { border-color: var(--congress-navy); background: var(--congress-navy-light); }
.upload-dropzone__icon { font-size: 1.75rem; color: var(--congress-navy); margin-bottom: .5rem; }
.upload-dropzone__filename { font-weight: 600; color: var(--gcoi-ink); margin-top: .5rem; word-break: break-all; }
/* The real file input stays in the layout/tab order (never display:none) so
   keyboard and screen-reader users can reach it — it's visually hidden via
   clipping instead, with a visible focus ring thrown onto its styled label
   sibling so keyboard focus is never invisible. */
.visually-hidden-focusable {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.visually-hidden-focusable:focus-visible + .upload-dropzone {
  outline: 3px solid var(--congress-navy); outline-offset: 2px;
}

/* ---------- Passport photo dropzone (cropper preview) ---------- */
.photo-dropzone__preview { display: none; max-width: 100%; max-height: 220px; border-radius: 10px; margin: 0 auto; }
.photo-dropzone__preview[src]:not([src=""]) { display: block; }
.photo-dropzone:has(.photo-dropzone__preview[src]:not([src=""])) .photo-dropzone__placeholder { display: none; }
.photo-validation { display: none; font-size: .82rem; color: #dc3545; margin-top: .5rem; }
.photo-validation.show { display: block; }

/* ---------- Status badges ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: 100px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.status-badge--pending { background: var(--status-pending-bg); color: var(--status-pending); }
.status-badge--verified { background: var(--status-verified-bg); color: var(--status-verified); }
.status-badge--rejected { background: var(--status-rejected-bg); color: var(--status-rejected); }
.status-badge--draft { background: var(--status-draft-bg); color: var(--status-draft); }

/* ---------- Delegate dashboard ---------- */
.dashboard-summary-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-stat { flex: 1 1 180px; background: var(--gcoi-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.25rem; }
.dashboard-stat__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 700; }
.dashboard-stat__value { font-size: 1.4rem; font-weight: 700; color: var(--gcoi-ink); margin-top: .25rem; }
.doc-thumb { width: 100%; max-width: 220px; border-radius: 10px; box-shadow: var(--shadow-card); display: block; }

/* ---------- Admin shell ---------- */
.admin-shell { display: flex; min-height: 100vh; background: #f4f5f7; }
.admin-sidebar {
  width: 250px; flex-shrink: 0; background: var(--congress-navy); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar__brand { padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: .6rem; }
.admin-sidebar__brand img { width: 28px; height: 28px; border-radius: 50%; }
.admin-nav { list-style: none; padding: .75rem 0; margin: 0; flex: 1; }
.admin-nav a {
  display: flex; align-items: center; gap: .65rem; padding: .65rem 1.5rem; color: rgba(255,255,255,.75);
  text-decoration: none; font-size: .9rem; font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease);
}
.admin-nav a:hover, .admin-nav a.is-active { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav a.is-active { font-weight: 700; }
.admin-nav a.is-active i { color: var(--gcoi-primary); }
.admin-content { flex: 1; min-width: 0; }
.admin-topbar {
  background: #fff; border-bottom: 1px solid rgba(27,32,38,.08); padding: 1rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5;
}
.admin-main { padding: 1.75rem; }
.admin-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.5rem; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.admin-stat { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.25rem; }
.admin-stat__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.admin-stat__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-color, var(--gcoi-primary)); display: inline-block; }
.admin-stat__value { font-size: 1.6rem; font-weight: 700; color: var(--gcoi-ink); }
.admin-table thead th { background: var(--gcoi-surface-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 700; border: none; }
.admin-table td, .admin-table th { vertical-align: middle; padding: .75rem 1rem; }
@media (max-width: 900px) {
  .admin-sidebar { position: fixed; left: -260px; z-index: 40; transition: left .2s var(--ease); }
  .admin-sidebar.is-open { left: 0; }
  .admin-shell { display: block; }
}

/* ---------- Pill-checkbox filter group (e.g. Payment Category) ---------- */
.pill-filter { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(27,32,38,.08); }
.pill-filter__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 700; display: block; margin-bottom: .65rem; }
.pill-filter__options { display: flex; flex-wrap: wrap; gap: .55rem; }
.pill-filter__option { position: relative; display: inline-flex; }
.pill-filter__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-filter__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem .45rem .6rem; border-radius: 100px;
  border: 1.5px solid #E1E4EA; background: #fff; color: var(--gcoi-ink);
  font-size: .85rem; font-weight: 600; line-height: 1.3; cursor: pointer; user-select: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.pill-filter__chip:hover { border-color: var(--gcoi-primary-light); }
.pill-filter__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #C6CBD3;
  color: transparent; font-size: .6rem; flex-shrink: 0;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pill-filter__input:checked + .pill-filter__chip {
  background: var(--gcoi-primary); border-color: var(--gcoi-primary); color: #fff;
  box-shadow: 0 2px 10px rgba(225,81,38,.28);
}
.pill-filter__input:checked + .pill-filter__chip .pill-filter__check { background: #fff; border-color: #fff; color: var(--gcoi-primary); }
.pill-filter__input:focus-visible + .pill-filter__chip { outline: 2px solid var(--congress-navy); outline-offset: 2px; }
.pill-filter__option--all .pill-filter__chip { border-style: dashed; }
.pill-filter__option--all .pill-filter__input:checked + .pill-filter__chip { background: var(--congress-navy); border-color: var(--congress-navy); border-style: solid; box-shadow: 0 2px 10px rgba(21,42,84,.28); }
.pill-filter__option--all .pill-filter__input:checked + .pill-filter__chip .pill-filter__check { color: var(--congress-navy); }

/* ---------- Role permission matrix (payment-account view/approve) ---------- */
.perm-matrix { width: 100%; border-collapse: collapse; font-size: .87rem; }
.perm-matrix th, .perm-matrix td { padding: .55rem .75rem; border-bottom: 1px solid rgba(27,32,38,.06); text-align: left; }
.perm-matrix thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 700; }
.perm-matrix thead th.text-center, .perm-matrix td.text-center { text-align: center; }
.perm-matrix tbody tr:last-child td { border-bottom: none; }
.perm-matrix__account { font-weight: 600; color: var(--gcoi-ink); }
.perm-matrix__switch { width: 18px; height: 18px; accent-color: var(--gcoi-primary); cursor: pointer; }
.perm-matrix-hint { font-size: .8rem; color: #6b7280; margin: .5rem 0 1rem; }

/* ---------- Utility ---------- */
.text-navy { color: var(--congress-navy) !important; }
.bg-navy { background: var(--congress-navy) !important; }
.max-w-form { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Copyright section matching globalcoi.com ---------- */
#footer6-2 {
  position: relative;
}
#footer6-2 .bgokfootlast {
  padding-top: 20px;
  padding-bottom: 30px;
}
#footer6-2 .mbr-overlay {
  background-color: rgb(173, 70, 40) !important;
  opacity: 0.5 !important;
}
#footer6-2 .mbr-text {
  color: #ffcd9f !important;
}
#footer6-2 .mbr-text a {
  color: #ffa800 !important;
}
#footer6-2 .mbr-text a:hover {
  color: #ffffff !important;
}

/* ---------- Footer Board Office & Contact Text Colors ---------- */
.cid-u3McYzNsU6 .icon-title {
  color: var(--gcoi-ink, #1b2026) !important;
  font-size: 0.95rem;
  line-height: 1.45;
}
.cid-u3McYzNsU6 .icon-title strong {
  color: var(--congress-navy, #152a54) !important;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0.15rem;
}
.cid-u3McYzNsU6 .icons-wrap .mbr-iconfont {
  color: var(--gcoi-primary, #e15126) !important;
}