/* ===========================================================================
   InnoFusion 2027 — 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 the ICMCER one. Every rule is scoped
   to .rw and written against the --rw-* tokens, so the port only re-points
   those tokens at this site's Midnight Orchid palette. They are mapped to the
   site's own variables, which style.css swaps for dark mode, so the wizard
   follows the visitor's light/dark choice like every other section; the few
   surfaces the ported rules drew in plain white use --rw-surface instead.
   =========================================================================== */

.rw {
    /* ---- this site's palette (style.css :root, light and dark) ---- */
    --brand: var(--fill-secondary);              /* lilac fill: buttons, picks */
    --brand-dark: var(--fill-secondary-deep);
    --brand-ink: var(--color-secondary-deep);    /* ticks and highlights */
    --brand-soft: var(--color-secondary-soft);
    --ink-2: var(--color-text-primary);
    --ink-ground: #312A44;                       /* Midnight Orchid, literal: --navy is redefined below */
    --muted: var(--color-text-secondary);
    --muted-2: var(--color-text-muted);
    --line: var(--color-border);
    --line-2: var(--color-border);
    --bg-soft: var(--color-tint);
    --surface-3: var(--color-tint-warm);
    --error: var(--color-error);
    /* Literal stacks: naming --font-body here would point the variable at itself */
    --font-body-rw: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-btn: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---- the wizard's own tokens ---- */
    --rw-primary: var(--brand);
    --rw-primary-hover: var(--brand-dark);
    --rw-on-primary: var(--on-secondary);        /* text on the lilac fill */
    --rw-surface: var(--color-surface);          /* cards, inputs, panels */
    --rw-tint: var(--color-tint);                /* quiet panels, a picked card */
    --rw-line-strong: var(--color-accent);       /* control borders */
    --rw-strong: var(--ink-ground);              /* emphasis text on a surface; light text in dark mode */
    --rw-teal: var(--brand-ink);
    --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-amber-line: #F1E3A6;
    --rw-gold: var(--color-accent);              /* Iris Mist: the Premium accent */

    /* ---- ICSET tokens the ported rules still name ---- */
    --navy: var(--ink-ground);
    --navy-2: #241F35;
    --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-rw);
}

/* ---------- early bird bar ---------- */
.rw-eb {
    background: var(--rw-amber-bg);
    border-bottom: 1px solid var(--rw-amber-line);
    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: var(--rw-surface);
    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: var(--rw-surface);
    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(--rw-strong);
}

.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: var(--rw-surface);
    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: var(--rw-muted);
}

.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-rw);
    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: var(--rw-line-strong);
}

.rw-role-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--rw-surface);
    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(--rw-strong);
    opacity: 0;
    transition: opacity .2s;
}

.rw-role input:checked + .rw-role-box {
    background: var(--rw-surface);
    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(--rw-strong);
    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: var(--rw-surface);
    font-size: 14px;
    color: var(--rw-muted);
    transition: background .2s, color .2s, border-color .2s;
}

.rw-pill .bi {
    color: var(--rw-teal);
    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: var(--rw-surface);
}

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

.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: var(--rw-tint);
    border: 1px solid var(--rw-line);
    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: var(--rw-ink);
}

.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: var(--rw-on-primary);
    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: var(--rw-on-primary);
    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: var(--rw-surface);
    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(--rw-strong);
    font-size: 14px;
}

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

.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: var(--rw-tint);
    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: var(--rw-surface);
    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: var(--rw-line-strong);
}

.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: var(--rw-tint);
    border: 2px solid var(--rw-strong);
    box-shadow: 0 8px 22px rgba(0, 32, 63, .10);
}

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

.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-rw);
    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: var(--rw-surface);
    border: 1.5px solid var(--rw-line);
    border-radius: 10px;
    transition: border-color .2s, background .2s;
}

.rw-service:hover .rw-service-box {
    border-color: var(--rw-line-strong);
}

.rw-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--rw-line-strong);
    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: var(--rw-tint);
    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: var(--rw-surface);
    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: var(--rw-line-strong);
}

.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: var(--rw-teal);
}

.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: var(--rw-tint);
    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(--rw-strong);
}

.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: var(--rw-muted);
}

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

.rw-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--rw-tint);
    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: var(--rw-surface);
}

.rw-input::placeholder {
    color: var(--rw-faint);
}

.rw-input:focus {
    background: var(--rw-surface);
    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: var(--rw-surface) 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='%23948CA5' 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: var(--rw-surface);
    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: var(--rw-ink);
}

