/* ==========================================================================
   Course Registration System — extends styles.css design tokens.
   Uses the same --navy / --blue / --gray / --ink / --border variables.
   ========================================================================== */

/* Cart icon in header */
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.cart-link{ position:relative; display:inline-flex; align-items:center; color:var(--navy); }
.cart-count{
  position:absolute; top:-8px; right:-10px; background:var(--blue); color:#fff;
  font-size:.68rem; font-weight:700; line-height:1; padding:3px 5px; border-radius:999px; min-width:16px; text-align:center;
}

/* Breadcrumb / back links */
.reg-breadcrumb{ font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; }
.reg-breadcrumb a{ color:var(--blue); font-weight:600; }
.back-link{ display:inline-flex; align-items:center; gap:.4rem; color:var(--blue); font-weight:600; font-size:.9rem; margin-bottom:1.4rem; }
.back-link::before{ content:"←"; }

/* Page hero (compact variant of .hero) */
.reg-hero{ background:var(--navy); color:#fff; padding:3rem 0; }
.reg-hero .eyebrow{ color:#bcd0ee; display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.reg-hero h1{ color:#fff; margin-top:.5rem; }
.reg-hero p{ color:#cbd9ec; max-width:60ch; }

/* Course listing grid */
.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.course-tile{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.8rem; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.course-tile:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.course-tile .tag{ display:inline-flex; gap:.5rem; font-size:.78rem; color:var(--muted); margin-bottom:.6rem; }
.course-tile .tag span{ background:var(--gray); border-radius:999px; padding:.2rem .65rem; }
.course-tile h3{ margin-bottom:.5rem; }
.course-tile p.desc{ color:var(--muted); font-size:.92rem; flex:1; }
.course-tile .price-row{ display:flex; align-items:baseline; justify-content:space-between; margin:1rem 0 1.2rem; }
.course-tile .price-row .from{ font-size:.78rem; color:var(--muted); display:block; }
.course-tile .price-row .amount{ font-size:1.4rem; font-weight:800; color:var(--navy); font-family:"Manrope",sans-serif; }

/* Scheduled class page */
.class-hero{ display:grid; grid-template-columns:1.5fr 1fr; gap:2.4rem; align-items:start; }
.class-info dl{ display:grid; grid-template-columns:140px 1fr; row-gap:.7rem; column-gap:1rem; font-size:.94rem; margin:1.4rem 0; }
.class-info dt{ color:var(--muted); font-weight:600; }
.class-info dd{ margin:0; color:var(--ink); }
.seats-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; padding:.3rem .7rem; border-radius:999px; }
.seats-badge.ok{ background:#eaf3ea; color:#237A57; }
.seats-badge.low{ background:#fdf1de; color:#a3660f; }
.seats-badge.soldout{ background:#fbe7e7; color:#b3261e; }

.buy-box{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow); position:sticky; top:100px;
}
.buy-box .price{ font-size:1.9rem; font-weight:800; color:var(--navy); font-family:"Manrope",sans-serif; margin-bottom:.2rem; }
.buy-box .price small{ font-size:.85rem; font-weight:600; color:var(--muted); }
.qty-selector{ display:flex; align-items:center; gap:0; border:1.5px solid var(--border); border-radius:var(--radius); width:fit-content; margin:1rem 0; }
.qty-selector button{ width:40px; height:40px; border:none; background:var(--gray); font-size:1.1rem; font-weight:700; color:var(--navy); cursor:pointer; }
.qty-selector button:first-child{ border-radius:var(--radius) 0 0 var(--radius); }
.qty-selector button:last-child{ border-radius:0 var(--radius) var(--radius) 0; }
.qty-selector input{ width:52px; height:40px; border:none; border-left:1.5px solid var(--border); border-right:1.5px solid var(--border); text-align:center; font-size:1rem; font-weight:700; }
.buy-box .btn{ width:100%; justify-content:center; }
.buy-box .note{ font-size:.78rem; color:var(--muted); margin-top:.8rem; }
.cart-msg{ font-size:.85rem; margin-top:.7rem; padding:.6rem .8rem; border-radius:6px; display:none; }
.cart-msg.show{ display:block; }
.cart-msg.success{ background:#eaf3ea; color:#237A57; }
.cart-msg.error{ background:#fbe7e7; color:#b3261e; }

.detail-block{ margin-top:2.4rem; }
.detail-block h3{ font-size:1.05rem; margin-bottom:.5rem; }
.detail-block p, .detail-block li{ color:var(--muted); font-size:.94rem; }

/* Cart page */
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{ text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:.7rem; border-bottom:2px solid var(--border); }
.cart-table td{ padding:1rem .7rem; border-bottom:1px solid var(--border); vertical-align:middle; font-size:.92rem; }
.cart-table .item-name{ font-weight:700; color:var(--navy); }
.cart-table .item-meta{ font-size:.82rem; color:var(--muted); margin-top:.2rem; }
.cart-table .remove-link{ color:#b3261e; font-size:.82rem; font-weight:600; cursor:pointer; }
.cart-qty{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--border); border-radius:6px; }
.cart-qty button{ width:30px; height:30px; border:none; background:var(--gray); font-weight:700; cursor:pointer; }
.cart-qty input{ width:38px; height:30px; border:none; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font-weight:700; }
.cart-summary{ max-width:340px; margin-left:auto; margin-top:1.6rem; }
.cart-summary .row{ display:flex; justify-content:space-between; padding:.4rem 0; font-size:.92rem; color:var(--muted); }
.cart-summary .row.total{ font-weight:800; color:var(--navy); font-size:1.15rem; border-top:1px solid var(--border); margin-top:.4rem; padding-top:.8rem; }
.cart-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:1.8rem; flex-wrap:wrap; gap:1rem; }
.empty-cart{ text-align:center; padding:3rem 1rem; color:var(--muted); }

/* Checkout stepper */
.steps-bar{ display:flex; justify-content:center; gap:2.4rem; margin-bottom:2.4rem; }
.steps-bar .step{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--muted); font-weight:600; }
.steps-bar .step .n{ width:26px; height:26px; border-radius:50%; background:var(--gray); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.steps-bar .step.active{ color:var(--navy); }
.steps-bar .step.active .n{ background:var(--navy); color:#fff; }
.steps-bar .step.done .n{ background:#237A57; color:#fff; }

.checkout-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:2.2rem; align-items:start; }
.checkout-summary{ background:var(--gray); border-radius:var(--radius); padding:1.5rem; position:sticky; top:100px; }
.checkout-summary h4{ margin-bottom:1rem; }
.checkout-summary .li{ display:flex; justify-content:space-between; font-size:.88rem; padding:.35rem 0; color:var(--ink); }
.checkout-summary .li .sub{ color:var(--muted); font-size:.8rem; }

.attendee-block{ border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; margin-bottom:1.2rem; }
.attendee-block h4{ margin-bottom:1rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.checkbox-field{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--ink); margin:.6rem 0; }
.checkbox-field input{ margin-top:.2rem; }
.form-actions{ display:flex; justify-content:space-between; margin-top:1.6rem; }
.field-error{ color:#b3261e; font-size:.78rem; margin-top:-.2rem; }
.step-panel{ display:none; }
.step-panel.active{ display:block; }

/* Confirmation */
.confirm-box{ text-align:center; max-width:640px; margin:0 auto; }
.confirm-icon{ width:64px; height:64px; border-radius:50%; background:#eaf3ea; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; }
.confirm-icon svg{ width:30px; height:30px; stroke:#237A57; }

@media (max-width: 860px){
  .course-grid{ grid-template-columns:1fr; }
  .class-hero{ grid-template-columns:1fr; }
  .checkout-grid{ grid-template-columns:1fr; }
  .buy-box{ position:static; }
  .checkout-summary{ position:static; }
  .grid-2{ grid-template-columns:1fr; }
  .steps-bar{ gap:1.2rem; }
}