/* PPP List Styles Pro v1.3.1 - Single vs Two-Column with plain Red X */
/* Colors */
:root{ --bullet-blue:#1B5377; --bullet-green:#2E7D32; --bullet-red:#E53935; }

/* Base spacing */
[class*="is-style-ppp-"]{ list-style:none; padding-left:0; margin:0; }
[class*="is-style-ppp-"] li{ position:relative; margin:8px 0; padding-left:34px; }

/* --- SINGLE ICON RULES (also applied to -2col variants) --- */

/* Helper macro-like approach: we duplicate selectors to include both single and -2col so icons render in 2-col styles */
.is-style-ppp-tick li::before,
.is-style-ppp-tick-2col li::before{
  content:""; position:absolute; left:0; top:5px; width:20px; height:20px;
  border:2px solid var(--bullet-blue); border-radius:50%;
}
.is-style-ppp-tick li::after,
.is-style-ppp-tick-2col li::after{
  content:""; position:absolute; left:6px; top:11px; width:10px; height:6px;
  border-left:2px solid var(--bullet-blue); border-bottom:2px solid var(--bullet-blue);
  transform:rotate(-45deg);
}

.is-style-ppp-check-heavy li::before,
.is-style-ppp-check-heavy-2col li::before{ content:"✔"; position:absolute; left:2px; top:0; color:var(--bullet-blue); font-weight:700; font-size:18px; line-height:1; }

.is-style-ppp-check-green li::before,
.is-style-ppp-check-green-2col li::before{ content:"✔"; position:absolute; left:2px; top:0; color:var(--bullet-green); font-weight:700; font-size:18px; line-height:1; }

/* Plain Red X */
.is-style-ppp-x-red li::before,
.is-style-ppp-x-red-2col li::before{ content:"✖"; position:absolute; left:2px; top:0; color:var(--bullet-red); font-weight:700; font-size:18px; line-height:1; }

/* Arrow / Chevron / Caret */
.is-style-ppp-arrow li::before,
.is-style-ppp-arrow-2col li::before{ content:"➤"; position:absolute; left:2px; top:0; color:var(--bullet-blue); font-weight:700; }
.is-style-ppp-chevron li::before,
.is-style-ppp-chevron-2col li::before{ content:"❯"; position:absolute; left:3px; top:0; color:var(--bullet-blue); font-weight:700; }
.is-style-ppp-caret li::before,
.is-style-ppp-caret-2col li::before{ content:"▸"; position:absolute; left:4px; top:0; color:var(--bullet-blue); font-weight:700; }

/* Stars & shapes */
.is-style-ppp-star li::before,
.is-style-ppp-star-2col li::before{ content:"★"; position:absolute; left:2px; top:0; color:var(--bullet-blue); font-size:18px; line-height:1; }
.is-style-ppp-square li::before,
.is-style-ppp-square-2col li::before{ content:"■"; position:absolute; left:3px; top:0; color:var(--bullet-blue); }
.is-style-ppp-square-outline li::before,
.is-style-ppp-square-outline-2col li::before{ content:"□"; position:absolute; left:3px; top:0; color:var(--bullet-blue); }
.is-style-ppp-circle li::before,
.is-style-ppp-circle-2col li::before{ content:"●"; position:absolute; left:4px; top:0; color:var(--bullet-blue); }
.is-style-ppp-circle-outline li::before,
.is-style-ppp-circle-outline-2col li::before{ content:"○"; position:absolute; left:4px; top:0; color:var(--bullet-blue); }
.is-style-ppp-diamond li::before,
.is-style-ppp-diamond-2col li::before{ content:"◆"; position:absolute; left:3px; top:0; color:var(--bullet-blue); }
.is-style-ppp-diamond-outline li::before,
.is-style-ppp-diamond-outline-2col li::before{ content:"◇"; position:absolute; left:3px; top:0; color:var(--bullet-blue); }
.is-style-ppp-plus li::before,
.is-style-ppp-plus-2col li::before{ content:"+"; position:absolute; left:6px; top:0; color:var(--bullet-blue); font-weight:800; font-size:18px; line-height:1; }
.is-style-ppp-dash li::before,
.is-style-ppp-dash-2col li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--bullet-blue); font-weight:700; }
.is-style-ppp-bolt li::before,
.is-style-ppp-bolt-2col li::before{ content:"⚡"; position:absolute; left:2px; top:0; color:var(--bullet-blue); }
.is-style-ppp-triangle li::before,
.is-style-ppp-triangle-2col li::before{ content:"▲"; position:absolute; left:4px; top:0; color:var(--bullet-blue); }
.is-style-ppp-triangle-outline li::before,
.is-style-ppp-triangle-outline-2col li::before{ content:"△"; position:absolute; left:4px; top:0; color:var(--bullet-blue); }
.is-style-ppp-play li::before,
.is-style-ppp-play-2col li::before{ content:"▶"; position:absolute; left:2px; top:0; color:var(--bullet-blue); }
.is-style-ppp-dot li::before,
.is-style-ppp-dot-2col li::before{ content:"•"; position:absolute; left:6px; top:0; color:var(--bullet-blue); font-size:22px; line-height:1; }

