/* ============================================================
   SHUFFLRR BLOB + CLOUD — blob-cloud.css  v3.2
   Purple / violet brand theme. All corners sharp (border-radius: 0).
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
.shuf-bc-wrap {
  --shuf-purple:        #7C3AED;
  --shuf-purple-dark:   #5B21B6;
  --shuf-purple-light:  #EDE9FE;
  --shuf-purple-mid:    #8B5CF6;
  --shuf-purple-border: #C4B5FD;
 
  --shuf-orange:        #FF5300;
  --shuf-orange-light:  #FFF7ED;

  --shuf-navy:          #1E1B4B;
  --shuf-body:          #4B5563;
  --shuf-border:        #E5E7EB;
  --shuf-bg-light:      #F5F3FF;
  --shuf-white:         #FFFFFF;
  --shuf-off-white:     #FDFEFF;

  --shuf-success:       #15803D;
  --shuf-success-bg:    #DCFCE7;
  --shuf-error:         #DC2626;
  --shuf-error-bg:      #FEF2F2;

  --radius:     0px;
  --transition: all 0.2s ease;

  --sp1:  8px;
  --sp2: 16px;
  --sp3: 24px;
  --sp4: 32px;
}


.shuf-bc-hero-img {
  width: 56px;      /* Adjust if needed */
  height: 56px;
  object-fit: contain;
  display: block;
}

/* ── Scoped reset ─────────────────────────────────────────── */
.shuf-bc-wrap,
.shuf-bc-wrap * {
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   OUTER GRID
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap {
  display: grid !important;
  grid-template-columns: 1fr 350px !important;
  grid-template-areas: "main summary" !important;
  gap: var(--sp4) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 0 32px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--shuf-navy) !important;
  align-items: start !important;
  background: var(--shuf-white) !important;
}
.shuf-bc-topbar .shuf-ct-badge {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--shuf-orange) !important;
  border: 1.5px solid var(--shuf-orange) !important;
  border-radius: var(--radius) !important;
  padding: 3px 10px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  background: var(--shuf-white) !important;
  line-height: 1.4 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-main    { grid-area: main;    min-width: 0; }
.shuf-bc-wrap .shuf-bc-summary { grid-area: summary; }

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-topbar {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp2) !important;
  margin-bottom: 0 !important;
}

.shuf-bc-wrap .shuf-bc-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--shuf-purple) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: var(--transition) !important;
}
.shuf-bc-wrap .shuf-bc-back:hover { color: var(--shuf-purple-dark) !important; }
.shuf-bc-wrap .shuf-bc-back i     { font-size: 14px !important; color: var(--shuf-purple) !important; }

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */

.shuf-bc-wrap .shuf-bc-hero{
    display:flex !important;
    align-items:center !important;
    gap:15px !important;
    width:100% !important;
    margin-bottom:var(--sp4) !important;
}

.shuf-bc-wrap .shuf-bc-hero-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 32px !important;
}

.shuf-bc-wrap .shuf-bc-hero-icon i{
    font-size:32px !important;
    color:var(--shuf-purple) !important;
    line-height:1 !important;
}

.shuf-bc-wrap .shuf-bc-hero-content{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:100% !important;
}

.shuf-bc-wrap h1.shuf-bc-title,
.shuf-bc-wrap .shuf-bc-title{
    font-size:32px !important;
    font-weight:800 !important;
    margin:0 0 4px !important;
    color:var(--shuf-navy) !important;
    line-height:1.2 !important;
    font-family:'Plus Jakarta Sans',sans-serif !important;
}

.shuf-bc-wrap .shuf-bc-divider{
    width:100% !important;
    border:none !important;
    border-top:2px solid var(--shuf-orange) !important;
    margin:0 0 6px !important;
}

.shuf-bc-wrap .shuf-bc-subtitle{
    font-size:14px !important;
    color:var(--shuf-body) !important;
    font-weight:500 !important;
    margin:0 !important;
    font-family:'Plus Jakarta Sans',sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 0px !important;
}
.shuf-bc-wrap .shuf-bc-section-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-section > p,
.shuf-bc-wrap .shuf-bc-section p {
  /* margin: 0 0 var(--sp1) !important; */
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--shuf-body) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-section-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.shuf-bc-wrap .shuf-bc-section-icon i {
  font-size: 18px !important;
  color: var(--shuf-purple) !important;
  line-height: 1 !important;
}

