/* ============================================================
   SHARED STYLES — used by all Split pages
   Includes: CSS vars, reset, nav, modal, toast, spinner,
             offline banner, auth card, form groups, buttons
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
  --teal-dark:#0D3D47;
  --teal-deep:#1E6B7A;
  --teal-mid:#2A8FA3;
  --teal-light:#3FB8D0;
  --teal-xlight:#B8E8F0;
  --teal-pale:#E4F6FA;
  --orange:#F5921E;
  --orange-light:#FDDCB5;
  --orange-dark:#C8700A;
  --ygreen:#5C9E60;
  --lblue:#5BC8DC;
  --gray:#8A8A8A;
  --gray-light:#E8E8E8;
  --gray-dark:#444444;
  --white:#FFFFFF;
  --off-white:#F5FBFC;
  --danger:#E24B4A;
  --success:#3B9E5C;
  --font:'Nunito',sans-serif;
  --serif:'Raleway',sans-serif;
}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--off-white);color:var(--gray-dark);line-height:1.6}
.hidden{display:none!important}
button{cursor:pointer;font-family:var(--font)}
.page{display:none}
.page.active{display:block}

/* ── NAV ── */
nav{background:var(--teal-dark);padding:.75rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--orange)}
.nav-logo{font-family:var(--serif);font-size:1.5rem;font-weight:900;letter-spacing:-.5px;cursor:pointer}
.nav-logo .ptcb{color:var(--orange)}
.nav-logo .pg{color:var(--lblue)}
.nav-links{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.nav-links button{color:rgba(255,255,255,.85);background:none;border:none;cursor:pointer;padding:.4rem .9rem;border-radius:6px;font-family:var(--font);font-size:.88rem;font-weight:500;transition:all .2s}
.nav-links button:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn-nav-cta{background:var(--orange)!important;color:var(--white)!important;font-weight:700!important;border-radius:50px!important}
.btn-nav-cta:hover{background:var(--orange-dark)!important}

/* ── HAMBURGER ── */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;border-radius:6px;transition:background .2s}
.nav-hamburger:hover{background:rgba(255,255,255,.12)}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--teal-dark);border-top:1px solid rgba(255,255,255,.1);border-bottom:3px solid var(--orange);flex-direction:column;padding:.5rem .75rem .75rem;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.nav-mobile-menu.open{display:flex}
.nav-mobile-menu button{color:rgba(255,255,255,.85);background:none;border:none;cursor:pointer;padding:.75rem 1rem;border-radius:8px;font-family:var(--font);font-size:1.05rem;font-weight:600;text-align:left;transition:background .15s;width:100%}
.nav-mobile-menu button:hover{background:rgba(255,255,255,.1);color:var(--white)}
.nav-mobile-menu .btn-nav-cta{background:var(--orange)!important;color:var(--white)!important;margin-top:.25rem;border-radius:50px!important;text-align:center!important}
@media(max-width:700px){
  .nav-hamburger{display:flex}
  .nav-links{display:none}
  nav{position:relative}
}

/* ── LOADING SPINNER ── */
.loading-screen{position:fixed;inset:0;background:var(--teal-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;transition:opacity .4s}
.loading-screen.fade-out{opacity:0;pointer-events:none}
.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:rgba(255,255,255,.7);font-size:.9rem}

/* ── OFFLINE BANNER ── */
.offline-banner{background:#FEF0E7;border-bottom:2px solid var(--orange);padding:.4rem 1rem;text-align:center;font-size:.8rem;font-weight:600;color:var(--orange-dark);display:none}
.offline-banner.show{display:block}

/* ── TOAST ── */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-200px);background:var(--teal-dark);color:var(--white);padding:.75rem 1.75rem;border-radius:50px;font-size:.88rem;font-weight:600;z-index:400;transition:transform .3s ease,opacity .3s ease;pointer-events:none;white-space:nowrap;border-left:3px solid var(--orange);box-shadow:0 4px 20px rgba(0,0,0,.25);opacity:0;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── MODAL ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-backdrop.open{display:flex}
.modal{background:var(--white);border-radius:20px;padding:2rem;width:100%;max-width:420px;border-top:4px solid var(--orange)}
.modal h3{font-family:var(--serif);color:var(--teal-dark);margin-bottom:.6rem;font-weight:900}
.modal p{color:var(--gray);font-size:.88rem;margin-bottom:1.2rem}
.modal-btns{display:flex;gap:.55rem;justify-content:flex-end}
.btn-cancel{background:none;border:1.5px solid var(--gray-light);color:var(--gray);padding:.52rem 1.1rem;border-radius:50px;font-size:.84rem;font-family:var(--font);cursor:pointer}
.btn-confirm{background:var(--teal-deep);color:var(--white);border:none;padding:.55rem 1.35rem;border-radius:50px;font-size:.84rem;font-weight:700;font-family:var(--font);cursor:pointer}
.btn-confirm.danger-confirm{background:var(--danger)}

/* ── AUTH CARDS ── */
.auth-wrap{min-height:85vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-card{background:var(--white);border-radius:20px;padding:2.5rem;width:100%;max-width:420px;border:1px solid var(--teal-xlight);box-shadow:0 4px 30px rgba(13,61,71,.08)}
.auth-card h2{font-family:var(--serif);color:var(--teal-dark);margin-bottom:1.5rem;text-align:center;font-weight:900;font-size:1.5rem}
.auth-card-sub{text-align:center;color:var(--gray);font-size:.85rem;margin-top:-.75rem;margin-bottom:1.25rem}

/* ── FORM GROUPS ── */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.8rem;font-weight:700;color:var(--teal-deep);margin-bottom:.3rem;letter-spacing:.02em}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.72rem 1rem;border:1.5px solid var(--gray-light);border-radius:10px;font-size:.92rem;font-family:var(--font);outline:none;transition:border-color .2s;color:var(--gray-dark)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--teal-mid)}
.form-group textarea{resize:vertical;min-height:80px}

