.is-style-cj-box-orange { --cj-accent: #ff6a00; --cj-bg: rgba(255,106,0,.08); }
.is-style-cj-box-green  { --cj-accent: #09ae4e; --cj-bg: rgba(9,174,78,.08); }
.is-style-cj-box-red    { --cj-accent: #E13011; --cj-bg: rgba(225,48,17,.08); }
.is-style-cj-box-gray   { --cj-accent: #A8B8BF; --cj-bg: rgba(168,184,191,.08); }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) {
  --cj-text: #0f172a;
  --cj-muted: #475569;
  background: var(--cj-bg);
  border-left: 4px solid var(--cj-accent);
  padding: 16px;
  border-radius: 8px;
  margin: 0 0 18px 0;
  color: var(--cj-muted);
  line-height: 1.6;
  font-size: 1rem;
}
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) strong { color: var(--cj-text); }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) > :last-child { margin-bottom: 0; }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) a { color: var(--cj-accent); text-decoration: underline; text-decoration-color: rgba(0,0,0,.15); }
.is-style-cj-box-gray a { color: #3D5866; text-decoration-color: rgba(61,88,102,.3); }
.is-style-cj-box-green a { color: #067434; text-decoration-color: rgba(6,116,52,.3); }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) :is(h2,h3,h4) { margin-top: .25rem; }
.wp-block-group:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) ol,
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) ul { margin: 10px 0 14px; padding-left: 0; list-style: none; counter-reset: cj-counter; }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) li { position: relative; padding-left: 28px; margin-bottom: 8px; line-height: 1.55; color: var(--cj-muted); }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) li:last-child { margin-bottom: 0; }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) ul > li::before { content: ''; position: absolute; left: 8px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--cj-accent); }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) ol > li { counter-increment: cj-counter; }
:is(.is-style-cj-box-orange,.is-style-cj-box-green,.is-style-cj-box-red,.is-style-cj-box-gray) ol > li::before { content: counter(cj-counter); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--cj-accent); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) {
  --promo-green: #09AE4E; --promo-green-dark: #067434; --promo-green-light: #2CC96D;
  --promo-dark: #203540; --promo-text: #26404C; --promo-muted: #59737F; --promo-radius: 14px;
  background: #F5FCF8; border-radius: var(--promo-radius); overflow: hidden; margin: 0 0 24px;
  color: var(--promo-text); line-height: 1.65; font-size: 1rem;
  border: 1px solid rgba(9,174,78,.2); box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.wp-block-group:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) { padding: 0; }
