/* Christmas Party Nights: event page. Brand fixed: black, #FF0000, white; Comfortaa + Poppins. */
.cpe {
  --red: #ff0000;
  --black: #000;
  --ink: #0b0b0b;
  --white: #fff;
  --soft: rgba(255, 255, 255, .74);
  --line: rgba(255, 255, 255, .16);
  --head: "Comfortaa", sans-serif;
  --body: "Poppins", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
.cpe *, .cpe *::before, .cpe *::after { box-sizing: border-box; }
.cpe a { color: var(--white); text-underline-offset: .2em; }
.cpe a:hover { color: var(--red); }
.cpe :focus-visible { outline: 3px solid var(--white); outline-offset: 3px; border-radius: 2px; }
.cpe img { display: block; max-width: 100%; height: auto; }
.cpe p { margin: 0; }
.cpe-wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.cpe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cpe-ico, .cpe svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#content.cpe h1, #content.cpe h2, #content.cpe h3, #content.cpe h4 { color: var(--white); }
.cpe-h2 {
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: .01em;
  margin: 0 0 .5em; text-wrap: balance;
}
.cpe-h3 { font-family: var(--head); font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin: 0 0 .6em; }

/* Buttons: brand red with large bold text (meets contrast for large text) */
.cpe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 56px; padding: 0 28px; border-radius: 4px; border: 2px solid transparent;
  font-family: var(--body); font-weight: 700; font-size: 19px; line-height: 1; text-decoration: none;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.cpe-btn--primary { background: var(--red); color: var(--white); }
.cpe .cpe-btn--primary:hover { background: var(--white); color: var(--black); }
.cpe-btn--primary:active { transform: translateY(1px); }
.cpe-btn--ghost { border-color: rgba(255, 255, 255, .55); color: var(--white); font-size: 17px; }
.cpe .cpe-btn--ghost:hover { border-color: var(--white); background: var(--white); color: var(--black); }
.cpe-btn--block { width: 100%; }
.cpe-btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- Cover ---------- */
.cpe-cover { position: relative; padding: clamp(28px, 4vw, 64px) 0 clamp(48px, 6vw, 88px); isolation: isolate; }
.cpe-cover__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,.72) 100%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 40%),
    url(/assets/cpn-event/img/ballroom-red-crowd.webp) center 30% / cover no-repeat;
}
.cpe-cover__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cpe-poster { margin: 0; }
.cpe-poster img { width: 100%; border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.cpe-crumbs { display: flex; flex-wrap: wrap; gap: .5em; font-size: 14px; color: var(--soft); margin-bottom: 18px; }
.cpe-crumbs a { color: var(--soft); text-decoration: none; }
.cpe-crumbs a:hover { color: var(--white); text-decoration: underline; }
.cpe-title { margin: 0 0 14px; font-family: var(--head); line-height: 1; }
.cpe-title__show { display: block; font-weight: 700; text-transform: uppercase; font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); letter-spacing: -.01em; }
#content.cpe .cpe-title__sub { display: block; margin-top: .35em; font-weight: 700; color: var(--red); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }
.cpe-venue-line { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--soft); }
.cpe-venue-line .cpe-ico { width: 20px; height: 20px; flex: none; color: var(--red); }

/* Calendar stubs, drawn like the studio's artwork */
.cpe-stubs { display: flex; gap: 14px; margin: 26px 0 24px; }
.cpe-stub {
  width: 108px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: var(--white); color: var(--black); text-align: center; font-family: var(--body);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cpe-stub__mon { display: block; background: var(--red); color: var(--white); font-weight: 700; font-size: 19px; letter-spacing: .06em; padding: 8px 0 6px; text-transform: uppercase; position: relative; }
.cpe-stub__mon::before { content: ""; position: absolute; left: 14px; right: 14px; top: -4px; height: 8px; background: radial-gradient(circle, #5a5a5a 2px, transparent 2.6px) 0 0 / 16px 8px repeat-x; }
.cpe-stub__num { display: block; font-family: var(--head); font-weight: 700; font-size: 46px; line-height: 1; padding-top: 8px; }
.cpe-stub__day { display: block; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 0 10px; }
.cpe-stub:hover { transform: translateY(-4px) rotate(-1.5deg); }
.cpe-stub[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--black), 0 0 0 6px var(--red), 0 14px 30px -12px rgba(0,0,0,.8); }

.cpe-hook { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 52ch; line-height: 1.55; }
.cpe-cover__buy { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.cpe-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 18px; }
.cpe-price__from, .cpe-price__per { color: var(--soft); font-size: 16px; }
.cpe-price__num { font-family: var(--head); font-weight: 700; font-size: clamp(2.4rem, 2rem + 1.4vw, 3.2rem); line-height: 1; }
.cpe-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cpe-assure { margin-top: 14px; font-size: 15px; color: var(--soft); }

/* ---------- The night: one wide menu card on the table ---------- */
.cpe-night { position: relative; padding: clamp(40px, 5vw, 72px) 0; isolation: isolate; }
.cpe-night__table { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.cpe-night__table img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(.45); }
.cpe-night__table::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#000, rgba(0,0,0,.25) 18%, rgba(0,0,0,.25) 82%, #000); }
.cpe-menu {
  display: grid; grid-template-columns: minmax(220px, 2.6fr) minmax(0, 9.4fr); gap: clamp(24px, 3vw, 48px); align-items: center;
  background: var(--ink); padding: clamp(28px, 3.5vw, 48px); border-radius: 2px; position: relative;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.95);
}
.cpe-menu::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--red); outline: 1px solid rgba(255,0,0,.45); outline-offset: 4px; pointer-events: none; }
.cpe-menu__head { text-align: center; position: relative; }
.cpe-menu__logo { margin: 0 auto 10px; width: 150px; }
.cpe-menu__head .cpe-h2 { margin-bottom: .25em; }
.cpe-menu__when { color: var(--soft); font-size: 14px; margin-bottom: 14px; }
.cpe-menu__head .cpe-price { justify-content: center; margin-bottom: 14px; }
.cpe-menu__head .cpe-price__num { font-size: 2.2rem; }
.cpe-courses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.cpe-course { padding: 6px clamp(10px, 1.4vw, 20px); text-align: center; }
.cpe-course + .cpe-course { border-left: 1px dashed rgba(255,255,255,.18); }
.cpe .cpe-suit { width: 24px; height: 24px; margin: 0 auto 10px; fill: var(--red); stroke: none; }
.cpe-course__name { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; margin: 0 0 6px; }
.cpe-course p { color: var(--soft); font-size: 14px; line-height: 1.5; }

