/* A scoped addition; existing tariffs, checkout and sale countdown stay untouched. */
body.night-city #color-bonus {
  --cb-paper: #f4f4e9;
  --cb-acid: #f3ee16;
  --cb-cyan: #00e1ef;
  position: relative;
  margin: 0;
  padding: clamp(44px, 6vw, 88px) 24px;
  background: #071114;
  color: var(--cb-paper);
  font-family: Onest, Arial, sans-serif;
  border-top: 1px solid #334345;
  border-bottom: 1px solid #334345;
  scroll-margin-top: 24px;
}
#color-bonus *, #color-bonus *::before, #color-bonus *::after { box-sizing: border-box; }
#color-bonus .color-bonus__inner { max-width: 1200px; margin: 0 auto; }
#color-bonus .color-bonus__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.3vw, 64px); align-items: center; }
#color-bonus .color-bonus__photo { margin: 0; align-self: center; min-width: 0; overflow: hidden; background: #102b30; }
#color-bonus .color-bonus__photo img { display: block; width: 100%; height: auto; min-height: 0; object-fit: contain; object-position: 50% 45%; transition: transform 900ms cubic-bezier(.16,1,.3,1); }
#color-bonus .color-bonus__content { min-width: 0; }
#color-bonus h2 { margin: 0 0 28px; max-width: 22ch; color: var(--cb-paper); font-family: 'Russo One', Onest, sans-serif; font-size: clamp(23px, 2.35vw, 34px); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
#color-bonus h2 em { color: var(--cb-acid); font-style: normal; }
#color-bonus h2 strong { display: block; margin-top: 13px; color: var(--cb-acid); font-size: clamp(48px, 5.15vw, 74px); font-weight: 400; line-height: 1.07; letter-spacing: -.025em; white-space: nowrap; }
#color-bonus .color-bonus__topics { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
#color-bonus .color-bonus__topics li { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 13px; color: var(--cb-paper); font-size: 17px; font-weight: 650; line-height: 1.5; }
#color-bonus .color-bonus__topics li::before { content: ''; width: 6px; height: 6px; margin-top: .57em; background: var(--cb-cyan); }
#color-bonus .color-bonus__description { margin-top: 25px; padding-top: 22px; border-top: 1px solid #334345; }
#color-bonus .color-bonus__description p { max-width: 65ch; margin: 0 0 14px; color: #c4d1d0; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
#color-bonus .color-bonus__description p:last-child { margin-bottom: 0; }
#color-bonus .color-bonus__enroll { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px 32px; margin-top: 36px; padding-top: 32px; border-top: 1px solid #334345; }
#color-bonus .color-bonus__invitation { flex: 1 1 290px; }
#color-bonus .color-bonus__invitation p { max-width: 25ch; margin: 0 0 8px; font-size: 23px; font-weight: 750; line-height: 1.25; }
#color-bonus .color-bonus__note { display: block; max-width: 44ch; color: #b7cac9; font-size: 13px; line-height: 1.5; }
#color-bonus .color-bonus__timer { display: flex; align-items: flex-start; gap: 11px; }
#color-bonus [hidden] { display: none !important; }
#color-bonus .color-bonus__unit { display: flex; flex-direction: column; align-items: center; width: 61px; }
#color-bonus .color-bonus__unit b { color: var(--cb-acid); font-size: 44px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.02em; }
#color-bonus .color-bonus__unit small { margin-top: 5px; color: #b7cac9; font-size: 12px; line-height: 1.2; }
#color-bonus .color-bonus__colon { color: #8ea7a5; font-size: 34px; line-height: 1.28; }
#color-bonus .color-bonus__button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; padding: 17px 24px; background: var(--cb-acid); color: #071114; font-size: 14px; font-weight: 850; line-height: 1.4; text-transform: uppercase; text-decoration: none; border: 0; border-radius: 0; transition: background 200ms, transform 200ms; }
#color-bonus .color-bonus__button svg { flex: 0 0 auto; }
#color-bonus .color-bonus__button:hover { background: var(--cb-cyan); transform: translateY(-2px); color: #071114; text-decoration: none; }
#color-bonus .color-bonus__button:focus-visible { outline: 3px solid var(--cb-cyan); outline-offset: 5px; }
#color-bonus .color-bonus__button:active { transform: translateY(0); }
#color-bonus .color-bonus__fallback { flex: 1 0 100%; color: #c4d1d0; margin: 0; font-size: 14px; }
#color-bonus[data-expired] .color-bonus__unit b { color: #b7cac9; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { #color-bonus .color-bonus__photo:hover img { transform: scale(1.025); } }
@media (max-width: 899px) {
  #color-bonus .color-bonus__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; }
  #color-bonus h2 { font-size: 24px; }
  #color-bonus h2 strong { font-size: 51px; }
  #color-bonus .color-bonus__topics li { font-size: 15px; }
  #color-bonus .color-bonus__description p { font-size: 15px; }
}
@media (max-width: 680px) {
  body.night-city #color-bonus { padding: 40px 24px; }
  #color-bonus .color-bonus__layout { display: flex; flex-direction: column; gap: 26px; }
  #color-bonus .color-bonus__content { display: contents; }
  #color-bonus h2 { order: 0; align-self: flex-start; max-width: 24ch; margin: 0; font-size: clamp(23px, 5.7vw, 32px); }
  #color-bonus h2 strong { font-size: clamp(49px, 12.7vw, 68px); }
  #color-bonus .color-bonus__photo { order: 1; width: 100%; aspect-ratio: 4 / 5; }
  #color-bonus .color-bonus__photo img { min-height: 0; }
  #color-bonus .color-bonus__topics { order: 2; align-self: stretch; }
  #color-bonus .color-bonus__topics li { font-size: 16px; }
  #color-bonus .color-bonus__description { order: 3; margin-top: 0; padding-top: 22px; }
  #color-bonus .color-bonus__description p { font-size: 16px; }
  #color-bonus .color-bonus__enroll { gap: 24px; margin-top: 28px; padding-top: 26px; }
  #color-bonus .color-bonus__invitation { flex-basis: 100%; }
  #color-bonus .color-bonus__invitation p { font-size: 23px; max-width: 22ch; }
  #color-bonus .color-bonus__timer { justify-content: flex-start; gap: 15px; }
  #color-bonus .color-bonus__button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #color-bonus *, #color-bonus *::before, #color-bonus *::after { animation: none !important; transition: none !important; } }