/* ============================================================
   SHUFFLRR CLOUD TRIAL — cloud-trial.css  v1.2.0 (summary rebuild)
   Font Awesome 7 via cdnjs
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
.shuf-ct-wrap {
  --shuf-orange:         #FF5300;
  --shuf-orange-dark:    #AF3900;
  --shuf-blue:           #0B81FF;
  --shuf-blue-mid:       #3C83F6;
  --shuf-blue-hover:     #2563EB;
  --shuf-blue-dark:      #000130;
  --shuf-navy:           #1E1B4B;
  --shuf-body:           #4B5563;
  --shuf-border:         #E5E7EB;
  --shuf-bg-light:       #F3F8FF;
  --shuf-bg-orange:      #FFF8F5;
  --shuf-white:          #FFFFFF;
  --shuf-off-white:      #FDFEFF;
  --shuf-bg-muted:       #F7F8FC;
  --shuf-success:        #15803D;
  --shuf-success-bg:     #DCFCE7;
  --shuf-success-border: #166534;
  --shuf-error:          #DC2626;
  --shuf-error-bg:       #FEF2F2;
  --radius:              0px;
  --transition:          all 0.2s ease;
  --sp1:  8px;
  --sp2: 16px;
  --sp3: 24px;
  --sp4: 32px;
}



.shuf-ct-hero-img {
  width: 56px;   /* Adjust as needed */
  height: 56px;
  object-fit: contain;
  display: block;
}
/* ── Reset scoped ─────────────────────────────────────────── */
.shuf-ct-wrap,
.shuf-ct-wrap * {
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════
   OUTER GRID
══════════════════════════════════════════════════════════ */
.shuf-ct-wrap {
  display: grid !important;
  grid-template-columns: 1fr 350px !important;
  gap: var(--sp4) !important;
  font-weight: 700 !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;
}

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

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

.shuf-ct-wrap .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 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE TITLE & HERO
══════════════════════════════════════════════════════════ */
.shuf-ct-wrap .shuf-ct-hero {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
  margin-bottom: var(--sp4) !important;
}
.shuf-ct-wrap .shuf-ct-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-ct-wrap .shuf-ct-hero-icon i {
  font-size: 32px !important;
  color: var(--shuf-blue) !important;
  line-height: 1 !important;
}
.shuf-ct-wrap .shuf-ct-hero-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

.shuf-ct-wrap h1.shuf-ct-title,
.shuf-ct-wrap .shuf-ct-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-ct-wrap .shuf-ct-divider {
  border: none !important;
  border-top: 2px solid var(--shuf-orange) !important;
  margin: 0 0 5px !important;
}
.shuf-ct-wrap .shuf-ct-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 & STEP LABELS
══════════════════════════════════════════════════════════ */

.shuf-ct-wrap .shuf-ct-step-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-ct-wrap .shuf-ct-step-num {
  width: 28px !important;
  height: 28px !important;
  background: var(--shuf-blue-dark) !important;
  color: var(--shuf-white) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════ */
.shuf-ct-wrap .shuf-ct-card {
  border: 1px solid var(--shuf-border) !important;
  border-radius: var(--radius) !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-ct-wrap .shuf-ct-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-bg-light) !important;
  flex-shrink: 0 !important;
}

#shuf-trial-body{
    flex: 0 1 280px !important;
}
.shuf-ct-wrap .shuf-ct-card-icon i {
  font-size: 20px !important;
  color: var(--shuf-blue) !important;
  line-height: 1 !important;
}

