/* BCIT WORLD - certificate & marksheet samples (also uses hero / lightbox styles from bw-gallery.css). Bump ?v= in certificate-sample.php when you edit. */
.cs-wrap{max-width:1236px;margin:0 auto;padding:36px 18px 10px}
.cs-note{max-width:720px;margin:0 auto 28px;text-align:center;color:#666;font-size:15px;line-height:1.7}
.cs-note i{color:#800000;margin-right:6px}
.cs-row{display:grid;gap:24px}
.cs-row.two{grid-template-columns:1fr 1fr}
.cs-row.split{grid-template-columns:5fr 6fr;margin-top:24px;align-items:start}

.cs-card{background:#fff;border:1px solid #eadede;border-radius:18px;box-shadow:0 10px 30px rgba(128,0,0,.1);overflow:hidden;display:flex;flex-direction:column}
.cs-shot{display:block;position:relative;background:#f3eeee;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.cs-shot img{display:block;width:100%;height:auto}
.cs-shot:after{content:"\f00e";font-family:"Font Awesome 6 Free","FontAwesome";font-weight:900;position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:rgba(128,0,0,.88);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.cs-shot:focus-visible{outline:3px solid #f5c542;outline-offset:-3px}
.cs-label{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 16px;border-top:1px solid #f0e6e6;background:#fdfaf9;color:#800000;font-size:15px;font-weight:800;letter-spacing:.3px}
.cs-label i{color:#c9971c}

/* verify card */
.cs-verify{background:#fff;border:1px solid #eadede;border-radius:18px;box-shadow:0 10px 30px rgba(128,0,0,.1);overflow:hidden}
.cs-vtop{background:linear-gradient(135deg,#1b7f3b,#23a24d);color:#fff;padding:24px 26px}
.cs-vtop h2{margin:0;font-size:24px;font-weight:800;color:#fff !important}
.cs-vtop p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:#fff !important;opacity:.95}
.cs-steps{list-style:none;margin:0;padding:22px 26px 6px;counter-reset:st}
.cs-steps li{position:relative;padding:0 0 18px 52px;font-size:15px;line-height:1.6;color:#333;min-height:44px}
.cs-steps li:before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#800000,#a51c1c);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.cs-steps li b{color:#800000}
.cs-vbtns{display:flex;flex-direction:column;gap:12px;padding:8px 26px 26px}
.cs-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;border-radius:12px;font-size:16px;font-weight:800;text-decoration:none !important;color:#fff !important;transition:transform .15s,box-shadow .15s}
.cs-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.cs-btn.maroon{background:#800000}
.cs-btn.green{background:#1b7f3b}
.cs-btn.gold{background:linear-gradient(135deg,#c9971c,#f5c542);color:#4a0000 !important}
.cs-btn.line{background:#fff;color:#800000 !important;border:2px solid #800000}

@media (max-width:991px){
  .cs-row.split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cs-wrap{padding:22px 12px 6px}
  .cs-row.two{grid-template-columns:1fr;gap:16px}
  .cs-row.split{gap:16px;margin-top:16px}
  .cs-note{font-size:14px;margin-bottom:20px}
  .cs-vtop{padding:20px 18px}
  .cs-vtop h2{font-size:21px}
  .cs-steps{padding:18px 18px 2px}
  .cs-vbtns{padding:6px 18px 20px}
}