/* Site-wide announcement modal (pop-up ad) — "admission ticket" design.
   A horizontal ticket: message on the left, a perforated stub on the right
   carrying the closing date. Owner-picked from four samples on 2026-08-31.
   NOTE: class names deliberately avoid "ad"/"popup" — cosmetic ad-blocker
   filters hide elements matching those patterns. */
.kfx-notice-backdrop{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.74); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:18px;
}
/* Visibility must never depend on an animation: CSS animations are frozen
   in a backgrounded tab, which would leave this stuck at opacity 0. */
.kfx-notice-backdrop.show{ display:flex; opacity:1; }

.kfx-notice{
  position:relative; width:min(520px,100%); max-height:88vh;
  display:flex; align-items:stretch;
  background:#15141a; color:#f2efe8;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:kfxNoticeIn .25s cubic-bezier(.2,.9,.3,1.2);
}
/* transform only — no opacity, so a frozen animation can't hide the card */
@keyframes kfxNoticeIn{ from{ transform:translateY(14px) scale(.97) } to{ transform:none } }

.kfx-notice-x{
  position:absolute; top:10px; right:10px; width:30px; height:30px; z-index:1;
  background:none; border:0; color:rgba(242,239,232,.45); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.kfx-notice-x svg{
  width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round;
}
.kfx-notice-x:hover{ color:#f2efe8; }

/* ---- main panel ---- */
.kfx-notice-main{
  flex:1 1 auto; min-width:0; padding:30px 28px 24px; overflow-y:auto;
}
.kfx-notice-kicker{
  margin:0 0 12px; font-size:10.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(242,239,232,.55);
}
.kfx-notice-title{
  margin:0 0 10px; font-family:var(--kx-display,inherit);
  font-size:clamp(24px,4.4vw,30px); font-weight:600; line-height:1.12;
  color:#f2efe8;
}
.kfx-notice-body{ color:rgba(242,239,232,.62); font-size:13.5px; line-height:1.65; }
.kfx-notice-body p{ margin:0 0 10px; }
.kfx-notice-body ul, .kfx-notice-body ol{ margin:0 0 10px; padding-left:20px; }
.kfx-notice-body li{ margin:3px 0; }
.kfx-notice-body a{ color:#e8c876; text-decoration:underline; }
.kfx-notice-body strong{ color:#f2efe8; }
.kfx-notice-body img{ max-width:100%; height:auto; margin:8px 0; }

.kfx-notice-cta{
  display:inline-block; margin-top:10px;
  background:#d4a643; color:#151412; text-decoration:none;
  padding:12px 26px; font-size:13px; font-weight:700;
}
.kfx-notice-cta:hover{ background:#e8c876; }
.kfx-notice-later{
  display:block; margin-top:14px; padding:0; text-align:left;
  background:none; border:0; color:rgba(242,239,232,.4);
  font-size:12px; font-weight:400; cursor:pointer; font-family:inherit;
}
.kfx-notice-later:hover{ color:rgba(242,239,232,.7); }

/* ---- perforated stub (only rendered when the notice has an end date) ---- */
.kfx-notice-stub{
  flex:0 0 106px; border-left:1px dashed rgba(212,166,67,.45);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:18px 8px; text-align:center;
}
.kfx-notice-stub .ks-lbl{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,239,232,.5);
}
.kfx-notice-stub .ks-big{
  font-family:var(--kx-display,inherit); font-size:25px; font-weight:700;
  color:#e8c876; line-height:1.15;
}
.kfx-notice-stub .ks-sep{
  width:22px; height:1px; background:rgba(212,166,67,.4); margin:9px 0;
}
/* perforation notches — colored to sit against the dimmed backdrop */
.kfx-notice-notch{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background:#0b0b0d; border:1px solid rgba(255,255,255,.12);
  right:98px;
}
.kfx-notice-notch.is-top{ top:-9px; }
.kfx-notice-notch.is-bottom{ bottom:-9px; }

@media (max-width:420px){
  .kfx-notice-main{ padding:24px 20px 20px; }
  .kfx-notice-stub{ flex-basis:88px; }
  .kfx-notice-notch{ right:80px; }
}