/* =========================================================
   Registration wizard (registration.php) - body only.
   Header, breadcrumb and footer keep their style.css styles.

   Ported from the ICSET build. Every rule below is scoped to .rw, and the
   layout rules were already written against the --rw-* tokens, so the port
   only had to re-point those tokens at CompEdTech's red palette instead of
   ICSET's navy and mint. The handful of ICSET tokens the file also referenced
   (--navy, --mint, --surface-alt and friends) are declared here too, so no
   rule further down needs touching and nothing leaks out of .rw.
   ========================================================= */

.rw {
    /* ---- the wizard's own tokens, on this site's palette ---- */
    --rw-primary: var(--brand);
    --rw-primary-hover: var(--brand-dark);
    --rw-teal: var(--brand-ink);          /* accent for ticks and highlights */
    --rw-line: var(--line);
    --rw-ink: var(--ink-2);
    --rw-muted: var(--muted);
    --rw-faint: var(--muted-2);
    --rw-bg: var(--bg-soft);
    --rw-amber-bg: #FDF4D3;               /* the early-bird bar stays amber: it */
    --rw-amber: #8A5A00;                  /* is a deadline notice, not brand */
    --rw-gold: #F7C531;

    /* ---- ICSET tokens the ported rules still name ---- */
    --navy: var(--ink-ground);            /* dark panel grounds, e.g. summary head */
    --navy-2: #2a2a33;
    --mint: var(--brand);                 /* ICSET's accent maps to the brand red */
    --mint-hover: var(--brand-dark);
    --surface-alt: var(--surface-3);
    --surface-tint: var(--brand-soft);
    --soft-gray: var(--line-2);
    --text-subhead: var(--muted);
    --font-num: var(--font-head);

    background: var(--rw-bg);
    color: var(--rw-ink);
    font-family: var(--font-body);
}

/* ---------- early bird bar ---------- */
.rw-eb {
    background: var(--rw-amber-bg);
    border-bottom: 1px solid #F1E3A6;
    color: var(--rw-amber);
    font-size: 13.5px;
    padding: 11px 0;
}

.rw-eb b {
    font-weight: 700;
}

.rw-eb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E8A200;
}

/* ---------- stepper ---------- */
.rw-stepper-wrap {
    background: #fff;
    border-bottom: 1px solid var(--rw-line);
    padding: 22px 0 18px;
}

.rw-stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.rw-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* the connector to the next dot */
.rw-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--rw-line);
}

.rw-step.is-done::after {
    background: var(--rw-teal);
}

.rw-step-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid var(--rw-line);
    color: var(--rw-faint);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 13px;
}

.rw-step-dot .bi {
    display: none;
    font-size: 16px;
}

.rw-step-label {
    font-size: 12.5px;
    color: var(--rw-faint);
}

.rw-step.is-current .rw-step-dot {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.rw-step.is-current .rw-step-label {
    color: var(--rw-ink);
    font-weight: 700;
}

.rw-step.is-done .rw-step-dot {
    background: var(--mint-hover);
    border-color: var(--mint-hover);
    color: var(--navy);
}

.rw-step.is-done .rw-step-num {
    display: none;
}

.rw-step.is-done .rw-step-dot .bi {
    display: inline-flex;
}

.rw-step.is-done .rw-step-label {
    color: var(--rw-ink);
}

.rw-step.is-skipped .rw-step-label {
    text-decoration: line-through;
}

/* ---------- layout ---------- */
/* The 80px tail below the card was there when the card was the last thing on
   the page. The group and accommodation notes now follow it, so that much
   space reads as a gap rather than an ending. */
.rw-body {
    padding: 34px 0 28px;
}

.rw-card {
    background: #fff;
    border: 1px solid var(--rw-line);
    border-radius: 16px;
    padding: clamp(22px, 3vw, 40px);
    box-shadow: 0 10px 30px rgba(0, 32, 63, .04);
}

.rw-side {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- type ---------- */
.rw-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(20px, 1.7vw, 24px);
    color: var(--rw-ink);
    margin: 0 0 6px;
}

.rw-title:focus {
    outline: none;
}

.rw-lead {
    color: var(--rw-muted);
    font-size: 15px;
    margin: 0 0 26px;
}

.rw-meta {
    font-size: 14px;
    color: var(--rw-muted);
    margin: 0 0 26px;
}

.rw-meta b {
    color: var(--rw-ink);
    font-weight: 600;
}

.rw-sub {
    font-size: 13.5px;
    color: var(--rw-muted);
    margin: -4px 0 16px;
}

.rw-eyebrow {
    display: block;
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4A5566;
}

.rw-eyebrow--sm {
    font-size: 11px;
}

.rw-section {
    margin: 32px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rw-line);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rw-ink);
}