/* ---------- Booking ---------- */
.cpe-book { padding: clamp(40px, 5vw, 72px) 0; background: #0d0d0d; border-block: 1px solid rgba(255,0,0,.35); scroll-margin-top: 20px; }
.cpe-book__grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.cpe-step--pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
.cpe-step--pick[hidden] { display: none; }
.cpe-form { background: var(--black); border: 1px solid var(--line); border-radius: 6px; padding: clamp(22px, 3vw, 36px); }
.cpe-field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.cpe-field legend, .cpe-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 10px; padding: 0; }
.cpe-optional { font-weight: 400; color: var(--soft); }
.cpe-choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cpe-choice-col { display: grid; gap: 8px; }
.cpe-choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.cpe-choice:hover { border-color: rgba(255,255,255,.6); }
.cpe-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cpe-choice__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); display: grid; place-items: center; }
.cpe-choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .25s var(--ease); }
.cpe-choice:has(input:checked) { border-color: var(--red); background: rgba(255,0,0,.08); }
.cpe-choice:has(input:checked) .cpe-choice__dot { border-color: var(--red); }
.cpe-choice:has(input:checked) .cpe-choice__dot::after { transform: scale(1); }
.cpe-choice:has(input:focus-visible) { outline: 3px solid var(--white); outline-offset: 2px; }
.cpe-choice__text { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.cpe-choice__main { font-weight: 600; }
.cpe-choice__sub { color: var(--soft); font-size: 14px; }
.cpe-choice__price { font-family: var(--head); font-weight: 700; white-space: nowrap; }

.cpe-stepper { display: inline-flex; align-items: stretch; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; overflow: hidden; }
.cpe-stepper__btn { width: 56px; min-height: 56px; border: 0; background: transparent; color: var(--white); cursor: pointer; display: grid; place-items: center; }
.cpe-stepper__btn svg { width: 22px; height: 22px; stroke-width: 2.2; }
.cpe-stepper__btn:hover { background: rgba(255,255,255,.1); }
.cpe-stepper input { width: 96px; border: 0; border-inline: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--white); text-align: center; font-family: var(--head); font-weight: 700; font-size: 26px; -moz-appearance: textfield; }
.cpe-stepper input::-webkit-outer-spin-button, .cpe-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpe-hint { color: var(--soft); font-size: 14px; margin-top: 8px; }

.cpe-summary { margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cpe-summary > div { display: flex; justify-content: space-between; gap: 16px; }
.cpe-summary dt { color: var(--soft); }
.cpe-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.cpe-summary__total { padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.2); }
.cpe-summary__total dt, .cpe-summary__total dd { color: var(--white); font-weight: 600; }
.cpe-summary__due dt { color: var(--white); font-family: var(--head); font-weight: 700; font-size: 1.15rem; }
.cpe-summary__due dd { font-family: var(--head); font-weight: 700; font-size: 1.9rem; color: var(--red); line-height: 1.1; }
.cpe-form .cpe-btn--block { margin-top: 22px; }

