:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #06b6d4;
  --accent-2: #10b981;
  --shadow: 0 8px 24px rgba(16,24,40,0.08);
  --max-width: 60vw;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

html,body{height:100%;background:linear-gradient(180deg,var(--bg),#ffffff);margin:0;color:#0f172a}

.container{max-width:var(--max-width);margin:0 auto;padding:16px;margin-top:24px}

.reg-hero{ text-align:left;margin: 4px 0 20px;padding:8px 12px}
.reg-hero-title{font-weight:700;letter-spacing:-0.01em;font-size:26px;margin:0 0 4px;color:#0b1220}
.reg-hero-sub{color:var(--muted);margin:0;font-size:14px}

.reg-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px;border:1px solid rgba(15,23,42,0.04)}

.reg-desc{background:linear-gradient(180deg, rgba(14,165,233,0.04), rgba(16,185,129,0.02));border-radius:12px;padding:14px;color:#0f172a;margin-bottom:18px;font-size:14px}

.form-body{display:flex;gap:12px;flex-direction:column}
.form-group{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.form-group label{font-weight:600;color:#0f172a;font-size:14px;flex:0 0 200px}
.form-group .input-wrap{flex:1 1 auto;min-width:0}

input.form-control, textarea.form-control, select.form-control{
  box-sizing:border-box;width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(180deg,#ffffff,#fbfdff);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  font-size:14px;color:#0b1220;transition:box-shadow .15s, border-color .15s, transform .06s;min-width:0;max-width:100%;
}
input.form-control:focus, textarea.form-control:focus, select.form-control:focus{ outline:none; border-color:var(--accent); box-shadow:0 6px 18px rgba(6,182,212,0.12); transform:translateY(-1px) }

.radio, .checkbox{ margin:6px 0; }
.radio input[type="radio"], .checkbox input[type="checkbox"]{ width:18px; height:18px; flex-shrink:0; margin-top:2px }
.radio label, .checkbox label{ font-size:14px; display:flex; align-items:flex-start; gap:8px; cursor:pointer }

.price-summary{ display:flex; flex-direction:column; width:100%; margin-top:12px; }
.price-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 6px; }
.price-row + .price-row{ border-top:1px dashed rgba(15,23,42,0.04); }
.price-label{ color:var(--muted); font-weight:600; font-size:13px; }
.price-amount{ font-weight:700; font-size:14px; min-width:90px; text-align:right; }
.price-total-row{ padding-top:10px; border-top:3px solid rgba(15,23,42,0.06); margin-top:8px; display:flex; justify-content:space-between; align-items:center; }
.price-total-label{ color:#0b1220; font-weight:800; font-size:14px; }
.price-total-amount{ font-weight:900; font-size:14px; }
.final-total{ display:inline-block; background:transparent; color:#0b1220; font-weight:800; font-size:18px; padding:10px 8px 6px 8px; border-top:3px solid rgba(15,23,42,0.06); }

.form-actions{ margin-top:18px }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; font-weight:700; border:none; cursor:pointer; transition:transform .08s ease, box-shadow .12s ease; font-size:16px; justify-content:center; }
.btn:active{ transform:translateY(1px) }
#submitBtn.btn{ background:var(--accent-2); color:#fff; box-shadow: 0 10px 30px rgba(16,185,129,0.12); }
#submitBtn.btn[disabled]{ opacity:0.6; cursor:not-allowed; transform:none }

.help-block{ color:var(--muted); font-size:13px }

.reg-step{ display:none; max-width:100%; }
.reg-step-1{ display:block; }
#backBtn{ visibility:hidden; }

@media (max-width:780px){
  :root{ --max-width:100% }
  .form-group{ flex-direction:column; align-items:stretch }
  .form-group label{ flex:none; width:100%; margin-bottom:6px }
  .reg-hero{ text-align:center }
  .reg-hero-title{ font-size:20px }
  .btn{ width:100% !important; display:flex; font-size:16px; justify-content:center; }
}
@media (max-width:920px){
  .btn{ width:100%; display:flex; font-size:16px; justify-content:center; }
}

/** CKEDITOR OVERRIDES **/
.easyimage img{ max-width:100%; cursor:pointer; transition:opacity 0.2s; }
.easyimage img:hover{ opacity:0.9; }

/* Image Modal */
.image-modal-overlay{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.9); z-index:10000; align-items:center; justify-content:center; padding:20px; overflow:auto; }
.image-modal-overlay.active{ display:flex; }
.image-modal-container{ position:relative; display:flex; align-items:center; justify-content:center; height:100%; width:100%; }
.image-modal-content{ position:relative; max-width:100%; max-height:100%; overflow:auto; display:flex; align-items:center; justify-content:center; background:#000; border-radius:8px; padding:20px; }
.image-modal-content img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.image-modal-close{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.7); border:none; color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:24px; display:flex; align-items:center; justify-content:center; transition:all 0.2s; z-index:10001; }
.image-modal-close:hover{ background:rgba(0,0,0,0.9); transform:scale(1.1); }
@media (max-width:780px){ .image-modal-close{ width:40px; height:40px; font-size:20px; } }

#closedAlert{ margin-bottom:10px; background:#FF0303; color:white; }

/* Non-scrolling wrapper so the floating zoom controls stay in the pane's
   corner while the pages scroll underneath. */
.info-pdf-frame{ position:relative; width:100%; margin-bottom:24px; }
.info-pdf-container{ width:100%; max-height:80vh; overflow:auto; box-sizing:border-box; padding:10px; border:1px solid rgba(15,23,42,0.08); border-radius:8px; background:#f8fafc; -webkit-overflow-scrolling:touch; }
/* Phones show every page at full height (no zoom controls; pinch to zoom).
   991px matches the viewer's narrowBreakpoint. */
@media (max-width:991px){ .info-pdf-container{ max-height:none; overflow:visible; } }