.rw-hint {
    margin: 14px 0 0;
    font-size: 13px;
    font-style: italic;
    color: var(--rw-faint);
}

.rw-teal {
    color: var(--rw-teal) !important;
}

.rw-blue {
    color: var(--rw-primary);
}

.rw-gold {
    color: #E8A200;
}

.rw-link {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 6px;
    font-weight: 600;
    font-size: inherit;
    color: var(--rw-primary);
}

.rw-link:hover {
    color: var(--rw-teal);
}

.rw-link--u {
    margin-left: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--rw-teal);
}

.rw-rule {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid var(--rw-line);
    opacity: 1;
}

/* every choice is a real input, hidden but focusable */
.rw input[type="radio"],
.rw input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.rw input:focus-visible + span {
    outline: 3px solid var(--mint);
    outline-offset: 2px;
}

/* ---------- step 1: roles ---------- */
.rw-roles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.rw-role {
    position: relative;
    cursor: pointer;
}

.rw-role-box {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 10px 22px;
    text-align: center;
    background: var(--surface-alt);
    border: 1.5px solid var(--rw-line);
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.rw-role:hover .rw-role-box {
    border-color: #B9C3CF;
}

.rw-role-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--rw-line);
    color: var(--rw-faint);
    font-size: 18px;
}

.rw-role-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    color: var(--rw-ink);
}

.rw-role-desc {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--rw-faint);
}

.rw-role-tick {
    position: absolute;
    top: 9px;
    right: 9px;
    font-size: 17px;
    color: var(--navy);
    opacity: 0;
    transition: opacity .2s;
}

.rw-role input:checked + .rw-role-box {
    background: #fff;
    border: 2px solid var(--navy);
    box-shadow: 0 8px 22px rgba(0, 32, 63, .10);
}

.rw-role input:checked + .rw-role-box .rw-role-tick {
    opacity: 1;
}

.rw-role input:checked + .rw-role-box .rw-role-icon {
    color: var(--navy);
    background: var(--surface-tint);
}

/* ---------- pills ---------- */
.rw-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.rw-pill {
    position: relative;
    cursor: pointer;
}

.rw-pill span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--rw-line);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    color: #3D4757;
    transition: background .2s, color .2s, border-color .2s;
}

.rw-pill .bi {
    color: #5468D4;
    font-size: 13px;
}

.rw-pill input:checked + span {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.rw-pill input:checked + span .bi {
    color: var(--mint);
}

/* ---------- group count ---------- */
.rw-group-count {
    margin-bottom: 4px;
}

.rw-counter {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--rw-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.rw-counter button {
    width: 42px;
    border: 0;
    background: var(--surface-alt);
    color: var(--navy);
}

.rw-counter button:hover {
    background: var(--soft-gray);
}

.rw-counter input {
    width: 70px;
    border: 0;
    border-inline: 1px solid var(--rw-line);
    text-align: center;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 16px;
    padding: 9px 0;
    -moz-appearance: textfield;
}

/* ---------- note boxes ---------- */
.rw-note {
    display: flex;
    gap: 12px;
    margin: 6px 0 4px;
    padding: 18px 20px;
    background: #EEF4FD;
    border: 1px solid #DCE7F8;
    border-radius: 10px;
}

.rw-note .bi {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--rw-primary);
}

.rw-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #2A3F66;
}

