/* =========================================================================
   Congress site styles — Mediterranean theme (tokens in tokens.css)
   ========================================================================= */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--ink); text-decoration-color: var(--primary-dark); text-underline-offset: 3px; }
a:hover { color: var(--secondary-text); }

:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}
/* on dark areas the focus ring is cyan */
.site-hero :focus-visible,
.site-nav:not(.is-solid) :focus-visible,
.speakers-band :focus-visible,
.site-footer :focus-visible { outline-color: var(--primary); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--accent);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--on-primary); }

.shell {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---------- Navigation: transparent over the photo, solid white once scrolled ---------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 0;
  background: transparent;
  transition: background-color .3s, box-shadow .3s;
}
.site-nav .nav-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: var(--nav-h);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: #fff;
  font: 700 20px/1.1 var(--font-display);
  text-decoration: none;
}
.nav-brand:hover { color: #fff; }
.nav-brand-logo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.nav-brand-logo img { width: 44px; height: 44px; }

.site-nav .navbar-nav { align-items: center; gap: 2px; }
.site-nav .navbar-nav .nav-link {
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, .92);
  font: 500 15px/1.4 var(--font-ui);
  transition: color .2s, background-color .2s;
}
.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link.show {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.site-nav .navbar-nav .nav-link.active {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-weight: 600;
}
.site-nav .dropdown-toggle::after { margin-left: 6px; vertical-align: .15em; }

.site-nav .dropdown-menu {
  min-width: 250px;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
}
.site-nav .dropdown-item {
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--text);
  font: 500 15px/1.35 var(--font-ui);
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
  background: var(--info-bg);
  color: var(--ink);
}
.site-nav .dropdown-item.active {
  background: var(--info-bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.dropdown-item .fa-arrow-up-right-from-square { margin-left: 6px; font-size: .75em; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 18px;
}
.lang-switcher {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
.lang-btn {
  min-width: 40px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  font: 600 13px/1.2 var(--font-ui);
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.lang-btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.lang-btn.active { background: #fff; color: var(--ink); }

.site-nav .navbar-toggler {
  padding: 8px 10px;
  border: 0;
  color: #fff;
  font-size: 24px;
}
.site-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(78, 195, 207, .5); }

/* solid state (scrolled, or mobile menu open) */
.site-nav.is-solid {
  background: #fff;
  box-shadow: 0 6px 24px rgba(15, 25, 35, .1);
}
.site-nav.is-solid .nav-brand { color: var(--ink); }
.site-nav.is-solid .nav-brand-logo { box-shadow: 0 0 0 1px var(--card-border); }
.site-nav.is-solid .navbar-nav .nav-link { color: var(--text); }
.site-nav.is-solid .navbar-nav .nav-link:hover,
.site-nav.is-solid .navbar-nav .nav-link.show { background: var(--info-bg); color: var(--ink); }
.site-nav.is-solid .navbar-nav .nav-link.active { background: var(--info-bg); color: var(--ink); }
.site-nav.is-solid .lang-switcher { background: var(--info-bg); }
.site-nav.is-solid .lang-btn { color: var(--ink); }
.site-nav.is-solid .lang-btn:hover { background: var(--gray-200); color: var(--ink); }
.site-nav.is-solid .lang-btn.active { background: var(--ink); color: #fff; }
.site-nav.is-solid .navbar-toggler { color: var(--ink); }

@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    margin-inline: -16px;
    padding: 6px 16px 18px;
    border-top: 1px solid var(--divider);
  }
  .site-nav .navbar-nav { align-items: stretch; gap: 0; }
  .site-nav .navbar-nav .nav-link { padding: 11px 12px; border-radius: 10px; }
  .site-nav .dropdown-menu {
    margin: 0 0 6px 12px;
    padding: 4px;
    box-shadow: none;
    background: var(--info-bg);
  }
  .nav-actions {
    justify-content: space-between;
    margin: 12px 0 0;
  }
}

/* ---------- Hero: the congress poster ----------
   The poster's blue stage fills the banner and the NEWBORN monument stands in front of it on the right.
   On wide screens the lettering keeps to the left and the countdown sits on the right, over the map;
   on narrow ones everything stacks and the monument closes the banner. */
.site-hero {
  /* the row of buttons + countdown and the co-organizer under it have set heights, so the monument can
     stand just above the row */
  --hero-pad-b: clamp(26px, 3vw, 48px);
  --row-h: clamp(64px, 5.4vw, 100px);
  --row-gap: clamp(18px, 2vw, 34px);
  --partner-logo-h: clamp(56px, 6vw, 100px);
  --partner-label: clamp(11px, .9vw, 15px);
  --partner-gap: clamp(22px, 2.4vw, 34px);
  --partner-h: calc(var(--partner-gap) + var(--partner-label) * 1.2 + 8px + var(--partner-logo-h));
  position: relative;
  overflow: hidden;
  background: var(--poster-blue);
  color: #fff;
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* stacked photos that crossfade (main.js toggles .is-active) */
.hero-slides,
.hero-slide {
  position: absolute;
  inset: 0;
}
.hero-slide {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the floor and the map stay in view whatever the screen's shape */
  object-position: right bottom;
}

/* arcs from Kosovo across the map (layout.js renderNetwork) */
.hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.net-arc {
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.net-city {
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
}
.net-hub { fill: var(--poster-navy); stroke: #fff; stroke-width: 2.5; }
.net-hub-glow { fill: rgba(255, 255, 255, .35); transform-box: fill-box; transform-origin: center; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  grid-template-areas:
    "top   top"
    "title ."
    "meta  ."
    "row   row"
    "partner .";
  column-gap: clamp(24px, 4vw, 64px);
  padding-top: calc(var(--nav-h) + clamp(10px, 1.6vw, 26px));
  padding-bottom: var(--hero-pad-b);
}

/* top row: the chamber's seal and name, the motto, the World Physiotherapy badge */
.hero-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 36px);
}
.hero-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(12px, 1.3vw, 20px);
}
.hero-seal {
  flex: 0 0 auto;
  width: auto;
  height: clamp(64px, 7.2vw, 118px);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 30, 110, .28);
}
.hero-org {
  max-width: 9.4em; /* breaks like the poster: Oda e / Fizioterapeutëve / të Kosovës */
  font: 700 clamp(14px, 1.55vw, 26px)/1.12 var(--font-poster);
}
.hero-tagline {
  flex: 1 1 auto;
  align-self: flex-end;
  margin: 0 0 -.45em;
  font: 400 clamp(22px, 2.55vw, 44px)/1.2 var(--font-script);
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 50, 160, .35);
}
/* the badge: its symbol in colour, the words in white */
.hero-member { flex: 0 0 auto; }
.hero-member-logo {
  display: block;
  width: auto;
  height: clamp(48px, 5.4vw, 96px);
  filter: drop-shadow(0 2px 10px rgba(0, 50, 160, .35));
}

/* the title: each line is sized to the column from its longest translation (layout.js sets --chars),
   so the bold one fills the width the way it does on the poster and every language is the same size;
   the light ones stop at a ceiling */
.hero-title {
  grid-area: title;
  container-type: inline-size;
  margin: clamp(30px, 4.4vw, 76px) 0 0;
  font-family: var(--font-poster);
  line-height: 1.04;
  text-transform: uppercase;
}
.hero-line {
  --em: .68;
  --cap: 8.4cqi;
  display: block;
  font-size: min(var(--cap), 100cqi / (var(--chars) * var(--em)));
  font-weight: 300;
  white-space: nowrap;
}
.hero-line:nth-child(2) {
  --em: .78;
  --cap: 14cqi;
  margin: .02em 0 .04em;
  font-weight: 800;
  letter-spacing: -.005em;
}
.hero-line:nth-child(3) { color: var(--poster-cyan); }

/* dates and venue under a thin rule */
.hero-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 14px;
  margin-top: clamp(16px, 1.8vw, 28px);
  padding-top: clamp(16px, 1.8vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, .55);
}
.hero-fact {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  margin: 0;
  padding-right: clamp(18px, 2.2vw, 36px);
  font: 700 clamp(15px, 1.5vw, 25px)/1.22 var(--font-poster);
}
.hero-fact + .hero-fact {
  padding-left: clamp(18px, 2.2vw, 36px);
  border-left: 1.5px solid rgba(255, 255, 255, .6);
}
.hero-fact i {
  flex: 0 0 auto;
  color: var(--poster-coral);
  font-size: clamp(30px, 3vw, 50px);
}
.hero-fact strong,
.hero-fact span span { display: block; font-weight: inherit; }
.hero-fact span span::first-letter { text-transform: uppercase; } /* "prill 2027" → "Prill 2027" */
.hero-fact.is-place { text-transform: uppercase; }

.hero-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 2.4vw, 34px);
}

