/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================================================
   BODY
========================================================= */

body{
  background:#0f172a;
  color:#fff;
  font-family:Arial, sans-serif;
  min-height:100vh;
  padding:20px;
}

/* =========================================================
   HEADER
========================================================= */

header{
  text-align:center;
  margin-bottom:40px;
}

header h1{
  font-size:40px;
  margin-bottom:10px;
  color:#ffffff;
}

header p{
  color:#cbd5e1;
  font-size:18px;
}

/* =========================================================
   VIDEO GRID
========================================================= */

.videos-container{
  width:100%;
  display:grid;

  grid-template-columns:
    repeat(auto-fit, minmax(320px,1fr));

  gap:25px;
}

/* =========================================================
   VIDEO CARD
========================================================= */

.video-card{
  background:#1e293b;
  border-radius:16px;
  overflow:hidden;

  position:relative;

  box-shadow:
    0 5px 20px rgba(0,0,0,0.4);

  transition:0.3s ease;
}

.video-card:hover{
  transform:translateY(-5px);
}

/* =========================================================
   VIDEO
========================================================= */

.video-card video{
  width:100%;
  height:220px;
  background:black;
  object-fit:cover;
}

/* =========================================================
   VIDEO INFO
========================================================= */

.video-info{
  padding:18px;
}

.video-info h3{
  font-size:20px;
  margin-bottom:10px;
  color:#fff;
}

.video-info p{
  color:#cbd5e1;
  line-height:1.6;
}

/* =========================================================
   LOCKED OVERLAY
========================================================= */

.locked-overlay{
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

  background:
    rgba(0,0,0,0.88);

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  padding:20px;
  text-align:center;
}

/* =========================================================
   LOCK ICON/TEXT
========================================================= */

.locked-overlay h2{
  font-size:28px;
  margin-bottom:15px;
  color:#ffffff;
}

.locked-overlay p{
  color:#e2e8f0;
  margin-bottom:20px;
  line-height:1.6;
}

/* =========================================================
   PAYMENT BUTTON
========================================================= */

.pay-btn{
  background:#22c55e;
  color:white;

  border:none;
  outline:none;

  padding:14px 25px;

  border-radius:10px;

  font-size:16px;
  font-weight:bold;

  cursor:pointer;

  transition:0.3s ease;
}

.pay-btn:hover{
  background:#16a34a;
  transform:scale(1.05);
}

/* =========================================================
   POPUP OVERLAY
========================================================= */

.popup-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background:rgba(2,6,23,0.82);
  backdrop-filter:blur(10px);

  display:none;
  align-items:center;
  justify-content:center;

  padding:20px;

  z-index:9999;
}

/* =========================================================
   POPUP BOX
========================================================= */

.glass-modal{
  position:relative;

  width:90%;
  max-width:390px;

  background:#f8fafc;
  color:#0f172a;

  border:1px solid rgba(255,255,255,0.82);
  border-radius:30px;

  padding:34px 28px 28px;

  text-align:center;

  box-shadow:
    0 28px 80px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.88);

  animation:popupShow 0.28s ease;
}

/* =========================================================
   POPUP ANIMATION
========================================================= */

@keyframes popupShow{

  from{
    opacity:0;
    transform:scale(0.92) translateY(14px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }

}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.close-btn{
  position:absolute;
  top:14px;
  right:14px;

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:50%;

  background:#e2e8f0;
  color:#475569;

  font-size:24px;
  line-height:1;
  font-weight:800;

  cursor:pointer;

  transition:0.2s ease;
}

.close-btn:hover{
  background:#cbd5e1;
  color:#0f172a;
}

/* =========================================================
   PROVIDER LOGO
========================================================= */

.provider-logo-wrap{
  display:flex;
  justify-content:center;

  margin-bottom:24px;
}

.provider-logo{
  height:28px;
  max-width:220px;
  object-fit:contain;
}

/* =========================================================
   PAYMENT TITLE/TEXT
========================================================= */

.glass-modal h2{
  margin-bottom:8px;

  color:#0f172a;

  font-size:27px;
  font-weight:900;
  line-height:1.05;
  text-transform:uppercase;
  font-style:italic;
}

.payment-subtitle{
  max-width:300px;

  margin:0 auto 18px;

  color:#64748b;

  font-size:12px;
  font-weight:700;
  line-height:1.25;
}

.batch-text{
  min-height:17px;

  margin-bottom:16px;

  color:#2563eb;

  font-size:11px;
  font-weight:800;
  line-height:1.2;
}

/* =========================================================
   PAYMENT STEPS
========================================================= */

.payment-steps{
  display:flex;
  flex-direction:column;
  gap:12px;

  margin-bottom:28px;
}

.step-pill{
  min-height:44px;

  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 12px;

  background:#f1f5f9;
  border:2px solid transparent;
  border-radius:13px;
}

.step-pill-active{
  background:#eff6ff;
  border-color:#bfdbfe;
}

.step-number{
  width:24px;
  height:24px;

  flex:0 0 24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#2563eb;
  color:#ffffff;

  font-size:10px;
  font-weight:900;
}

.step-pill p{
  margin:0;

  color:#334155;

  font-size:11px;
  font-weight:900;
  line-height:1.2;
  text-align:left;
}

.step-pill-active p{
  color:#1d4ed8;
  font-style:italic;
}

/* =========================================================
   PAYMENT FORM
========================================================= */

.payment-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#phoneNumber{
  width:100%;

  border:2px solid #eef2f7;
  border-radius:15px;
  outline:none;

  background:#ffffff;
  color:#0f172a;

  padding:22px 16px;

  font-size:26px;
  font-weight:900;
  line-height:1;
  text-align:center;
}

