/* 1. Reset the list to remove default bullets and padding */
ul[class*="is-style-"], 
ol[class*="is-style-"] {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0;
}

/* 2. Create space for the icon */
ul[class*="is-style-"] li, 
ol[class*="is-style-"] li {
  position: relative;
  /* Adjust this padding to control the gap between icon and text */
  padding-left: 1.8rem; 
  margin: 0.25rem 0;
  display: block; /* Ensures it behaves like a normal paragraph */
}

/* 3. Position the Icon */
ul[class*="is-style-"] li::before,
ol[class*="is-style-"] li::before {
  /* This is the key: absolute positioning removes it from the text flow */
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  text-align: center;
  
  /* Styling */
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.4; /* Matches the text's line height for perfect alignment */
}

/* 4. Set the Specific Icons and Colors */

/* Tick */
.is-style-tick-list li::before { 
  content: "✓"; 
  color: var(--wp--preset--color--button); 
}

/* Info */
.is-style-info-list li::before { 
  content: "ℹ"; 
  color: var(--wp--preset--color--primary); 
}

/* Cross */
.is-style-cross-list li::before { 
  content: "✗"; 
  color: var(--wp--preset--color--error); 
}

/* File */
.is-style-file-list li::before { 
  content: "📂"; 
  color: var(--wp--preset--color--primary); 
}

/* Fuzzy */
.is-style-fuzzy .has-overlay-grey-background-color,
.is-style-fuzzy .has-overlay-grey-more-background-color,
.is-style-fuzzy .has-overlay-primary-background-color,
.is-style-fuzzy .has-overlay-primary-more-background-color,
.is-style-fuzzy .has-overlay-black-background-color,
.is-style-fuzzy .has-overlay-black-more-background-color {
	backdrop-filter: blur(5px);
}
/* Header with Tick */
.is-style-tickheader {
  position: relative;
}
.is-style-tickheader:after {
  content: '✔';
  position: absolute;
  display: block;
  top: 50%;
  right: 0%;
  padding: 0 0.7rem;
  line-height: 44px;
  border-radius: 100%;
  aspect-ratio: 1 / 1 !important;
  transform: translateY(-50%);
  background: var(--wp--preset--color--button);
  color: var(--wp--preset--color--base);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
  
}
@media screen and (max-width: 1024px) {
  ul.is-style-tick-list, ol.is-style-tick-list, ul.is-style-info-list, ol.is-style-info-list, ul.is-style-cross-list, ol.is-style-cross-list , ul.is-style-file-list, ol.is-style-file-list {
  }
  ul.is-style-tick-list li, ol.is-style-tick-list li, ul.is-style-info-list li, ol.is-style-info-list li, ul.is-style-cross-list li, ol.is-style-cross-list li, ul.is-style-file-list li, ol.is-style-file-list li {
    margin: 0.25rem 0;
  }
  ul.is-style-tick-list li::before,
  ol.is-style-tick-list li::before,
  ul.is-style-info-list li::before,
  ol.is-style-info-list li::before ,
  ul.is-style-cross-list li::before,
  ol.is-style-cross-list li::before {
    content: "✔";
    color: var(--wp--preset--color--button);
    font-weight: bold;
    font-size: var(--wp--preset--font-size--medium);
    display: inline-block;
  }
}