/* Registration page layout. Styling only: element ids and the page's flow are untouched. */
:root {
  --bg: #06080f;
  --surface: #0f1526;
  --surface2: #161d30;
  --border: rgba(255, 255, 255, .11);
  --border2: rgba(255, 255, 255, .17);
  --text: #f3f6fc;
  --radius: 12px;
}

/* Background */
.bg-grid { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 75% 15%, #000, transparent) }
.bg-glow { top: -220px; left: auto; right: -160px; transform: none; width: 820px; height: 620px; background: radial-gradient(closest-side, rgba(244, 177, 23, .3), transparent) }
.bg-glow2 { bottom: auto; top: 280px; right: auto; left: -180px; width: 620px; height: 520px; background: radial-gradient(closest-side, rgba(62, 104, 255, .22), transparent) }

/* Two columns: message beside the form */
.page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 590px); gap: clamp(32px, 6vw, 88px); align-items: start; max-width: 1320px; margin-inline: auto; padding: clamp(40px, 9vh, 96px) clamp(18px, 4vw, 48px) 64px }
.header { position: sticky; top: clamp(40px, 9vh, 96px); margin: 0; text-align: right }
.logo-tag { gap: 10px; margin-bottom: 26px; padding: 0; background: none; border: 0; border-radius: 0 }
.logo-tag span { font-size: clamp(16px, 1.5vw, 20px); font-weight: 800; letter-spacing: 0; color: var(--text); direction: ltr; white-space: nowrap }
.logo-dot { width: 46px; height: 46px; background: url("https://i.ibb.co/JjrgnWSr/234655111-917472459111118-1870019201784409253-n.jpg") center / cover; box-shadow: none; animation: none }
.header h1 { font-family: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(40px, 5.6vw, 76px); font-weight: 900; line-height: 1.22; letter-spacing: -.5px; margin-bottom: 18px }
.header h1 em { background: linear-gradient(100deg, #ffd268, #f4b117 60%); -webkit-background-clip: text; background-clip: text; color: transparent }
.header p { max-width: 30em; margin: 0; font-size: clamp(15px, 1.4vw, 19px); color: #c8d1e3; line-height: 1.8 }

/* Form */
.form-card { max-width: none; border-radius: 18px; border-color: rgba(255, 255, 255, .15); box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .95), 0 0 80px -40px rgba(244, 177, 23, .55) }
.form-card::before { background: linear-gradient(90deg, #ffd268, #f4b117) }
.form-body { padding: clamp(20px, 3.4vw, 40px) }

.steps { margin-bottom: 28px }
.step-num { width: 38px; height: 38px; font-size: 15px; font-family: 'JetBrains Mono', monospace }
.step-label { font-size: clamp(12px, 1.05vw, 14px); white-space: nowrap }
.step.done .step-num { color: #06140e }

.field-group { margin-bottom: 20px }
.field-label { font-size: clamp(13px, 1.1vw, 15px); letter-spacing: 0; text-transform: none; color: #d5dcea }
.field-input { min-height: 52px; font-size: 16px; border-radius: 11px; background: #0b1120 }
.field-input:focus { background: #0b1120 }
.field-input::placeholder { color: #7786a0 }
.field-error { font-size: 13px; color: #ff8d8d }

.course-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) }
.course-label { padding: 15px; min-height: 76px; border-radius: 12px }
.course-label:hover, .sub-label:hover { border-color: rgba(244, 177, 23, .55) }
.course-code { font-size: 13px; direction: ltr; text-align: right }
.course-name { font-family: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); direction: ltr; text-align: right; unicode-bidi: plaintext }
.course-option input:checked + .course-label .course-radio::after { background: #1c1404 }
.course-option input:focus-visible + .course-label,
.sub-option input:focus-visible + .sub-label { outline: 2px solid #f4b117; outline-offset: 2px }

#price_hint { display: none }
.sub-grid { gap: 12px; margin-top: 12px }
#subGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
.sub-label { height: 100%; padding: 20px 10px 16px; border-radius: 12px }
.sub-title { font-family: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(13px, 1.1vw, 15px) }
.sub-desc { font-size: 12px }
.sub-popular { z-index: 1; top: -10px; font-size: 11px; padding: 3px 10px }

.pay-copy { min-height: 36px; padding: 4px 14px; border-radius: 9px; font-size: 13px; border-color: rgba(244, 177, 23, .5) }
.pay-copy:hover { background: rgba(244, 177, 23, .14) }
.pay-value { font-size: 14px }
.pay-row + .pay-row { margin-top: 12px }

.photo-upload { border-radius: 12px; background: #0b1120; padding: 26px 18px }
.upload-title { font-size: 15px }
.upload-sub { font-size: 13px; direction: ltr }
.preview-name { font-size: 14px; overflow-wrap: anywhere }
.preview-size, .preview-change { font-size: 13px }

.btn { min-height: 52px; padding: 12px; border-radius: 11px; font-size: 16px }
.btn-next { background: linear-gradient(135deg, #ffd268, #f4b117) }
.spinner { border-color: rgba(28, 20, 4, .25); border-top-color: #1c1404 }

.success-icon { color: #4ade96 }
.success-screen h2 { font-family: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif; font-size: clamp(22px, 2.4vw, 30px) }
.success-screen p, .success-info { font-size: 15px }

@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 22px 48px }
  .header { position: static; text-align: center }
  .logo-tag { margin-bottom: 12px }
  .logo-dot { width: 38px; height: 38px }
  .header h1 { font-size: clamp(27px, 7.4vw, 46px); margin-bottom: 6px }
  .header p { margin-inline: auto; font-size: clamp(13px, 2.4vw, 16px) }
}

@media (max-width: 520px) {
  #subGrid { gap: 8px }
  .sub-label { padding: 14px 5px 10px }
  .sub-icon { font-size: 18px; margin-bottom: 4px }
  .sub-title { font-size: clamp(11.5px, 3.3vw, 14px); line-height: 1.35; overflow-wrap: anywhere }
  .sub-desc { font-size: 11px; line-height: 1.4 }
  .sub-label > div:last-child { font-size: 12px !important; margin-top: 6px !important }
  .sub-popular { font-size: 10px; padding: 2px 7px; top: -9px }
  .step-num { width: 34px; height: 34px; font-size: 14px }
  .step-line { margin: 0 4px }
}

@media (max-width: 400px) {
  .step-label { display: none }
  .form-body { padding: 18px 14px }
}