/* Enrollment Checkout */
.tu-checkout{ max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.tu-checkout-card{ background:#fff; border:1px solid #eee; border-radius: 18px; box-shadow: 0 10px 24px rgba(0,0,0,.05); padding: 18px; }
.tu-checkout-card h2{ margin:0 0 14px; }
.tu-checkout-grid{ display:grid; grid-template-columns: 1fr 360px; gap: 18px; align-items:start; }
@media (max-width: 980px){ .tu-checkout-grid{ grid-template-columns:1fr; } }
.tu-field{ margin-bottom: 14px; }
.tu-field label{ display:block; font-weight:600; margin-bottom: 6px; }
.tu-field input{ width:100%; padding: 10px 12px; border:1px solid #e5e5e5; border-radius: 10px; }
.tu-inline{ display:flex; gap:10px; align-items:center; }
.tu-inline input{ flex:1; }
.tu-help{ font-size: 13px; color:#777; margin-top: 6px; }
.tu-upsells{ display:flex; flex-direction:column; gap:10px; }
.tu-up{ display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid #f0f0f0; border-radius: 12px; padding: 10px 12px; background:#fafafa; }
.tu-up input{ width:auto; }
.tu-up-amt{ font-weight:700; }
.tu-summary{ border:1px solid #f0f0f0; border-radius: 16px; padding: 14px; background:#fff; }
.tu-srow{ display:flex; justify-content:space-between; padding: 8px 0; border-bottom:1px solid #f5f5f5; }
.tu-total{ font-weight:800; font-size: 18px; }

.tu-otp .tu-inline{flex-wrap:wrap;}
.tu-otp input{max-width:180px;}

/* --- Mobile first improvements --- */
@media (max-width: 600px){
  .tu-checkout{ padding: 16px 12px; }
  .tu-checkout-card{ padding: 16px; }
  .tu-inline{ flex-direction:column; align-items:stretch; }
  .tu-otp input{ max-width:100%; }
  /* Avoid accidental horizontal scrolling */
  .tu-checkout, .tu-checkout-card{ overflow-x:hidden; }
}

/* Sticky pay bar (keeps CTA visible without excessive scrolling) */
.tu-sticky-paybar{ display:none; }
@media (max-width: 980px){
  .tu-sticky-paybar{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index: 9999;
    background:rgba(255,255,255,.98);
    border-top:1px solid #eee;
    padding: 10px 12px;
    gap: 12px;
    align-items:center;
    box-shadow: 0 -10px 24px rgba(0,0,0,.08);
  }
  .tu-sticky-paybar__left{ flex:1; min-width:0; }
  .tu-sticky-paybar__label{ font-size:12px; color:#666; }
  .tu-sticky-paybar__total{ font-weight:900; font-size:16px; }
  .tu-sticky-paybar .tu-btn{ padding: 12px 16px; border-radius: 14px; }
  /* Ensure page content is not hidden behind the sticky bar */
  body{ padding-bottom: 74px; }
}