/* ---------- THEME COLOURS ---------- */
.wpfs-form--inline {
  
  width: 100%!important;
}

:root {
  --cspp-accent: #18ff9d;  /* bright green */
  --cspp-bg-card: #ffffff;
  --cspp-bg-featured: #1c1850;
  --cspp-text-dark: #0f1326;
  --cspp-text-mid:  #6c7294;
  --cspp-text-light:#b9bed4;
  --cspp-grey-btn:  #8a8faa;
}

/* ---------- LAYOUT ---------- */
.cspp-wrapper        { max-width: 1280px; margin: 0 auto; padding: 4rem 1rem; font-family: 'Inter', sans-serif; color: var(--cspp-text-dark); }
.cspp-table          { display: grid; gap: 0rem; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.cspp-card           { background: var(--cspp-bg-card); border-radius: 18px; padding: 2.5rem 2rem 3rem; display: flex; flex-direction: column; justify-content: flex-start; }
.cspp-vip.is-featured{ background: var(--cspp-bg-featured); color:#fff; position: relative; }
.cspp-vip .features  { color: #e6e8f5; }
.cspp-vip .price     { color:#fff; }
.cspp-vip .old-price { color:#9fa3d5; }
.cspp-vip .badge     { position:absolute; top:-14px; right:50%; transform:translateX(50%); background:#433b95; color:#fff; font-size:.65rem; letter-spacing:.05em; padding:.25rem .75rem; border-radius:14px; }

.cspp-card header    { margin-bottom: 1.5rem; text-align:center; }
.price               { font-size: 2.25rem; font-weight:700; line-height:1.1; margin:0; }
.price .period       { font-size: .85rem; font-weight:500; margin-left:.15em; }
.old-price           { text-decoration: line-through; font-size: 1rem; margin:.25rem 0 .75rem; }

.plan-title          { font-size: 1rem; font-weight:700; letter-spacing:.05em; margin:0; }
.plan-title small    { font-weight:500; color:var(--cspp-text-mid); margin-left:.25em; }

/* feature list */
.features            { list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.features li::before { content:"✔"; color:var(--cspp-accent); margin-right:.5rem; }

/* BUTTONS */
.cspp-btn            { display:inline-block; text-align:center; padding:.9rem 1.8rem; border-radius:36px; font-size: .95rem; font-weight:600; line-height:1; transition:background .25s ease, color .25s ease; }
.cspp-btn--primary   { background:var(--cspp-accent); color:#15152e; }
.cspp-btn--primary:hover{ filter:brightness(1.12); }
.cspp-btn--secondary { background:var(--cspp-grey-btn); color:#fff; }
.cspp-btn--secondary:hover{ filter:brightness(1.12); }

/* ---------- INCLUSIVE GRID ---------- */
.cspp-inclusive      { margin-top:5rem; position: relative; text-align: left; }

/* New Inclusive Header Styles */
.cspp-inclusive-header {
  margin-bottom: 2.5rem; /* Space below header */
  position: relative;
  padding-left: 1rem; /* Indent to align with cards if needed */
}

.cspp-inclusive-title-large {
  display: block;
  font-size: 6rem; /* Adjust as needed for "fat" look */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.07); /* Very transparent white */
  line-height: 1;
  text-transform: uppercase;
  position: relative; /* Changed from absolute for simpler flow */
  top: 10px; /* Nudge down to allow small text to overlap correctly */
}

.cspp-inclusive-title-small {
  display: block;
  font-size: 1.75rem; /* Matches old h3 */
  font-weight: 600;
  color: #fff; /* White text */
  margin-top: -2.5rem; /* Pull up to overlap, adjust as needed */
  position: relative; 
  z-index: 1;
}

/* Remove old h3 style */
.cspp-inclusive h3{
 display:none;
}

.cspp-inclusive-grid{
  max-width:960px;
  margin:0 auto;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1.25rem;
}
.cspp-inclusive-grid li{
  background:#151432;
  color:#fff;
  border-radius: 1rem; /* Slightly larger radius ~16px */
  padding: 2rem 1rem; /* Increased padding */
  font-size:.9rem; /* Slightly larger font */
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content to top */
}

/* Icon Styles */
.cspp-inclusive-icon {
  background-color: var(--cspp-accent); /* Green accent */
  width: 60px; /* Adjust size as needed */
  height: 60px;
  border-radius: 0.75rem; /* Rounded square */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem; /* Space between icon and text */
}

/* Placeholder for actual icon (SVG, font-icon) */
.cspp-inclusive-icon .cs-icon {
  color: #111729; /* Dark color for icon itself if it's a font */
  font-size: 2rem; /* Example size */
}

.cspp-inclusive-text {
  line-height: 1.3;
}

/* ---------- TOGGLE (optional JS hook) ---------- */
.cspp-toggle         { margin-bottom:2.5rem; text-align:center; }
.cspp-toggle button  { background:none; border:none; font-weight:600; font-size:1rem; padding:.75rem 1.5rem; color:var(--cspp-text-light); }
.cspp-toggle button.active,
.cspp-toggle button:hover{ color:#fff; position:relative; }
.cspp-toggle button.active::after,
.cspp-toggle button:hover::after{ content:""; height:2px; width:100%; background:var(--cspp-accent); position:absolute; left:0; bottom:0; }

/* ---------- RESPONSIVE TWEAKS ---------- */
@media (min-width: 1024px){
  .cspp-table { grid-template-columns: repeat(3, 1fr); }
  .cspp-vip.is-featured { transform: translateY(-24px); }
}

.cspp-wrapper{
  --accent:#15ffa3;
  
  color:#fff;
  padding:4rem 1rem 5rem;
  font-family:-apple-system,BlinkMacSystemFont,'Inter',Roboto,Helvetica,Arial,sans-serif;
  text-align:center;
}

/* Banner Styling */
.cspp-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem; /* Keep existing margin */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.cspp-banner-content {
  text-align: left; /* Align text to left */
}

.cspp-banner .cspp-discount{
  font-size:4.5rem; /* Existing size */
  font-weight:700; /* Existing weight */
  color:var(--cspp-accent); /* Use accent color */
  margin:0 0 0.25rem; /* Adjust margin */
  line-height: 1.1;
}
.cspp-banner .cspp-title{
  font-size:2rem; /* Smaller size */
  font-weight: 400; /* Regular weight */
  color: var(--cspp-text-light); /* Lighter text color */
  margin:0 0 0.75rem;
  
}

.cspp-banner .cspp-description {
  font-size: 1rem;
  color: var(--cspp-text-mid);
  margin: 0;
}

.cspp-toggle{
  display:inline-flex;
  gap:.5rem;
  /* margin-bottom: 3rem; Remove margin-bottom here, added to banner */
  background-color: #25233a; /* Dark background for the toggle container */
  padding: 0.3rem; /* Padding around buttons */
  border-radius: 9999px; /* Pill shape */
  border: 1px solid #3a375e; /* Subtle border */
}
.cspp-toggle-btn{
  background:#25233a; /* Match container background */
  color:#fff;
  padding:.5rem 1.5rem;
  border:none;
  border-radius:9999px;
  font-size:.9rem;
  cursor:pointer;
  line-height:1;
  transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}
.cspp-toggle-btn.is-active{
  background: #fff; /* White background for active */
  color:#111729; /* Dark text for active */
}

.cspp-table{
  display:flex;
  flex-wrap:wrap;
  gap:0; /* Removed gap between cards */
  justify-content:center;
}

.cspp-card{
  background:#fff;
  color:#111729;
  max-width:300px;
  width:100%;
  border-radius:1.25rem;
  padding:2rem 1.5rem;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.cspp-card.is-highlighted{
  background:#1b1654;
  color:#fff;
  transform:scale(1.05);
  position: relative;
}

.cspp-price{
  font-size:2rem;
  font-weight:700;
  margin:0 0 .25rem;
  opacity:.9;
}
.cspp-after{
  font-size:.875rem;
  font-weight:400;
  opacity:.8;
}
.cspp-plan{
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 0.5rem; /* Reduced bottom margin */
  opacity:.9;
}

.cspp-features{
  list-style:none;
  margin:0 0 1.5rem; /* Adjusted bottom margin for space above button */
  padding:0;
  text-align:left;
  font-size:.9rem;
}
.cspp-features li{
  display:flex;
  align-items:flex-start;
  margin-bottom:.5rem;
}
.cspp-icon{
  color:var(--accent);
  margin-right:.5rem;
  font-weight:700;
}

.cspp-btn{
  display:block;
  background:var(--accent);
  color:#111729;
  padding:.75rem 1.5rem;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  transition:transform .15s ease-in-out;
  width:100%;
  margin-top: auto; /* Push button to the bottom */
}
.cspp-card:not(.is-highlighted) .cspp-btn{
  background:#8a8faa;
  color:#fff;
}
.cspp-btn:hover{
  transform:translateY(-2px);
}

/* CTA Container for shortcode buttons */
.cspp-cta-container {
  margin-top: auto; /* Push this container to the bottom of the card */
  width: 100%;     /* Ensure it takes full width, similar to .cspp-btn */
}

/* Most Popular Badge */
.cspp-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #433b95;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Original Price (Strikethrough) */
.cspp-original-price {
  font-size: 1rem;
  color: #6c7294;
  margin: -0.25rem auto 0.6rem; /* Added auto for left/right margin */
  opacity: .9;
  position: relative;
  display: block; /* Changed from inline-block to block for centering */
  max-width: 150px; /* Limit width of the element */
  text-align: center; /* Center the text within the block */
}

.cspp-original-price::before,
.cspp-original-price::after {
  content: '';
  position: absolute;
  width: 103%; /* Slightly wider than text to ensure full cross */
  height: 2px; /* Thickness of the cross lines */
  background-color: #d9534f; /* Red color for the cross */
  top: 50%;
  left: -1.5%; /* Center the slightly wider line */
}

.cspp-original-price::before {
  transform: translateY(-50%) rotate(-10deg); /* Adjust angle for desired X */
}

.cspp-original-price::after {
  transform: translateY(-50%) rotate(10deg); /* Adjust angle for desired X */
}

.cspp-card.is-highlighted .cspp-original-price {
  color: #b9bed4; /* Reverted from lighter red */
}

.cspp-card.is-highlighted .cspp-original-price::before,
.cspp-card.is-highlighted .cspp-original-price::after {
  background-color: #ff7f7b; /* Lighter red for cross on dark background */
}

.cspp-original-price .cspp-currency,
.cspp-original-price .cspp-after {
   font-size: 0.8em;
   opacity: .8;
}

/* Responsive */
@media(max-width:768px){
  .cspp-card.is-highlighted{
    transform:none;
  }
  /* Stack banner content and toggle vertically */
  .cspp-banner {
    flex-direction: column;
    align-items: flex-start; /* Align items to the start */
    gap: 1.5rem; /* Add gap between content and toggle */
  }
  .cspp-banner-content {
    margin-right: 0; /* Remove right margin */
  }
  .cspp-toggle {
    align-self: flex-start; /* Align toggle itself to the start */
  }
}

/* Styling for FullStripe Submit Buttons */
#submit--MGRiYmJ,
#submit--NjFmY2E,
#submit--MTAzOWF,
#submit--OGQ3NTk {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease-in-out, background-color .25s ease, color .25s ease;
  width: 100%;
  margin-top: auto; /* Assuming this is still desired from .cspp-btn */
  border: none; /* Remove default button border */
  cursor: pointer;
  font-size: .95rem; /* Match .cspp-btn */
  line-height: 1; /* Match .cspp-btn */
  text-align: center;
}

/* Highlighted card FullStripe buttons (VIP) */
.cspp-card.is-highlighted #submit--MGRiYmJ,
.cspp-card.is-highlighted #submit--MTAzOWF {
  background-color: var(--cspp-accent);
  color: #111729;
}

/* Non-highlighted card FullStripe buttons (Elite) */
.cspp-card:not(.is-highlighted) #submit--NjFmY2E,
.cspp-card:not(.is-highlighted) #submit--OGQ3NTk {
  background-color: #8a8faa;
  color: #fff;
}

/* Hover effect for all FullStripe buttons */
#submit--MGRiYmJ:hover,
#submit--NjFmY2E:hover,
#submit--MTAzOWF:hover,
#submit--OGQ3NTk:hover {
  transform: translateY(-2px);
  filter: brightness(1.12); /* Consistent hover brightness effect */
}

/* =========== DARK THEME PRICING TABLE =========== */
.cspp-dark-wrapper {
  
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', Roboto, Helvetica, Arial, sans-serif;
  padding: 3rem 1rem 5rem;
  max-width: 100%;
}

/* Header Styles */
.cspp-dark-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
  flex-wrap: wrap;
  gap: 2rem;
}

.cspp-dark-header-content {
  max-width: 780px;
}

.cspp-dark-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

.cspp-dark-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.cspp-dark-highlight {
  color: #18ff9d;
}

.cspp-dark-disclaimer {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Toggle Buttons */
.cspp-dark-toggle {
  padding: 0.25rem;
  background-color: #0f1122; /* Darker background for toggle container */
  border-radius: 9999px;
  display: flex;
}

.cspp-dark-toggle-btn {
  background: transparent;
  border: none;
  color: #b9bed4; /* Lighter text for inactive button */
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cspp-dark-toggle-btn.is-active {
  background-color: #fff;
  color: #0a0b14;
}

/* Pricing Table */
.cspp-dark-table {
  display: flex;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cspp-dark-card {
  background-color: #1a1c30;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 480px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cspp-dark-card.is-popular {
  border: 2px solid #18ff9d;
}

.cspp-dark-badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #433b95; /* Adjusted badge color */
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
}

/* Card Header */
.cspp-dark-card-header {
  margin-bottom: 1.5rem;
  text-align: left;
}

.cspp-dark-plan-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cspp-dark-plan-subtitle {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

/* Price Display */
.cspp-dark-price-container {
  margin-bottom: 1rem;
  text-align: left;
}

.cspp-dark-price {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}

.cspp-dark-currency {
  font-size: 1.5rem;
  vertical-align: top;
}

.cspp-dark-period {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.cspp-dark-original-price {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.25rem 0;
  position: relative;
  display: inline-block;
  max-width: 150px;
  text-align: left;
}

.cspp-dark-original-price::before,
.cspp-dark-original-price::after {
  content: '';
  position: absolute;
  width: 103%;
  height: 2px;
  background-color: #d9534f;
  top: 50%;
  left: -1.5%;
}

.cspp-dark-original-price::before {
  transform: translateY(-50%) rotate(-10deg);
}

.cspp-dark-original-price::after {
  transform: translateY(-50%) rotate(10deg);
}

.cspp-dark-discount {
  color: #18ff9d;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.25rem 0 1rem;
}

/* Features List */
.cspp-dark-features {
  list-style-type: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  text-align: left;
}

.cspp-dark-features li {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.cspp-dark-check {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: #18ff9d;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.cspp-dark-check::before {
  content: '';
  position: absolute;
  width: 0.25rem;
  height: 0.5rem;
  border-right: 2px solid #0a0b14;
  border-bottom: 2px solid #0a0b14;
  transform: rotate(45deg);
  top: 0.2rem;
  left: 0.35rem;
}

/* CTA Button & Container */
.cspp-dark-cta-container {
  margin-top: auto;
  width: 100%;
}

.cspp-dark-btn {
  display: block;
  width: 100%;
  background-color: #18ff9d;
  color: #0a0b14;
  text-align: center;
  padding: 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.cspp-dark-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cspp-dark-card:not(.is-popular) .cspp-dark-btn {
  background-color: #6c7294; /* Muted lavender/grey for Elite button */
  color: #fff;
}

/* Styling for FullStripe Submit Buttons in Dark Theme */
.cspp-dark-card.is-popular #submit--MGRiYmJ,
.cspp-dark-card.is-popular #submit--MTAzOWF {
  background-color: #18ff9d;
  color: #0a0b14;
  width: 100%;
  padding: 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cspp-dark-card:not(.is-popular) #submit--NjFmY2E,
.cspp-dark-card:not(.is-popular) #submit--OGQ3NTk {
  background-color: #6c7294; /* Muted lavender/grey for Elite button */
  color: #fff;
  width: 100%;
  padding: 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cspp-dark-card.is-popular #submit--MGRiYmJ:hover,
.cspp-dark-card.is-popular #submit--MTAzOWF:hover,
.cspp-dark-card:not(.is-popular) #submit--NjFmY2E:hover,
.cspp-dark-card:not(.is-popular) #submit--OGQ3NTk:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .cspp-dark-header {
    flex-direction: column;
    align-items: center;
  }
  
  .cspp-dark-header-content {
    text-align: center;
  }
  
  .cspp-dark-toggle {
    margin-top: 1rem;
  }
  
  .cspp-dark-card {
    max-width: 100%;
  }
  
  .cspp-dark-title {
    font-size: 2rem;
  }
}

/* Panel that holds both cards */
.cspp-dark-panel{
  background-color: #ffffff;
  padding-left: 0px;
  border-radius: 1.75rem;
  padding: 0px;
  max-width: 1024px;
  margin: 0 auto;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

/* Adjust table inside panel */
.cspp-dark-panel .cspp-dark-table {
  padding: 0;
  margin: 0;
  gap: 2rem;
}

/* Card default (non-popular) becomes light */
.cspp-dark-card {
  background-color: #ffffff; /* override earlier dark */
  color: #0f1326;
  border: 0px solid #e5e7eb;
}

/* Elements inside non-popular card adjust colors */
.cspp-dark-card:not(.is-popular) .cspp-dark-plan-subtitle,
.cspp-dark-card:not(.is-popular) .cspp-dark-period,
.cspp-dark-card:not(.is-popular) .cspp-dark-original-price {
  color: #6c7294;
}

/* Popular card styles remain dark */
.cspp-dark-card.is-popular {
  background-color: #1b1654;
  color: #ffffff;
  border: none;
}

.cspp-dark-card.is-popular .cspp-dark-plan-subtitle,
.cspp-dark-card.is-popular .cspp-dark-period,
.cspp-dark-card.is-popular .cspp-dark-original-price {
  color: rgba(255,255,255,0.75);
}

/* Discount text same for both but adjust contrast */
.cspp-dark-card.is-popular .cspp-dark-discount {
  color: #18ff9d;
}

/* Non-popular button already gray; ensure border none */
.cspp-dark-card:not(.is-popular) .cspp-dark-btn{
  background-color: #8a8faa;
  color: #fff;
}

/* Tick mark colors inside light card */
.cspp-dark-card:not(.is-popular) .cspp-dark-check {
  background-color: #18ff9d;
}

.cspp-dark-card:not(.is-popular) .cspp-dark-check::before {
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}