.shuf-bc-wrap .shuf-bc-accent { color: var(--shuf-purple) !important; }

/* ══════════════════════════════════════════════════════════
   AFTER TRIAL — HEADER ROW (heading outside / controls inside)
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-after-trial-header--outside {
  display: block !important;
  margin-bottom: 4px !important;
}

.shuf-bc-wrap .shuf-bc-after-trial-header--inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 8px !important;
}

/* Team Size section (Blob) — remove the old outer container look */
.shuf-bc-wrap #shuf-bc-team-size-section .shuf-bc-after-trial-header--inner {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.shuf-bc-wrap .shuf-bc-after-trial-header h4 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════
   TIER DROPDOWN  — inside after-trial header
══════════════════════════════════════════════════════════ */

.shuf-bc-rate-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

.shuf-bc-old-rate{
    color:var(--shuf-body) !important;
    text-decoration:line-through;
    text-decoration-thickness:2px;
    text-decoration-color:var(--shuf-body) !important;;
    font-size:14px;
}

.shuf-bc-new-rate{
    color:var(--shuf-navy) !important;
    font-weight:700;
}

#shuf-bc-sum-rate{
    color:var(--shuf-navy) !important;
    font-weight:700;
    font-size:14px;
}
.shuf-bc-wrap .shuf-bc-tier-dropdown-wrap {
  width: 150px !important;
  min-width: 150px !important;
  position: relative !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.shuf-bc-wrap .shuf-bc-tier-custom-select {
  position: relative !important;
  width: 100% !important;
}

.shuf-bc-wrap .shuf-bc-tier-selected {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 44px !important;
  background: var(--shuf-white) !important;
  color: var(--shuf-navy) !important;
  border: 1.5px solid var(--shuf-purple-mid) !important;
  padding: 0 12px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: all 0.2s ease !important;
}

.shuf-bc-wrap .shuf-bc-tier-selected span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.shuf-bc-wrap .shuf-bc-tier-selected:hover {
  border-color: var(--shuf-purple-mid) !important;
}

.shuf-bc-wrap .shuf-bc-tier-selected.open {
  border-color: var(--shuf-purple) !important;
/*   box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important; */
}

.shuf-bc-wrap .shuf-bc-tier-arrow {
  transition: transform 0.25s ease !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  color: #94A3B8 !important;
  width: 16px !important;
  height: 16px !important;
}

.shuf-bc-wrap .shuf-bc-tier-arrow.open {
  transform: rotate(180deg) !important;
  color: var(--shuf-purple) !important;
}

.shuf-bc-wrap .shuf-bc-tier-options {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 0 !important;
  width: 100% !important;
  background: var(--shuf-white) !important;
  border: 1px solid #dadada !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
  border-radius: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px !important;
  z-index: 99999 !important;
}

.shuf-bc-wrap .shuf-bc-tier-options.open {
  display: block !important;
}

.shuf-bc-wrap .shuf-bc-tier-options li {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--shuf-navy) !important;
  background: var(--shuf-white) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border-radius: 0 !important;
}

.shuf-bc-wrap .shuf-bc-tier-options li:hover {
  background: var(--shuf-purple) !important;
  color: var(--shuf-white) !important;
}

.shuf-bc-wrap .shuf-bc-tier-options li.active {
  background: var(--shuf-purple) !important;
  color: var(--shuf-white) !important;
}

.shuf-bc-input-wrap .shuf-bc-input-status.error  { color: var(--shuf-error) !important; }