/* Number badges (circle, blue) */
.is-style-ppp-number-badge,
.is-style-ppp-number-badge-2col{ counter-reset: pppnum; }
.is-style-ppp-number-badge li,
.is-style-ppp-number-badge-2col li{ counter-increment: pppnum; padding-left:46px; }
.is-style-ppp-number-badge li::before,
.is-style-ppp-number-badge-2col li::before{
  content: counter(pppnum); position:absolute; left:0; top:0; width:28px; height:28px;
  border-radius:999px; background:var(--bullet-blue); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* Number badges (square, blue) */
.is-style-ppp-number-square,
.is-style-ppp-number-square-2col{ counter-reset: pppnumS; }
.is-style-ppp-number-square li,
.is-style-ppp-number-square-2col li{ counter-increment: pppnumS; padding-left:46px; }
.is-style-ppp-number-square li::before,
.is-style-ppp-number-square-2col li::before{
  content: counter(pppnumS); position:absolute; left:0; top:0; width:28px; height:28px;
  border-radius:6px; background:var(--bullet-blue); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* --- TWO-COLUMN LAYOUT BEHAVIOR (applies columns only) --- */
.is-style-ppp-2col,
.is-style-ppp-tick-2col,
.is-style-ppp-check-green-2col,
.is-style-ppp-x-red-2col,
.is-style-ppp-number-badge-2col,
.is-style-ppp-number-square-2col,
.is-style-ppp-arrow-2col,
.is-style-ppp-chevron-2col,
.is-style-ppp-caret-2col,
.is-style-ppp-star-2col,
.is-style-ppp-square-2col,
.is-style-ppp-square-outline-2col,
.is-style-ppp-circle-2col,
.is-style-ppp-circle-outline-2col,
.is-style-ppp-diamond-2col,
.is-style-ppp-diamond-outline-2col,
.is-style-ppp-plus-2col,
.is-style-ppp-dash-2col,
.is-style-ppp-bolt-2col,
.is-style-ppp-triangle-2col,
.is-style-ppp-triangle-outline-2col,
.is-style-ppp-play-2col,
.is-style-ppp-dot-2col{
  column-count:2; column-gap:24px;
}
@media (max-width:800px){
  .is-style-ppp-2col,
  .is-style-ppp-tick-2col,
  .is-style-ppp-check-green-2col,
  .is-style-ppp-x-red-2col,
  .is-style-ppp-number-badge-2col,
  .is-style-ppp-number-square-2col,
  .is-style-ppp-arrow-2col,
  .is-style-ppp-chevron-2col,
  .is-style-ppp-caret-2col,
  .is-style-ppp-star-2col,
  .is-style-ppp-square-2col,
  .is-style-ppp-square-outline-2col,
  .is-style-ppp-circle-2col,
  .is-style-ppp-circle-outline-2col,
  .is-style-ppp-diamond-2col,
  .is-style-ppp-diamond-outline-2col,
  .is-style-ppp-plus-2col,
  .is-style-ppp-dash-2col,
  .is-style-ppp-bolt-2col,
  .is-style-ppp-triangle-2col,
  .is-style-ppp-triangle-outline-2col,
  .is-style-ppp-play-2col,
  .is-style-ppp-dot-2col{
    column-count:1;
  }
}
/* Keep items intact across columns */
.is-style-ppp-2col li,
.is-style-ppp-tick-2col li,
.is-style-ppp-check-green-2col li,
.is-style-ppp-x-red-2col li,
.is-style-ppp-number-badge-2col li,
.is-style-ppp-number-square-2col li,
.is-style-ppp-arrow-2col li,
.is-style-ppp-chevron-2col li,
.is-style-ppp-caret-2col li,
.is-style-ppp-star-2col li,
.is-style-ppp-square-2col li,
.is-style-ppp-square-outline-2col li,
.is-style-ppp-circle-2col li,
.is-style-ppp-circle-outline-2col li,
.is-style-ppp-diamond-2col li,
.is-style-ppp-diamond-outline-2col li,
.is-style-ppp-plus-2col li,
.is-style-ppp-dash-2col li,
.is-style-ppp-bolt-2col li,
.is-style-ppp-triangle-2col li,
.is-style-ppp-triangle-outline-2col li,
.is-style-ppp-play-2col li,
.is-style-ppp-dot-2col li{ break-inside: avoid; }