.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: var(--rw-tint);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--rw-muted);
}

.rw-qr {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: clamp(20px, 3vw, 32px);
    background: var(--rw-tint);
    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: var(--rw-surface);
    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: var(--rw-surface);
    border: 1px solid var(--rw-line);
    border-radius: 7px;
    font-size: 13px;
    color: var(--rw-muted);
}

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

.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: var(--rw-tint);
    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: var(--rw-surface);
    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: var(--rw-surface);
    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: var(--rw-surface);
    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: var(--rw-tint);
    font-size: 12px;
    color: var(--rw-muted);
}

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

.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: var(--rw-teal);
}

/* ---------- 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; }

/* =========================================================
   InnoFusion additions
   ========================================================= */

/* 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 1: centred ---- */
.rw-pane[data-pane="1"] .rw-title,
.rw-pane[data-pane="1"] .rw-lead {
    text-align: center;
}

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

/* A rejected submission comes back with the handler's message */
.rw-note--error {
    margin-bottom: 18px;
    border-color: #f3c7c7;
    background: #fdf1f1;
}

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

/* The sticky sidebar clears this site's header */
.rw-side {
    top: 104px;
}

/* the honeypot */
.rw .hp-field {
    position: absolute;
    left: -9999px;
}

/* Early bird after its deadline: still shown, so the saving that was on
   offer is visible, but not selectable */
.rw-tier.is-closed {
    opacity: .45;
    cursor: not-allowed;
}

/* The category dropdown is followed by the rate heading, so it needs space
   beneath it as well as above */
.rw-pane[data-pane="2"] .rw-field + .rw-eyebrow {
    margin-top: 26px;
}

/* 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;
}


/* The premium upgrade sits in the add-ons step as an ordinary service row */
.rw-service-desc b {
    color: var(--rw-ink);
}

/* The rate cards print their own currency, so ₱17,400 needs the room */
.rw-tier-price--local {
    font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
}

/* ---- 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: var(--rw-surface);
    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: var(--rw-surface);
    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) 12%, var(--rw-surface));
}

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

/* ===========================================================================
   InnoFusion: theme and site fit
   =========================================================================== */

/* Premium accent hover, on this site's lilac family rather than gold */
.rw-btn--gold:hover {
    background: var(--color-soft-bg);
}

/* A finished step's tick: the ported rule draws it in --navy, which on the
   lilac dot all but disappears. It takes the fill's own text colour. */
.rw-step.is-done .rw-step-dot {
    color: var(--rw-on-primary);
}

/* The sticky sidebar clears this site's fixed header */
.rw-side {
    top: calc(var(--nav-h, 72px) + 24px);
}

/* "Most Preferred" / "Highly Recommended" on the journal packages, as on
   the single-page form */
.rw-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--rw-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
}

/* The service rows carry a description line from the fee data */
.rw-service-desc {
    display: block;
}

/* --- Dark ------------------------------------------------------------------
   style.css swaps the site variables the tokens above read, so most of the
   wizard follows on its own. These are the literal colours that need a dark
   counterpart. Both selectors mirror style.css: forced dark, and following
   the operating system when nothing is stored. */
:root[data-theme="dark"] .rw {
    --rw-strong: var(--color-text-primary);
    --ink-ground: #322B47;
    --navy-2: #2A2440;
    --rw-amber-bg: rgba(245, 196, 81, .12);
    --rw-amber: #F5C451;
    --rw-amber-line: rgba(245, 196, 81, .22);
}

:root[data-theme="dark"] .rw .rw-note--error {
    border-color: rgba(239, 107, 107, .35);
    background: rgba(239, 107, 107, .10);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rw {
        --rw-strong: var(--color-text-primary);
        --ink-ground: #322B47;
        --navy-2: #2A2440;
        --rw-amber-bg: rgba(245, 196, 81, .12);
        --rw-amber: #F5C451;
        --rw-amber-line: rgba(245, 196, 81, .22);
    }

    :root:not([data-theme="light"]) .rw .rw-note--error {
        border-color: rgba(239, 107, 107, .35);
        background: rgba(239, 107, 107, .10);
    }
}

/* The Premium button sits on Iris Mist, which stays light in both themes,
   so its text stays Midnight Orchid rather than following --rw-strong. */
.rw-btn--gold,
.rw-btn--gold:hover {
    color: #312A44;
}