.hero-partner {
  grid-area: partner;
  align-self: end;
  margin-top: var(--partner-gap);
}
.hero-partner span {
  display: block;
  margin-bottom: 8px;
  font: 700 var(--partner-label)/1.2 var(--font-poster);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hero-partner { container-type: inline-size; }
.hero-partner-logos {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.hero-partner-logo {
  display: block;
  width: auto;
  height: var(--partner-logo-h);
}
/* two co-organizers stay on one line: both logos shrink together to fit the column. 7.9 is the width of
   shf.png + bg-apt-white.png at a height of 1 (247/104 + 775/142), and 32px the widest gap between them */
.hero-partner-logo:not(:only-child) {
  height: min(var(--partner-logo-h), calc((100cqi - 32px) / 7.9));
}

/* wide screens: Register / Submit abstracts on the left, "the congress starts in" and the countdown on
   the right, all on one line */
@media (min-width: 992px) {
  .hero-row {
    grid-area: row;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 40px);
    margin-top: var(--row-gap);
  }
  .hero-row .hero-actions { flex-wrap: nowrap; margin: 0; }
  .hero-row .btn { white-space: nowrap; }
  .hero-row .hero-countdown {
    display: flex;
    align-self: center;
    align-items: center;
    gap: clamp(12px, 1.3vw, 24px);
    width: auto;
    margin: 0;
  }
  .hero-row .hero-countdown .info-card-title {
    max-width: 11em;
    margin: 0;
    line-height: 1.35;
    text-align: right;
  }
  .hero-row .cd-unit {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    width: var(--row-h);
    height: var(--row-h);
    padding: 0 4px;
  }
  .hero-row .cd-num { font-size: clamp(24px, 2.3vw, 44px); }
  .hero-row .cd-text { margin-top: 6px; }
}

/* countdown */
.hero-countdown {
  grid-area: side;
  align-self: start;
  justify-self: center;
  width: min(100%, 500px);
  margin-top: clamp(28px, 5.4vw, 100px);
  /* below ~1500px the monument's flag reaches into this column: keep clear of it */
  margin-right: clamp(0px, (1500px - 100vw) * .9, 150px);
  text-align: center;
}
.hero-countdown .info-card-title {
  margin-bottom: 14px;
  font: 700 clamp(12px, 1vw, 15px)/1.2 var(--font-poster);
  letter-spacing: .16em;
  text-shadow: 0 2px 10px rgba(0, 50, 160, .4);
}
.hero-countdown .countdown-circles { gap: clamp(8px, .9vw, 14px); }
.hero-countdown .cd-unit {
  padding: clamp(14px, 1.3vw, 20px) 6px clamp(12px, 1.1vw, 16px);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--radius-lg);
  background: rgba(3, 48, 160, .48);
  box-shadow: 0 18px 40px rgba(0, 30, 110, .22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-countdown .cd-num { font: 700 clamp(30px, 3.2vw, 54px)/1 var(--font-poster); }
.hero-countdown .cd-text {
  margin-top: 8px;
  color: var(--poster-cyan);
  font: 600 clamp(10.5px, .8vw, 12.5px)/1 var(--font-poster);
  letter-spacing: .1em;
}
.hero-countdown .countdown-status {
  font: 700 clamp(22px, 2.2vw, 30px)/1.3 var(--font-poster);
  text-shadow: 0 2px 14px rgba(0, 50, 160, .4);
}

/* the NEWBORN monument with the flag, on the right just above the bottom row; it gives way (shrinks)
   before it can reach the lettering */
.hero-monument {
  position: absolute;
  right: 0;
  bottom: calc(var(--hero-pad-b) + var(--partner-h) + var(--row-h) + var(--row-gap) - clamp(0px, 3vw, 60px));
  z-index: 1;
  width: auto;
  max-width: none;
  height: min(28.4vw, 45%);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 991.98px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "title" "meta" "side" "actions" "partner";
    grid-template-rows: none;
    min-height: 0;
    padding-top: calc(var(--nav-h) + 14px);
    padding-bottom: 0;
  }
  /* the darker left of the poster behind the stacked lettering */
  .hero-media img { object-position: 18% bottom; }
  .hero-network { display: none; } /* the map is cropped off here */
  .hero-row { display: contents; } /* its countdown and buttons take their own places in the stack */
  .hero-top { flex-wrap: wrap; }
  .hero-tagline {
    flex-basis: 100%;
    order: 3;
    margin: 6px 0 0;
  }
  .hero-title { margin-top: 26px; }
  .hero-countdown {
    justify-self: stretch;
    width: auto;
    max-width: 520px;
    margin-top: 30px;
    margin-right: 0;
  }
  .hero-partner { align-self: start; }
  .hero-monument {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(100%, 720px);
    height: auto;
    /* drawn up beside the co-organizer: the top left of the picture is empty sky */
    margin: -14% 0 clamp(20px, 5vw, 40px) auto;
  }
}

@media (max-width: 575.98px) {
  .hero-seal { height: 56px; }
  .hero-org { font-size: 13px; }
  .hero-top { column-gap: 12px; }
  .hero-member-logo { height: 38px; }
  .hero-tagline { font-size: 24px; }
  .hero-meta { flex-direction: column; align-items: flex-start; }
  .hero-monument { margin-top: -6%; }
  .hero-fact,
  .hero-fact + .hero-fact { padding: 0; border: 0; }
}

/* the poster banner: the image whole and untouched across the full width under the menu. On wide
   screens the buttons and countdown stand on the empty floor at its foot (right of the co-organizer
   logo, under the monument's steps), sized in cqi so they keep their place on the poster at any width */
.site-hero.is-poster {
  padding-top: var(--nav-h);
}
.hero-frame {
  position: relative;
  margin: 0 auto;
  container-type: inline-size;
}
.hero-poster {
  display: block;
  width: 100%;
  height: auto;
}
.hero-bar {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  padding: 24px 16px 32px;
}
.hero-bar .hero-actions { margin: 0; }
.hero-bar .hero-countdown {
  max-width: 520px;
  margin: 0;
}

@media (min-width: 1100px) {
  /* the whole poster fits on the screen under the menu (1600 × 977); where the screen is wider, its
     outermost columns (poster-edge-*.png, taken from the poster) carry its gradient out to the edges */
  .site-hero.is-poster {
    background:
      url("../img/hero/poster-edge-left.png") left bottom / 50% calc(100% - var(--nav-h)) no-repeat,
      url("../img/hero/poster-edge-right.png") right bottom / 50% calc(100% - var(--nav-h)) no-repeat,
      var(--poster-blue);
  }
  .hero-frame { width: min(100%, (100svh - var(--nav-h)) * 1600 / 977); }
  .hero-bar {
    position: absolute;
    left: 4%; /* in line with the poster's lettering */
    right: 4%;
    bottom: 1.5cqi;
    height: 8cqi; /* the added floor: the poster's bottom 180 of 977 px, under the co-organizer logo */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2cqi;
    padding: 0;
  }
  .hero-bar .hero-actions { flex-wrap: nowrap; gap: .9cqi; }
  .hero-bar .btn {
    padding: .75cqi 1.6cqi;
    font-size: clamp(14px, 1.1cqi, 20px);
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0, 40, 140, .3);
  }
  .hero-bar .hero-countdown {
    display: flex;
    align-items: center;
    gap: 1.3cqi;
    max-width: none;
  }
  .hero-bar .hero-countdown .info-card-title {
    max-width: 11em;
    margin: 0;
    font-size: clamp(11px, .85cqi, 15px);
    line-height: 1.35;
    text-align: right;
  }
  .hero-bar .countdown-circles { gap: .7cqi; }
  .hero-bar .cd-unit {
    width: 6cqi;
    padding: .65cqi .3cqi .55cqi;
    border-radius: .9cqi;
  }
  .hero-bar .cd-num { font-size: 2.3cqi; }
  .hero-bar .cd-text {
    margin-top: .4cqi;
    font-size: clamp(9px, .68cqi, 12px);
  }
}

