/* ============================================================
   MyOnlineClassPro — Fall Semester Promo System
   Main popup + Exit-intent popup + Sticky bar
   Config-driven from promo-popup.js — edit values there, not here.
   ============================================================ */

.pp-overlay{position:fixed;inset:0;z-index:9998;background:rgba(4,8,15,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s ease}
.pp-overlay.is-visible{display:flex;opacity:1}

.pp-modal{position:relative;width:100%;background:linear-gradient(160deg,rgba(16,22,36,.92),rgba(8,12,22,.96));
  border:1px solid rgba(255,255,255,.09);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(240,165,0,.06);
  overflow:hidden;transform:scale(.95);opacity:0;transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .35s ease}
.pp-overlay.is-visible .pp-modal{transform:scale(1);opacity:1}

/* ---- Main popup (two column) ---- */
#ppMain .pp-modal{max-width:740px}
.pp-grid{display:grid;grid-template-columns:1.15fr 1fr}
.pp-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#f0f4ff;font-size:1.3rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.pp-close:hover{background:rgba(255,255,255,.16)}
.pp-close:focus-visible,.pp-cta:focus-visible,.pp-cta-sec:focus-visible,.pp-faq-q:focus-visible,.pp-sticky-cta:focus-visible,.pp-sticky-x:focus-visible{outline:2px solid #f0a500;outline-offset:2px}

.pp-left{padding:36px 32px 30px;display:flex;flex-direction:column;gap:16px}
.pp-eyebrow{display:inline-block;width:fit-content;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#f0a500;background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.28);border-radius:20px;padding:5px 12px}
.pp-h2{font-family:'Bebas Neue',sans-serif;letter-spacing:.03em;font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.08;color:#fff;margin:0}
.pp-h2 .gold{color:#f0a500}
.pp-sub{color:rgba(240,244,255,.72);font-size:.92rem;line-height:1.55;margin:0}

.pp-offer-card{background:rgba(240,165,0,.07);border:1px solid rgba(240,165,0,.25);border-radius:14px;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pp-offer-price{display:flex;align-items:baseline;gap:6px}
.pp-offer-price .amt{font-family:'Bebas Neue',sans-serif;font-size:2.1rem;color:#f0a500;line-height:1}
.pp-offer-price .lbl{font-size:.78rem;color:rgba(240,244,255,.65);max-width:120px;line-height:1.3}
.pp-countdown{display:flex;gap:6px}
.pp-countdown .cd-unit{background:rgba(4,8,15,.55);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 8px;text-align:center;min-width:44px}
.pp-countdown .cd-num{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;color:#fff;display:block}
.pp-countdown .cd-lbl{font-size:.58rem;color:rgba(240,244,255,.5);text-transform:uppercase;letter-spacing:.04em}

.pp-discount-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pp-dcard{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 6px;text-align:center}
.pp-dcard .dc-num{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:#f0a500;display:block;line-height:1.1}
.pp-dcard .dc-lbl{font-size:.62rem;color:rgba(240,244,255,.6);line-height:1.25;display:block;margin-top:2px}

.pp-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.pp-cta{flex:1;min-width:160px;text-align:center;background:linear-gradient(135deg,#f0a500,#e09400);color:#1a1200;
  font-weight:800;font-size:.9rem;padding:14px 20px;border-radius:50px;text-decoration:none;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s}
.pp-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,165,0,.3)}
.pp-cta-sec{flex:1;min-width:140px;text-align:center;background:rgba(37,211,102,.12);color:#25D366;border:1px solid rgba(37,211,102,.4);
  font-weight:700;font-size:.9rem;font-family:inherit;padding:14px 20px;border-radius:50px;text-decoration:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,box-shadow .2s}
.pp-cta-sec:hover{background:rgba(37,211,102,.2);box-shadow:0 0 20px rgba(37,211,102,.25)}
.pp-cta-sec svg{width:16px;height:16px;flex-shrink:0}

.pp-right{background:rgba(255,255,255,.025);border-left:1px solid rgba(255,255,255,.07);padding:32px 26px 26px;display:flex;flex-direction:column;gap:16px}
.pp-right-title{font-size:.82rem;font-weight:700;color:#f0f4ff;text-transform:uppercase;letter-spacing:.03em;margin:0}
.pp-why-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pp-why-list li{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;color:rgba(240,244,255,.82);line-height:1.35}
.pp-why-list svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:#f0a500}

.pp-platforms{display:flex;flex-wrap:wrap;gap:6px}
.pp-plat-chip{font-size:.68rem;color:rgba(240,244,255,.65);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:6px;padding:4px 9px}

.pp-faq{margin-top:2px}
.pp-faq-item{border-top:1px solid rgba(255,255,255,.07)}
.pp-faq-q{width:100%;background:none;border:none;color:#f0f4ff;font-size:.8rem;font-weight:600;text-align:left;
  padding:10px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pp-faq-q .chev{transition:transform .2s;color:#f0a500;flex-shrink:0}
.pp-faq-item.open .pp-faq-q .chev{transform:rotate(45deg)}
.pp-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.pp-faq-item.open .pp-faq-a{max-height:120px}
.pp-faq-a p{margin:0 0 10px;font-size:.78rem;color:rgba(240,244,255,.65);line-height:1.5}

/* ---- Exit-intent popup (single column, compact) ---- */
#ppExit .pp-modal{max-width:420px;padding:34px 30px 30px;text-align:center}
.pp-exit-icon{font-size:2.2rem;line-height:1}
.pp-exit h3{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:.03em;color:#fff;margin:10px 0 6px}
.pp-exit p{color:rgba(240,244,255,.7);font-size:.88rem;line-height:1.55;margin:0 0 18px}
.pp-exit-tags{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 auto 18px;width:fit-content;text-align:left}
.pp-exit-tags span{font-size:.78rem;color:rgba(240,244,255,.7);display:flex;align-items:center;gap:7px}
.pp-exit-tags svg{width:15px;height:15px;color:#00e676;flex-shrink:0}
.pp-exit .pp-cta-row{margin-top:0}

/* ---- Sticky bar ---- */
.pp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9997;background:linear-gradient(90deg,#0c1220,#151b2c);
  border-top:1px solid rgba(240,165,0,.3);padding:10px 16px;display:none;align-items:center;justify-content:center;gap:18px;
  transform:translateY(100%);transition:transform .4s cubic-bezier(.34,1.2,.64,1);flex-wrap:wrap}
.pp-sticky.is-visible{display:flex}
.pp-sticky.is-shown{transform:translateY(0)}
.pp-sticky-text{color:#f0f4ff;font-size:.82rem;text-align:center}
.pp-sticky-text b{color:#f0a500}
.pp-sticky-cd{display:flex;gap:4px}
.pp-sticky-cd .cd-unit{background:rgba(255,255,255,.06);border-radius:6px;padding:3px 6px;font-size:.72rem;color:#fff;font-weight:700}
.pp-sticky-cta{background:linear-gradient(135deg,#f0a500,#e09400);color:#1a1200;font-weight:800;font-size:.82rem;
  padding:9px 20px;border-radius:50px;text-decoration:none;white-space:nowrap;border:none;cursor:pointer}
.pp-sticky-x{background:none;border:none;color:rgba(240,244,255,.45);font-size:1.1rem;cursor:pointer;padding:4px 8px;line-height:1}
.pp-sticky-x:hover{color:#fff}

/* ---- Responsive ---- */
@media(max-width:760px){
  .pp-grid{grid-template-columns:1fr}
  .pp-right{border-left:none;border-top:1px solid rgba(255,255,255,.07)}
  #ppMain .pp-modal{max-height:88vh;overflow-y:auto}
}
@media(max-width:480px){
  .pp-overlay{padding:0}
  .pp-modal{border-radius:16px 16px 0 0!important;max-width:100%!important}
  .pp-left{padding:30px 20px 22px}
  .pp-right{padding:24px 20px 22px}
  .pp-discount-cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .pp-cta-row{flex-direction:column}
  .pp-cta,.pp-cta-sec{min-width:100%;min-height:48px}
  .pp-sticky{padding:8px 12px;gap:10px}
  .pp-sticky-text{font-size:.74rem;text-align:left}
  .pp-sticky-cta{padding:8px 14px;font-size:.76rem}
}

@media(prefers-reduced-motion:reduce){
  .pp-overlay,.pp-modal,.pp-sticky,.pp-faq-a,.pp-faq-q .chev{transition:none!important;animation:none!important}
}