/* =========================
   FLASHY THEME (ACCENT #30e87a)
   Updated to match above HTML/CSS look
   (✅ no class names changed)
   ========================= */

.cps { max-width: 1340px; margin: 0 auto; color:#e9eef5; }
.cps * { box-sizing: border-box; }

/* ---------- Phase Tabs ---------- */
.cps-phase-tabs { display:flex; gap:14px; padding: 10px 0 16px; }

.cps-tab{
  position:relative;
  flex: 1;
  display:flex; align-items:center; gap:12px;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
  font-weight: 950;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  overflow:hidden;
}

/* shimmer */
.cps-tab:after{
  content:"";
  position:absolute;
  inset:-60% -80%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.10), transparent 60%);
  transform: translateX(-40%) rotate(10deg);
  opacity:0;
  pointer-events:none;
}
.cps-tab:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  background: none;
}
.cps-tab:hover:after{
  opacity:1;
  animation: cps-shine 1.1s ease;
}
@keyframes cps-shine{
  0% { transform: translateX(-40%) rotate(10deg); }
  100% { transform: translateX(40%) rotate(10deg); }
}

.cps-tab .num{
  width:24px; height:24px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 950;
  box-shadow: 0 0 0 6px rgba(48,232,122,.07);
}

.cps-tab.is-active{
  border-color: rgba(48,232,122,.50);
  background:
    radial-gradient(700px 180px at 50% 0%, rgba(48,232,122,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow:
    0 0 0 1px rgba(48,232,122,.18),
    0 18px 55px rgba(0,0,0,.60);
}
.cps-tab.is-active .num{
  border-color: rgba(48,232,122,.70);
  box-shadow: 0 0 0 7px rgba(48,232,122,.10), 0 0 22px rgba(48,232,122,.22);
}

.cps-card-kicker{
  width:28px; height:28px; border-radius:10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

/* ---------- Row ---------- */
.cps-row { display:flex; gap:14px; align-items:stretch; margin-bottom: 12px; }

/* ---------- Stage tabs (if used) ---------- */
.cps-stage-tabs { display:flex; gap:10px; }
.cps-stage{
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,0.10);
  cursor:pointer;
  font-weight: 950;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.cps-stage:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.05);
}
.cps-stage.is-active{
  outline: none;
  border-color: rgba(48,232,122,.50);
  box-shadow: 0 0 0 1px rgba(48,232,122,.16);
}

/* ---------- Banner ---------- */
.cps-banner{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 950;
  gap: 10px;
}
.cps-banner .code{
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(48,232,122,.45);
  color: rgba(48,232,122,.95);
  background: rgba(48,232,122,.06);
}

/* ---------- Sizes ---------- */
.cps-sizes{
  display:flex; gap:10px;
  justify-content: space-between;
  align-items:center;
  padding: 10px 0 26px;
  flex-wrap:wrap;
}

.cps-size{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width: 90px; padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  opacity: .62;
  color: #ffffff;
  background: transparent;
  border: none;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.cps-size:hover{
  border-color: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
    /*background: none;*/
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85), inset 0 3px 10px rgba(255, 255, 255, 0.1), inset 0 -10px 18px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  /*transform: translateY(-2px);
  opacity: .85;
  filter: brightness(1.05);*/
}

.cps-size .dot{
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cps-size.is-active
 {
    border-width: 1px;
    border-color: rgb(48 232 122 / 50%);
    border-style: solid;
    background: radial-gradient(700px 180px at 50% 0%, rgba(48, 232, 122, .22), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
    box-shadow: 0 0 0 1px rgba(48, 232, 122, .18), 0 18px 55px rgba(0, 0, 0, .60);
}

.cps-size.is-active{ opacity: 1; }
.cps-size.is-active .dot{
  border-color: rgba(255,255,255,.92);
  transform: scale(1.08);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.35),
    0 0 0 5px rgba(48,232,122,.18),
    0 0 28px rgba(48,232,122,.22);
}

/* ---------- Panels ---------- */
.cps-panels{ display:grid; grid-template-columns: 860px 1fr 0px; gap:14px; }
@media (max-width: 1025px) { .cps-panels { grid-template-columns: 700px 1fr 0px; gap:14px; } }
@media (max-width: 980px) { .cps-panels { grid-template-columns: 1fr; } }

/* Left panel */
.cps-panel.cps-left{
  border-radius: 18px;
  background:
    radial-gradient(650px 260px at 50% 0%, rgba(48,232,122,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06));
  border: 1px solid rgba(255,255,255,.10);
  padding: 16px;
  box-shadow: 0 22px 70px rgba(0,0,0,.60);
  position:relative;
  overflow:hidden;
}
.cps-panel.cps-left:before{
  content:"";
  position:absolute;
  inset:-40% -50%;
  background: radial-gradient(closest-side, rgba(48,232,122,.14), transparent 60%);
  filter: blur(20px);
  opacity:.45;
  pointer-events:none;
}

.cps-left .top{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.cps-left .big{ font-weight:950; font-size:16px; letter-spacing:.2px; position:relative; z-index:1; }

.cps-left .tag{
  display:inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(250px 60px at 30% 40%, rgba(48,232,122,.12), transparent 62%),
    rgba(255,255,255,.03);
  opacity: .95;
  font-weight: 950;
  margin: 12px 0 10px;
  position:relative; z-index:1;
}

.cps-left .title{
  font-weight:950;
  font-size:16px;
  margin: 10px 0 12px;
  position:relative; z-index:1;
}
.cps-left .note{
  opacity:.80;
  border-top:1px solid rgba(255,255,255,0.10);
  padding-top:12px;
  /*display:flex; justify-content:space-between; gap:10px;*/
  position:relative; z-index:1;
}

.cps-left .code-line{ margin-top: 10px; font-weight: 950; position:relative; z-index:1; }
.cps-left .code-line span{
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(48,232,122,.45);
  color: rgba(48,232,122,.95);
  background: rgba(48,232,122,.06);
}

.cps-left .price{
  font-weight:950;
  font-size:34px;
  color: rgba(48,232,122,.98);
  display:flex; gap:10px; align-items:baseline;
  margin-top:10px;
  text-shadow: 0 0 26px rgba(48,232,122,.18);
  position:relative; z-index:1;
}
.cps-left .old{
  opacity:.45;
  text-decoration: line-through;
  font-size: 18px;
  color: #fff;
}

/* Mid list (legacy, keep clean) */
.cps-mid .mid-title{ font-weight:950; margin-bottom: 10px; }
.cps-mid .list{ border-top:1px solid rgba(255,255,255,0.10); }
.cps-mid .row{
  display:flex; justify-content:space-between; gap:12px;
  padding: 12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.cps-mid .label{ font-weight:900; color: rgba(255,255,255,.82); }
.cps-mid .val{ font-weight:950; color: rgba(255,255,255,.94); }

/* Right (if used) */
.cps-right h3{ margin:0 0 12px; font-weight:950; }
.cps-right .inc{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cps-right .item{ border-top:1px solid rgba(255,255,255,0.08); padding-top: 10px; }
.cps-right .k{ opacity:.75; font-weight:900; margin-bottom:4px; }
.cps-right .v{ font-weight:950; }

/* ---------- Stage Cards ---------- */
.cps-cards{
  display:flex;
  gap:18px;
  align-items:stretch;
}

.cps-card{
  position:relative;
  width:100%;
  border-radius:18px;
  padding:18px 18px 16px;
  background:
    radial-gradient(900px 340px at 50% 0%, rgba(48,232,122,.35), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.62);
  cursor:pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  overflow:hidden;
}

/* glow layer */
.cps-card:before{
  content:"";
  position:absolute;
  inset:-60% -60%;
  background: radial-gradient(closest-side, rgba(48,232,122,.35), transparent 62%);
  filter: blur(18px);
  opacity:.35;
  pointer-events:none;
  transform: translate(-8%, -6%);
  transition: opacity .22s ease;
}

.cps-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.16);
  filter: brightness(1.05);
}
.cps-card:hover:before{ opacity:.55; }

.cps-card.is-active{
  border-color: rgba(48,232,122,.55);
  box-shadow:
    0 0 0 1px rgba(48,232,122,.18),
    0 28px 90px rgba(0,0,0,.74);
}

/* Badge (if used) */
.cps-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:#30e87a;
  color:#04110a;
  font-weight:950;
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  display:flex;
  gap:8px;
  align-items:center;
  box-shadow:0 10px 26px rgba(48,232,122,.28);
}
.cps-badge-i{
  width:16px;height:16px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:rgba(0,0,0,.22);
  font-size:11px;
  line-height:1;
}

/* Card header */
.cps-card-head{ text-align:center; padding:8px 0 10px; }
.cps-card-kicker{
  margin:auto;
  display:grid;
  place-items:center;
  font-weight:950;
  width:28px; height:28px; border-radius:999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 24px rgba(48,232,122,.14);
}
.cps-card-amount{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:.2px;
  text-shadow: 0 0 18px rgba(48,232,122,.10);
}

.cps-divider{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:14px 0;
}

/* Steps */
.cps-steps{ display:grid; gap:6px; }
.cps-step-row{
  display:flex;
  justify-content:flex-start;
  gap:14px;
  color:rgba(255,255,255,.72);
  font-weight:900;
  font-size:13px;
}
.cps-step-l{ width:70px; opacity:.65; }
.cps-step-v{ color:rgba(255,255,255,.86); }

/* Features */
.cps-features{ display:grid; gap:14px; padding:4px 0 10px; }
.cps-feature-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#fff;
  font-weight:900;
}
.cps-feature-l{ color:rgba(255,255,255,.82); }
.cps-feature-v{ color:rgba(255,255,255,.94); text-shadow: 0 0 18px rgba(255,255,255,.06); }

/* Price inside card (optional) */
.cps-price{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  padding:6px 0 10px;
}
.cps-price-icon{
  width:18px;height:18px;
  display:inline-grid;
  place-items:center;
  border-radius:6px;
  background: rgba(48,232,122,.16);
  color: #30e87a;
  font-weight:950;
  font-size:12px;
}
.cps-price-now{
  color:#30e87a;
  font-size:24px;
  font-weight:950;
  text-shadow: 0 0 18px rgba(48,232,122,.14);
}
.cps-price-old{
  color:rgba(255,255,255,.50);
  text-decoration:line-through;
  font-weight:900;
}

/* Left CTA link */
.cps-left .cta{
  margin-top: 18px;
  display:block;
  text-align:center;
  padding: 14px 14px;
  border-radius: 12px;
  text-decoration:none;
  font-weight:950;
  border:1px solid rgba(48,232,122,.45);
  color: rgba(48,232,122,.98);
  background:
    radial-gradient(400px 90px at 50% 0%, rgba(48,232,122,.16), transparent 60%),
    rgba(0,0,0,.30);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cps-left .cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(48,232,122,.14);
  filter: brightness(1.06);
}

@media (max-width: 426px) {

 .cps-panels { grid-template-columns: 1fr; } 

 .cps-phase-tabs { flex-direction: column; }
 .cps-sizes { justify-content: start; }
 .cps-cards { flex-direction: column; }

 #cps-left { text-align: center; }
 .cps-left .top { justify-content: center; }
 .cps-left .price { justify-content: center; }

}