/* ---------- Countdown + date timeline base ---------- */
.info-card-title {
  margin: 0 0 14px;
  font: 700 12.5px/1.2 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.countdown-circles {
  display: flex;
  gap: 10px;
}
.cd-unit {
  flex: 1;
  min-width: 0;
  padding: 12px 4px 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  text-align: center;
}
.cd-num {
  display: block;
  font: 700 clamp(28px, 3vw, 40px)/1 var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.cd-text {
  display: block;
  margin-top: 6px;
  color: var(--gray-200);
  font: 500 11.5px/1 var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.countdown-status {
  margin: 0;
  font: 600 22px/1.3 var(--font-display);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline-item {
  position: relative;
  padding: 14px 16px;
  border-left: 3px solid var(--secondary);
  border-radius: 4px var(--radius) var(--radius) 4px;
  background: var(--info-bg);
}
.timeline-item time {
  display: block;
  padding-right: 52px;
  color: var(--ink);
  font: 700 17px/1.2 var(--font-display);
}
.timeline-item span {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.timeline-item.is-next {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.timeline-item.is-past { border-left-color: var(--gray-300); }
.timeline-item.is-past time { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.timeline-badge {
  position: absolute;
  top: 12px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-primary);
  font: 600 11px/1.4 var(--font-ui);
}

@media (max-width: 767.98px) {
  .countdown-circles { gap: 6px; }
}

/* ---------- Key dates (every page): a timeline of the deadlines, ending on the congress ---------- */
.key-timeline {
  position: relative;
  grid-template-columns: none;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 18px;
}
/* the line the dots sit on */
.key-timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 12px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--gray-200), var(--primary) 70%, var(--gold));
}
.key-timeline .timeline-item {
  display: flex;
  flex-direction: column;
  padding: 50px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.key-timeline .kd-dot {
  position: absolute;
  top: 5px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 3px solid var(--primary-dark);
  margin: 0;
  border-radius: 50%;
  background: #fff;
}
.kd-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.kd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.key-timeline .timeline-item time {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 0;
}
.key-timeline .kd-day,
.key-timeline .kd-month { margin: 0; }
.key-timeline .kd-day {
  color: var(--ink);
  font: 700 clamp(38px, 3.4vw, 48px)/1 var(--font-display);
  font-variant-numeric: lining-nums;
}
.key-timeline .kd-month {
  color: var(--primary-ink);
  font: 700 12.5px/1.2 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.key-timeline .timeline-item .kd-label {
  flex: 1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
  color: var(--text-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
}
.key-timeline .timeline-item .kd-left {
  align-self: flex-start;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--text-muted);
  font: 600 12px/1.4 var(--font-ui);
}
.key-timeline .timeline-item .kd-left:empty { display: none; }
.key-timeline .timeline-badge { top: 64px; right: 16px; }

/* the next deadline: filled dot with a ring, cyan edge on the card */
.key-timeline .timeline-item.is-next { background: none; }
.key-timeline .is-next .kd-dot {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .22);
}
.key-timeline .is-next .kd-card {
  border-color: rgba(var(--primary-rgb), .6);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), .6), var(--shadow-card);
}
.key-timeline .timeline-item.is-next .kd-left { background: var(--accent-soft); color: var(--primary-ink); }

/* passed deadlines fade back and get a tick */
.key-timeline .is-past .kd-dot { border-color: var(--gray-300); background: var(--gray-300); }
.key-timeline .is-past .kd-dot::after {
  content: "\f00c";
  color: #fff;
  font: 900 10px/1 "Font Awesome 6 Free";
}
.key-timeline .is-past .kd-card { opacity: .6; box-shadow: none; }
.key-timeline .timeline-item.is-past time { text-decoration: none; }
.key-timeline .is-past .kd-day { color: var(--text-muted); }

/* the congress itself, in the poster's navy and gold */
.key-timeline .is-congress .kd-dot {
  top: 1px;
  left: -2px;
  width: 30px;
  height: 30px;
  border: 0;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(201, 164, 63, .22);
  color: #fff;
  font-size: 12px;
}
.key-timeline .is-congress .kd-card {
  border-color: transparent;
  background: linear-gradient(145deg, var(--poster-navy) 0%, var(--dark) 100%);
  box-shadow: var(--shadow-brand);
}
.key-timeline .is-congress .kd-day { color: #fff; }
.key-timeline .is-congress .kd-month { color: var(--gold); }
.key-timeline .timeline-item.is-congress .kd-label { border-top-color: rgba(255, 255, 255, .14); color: var(--gray-200); }
.key-timeline .timeline-item.is-congress .kd-left { background: rgba(201, 164, 63, .2); color: #F1D98A; }

/* narrower screens: the timeline runs down the left side */
@media (max-width: 991.98px) {
  .key-timeline {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 14px;
  }
  .key-timeline::before {
    top: 12px;
    bottom: 40px;
    left: 11px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--gray-200), var(--primary) 70%, var(--gold));
  }
  .key-timeline .timeline-item { padding: 0 0 0 44px; }
  .key-timeline .kd-dot { top: 22px; left: 0; }
  .key-timeline .is-congress .kd-dot { top: 18px; left: -4px; }
  /* day and month on one line, the label under them */
  .kd-card { padding: 16px 18px; }
  .key-timeline .timeline-item time {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding-right: 64px;
  }
  .key-timeline .kd-day { font-size: 34px; }
  .key-timeline .timeline-item .kd-label { margin-top: 8px; padding: 0; border: 0; }
  .key-timeline .timeline-item .kd-left { margin-top: 10px; }
  .key-timeline .timeline-badge { top: 16px; right: 14px; }
}

/* ---------- Content card ---------- */
.site-main {
  flex: 1 0 auto;
  padding-bottom: 90px;
}
.site-main:focus { outline: none; }

.congress-content {
  margin-top: 36px;
  padding: clamp(22px, 3.2vw, 46px);
  border-radius: var(--radius-xl);
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.congress-content h1 {
  margin: 0 0 28px;
  color: var(--ink);
  font: 700 clamp(30px, 3vw, 44px)/1.15 var(--font-display);
}
.congress-content h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 10px;
  margin-top: 14px;
  background: var(--wave) left center / contain no-repeat;
}
.congress-content h2 {
  margin: 38px 0 14px;
  color: var(--ink);
  font: 600 clamp(22px, 2vw, 27px)/1.25 var(--font-display);
}
.congress-content h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}
.congress-content h4 {
  margin: 0 0 10px;
  color: var(--secondary-text);
  font-size: 15px;
  font-weight: 700;
}
.congress-content p,
.congress-content li {
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.75;
}

.phase-placeholder {
  padding: 40px 20px;
  border: 2px dashed var(--nav-border);
  border-radius: var(--radius);
  background: var(--info-bg);
  text-align: center;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: 70px;
  background: var(--grad-footer);
  color: #fff;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  height: 45px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 45' preserveAspectRatio='none'%3E%3Cpath d='M0 20C200 44 420 0 720 18s560 30 720 0v27H0z' fill='%231a2636'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
.site-footer a {
  color: var(--secondary-light);
  text-decoration: none;
  transition: color .2s;
}
.site-footer a:hover { color: #fff; }

.footer-main { padding-block: 44px 34px; }

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: #fff;
  font: 700 24px/1.1 var(--font-display);
}
.site-footer .footer-brand { color: #fff; }
.footer-brand-logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
}
.footer-brand-logo img { width: 52px; height: 52px; }

.footer-about {
  margin: 0 0 8px;
  color: var(--footer-text);
  font-size: 15px;
  line-height: 1.6;
}

.footer-title {
  margin-bottom: 26px;
  color: #fff;
  font: 600 20px/1.2 var(--font-display);
}
.footer-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 8px;
  margin-top: 10px;
  background: var(--wave-light) left center / contain no-repeat;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links li { margin-bottom: 11px; }
.site-footer .footer-links a {
  color: var(--footer-text);
  font-size: 15px;
}
.footer-links a i {
  margin-right: 8px;
  color: var(--secondary-light);
  font-size: 11px;
  transition: transform .2s;
}
.site-footer .footer-links a:hover { color: #fff; }
.footer-links a:hover i { transform: translateX(3px); }

.footer-contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  color: var(--footer-text);
  font-size: 15px;
}
.footer-contact-item .icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 14px;
  border-radius: 50%;
  background: rgba(78, 195, 207, .14);
  color: var(--secondary-light);
  font-size: 14px;
}
.footer-contact-item .text {
  padding-top: 6px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* several addresses: stack them and centre the icon on the whole block */
.footer-contact-item--emails { align-items: center; }
.footer-contact-item--emails .text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0;
}
.site-footer .footer-contact-item a { color: var(--footer-text); }
.site-footer .footer-contact-item a:hover { color: #fff; }

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.site-footer .social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: transform .25s, background-color .25s;
}
.site-footer .social-btn:hover {
  transform: translateY(-3px);
  background: var(--accent);
  color: var(--on-primary);
}

.footer-bottom {
  padding-block: 16px;
  background: var(--footer-bar);
  color: var(--footer-muted);
  font-size: 14px;
}
.footer-bottom .shell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}
.footer-bottom p { margin: 0; }
/* links inside sentences need more than color to stand out */
.site-footer .footer-about a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-primary);
  box-shadow: 0 8px 20px rgba(15, 25, 35, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s, background-color .2s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover { background: var(--accent-hover); }

/* =========================================================================
   Components — plan.md §4.5–4.15
   ========================================================================= */

/* ---------- Section rhythm ---------- */
.home-section { padding-top: 60px; }
.lead-text {
  max-width: 860px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.7;
}
body[data-page="committees"] .lead-text,
body[data-page="keynote-speakers"] .lead-text,
body[data-page="sponsors"] .lead-text,
body[data-page="workshops"] .lead-text,
body[data-page="abstract-submission"] .lead-text { max-width: none; }
.text-teal { color: var(--secondary-text) !important; }
.text-brand { color: var(--ink) !important; }

/* ---------- 4.13 Buttons (pill shaped) ---------- */
.btn-primary,
.btn-teal,
.btn-outline-brand,
.btn-pdf,
.btn-accent,
.btn-outline-light {
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: 11px;
  --bs-btn-font-family: var(--font-ui);
  --bs-btn-font-size: 15px;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  transition: background-color .3s, border-color .3s, color .3s, transform .3s, box-shadow .3s;
}
.btn-primary {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink-hover);
  --bs-btn-hover-border-color: var(--ink-hover);
  --bs-btn-active-bg: var(--ink-active);
  --bs-btn-active-border-color: var(--ink-active);
  --bs-btn-disabled-bg: var(--ink);
  --bs-btn-disabled-border-color: var(--ink);
  --bs-btn-focus-shadow-rgb: 15, 25, 35;
}
.btn-accent {
  --bs-btn-color: var(--on-primary);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-focus-shadow-rgb: 78, 195, 207;
}
.btn-teal {
  --bs-btn-color: var(--on-primary);
  --bs-btn-bg: var(--secondary-hover);
  --bs-btn-border-color: var(--secondary-hover);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-color: var(--on-primary);
  --bs-btn-disabled-bg: var(--secondary-hover);
  --bs-btn-disabled-border-color: var(--secondary-hover);
  --bs-btn-focus-shadow-rgb: 78, 195, 207;
}
.btn-outline-brand {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ink-active);
  --bs-btn-active-border-color: var(--ink-active);
  --bs-btn-focus-shadow-rgb: 15, 25, 35;
}
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .7);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--gray-100);
  --bs-btn-active-border-color: var(--gray-100);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
.btn-pdf {
  --bs-btn-color: var(--on-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-deep) 100%);
}
.btn-pdf:hover { background: linear-gradient(135deg, var(--accent) 0%, var(--primary-dark) 100%); }

.btn-primary:hover,
.btn-teal:hover,
.btn-outline-brand:hover,
.btn-outline-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 25, 35, .18);
}
.btn-accent:hover,
.btn-pdf:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(78, 195, 207, .35);
}
.btn-primary:active,
.btn-teal:active,
.btn-outline-brand:active,
.btn-outline-light:active,
.btn-accent:active,
.btn-pdf:active { transform: translateY(1px); }

.btn .btn-icon-arrow {
  display: inline-flex;
  margin-left: 8px;
  transition: transform .2s;
}
.btn:hover .btn-icon-arrow { transform: translate(2px, -2px); }

/* links with no URL yet */
.btn.is-coming-soon {
  opacity: .6;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .btn-primary, .btn-teal, .btn-outline-brand, .btn-pdf, .btn-accent, .btn-outline-light {
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: 14px;
  }
}

/* ---------- 4.6 Section header ---------- */
.section-header {
  margin-bottom: 38px;
  text-align: center;
}
.section-header h2 {
  margin-bottom: 10px;
  color: var(--ink);
  font: 700 clamp(28px, 3vw, 40px)/1.15 var(--font-display);
}
.title-divider {
  width: 64px;
  height: 10px;
  margin: 0 auto 14px;
  background: var(--wave) center / contain no-repeat;
}
.section-header p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 16px;
}

/* ---------- 4.5 Invitation card ---------- */
/* the two welcome letters on the home page: a quiet letter on the white section (no second shadow or
   hover lift), a quote mark in the corner, the writer's round portrait with name and role straight under
   the title (the footer is moved up with order), then the letter with its opening line as a lead */
.invitation-container { margin-top: 8px; }

.invitation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.6vw, 36px);
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--primary-rgb), .06) 0, #fff 180px);
}
.invitation-card::after {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 22px;
  color: rgba(var(--primary-rgb), .22);
  font: 700 120px/1 var(--font-display);
  pointer-events: none;
}
.invitation-card-header {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  padding-right: 56px; /* clear of the quote mark */
}
.congress-content .invitation-card-header h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  font: 600 clamp(20px, 1.7vw, 24px)/1.3 var(--font-display);
}
.congress-content .invitation-card-header h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--grad-brand);
}
.invitation-card-body { flex-grow: 1; order: 2; }
.congress-content .invitation-card-body p {
  margin-bottom: 14px;
  font-size: 15.5px;
  line-height: 1.75;
}
.congress-content .invitation-card-body p:last-child { margin-bottom: 0; }
/* the opening "Welcome …" line */
.congress-content .invitation-card-body p:first-child {
  margin-bottom: 18px;
  color: var(--ink);
  font: 600 17.5px/1.5 var(--font-display);
}
.invitation-card-body p:first-child strong { font-weight: inherit; }
.congress-content .invitation-card-body p:last-child strong { color: var(--secondary-text); }
.invitation-card-footer {
  order: 1;
  margin-bottom: 22px;
  padding: 0 56px 20px 0; /* right: clear of the quote mark when there is no title above */
  border-bottom: 1px solid var(--divider);
}
.congress-content .invitation-signoff {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.invitation-author-box {
  display: flex;
  align-items: center;
  gap: 16px;
}
.invitation-author-img {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--info-bg);
  box-shadow: 0 6px 18px rgba(15, 25, 35, .14), 0 0 0 1px rgba(var(--primary-rgb), .35);
}
.invitation-author-details strong {
  display: block;
  color: var(--ink);
  font: 600 16.5px/1.3 var(--font-display);
}
.invitation-author-details span {
  display: block;
  margin-top: 4px;
  color: var(--secondary-text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 767.98px) {
  .invitation-card::after { right: 14px; font-size: 96px; }
  .invitation-author-img { width: 64px; height: 64px; }
}

/* ---------- 4.15 Topic list ---------- */
.main-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-topics li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 500;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.main-topics li i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--secondary);
  line-height: 36px;
  text-align: center;
  transition: background-color .3s, color .3s;
}
.main-topics li:hover {
  transform: translateY(-2px);
  border-color: rgba(78, 195, 207, .4);
  box-shadow: var(--shadow-card);
}
.main-topics li:hover i {
  background: var(--ink);
  color: #fff;
}
@media (max-width: 991.98px) { .main-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .main-topics { grid-template-columns: 1fr; } }