.rw-note b,
.rw-note a {
    color: var(--rw-primary);
    font-weight: 700;
}

.rw-ebnote {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--rw-amber-bg);
    border: 1px solid #F1E3A6;
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--rw-amber);
}

.rw-ebnote .bi {
    color: #E8A200;
}

/* ---------- buttons ---------- */
.rw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 30px;
    padding: 15px 24px;
    border: 0;
    border-radius: 10px;
    background: var(--rw-primary);
    color: #fff;
    font-family: var(--font-btn);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.rw-btn:hover {
    background: var(--rw-primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 32, 63, .22);
}

.rw-btn:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 3px;
}

.rw-btn--auto {
    width: auto;
    display: inline-flex;
    margin-top: 0;
}

.rw-btn--sm {
    padding: 10px 20px;
    font-size: 14px;
}

.rw-btn--outline {
    background: #fff;
    color: var(--rw-ink);
    border: 1px solid var(--rw-line);
}

.rw-btn--outline:hover {
    background: var(--surface-alt);
    color: var(--rw-ink);
}

.rw-btn--gold {
    margin-top: 16px;
    padding: 11px 18px;
    background: var(--rw-gold);
    color: var(--navy);
    font-size: 14px;
}

.rw-btn--gold:hover {
    background: #EDB813;
    color: var(--navy);
}

.rw-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px auto 0;
    background: none;
    border: 0;
    font-size: 14px;
    color: var(--rw-faint);
}

.rw-back:hover {
    color: var(--rw-ink);
}

/* ---------- step 2: mode ---------- */
.rw-mode {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 30px;
    background: #F0F3F7;
    border-radius: 10px;
}

.rw-mode label {
    position: relative;
    cursor: pointer;
}

.rw-mode span {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 230px;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--rw-muted);
    transition: background .2s, color .2s;
}

.rw-mode .bi {
    font-size: 16px;
}

.rw-mode input:checked + span {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
}

/* ---------- step 2: tiers ---------- */
.rw-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.rw-tier {
    position: relative;
    cursor: pointer;
}

.rw-tier-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 22px 14px;
    text-align: center;
    background: #fff;
    border: 1.5px solid var(--rw-line);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.rw-tier:hover .rw-tier-box {
    border-color: #B9C3CF;
}

.rw-tier-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rw-faint);
}

.rw-tier-sub {
    font-size: 12px;
    line-height: 1.45;
    color: var(--rw-faint);
}

/* "IDR 4,950,000" is nearly four times the width of "$300", so the local rates take
   a smaller size rather than wrapping mid-figure on a narrow card. */
.rw-tier-price--local { font-size: clamp(19px, 1.7vw, 24px); }

.rw-tier-price {
    margin: 8px 0 4px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1;
    color: var(--rw-ink);
    font-variant-numeric: tabular-nums;
}

.rw-tier-note {
    font-size: 12px;
    color: var(--rw-faint);
}

.rw-tier input:checked + .rw-tier-box {
    background: #F7FBFF;
    border: 2px solid var(--navy);
    box-shadow: 0 8px 22px rgba(0, 32, 63, .10);
}

.rw-tier input:checked + .rw-tier-box .rw-tier-kicker {
    color: var(--navy);
}

.rw-tier--help {
    cursor: default;
}

.rw-tier--help .rw-link {
    margin: 6px 0 0;
}

/* ---------- fee card ---------- */
.rw-fee {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px;
    border-radius: 14px;
    background: radial-gradient(circle at 85% 30%, rgba(54, 236, 222, .14), transparent 45%), var(--navy);
    color: #fff;
}

.rw-fee-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mint);
}

.rw-fee-amount {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 6px 0 8px;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.rw-fee-save {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(54, 236, 222, .16);
    border: 1px solid rgba(54, 236, 222, .35);
    color: var(--mint);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
}

.rw-fee-incl {
    display: block;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-subhead);
}

