/* RTA Registration — local, no external font fetch (prevents FOUT / layout jump) */
:root {
    --rta-red: #ee0000;
    --rta-blue: #171c8f;
    --rta-blue-dark: #12265e;
    --rta-purple: #6b4fa0;
    --rta-green: #00a651;
    --rta-border: #d5dbe3;
    --rta-text: #1f1f1f;
    --rta-muted: #666;
    --rta-bg: #ffffff;
    --card-min-h: 620px;
    --stepper-w: 188px;
    --btn-h: 46px;
    --input-h: 42px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --rta-step-red: #e00;
    --rta-step-line: #cccccc;
    --step-size: 28px;
    --step-line: 4px;
    --step-gap: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html[dir="ltr"] .reg-page,
html[dir="ltr"] .reg-page .reg-body {
    direction: ltr;
}

html[dir="rtl"] .reg-page,
html[dir="rtl"] .reg-page .reg-body {
    direction: rtl;
}

html, body {
    min-height: 100%;
    font-family: 'Segoe UI', Tahoma, 'Arial Unicode MS', Arial, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.5;
    background: var(--rta-bg);
    color: var(--rta-text);
    direction: rtl;
}


a { color: var(--rta-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

/* ── RTA top bar (pages 05+) ── */
.rta-topbar {
    background: var(--rta-red);
    color: #fff;
    font-size: var(--fs-sm);
    line-height: 1.4;
    padding: 11px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
}
.rta-topbar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.rta-topbar nav a { color: #fff; text-decoration: none; font-size: var(--fs-sm); }
.rta-topbar .topbar-left { display: flex; align-items: center; gap: 18px; font-size: var(--fs-sm); }
.rta-topbar .lang-link { color: #fff; font-size: var(--fs-sm); }

/* ── Page shell ── */
.reg-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rta-bg);
    contain: layout style;
}

.reg-body {
    flex: 1;
    padding: 16px 40px 40px;
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
}

.radio-list,
.radio-group-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.radio-list .radio-row,
.radio-group-grid .radio-row {
    width: 100%;
}



.breadcrumbs {
    font-size: var(--fs-sm);
    color: var(--rta-purple);
    margin-bottom: 6px;
    line-height: 1.7;
    min-height: 22px;
}
.breadcrumbs a { color: var(--rta-purple); }
.breadcrumbs span { color: #999; margin: 0 5px; }

.page-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    clear: both;
}

/* ── Application card — fixed height prevents jump ── */
.app-card {
    background: #fff;
    border: 1px solid var(--rta-border);
    min-height: var(--card-min-h);
    contain: layout;
}

.app-card-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-height: var(--card-min-h);
}


/* ── Registration pages are English / LTR ── */
html[dir="ltr"] body,
html[dir="ltr"] .reg-page,
html[dir="ltr"] .reg-page .reg-body,
html[dir="ltr"] .reg-page .app-card,
html[dir="ltr"] .reg-page .app-card-body {
    direction: ltr;
}

.reg-page .app-card {
    min-height: 0;
}

.app-ref-bar {
    height: 42px;
    padding: 0 22px;
    background: var(--rta-blue);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 42px;
}

/* ── Progress stepper ──
   Active step on top, red line beside the form down to the first upcoming step,
   upcoming steps listed under the form. Lines stop at circle edges. */
.reg-flow.app-card-body {
    display: block;
    min-height: 0;
    padding: 22px 24px 26px 16px;
    text-align: left;
}

.reg-flow-head,
.reg-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: var(--step-size) minmax(0, 1fr);
    column-gap: var(--step-gap);
    align-items: start;
}

.reg-flow-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--step-size);
    height: var(--step-size);
    border: 2px solid var(--rta-step-line);
    border-radius: 50%;
    background: #fff;
}

.reg-flow-marker.is-active {
    border: 3px solid var(--rta-step-red);
}

.reg-flow-marker.is-active::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rta-step-red);
}

.reg-flow-title {
    margin: 0;
    padding-top: calc((var(--step-size) - 20px) / 2);
    font-size: 15px;
    line-height: 20px;
    color: #8e8e8e;
}

.reg-flow-head .reg-flow-title {
    color: var(--rta-blue);
    font-weight: 700;
}

.reg-flow-head::after,
.reg-flow-body::before,
.reg-flow-step::after {
    content: "";
    position: absolute;
    left: calc((var(--step-size) - var(--step-line)) / 2);
    width: var(--step-line);
    background: var(--rta-step-red);
}

