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

   Ported from the ICCCE build by way of ICASET and HerVision (wgl-2027).
   Every rule is scoped to .rw and written against the --rw-* tokens, so the
   port only re-points those tokens at Global ResInnov's chestnut, oxford
   brown and gold. The ICCCE/ICSET tokens the rules also name (--brand,
   --mint, --navy and friends) are declared here too, so nothing leaks out
   of .rw. --font-body is style.css's own and is inherited, not redeclared:
   pointing it at itself would leave it empty.
   ========================================================= */

.rw {
    /* ---- this site's palette (style.css :root) ---- */
    --brand: var(--deep-chestnut);
    --brand-dark: var(--chestnut-hover);
    --brand-ink: var(--burnt-umber);
    --brand-soft: #F8EFEA;
    --ink-2: #2a211a;
    /* named literally: --navy is redefined below, and pointing the two at each
       other would leave both empty */
    --ink-ground: #4B3B2A;               /* style.css --oxford-brown */
    --muted: #6b5d51;
    --muted-2: #8B7B6D;                  /* style.css --dusty-taupe */
    --line: var(--border-sand);
    --line-2: #EADFD4;
    --bg-soft: var(--card-ivory-3);
    --surface-3: #FBF7F3;
    --font-head: var(--font-ui);
    --font-btn: var(--font-ui);

    /* ---- the wizard's own tokens ---- */
    --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;
    --rw-amber: #8A5A00;
    --rw-gold: var(--faded-gold);

    /* ---- ICSET tokens the ported rules still name ---- */
    --navy: var(--ink-ground);
    --navy-2: #2f251b;
    --mint: var(--brand);
    --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 ---------- */
.rw-body {
    padding: 34px 0 80px;
}

.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);
}

/* "Rp 5.370.000" is three 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; }

/* =========================================================
   SciTech additions
   ========================================================= */


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

/* Dial code + number, the same pair the other forms on the site use */
.rw-phone {
    display: flex;
    gap: 8px;
}

.rw-phone .rw-code {
    flex: 0 0 132px;
    min-width: 0;
}

.rw-phone .rw-input:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* GST line under the amount in the summary, quieter than the items */
.rw-lines li.is-tax span,
.rw-lines li.is-tax b {
    color: var(--rw-muted);
    font-weight: 500;
}

/* The premium panel opens this site's membership modal, so it is a button */
button.rw-btn--gold {
    border: 0;
}

/* The category dropdown is followed by the rate heading, not another pill row
   as on ICCCE, so it needs space beneath it as well */
.rw-pane[data-pane="2"] .rw-field + .rw-field + .rw-eyebrow,
.rw-pane[data-pane="2"] .rw-field:not([hidden]) ~ .rw-eyebrow {
    margin-top: 26px;
}

/* ---- step 1: centred ----
   Heading, lead, role cards and the Continue button sit on the card's centre
   line; the notes stay left-aligned, as running text. */
.rw-pane[data-pane="1"] .rw-title,
.rw-pane[data-pane="1"] .rw-lead {
    text-align: center;
}

.rw-pane[data-pane="1"] .rw-roles {
    justify-content: center;
}

.rw-pane[data-pane="1"] > .rw-btn {
    display: flex;
    margin-inline: auto;
}

/* The early-bird bar's two states carry .d-flex, whose !important display
   would otherwise beat [hidden] and show both at once. */
.rw-eb [data-eb][hidden] {
    display: none !important;
}

/* ---- step 2: four rate cards ----
   India and Abroad, each with and without IFERP membership. Four across on
   wide screens, two by two below that. */
#rw-rates.rw-tiers--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    #rw-rates.rw-tiers--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 419.98px) {
    #rw-rates.rw-tiers--four {
        grid-template-columns: 1fr;
    }
}

/* India / Abroad and the currency, above the membership name */
.rw-tier-group {
    display: block;
    margin-bottom: 4px;
    color: var(--rw-faint);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Abroad cards carry the site's warm tint, as in the fee sheet */
.rw-tier--abroad .rw-tier-group {
    color: #c2622a;
}

#rw-rates .rw-tier-price {
    white-space: nowrap;
}

/* Rates the chosen role cannot take: India for presenters and listeners,
   Abroad for local participants. Still readable, so the whole sheet shows. */
.rw-tier.is-off {
    opacity: .42;
    cursor: not-allowed;
}

.rw-tier.is-off .rw-tier-box {
    box-shadow: none;
}

/* Four roles here (Presenter, Listener, Plenary Speaker, Local Participant):
   two by two on tablets, one column on phones */
.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;
    }
}

/* Rate grid: as many columns as there are cards for the current choice
   (set by the wizard as data-count), never more than four */
