/* ======================================================
   PREMIUM CHECKOUT — GOLD & EMERALD STYLE
   ====================================================== */

:root{
  --emerald-base:#0B3B24;
  --emerald-light:#1E6E45;

  --gold-base:#C5A059;
  --gold-light:#FEEBC1;
  --gold-dark:#7F592B;

  --soft:#f4f6f9;
  --white:#ffffff;
}

/* =========================
   HERO
========================= */
.checkout-hero{
  background: linear-gradient(135deg,#0B3B24,#1E6E45);
  color:#fff;
  padding:90px 0 70px;
  text-align:center;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}

.checkout-hero h1{
  font-weight:800;
  letter-spacing:.6px;
}

/* =========================
   LAYOUT
========================= */
.checkout-wrapper{
  padding:70px 0;
}

.checkout-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap:34px;
  align-items:flex-start;
}

/* =========================
   COURSE SUMMARY CARD
========================= */
.checkout-summary{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(197,160,89,.35);
  padding:26px;
  box-shadow:0 22px 50px rgba(0,0,0,.08);
}

.checkout-summary h4{
  color:var(--emerald-base);
  font-weight:800;
  margin-bottom:14px;
}

/* =========================
   STUDENT FORM
========================= */
.checkout-form{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  padding:26px;
  box-shadow:0 16px 38px rgba(0,0,0,.05);
}

.checkout-form label{
  font-size:.82rem;
  font-weight:700;
  color:var(--emerald-base);
  letter-spacing:.3px;
}

.checkout-form input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  margin-bottom:12px;
  background:#fafafa;
  transition:.28s;
}

.checkout-form input:focus{
  background:#fff;
  border-color:var(--gold-base);
  outline:none;
  box-shadow:0 0 0 3px rgba(197,160,89,.20);
}

.form-note{
  font-size:.8rem;
  color:#6b7280;
}

/* =========================
   PAYMENT PANEL (RIGHT)
========================= */
.payment-panel{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(197,160,89,.28);
  padding:26px;
  box-shadow:0 20px 48px rgba(0,0,0,.06);
}

.payment-panel h4{
  color:var(--emerald-base);
  font-weight:800;
  margin-bottom:10px;
}

.payment-panel small{
  color:#666;
}

/* QR */
.qr-img{
  width:130px;
  border-radius:10px;
  margin-top:10px;
  border:1px solid rgba(0,0,0,.12);
}

/* =========================
   PAYPAL BUTTON
========================= */
.btn-pay-paypal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border-radius:50px;
  background:#003087;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.6px;
  box-shadow:0 16px 32px rgba(0,48,135,.35);
  transition:.35s;
}

.btn-pay-paypal:hover{
  background:#001d57;
  transform:translateY(-3px);
}

/* =========================
   PAYMENT CONFIRMATION BOX
========================= */
.payment-box{
  background:#ffffff;
  border:1px solid rgba(197,160,89,.35);
  border-radius:18px;
  padding:26px;
  margin-top:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.payment-box h5{
  color:var(--emerald-base);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}

.payment-box h5 i{
  color:var(--gold-base);
}

/* Inputs */
.payment-box input,
.payment-box select{
  background:#fafafa;
  border:1px solid rgba(0,0,0,.18);
  border-radius:12px;
  padding:12px 14px;
  font-size:.9rem;
  transition:.28s;
}

.payment-box input:focus,
.payment-box select:focus{
  background:#fff;
  border-color:var(--gold-base);
  outline:none;
  box-shadow:0 0 0 3px rgba(197,160,89,.20);
}

/* Confirm Button */
.btn-confirm{
  margin-top:8px;
  padding:15px 22px;
  border-radius:50px;
  border:none;
  font-weight:900;
  letter-spacing:.8px;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-base));
  color:var(--black-deep);
  box-shadow:0 16px 34px rgba(197,160,89,.35);
  transition:.35s;
  cursor:pointer;
}

.btn-confirm:hover{
  transform: translateY(-3px);
  background: linear-gradient(145deg, #9E7A35, #D4B06A);
  box-shadow: 0 24px 48px rgba(197,160,89,.75);
  color:#0A0A0A;
}

.summary-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.summary-row i{
  color:var(--gold-base);
}

.summary-row.price span{
  font-weight:700;
}

/* Secciones internas */
.section-title{
  font-weight:800;
  color:var(--emerald-base);
  margin:10px 0 4px;
  letter-spacing:.3px;
}

/* Grid simétrico */
.two-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.mt-2{ margin-top:8px; }

.btn-back-checkout{
  
  margin-bottom:12px;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  color:var(--emerald-base);
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  font-weight:700;
  transition:.25s;
    display:flex;          /* activa flexbox */
  justify-content:flex-end;
}

.btn-back-checkout:hover{
  background:#ffffff;
  border-color:var(--gold-base);
  box-shadow:0 8px 20px rgba(197,160,89,.25);
}



/* =========================
   RESPONSIVE
========================= */
@media(max-width:980px){
  .checkout-grid{grid-template-columns:1fr;}
}
@media(max-width:780px){
  .two-cols{ grid-template-columns:1fr; }
}

@media(max-width:768px){
  .checkout-wrapper{padding:45px 0;}
  .payment-box{padding:20px;}
}