#phoneNumber::placeholder{
  color:#94a3b8;
}

#phoneNumber:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,0.12);
}

.btn-gradient{
  width:100%;
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  border:none;
  border-radius:14px;

  background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);
  color:#ffffff;

  box-shadow:0 16px 26px rgba(37,99,235,0.28);

  font-size:20px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;

  cursor:pointer;

  transition:0.2s ease;
}

.btn-gradient:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 30px rgba(37,99,235,0.34);
}

.btn-gradient:disabled{
  cursor:not-allowed;
  opacity:0.78;
  transform:none;
}

.loader{
  width:20px;
  height:20px;

  border:3px solid rgba(255,255,255,0.45);
  border-top-color:#ffffff;
  border-radius:50%;

  animation:loaderSpin 0.8s linear infinite;
}

@keyframes loaderSpin{

  to{
    transform:rotate(360deg);
  }

}

.hidden{
  display:none;
}

/* =========================================================
   PAYMENT STATUS
========================================================= */

.payment-message{
  min-height:18px;

  margin-top:14px;

  font-size:12px;
  font-weight:800;
  line-height:1.3;
}

.payment-message.info{
  color:#2563eb;
}

.payment-message.success{
  color:#16a34a;
}

.payment-message.error{
  color:#dc2626;
}

.secure-text{
  margin-top:18px;

  color:#94a3b8;

  font-size:9px;
  font-weight:900;
  line-height:1.3;
  letter-spacing:0;
  text-transform:uppercase;
  font-style:italic;
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media(max-width:768px){

  body{
    padding:15px;
  }

  header h1{
    font-size:30px;
  }

  .video-card video{
    height:200px;
  }

  .glass-modal{
    max-width:360px;
    padding:30px 22px 24px;
    border-radius:26px;
  }

  .glass-modal h2{
    font-size:24px;
  }

  #phoneNumber{
    padding:20px 14px;
    font-size:23px;
  }

  .btn-gradient{
    min-height:56px;
    font-size:18px;
  }

}
/* =========================================================
   preview 2.5s
========================================================= */
.preview-note{
  color:#38bdf8;
  font-size:13px;
  font-weight:800;
  margin-top:6px;
}
.unlocked-note{
  display:inline-block;

  background:#16a34a;
  color:#ffffff;

  padding:6px 12px;

  border-radius:30px;

  font-size:13px;
  font-weight:900;

  margin-top:8px;

  box-shadow:
    0 4px 12px rgba(34,197,94,0.35);

  animation:unlockPulse 1.5s infinite;
}
@keyframes unlockPulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.05);
  }

  100%{
    transform:scale(1);
  }

}

/* =========================================================
   video lazzy
========================================================= */
video{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.course-video{
  background:#000;
  object-fit:cover;
}

.course-video::-webkit-media-controls{
  opacity:1;
}

@media(max-width:768px){

  .video-card{
    border-radius:12px;
    overflow:hidden;
  }

  .video-card video{
    height:240px;
    background:#000;
  }

}
/* =========================================================
   play button
========================================================= */
.video-wrapper{
  position: relative;
  width: 100%;
}

.course-video{
  width: 100%;
  display: block;
}

.custom-play-btn{
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: 70px;
  height: 70px;

  border-radius: 50%;
  border: none;

  background: rgba(0,0,0,0.6);

  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  line-height: 1;

  cursor: pointer;

  z-index: 999;

  padding: 0;
}
/* =========================================================
  ondoa weusi
========================================================= */
video{
  background:#000;
  object-fit:cover;
}