/* "Registration extended" announcement on the home page (31 Oct 2026), from
   design/registration-extended-sample.html: running banner (.ext-ticker), card above the
   registration form (.ext-flash) and pop-up (.ext-pop). Every rule is .ext- prefixed. */

/* --- Running banner -------------------------------------------------------------------- */
.ext-ticker { position: relative; z-index: 30; display: flex; align-items: stretch;
  background: var(--accent); color: #fff; border-bottom: 3px solid #E3C45C; overflow: hidden; }
.ext-ticker__label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: var(--accent-deep, #8C1A1F); font: 800 13px/1 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; position: relative; }
.ext-ticker__label::after { content: ""; position: absolute; right: -14px; top: 0; bottom: 0; width: 14px;
  background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ext-ticker__dot { width: 9px; height: 9px; border-radius: 50%; background: #FFD54A;
  animation: ext-ping 1.6s ease-out infinite; }
@keyframes ext-ping { 0% { box-shadow: 0 0 0 0 rgba(255,213,74,.8); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255,213,74,0); } }
.ext-ticker__viewport { flex: 1; min-width: 0; overflow: hidden; padding-left: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent); }
.ext-ticker__track { display: flex; width: max-content; animation: ext-run 38s linear infinite; }
.ext-ticker:hover .ext-ticker__track,
.ext-ticker:focus-within .ext-ticker__track,
.ext-ticker[data-paused] .ext-ticker__track { animation-play-state: paused; }
@keyframes ext-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ext-ticker__group { display: flex; align-items: center; flex: none; }
.ext-ticker__msg { display: inline-flex; align-items: center; gap: 10px; padding: 11px 0; margin-right: 48px;
  white-space: nowrap; font-size: 15px; }
.ext-ticker__msg b { color: #FFE27A; }
.ext-ticker__sep { color: rgba(255,255,255,.55); }
.ext-ticker__msg a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ext-ticker__msg a:hover { color: #FFE27A; }
.ext-ticker__cta { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 0; }
.ext-ticker__cta .btn { background: #FFD54A; color: #3a2a00; border-color: #FFD54A; font-weight: 800;
  padding: 6px 14px; min-height: 0; }
.ext-ticker__cta .btn:hover { background: #fff; border-color: #fff; color: var(--accent); }
.ext-ticker__pause { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff;
  border-radius: 6px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; }
.ext-ticker__pause:hover, .ext-ticker__pause:focus-visible { background: rgba(255,255,255,.15); }
@media (max-width: 640px) {
  .ext-ticker__label { padding: 0 10px; font-size: 11px; }
  .ext-ticker__long { display: none; }
  .ext-ticker__msg { font-size: 14px; padding: 9px 0; }
  .ext-ticker__cta .btn { display: none; }
}

/* --- Card above the registration form --------------------------------------------------- */
.ext-flash { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  margin-bottom: var(--space-5); border-radius: var(--radius-lg); color: #fff; overflow: hidden;
  background: linear-gradient(120deg, var(--accent) 0%, #D2462C 55%, #C9A227 140%);
  animation: ext-glow 2.4s ease-in-out infinite; }
@keyframes ext-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(176,33,39,.45); } 50% { box-shadow: 0 0 0 8px rgba(176,33,39,0); } }
.ext-flash::before { content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  animation: ext-shine 3.2s ease-in-out infinite; }
@keyframes ext-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.ext-flash__date { flex: none; width: 64px; text-align: center; background: #fff; color: var(--accent);
  border-radius: 10px; overflow: hidden; font-family: var(--font-body); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.ext-flash__date small { display: block; background: var(--accent-deep, #8C1A1F); color: #fff;
  font: 800 10px/1 var(--font-body); letter-spacing: .08em; padding: 4px 0; text-transform: uppercase; }
.ext-flash__date strong { display: block; font: 800 26px/1 var(--font-body); padding: 5px 0 1px; }
.ext-flash__date span { display: block; font: 700 10px/1 var(--font-body); color: var(--ink-muted);
  padding-bottom: 5px; text-transform: uppercase; }
.ext-flash__text { position: relative; min-width: 0; margin: 0; }
.ext-flash__text > span { display: block; }
.ext-flash__kicker.ext-flash__kicker { display: inline-block; background: #FFD54A; color: #3a2a00;
  font: 800 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; margin-bottom: 6px; }
.ext-flash__title { font: 800 18px/1.25 var(--font-body); }
.ext-flash__sub { font-size: 14px; color: rgba(255,255,255,.92); margin-top: 2px; }
.ext-flash__bulk { font: 700 15px/1.3 var(--font-body); margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.3); }
.ext-flash__days { font: 700 13px/1.3 var(--font-body); color: #FFE27A; margin-top: 4px; }

/* --- Pop-up ----------------------------------------------------------------------------- */
.ext-pop { border: 0; padding: 0; border-radius: 18px; max-width: 440px; width: calc(100% - 32px);
  overflow: visible; background: transparent; }
.ext-pop::backdrop { background: rgba(10,30,55,.55); }
.ext-pop[open] { animation: ext-in .35s cubic-bezier(.2,.9,.3,1.3); }
@keyframes ext-in { from { transform: scale(.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.ext-pop__card { position: relative; background: #fff; border-radius: 18px; overflow: hidden; text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,.3); max-height: calc(100dvh - 32px); overflow-y: auto; }
.ext-pop__top { position: relative; padding: 28px 24px 22px; color: #fff;
  background: linear-gradient(140deg, var(--primary-deep) 0%, var(--primary) 60%, #1d7bc4 100%); }
.ext-pop__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 10px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 18px, #C9A227 18px 36px); }
.ext-pop__seal { border-radius: 50%; background: #fff; padding: 3px; margin: 0 auto 10px; display: block; box-sizing: border-box; }
.ext-pop__badge { display: inline-block; background: #FFD54A; color: #3a2a00; font: 800 12px/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  animation: ext-beat 1.8s ease-in-out infinite; }
@keyframes ext-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ext-pop__top h2 { color: #fff; margin: 12px 0 4px; font-size: 28px; line-height: 1.15; }
.ext-pop__top p { margin: 0; color: rgba(255,255,255,.9); font-size: 15px; }
.ext-pop__body { padding: 22px 24px 24px; }
/* Two last dates (online, bulk/offline): one row each, label left, date right. */
.ext-pop__dates { margin: 0 0 4px; text-align: left; }
.ext-pop__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.ext-pop__row:first-child { padding-top: 0; }
.ext-pop__row dt { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; }
.ext-pop__row dt small, .ext-pop__row dt span, .ext-pop__row dd span { display: block; font-weight: 500;
  font-size: 13px; color: var(--ink-muted); }
.ext-pop__row dd { margin: 0; text-align: right; flex: none; }
.ext-pop__row dd strong { display: block; font: 800 20px/1.15 var(--font-body); color: var(--accent); white-space: nowrap; }
@media (max-width: 380px) {
  .ext-pop__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ext-pop__row dd { text-align: left; }
}
.ext-pop__left { display: inline-block; margin: 6px 0 18px; padding: 6px 12px; border-radius: 999px;
  background: var(--accent-tint, #FBE9EA); color: var(--accent); font-weight: 800; font-size: 14px; }
.ext-pop__actions { display: flex; flex-direction: column; gap: 8px; }
/* Block, not inline-flex: a button holding English + a Hindi span would otherwise lay the two out
   as side-by-side columns on a phone (the Register/Success trap). */
.ext-pop__actions .btn { display: block; width: 100%; text-align: center; }
.ext-pop__close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.18); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }
.ext-pop__close:hover, .ext-pop__close:focus-visible { background: rgba(255,255,255,.32); }

/* --- Reduced motion: everything stands still ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ext-ticker__track { animation: none; width: auto; }
  .ext-ticker__group[aria-hidden="true"] { display: none; }
  .ext-ticker__msg { white-space: normal; margin-right: 0; }
  .ext-ticker__msg:not(:first-child) { display: none; }
  .ext-ticker__pause { display: none; }
  .ext-ticker__dot, .ext-flash, .ext-flash::before, .ext-pop[open], .ext-pop__badge { animation: none; }
}