.rw-fee-badge {
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(54, 236, 222, .12);
    color: var(--mint);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- services ---------- */
.rw-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rw-pane[data-pane="2"] .rw-services {
    margin-top: 0;
}

.rw-pane[data-pane="2"] .rw-fee + .rw-ebnote + .rw-eyebrow,
.rw-pane[data-pane="2"] .rw-fee ~ .rw-eyebrow {
    margin-top: 30px;
}

.rw-service {
    position: relative;
    cursor: pointer;
}

.rw-service-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1.5px solid var(--rw-line);
    border-radius: 10px;
    transition: border-color .2s, background .2s;
}

.rw-service:hover .rw-service-box {
    border-color: #B9C3CF;
}

.rw-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1.5px solid #B9C3CF;
    border-radius: 5px;
    color: transparent;
    font-size: 13px;
    transition: background .2s, border-color .2s, color .2s;
}

.rw-service-name {
    display: block;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--rw-ink);
}

.rw-service-desc {
    display: block;
    font-size: 13px;
    color: var(--rw-muted);
}

.rw-service-price {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 15px;
    color: var(--rw-ink);
}

.rw-service input:checked + .rw-service-box {
    background: #F7FBFF;
    border: 2px solid var(--navy);
}

.rw-service input:checked + .rw-service-box .rw-check {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.rw-service input:checked + .rw-service-box .rw-service-price {
    color: var(--rw-primary);
}

/* ---------- step 3: stays + transfers ---------- */
.rw-stays,
.rw-transfers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.rw-stay,
.rw-transfer {
    position: relative;
    cursor: pointer;
}

.rw-stay-box,
.rw-transfer-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border: 1.5px solid var(--rw-line);
    border-radius: 10px;
    transition: border-color .2s, background .2s;
}

.rw-stay:hover .rw-stay-box,
.rw-transfer:hover .rw-transfer-box {
    border-color: #B9C3CF;
}

.rw-stay-name,
.rw-transfer-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    color: var(--rw-ink);
}

.rw-stay-name .bi {
    color: var(--rw-faint);
    font-size: 18px;
}

.rw-transfer-name .bi {
    color: #5468D4;
}

.rw-stay-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--rw-muted);
}

.rw-stay-price {
    margin-top: auto;
    font-weight: 700;
    font-size: 14px;
    color: var(--rw-ink);
}

.rw-transfer-price {
    font-size: 14px;
    color: var(--rw-muted);
}

.rw-stay input:checked + .rw-stay-box,
.rw-transfer input:checked + .rw-transfer-box {
    background: #F7FBFF;
    border: 2px solid var(--navy);
}

.rw-stay input:checked + .rw-stay-box {
    border-top-width: 4px;
}

.rw-stay input:checked + .rw-stay-box .rw-stay-name .bi {
    color: var(--navy);
}

.rw-pane[data-pane="3"] .rw-pills {
    margin-bottom: 26px;
}

/* ---------- step 4: fields ---------- */
.rw-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #3D4757;
}

.rw-label--plain {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}

.rw-input {
    width: 100%;
    padding: 12px 14px;
    background: #F8FAFC;
    border: 1px solid var(--rw-line);
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--rw-ink);
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.rw-input--white {
    background: #fff;
}

.rw-input::placeholder {
    color: #B4BDC9;
}

.rw-input:focus {
    background: #fff;
    border-color: var(--navy-2);
    box-shadow: 0 0 0 3px rgba(54, 236, 222, .35);
    outline: none;
}

select.rw-input {
    appearance: none;
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233D4757' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.rw-input:user-invalid {
    border-color: var(--error);
}

/* ---------- step 5: payment ---------- */
.rw-paytabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 28px;
    border: 1px solid var(--rw-line);
    border-radius: 8px;
    overflow: hidden;
}

.rw-paytabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 10px;
    background: #fff;
    border: 0;
    border-left: 1px solid var(--rw-line);
    font-size: 15px;
    color: var(--rw-muted);
}