/* ---------- 4.8 Keynote speakers — home band + carousel ---------- */
/* deep-sea band with faint wave lines */
.speakers-band {
  position: relative;
  margin-top: 70px;
  padding-block: 90px;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 20c20-14 40-14 60 0s40 14 60 0 30-10 40-6' fill='none' stroke='%234EC3CF' stroke-opacity='.09' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 160px 40px,
    var(--grad-brand-diag);
}
.speakers-band .shell { position: relative; z-index: 1; }
.speakers-band .section-header h2 { color: #fff; }
.speakers-band .section-header p { color: var(--gray-200); }
.speakers-band .title-divider { background-image: var(--wave-light); }
.speakers-band .speaker-initials {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--info-bg) 100%);
  color: var(--ink);
}
.speakers-band .slider-btn { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.speakers-band .slider-btn:hover { background: #fff; color: var(--ink); }
.speakers-band .btn-primary {
  --bs-btn-color: var(--on-primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-color: var(--on-primary);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
}

.speaker-slider { padding: 10px 4px 20px; }
.speaker-slider .swiper-slide { height: auto; }
/* if the carousel library can't load, show the cards as a grid */
.speaker-slider:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.speaker-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.speaker-card:hover {
  transform: translateY(-7px);
  border-color: rgba(78, 195, 207, .4);
  box-shadow: var(--shadow-brand);
}
.speaker-img-box {
  position: relative;
  aspect-ratio: 4 / 4.8;
  overflow: hidden;
  background: var(--gray-100);
}
.speaker-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.speaker-card:hover .speaker-img-box img,
.speaker-card:hover .speaker-initials { transform: scale(1.05); }
.speaker-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--grad-brand-diag);
  color: #fff;
  font: 600 64px/1 var(--font-display);
  letter-spacing: 2px;
  transition: transform .5s;
}
.speaker-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 25, 35, .5);
  opacity: 0;
  transition: opacity .3s;
}
.speaker-card:hover .speaker-img-overlay,
.speaker-card:focus-within .speaker-img-overlay { opacity: 1; }
.speaker-img-overlay .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  transition: background-color .25s, color .25s, transform .25s;
}
.speaker-img-overlay .btn-icon:hover {
  transform: scale(1.15);
  background: var(--secondary);
  color: var(--on-primary);
}
.speaker-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 18px 20px 20px;
  text-align: center;
}
.speaker-name {
  margin-bottom: 4px;
  color: var(--ink);
  font: 600 20px/1.3 var(--font-display);
}
.speaker-inst {
  flex-grow: 1;
  margin-bottom: 15px;
  color: var(--secondary-text);
  font-size: 13px;
  font-weight: 500;
}
.btn-speaker-cv {
  width: 100%;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .25s, box-shadow .25s;
}
.btn-speaker-cv:hover {
  background: var(--secondary);
  color: var(--on-primary);
  box-shadow: 0 4px 12px rgba(78, 195, 207, .35);
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.slider-btn:hover {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}
.slider-btn.swiper-button-disabled { opacity: .4; pointer-events: none; }

/* ---------- 4.8 Keynote speakers — page grid ---------- */
.sp-speakers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 25px;
}
@media (max-width: 1399.98px) { .sp-speakers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 991.98px) { .sp-speakers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 639.98px) { .sp-speakers-grid { grid-template-columns: 1fr; } }

.sp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(15, 25, 35, .1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 25, 35, .05);
  transition: transform .35s cubic-bezier(.25, 1, .5, 1), box-shadow .35s, border-color .35s;
}
.sp-card:hover {
  transform: translateY(-5px);
  border-color: var(--secondary);
  box-shadow: 0 12px 28px rgba(15, 25, 35, .12);
}
.sp-card-accent-bar {
  width: 100%;
  height: 4px;
  background: var(--grad-brand);
}
.sp-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 0;
}
.sp-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 8px 20px rgba(15, 25, 35, .15);
  transition: transform .35s, box-shadow .35s;
}
.sp-avatar.speaker-initials {
  font-size: 28px;
  letter-spacing: 1px;
}
.sp-card:hover .sp-avatar {
  transform: scale(1.05) rotate(3deg);
  box-shadow: 0 10px 24px rgba(78, 195, 207, .24);
}
.congress-content .sp-card-name {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  color: var(--ink);
  font: 600 17px/1.3 var(--font-display);
}
.sp-card-inst {
  margin: 0;
  color: var(--secondary-text);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}
.sp-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 14px 16px 16px;
}
.congress-content .sp-card-bio {
  flex-grow: 1;
  margin: 0 0 12px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}
.sp-card-topics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.sp-card-topic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* session / topic type badges (shared with the program) */
.type-badge {
  align-self: flex-start;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font: 600 10.5px/1.5 var(--font-ui);
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.type-keynote { background: rgba(15, 25, 35, .12); color: var(--ink); }
.type-panel { background: rgba(78, 195, 207, .13); color: #006471; }
.type-oral { background: #fdf0d5; color: #8a5a00; }
.type-poster { background: #fbe4e8; color: #9c2538; }
.type-workshop { background: #e3f4e8; color: #22683a; }
.type-ceremony { background: #ececec; color: #444; }
.type-social { background: #f1e8fb; color: #6b3fa0; }

/* speaker modal */
.speaker-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.speaker-modal .modal-header {
  padding: 15px 22px;
  border: 0;
  background: var(--ink);
  color: #fff;
}
.speaker-modal .modal-title {
  font: 600 20px/1.3 var(--font-display);
  letter-spacing: .5px;
}
.speaker-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }
.speaker-modal .btn-close:hover { opacity: 1; }
.speaker-modal .modal-body { padding: 24px; }
.speaker-modal-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.speaker-modal-head .sp-avatar { width: 96px; height: 96px; }
.speaker-modal-bio {
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.7;
}
.speaker-modal h3 {
  margin: 18px 0 10px;
  color: var(--ink);
  font: 700 13px/1.3 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.speaker-modal .modal-footer {
  padding: 10px 16px;
  border-top: 1px solid #eee;
  background: var(--gray-50);
}

/* ---------- 4.7 Committees ---------- */
.committee-group + .committee-group { margin-top: 40px; }

.committee-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  padding: 30px 20px;
  border-radius: var(--radius-lg);
  background: var(--info-bg);
}
.member-card {
  width: 240px;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.member-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}
.member-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  padding: 10px;
  overflow: hidden;
}
.member-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s;
}
.member-card:hover .member-image { transform: scale(1.05); }
.member-info { padding: 4px 15px 18px; }
.member-role {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 11.5px/1.4 var(--font-ui);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.congress-content .member-name {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.congress-content .member-title {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.4;
}

.name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.name-chip {
  padding: 10px 14px;
  border-left: 3px solid var(--secondary);
  border-radius: 0 8px 8px 0;
  background: var(--info-bg);
  transition: background-color .25s, border-color .25s;
}
.name-chip:hover {
  border-left-color: var(--ink);
  background: var(--gray-200);
}
.name-chip strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.name-chip span {
  display: block;
  color: var(--text-muted);
  font-size: 12.5px;
}
.congress-content .member-country {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.name-chip .member-country { margin-top: 2px; }
.member-country .country-flag {
  width: 20px;
  height: 15px;
  margin: -2px 6px 0 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  object-fit: cover;
  vertical-align: middle;
}
/* not chosen yet: "To be announced" */
.congress-content .is-tba .member-name,
.name-chip.is-tba strong {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 500;
}
.member-card.is-tba .member-image { opacity: .55; }
.congress-content .sp-card.is-tba .sp-card-name,
.speaker-card.is-tba .speaker-name {
  font-style: italic;
  opacity: .75;
}
.sp-card.is-tba { padding-bottom: 18px; }
.speaker-initials .fa-user { font-size: .75em; opacity: .7; }

/* ---------- 4.9 Info blocks ---------- */
.general-informations {
  margin-bottom: 15px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--info-bg);
}
/* info block titles are h2 on pages where they sit directly under the h1, h3 elsewhere; both look the same */
.congress-content .general-informations h2,
.congress-content .general-informations h3 {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  color: var(--ink);
  font: 700 18px/1.3 var(--font-body);
}
.general-informations h2 i,
.general-informations h3 i {
  width: 24px;
  margin-right: 10px;
  color: var(--secondary);
  text-align: center;
}
.congress-content .general-informations p:last-child,
.congress-content .general-informations ul:last-child { margin-bottom: 0; }

.deadline-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 25px;
  padding: 20px 24px;
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-lg);
  background: var(--info-bg);
}
.deadline-block .deadline-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 3px solid var(--secondary);
  border-radius: 50%;
  background: #fff;
  color: var(--secondary);
  font-size: 24px;
}
.deadline-block .deadline-label {
  display: block;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.deadline-block .deadline-date {
  display: block;
  color: var(--ink);
  font: 600 30px/1.2 var(--font-display);
}
.deadline-block .deadline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}
@media (max-width: 767.98px) {
  .deadline-block .deadline-actions { margin-left: 0; }
}

.map-embed {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 420px;
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 28px;
}
.check-list li::before {
  content: "\f00c";
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--secondary);
  font: 900 14px/1.7 "Font Awesome 6 Free";
}

/* ---------- 4.10 Tables ---------- */
.table-brand {
  --bs-table-striped-bg: var(--gray-50);
  margin-bottom: 12px;
  border-color: var(--gray-200);
  font-size: 15px;
}
.table-brand > :not(caption) > * > * {
  padding: 10px 12px;
  border-color: var(--gray-200);
}
.table-brand thead th {
  --bs-table-bg: var(--ink);
  --bs-table-color: #fff;
  --bs-table-bg-type: var(--ink);
  font: 600 14.5px/1.35 var(--font-ui);
  vertical-align: middle;
}
.table-brand thead th small {
  display: block;
  font: 400 12.5px/1.3 var(--font-body);
  letter-spacing: 0;
  opacity: .85;
}
.table-brand tbody th {
  color: var(--ink);
  font-weight: 700;
}
.table-brand td { color: var(--text); }
.table-kv tbody th { width: 34%; }
.table-kv td { font-variant-numeric: tabular-nums; }
.table-caption-note {
  margin: 0 0 25px;
  padding-left: 18px;
}
.congress-content .table-caption-note li {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---------- 4.11 Alert box ---------- */
.program-alert-box {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid rgba(78, 195, 207, .4);
  border-left: 5px solid var(--secondary-hover);
  border-radius: var(--radius);
  background: rgba(78, 195, 207, .1);
}
.program-alert-box .alert-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(15, 25, 35, .12);
}
.program-alert-box .alert-content {
  color: var(--gray-800);
  font-size: 14px;
  line-height: 1.55;
}
.program-alert-box .alert-title {
  margin-right: 4px;
  color: var(--gray-900);
  font-weight: 700;
}
.program-alert-box.is-warning {
  border-color: var(--gray-200);
  border-left-color: var(--dark-3);
  background: var(--gray-100);
}
.program-alert-box.is-warning .alert-icon { color: var(--dark); }

/* ---------- 4.12 PDF download card ---------- */
.scientific-pdf-wrapper {
  display: flex;
  justify-content: center;
  padding: 30px 0 10px;
}
.scientific-pdf-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  padding: 45px 35px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 25, 35, .06);
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.scientific-pdf-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--grad-pdf);
}
.scientific-pdf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 25, 35, .1);
}
.scientific-pdf-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--primary-ink);
  font-size: 32px;
  transition: transform .3s;
}
.scientific-pdf-card:hover .scientific-pdf-icon-badge { transform: scale(1.08) rotate(-3deg); }
.congress-content .scientific-pdf-title {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  color: var(--ink);
  font: 600 24px/1.3 var(--font-display);
}
.congress-content .scientific-pdf-desc {
  margin: 0 auto 24px;
  color: var(--text-muted);
  font-size: 15px;
}
@media (max-width: 575.98px) {
  .scientific-pdf-card { padding: 30px 20px; border-radius: 14px; }
  .congress-content .scientific-pdf-title { font-size: 21px; }
}

