/* --- Final Corrected Version: Encoded SVG Icon --- */

/* Main list container */
.pink-checkmark-list {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Individual list items */
.pink-checkmark-list li {
  position: relative !important;
  padding-left: 45px !important;
  margin-bottom: 20px !important;
  line-height: 1.5 !important;
}

/* Creates the icon using a properly encoded, embedded SVG */
.pink-checkmark-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 28px !important;
  height: 28px !important;
  
  /* This SVG code is now encoded to pass the CSS validator */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23F8B4C8'/%3E%3Cpath d='M9 16l6 6 11-11' stroke='%23FFFFFF' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  
  background-size: contain;
  background-repeat: no-repeat;
}



/* --- UPDATED Recommended Plan Banner CSS --- */

/* This is our main container for the white card */
.recommended-plan {
  position: relative; /* This is still needed */
  padding-top: 50px; /* Creates space for the banner INSIDE the container */
  border: 2px solid #c881be; /* Border color */
  border-radius: 12px; /* Rounded corners */
  background: #fff; /* Ensures a white background */
}

/* This creates the banner and positions it at the top of the container */
.recommended-plan::before {
  content: 'Recommended';
  position: absolute; /* Positions it relative to the container above */
  top: 0;
  left: 0;
  right: 0;
  background-color: #c881be; /* Banner background color */
  color: #ffffff; /* Banner text color */
  padding: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  
  /* This makes the banner only have rounded corners at the top */
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}


/* --- Pill-Shaped Pricing Toggle Switch --- */

/* 1. Style the main container (the grey pill background) */
.pricing-toggle-tabs .elementor-tabs-wrapper {
  background-color: #f0f0f5; /* This is the grey background of the toggle */
  border-radius: 30px; /* This makes it pill-shaped */
  display: inline-flex; /* Makes the container fit the content */
  padding: 5px;
  border: 1px solid #e0e0e0;
}

/* 2. Style the text labels */
.pricing-toggle-tabs .elementor-tab-title {
  padding: 10px 25px;
  color: #8a8a8a; /* Text color for the INACTIVE tab */
  border: none !important;
  background: none !important;
  transition: all 0.3s ease; /* This creates the smooth sliding effect */
}

/* 3. Style the ACTIVE tab (the white slider) */
.pricing-toggle-tabs .elementor-tab-title.elementor-active {
  background-color: #ffffff !important; /* White background for the active "switch" */
  border-radius: 30px; /* Makes the active part pill-shaped */
  color: #333333; /* Darker text color for the ACTIVE tab */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 4. Hide the default border on the content area below the toggle */
.pricing-toggle-tabs .elementor-tabs-content {
  border: none;
  padding-top: 20px; /* Adds space between the toggle and your pricing info */
}