.rw-paytabs button:first-child {
    border-left: 0;
}

.rw-paytabs button.is-active {
    background: var(--navy);
    color: #fff;
    font-weight: 600;
}

.rw-secure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 12.5px;
    color: var(--rw-faint);
}

.rw-secure a {
    color: var(--rw-primary);
    font-weight: 600;
}

.rw-bank {
    margin: 0;
    border: 1px solid var(--rw-line);
    border-radius: 10px;
    overflow: hidden;
}

.rw-bank div {
    display: flex;
    gap: 16px;
    padding: 12px 18px;
    border-top: 1px solid var(--rw-line);
}

.rw-bank div:first-child {
    border-top: 0;
}

.rw-bank dt {
    width: 40%;
    font-weight: 500;
    font-size: 14px;
    color: var(--rw-muted);
}

.rw-bank dd {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--rw-ink);
    word-break: break-word;
}

.rw-paypal {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 22px;
    background: var(--surface-alt);
    border: 1px solid var(--rw-line);
    border-radius: 10px;
}

.rw-paypal .bi {
    font-size: 30px;
    color: #003087;
}

.rw-paypal p {
    margin: 0;
    font-size: 14px;
    color: var(--rw-muted);
}

.rw-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin: 16px 0 0;
    font-size: 12.5px;
    color: var(--rw-faint);
}

.rw-trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------- done ---------- */
.rw-done-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 6px auto 20px;
    border-radius: 50%;
    background: rgba(54, 236, 222, .18);
    box-shadow: 0 0 0 10px rgba(54, 236, 222, .08);
    color: var(--rw-teal);
    font-size: 28px;
}

.rw-done .rw-lead {
    margin-bottom: 14px;
}

.rw-ref {
    display: table;
    margin: 0 auto 30px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #F0F3F7;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    letter-spacing: .06em;
    color: #3D4757;
}

.rw-qr {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: clamp(20px, 3vw, 32px);
    background: #F2F6FA;
    border: 1px solid var(--rw-line);
    border-radius: 14px;
}

.rw-qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rw-qr-img {
    padding: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 32, 63, .08);
    line-height: 0;
}

.rw-qr-img img,
.rw-qr-img canvas {
    width: 168px;
    height: 168px;
}

.rw-qr-actions {
    display: flex;
    gap: 8px;
}

.rw-qr-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--rw-line);
    border-radius: 7px;
    font-size: 13px;
    color: #3D4757;
}

.rw-qr-actions button:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.rw-qr-title {
    margin: 0 0 4px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
}

.rw-qr-text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--rw-muted);
}

.rw-qr-ref {
    display: block;
    margin-bottom: 16px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-weight: 700;
    font-size: clamp(17px, 1.6vw, 21px);
    letter-spacing: .08em;
}

.rw-qr-list {
    margin: 0;
}

.rw-qr-list div {
    display: flex;
    gap: 14px;
    padding: 5px 0;
    font-size: 13.5px;
}

.rw-qr-list dt {
    width: 120px;
    flex-shrink: 0;
    font-weight: 400;
    color: var(--rw-muted);
}

.rw-qr-list dd {
    margin: 0;
    font-weight: 600;
    color: var(--rw-ink);
}

.rw-next {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 28px 0 0;
}

.rw-next li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--rw-line);
    border-radius: 10px;
}

.rw-next .bi {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #EEF4FD;
    color: var(--rw-primary);
}

.rw-next b {
    display: block;
    font-size: 14.5px;
    color: var(--rw-ink);
}

.rw-next span {
    font-size: 13px;
    color: var(--rw-muted);
}

.rw-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

/* ---------- sidebar ---------- */
.rw-summary {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rw-line);
    border-radius: 14px;
}

.rw-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
    background: var(--navy);
    color: #fff;
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
}

.rw-summary-head .bi {
    color: var(--rw-gold);
}

.rw-summary-body {
    padding: 18px 20px 16px;
}

.rw-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rw-line);
}

.rw-lines li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--rw-muted);
}