.cpe-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--soft); font: 500 15px var(--body); cursor: pointer; padding: 6px 0; margin-bottom: 14px; }
.cpe-back svg { width: 18px; height: 18px; }
.cpe-back:hover { color: var(--white); }
.cpe-recap { padding: 14px 16px; border-left: 0; background: rgba(255,0,0,.08); border: 1px solid rgba(255,0,0,.45); border-radius: 4px; margin-bottom: 24px; }
.cpe-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cpe-field--wide { grid-column: 1 / -1; }
.cpe-form input:not([type=radio]):not([type=number]), .cpe-form textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.4);
  background: #111; color: var(--white); font: 400 16px var(--body);
}
.cpe-form textarea { min-height: 96px; resize: vertical; }
.cpe-form input:focus, .cpe-form textarea:focus { border-color: var(--white); outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.cpe-form [aria-invalid="true"] { border-color: var(--red) !important; }
.cpe-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; }
.cpe-error { margin-top: 4px; padding: 12px 14px; border-radius: 4px; background: var(--white); color: var(--black); font-weight: 500; }
.cpe-done { text-align: center; padding: 20px 0; outline: none; }
.cpe-done__ico { width: 64px; height: 64px; margin: 0 auto 16px; color: var(--white); background: var(--red); border-radius: 50%; padding: 14px; stroke-width: 2.6; }
.cpe-done p { color: var(--soft); max-width: 44ch; margin: 0 auto 10px; }

.cpe-how { padding-top: 4px; font-size: 15px; }
.cpe-how__steps { margin: 0 0 32px; padding-left: 1.3em; display: grid; gap: 14px; color: var(--soft); }
.cpe-how__steps strong { color: var(--white); font-weight: 600; }
.cpe-how__steps li::marker { color: var(--red); font-family: var(--head); font-weight: 700; }
.cpe-how__call { padding-top: 24px; border-top: 1px solid var(--line); }
.cpe-how__call p { color: var(--soft); margin-bottom: 10px; }
.cpe .cpe-call { display: inline-flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; font-size: 1.6rem; text-decoration: none; }
.cpe-call svg { width: 26px; height: 26px; color: var(--red); }

/* ---------- Video + venue ---------- */
.cpe-watch { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); }
.cpe-watch__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cpe-watch__film { margin: 0; }
.cpe-watch__film figcaption { color: var(--soft); font-size: 14px; margin-top: 10px; }
.cpe-video { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #111; }
.cpe-video img { width: 100%; height: 100%; object-fit: cover; }
.cpe-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cpe-video__play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--red); color: var(--white); cursor: pointer; display: grid; place-items: center; box-shadow: 0 20px 40px -10px rgba(0,0,0,.8); transition: transform .3s var(--ease); }
.cpe-video__play svg { width: 36px; height: 36px; fill: currentColor; stroke: none; transform: translateX(3px); }
.cpe-video:hover .cpe-video__play { transform: scale(1.06); }
.cpe-where .cpe-h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.cpe-where__addr { color: var(--soft); margin-bottom: 8px; }
.cpe-link { font-weight: 600; }
.cpe-also { margin-top: 28px; }
.cpe-also ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cpe-also li { border-bottom: 1px solid var(--line); }
.cpe .cpe-also a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; text-decoration: none; }
.cpe-also__city { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; }
.cpe-also__meta { grid-column: 1; color: var(--soft); font-size: 14px; }
.cpe-also svg { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 22px; height: 22px; color: var(--red); transition: transform .3s var(--ease); }
.cpe .cpe-also a:hover .cpe-also__city { color: var(--red); }
.cpe-also a:hover svg { transform: translateX(4px); }

/* ---------- Mobile sticky bar ---------- */
.cpe-bar { display: none; }

@media (max-width: 960px) {
  .cpe-cover__grid { grid-template-columns: 1fr; }
  .cpe-poster { max-width: 340px; order: 2; }
  .cpe-cover__info { order: 1; }
  .cpe-book__grid, .cpe-watch__grid { grid-template-columns: 1fr; }
  .cpe-menu { grid-template-columns: 1fr; }
  .cpe-courses { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); row-gap: 18px; }
  .cpe-how { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .cpe-how__call { border-top: 0; padding-top: 0; }
}
@media (max-width: 640px) {
  .cpe-wrap { width: calc(100% - 32px); }
  .cpe-stub { width: 96px; }
  .cpe-actions .cpe-btn { flex: 1 1 100%; }
  .cpe-night__table { grid-template-columns: 1fr 1fr; }
  .cpe-courses { grid-template-columns: 1fr; row-gap: 0; }
  .cpe-course { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; text-align: left; padding: 12px 0; }
  .cpe-course + .cpe-course { border-left: 0; border-top: 1px dashed rgba(255,255,255,.18); }
  .cpe .cpe-suit { grid-row: 1 / span 2; margin: 2px 0 0; }
  .cpe-step--pick { grid-template-columns: 1fr; }
  .cpe-how { grid-template-columns: 1fr; }
  .cpe-field-grid { grid-template-columns: 1fr; }
  .cpe-choice-row { grid-template-columns: 1fr; }
  .cpe-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.96); border-top: 1px solid rgba(255,0,0,.5);
    transform: translateY(110%); transition: transform .35s var(--ease);
  }
  .cpe-bar.is-on { transform: none; }
  .cpe-bar__price { font-size: 14px; color: var(--soft); }
  .cpe-bar__price strong { display: block; font-family: var(--head); font-size: 22px; color: var(--white); }
  .cpe-bar .cpe-btn { min-height: 50px; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cpe *, .cpe *::before, .cpe *::after { transition: none !important; animation: none !important; }
}

.cpe-summary > div[hidden] { display: none; }