/* ══════════════════════════════════════════════════════════
   CUSTOM NOTE (50+ tier)
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-custom-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  background: #FAF5FF !important;
  border: 1px solid var(--shuf-purple-border) !important;
  font-size: 14px !important;
  color: var(--shuf-navy) !important;
  line-height: 1.5 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  margin-top: 4px !important;
}
.shuf-bc-wrap .shuf-bc-custom-note i {
  color: var(--shuf-purple) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  margin-top: 4px !important;
}

/* ══════════════════════════════════════════════════════════
   AFTER TRIAL PRICE CARD
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-after-trial {
  background: var(--shuf-bg-light) !important;
  border: 1px solid var(--shuf-purple-border) !important;
  padding: 18px 20px !important;
  margin-bottom: 0 !important;
}

.shuf-bc-wrap .shuf-bc-after-trial > p {
  margin: 0 0 0px !important;
  font-size: 12px !important;
  color: var(--shuf-body) !important;
  line-height: 1.5 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.shuf-bc-wrap .shuf-bc-price-highlight {
  display: flex !important;
  margin-top: 0 !important;
  align-items: flex-start !important;
  gap: var(--sp1) !important;
  padding: 18px 18px !important;
  background: var(--shuf-white) !important;
  border: 1px solid var(--shuf-border) !important;
}
.shuf-bc-wrap .shuf-bc-price-tag {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--shuf-purple-light) !important;
  flex-shrink: 0 !important;
}
.shuf-bc-wrap .shuf-bc-price-tag i    { font-size: 20px !important; color: var(--shuf-purple) !important; }
.shuf-bc-wrap .shuf-bc-price-content  { flex: 1 !important; min-width: 0 !important; }

.shuf-bc-wrap .shuf-bc-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  /* margin-bottom: 3px !important; */
  flex-wrap: wrap !important;
}
.shuf-bc-wrap .shuf-bc-big-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-per-user {
  font-size: 14px !important;
  color: var(--shuf-navy) !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-start-note {
  font-size: 14px !important;
  color: var(--shuf-body) !important;
  /* margin: 6px 0 0 !important; */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-free { color: var(--shuf-success) !important; }

.shuf-bc-wrap .shuf-bc-team-note {
  margin-top: 12px !important;
}

.shuf-bc-wrap .shuf-bc-card {
  border: 1px solid var(--shuf-border) !important;
  padding: 18px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp1) !important;
  background: var(--shuf-white) !important;
  transition: border-color 0.2s ease !important;
}

.shuf-bc-wrap .shuf-bc-card-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--shuf-purple-light) !important;
  flex-shrink: 0 !important;
}

.shuf-bc-wrap .shuf-bc-card-icon i {
  font-size: 20px !important;
  color: var(--shuf-purple) !important;
  line-height: 1 !important;
}

#shuf-bc-trial-body {
  flex: 0 1 280px !important;
}

.shuf-bc-wrap .shuf-bc-card-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.shuf-bc-wrap .shuf-bc-card-body > strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  display: block !important;
  /* margin-bottom: 4px !important; */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.shuf-bc-wrap .shuf-bc-card-body p {
  /* margin: 3px 0 0 !important; */
  font-size: 14px !important;
  color: var(--shuf-navy) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.shuf-bc-wrap #shuf-bc-after-trial-block.shuf-bc-price-highlight {
  align-items: center !important;
}

.shuf-bc-wrap .shuf-bc-checks {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: var(--shuf-navy) !important;
  flex-shrink: 0 !important;
}