.rw-lines b {
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--rw-ink);
    white-space: nowrap;
}

.rw-lines b.is-extra {
    color: var(--rw-teal);
}

.rw-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 0 6px;
    font-weight: 700;
    font-size: 16px;
}

.rw-total b {
    font-family: var(--font-num);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
}

.rw-caption {
    margin: 0;
    font-size: 11.5px;
    font-style: italic;
    color: var(--rw-faint);
}

.rw-panel {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--rw-line);
    border-radius: 14px;
}

.rw-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    color: var(--rw-ink);
}

.rw-panel-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--rw-muted);
}

.rw-panel-text b {
    color: var(--rw-ink);
}

.rw-help {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--rw-primary);
}

.rw-help:hover {
    color: var(--rw-teal);
}

/* ---------- after the confirmation ---------- */
.rw-after {
    padding: 0 0 70px;
}

.rw-promo {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rw-line);
    border-radius: 14px;
    transition: transform .25s, box-shadow .25s;
}

.rw-promo:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 32, 63, .12);
}

.rw-promo-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 92px;
    padding: 18px;
    color: #fff;
}

.rw-promo--navy .rw-promo-top {
    background: linear-gradient(135deg, var(--navy), #13304F);
}

.rw-promo--amber .rw-promo-top {
    background: linear-gradient(135deg, #B8650A, #D98A1E);
}

.rw-promo--gold .rw-promo-top {
    background: linear-gradient(135deg, #D9A21B, #EAC04A);
}

.rw-promo-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
}

.rw-promo-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 11.5px;
    font-weight: 600;
}

.rw-promo-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px;
}

.rw-promo-body h3 {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    color: var(--rw-ink);
}

.rw-promo-body p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--rw-muted);
}

.rw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
}

.rw-chips li {
    padding: 4px 10px;
    border-radius: 6px;
    background: #F4F1EA;
    font-size: 12px;
    color: #4A5566;
}

.rw-promo-body a {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--rw-ink);
}

.rw-promo--amber .rw-promo-body a {
    color: #B8650A;
}

.rw-promo--gold .rw-promo-body a {
    color: #A87A06;
}

.rw-bridge {
    padding: clamp(44px, 5vw, 70px) 0;
    background: var(--navy);
    color: #fff;
}

.rw-bridge-kicker {
    display: block;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rw-gold);
}

.rw-bridge-title {
    margin: 0 0 12px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(24px, 2.3vw, 32px);
    color: #fff;
}

.rw-bridge-text {
    margin: 0;
    font-size: 15px;
    color: var(--text-subhead);
}

.rw-bridge-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
}

.rw-bridge-card b {
    display: block;
    font-size: 15px;
}

.rw-bridge-card small {
    font-size: 12.5px;
    color: var(--text-subhead);
}

.rw-bridge-card .rw-btn {
    background: var(--mint);
    color: var(--navy);
}

.rw-bridge-card .rw-btn:hover {
    background: var(--mint-hover);
}

.rw-avatars {
    display: flex;
}

.rw-avatars span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid var(--navy);
    background: #2B4A6E;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12px;
}

.rw-avatars span:first-child {
    margin-left: 0;
    background: #0E8F86;
}

.rw-avatars span:nth-child(3) {
    background: #B8650A;
}

.rw-avatars span:nth-child(4) {
    background: #5468D4;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .rw-side {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .rw-roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rw-tiers {
        grid-template-columns: 1fr;
    }

    .rw-stays,
    .rw-transfers {
        grid-template-columns: 1fr;
    }

    .rw-mode {
        display: flex;
    }

    .rw-mode label {
        flex: 1;
    }

    .rw-mode span {
        max-width: none;
        padding: 10px 12px;
        gap: 8px;
    }

    .rw-step-label {
        font-size: 11px;
    }

    .rw-step:not(.is-current) .rw-step-label {
        display: none;
    }

    .rw-paytabs button {
        flex-direction: column;
        gap: 4px;
        font-size: 13px;
    }

    .rw-qr {
        justify-content: center;
    }

    .rw-qr-list dt {
        width: 100px;
    }

    .rw-eb {
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw *,
    .rw *::before,
    .rw *::after {
        transition: none !important;
    }
}

