.cre2-notice{position:relative;margin:0 0 12px;padding:10px 12px;border:var(--cre2-ui-border-width,0px) solid var(--cre2-ui-border-color,transparent);border-radius:var(--cre2-ui-border-radius,0px);background:var(--cre2-notice-bg,#382C1E);color:#fff;}
.cre2-cta{margin:16px 0;padding:14px;border:none;border-radius:0;background:#fff}
.cre2-blocked{margin:16px 0;padding:14px;border:none;border-radius:0;background:#fff}
.cre2-unlock-box,.cre2-ppp-box,.cre2-paywall-box{margin:0 0 12px;padding:12px;border:none;border-radius:0;background:#fafafa;color:#111}
.cre2-notice a{color:#fff;text-decoration:underline}
.cre2-ppp-paid-notice{margin:0 0 12px;padding:12px;border:var(--cre2-ui-border-width,0px) solid var(--cre2-ui-border-color,transparent);border-radius:var(--cre2-ui-border-radius,0px);background:#fafafa;color:#111}
.cre2-ppp{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid rgba(0,0,0,.08)}
.cre2-ppp-btn{display:inline-block;margin-top:10px;padding:10px 14px;border-radius:999px;background:#382C1E;color:#fff;text-decoration:none}
.cre2-ppp-btn:hover{opacity:.92}

/* Modal */
.cre2-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:22px;z-index:999999}
.cre2-modal{position:relative;max-width:760px;width:100%;background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.22);overflow:hidden}
.cre2-modal-inner{padding:16px} 


.cre2-ppp-below-notice{margin-top:10px;font-size:14px;opacity:.95;}

/* === CRE2: No borders / no rounded corners for notices & CTAs (v2.0.82) === */
.cre2-notice,
.cre2-cta,
.cre2-blocked,
.cre2-ppp-paid-notice,
.cre2-ppp{border-bottom:none !important;}


/* UI border variables (admin-configurable) */
.cre2-paid-notice{margin:0 0 12px;padding:12px;border:var(--cre2-ui-border-width,0px) solid var(--cre2-ui-border-color,transparent);border-radius:var(--cre2-ui-border-radius,0px);background:#fafafa;color:#111}

/* === Inline gate (after paragraphs) === */
.cre2-inline-gate{margin:16px 0;}
.cre2-inline-wrap{
  position:relative;
  margin-top:10px;
  /* Prevent a huge page scroll based on the original (locked) post length */
  max-height: min(var(--cre2-inline-max, 900px), 70vh);
  overflow: hidden;
}
.cre2-inline-locked{opacity:.95;}
.cre2-inline-wrap.is-blur .cre2-inline-locked{
  filter: blur(var(--cre2-inline-blur, 6px));
  pointer-events:none;
  user-select:none;
}
.cre2-inline-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px 16px;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.92));
  pointer-events:none;
}

/* Pre-paywall recommendations */
.cre2-recommendations{margin:0 0 18px;padding:0}
.cre2-recommendations-title{margin:0 0 10px;font-size:18px;line-height:1.3}
.cre2-recommendations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cre2-rec-card{border:1px solid rgba(15,23,42,.08);border-radius:14px;overflow:hidden;background:#fff}
.cre2-rec-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.cre2-rec-thumb{display:block;aspect-ratio:16/9;background:rgba(15,23,42,.04);overflow:hidden}
.cre2-rec-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cre2-rec-copy{display:flex;flex-direction:column;gap:8px;padding:12px}
.cre2-rec-title{display:block;font-size:15px;line-height:1.35}
.cre2-rec-excerpt{display:block;font-size:13px;line-height:1.45;color:#475569}
.cre2-rec-badge{display:inline-block;align-self:flex-start;padding:3px 8px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:12px;font-weight:600}


.cre2-stripe-modal{max-width:860px}
.cre2-modal-close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#111}
.cre2-stripe-head{font-size:20px;font-weight:700;line-height:1.3;margin:0 28px 8px 0;color:#111}
.cre2-stripe-status{font-size:14px;color:#475569;margin:0 0 12px}
.cre2-stripe-error{margin:12px 0;padding:10px 12px;border:1px solid rgba(220,38,38,.18);background:#fef2f2;color:#991b1b;border-radius:10px}
.cre2-stripe-fallback{margin:14px 0 0;font-size:13px;color:#64748b}
.cre2-stripe-fallback a{color:inherit;text-decoration:underline}
#cre2-stripe-checkout{min-height:280px}


/* === CRE 2.7.7: Stripe modal width tuned to embedded checkout === */
.cre2-modal-overlay{
  padding: 16px !important;
}
.cre2-modal{
  width: 100% !important;
  max-width: 500px !important;
  border-radius: 16px !important;
  overflow: visible !important;
}
.cre2-modal-inner{
  padding: 24px !important;
}
#cre2-stripe-embedded-checkout,
.cre2-stripe-embedded-checkout,
.cre2-embedded-checkout,
.cre2-modal [id*="stripe"],
.cre2-modal [class*="stripe"]{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
@media (max-width: 640px){
  .cre2-modal{
    max-width: 94vw !important;
    border-radius: 14px !important;
  }
  .cre2-modal-inner{
    padding: 18px !important;
  }
}

/* === CRE 2.7.9: Stripe modal UX improvement (no internal scroll) === */

.cre2-modal-overlay.cre2-stripe-overlay{
  padding:20px !important;
  overflow-y:auto !important;
}

.cre2-stripe-modal{
  width:100% !important;
  max-width:520px !important;
  margin:40px auto !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 20px 60px rgba(0,0,0,.25) !important;
  display:block !important;
  overflow:visible !important;
}

.cre2-stripe-header{
  padding:18px 24px !important;
  border-bottom:1px solid #e5e7eb !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.cre2-stripe-head{
  font-size:18px !important;
  font-weight:600 !important;
}

.cre2-stripe-status{
  font-size:14px !important;
  color:#64748b !important;
}

.cre2-stripe-body{
  padding:24px !important;
}

#cre2-stripe-checkout{
  min-height:340px !important;
}

@media (max-width:640px){
  .cre2-stripe-modal{
    margin:20px auto !important;
    max-width:100% !important;
  }
}


/* === CRE 2.7.16: separate CTA popup modal from Stripe modal === */

/* Neutral base modal only */
.cre2-modal{
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.cre2-modal-inner{
  padding: 16px;
}

/* CTA popup modal: do NOT inherit Stripe checkout size */
.cre2-cta-overlay{
  align-items: center;
  justify-content: center;
}
.cre2-cta-modal{
  max-width: 760px;
  overflow: visible;
}
.cre2-cta-modal .cre2-modal-inner{
  padding: 16px;
}

/* Stripe modal only */
.cre2-stripe-overlay{
  align-items: center;
  justify-content: center;
}
.cre2-stripe-modal{
  max-width: 520px;
  overflow: visible;
}
.cre2-stripe-modal .cre2-modal-inner{
  padding: 16px;
}
@media (max-width: 640px){
  .cre2-stripe-modal{
    max-width: 92vw;
  }
}


/* === CRE 2.7.17: hard separation between CTA popup modal and Stripe modal === */

/* CTA popup keeps natural size */
.cre2-modal-overlay.cre2-cta-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 999999;
}
.cre2-cta-modal{
  width: auto !important;
  max-width: 760px !important;
  overflow: visible !important;
}
.cre2-cta-modal .cre2-modal-inner{
  padding: 16px !important;
}

/* Stripe modal remains isolated */
.cre2-modal-overlay.cre2-stripe-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 999999;
}
.cre2-stripe-modal{
  width: 100% !important;
  max-width: 520px !important;
  overflow: visible !important;
}
.cre2-stripe-modal .cre2-modal-inner{
  padding: 16px !important;
}
@media (max-width: 640px){
  .cre2-cta-modal{
    max-width: 92vw !important;
  }
  .cre2-stripe-modal{
    max-width: 92vw !important;
  }
}