.shuf-bc-wrap .shuf-bc-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.shuf-bc-wrap .shuf-bc-check i {
  font-size: 14px !important;
  color: var(--shuf-purple) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* ══════════════════════════════════════════════════════════
   TRIAL SECTION
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-trial-section {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: var(--sp4) !important;
}
.shuf-bc-wrap .shuf-bc-trial-left       { min-width: 0 !important; flex: 1 !important; }
.shuf-bc-wrap .shuf-bc-trial-left p {
  font-size: 14px !important;
  color: var(--shuf-body) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-trial-badges {
  display: flex ;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
.shuf-bc-wrap .shuf-bc-trial-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  background: var(--shuf-purple-light) !important;
  border: 1px solid var(--shuf-purple-border) !important;
  color: var(--shuf-navy) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-trial-badge i { font-size: 14px !important; color: var(--shuf-purple) !important; flex-shrink: 0 !important; }

/* Input wrapper — shared company-form.css */
.shuf-bc-wrap .shuf-bc-input-status.checking { color: var(--shuf-body)   !important; }
.shuf-bc-wrap .shuf-bc-input-status.ok        { color: var(--shuf-success) !important; }
.shuf-bc-wrap .shuf-bc-input-status.taken     { color: var(--shuf-error)   !important; }

/* Payment box — shared form-layout.css */
.shuf-bc-wrap .shuf-bc-tab-panel        { display: none !important; }
.shuf-bc-wrap .shuf-bc-tab-panel.active { display: block !important; }

.shuf-bc-wrap .card-logo {
  height: 28px !important;
  min-width: 44px !important;
  border: 1px solid var(--shuf-border) !important;
  border-radius: 4px !important;
  background: var(--shuf-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 5px !important;
  overflow: hidden !important;
}
.shuf-bc-wrap .card-logo img { height: 18px !important; width: auto !important; display: block !important; }

/* Field layout — shared form-layout.css / validation.css */

.shuf-bc-wrap .shuf-bc-stripe-el.shuf-stripe-focus {
  border-color: var(--shuf-purple) !important;
  outline: none !important;
}
.shuf-bc-wrap input:focus {
  border-color: var(--shuf-purple) !important;
  outline: none !important;
/*   box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important; */
}
.shuf-bc-wrap .shuf-bc-bank-note {
  padding: 14px !important;
  border: 1px solid var(--shuf-border) !important;
  background: var(--shuf-bg-light) !important;
  font-size: 13px !important;
  color: var(--shuf-body) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.shuf-bc-wrap .shuf-bc-bank-note i { color: var(--shuf-purple) !important; font-size: 14px !important; flex-shrink: 0 !important; }

/* Card number / brand — shared form-layout.css */

/* ══════════════════════════════════════════════════════════
   ERROR / SUCCESS
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-error {
  background: var(--shuf-error-bg) !important;
  color: var(--shuf-error) !important;
  padding: 10px 14px !important;
  margin: 14px 0 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--shuf-error) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-success {
  display: none ;
  align-items: center !important;
  gap: 8px !important;
  background: var(--shuf-success-bg) !important;
  color: var(--shuf-success) !important;
  padding: 10px 14px !important;
  margin: 14px 0 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--shuf-success) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-success i { color: var(--shuf-success) !important; font-size: 14px !important; }

/* ══════════════════════════════════════════════════════════
   RIGHT COLUMN — ORDER SUMMARY
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-summary {
  position: sticky !important;
  top: 114px !important;
  align-self: start !important;
}
.shuf-bc-wrap .shuf-bc-summary-box {
  border: 2px solid var(--shuf-orange) !important;
  padding: 15px 15px !important;
  background: var(--shuf-white) !important;
}

.shuf-bc-wrap h2.shuf-bc-summary-title,
.shuf-bc-wrap .shuf-bc-summary-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  color: var(--shuf-navy) !important;
  line-height: 1.2 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.shuf-bc-wrap .shuf-bc-summary-product ,
.shuf-bc-wrap p.shuf-bc-summary-product {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 10px !important;
  color: var(--shuf-body) !important;
  line-height: 1.2 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ==========================================================
   BILLING TOGGLE
========================================================== */

.shuf-bc-wrap .shuf-bc-billing-switch-wrap{
    display:none !important;
    align-items:center !important;
    gap:12px !important;
    margin-bottom:18px !important;
    flex-wrap:nowrap !important;
}

.shuf-bc-wrap .shuf-bc-billing-switch-wrap.is-visible{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
}

/* Toggle Box */

.shuf-bc-wrap .shuf-bc-toggle-switch{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;

    

    background:#fff !important;

    flex:0 0 auto !important;
}

/* Labels */

.shuf-bc-wrap .shuf-bc-toggle-label{
    display:flex !important;
    align-items:center !important;

    font-family:'Plus Jakarta Sans',sans-serif !important;
    font-size:14px !important;
    /* Keep weight constant to avoid layout shift ("jerk") when toggling */
    font-weight:700 !important;
    line-height:1 !important;

    color:var(--shuf-body) !important;

    cursor:pointer !important;
    user-select:none !important;
    white-space:nowrap !important;

    transition:color .2s ease !important;
}

.shuf-bc-wrap .shuf-bc-toggle-label.active{
    color:var(--shuf-navy) !important;
    opacity:1 !important;
}
.shuf-bc-wrap .shuf-bc-toggle-label:not(.active){
    opacity:.75 !important;
}

/* Switch */

.shuf-bc-wrap .shuf-bc-switch{
        width:44px !important;
    height:24px !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    outline:none !important;
    background:#E5E7EB !important;
    position:relative !important;
    cursor:pointer !important;
    border-radius:999px !important;
    flex-shrink:0 !important;
    transition:background .3s ease !important;
}

.shuf-bc-switch.yearly{
    background:var(--shuf-purple) !important;
}
/* Thumb */

.shuf-bc-wrap .shuf-bc-switch-thumb{
     position:absolute !important;
    top:3px !important;
    left:3px !important;
    width:18px !important;
    height:18px !important;
    background:#fff !important;
    border-radius:50% !important;
    transition:transform .3s ease !important;
}

/* Yearly */

.shuf-bc-wrap .shuf-bc-switch.yearly .shuf-bc-switch-thumb{
    transform:translateX(20px) !important;
}

/* Save Badge */

.shuf-bc-wrap .shuf-bc-toggle-badge{
	   display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 10px;

    background:#FF5300;
    color:#FFFFFF;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1.3;

    white-space:nowrap;
}
.shuf-bc-wrap .shuf-bc-summary-rows {
  border-top: 1px solid var(--shuf-border) !important;
  padding-top: 14px !important;
  margin-bottom: 14px !important;
}
.shuf-bc-wrap .shuf-bc-summary-row {
  display: flex ;
  justify-content: space-between !important;
  align-items: flex-start !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  margin-bottom: 8px !important;
  gap: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-sum-highlight {
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
}
.shuf-bc-wrap .shuf-bc-included {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 700 !important;
  color: var(--shuf-success) !important;
}
.shuf-bc-wrap .shuf-bc-included i { font-size: 14px !important; color: var(--shuf-success) !important; }
.shuf-bc-wrap .shuf-bc-discount-value {
  font-weight: 700 !important;
  color: var(--shuf-success) !important;
}

.shuf-bc-wrap .shuf-bc-summary-renewal {

  margin-bottom: 12px !important;
}
.shuf-bc-wrap .shuf-bc-renewal-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  gap: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-renewal-price {
  color: var(--shuf-orange) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.shuf-bc-wrap .shuf-bc-renewal-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: var(--shuf-purple-light) !important;
  border: 1px solid var(--shuf-purple-border) !important;
  font-size: 12px !important;
  color: var(--shuf-body) !important;
  line-height: 1.5 !important;
  margin: 0 0 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-renewal-note i      { color: var(--shuf-purple) !important; font-size: 13px !important; flex-shrink: 0 !important; margin-top: 4px !important; }
.shuf-bc-wrap .shuf-bc-renewal-note strong { color: var(--shuf-navy) !important; }

.shuf-bc-wrap .shuf-bc-custom-renewal {
  margin-bottom: 12px !important;
}
.shuf-bc-wrap .shuf-bc-renewal-note--custom {
  margin: 0 0 12px !important;
  background: #FAF5FF !important;
  border-color: var(--shuf-purple-border) !important;
}
.shuf-bc-wrap .shuf-bc-renewal-note--custom i { color: var(--shuf-purple) !important; }

.shuf-bc-wrap .shuf-bc-summary-payment {
  display: flex ;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  color: var(--shuf-navy) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-bc-wrap .shuf-bc-summary-payment .pay-secure {
  display: inline-flex ;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--shuf-body) !important;
}
.shuf-bc-wrap .shuf-bc-summary-payment .pay-secure i { color: var(--shuf-purple) !important; font-size: 12px !important; }

.shuf-bc-wrap .shuf-bc-cta,
.shuf-bc-wrap button.shuf-bc-cta {
  display: inline-flex ;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 24px !important;
  background: var(--shuf-purple) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.25) !important;
  margin-bottom: 0 !important;
}
.shuf-bc-wrap .shuf-bc-cta i         { font-size: 14px !important; line-height: 1 !important; }
.shuf-bc-wrap .shuf-bc-cta:hover,
.shuf-bc-wrap button.shuf-bc-cta:hover {
  background: var(--shuf-purple-dark) !important;
  color: #fff !important;
}
.shuf-bc-wrap .shuf-bc-cta:focus,
.shuf-bc-wrap .shuf-bc-cta:active     { outline: none !important; box-shadow: none !important; background: var(--shuf-purple-dark) !important; }
.shuf-bc-wrap .shuf-bc-cta:disabled {
  background: var(--shuf-purple) !important;
  color: #fff !important;
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
/* ══════════════════════════════════════════════════════════
   STRIPE-STYLE FOOTER (below the primary action button)
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-stripe-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: none !important;
  text-align: center !important;
  font-size: 12px !important;
  color: var(--shuf-body) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.shuf-bc-wrap .shuf-bc-stripe-footer .shuf-bc-stripe-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: var(--shuf-body) !important;
}

.shuf-bc-wrap .shuf-bc-stripe-footer .shuf-bc-stripe-line strong {
  color: var(--shuf-body) !important;
  font-weight: 700 !important;
}

.shuf-bc-wrap .shuf-bc-stripe-footer a {
  color: var(--shuf-body) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.shuf-bc-wrap .shuf-bc-stripe-footer .shuf-bc-stripe-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.shuf-bc-wrap .shuf-bc-stripe-footer .shuf-bc-stripe-icon {
  font-size: 14px !important;
  color: #635BFF !important;
  flex-shrink: 0 !important;
}
.shuf-bc-old-price{
    font-weight:700 !important;
	color: var(--shuf-navy) !important;
}

.shuf-bc-new-price{
    color:var(--shuf-orange) !important;
    font-weight:700 !important;
}
/* Yearly discount row */
#shuf-bc-yearly-discount-row{
    /* Must stay hidden unless explicitly shown (defensive vs shared CSS). */
    display:none !important;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
    border-top:1px solid var(--shuf-border);
    margin-top:6px;
}

#shuf-bc-yearly-discount-row.is-visible{
    display:flex !important;
}

.shuf-bc-wrap #shuf-bc-yearly-discount-row span:last-child{
    font-weight:600 !important;
    color:var(--shuf-body) !important;
    text-align:right !important;
}

.shuf-bc-wrap #shuf-bc-savings{
    color:var(--shuf-orange) !important;
    font-weight:700 !important;
}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .shuf-bc-wrap {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "summary" !important;
    padding: var(--sp3) var(--sp2) !important;
  }
  .shuf-bc-wrap .shuf-bc-summary { position: static !important; width: 100% !important; }
  .shuf-bc-wrap .shuf-bc-trial-section { flex-direction: column !important; }
  .shuf-bc-wrap .shuf-bc-trial-badges  { align-items: flex-start !important; width: 100% !important; }
}

@media (max-width: 768px) {
  .shuf-bc-wrap .shuf-bc-after-trial-header--inner { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .shuf-bc-wrap .shuf-bc-tier-dropdown-wrap { width: 100% !important; }
  .shuf-bc-wrap .shuf-bc-pay-head  { flex-direction: column !important; }
  .shuf-bc-wrap .shuf-bc-card-row  { grid-template-columns: 1fr !important; }
  .shuf-bc-wrap .shuf-bc-hero      { flex-direction: column !important; }
  .shuf-bc-wrap .shuf-bc-card {
    flex-wrap: wrap !important;
    padding: 16px !important;
  }
  .shuf-bc-wrap .shuf-bc-checks {
    flex-basis: 100% !important;
    margin-top: 10px !important;
    padding-left: 60px !important;
  }
  #shuf-bc-trial-body {
    flex: 1 1 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FORCE-HIDE UTILITY
   Declared last on purpose: several elements toggled by JS
   (e.g. .shuf-bc-trial-badges, .shuf-bc-renewal-note) use
   `display: ... !important` for their visible state, so a plain
   jQuery .hide() (inline style, no !important) cannot hide them.
   Tying visibility to this class instead — and keeping the rule
   last in the cascade — guarantees hide always wins.
══════════════════════════════════════════════════════════ */
.shuf-bc-wrap .shuf-bc-force-hide { display: none !important; }
/* Thank You / error: hide all summary children (beats display:!important above) */
.shuf-bc-wrap .shuf-bc-summary-box.shuf-summary-showing-response > *:not(.shuf-checkout-response) {
  display: none !important;
}