.wp-block-group:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) > :is(.is-layout-flow,.is-layout-constrained,.wp-block-group__inner-container) { padding: 20px 24px 18px; }
p:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) { padding: 20px 24px 18px; }
.wp-block-group:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) > :is(.is-layout-flow,.is-layout-constrained,.wp-block-group__inner-container) > h2:first-child {
  margin: -20px -24px 0; padding: 18px 24px 18px 56px;
  background: linear-gradient(135deg, var(--promo-green-dark) 0%, var(--promo-green) 50%, var(--promo-green-light) 100%);
  color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.35; position: relative;
}
.wp-block-group:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) > :is(.is-layout-flow,.is-layout-constrained,.wp-block-group__inner-container) > h2:first-child::before {
  content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wp-block-group:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) > :is(.is-layout-flow,.is-layout-constrained,.wp-block-group__inner-container) > h2:first-child + p {
  margin: 0 -24px 0; padding: 12px 24px; background: var(--promo-dark); color: #A8B8BF;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wp-block-group:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) > :is(.is-layout-flow,.is-layout-constrained,.wp-block-group__inner-container) > h2:first-child + p code {
  background: linear-gradient(135deg, var(--promo-green), var(--promo-green-light)); color: #fff;
  font-size: 1.1rem; padding: 6px 20px; border-radius: 8px; letter-spacing: .08em;
}
.wp-block-group:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) > :is(.is-layout-flow,.is-layout-constrained,.wp-block-group__inner-container) > h2:first-child + p + * {
  margin-top: 16px;
}
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) :is(h2,h3,h4) { color: var(--promo-dark); margin-top: .25rem; margin-bottom: 12px; font-weight: 700; line-height: 1.3; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) :is(h3,h4) { margin-top: 18px; font-size: 1.05rem; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) strong { color: var(--promo-dark); font-weight: 700; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) p { margin-bottom: 12px; color: var(--promo-text); }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) p:last-child { margin-bottom: 0; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) em { color: var(--promo-muted); font-size: .9em; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) a { color: var(--promo-green-dark); text-decoration: underline; text-decoration-color: rgba(9,174,78,.3); text-underline-offset: 2px; transition: text-decoration-color .2s; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) a:hover { text-decoration-color: var(--promo-green-dark); }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) hr,
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) .wp-block-separator { border: none; border-top: 1px solid rgba(9,174,78,.12); margin: 16px 0; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) code { font-weight: 700; font-size: .88em; background: linear-gradient(135deg, var(--promo-green), var(--promo-green-light)); color: #fff; padding: 1px 8px; border-radius: 6px; letter-spacing: .04em; white-space: nowrap; display: inline-block; line-height: 1.5; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) ol,
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) ul { margin: 10px 0 14px; padding-left: 0; list-style: none; counter-reset: bonus-counter; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) li { position: relative; padding-left: 28px; margin-bottom: 8px; line-height: 1.55; color: var(--promo-text); }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) li:last-child { margin-bottom: 0; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) ul > li::before { content: ''; position: absolute; left: 8px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--promo-green); }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) ol > li { counter-increment: bonus-counter; }
:is(.is-style-cj-box-bonus,.is-style-cj-box-bonus-2) ol > li::before { content: counter(bonus-counter); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--promo-green); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
:is(
  .is-style-cj-box-bonus .is-layout-flow > p:nth-last-child(2),
  .is-style-cj-box-bonus .is-layout-constrained > p:nth-last-child(2),
  .is-style-cj-box-bonus-2 .is-layout-flow > p:nth-last-child(3),
  .is-style-cj-box-bonus-2 .is-layout-constrained > p:nth-last-child(3)
) { margin-top: 16px; margin-bottom: 0; }
:is(
  .is-style-cj-box-bonus .is-layout-flow > p:nth-last-child(2),
  .is-style-cj-box-bonus .is-layout-constrained > p:nth-last-child(2),
  .is-style-cj-box-bonus-2 .is-layout-flow > p:nth-last-child(3),
  .is-style-cj-box-bonus-2 .is-layout-constrained > p:nth-last-child(3)
) a {
  color: var(--promo-green); background: transparent; border: 2px solid var(--promo-green);
  text-decoration: none; padding: 7px 20px 7px 38px; border-radius: 8px;
  font-weight: 600; font-size: .88rem; display: inline-block; position: relative; transition: all .2s;
}
:is(
  .is-style-cj-box-bonus .is-layout-flow > p:nth-last-child(2),
  .is-style-cj-box-bonus .is-layout-constrained > p:nth-last-child(2),
  .is-style-cj-box-bonus-2 .is-layout-flow > p:nth-last-child(3),
  .is-style-cj-box-bonus-2 .is-layout-constrained > p:nth-last-child(3)
) a::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309AE4E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: background .2s;
}
:is(
  .is-style-cj-box-bonus .is-layout-flow > p:nth-last-child(2),
  .is-style-cj-box-bonus .is-layout-constrained > p:nth-last-child(2),
  .is-style-cj-box-bonus-2 .is-layout-flow > p:nth-last-child(3),
  .is-style-cj-box-bonus-2 .is-layout-constrained > p:nth-last-child(3)
) a:hover { background: var(--promo-green); color: #fff; }
:is(
  .is-style-cj-box-bonus .is-layout-flow > p:nth-last-child(2),
  .is-style-cj-box-bonus .is-layout-constrained > p:nth-last-child(2),
  .is-style-cj-box-bonus-2 .is-layout-flow > p:nth-last-child(3),
  .is-style-cj-box-bonus-2 .is-layout-constrained > p:nth-last-child(3)
) a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}
.is-style-cj-box-bonus :is(.is-layout-flow,.is-layout-constrained) > p:last-child {
  margin: 16px -24px -18px; padding: 12px 24px 12px 48px;
  background: rgba(9,174,78,.06); border-top: 1px solid rgba(9,174,78,.12);
  color: var(--promo-muted); font-size: .8rem; line-height: 1.5; position: relative;
}
.is-style-cj-box-bonus :is(.is-layout-flow,.is-layout-constrained) > p:last-child::before {
  content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309AE4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.is-style-cj-box-bonus :is(.is-layout-flow,.is-layout-constrained) > p:last-child em {
  color: var(--promo-muted); font-style: normal; font-size: inherit;
}
.is-style-cj-box-bonus-2 :is(.is-layout-flow,.is-layout-constrained) > :nth-last-child(2) {
  margin: 16px -24px 0; padding: 12px 24px 0px 48px;
  background: rgba(9,174,78,.06); border-top: 1px solid rgba(9,174,78,.12);
  color: var(--promo-dark); font-size: .82rem; font-weight: 700; line-height: 1.4; position: relative;
}
.is-style-cj-box-bonus-2 :is(.is-layout-flow,.is-layout-constrained) > :nth-last-child(2)::before {
  content: ''; position: absolute; left: 20px; top: 14px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309AE4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cline x1='8' y1='10' x2='16' y2='10'/%3E%3Cline x1='8' y1='14' x2='16' y2='14'/%3E%3Cline x1='8' y1='18' x2='12' y2='18'/%3E%3C/svg%3E") no-repeat center / contain;
}
.is-style-cj-box-bonus-2 :is(.is-layout-flow,.is-layout-constrained) > ul:last-child {
  margin: 0 -24px -18px; padding: 4px 24px 12px 48px;
  background: rgba(9,174,78,.06); list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px;
}
.is-style-cj-box-bonus-2 :is(.is-layout-flow,.is-layout-constrained) > p:last-child {
  margin: 0 -24px -18px; padding: 4px 24px 12px 48px;
  background: rgba(9,174,78,.06); font-size: .78rem; color: var(--promo-muted); line-height: 1.4;
}
.is-style-cj-box-bonus-2 :is(.is-layout-flow,.is-layout-constrained) > ul:last-child > li {
  padding-left: 0; margin-bottom: 0; font-size: .78rem; color: var(--promo-muted); line-height: 1.4;
}
.is-style-cj-box-bonus-2 :is(.is-layout-flow,.is-layout-constrained) > ul:last-child > li::before {
  content: '·'; margin-right: 8px; color: var(--promo-green); font-weight: 700; position: static; width: auto; height: auto; border-radius: 0; background: none;
}
@media (max-width: 600px) {
  .is-style-cj-box-bonus-2 :is(.is-layout-flow,.is-layout-constrained) > ul:last-child {
    flex-direction: column; gap: 6px;
  }
}