/* ---------- 4.14 Announcement card ---------- */
.announcement-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: transform .3s, box-shadow .3s, border-left-color .3s;
}
.announcement-card:hover {
  transform: translateY(-5px);
  border-left-color: var(--secondary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  color: inherit;
}
.announcement-card .date-badge {
  margin-bottom: 8px;
  color: var(--secondary-text);
  font-size: 13px;
  font-weight: 600;
}
.announcement-card h3 {
  margin-bottom: 8px;
  color: var(--ink);
  font: 600 19px/1.3 var(--font-display);
}
.announcement-card p {
  flex-grow: 1;
  display: -webkit-box;
  margin-bottom: 12px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-body);
  font-size: 14.5px;
  line-height: 1.6;
}
.announcement-card .read-more {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.announcement-card .read-more i { margin-left: 6px; transition: transform .2s; }
.announcement-card:hover .read-more i { transform: translateX(4px); }

/* ---------- Quick-access tiles (home) ---------- */
.quick-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 26px 24px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: transform .3s, box-shadow .3s, color .3s;
}
.quick-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand-diag);
  opacity: 0;
  transition: opacity .35s;
}
.quick-tile > * { position: relative; }
.quick-tile .tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--secondary);
  font-size: 22px;
  transition: background-color .3s, color .3s;
}
.quick-tile h3 {
  text-align: center;
  margin-bottom: 6px;
  color: var(--ink);
  font: 600 20px/1.3 var(--font-display);
  transition: color .3s;
}
.quick-tile p {
  flex-grow: 1;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  transition: color .3s;
}
.quick-tile .tile-arrow {
  align-self: center;
  color: var(--ink);
  transition: color .3s, transform .3s;
}
.quick-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-brand);
  color: #fff;
}
.quick-tile:hover::before { opacity: 1; }
.quick-tile:hover .tile-icon { background: rgba(255, 255, 255, .15); color: #fff; }
.quick-tile:hover h3,
.quick-tile:hover p,
.quick-tile:hover .tile-arrow { color: #fff; }
.quick-tile:hover .tile-arrow { transform: translateX(4px); }

/* ---------- Home: featured actions (Register, Submit an Abstract) ---------- */
.cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: clamp(24px, 2.6vw, 34px);
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform .3s, box-shadow .3s;
}
.cta-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.cta-card > * { position: relative; }
.cta-card.is-dark {
  background: var(--grad-brand-diag);
  color: #fff;
}
.cta-card { justify-content: center; }
.cta-card p { flex-grow: 0; }
.cta-card.is-light {
  border: 1px solid var(--card-border);
  background: #fff;
}
/* large faded icon in the corner */
.cta-card .cta-watermark {
  position: absolute;
  right: -18px;
  bottom: -28px;
  font-size: 100px;
  line-height: 1;
  opacity: .07;
  pointer-events: none;
}
.cta-card.is-dark .cta-watermark { color: var(--primary); opacity: .12; }
.cta-card.is-light .cta-watermark { color: var(--ink); opacity: .045; }
.cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-size: 20px;
}
.cta-card.is-dark .cta-icon { background: rgba(var(--primary-rgb), .18); color: var(--primary); }
.cta-card.is-light .cta-icon { background: var(--accent-soft); color: var(--primary-ink); }
.cta-deadline {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.cta-deadline i { margin-right: 7px; }
.cta-card.is-dark .cta-deadline { background: rgba(255, 255, 255, .1); color: var(--primary-light); }
.cta-card.is-light .cta-deadline { background: var(--info-bg); color: var(--primary-ink); }
.cta-card h2 {
  margin: 0 0 6px;
  font: 700 clamp(25px, 2.2vw, 31px)/1.15 var(--font-display);
}
.cta-card h2 + .cta-actions { margin-top: 18px; }
.cta-card.is-dark h2 { color: #fff; }
.cta-card.is-light h2 { color: var(--ink); }
.cta-card p {
  flex-grow: 1;
  max-width: 440px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.cta-card.is-dark p { color: var(--gray-200); }
.cta-card.is-light p { color: var(--text-body); }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cta-actions .btn {
  padding: 9px 20px;
  font-size: 15px;
}
.cta-card.is-dark :focus-visible { outline-color: var(--primary); }

/* ---------- Workshops ---------- */
.workshop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1199.98px) { .workshop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .workshop-grid { grid-template-columns: 1fr; } }

.workshop-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  transition: transform .3s, box-shadow .3s;
}
.workshop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}
.workshop-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  overflow: hidden;
  background: var(--grad-brand-diag);
  color: rgba(255, 255, 255, .9);
  font-size: 54px;
}
.workshop-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.workshop-img-wrap i { transition: transform .4s; }
.workshop-card:hover .workshop-img-wrap img,
.workshop-card:hover .workshop-img-wrap i { transform: scale(1.08); }
.workshop-img-wrap .type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
}
.workshop-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 18px 20px 20px;
}
.congress-content .workshop-title {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  color: var(--ink);
  font: 600 20px/1.3 var(--font-display);
}
.congress-content .workshop-desc {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.6;
}
.workshop-meta {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.congress-content .workshop-meta li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
.workshop-meta i {
  width: 16px;
  color: var(--secondary);
  text-align: center;
}
.workshop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.workshop-fee {
  color: var(--ink);
  font: 600 22px/1 var(--font-display);
}

/* ---------- Sponsors ---------- */
.sponsor-tier + .sponsor-tier { margin-top: 36px; }
.congress-content .sponsor-tier h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tier-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tier-color, var(--ink));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tier-color, var(--ink)) 25%, transparent);
}
.tier-platinum { --tier-color: #7d8aa3; --cols: 2; }
.tier-gold { --tier-color: #c9a227; --cols: 3; }
.tier-silver { --tier-color: #a3acb6; --cols: 4; }
.tier-supporter { --tier-color: var(--secondary); --cols: 6; }

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 991.98px) {
  .tier-silver .sponsor-grid,
  .tier-supporter .sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-platinum .sponsor-grid { grid-template-columns: 1fr; }
}

.sponsor-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 16px;
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--tier-color, var(--card-border));
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.sponsor-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
/* wide tiers get flatter tiles so big logos don't become huge boxes */
.tier-platinum .sponsor-tile { aspect-ratio: 5 / 2; padding: 24px 40px; }
.tier-gold .sponsor-tile { aspect-ratio: 2 / 1; }
.sponsor-tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .3s, opacity .3s;
}
.sponsor-tile:hover img { filter: none; opacity: 1; }
.sponsor-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--gray-600);
  font: 600 13px/1.3 var(--font-ui);
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
}
.sponsor-placeholder i { font-size: 1.6em; }

.sponsor-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.sponsor-strip .sponsor-tile {
  width: 190px;
  aspect-ratio: 19 / 11;
}