#rw-rates[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
#rw-rates[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#rw-rates[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#rw-rates[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
    #rw-rates[data-count="3"],
    #rw-rates[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 419.98px) {
    #rw-rates[data-count] { grid-template-columns: 1fr; max-width: none; }
}

/* the Scopus card's applicability line, under its price */
.rw-tier-sub {
    display: block;
    margin-top: 6px;
    color: var(--rw-faint);
    font-size: 11.5px;
    line-height: 1.4;
}

/* An Early Bird card after the deadline stays visible but cannot be picked */
.rw-tier.is-closed {
    opacity: .45;
    cursor: not-allowed;
}

/* Additional presentations - a small stepper beside its label */
.rw-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 14px 18px;
    border: 1px solid var(--rw-line);
    border-radius: 12px;
    background: #fff;
}

.rw-extra p { margin: 0; color: var(--rw-muted); font-size: 13.5px; }
.rw-extra b { color: var(--rw-ink); }

.rw-extra .rw-input {
    width: 90px;
    text-align: center;
}

/* Premium toggle on the add-ons step */
.rw-premium {
    margin-top: 10px;
}

/* The discount line in the summary */
.rw-lines li.is-save b {
    color: var(--success);
}

/* Error from the handler, shown above the step it concerns */
.rw-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FDECEC;
    border: 1px solid #F5C2C2;
    color: #8A1C1C;
    font-size: 14px;
}

.rw-alert[hidden] { display: none; }

/* Add-ons step: each group heading needs room above it, as the add-on rows
   end flush with no margin of their own */
.rw-pane[data-pane="3"] .rw-eyebrow {
    margin-top: 28px;
}

.rw-pane[data-pane="3"] .rw-extra + .rw-eyebrow,
.rw-pane[data-pane="3"] .rw-lead + .rw-eyebrow {
    margin-top: 18px;
}

/* Step 1 hides the summary, but only its contents: the empty sidebar column
   stayed in the row and, at some widths and zoom levels, pushed the card off
   centre. On step 1 the column goes too and the row centres what is left. */
.rw.rw-solo .rw-body .row {
    justify-content: center;
}

.rw.rw-solo .rw-body .row > aside {
    display: none;
}


/* A finished step's tick: the ported rule draws it in --navy, which here is
   oxford brown on a chestnut dot, and all but disappears. */
.rw-step.is-done .rw-step-dot {
    color: #fff;
}

/* ---- phone: searchable dial-code dropdown (assets/js/dialbox.js) ----
   Ported from ICCCE's style.css, on the wizard's own tokens. The native
   <select> stays in the DOM as the value that posts; the toggle replaces it
   on screen once the script has run. */
.rw .rw-phone {
    display: flex;
    gap: 8px;
}

.rw .rw-phone > .rw-input,
.rw .rw-phone > input[type="tel"] {
    flex: 1 1 auto;
    min-width: 0;
}

.rw .rw-phone > select.rw-code {
    flex: 0 0 140px;
    min-width: 0;
}

.rw .dialbox {
    position: relative;
    flex: 0 0 112px;
    display: flex;
}

.rw .dialbox .dialbox__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.rw .dialbox__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    cursor: pointer;
}

.rw .dialbox__toggle b { font-weight: 600; color: var(--rw-ink); }
.rw .dialbox__toggle i { font-size: .75rem; color: var(--rw-faint); }

.rw .dialbox__toggle:focus-visible {
    outline: 2px solid var(--rw-primary);
    outline-offset: 1px;
}

.rw .dialbox__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1080;                 /* above a Bootstrap modal's 1055 */
    width: 20rem;
    max-width: 78vw;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--rw-line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

.rw .dialbox__search {
    width: 100%;
    margin-bottom: 8px;
    padding: .55rem .75rem;
    font: inherit;
    font-size: .92rem;
    color: var(--rw-ink);
    background: #fff;
    border: 1px solid var(--rw-line);
    border-radius: 8px;
}

.rw .dialbox__search:focus {
    outline: none;
    border-color: var(--rw-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-primary) 15%, transparent);
}

.rw .dialbox__list {
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw .dialbox__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: .5rem .6rem;
    border-radius: 8px;
    font-size: .92rem;
    color: var(--rw-ink);
    cursor: pointer;
}

.rw .dialbox__item b { flex: 0 0 3.6rem; font-weight: 700; color: var(--rw-primary); }
.rw .dialbox__item span { flex: 1 1 auto; }

.rw .dialbox__item:hover,
.rw .dialbox__item.is-active {
    background: color-mix(in srgb, var(--rw-primary) 9%, #fff);
}

.rw .rw-phone-error {
    margin: 6px 0 0;
    font-size: .82rem;
    color: #c62828;
}

@media (max-width: 420px) {
    .rw .dialbox { flex-basis: 96px; }
    .rw .dialbox__panel { width: calc(100vw - 48px); }
}