/* ── SECURITY BANNERS ── */
.security-banner{padding:.75rem 1.25rem;border-radius:10px;font-size:.85rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:flex-start;gap:.6rem;line-height:1.5}
.security-banner.danger{background:#FCEBEB;border:1px solid var(--danger);color:#7B1D1D}
.security-banner.warning{background:#FEF0E7;border:1px solid var(--orange);color:#7A3B0A}
.security-banner.info{background:var(--teal-pale);border:1px solid var(--teal-light);color:var(--teal-dark)}
.security-banner .sb-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.auth-error{color:var(--danger);font-size:.82rem;text-align:center;margin-bottom:.75rem;background:#FCEBEB;padding:.5rem .75rem;border-radius:8px;display:none}
.auth-success{color:var(--success);font-size:.82rem;text-align:center;margin-bottom:.75rem;background:#EBF6EF;padding:.5rem .75rem;border-radius:8px;display:none}

/* ── BUTTONS (shared) ── */
.btn-full{width:100%;padding:.88rem;border-radius:50px;font-size:1rem;font-weight:700;border:none;background:var(--teal-deep);color:var(--white);transition:all .15s}
.btn-full:hover{background:var(--teal-dark)}
.btn-full:disabled{background:var(--gray-light);color:var(--gray);cursor:not-allowed}
.btn-orange{background:var(--orange);color:var(--white);padding:.9rem 2rem;border-radius:50px;font-weight:700;font-size:1rem;border:none;transition:all .15s;font-family:var(--font)}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,146,30,.4)}
.btn-secondary{background:var(--white);color:var(--teal-deep);border:2px solid var(--teal-light);padding:.6rem 1.3rem;border-radius:50px;font-size:.86rem;font-weight:600;transition:all .15s;font-family:var(--font)}
.btn-secondary:hover{background:var(--teal-pale)}
.btn-next{background:var(--teal-deep);color:var(--white);border:none;padding:.65rem 1.5rem;border-radius:50px;font-size:.88rem;font-weight:700;transition:all .15s;font-family:var(--font)}
.btn-next:hover{background:var(--teal-dark)}
.btn-next:disabled{background:var(--gray-light);color:var(--gray);cursor:not-allowed}
.auth-switch{text-align:center;margin-top:.9rem;font-size:.84rem;color:var(--gray)}
.auth-switch button{color:var(--orange);font-weight:700;background:none;border:none;cursor:pointer}

/* ── CERTIFICATE ── */
.cert-wrap{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:80vh;background:var(--off-white)}
.certificate{background:var(--white);border:6px double var(--teal-mid);border-radius:8px;padding:3rem;max-width:680px;width:100%;text-align:center;box-shadow:0 8px 40px rgba(13,61,71,.12)}
.cert-stripe{height:8px;background:linear-gradient(90deg,var(--teal-dark),var(--orange),var(--ygreen),var(--teal-mid));border-radius:4px;margin-bottom:2rem}
.cert-brand{font-family:var(--serif);font-size:1.2rem;font-weight:900;margin-bottom:1.1rem}
.cert-brand .co{color:var(--orange)}
.cert-brand .cpg{color:var(--teal-mid)}
.cert-top{color:var(--teal-mid);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.cert-title{font-family:var(--serif);font-size:3rem;color:var(--teal-dark);line-height:1;margin:.4rem 0;font-weight:900}
.cert-sub{color:var(--gray);font-size:.92rem;margin-bottom:.9rem}
.cert-name{font-family:var(--serif);font-size:2.5rem;color:var(--orange);border-bottom:3px solid var(--orange-light);padding-bottom:.45rem;margin:.9rem auto;max-width:420px;font-weight:900}
.cert-body{color:var(--gray-dark);font-size:.9rem;margin-bottom:1.4rem;line-height:1.75}
.cert-seal{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--teal-dark),var(--teal-mid));display:flex;align-items:center;justify-content:center;margin:.9rem auto;color:var(--white);font-size:1.75rem;border:3px solid var(--ygreen)}
.cert-ready{color:var(--teal-deep);font-weight:800;font-size:1.05rem}
.cert-footer{display:flex;justify-content:space-between;margin-top:1.4rem;padding-top:.9rem;border-top:1px solid var(--gray-light);font-size:.74rem;color:var(--gray);flex-wrap:wrap;gap:.4rem}
.btn-print{background:var(--teal-deep);color:var(--white);border:none;padding:.72rem 1.9rem;border-radius:50px;font-size:.88rem;font-weight:700;margin-top:.9rem;font-family:var(--font);cursor:pointer}

/* ── PREVIEW BANNER (admin mode) ── */
#preview-banner{flex-wrap:wrap;gap:.4rem}

/* ── PRINT ── */
@media print {
  nav,.calc-toggle,.calc-overlay,.cert-wrap>div:last-child{display:none!important}
  .certificate{box-shadow:none;border:4px double var(--teal-mid)}
}

/* ── MOBILE ── */
@media(max-width:600px) {
  nav{padding:.6rem 1rem}
}