.floor-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  max-width: 100%;
  max-height: 320px;
  width: 100%;
  margin-bottom: 20px;
  border: 2px dashed var(--nav-border);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(15, 25, 35, .06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(rgba(15, 25, 35, .06) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--info-bg);
  color: var(--text-muted);
  font-weight: 500;
}
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.status-available { background: #e3f4e8; color: #22683a; }
.status-reserved { background: #fdf0d5; color: #8a5a00; }
.status-sold { background: #fbe4e8; color: #9c2538; }

/* ---------- Scientific program ---------- */
.program-tabs {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.program-tabs .nav-link {
  padding: 8px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 600 15px/1.3 var(--font-ui);
}
.program-tabs .nav-link small {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  opacity: .8;
}
.program-tabs .nav-link:hover { background: rgba(15, 25, 35, .08); }
.program-tabs .nav-link.active {
  background: var(--ink);
  color: #fff;
}

.program-badge-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
}

.program-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}
.program-table .col-time { width: 120px; }
.program-table tbody th {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.program-table td { vertical-align: top; }
.session .type-badge { margin-bottom: 6px; }
.session-title {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}
.session-meta {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.session-meta i { width: 14px; margin-right: 4px; color: var(--secondary); }
.table-brand .program-break td {
  --bs-table-bg-type: var(--gray-100);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}
.program-break td i { margin-right: 8px; color: var(--secondary); }
@media (max-width: 767.98px) {
  .program-tabs .nav-link { padding: 6px 14px; font-size: 15px; }
  .program-tabs .nav-link small { font-size: 12px; }
  .program-table .col-time { width: 96px; }
  /* keep the time visible while the halls scroll sideways */
  .program-table thead th:first-child,
  .program-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--gray-200);
  }
  .program-table tbody th { background-color: #fff; }
  .table-brand .program-break td { text-align: left; }
}

.program-notlar {
  padding: 10px 4px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Contact ---------- */
.contact-card {
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.contact-card + .contact-card { margin-top: 20px; }
.congress-content .contact-card h2 {
  margin-top: 0;
}
.icon-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.icon-row:last-child { margin-bottom: 0; }
.icon-row .icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--secondary);
}
.icon-row .text {
  padding-top: 6px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.icon-row .text a { color: var(--ink); text-decoration: none; }
.icon-row .text a:hover { color: var(--secondary-text); text-decoration: underline; }

.form-brand .form-label {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.form-brand .form-control,
.form-brand .form-select {
  padding: 10px 14px;
  border-color: var(--gray-200);
  border-radius: 8px;
  font-size: 15px;
}
.form-brand .form-control:focus,
.form-brand .form-select:focus,
.form-brand .form-check-input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 .2rem rgba(78, 195, 207, .2);
}
.form-brand .form-check-input:checked {
  border-color: var(--ink);
  background-color: var(--ink);
}
.form-brand .form-check-label { font-size: 14px; color: var(--text-body); }
.form-brand .hp-field {
  position: absolute;
  left: -9999px;
}

/* toasts */
.toast-container { z-index: 1100; }
.toast-brand {
  border: 0;
  border-left: 5px solid var(--secondary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.toast-brand.is-error { border-left-color: var(--accent); }
.toast-brand .toast-body { font-size: 15px; }

/* ---------- Abstract submission form ---------- */
.abstract-form { margin-top: 10px; }
.form-section {
  margin: 0 0 22px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.form-section legend {
  display: flex;
  float: none;
  align-items: center;
  gap: 12px;
  width: auto;
  margin: 0 0 16px;
  color: var(--ink);
  font: 600 clamp(20px, 1.8vw, 24px)/1.25 var(--font-display);
}
.form-section legend small {
  color: var(--text-muted);
  font: 400 15px/1 var(--font-body);
}
.form-step {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-primary);
  font: 700 15px/1 var(--font-body);
}
.congress-content .form-hint {
  margin: -6px 0 16px;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.55;
}
.form-brand .form-text {
  color: var(--text-muted);
  font-size: 13px;
}
.form-brand span.form-label { display: block; }
.form-brand textarea.form-control { line-height: 1.6; }

/* radio cards (abstract type) */
.choice-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.choice-card {
  position: relative;
  display: block;
  cursor: pointer;
}
.choice-card .form-check-input {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
}
.choice-card-body {
  display: block;
  height: 100%;
  padding: 16px 44px 16px 18px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  transition: border-color .2s, background-color .2s;
}
.choice-card-body i {
  display: block;
  margin-bottom: 8px;
  color: var(--secondary-hover);
  font-size: 20px;
}
.choice-card-body strong {
  display: block;
  color: var(--ink);
  font-size: 15.5px;
}
.choice-card-body small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13px;
}
.choice-card:hover .choice-card-body { border-color: var(--gray-300); }
.choice-card .form-check-input:checked + .choice-card-body {
  border-color: var(--ink);
  background: var(--gray-50);
}
.choice-card .form-check-input:focus-visible + .choice-card-body {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}
@media (max-width: 575.98px) { .choice-cards { grid-template-columns: 1fr; } }

/* radio pills (presentation preference) */
.choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choice-pills label {
  position: relative;
  cursor: pointer;
}
.choice-pills .form-check-input {
  position: absolute;
  opacity: 0;
}
.choice-pills span {
  display: inline-block;
  padding: 8px 18px;
  border: 2px solid var(--gray-200);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color .2s, background-color .2s, color .2s;
}
.choice-pills label:hover span { border-color: var(--gray-300); }
.choice-pills .form-check-input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.choice-pills .form-check-input:focus-visible + span {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

/* author rows */
.author-list {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.author-row {
  padding: 16px 18px 18px;
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius);
  background: var(--gray-50);
}
.author-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.author-row-title {
  color: var(--ink);
  font-weight: 700;
}
.author-row-tools {
  display: flex;
  gap: 6px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  transition: background-color .2s, border-color .2s, color .2s;
}
.icon-btn:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.icon-btn.is-danger:hover:not(:disabled) {
  border-color: #9c2538;
  background: #9c2538;
}
.icon-btn:disabled { opacity: .35; }
.btn-add { --bs-btn-padding-y: 8px; --bs-btn-padding-x: 18px; --bs-btn-font-size: 14.5px; }

/* word counter: sticks under the menu while the abstract sections are on screen */
.word-meter {
  position: sticky;
  top: calc(var(--nav-h) + 8px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 18px;
  padding: 10px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}
.word-meter-text {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.word-meter-bar {
  flex: 1 1 120px;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--gray-100);
}
.word-meter-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--secondary-hover);
  transition: width .2s;
}
.word-meter.is-near .word-meter-bar span { background: #d9a31a; }
.word-meter.is-over { border-color: #9c2538; }
.word-meter.is-over .word-meter-text { color: #9c2538; }
.word-meter.is-over .word-meter-bar span { background: #9c2538; }

/* figure */
.figure-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.figure-preview img {
  max-width: 180px;
  max-height: 120px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  object-fit: contain;
}
.form-brand input[type="file"]:invalid ~ .invalid-feedback:not(:empty) { display: block; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding-top: 4px;
}
.draft-status {
  color: var(--text-muted);
  font-size: 13.5px;
}
.link-clear {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 14px;
}
.link-clear:hover { color: #9c2538; }
.abstract-form[aria-busy="true"] { cursor: progress; }

.abstract-success {
  max-width: 720px;
  margin: 10px auto 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--card-border);
  border-top: 5px solid var(--secondary);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.abstract-success:focus { outline: none; }
.abstract-success .success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-primary);
  font-size: 28px;
}
.congress-content .abstract-success h2 { margin-top: 0; }
.abstract-success .success-id {
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--ink);
  font-size: 1.1em;
  letter-spacing: .5px;
}
.abstract-success .d-flex { justify-content: center; }

/* ---------- Abstract (as printed in the abstract book) ---------- */
.congress-content .abstract-authors,
.modal .abstract-authors {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.abstract-authors sup { font-weight: 500; }
.abstract-presenting { text-decoration: underline; text-decoration-color: var(--primary-dark); text-underline-offset: 3px; }
.abstract-affiliations {
  margin: 0 0 14px;
  padding-left: 18px;
}
.congress-content .abstract-affiliations li,
.modal .abstract-affiliations li {
  color: var(--text-muted);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
}
.congress-content .abstract-section,
.modal .abstract-section {
  margin: 0 0 10px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}
.abstract-section strong { color: var(--ink); }
.congress-content .abstract-references,
.modal .abstract-references { font-size: 13.5px; }
.abstract-preview-modal .modal-header { background: var(--ink); }
.abstract-preview-modal .modal-title {
  color: #fff;
  font: 600 20px/1.35 var(--font-display);
}
.abstract-preview-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.word-count-note {
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Accepted abstracts list ---------- */
.abstracts-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.abstracts-search {
  position: relative;
  flex: 1 1 260px;
}
.abstracts-search i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--text-muted);
  transform: translateY(-50%);
}
.abstracts-search .form-control { padding: 10px 14px 10px 38px; border-radius: 999px; }
.abstracts-toolbar .form-select {
  flex: 0 1 260px;
  padding-block: 10px;
  border-radius: 999px;
}
.abstracts-formats {
  display: flex;
  gap: 6px;
}
.chip-btn {
  padding: 8px 16px;
  border: 2px solid var(--gray-200);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip-btn:hover { border-color: var(--gray-300); }
.chip-btn.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.congress-content .abstracts-count {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 14px;
}
.abstracts-list {
  display: grid;
  gap: 10px;
}
.abstract-item {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 25, 35, .04);
  transition: box-shadow .25s, border-color .25s;
}
.abstract-item:hover { border-color: var(--gray-200); box-shadow: var(--shadow-soft); }
.abstract-item[open] { border-color: var(--gray-200); }
.abstract-item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.abstract-item summary::-webkit-details-marker { display: none; }
.abstract-code {
  flex-shrink: 0;
  min-width: 56px;
  margin-top: 2px;
  text-align: center;
}
.abstract-summary { flex: 1; min-width: 0; }
.abstract-title {
  display: block;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
}
.abstract-byline {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.abstract-chevron {
  margin-top: 5px;
  color: var(--text-muted);
  transition: transform .25s;
}
.abstract-item[open] .abstract-chevron { transform: rotate(180deg); }
.abstract-item .abstract-body {
  padding: 4px 18px 18px 88px;
}
@media (max-width: 575.98px) {
  .abstract-item .abstract-body { padding-left: 18px; }
}
.abstracts-empty {
  padding: 40px 20px;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
}
.abstracts-empty i {
  margin-bottom: 10px;
  color: var(--secondary-hover);
  font-size: 30px;
}
.congress-content .abstracts-empty p { margin: 0 auto; max-width: 520px; color: var(--text-muted); }
.congress-content .abstracts-none { color: var(--text-muted); }

/* downloadable templates on the guidelines page */
.download-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.download-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.download-item:hover {
  transform: translateY(-2px);
  border-color: var(--gray-200);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.download-item > i {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--info-bg);
  color: var(--secondary-hover);
  font-size: 20px;
  line-height: 42px;
  text-align: center;
}
.download-item strong { display: block; font-size: 15px; }
.download-item small { display: block; color: var(--text-muted); font-size: 12.5px; }
.download-item.is-coming-soon { opacity: .6; pointer-events: none; }

/* ---------- Style guide page ---------- */
.sg-section + .sg-section { margin-top: 50px; }
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.sg-swatch {
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  font-size: 13px;
}
.sg-swatch span { display: block; height: 64px; }
.sg-swatch code,
.sg-swatch strong { display: block; padding: 0 10px; }
.sg-swatch strong { padding-top: 8px; color: var(--ink); }
.sg-swatch code { padding-bottom: 8px; color: var(--text-muted); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-media::after { animation: hero-shine 15s ease infinite; }
  /* gentle zoom-out while a photo is showing */
  .hero-slide img {
    transform: scale(1.06);
    transition: transform 7s ease-out;
  }
  .hero-slide.is-active img { transform: scale(1); }
  /* the arcs draw out from Kosovo one after another, then the hub keeps a slow pulse */
  .net-arc {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: net-draw 1.1s ease-out forwards;
    animation-delay: calc(.3s + var(--i) * .12s);
  }
  .net-city { opacity: 0; animation: net-pop .4s ease-out forwards; animation-delay: calc(1.2s + var(--i) * .12s); }
  .net-hub-glow { animation: net-pulse 2.6s ease-in-out infinite; }
}
@keyframes net-draw { to { stroke-dashoffset: 0; } }
@keyframes net-pop { to { opacity: 1; } }
@keyframes net-pulse {
  0%, 100% { transform: scale(.7); opacity: .9; }
  50% { transform: scale(1.5); opacity: .25; }
}
@keyframes hero-shine {
  0% { transform: translateX(-100%); }
  20%, 100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Header: account link ---------- */
.nav-account {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  color: #fff;
  font: 600 14px/1 var(--font-ui);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav-account i { font-size: 24px; }
.nav-account:hover,
.nav-account.active { background: rgba(255, 255, 255, .18); color: #fff; }
.nav-account.is-signed-in::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 24px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--dark);
  border-radius: 50%;
  background: var(--primary);
}
.site-nav.is-solid .nav-account { color: var(--ink); }
.site-nav.is-solid .nav-account:hover,
.site-nav.is-solid .nav-account.active { background: var(--info-bg); color: var(--ink); }
.site-nav.is-solid .nav-account.is-signed-in::after { border-color: #fff; }
@media (min-width: 992px) {
  .nav-account span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Accounts: sign in, dashboard, registration ---------- */
.account-loading {
  display: flex;
  justify-content: center;
  padding: 60px 0;
  color: var(--secondary-hover);
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 24px;
  align-items: start;
  margin-top: 10px;
}
.auth-single { max-width: 520px; margin: 10px auto 0; }
.auth-card,
.account-card,
.gate-box {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.congress-content .auth-card h2 { margin-top: 0; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 12px;
  background: var(--info-bg);
}
.auth-tabs button {
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: 600 15px/1.2 var(--font-ui);
  transition: background-color .2s, color .2s;
}
.auth-tabs button[aria-selected="true"] {
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 25, 35, .12);
  color: var(--ink);
}
.auth-forgot { margin: 0 0 12px; text-align: right; }
.auth-forgot .btn-link,
.auth-back .btn-link { padding: 0; color: var(--secondary-text); font-size: 14px; }
.auth-back { margin: 16px 0 0; text-align: center; }
.auth-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fdecee;
  color: #9c2538;
  font-size: 14px;
}
.auth-aside {
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius-lg);
  background: var(--grad-brand-diag);
  color: var(--gray-200);
}
.congress-content .auth-aside h2 { margin-top: 0; color: #fff; }
.auth-benefits { margin: 0 0 20px; padding: 0; list-style: none; }
.auth-benefits li { display: flex; gap: 14px; margin-bottom: 14px; line-height: 1.5; }
.auth-benefits i {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), .18);
  color: var(--primary);
}
.congress-content .auth-aside li,
.congress-content .auth-aside li span,
.congress-content .auth-aside p { color: var(--gray-100); }
.auth-help { margin: 0; font-size: 14px; }
.auth-help a { color: var(--primary-light); }
.auth-message { text-align: center; }
.auth-message .success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary-ink);
  font-size: 26px;
}
@media (max-width: 767.98px) { .auth-layout { grid-template-columns: 1fr; } }

.gate-box {
  max-width: 620px;
  margin: 10px auto 0;
  text-align: center;
}
.gate-box p { margin: 0 0 18px; color: var(--text-body); font-size: 16px; }
.gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary-ink);
  font-size: 24px;
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 20px;
}
.account-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-hello { margin: 0; color: var(--ink); font: 600 22px/1.3 var(--font-display); }
.account-email { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; }
.account-card + .account-card { margin-top: 24px; }
.congress-content .account-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: clamp(20px, 1.8vw, 24px);
}
.account-card h2 i { color: var(--secondary-hover); font-size: .8em; }
.account-empty { margin: 0 0 14px; color: var(--text-muted); }
.account-facts,
.bank-details { display: grid; gap: 8px; margin: 0 0 14px; }
.account-facts > div,
.bank-details > div {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.account-facts > div:last-child,
.bank-details > div:last-child { padding-bottom: 0; border-bottom: 0; }
.account-facts dt,
.bank-details dt { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.account-facts dd,
.bank-details dd { margin: 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.file-ok { color: #1c7a4a; font-weight: 600; }

.reg-status,
.ab-status {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.reg-status.s-pending { background: #fff4d6; color: #7a5300; }
.reg-status.s-confirmed,
.ab-status.s-accepted_oral,
.ab-status.s-accepted_poster { background: #dff5e8; color: #1c7a4a; }
.reg-status.s-rejected,
.reg-status.s-cancelled,
.ab-status.s-rejected { background: #fdecee; color: #9c2538; }
.ab-status.s-withdrawn { background: var(--gray-100); color: var(--text-muted); }
.ab-status { margin: 0; white-space: nowrap; }

.pay-box {
  padding: 16px 18px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  background: var(--gray-50);
}
.pay-box > p { margin: 0 0 12px; color: var(--text-body); }
.pay-box .bank-details { margin-bottom: 0; }
.abstract-success .pay-box { margin: 16px 0; text-align: left; }
.upload-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-200); }
.upload-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.upload-inline .form-control { flex: 1 1 220px; }
.upload-row.was-validated .invalid-feedback:not(:empty) { display: block; }

/* ---------- My account: workshops (booking, paying, the invoice) ---------- */
.ws-sub {
  margin: 0 0 10px;
  color: var(--ink);
  font: 700 12.5px/1.2 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ws-orders { margin: 0 0 22px; padding: 0; list-style: none; }
.ws-order {
  padding: 16px 18px;
  border: 1px solid var(--gray-100);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--white);
}
.ws-order + .ws-order { margin-top: 12px; }
.ws-order.s-pending { border-left-color: #e0a526; }
.ws-order.s-confirmed { border-left-color: #2e9e62; }
.ws-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ws-order-code { color: var(--primary-ink); font-size: 13px; font-weight: 700; letter-spacing: .4px; }
.ws-pill {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ws-pill.s-pending { background: #fff4d6; color: #7a5300; }
.ws-pill.s-confirmed { background: #dff5e8; color: #1c7a4a; }
.ws-pill.s-cancelled { background: #fdecee; color: #9c2538; }
.ws-items { margin: 0 0 12px; padding: 0; list-style: none; }
.ws-items li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--gray-200);
}
.ws-items li:first-child { border-top: 0; padding-top: 0; }
.ws-item-main { min-width: 0; }
.ws-item-main strong { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; }
.ws-item-main small { color: var(--text-muted); }
.ws-item-fee { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ws-order .account-facts { margin-bottom: 12px; }
.ws-order .pay-box { margin-top: 4px; }
.ws-order-foot { margin: 8px 0 0; text-align: right; }
.ws-order-foot .link-clear { color: #9c2538; }

.ws-book { margin-top: 4px; }
.ws-pick { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.ws-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 4px 14px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ws-option:hover { border-color: var(--primary); }
.ws-option:has(input:checked) {
  border-color: var(--primary-dark);
  background: rgba(var(--primary-rgb), .07);
  box-shadow: 0 0 0 1px var(--primary-dark);
}
.ws-option:has(input:focus-visible) { outline: 2px solid var(--dark); outline-offset: 2px; }
.ws-option .form-check-input { margin: 3px 0 0; }
.ws-option-body { min-width: 0; }
.ws-option-body strong { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; }
.ws-option-body small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.ws-option-fee { color: var(--ink); font: 600 18px/1.2 var(--font-display); white-space: nowrap; }
.ws-option.is-off { cursor: not-allowed; background: var(--gray-50); }
.ws-option.is-off:hover { border-color: var(--gray-200); }
.ws-option.is-off .ws-option-body strong,
.ws-option.is-off .ws-option-fee { color: var(--text-muted); }
.ws-left { font-weight: 600; }
.ws-left.is-low { color: #9a6700 !important; }
.ws-left.is-full,
.ws-clash { color: #9c2538 !important; font-weight: 600; }
.ws-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 6px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--gray-50);
  color: var(--text-body);
  font-weight: 600;
}
.ws-summary strong { color: var(--ink); font: 700 22px/1 var(--font-display); }
.ws-book [data-ws-book] { margin-top: 6px; }

/* the workshops page: places left next to the capacity */
/* not announced yet */
.workshop-card.is-tba .workshop-img-wrap { opacity: .6; }
.workshop-card.is-tba:hover { transform: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .05); }
.workshop-card.is-tba:hover .workshop-img-wrap i { transform: none; }
.congress-content .workshop-card.is-tba .workshop-title { color: var(--text-muted); font-style: italic; }
.workshop-card.is-tba .workshop-footer { justify-content: flex-end; }
.workshop-seats.is-low { color: #9a6700; font-weight: 600; }
.workshop-seats.is-full { color: #9c2538; font-weight: 600; }
.workshop-footer .btn.disabled { pointer-events: none; opacity: .55; }

.my-abstracts { margin: 0 0 16px; padding: 0; list-style: none; }
.my-abstract {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
}
.my-abstract:first-child { padding-top: 0; }
.my-abstract-main { flex: 1 1 260px; min-width: 0; }
.my-abstract-id { display: block; color: var(--primary-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .4px; }
.my-abstract-title { display: block; color: var(--ink); line-height: 1.4; }
.my-abstract-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.my-abstract-actions { display: flex; align-items: center; gap: 4px; }
.my-abstract-actions .link-clear { margin-left: 0; }
@media (max-width: 575.98px) { .my-abstract-side { align-items: flex-start; } }

/* an abstract's files (assets/js/abstract-pdf.js): the name opens the PDF, the arrow downloads it, the
   Word / PowerPoint icon downloads the template filled in with the abstract (abstract-templates.js) */
.pdf-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.pdf-files-label { color: var(--text-muted); font-size: 13.5px; font-weight: 500; }
.pdf-file {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  overflow: hidden;
}
.pdf-file button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.pdf-file .fa-file-pdf { color: #c2402f; }
.pdf-file .pdf-file-save { padding-inline: 11px; border-left: 1px solid var(--gray-200); color: var(--text-muted); }
.pdf-file .pdf-file-edit { padding-inline: 11px; border-left: 1px solid var(--gray-200); }
.pdf-file .fa-file-word { color: #2b579a; }
.pdf-file .fa-file-powerpoint { color: #c43e1c; }
.pdf-file button:hover { background: var(--accent-soft); color: var(--ink); }
.pdf-file button:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: -2px; }
.pdf-file button[aria-busy="true"] { cursor: progress; opacity: .6; }
.congress-content .pdf-files-note { margin: 0 0 16px; color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }

.my-abstract-more { flex-basis: 100%; }
.my-abstract-more > summary {
  display: inline-block;
  color: var(--primary-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.my-abstract-more > summary::-webkit-details-marker { display: none; }
.my-abstract-more > summary::before {
  content: "\f054";
  display: inline-block;
  margin-right: 7px;
  font: var(--fa-font-solid);
  font-size: 11px;
  transition: transform .2s;
}
.my-abstract-more[open] > summary::before { transform: rotate(90deg); }
.my-abstract-more[open] {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--gray-50);
}
.congress-content .my-abstract-facts { margin: 12px 0 10px; color: var(--text-muted); font-size: 13.5px; }
.congress-content .my-abstract-more .abstract-body p { font-size: 15px; }
.congress-content .my-abstract-figure { margin: 10px 0 0; font-size: 14px; }

.success-files {
  margin: 22px 0 0;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--gray-50);
  text-align: left;
}
.congress-content .success-files h3 { margin: 0 0 6px; font-size: 18px; }
.congress-content .success-files p { margin-bottom: 12px; color: var(--text-muted); font-size: 14.5px; }

/* registration: category choice with its price */
.fee-options { display: grid; gap: 8px; }
.fee-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.fee-option:hover { border-color: var(--gray-300); }
.fee-option .form-check-input { flex-shrink: 0; margin: 0; }
.fee-option-name { flex: 1; color: var(--ink); font-size: 15px; font-weight: 500; }
.fee-option-price { color: var(--ink); font-weight: 700; white-space: nowrap; }
.fee-option:has(.form-check-input:checked) { border-color: var(--ink); background: var(--gray-50); }
.fee-option:has(.form-check-input:focus-visible) { outline: 2px solid var(--dark); outline-offset: 2px; }
.register-page .form-brand.was-validated input[type="file"]:invalid ~ .invalid-feedback { display: block; }

/* registration: discount code */
.discount-box { margin-bottom: 16px; }
.discount-box .form-control { text-transform: uppercase; }
.discount-box .form-text.is-ok { color: #1c7a4a; font-weight: 600; }
.discount-box .form-text.is-error { color: #9c2538; font-weight: 600; }
.fee-option-price s { margin-right: 6px; color: var(--text-muted); font-weight: 500; }

/* notice from the admin page (Settings → notice), shown under the banner on every page */
.site-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border-left: 5px solid var(--primary-dark);
  border-radius: var(--radius);
  background: rgba(78, 195, 207, .12);
  color: var(--gray-800);
  font-size: 15px;
  line-height: 1.55;
}
.site-notice i { margin-top: 3px; color: var(--ink); }
.site-notice p { margin: 0; }
.site-notice.is-warning { border-left-color: #b7791f; background: #fff4d6; color: #5c3f00; }

/* website builder: on a first visit the page content waits (at most 1.5 s) for the edited version from the database */
.pb-wait #main { visibility: hidden; }

/* ==========================================================================
   The invoice
   ========================================================================== */
/* invoice.html — the toolbar is for the screen, the sheet is what prints */
.invoice-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.invoice-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invoice-sheet {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.invoice-brand { display: flex; align-items: flex-start; gap: 12px; }
.invoice-brand img { flex-shrink: 0; }
.invoice-event { margin: 0; font-family: var(--font-display, inherit); font-size: 17px; font-weight: 600; line-height: 1.3; }
.invoice-dates { margin: 2px 0 0; color: var(--text-muted); font-size: 13.5px; }
.invoice-title { text-align: right; }
.invoice-title h1 { margin: 0; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; }
.invoice-sheet h1::after, .invoice-sheet h2::after { content: none; }
.invoice-number { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.invoice-stamp {
  display: inline-block;
  margin: 8px 0 0;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.invoice-stamp.is-paid { color: #1a7f4b; }
.invoice-stamp.is-issued,
.invoice-stamp.is-partial { color: #b4690e; }
.invoice-stamp.is-void { color: var(--text-muted); text-decoration: line-through; }

.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 28px 0; }
.invoice-parties h2 { margin: 0 0 8px; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.invoice-parties p { margin: 0 0 2px; font-size: 14px; line-height: 1.5; }
.invoice-party-name { font-weight: 700 !important; font-size: 15px !important; }

.invoice-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 24px; padding: 14px 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.invoice-meta > div { display: flex; flex-direction: column; gap: 2px; }
.invoice-meta dt { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.invoice-meta dd { margin: 0; font-size: 14px; font-weight: 600; }

.invoice-lines { width: 100%; margin: 0 0 20px; border-collapse: collapse; }
.invoice-lines th { padding: 10px 8px; border-bottom: 1px solid var(--ink); color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.invoice-lines td { padding: 12px 8px; border-bottom: 1px solid var(--gray-100); font-size: 14px; vertical-align: top; }
.invoice-lines th:first-child, .invoice-lines td:first-child { padding-left: 0; text-align: left; }
.invoice-lines th:not(:first-child), .invoice-lines td:not(:first-child) { text-align: right; white-space: nowrap; }
.invoice-lines th:last-child, .invoice-lines td:last-child { padding-right: 0; }

.invoice-totals { display: grid; gap: 6px; margin: 0 0 20px; margin-left: auto; width: min(320px, 100%); }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; }
.invoice-totals dt { color: var(--text-muted); font-weight: 500; }
.invoice-totals dd { margin: 0; font-weight: 600; }
.invoice-totals .is-total { margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--ink); font-size: 17px; }
.invoice-totals .is-total dt, .invoice-totals .is-total dd { color: var(--ink); font-weight: 700; }

.invoice-vat-note, .invoice-note { margin: 0 0 12px; color: var(--text-body); font-size: 13.5px; }
.invoice-bank { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--gray-50); }
.invoice-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--gray-200); color: var(--text-muted); font-size: 12px; }
.invoice-foot p { margin: 0; }

@media (max-width: 575.98px) {
  .invoice-sheet { padding: 22px 18px; }
  .invoice-title { text-align: left; }
  .invoice-parties { grid-template-columns: 1fr; gap: 18px; }
}

/* Saving as PDF: only the sheet is printed, and it fills the page on its own. */
@media print {
  .site-header, .site-nav, #info-strip, .key-dates, .site-footer, #site-footer,
  .skip-link, .invoice-toolbar, .site-notice, .toast-container { display: none !important; }
  body { background: #fff; }
  .site-main, .shell, .congress-content { max-width: none; margin: 0; padding: 0; }
  .invoice-sheet { max-width: none; padding: 0; border: 0; border-radius: 0; }
  .invoice-lines { page-break-inside: avoid; }
  .invoice-bank { background: none; border: 1px solid #999; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 18mm 16mm; }
}

/* =========================================================================
   AI chat bubble (assets/js/chatbot.js)
   ========================================================================= */
/* bottom-left corner, so it never sits on top of the back-to-top button (bottom right) */
.chatbot {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1045;
  font-family: var(--font-body);
}
.chatbot-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 28px rgba(15, 25, 35, .3);
  transition: transform .2s, background-color .2s;
}
.chatbot-toggle:hover { background: var(--ink-hover); transform: translateY(-2px); }
.chatbot-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.chatbot-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--primary);
}
.chatbot-toggle .fa-xmark, .chatbot.is-open .chatbot-toggle .fa-comments { display: none; }
.chatbot.is-open .chatbot-toggle .fa-xmark { display: inline-block; }
.chatbot.is-open .chatbot-toggle::after { display: none; }

.chatbot-panel {
  position: absolute;
  left: 0;
  bottom: 72px;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 25, 35, .28);
  animation: chatbot-in .2s ease-out;
}
.chatbot-panel[hidden] { display: none; }
@keyframes chatbot-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .chatbot-panel { animation: none; } .chatbot-toggle { transition: none; } }

.chatbot-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  background: var(--ink);
  color: #fff;
}
.chatbot-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 15px;
}
.chatbot-title { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.chatbot-title strong { font-size: 15px; }
.chatbot-title small { color: rgba(255, 255, 255, .72); font-size: 12px; }
.chatbot-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
}
.chatbot-icon:hover { background: rgba(255, 255, 255, .12); }
.chatbot-icon:focus-visible { outline: 2px solid var(--primary); }

.chatbot-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  background: var(--gray-50);
  overscroll-behavior: contain;
}
.chatbot-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.chatbot-msg.is-bot { align-self: flex-start; border: 1px solid var(--gray-100); border-bottom-left-radius: 4px; background: #fff; color: var(--text); }
.chatbot-msg.is-user { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--ink); color: #fff; }
.chatbot-msg.is-error { align-self: flex-start; border: 1px solid #f3c7cf; background: #fff5f6; color: #8a1c2c; }
.chatbot-msg a { color: var(--primary-ink); font-weight: 600; }
.chatbot-msg.is-user a { color: var(--primary-light); }
.chatbot-msg.is-typing { display: flex; gap: 4px; padding: 14px 16px; }
.chatbot-msg.is-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-300);
  animation: chatbot-dot 1s infinite ease-in-out;
}
.chatbot-msg.is-typing span:nth-child(2) { animation-delay: .15s; }
.chatbot-msg.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatbot-dot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.chatbot-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.chatbot-suggest button {
  padding: 6px 11px;
  border: 1px solid rgba(var(--primary-dark-rgb), .45);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-ink);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.chatbot-suggest button:hover { background: var(--accent-soft); }

.chatbot-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--gray-100);
  background: #fff;
}
.chatbot-form textarea {
  flex: 1;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.4;
  resize: none;
}
.chatbot-form textarea:focus { border-color: var(--primary-dark); outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.chatbot-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
}
.chatbot-send:hover { background: var(--primary-dark); }
.chatbot-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chatbot-note { margin: 0; padding: 0 12px 8px; background: #fff; color: var(--text-muted); font-size: 11.5px; line-height: 1.35; }

/* the assistant's formatted answer (also login/admin.css) */
.chatbot-msg p { margin: 0 0 6px; }
.chatbot-msg p:last-child, .chatbot-msg ul:last-child, .chatbot-msg ol:last-child { margin-bottom: 0; }
.chatbot-msg ul, .chatbot-msg ol { margin: 0 0 6px; padding-left: 20px; }
.chatbot-msg li { margin-bottom: 2px; }
.chatbot-msg .md-h { margin-top: 4px; font-weight: 700; }
.chatbot-msg .md-table { max-width: 100%; margin: 4px 0 8px; overflow-x: auto; }
.chatbot-msg table { border-collapse: collapse; font-size: 13px; }
.chatbot-msg th, .chatbot-msg td { padding: 4px 8px; border: 1px solid var(--gray-200); text-align: left; }
.chatbot-msg th { background: var(--gray-50); }
.chatbot-msg code { padding: 1px 4px; border-radius: 4px; background: var(--gray-100); font-size: .9em; }
.chatbot-msg pre { margin: 0 0 6px; padding: 8px; border-radius: 8px; background: var(--gray-100); white-space: pre-wrap; }

@media (max-width: 575.98px) {
  .chatbot { left: 16px; bottom: 16px; }
  .chatbot.is-open .chatbot-toggle { display: none; }
  .chatbot-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}
@media print { .chatbot { display: none !important; } }