/* Print button on the confirmation: only the QR card */
@media print {
    body.rw-print-qr * {
        visibility: hidden;
    }

    body.rw-print-qr .rw-qr,
    body.rw-print-qr .rw-qr * {
        visibility: visible;
    }

    body.rw-print-qr .rw-qr {
        position: absolute;
        inset: 0 0 auto 0;
    }

    body.rw-print-qr .rw-qr-actions {
        display: none;
    }
}

/* ---- step 1: no order yet, so the summary is hidden and the card centres ----
   The column keeps its Bootstrap class for every other step; this only
   overrides it while .rw-solo is on. */
.rw.rw-solo .rw-side {
    display: none;
}

.rw.rw-solo .rw-main {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    flex: 0 0 auto;
}

/* Four roles on one row. They carry a title and a line of description, so
   below 992px two rows of two read better than four cramped columns. */
.rw-roles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .rw-roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479.98px) {
    .rw-roles {
        grid-template-columns: 1fr;
    }
}

/* Continue is disabled until a role is picked */
.rw-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---- step navigation row ----
   Deliberately NOT .rw-next: that class is the "what happens next" list on the
   confirmation screen, and reusing it put the buttons in a stacked column with
   the outline button spanning the full width.

   Back sizes to its label and sits left; Continue takes the rest. On a narrow
   screen they stack, with Continue first so the primary action stays on top. */
.rw-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.rw-actions .rw-btn {
    margin-top: 0;
}

.rw-actions .rw-btn--outline {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 20px;
}

.rw-actions .rw-btn:not(.rw-btn--outline) {
    flex: 1 1 auto;
}

@media (max-width: 575.98px) {
    .rw-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .rw-actions .rw-btn--outline {
        width: 100%;
    }
}

/* ---- add-on rows: checkbox, text block, price ----
   A three-part grid rather than loose flex children, so the tick, the text and
   the price line up down the whole list however long a description runs. */
.rw-service-box {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
}

.rw-service-text {
    display: block;
    min-width: 0;
}

.rw-service-name {
    margin-bottom: 2px;
}

/* the journal packages are one-of, so their box reads as a radio */
.rw-check--radio {
    border-radius: 50%;
}

.rw-service-price {
    justify-self: end;
    white-space: nowrap;
    font-weight: 700;
    color: var(--rw-ink);
}

/* a checked row is obvious without relying on the tick alone */
.rw-service input:checked + .rw-service-box {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.rw-service input:focus-visible + .rw-service-box {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .rw-service-box {
        grid-template-columns: 20px minmax(0, 1fr);
        row-gap: 6px;
    }

    .rw-service-price {
        grid-column: 2;
        justify-self: start;
    }
}

/* The ported rule filled the tick with --navy, which maps to this site's
   near-black panel ground. The brand red matches the selected row's border
   and the price beside it. */
.rw-service input:checked + .rw-service-box .rw-check {
    background: var(--brand);
    border-color: var(--brand);
}

/* The category dropdown sits in a row of pills, so it is sized to its content
   rather than stretching the full card width like the step-4 inputs. */
.rw-input--narrow {
    width: auto;
    min-width: 17rem;
    max-width: 100%;
}

/* the dropdown needs the same breathing room the pill rows get */
.rw-pane[data-pane="2"] .rw-field {
    margin-top: 22px;
}

.rw-pane[data-pane="2"] .rw-field .rw-label {
    display: block;
    margin-bottom: 8px;
}

/* The rate grid now holds the tiers (or the flat card) plus Scopus, so it
   fits what is actually on screen instead of a fixed three columns: two cards
   on virtual, four on physical without squeezing them to a third each. */
/* Physical keeps three columns so Early Bird / Standard / Onspot stay on one
   row as a set, with Scopus wrapping beneath. auto-fit split them 2 + 2,
   which broke up the tier set. */
#rw-rates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Virtual and plenary show one rate card, so two columns let it and the
   Scopus card fill the row instead of leaving a third of it empty. */
#rw-rates.is-flat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 575.98px) {
    #rw-rates,
    #rw-rates.is-flat {
        grid-template-columns: 1fr;
    }
}