.shuf-ct-wrap .shuf-ct-card-body { flex: 1 !important; min-width: 0 !important; }
.shuf-ct-wrap .shuf-ct-card-body > strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-ct-wrap .shuf-ct-card-body p strong {
  display: inline !important;
  margin: 0 !important;
}
.shuf-ct-wrap .shuf-ct-card-body p {
  font-size: 14px !important;
  color: var(--shuf-body) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-ct-wrap .shuf-ct-card-body a {
  color: var(--shuf-blue) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.shuf-ct-wrap .shuf-ct-card-body a:hover {
  color: var(--shuf-blue-hover) !important;
  text-decoration: underline !important;
}

/* Checklist */
.shuf-ct-wrap .shuf-ct-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-ct-wrap .shuf-ct-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.shuf-ct-wrap .shuf-ct-check::before { display: none !important; }
.shuf-ct-wrap .shuf-ct-check i {
  font-size: 14px !important;
  color: var(--shuf-blue) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.shuf-ct-wrap .shuf-ct-seats-card { align-items: center !important; }

/* ══════════════════════════════════════════════════════════
   SEAT COUNTER
══════════════════════════════════════════════════════════ */
.shuf-ct-seat-msg{
    font-size:13px;
    line-height:1.6;
    color:#374D65;
    margin-top:3px;
}

.shuf-ct-seat-msg strong{
    color:#05213F;
}

#shuf-ct-team-rate,
#shuf-ct-team-rate .shuf-ct-new-rate{
    color: var(--shuf-navy) !important;
    font-weight: 700 !important;
}

.shuf-ct-seat-note{
    font-size:13px;
    line-height:1.6;
    color:#374D65;
    /* margin-top:3px; */
}

.shuf-ct-wrap .shuf-ct-section{
  margin-bottom: 24px !important;
}

#shuf-ct-team-rate .shuf-ct-old-rate{
  color: var(--shuf-body) !important;
  text-decoration: line-through !important;
  font-weight: 700 !important;
}

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

/* ══════════════════════════════════════════════════════════
   PAYMENT BOX
══════════════════════════════════════════════════════════ */

/* ── Payment tabs ─────────────────────────────────────────── */
.shuf-ct-wrap .shuf-ct-pay-tabs {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.shuf-ct-wrap .shuf-ct-pay-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
  background: var(--shuf-white) !important;
  color: var(--shuf-body) !important;
  border: 1px solid var(--shuf-border) !important;
  border-radius: var(--radius) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all .25s ease !important;
  box-shadow: none !important;
}
.shuf-ct-wrap .shuf-ct-pay-tab i {
  font-size: 13px !important;
  line-height: 1 !important;
  color: inherit !important;
}
.shuf-ct-wrap .shuf-ct-pay-tab:hover {
  border-color: var(--shuf-blue) !important;
  color: var(--shuf-blue) !important;
}
.shuf-ct-wrap .shuf-ct-pay-tab.active {
  background: var(--shuf-blue-mid) !important;
  border-color: var(--shuf-blue-mid) !important;
  color: var(--shuf-white) !important;
}
.shuf-ct-wrap .shuf-ct-pay-tab:focus,
.shuf-ct-wrap .shuf-ct-pay-tab:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Panels */
.shuf-ct-wrap .shuf-ct-tab-panel { display: none !important; }
.shuf-ct-wrap .shuf-ct-tab-panel.active { display: block !important; }

/* Card field grid — layout in shared form-layout.css */

/* Field rows — layout in shared form-layout.css */

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

/* .shuf-ct-wrap .shuf-ct-pw-toggle:hover  { color: var(--shuf-blue) !important; } */

/* Stripe / inputs — shared form-layout.css */
.shuf-ct-wrap .shuf-ct-stripe-el.shuf-stripe-focus {
  border-color: var(--shuf-blue) !important;
  outline: none !important;
}

/* Native inputs — shared form-layout.css */
.shuf-ct-wrap input:focus {
  border-color: var(--shuf-blue) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Card brand logos — layout in shared form-layout.css */
.shuf-ct-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-ct-wrap .card-logo img {
  height: 18px !important;
  width: auto !important;
  display: block !important;
}

/* ── ACH note ─────────────────────────────────────────────── */
.shuf-ct-wrap .shuf-ct-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;
  border-radius: var(--radius) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════
   ERROR / SUCCESS
══════════════════════════════════════════════════════════ */
.shuf-ct-wrap .shuf-ct-error {
  background: var(--shuf-error-bg) !important;
  color: var(--shuf-error) !important;
  padding: 10px 14px !important;
  border-radius: var(--radius) !important;
  margin: 10px 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-ct-wrap .shuf-ct-success {
  background: var(--shuf-success-bg) !important;
  color: var(--shuf-success-border) !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  margin: 10px 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;
  align-items: center !important;
  gap: 8px !important;
}
.shuf-ct-wrap .shuf-ct-success i {
  font-size: 16px !important;
  color: var(--shuf-success) !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   RIGHT COLUMN — ORDER SUMMARY
══════════════════════════════════════════════════════════ */
.shuf-ct-wrap .shuf-ct-summary {
  position: sticky !important;
  top: 114px !important;
  align-self: start !important;
}
.shuf-ct-wrap .shuf-ct-summary-box {
  border: 2px solid var(--shuf-orange) !important;
  border-radius: var(--radius) !important;
  padding: 15px 15px !important;
  background: var(--shuf-white) !important;
}
.shuf-ct-wrap h2.shuf-ct-summary-title,
.shuf-ct-wrap .shuf-ct-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-ct-wrap .shuf-ct-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 (PILL BUTTONS)
══════════════════════════════════════════════════════════ */
.shuf-ct-billing-switch-wrap{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    margin-bottom:18px !important;
    flex-wrap:nowrap !important;
}
.shuf-ct-summary-row span:first-child{
    flex:1;
    min-width:0;
}
.shuf-ct-summary-row span:last-child{
    flex-shrink:0;
    white-space:nowrap;
    text-align:right;
}
.shuf-ct-renewal-row span:first-child{
    flex:1;
    min-width:0;
}
.shuf-ct-renewal-price{
    flex-shrink:0;
    white-space:nowrap;
}

.shuf-ct-toggle-switch{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
   
    background:#fff !important;
   
    flex:0 0 auto !important;
}

.shuf-ct-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-ct-toggle-label.active{
    color:var(--shuf-navy) !important;
    opacity:1 !important;
}
.shuf-ct-toggle-label:not(.active){
    opacity:.75 !important;
}

.shuf-ct-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-ct-switch.yearly{
    background:var(--shuf-blue) !important;
}

.shuf-ct-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;
}
.shuf-ct-switch.yearly .shuf-ct-switch-thumb{
    transform:translateX(20px) !important;
}
.shuf-ct-rate-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}

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

.shuf-ct-new-rate{
    color:var(--shuf-navy);
    font-weight:700;
}
/* Save Badge */
.shuf-ct-billing-switch-wrap .shuf-ct-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-ct-summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

#shuf-ct-discount-label{
    font-size:14px;
    font-weight:700;
    color:var(--shuf-navy);
}

#shuf-ct-savings{
    font-size:14px;
    font-weight:700;
    color:var(--shuf-orange);
}
/* ── Price fade on toggle ──────────────────────────────────── */
#shuf-ct-sum-rate,
#shuf-ct-final-total{
    transition: opacity .15s ease !important;
}
/* ── Summary rows ─────────────────────────────────────────── */
.shuf-ct-wrap .shuf-ct-summary-rows {
  border-top: 1px solid var(--shuf-border) !important;
  padding-top: 14px !important;
  margin-bottom: 14px !important;
}
.shuf-ct-wrap .shuf-ct-summary-row {
  display: flex ;
  justify-content: space-between !important;
  align-items: flex-start !important;
  font-size: 14px !important;
  color: var(--shuf-navy) !important;
  margin-bottom: 8px !important;
  gap: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-ct-wrap .shuf-ct-sum-highlight {
  font-weight: 700 !important;
  color: var(--shuf-navy) !important;
}

/* Cloud Access · Included row */
.shuf-ct-wrap .shuf-ct-included {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 700 !important;
  color: var(--shuf-success) !important;
}
.shuf-ct-wrap .shuf-ct-included i {
  font-size: 14px !important;
  color: var(--shuf-success) !important;
}

.shuf-ct-wrap .shuf-ct-summary-row a {
  color: var(--shuf-blue) ;
  font-size: 14px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  word-break: break-all !important;
  text-align: right !important;
}
.shuf-ct-wrap .shuf-ct-summary-row a:hover {
  text-decoration: underline ;
  color: var(--shuf-blue-hover) !important;
}

/* Renewal block */
.shuf-ct-summary-renewal {
  
  margin-bottom: 12px !important;
  border-radius: var(--radius) !important;
}
.shuf-ct-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;
  padding: 0px 0px 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-ct-renewal-price {
  color: var(--shuf-orange) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
.shuf-ct-renewal-note {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-weight: 500 !important;
  padding: 10px 12px !important;
  background: var(--shuf-bg-light) !important;
  border: 1px solid #D8E5FF !important;
  font-size: 12px !important;
  color: var(--shuf-body) !important;
  line-height: 1.5 !important;
  border-radius: var(--radius) !important;
  margin: 0 0 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.shuf-ct-renewal-note::before { display: none !important; }
.shuf-ct-renewal-note i {
  color: var(--shuf-blue) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  line-height: 1.4 !important;
}
.shuf-ct-renewal-note strong { color: var(--shuf-navy) !important; }

/* Payment row */
.shuf-ct-wrap .shuf-ct-summary-payment {
  display: flex !important;
  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-ct-wrap .shuf-ct-summary-payment .pay-secure {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--shuf-body) !important;
}
.shuf-ct-wrap .shuf-ct-summary-payment .pay-secure i {
  color: var(--shuf-blue) !important;
  font-size: 13px !important;
}

/* ── CTA Button — orange like the design ─────────────────── */
.shuf-ct-wrap .shuf-ct-cta,
.shuf-ct-wrap button.shuf-ct-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 24px !important;
  background: var(--shuf-orange) !important;
  color: var(--shuf-white) !important;
  border: 2px solid var(--shuf-orange) !important;
  border-radius: var(--radius) !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: all .3s ease !important;
  box-shadow: none !important;
  opacity: 1 !important;
  margin-bottom: 0 !important;
}

/* Disabled state */
.shuf-ct-wrap .shuf-ct-cta:disabled,
.shuf-ct-wrap button.shuf-ct-cta:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Enabled hover */
.shuf-ct-wrap .shuf-ct-cta--ready:hover,
.shuf-ct-wrap button.shuf-ct-cta--ready:hover {
  background: var(--shuf-orange-dark) !important;
  border-color: var(--shuf-orange-dark) !important;
}

.shuf-ct-wrap .shuf-ct-cta:focus,
.shuf-ct-wrap .shuf-ct-cta:active {
  outline: none !important;
  box-shadow: none !important;
}
/* ══════════════════════════════════════════════════════════
   STRIPE-STYLE FOOTER (below the primary action button)
══════════════════════════════════════════════════════════ */
.shuf-ct-wrap .shuf-ct-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-ct-wrap .shuf-ct-stripe-footer .shuf-ct-stripe-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  color: var(--shuf-body) !important;
}
.shuf-ct-wrap .shuf-ct-stripe-footer .shuf-ct-stripe-line strong {
  color: var(--shuf-body) !important;
  font-weight: 700 !important;
}
.shuf-ct-wrap .shuf-ct-stripe-footer .shuf-ct-stripe-line i {
  font-size: 12px !important;
}
.shuf-ct-wrap .shuf-ct-stripe-footer a {
  color: var(--shuf-body) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Brand line (icon + Powered by Stripe) */
.shuf-ct-wrap .shuf-ct-stripe-footer .shuf-ct-stripe-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.shuf-ct-wrap .shuf-ct-stripe-footer .shuf-ct-stripe-icon {
  font-size: 14px !important;
  color: #635BFF !important;
  flex-shrink: 0 !important;
}
/* .shuf-ct-wrap .shuf-ct-stripe-footer a:hover { color: var(--shuf-blue) !important; text-decoration: underline !important; } */

.shuf-ct-old-price{
    color: var(--shuf-navy) !important;
     
    font-weight:700;
    margin-right:6px;
}

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

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

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints: 900px (tablet), 768px (small tablet / large phone),
   600px (phone), 420px (small phone)
══════════════════════════════════════════════════════════ */

/* ── Tablet: stack the 2-column grid ─────────────────────── */
@media (max-width: 900px) {
  .shuf-ct-wrap {
    grid-template-columns: 1fr !important;
    padding: var(--sp3) var(--sp2) !important;
  }
  .shuf-ct-wrap .shuf-ct-summary {
    position: static !important;
    width: 100% !important;
  }
}

/* ── Small tablet / large phone ──────────────────────────── */
@media (max-width: 768px) {
  .shuf-ct-wrap .shuf-ct-pay-head    { flex-direction: column !important; }
  .shuf-ct-wrap .shuf-ct-pay-tabs    { width: 100% !important; }
  .shuf-ct-wrap .shuf-ct-pay-tab     { flex: 1 !important; justify-content: center !important; }
  .shuf-ct-wrap .shuf-ct-card-row    { grid-template-columns: 1fr !important; }

  /* Cards: icon+body+checklist row gets cramped, let it wrap */
  .shuf-ct-wrap .shuf-ct-card {
    flex-wrap: wrap !important;
    padding: 16px !important;
  }
  .shuf-ct-wrap .shuf-ct-checks {
    flex-basis: 100% !important;
    margin-top: 10px !important;
    padding-left: 60px !important;
  }
  #shuf-trial-body {
    flex: 1 1 100% !important;
  }

  .shuf-ct-wrap h1.shuf-ct-title,
  .shuf-ct-wrap .shuf-ct-title {
    font-size: 26px !important;
  }

  .shuf-ct-billing-switch-wrap {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
}

/* ── Phone ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .shuf-ct-wrap {
    padding: var(--sp2) var(--sp1) !important;
    gap: var(--sp3) !important;
  }

  .shuf-ct-wrap h1.shuf-ct-title,
  .shuf-ct-wrap .shuf-ct-title {
    font-size: 22px !important;
  }

  .shuf-ct-wrap .shuf-ct-topbar {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  .shuf-ct-wrap .shuf-ct-step-label { font-size: 13px !important; }

  .shuf-ct-wrap .shuf-ct-hero { flex-direction: column !important; }

  .shuf-ct-wrap .shuf-ct-card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .shuf-ct-wrap .shuf-ct-card-icon { margin-bottom: 6px !important; }
  .shuf-ct-wrap .shuf-ct-checks {
    padding-left: 0 !important;
  }

  .shuf-ct-wrap .shuf-ct-card-logos {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .shuf-ct-wrap .shuf-ct-summary-box { padding: 18px 14px !important; }

  .shuf-ct-wrap .shuf-ct-summary-row,
  .shuf-ct-renewal-row {
    flex-wrap: wrap !important;
  }
}

/* ── Small phone ──────────────────────────────────────────── */
@media (max-width: 420px) {
  .shuf-ct-wrap h1.shuf-ct-title,
  .shuf-ct-wrap .shuf-ct-title {
    font-size: 20px !important;
  }

  .shuf-ct-wrap .shuf-ct-card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  .shuf-ct-wrap .shuf-ct-card-icon i { font-size: 16px !important; }

  .shuf-ct-billing-switch-wrap { justify-content: center !important; }

  .shuf-ct-wrap .shuf-ct-cta,
  .shuf-ct-wrap button.shuf-ct-cta { font-size: 14px !important; }
}
/* Thank You / error: hide all summary children (beats display:!important above) */
.shuf-ct-wrap .shuf-ct-summary-box.shuf-summary-showing-response > *:not(.shuf-checkout-response) {
  display: none !important;
}