/* Registration form – tokens from Figma node 4011:2979 */
:root {
  --rg-outline: #dddfe5;
  --rg-field: #fafafa;
  --rg-label: #03351c;
  --rg-placeholder: #757575;
  --rg-price: #eb5757;
}
.reg-page { background: linear-gradient(180deg, #fff, #e4fff3); padding: 72px 0 112px; }
.reg-grid { display: grid; grid-template-columns: 650px 353px; gap: 39px; justify-content: center; align-items: start; padding: 0 16px; }
.reg-grid.single { grid-template-columns: 650px; }
.ico-24 { width: 24px; height: 24px; flex: none; object-fit: contain; }

.reg-card { background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(112,144,176,.2); overflow: hidden; min-width: 0; }
.reg-card-head { position: relative; padding: 40px 16px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
.reg-card-head .banner { position: absolute; left: 0; top: 0; width: 100%; height: 256px; object-fit: cover; }
.reg-card-head::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 256px; background: linear-gradient(180deg, rgba(0,255,142,.24), rgba(108,194,156,0)); z-index: 1; }
.reg-card-head > * { position: relative; z-index: 2; }
.reg-card-head .banner { z-index: 0; }
.reg-card-head .emblem { width: 172px; height: 67px; object-fit: cover; }
.reg-card-head h1 { margin: 0; font: 700 24px/normal 'Poppins', sans-serif; letter-spacing: .69px; text-shadow: 0 4px 13px rgba(3,71,53,.16); }
.reg-card-head p { margin: 0; font-size: 16px; line-height: 24px; color: #000; }

.reg-body { display: flex; flex-direction: column; gap: 32px; padding: 16px; }
.field { display: flex; flex-direction: column; gap: 12px; }
.field label, .field .headline { font: 500 16px/normal 'Manrope', sans-serif; letter-spacing: .4px; color: var(--rg-label); }
.field label strong { font-weight: 500; }
.field label { font-weight: 500; }
.field .headline { font-weight: 700; letter-spacing: .2px; }
.control {
  width: 100%; padding: 16px 24px; background: var(--rg-field); border: 1px solid var(--rg-outline); border-radius: 12px;
  font: 400 16px/1.4 'Lato', sans-serif; letter-spacing: .4px; color: #1e2a24; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.control::placeholder { color: var(--rg-placeholder); }
.control:focus { border-color: var(--ej-emerald); box-shadow: 0 0 0 3px rgba(5,120,61,.15); background: #fff; }
.control.is-invalid { border-color: #d93025; }
.control.select {
  appearance: none; -webkit-appearance: none; padding-right: 56px; cursor: pointer; color: #1e2a24;
  background: var(--rg-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%23424242' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 24px center;
}
.control.select:invalid { color: var(--rg-placeholder); }
.control.select option { color: #1e2a24; }
.field-error { color: #d93025; font-size: 14px; line-height: 1.4; }
.reg-alert { padding: 12px 16px; border-radius: 12px; background: #fdecea; border: 1px solid #f5c2bd; color: #8a1c13; font-size: 15px; line-height: 1.5; }

.event-hint { margin: 0; padding: 12px 16px; border: 1px dashed var(--rg-outline); border-radius: 12px; color: #666; font-size: 14px; line-height: 1.5; }
.event-list { display: flex; flex-direction: column; gap: 12px; }

.event-card {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: #fff; cursor: pointer;
  border: 1px solid var(--rg-outline); border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.event-card:hover { border-color: #9bd3b3; }
.event-card input { position: absolute; opacity: 0; pointer-events: none; }
.event-card .cb { width: 24px; height: 24px; flex: none; border: 1.5px solid var(--rg-outline); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.event-card .cb img { width: 24px; height: 24px; object-fit: contain; opacity: 0; }
.event-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.event-card .ttl { font-size: 16px; color: #031133; }
.event-card .quota { font-size: 14px; color: #8a8a8a; }
.event-card .quota b { font-weight: 500; }
.event-card .price { font-weight: 600; font-size: 16px; color: var(--rg-price); white-space: nowrap; }
.event-card:has(input:checked) .cb { background: #008fd7; border-color: #008fd7; }
.event-card:has(input:checked) .cb img { opacity: 1; filter: brightness(0) invert(1); }
.event-card:has(input:checked) .ttl { color: #15ba60; font-weight: 500; }
.event-card:has(input:focus-visible) { outline: 3px solid rgba(5,120,61,.35); outline-offset: 2px; }
.event-card.is-full { opacity: .55; cursor: not-allowed; background: #f5f5f5; }
.event-card.is-full .quota { color: #c0392b; }
.event-card[hidden] { display: none; }

.reg-submit { display: flex; justify-content: center; }
.btn-submit { gap: 8px; padding-left: 24px; padding-right: 16px; cursor: pointer; }
.btn-submit img { filter: brightness(0) invert(1); }
.btn-submit:disabled { opacity: .6; cursor: wait; }

.reg-side { display: flex; flex-direction: column; gap: 40px; position: sticky; top: 84px; }
.pay-card { background: linear-gradient(180deg, #15ba60, #05783d); border-radius: 16px; box-shadow: 0 16px 40px rgba(112,144,176,.2); padding: 16px; display: flex; flex-direction: column; gap: 16px; align-items: center; color: #fff; }
.pay-title { display: flex; align-items: center; gap: 4px; font: 600 20px/normal 'Poppins', sans-serif; }
.pay-title img, .pay-divider { filter: none; }
.pay-divider { width: 100%; height: 1px; }
.pay-empty { margin: 0; text-align: center; font-weight: 500; font-size: 14px; line-height: normal; }
.pay-rows { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.pay-line { display: flex; gap: 8px; align-items: center; padding: 0 4px; font-weight: 500; font-size: 16px; line-height: normal; }
.pay-line .l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pay-line .r { flex: 1; text-align: right; letter-spacing: .3px; }
.pay-line .r.muted { font-size: 13px; opacity: .85; }
.pay-total { width: 100%; display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: #15ba60; font-weight: 700; letter-spacing: .3px; }
.pay-total span:first-child { flex: 1; font-size: 16px; }
.pay-total span:last-child { flex: 1; text-align: right; font: 700 18px/normal 'Manrope', sans-serif; }

.contact-card { background: #fdd849; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.contact-card .title { display: flex; align-items: center; gap: 10px; font: 700 22px/normal 'Lato', sans-serif; color: #424242; }
.contact-card .row-link { display: flex; align-items: center; gap: 8px; color: #424242; text-decoration: none; font: 600 16px/28px 'Manrope', sans-serif; }
.contact-card .row-link span { flex: 1; text-decoration: underline; }
.contact-card .row-link:hover { color: #000; }

.code-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 12px; background: #f2fff8; border: 1px dashed var(--ej-emerald); }
.code-box span { font-size: 14px; color: #555; }
.code-box strong { font: 700 28px/1.2 'Poppins', sans-serif; letter-spacing: 2px; color: var(--ej-emerald-deep); }
.summary { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; margin: 0; }
.summary dt { font: 500 14px/1.5 'Manrope', sans-serif; color: #666; }
.summary dd { margin: 0; font-weight: 600; word-break: break-word; }
.summary dd.amount { color: var(--rg-price); font-size: 20px; }
.reg-note { padding: 12px 16px; border-radius: 12px; background: #fffbf4; border: 1px solid #f3e3b8; font-size: 14px; line-height: 1.5; }

@media (max-width: 1099.98px) {
  .reg-grid, .reg-grid.single { grid-template-columns: minmax(0, 650px); }
  .reg-side { position: static; order: 2; }
}
@media (max-width: 575.98px) {
  .reg-page { padding: 32px 0 64px; }
  .control { padding: 14px 16px; }
  .event-card { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .event-card .price { width: 100%; padding-left: 36px; }
  .summary { grid-template-columns: 1fr; gap: 2px; }
  .summary dd { margin-bottom: 10px; }
}

/* ---------- payment page (Figma 4012:5070) ---------- */
.reg-body .total-box, .reg-body .va-wrap, .reg-body .how, .reg-body .status-box { font-family: 'Open Sans', sans-serif; }
.total-box { display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; background: #fff; border: 1px solid #e5e7ea; border-radius: 16px; text-align: center; }
.total-box .inv { font-weight: 600; font-size: 14px; line-height: 20px; color: #30333c; }
.total-box .lbl { font-size: 14px; line-height: 20px; color: #4f5563; margin-bottom: -12px; }
.total-box .amount { font-weight: 600; font-size: 24px; line-height: 32px; color: #40472d; }
.total-box .amount-hint { margin: -8px 0 0; font-size: 12px; line-height: 18px; color: #4f5563; }
.total-box .timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #f4f4f6; border: 1px solid #e5e7ea; border-radius: 8px; font-size: 14px; line-height: 20px; color: #4f5563; }
.total-box .timer .t { font-weight: 600; color: #2d76f9; font-variant-numeric: tabular-nums; }
.total-box .timer .t.is-over { color: #d93025; }

.va-wrap { display: flex; flex-direction: column; gap: 16px; }
.va-title { margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: #40472d; }
.va-number { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: #eff6ff; }
.va-number .start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.va-number .num { font-weight: 600; font-size: 24px; line-height: 32px; color: #30333c; font-variant-numeric: tabular-nums; }
.bca-logo { position: relative; flex: none; width: 44.8px; height: 32px; background: #0060af; border-radius: 2.56px; }
.bca-logo img { position: absolute; left: 8.57%; top: 34.02%; width: 81.41%; height: 33.68%; max-width: none; }
.copy-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; background: #dae9ff; border: 1px solid #2d76f9; border-radius: 12px; color: #2d76f9; font: 400 12px/18px 'Open Sans', sans-serif; cursor: pointer; }
.copy-btn:hover { background: #c9ddff; }
.copy-btn.is-done { background: #d9f7e6; border-color: #15ba60; color: #0b7a3d; }
.va-holder { text-align: center; font-size: 14px; line-height: 20px; color: #727b8e; }
.va-holder strong { color: #30333c; }
.va-divider { width: 100%; height: 1px; display: block; }

.how { display: flex; flex-direction: column; gap: 16px; }
.how h2 { margin: 0; font: 600 16px/20px 'Poppins', sans-serif; color: #40472d; }
.how ol { list-style: none; margin: 0; padding: 4px 16px; display: flex; flex-direction: column; gap: 16px; }
.how li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: #000; }
.how .n { flex: none; width: 24px; height: 24px; border-radius: 32px; background: #03351c; color: #fcfcfd; font-size: 12px; line-height: 18px; display: flex; align-items: center; justify-content: center; }

.status-box { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 24px 12px; border: 1px solid #e5e7ea; border-radius: 16px; }
.status-box h2 { margin: 0; font: 600 20px/28px 'Poppins', sans-serif; color: #40472d; }
.status-box p { margin: 0; font-size: 14px; line-height: 22px; color: #4f5563; }

@media (max-width: 575.98px) {
  .va-number .num { font-size: 20px; }
}

/* ---------- upload proof (Figma 4013:5614) ---------- */
.upload-wrap { width: 100%; max-width: 560px; min-width: 295px; margin: 0 auto; }
.upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; background: #fcfcfd; border: 1px dashed #b7bbc5; border-radius: 16px; transition: border-color .15s, background .15s; }
.upload-zone.is-drag { border-color: var(--ej-emerald); background: #f2fff8; }
.upload-zone.is-invalid { border-color: #d93025; }
.zone-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.zone-hint { margin: 0; font: 400 16px/24px 'Poppins', sans-serif; letter-spacing: -.16px; color: #777; }
.btn-outline-ej { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 24px; background: transparent; border: 1px solid #0b3520; border-radius: 32px; color: #03351c; font: 700 14px/22.4px 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s; }
.btn-outline-ej:hover { background: #e9f7ef; }
.btn-outline-ej.btn-sm-ej { padding: 4px 16px; font-size: 13px; }
.visually-hidden:focus-visible + .zone-empty .btn-outline-ej,
.upload-zone:has(input:focus-visible) .btn-outline-ej { outline: 3px solid rgba(5,120,61,.35); outline-offset: 2px; }

.zone-preview { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zone-preview[hidden], .zone-empty[hidden] { display: none; }
.zone-preview .thumb { width: 100%; max-height: 320px; display: flex; justify-content: center; background: #fff; border: 1px solid #e5e7ea; border-radius: 12px; padding: 8px; overflow: hidden; }
.zone-preview .thumb img { max-width: 100%; max-height: 300px; object-fit: contain; border-radius: 8px; }
.zone-preview .meta { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; }
.zone-preview .name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; color: #1e2a24; }
.zone-preview .size { font-size: 13px; color: #777; }
.zone-preview .actions { display: flex; align-items: center; gap: 16px; }
.link-remove { background: none; border: 0; padding: 0; color: #d93025; font-weight: 600; font-size: 13px; text-decoration: underline; cursor: pointer; }
#confirmBtn:disabled { opacity: .6; cursor: wait; }

/* ---------- registration confirmation (Figma 4013:6278) ---------- */
.reg-card-head .confetti { position: absolute; left: 0; top: 0; width: 100%; height: 225px; overflow: hidden; pointer-events: none; z-index: 1; }
.reg-card-head .confetti img { position: absolute; max-width: none; height: 201.72%; width: 124.07%; left: -12.03%; top: -23%; }
.info-card { display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; background: #fff; border: 1px solid #e5e7ea; border-radius: 16px; }
.info-title { padding: 8px 12px; background: #f4f4f6; border: 1px solid #e5e7ea; border-radius: 8px; text-align: center; font: 700 16px/25.6px 'Poppins', sans-serif; color: #27392f; }
.info-row { display: flex; gap: 16px; align-items: flex-start; font-size: 16px; line-height: 25.6px; color: #000; }
.info-row span { flex: 1; min-width: 0; max-width: 343px; word-break: break-word; }
.info-row span:last-child { text-align: right; }
@media (max-width: 575.98px) {
  .info-row { flex-direction: column; gap: 0; }
  .info-row span, .info-row span:last-child { max-width: none; text-align: left; }
  .info-row span:last-child { font-weight: 600; }
}

.timer-inline { font-size: 14px; color: #4f5563; }
.timer-inline .t { font-weight: 600; color: #2d76f9; font-variant-numeric: tabular-nums; }
.timer-inline .t.is-over { color: #d93025; }