/* A standing aside rather than a warning, so it is lighter than the
   role-specific notes it sits above. */
.rw-note--quiet {
    background: var(--surface-3);
    border-color: var(--rw-line);
}

.rw-note--quiet i {
    color: var(--rw-muted);
}

.rw-note--quiet a {
    color: var(--brand-ink);
    font-weight: 600;
}

/* ---- step 5 order review ----
   Deliberately NOT .rw-check: that class is the 20×20 tick box on the add-on
   rows, so the list inherited its fixed size and transparent colour and
   collapsed into an empty square with every value hidden inside it. */
.rw-review {
    display: grid;
    gap: 0;
    margin: 0 0 18px;
}

.rw-review > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--rw-line);
    font-size: .92rem;
}

.rw-review > div:last-child { border-bottom: 0; }

.rw-review dt { color: var(--rw-muted); }

.rw-review dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--rw-ink);
    font-variant-numeric: tabular-nums;
}

/* the total is the line that matters */
.rw-review > div:last-child dd { font-size: 1.1rem; color: var(--brand); }

/* The .rw-field wrapper and the stepper number carry no rules of their own in
   the ported sheet; they exist only as hooks. Declared here so a reader does
   not go looking for them. */
.rw-field { display: block; }

/* ---- notes under the wizard ----
   Group bookings and accommodation are not sold through this page, so these
   sit outside the flow: a delegate who needs them needs a person, not a
   step. Two columns on a desk, stacked on anything narrower. */
.reg-notes { padding-top: 0; }
.reg-note {
  height: 100%;
  padding: 26px;
  background: var(--rw-surface, #fff);
  border: 1px solid var(--rw-line, #e9e9ee);
  border-radius: 16px;
}
/* The group card is the offer; the other is the small print. */
.reg-note--group { background: var(--rw-tint, #fff5f6); border-color: var(--rw-brand-tint, #f6c9ce); }

.reg-note__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 14px;
  font-size: 1.1rem;
  color: var(--rw-brand, #df2531);
  background: rgba(223, 37, 49, .10);
  border-radius: 12px;
}
.reg-note__head { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; color: var(--rw-ink, #0d0d12); }
.reg-note__sub  { margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: var(--rw-ink, #0d0d12); }
.reg-note p     { margin: 0 0 12px; font-size: .9rem; line-height: 1.6; color: var(--rw-muted, #5d5d68); }
.reg-note a     { color: var(--rw-brand, #df2531); font-weight: 600; }

.reg-note__list { margin: 0 0 12px; padding: 0; list-style: none; }
.reg-note__list li {
  position: relative;
  padding: 0 0 8px 20px;
  font-size: .9rem; line-height: 1.6; color: var(--rw-muted, #5d5d68);
}
.reg-note__list li::before {
  content: "";
  position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px;
  background: var(--rw-brand, #df2531);
  border-radius: 50%;
}

/* The one condition that decides whether any of it applies to you. */
.reg-note__flag {
  padding: 10px 12px;
  font-size: .86rem;
  background: rgba(223, 37, 49, .07);
  border-left: 3px solid var(--rw-brand, #df2531);
  border-radius: 0 8px 8px 0;
}

/* ---- journal package: conference price over the regular one ----
   The charged figure stays the one that reads first; the struck price sits
   under it, smaller and muted, so the saving is visible without competing
   with the number the delegate actually pays. */
.rw-service-price--was {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    white-space: nowrap;
}
.rw-service-price--was s {
    font-size: 12px;
    font-weight: 600;
    color: var(--rw-muted-2, #8a8a95);
    text-decoration-thickness: 1px;
}