.reg-flow-head::after,
.reg-flow-step::after {
    top: var(--step-size);
    bottom: 0;
}

.reg-flow-body {
    position: relative;
    padding-left: calc(var(--step-size) + var(--step-gap));
}

.reg-flow-body::before {
    top: 0;
    bottom: 0;
}

.reg-flow-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reg-flow-step {
    padding-bottom: 22px;
}

.reg-flow-step::after {
    background: var(--rta-step-line);
}

.reg-flow-step:last-child {
    padding-bottom: 0;
}

.reg-flow-step:last-child::after {
    display: none;
}

.reg-flow .app-main {
    min-height: 0;
    margin: 0;
    padding: 20px 0 28px;
    text-align: left;
}

.reg-flow .phasesView {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ── Form elements ── */
.section-heading {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
}

.question-label {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: #222;
}

.radio-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    cursor: pointer;
    text-align: left;
}

.radio-circle {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #b5b5b5;
    border-radius: 50%;
    background: #fff;
}

.radio-row.selected .radio-circle {
    border-color: var(--rta-step-red);
}

.radio-row.selected .radio-circle::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rta-step-red);
}

.radio-content { flex: 1; min-width: 0; }
.radio-title { font-size: 15px; font-weight: 600; color: #222; line-height: 24px; }
.radio-sub { font-size: var(--fs-sm); color: var(--rta-muted); margin-top: 2px; line-height: 1.55; }

.sub-question { margin-top: 18px; padding-top: 20px; border-top: 1px solid #e6e9ee; }

.field-row { display: flex; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.field-group { flex: 1 1 220px; min-width: 0; }
.field-label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}
.field-label .req { color: var(--rta-red); }

.field-input,
.field-select {
    width: 100%;
    height: var(--input-h);
    padding: 0 14px;
    border: 1px solid #bcc5d1;
    border-radius: 0;
    font-family: inherit;
    font-size: var(--fs-md);
    background: #fff;
    color: #222;
    line-height: var(--input-h);
}
.field-input:focus,
.field-select:focus {
    outline: none;
    border-color: var(--rta-blue);
    box-shadow: 0 0 0 2px rgba(23, 28, 143, .12);
}

.date-input-wrap { position: relative; }
.date-input-wrap .field-input,
.date-input-wrap .date-mask-input {
    padding-right: 48px;
    padding-left: 14px;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}
.date-input-wrap .field-input::placeholder,
.date-input-wrap .date-mask-input::placeholder {
    color: #9aa0a8;
    letter-spacing: 0.5px;
}
.date-input-wrap .cal-icon {
    position: absolute;
    right: 10px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
}
.upload-card { cursor: pointer; }
.upload-card:hover { border-color: var(--rta-blue); }
.upload-card .upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.upload-card.has-file .upload-thumb-inner { display: none; }


/* ── Upload cards — fixed size, no img jump ── */
.upload-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.upload-card {
    flex: 1;
    min-width: min(240px, 100%);
    border: 1px solid var(--rta-border);
    padding: 14px;
    text-align: center;
    background: #fff;
}
.upload-card .upload-label { font-size: var(--fs-base); font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.upload-card .upload-label .req { color: var(--rta-red); }
.upload-thumb {
    width: 100%;
    height: 100px;
    background: #eef1f5;
    border: 1px solid #dde3ea;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.upload-thumb-inner {
    width: 72px;
    height: 54px;
    background: linear-gradient(135deg, #dce3ec 0%, #c8d2de 100%);
    border: 1px solid #b8c4d0;
}
.upload-filename { font-size: var(--fs-xs); color: var(--rta-muted); word-break: break-all; line-height: 1.4; margin-top: 6px; }
.upload-filename:empty,
.upload-filename[hidden] { display: none !important; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
    color: var(--rta-blue);
    font-weight: 700;
    margin-bottom: 18px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    padding: 0;
    min-height: 24px;
}
.back-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.vehicle-brand { font-size: var(--fs-xl); font-weight: 700; color: var(--rta-blue); margin-bottom: 4px; line-height: 1.3; }
.vehicle-meta { font-size: var(--fs-base); color: #444; margin-bottom: 14px; }
.vehicle-detail-row { font-size: var(--fs-base); color: #555; margin-bottom: 5px; line-height: 1.5; }
.chassis-display {
    background: #f5f7fa;
    border: 1px solid #dde3ec;
    padding: 14px 18px;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 1px;
    margin: 18px 0;
    color: #222;
    min-height: 52px;
    line-height: 1.4;
}

.status-block { margin-bottom: 20px; }
.status-block-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
.status-block-title--blue { color: var(--rta-blue); }
.status-block-text { font-size: var(--fs-base); color: #555; line-height: 1.65; }
.status-ref { font-size: var(--fs-sm); color: #888; margin-top: 5px; }

.status-ok { display: flex; align-items: flex-start; gap: 12px; }
.status-ok-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rta-green);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.info-banner {
    background: #e8f4fd;
    border: 1px solid #b3d9f2;
    padding: 16px 18px;
    margin-top: 22px;
}
.info-banner-title { font-size: var(--fs-md); font-weight: 700; color: var(--rta-blue); margin-bottom: 10px; }
.info-banner ul { padding-inline-start: 20px; font-size: var(--fs-base); color: #444; line-height: 1.85; }

.fines-bar {
    background: #fff8ee;
    border-top: 3px solid #f5a623;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    min-height: 56px;
}
.fines-amount { font-size: var(--fs-md); font-weight: 700; color: #222; }
.fines-amount span { color: var(--rta-red); font-size: var(--fs-lg); }
.fines-note { font-size: var(--fs-sm); color: var(--rta-muted); display: flex; align-items: center; gap: 6px; }
.fines-tabs { display: flex; gap: 14px; font-size: var(--fs-sm); }
.fines-tab { display: flex; align-items: center; gap: 5px; color: var(--rta-muted); }
.fines-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rta-red); flex-shrink: 0; }

.buy-plate-banner {
    background: var(--rta-blue);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    min-height: 72px;
}
.buy-plate-banner strong { font-size: var(--fs-md); }
.buy-plate-banner p { font-size: var(--fs-sm); opacity: .92; margin-top: 5px; line-height: 1.55; }
.buy-plate-link {
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}
.btn-white-outline {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    height: 38px;
    padding: 0 18px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}


.plate-section-title {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 10px 0 12px;
    line-height: 1.4;
}

.plate-pair-rows > .plate-section-title {
    margin: 14px 0 10px;
}
.plate-pair-rows > .plate-section-title:first-child {
    margin-top: 4px;
}
.plate-pair-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.plate-pair-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.plate-pair-row .plate-visual--long {
    position: relative;
    top: 14px;
}
.plate-pair-row .plate-option:first-child {
    align-items: flex-start;
    text-align: left;
}
.plate-pair-row .plate-option:first-child .plate-option-header {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}
.plate-pair-row .plate-option:last-child {
    align-items: flex-end;
    text-align: right;
}
.plate-pair-row .plate-option:last-child .plate-option-header {
    width: 100%;
    justify-content: flex-end;
    text-align: right;
}

.plate-pair-row--sport {
    grid-template-columns: 1fr;
    justify-items: center;
}
.plate-pair-row--sport .plate-option {
    align-items: center;
    text-align: center;
}
.plate-pair-row--sport .plate-option-header {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.plate-option {
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: transparent;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    box-shadow: none;
    outline: none;
}
.plate-option:hover,
.plate-option.selected {
    border: none;
    background: transparent;
    box-shadow: none;
}
.plate-option.selected .plate-option-header {
    color: var(--rta-blue);
}
.plate-option.selected .plate-visual {
    outline: 2px solid var(--rta-green);
    outline-offset: 3px;
}

.plate-option-header {
    font-size: var(--fs-base);
    font-weight: 600;
    margin: 0 0 8px;
    min-height: 20px;
    line-height: 1.3;
}

.plate-visual {
    background: #fff;
    border: 2px solid #222;
    color: #111;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    flex-shrink: 0;
}

.plate-visual--long {
    width: 100%;
    max-width: 150px;
    height: 46px;
    padding: 3px 8px;
    border-radius: 3px;
}
.plate-visual--long .dubai-tag {
    font-size: 7px;
    line-height: 1;
    margin-bottom: 1px;
}
.plate-visual--long .plate-code {
    font-size: 13px;
    letter-spacing: 0.08em;
}

.plate-visual--short {
    width: 100%;
    max-width: 108px;
    height: 70px;
    padding: 8px 8px;
    border-radius: 3px;
}
.plate-visual--short .dubai-tag {
    font-size: 8px;
    line-height: 1;
    margin-bottom: 5px;
}
.plate-visual--short .plate-code {
    font-size: 14px;
    letter-spacing: 0.08em;
}

.plate-visual--sport {
    width: 100%;
    max-width: 92px;
    height: 92px;
    padding: 8px 6px;
    border-radius: 10px;
    border-width: 3px;
}
.plate-visual--sport .dubai-tag {
    font-size: 8px;
    line-height: 1;
    margin-bottom: 6px;
}
.plate-visual--sport .plate-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    letter-spacing: 0.06em;
}
.plate-visual--sport .plate-letter {
    display: block;
    font-size: 17px;
}
.plate-visual--sport .plate-digits {
    display: block;
}

.plate-visual .dubai-tag {
    display: block;
    color: var(--rta-blue);
    letter-spacing: 0.04em;
    font-weight: 800;
}
.plate-visual .plate-code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.plate-visual .plate-letter,
.plate-visual .plate-digits {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.optional-plate-visual {
    margin-top: 12px;
    margin-bottom: 4px;
}

.optional-plate {
    border: 1px solid var(--rta-border);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    margin-bottom: 8px;
    background: #f8faff;
}
.optional-plate input[type=checkbox] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--rta-blue); flex-shrink: 0; }
.optional-plate-text { font-size: var(--fs-base); color: #444; line-height: 1.65; }

.delivery-options { display: flex; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.delivery-option { flex: 1; min-width: min(280px, 100%); }


.map-section--centers-only {
    height: auto;
    min-height: 0;
    max-height: none;
}
.map-section--centers-only .center-list {
    width: 100%;
    min-width: 0;
    border-left: none;
    height: 300px;
    max-height: 300px;
}
.map-section--centers-only .center-items {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.map-section--centers-only .center-item {
    flex-shrink: 0;
}
.center-picker[hidden] {
    display: none !important;
}

.map-section {
    border: 1px solid var(--rta-border);
    display: flex;
    overflow: hidden;
    height: 380px;
    min-height: 380px;
}
.center-list {
    width: 290px;
    min-width: 290px;
    border-left: 1px solid var(--rta-border);
    display: flex;
    flex-direction: column;
    background: #fff;
}
.center-search { padding: 12px; border-bottom: 1px solid #edf0f4; flex-shrink: 0; }
.center-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #bcc5d1;
    font-family: inherit;
    font-size: var(--fs-base);
}
.center-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.center-item {
    padding: 13px 16px;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
    min-height: 58px;
}
.center-item:hover { background: #f5f7fa; }
.center-item.selected { background: var(--rta-blue); color: #fff; }
.center-item-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.4; }
.center-item-hours { font-size: var(--fs-xs); opacity: .85; margin-top: 4px; }

.map-area {
    flex: 1;
    background-color: #e8edf2;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 380"><rect fill="%23e8edf2" width="600" height="380"/><path d="M0 190 Q150 140 300 190 T600 190" stroke="%23b0c4d8" fill="none" stroke-width="2"/><circle cx="300" cy="170" r="10" fill="%23173278"/></svg>');
    background-size: cover;
    background-position: center;
    position: relative;
}
.map-popup {
    position: absolute;
    top: 28%;
    left: 42%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
    width: 220px;
    min-height: 180px;
    font-size: var(--fs-sm);
}
.map-popup-title { font-weight: 700; margin-bottom: 10px; font-size: var(--fs-base); }
.map-popup table { width: 100%; border-collapse: collapse; }
.map-popup td { padding: 3px 4px; font-size: var(--fs-xs); line-height: 1.4; }

.warning-box {
    background: #fff8e1;
    border: 1px solid #ffe082;
    padding: 14px 18px;
    font-size: var(--fs-base);
    color: #555;
    margin: 18px 0;
    line-height: 1.55;
    min-height: 48px;
}

.review-card {
    border: 1px solid var(--rta-border);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 22px;
    min-height: 200px;
}
.review-col { flex: 1; min-width: min(280px, 100%); padding: 22px; }
.review-col + .review-col { border-inline-start: 1px solid #edf0f4; }
.review-col-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 16px; }
.review-field { margin-bottom: 12px; }
.review-field-label { font-size: var(--fs-sm); color: #888; line-height: 1.4; }
.review-field-value { font-size: var(--fs-md); font-weight: 600; color: #222; line-height: 1.45; }

.terms-box {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 22px;
}
.terms-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.45;
    cursor: pointer;
}
.terms-check input {
    width: 22px;
    height: 22px;
    accent-color: #00a651;
    flex-shrink: 0;
    cursor: pointer;
}
.terms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-sm);
    color: #444;
    line-height: 1.95;
}
.terms-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.terms-list .terms-num {
    flex-shrink: 0;
    min-width: 1.4em;
    font-weight: 700;
    color: #222;
}
.terms-list .terms-text {
    flex: 1;
    min-width: 0;
}
#confirmReviewBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.uae-pass-section { text-align: center; padding: 22px 0; }
.uae-pass-text { font-size: var(--fs-md); color: #444; margin-bottom: 18px; line-height: 1.5; }
.uae-pass-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 28px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    color: #222;
}
.uae-pass-logo {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--rta-blue), var(--rta-green));
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.payment-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; table-layout: fixed; }
.payment-table th {
    background: #f5f7fa;
    padding: 12px 16px;
    text-align: start;
    font-size: var(--fs-base);
    font-weight: 700;
    border-bottom: 2px solid #dde3ec;
    height: 44px;
}
.payment-table td {
    padding: 12px 16px;
    font-size: var(--fs-base);
    border-bottom: 1px solid #edf0f4;
    height: 44px;
    vertical-align: middle;
}
.payment-table td:last-child { text-align: end; font-weight: 600; }

.payment-modal {
    background: #f5f7fa;
    border: 1px solid var(--rta-border);
    border-radius: 6px;
    padding: 36px 32px;
    text-align: center;
    width: 100%;
    max-width: 440px;
    min-height: 220px;
    margin: 32px auto 0;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.payment-logo {
    margin: 0 auto 16px;
    line-height: 0;
    display: flex;
    justify-content: center;
}
.payment-logo img {
    width: 200px;
    height: auto;
    max-width: 100%;
    display: block;
}
.payment-table th,
.payment-table td {
    font-size: var(--fs-base);
}
.payment-total {
    font-size: var(--fs-base);
    color: #333;
    margin-bottom: 18px;
    line-height: 1.5;
}
.payment-total strong {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--rta-blue);
}
.payment-modal .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-base);
    padding: 0 28px;
    line-height: 1;
    height: var(--btn-h);
}

/* ── Buttons ── */
.btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 28px;
    padding-top: 18px;
    min-height: 64px;
    align-items: center;
}
.btn-primary {
    background: var(--rta-blue);
    color: #fff;
    border: none;
    height: var(--btn-h);
    min-width: 110px;
    padding: 0 42px;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    line-height: var(--btn-h);
    text-align: center;
    flex-shrink: 0;
}
.btn-primary:hover { background: var(--rta-blue-dark); }
.btn-row--full .btn-primary {
    width: 100%;
    box-sizing: border-box;
}
.btn-outline {
    background: #fff;
    color: var(--rta-blue);
    border: 1px solid var(--rta-blue);
    height: var(--btn-h);
    min-width: 110px;
    padding: 0 42px;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    line-height: calc(var(--btn-h) - 2px);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .reg-body { padding: 12px 16px 28px; }
    .reg-flow.app-card-body { padding: 18px 16px 22px 12px; }
    .map-section { flex-direction: column; height: auto; min-height: 380px; }
    .center-list { width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--rta-border); }
}


/* Completed steps remain visible with teal check */
.reg-flow-done {
    display: grid;
    grid-template-columns: var(--step-size) minmax(0, 1fr);
    column-gap: var(--step-gap);
    position: relative;
    align-items: start;
    padding-bottom: 10px;
}
.reg-flow-done::after {
    content: "";
    position: absolute;
    left: calc((var(--step-size) - var(--step-line)) / 2);
    top: var(--step-size);
    bottom: 0;
    width: var(--step-line);
    background: #00b0b9;
}
.reg-flow-marker.is-done {
    border: 0;
    background: transparent;
    background-image: url(/content/6db2e3b06c854b4dbb450b6b789d7f65.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.reg-flow-marker.is-done::after { display: none; }
.reg-flow-done-text { min-width: 0; }
.reg-flow-done .reg-flow-title {
    color: var(--rta-blue);
    font-weight: 700;
    padding-top: calc((var(--step-size) - 20px) / 2);
}
.reg-flow-status-done {
    display: block;
    color: #00b0b9;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    padding-bottom: 4px;
}
/* When there are completed steps above, head connector from previous is teal into active */
.reg-flow-done + .reg-flow-head .reg-flow-marker.is-active {
    border-color: var(--rta-step-red);
}
.back-link {
    line-height: 1 !important;
}
.back-link svg {
    display: block;
}