/*
 * RIPI — Wizard stylesheet
 *
 * Style accueillant, peu administratif. Variables CSS locales pour
 * permettre au thème de redéfinir l'identité (--ripi-accent, etc.)
 * sans modifier le plugin.
 */

:where(.ripi-wizard) {
    --ripi-accent: #0e7490;
    --ripi-accent-soft: #ecfeff;
    --ripi-accent-strong: #155e75;
    --ripi-accent-glow: rgba(14, 116, 144, 0.18);
    --ripi-text: #0f172a;
    --ripi-text-muted: #64748b;
    --ripi-text-soft: #94a3b8;
    --ripi-border: #e2e8f0;
    --ripi-border-soft: #f1f5f9;
    --ripi-bg: #ffffff;
    --ripi-bg-alt: #f8fafc;
    --ripi-bg-warm: #fdfdfb;
    --ripi-success: #15803d;
    --ripi-success-soft: #f0fdf4;
    --ripi-warning: #b45309;
    --ripi-warning-soft: #fffbeb;
    --ripi-radius: 14px;
    --ripi-radius-sm: 10px;
    --ripi-radius-lg: 22px;
    --ripi-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ripi-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ripi-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.10);
    --ripi-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --ripi-input-height: 3.05rem;
}

.ripi-wizard {
    max-width: 920px;
    margin: 2.5rem auto 4rem;
    padding: 0 1.25rem;
    color: var(--ripi-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 * Header
 * ============================================================ */

.ripi-wizard__header {
    text-align: center;
    margin-bottom: 2.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.ripi-wizard__eyebrow {
    display: inline-block;
    margin: 0 0 0.85rem;
    padding: 0.3rem 0.85rem;
    background: var(--ripi-accent-soft);
    color: var(--ripi-accent-strong);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 999px;
}

.ripi-wizard__title {
    font-size: clamp(1.85rem, 2.5vw + 0.5rem, 2.5rem);
    font-weight: 700;
    color: var(--ripi-text);
    margin: 0 0 0.85rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ripi-wizard__intro {
    color: var(--ripi-text-muted);
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
}

/* ============================================================
 * Restrict wp.media for anonymous wizard visitors
 *
 * The visitor must be able to upload new images and documents from
 * their own machine, but never browse the site's existing media
 * library. We hide the « Bibliothèque de médias » router tab and
 * the URL/Insert-from-URL menu so only « Téléverser des fichiers »
 * is reachable. The server-side filter in `restrict_media_library_for_wizard`
 * still empties the listing as a defence in depth.
 * ============================================================ */

body.ripi-wizard-active .media-modal .media-frame-router .media-router .media-menu-item:nth-child(n+2),
body.ripi-wizard-active .media-modal .media-frame-menu .media-menu-item:not(.active),
body.ripi-wizard-active .media-modal .media-frame-toolbar .media-toolbar-secondary,
body.ripi-wizard-active .media-modal .embed-link-settings,
body.ripi-wizard-active .media-modal #menu-item-embed,
body.ripi-wizard-active .media-modal #menu-item-gallery,
body.ripi-wizard-active .media-modal #menu-item-playlist,
body.ripi-wizard-active .media-modal #menu-item-video-playlist,
body.ripi-wizard-active .media-modal #menu-item-featured-image {
    display: none !important;
}

/* ============================================================
 * Submit-blocked alert (final submit attempted with missing required)
 * ============================================================ */

.ripi-wizard__alert {
    background: #fff1f2;
    border: 1px solid #fda4af;
    border-left: 4px solid #e11d48;
    border-radius: var(--ripi-radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
    color: #7f1d1d;
}

.ripi-wizard__alert-title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    color: #9f1239;
}

.ripi-wizard__alert-text {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #7f1d1d;
}

.ripi-wizard__alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ripi-wizard__alert-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
    margin: 0;
    font-size: 0.95rem;
}

.ripi-wizard__alert-link {
    font-weight: 600;
    color: #9f1239;
    text-decoration: underline;
}

.ripi-wizard__alert-link:hover {
    color: #e11d48;
}

.ripi-wizard__alert-fields {
    color: #7f1d1d;
    font-style: italic;
}

/* ============================================================
 * Saved-state banner (after clicking « Enregistrer »)
 * ============================================================ */

.ripi-wizard__saved {
    background: var(--ripi-success-soft);
    border: 1px solid color-mix(in srgb, var(--ripi-success) 30%, transparent);
    border-radius: var(--ripi-radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--ripi-shadow-sm);
}

.ripi-wizard__saved-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ripi-wizard__saved-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ripi-success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
}

.ripi-wizard__saved-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ripi-success);
}

.ripi-wizard__saved-text {
    margin: 0 0 0.85rem;
    color: var(--ripi-text);
    font-size: 0.95rem;
}

.ripi-wizard__saved-link-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.ripi-wizard__saved-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--ripi-border);
    border-radius: var(--ripi-radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    background: var(--ripi-bg);
    color: var(--ripi-text);
}

.ripi-wizard__saved-link:focus {
    outline: none;
    border-color: var(--ripi-accent);
    box-shadow: 0 0 0 3px var(--ripi-accent-glow);
}

.ripi-wizard__saved-copy {
    flex: 0 0 auto;
    background: var(--ripi-accent);
    color: #fff;
    border: 0;
    padding: 0.65rem 1.25rem;
    border-radius: var(--ripi-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ripi-transition), transform var(--ripi-transition);
    font-family: inherit;
}

.ripi-wizard__saved-copy:hover {
    background: var(--ripi-accent-strong);
    transform: translateY(-1px);
}

.ripi-wizard__saved-copy--success {
    background: var(--ripi-success);
}

.ripi-wizard__saved-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ripi-text-muted);
    font-style: italic;
}

/* ============================================================
 * Progress indicator
 * ============================================================ */

.ripi-wizard__progress {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    margin: 0 0 2.5rem;
    position: relative;
    gap: 0.25rem;
}

.ripi-wizard__progress::before {
    content: "";
    position: absolute;
    left: calc(10% + 0.5rem);
    right: calc(10% + 0.5rem);
    top: 1.5rem;
    height: 3px;
    background: var(--ripi-border);
    border-radius: 999px;
    z-index: 0;
}

.ripi-wizard__progress-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    z-index: 1;
    font-size: 0.82rem;
    color: var(--ripi-text-soft);
    text-align: center;
}

.ripi-wizard__progress-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ripi-wizard__progress-link:hover .ripi-wizard__progress-num {
    transform: translateY(-2px);
    box-shadow: var(--ripi-shadow);
}

.ripi-wizard__progress-num {
    position: relative;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ripi-bg);
    border: 2px solid var(--ripi-border);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ripi-text-soft);
    transition: transform var(--ripi-transition),
                background var(--ripi-transition),
                border-color var(--ripi-transition),
                color var(--ripi-transition),
                box-shadow var(--ripi-transition);
}

.ripi-wizard__progress-num-text {
    line-height: 1;
}

.ripi-wizard__progress-label {
    font-weight: 500;
    max-width: 9.5rem;
    line-height: 1.3;
}

.ripi-wizard__progress-item--done .ripi-wizard__progress-num {
    background: var(--ripi-success);
    border-color: var(--ripi-success);
    color: #fff;
}

.ripi-wizard__progress-item--done .ripi-wizard__progress-num-text {
    display: none;
}

.ripi-wizard__progress-item--done .ripi-wizard__progress-num::before {
    content: "✓";
    font-size: 1.2rem;
    line-height: 1;
}

.ripi-wizard__progress-item--done .ripi-wizard__progress-label {
    color: var(--ripi-text-muted);
}

.ripi-wizard__progress-item--current .ripi-wizard__progress-num {
    background: var(--ripi-accent);
    border-color: var(--ripi-accent);
    color: #fff;
    box-shadow: 0 0 0 6px var(--ripi-accent-soft);
}

.ripi-wizard__progress-item--current .ripi-wizard__progress-label {
    color: var(--ripi-accent-strong);
    font-weight: 600;
}

.ripi-wizard__progress-item--upcoming .ripi-wizard__progress-num {
    background: var(--ripi-bg-alt);
}

/* Incomplete badge */

.ripi-wizard__progress-item--incomplete .ripi-wizard__progress-num {
    border-color: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

.ripi-wizard__progress-item--incomplete.ripi-wizard__progress-item--done .ripi-wizard__progress-num {
    background: var(--ripi-bg);
    border-color: #f59e0b;
    color: var(--ripi-warning);
}

.ripi-wizard__progress-item--incomplete.ripi-wizard__progress-item--done .ripi-wizard__progress-num::before {
    content: none;
}

.ripi-wizard__progress-item--incomplete.ripi-wizard__progress-item--done .ripi-wizard__progress-num-text {
    display: inline;
    color: var(--ripi-warning);
}

.ripi-wizard__progress-warn {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(180, 83, 9, 0.35);
    cursor: help;
    z-index: 2;
}

/* Tooltip on warn */

.ripi-wizard__progress-item:hover .ripi-wizard__progress-warn[data-tooltip]::after,
.ripi-wizard__progress-item:focus-within .ripi-wizard__progress-warn[data-tooltip]::after,
.ripi-wizard__progress-warn[data-tooltip]:hover::after,
.ripi-wizard__progress-warn[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.65rem);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    text-align: left;
    pointer-events: none;
    z-index: 10;
}

.ripi-wizard__progress-item:hover .ripi-wizard__progress-warn[data-tooltip]::before,
.ripi-wizard__progress-item:focus-within .ripi-wizard__progress-warn[data-tooltip]::before,
.ripi-wizard__progress-warn[data-tooltip]:hover::before,
.ripi-wizard__progress-warn[data-tooltip]:focus::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
    pointer-events: none;
    z-index: 10;
}

@media (max-width: 720px) {
    .ripi-wizard__progress-label {
        display: none;
    }
    .ripi-wizard__progress {
        margin-bottom: 2rem;
    }
    .ripi-wizard__progress::before {
        top: 1.5rem;
        left: 1.5rem;
        right: 1.5rem;
    }
    .ripi-wizard__progress-num {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1rem;
    }
}

/* ============================================================
 * Step body / card
 * ============================================================ */

.ripi-wizard__body {
    background: var(--ripi-bg);
    border: 1px solid var(--ripi-border-soft);
    border-radius: var(--ripi-radius-lg);
    padding: 2.75rem 2.75rem 2.25rem;
    box-shadow: var(--ripi-shadow);
}

@media (max-width: 600px) {
    .ripi-wizard__body {
        padding: 1.75rem 1.25rem 1.5rem;
        border-radius: var(--ripi-radius);
    }
}

.ripi-wizard__step-heading {
    margin: 0 0 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ripi-border-soft);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ripi-wizard__step-counter {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ripi-accent);
    font-weight: 700;
}

.ripi-wizard__step-name {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ripi-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ============================================================
 * ACF form — uniform field rendering
 *
 * Field padding / borders / row layout live in the dedicated
 * "Aligned half-width / third-width fields" block further down.
 * ============================================================ */

.ripi-wizard__form .acf-label {
    margin-bottom: 0.6rem;
}

.ripi-wizard__form .acf-label label {
    font-weight: 600;
    color: var(--ripi-text);
    margin-bottom: 0.3rem;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: -0.005em;
}

.ripi-wizard__form .acf-label .description,
.ripi-wizard__form .acf-label p.description {
    color: var(--ripi-text-muted);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

.ripi-wizard__form .acf-required {
    color: #e11d48;
    font-weight: 700;
    margin-left: 0.15rem;
}

.ripi-wizard__form .acf-field.ripi-was-required > .acf-label label::after {
    content: " *";
    color: #e11d48;
    font-weight: 700;
    margin-left: 0.15rem;
}

/* ---- Inputs : same height, same padding, same focus state ---- */

.ripi-wizard__form input[type="text"],
.ripi-wizard__form input[type="email"],
.ripi-wizard__form input[type="number"],
.ripi-wizard__form input[type="tel"],
.ripi-wizard__form input[type="url"],
.ripi-wizard__form input[type="password"],
.ripi-wizard__form input[type="date"],
.ripi-wizard__form input[type="search"],
.ripi-wizard__form select,
.ripi-wizard__form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--ripi-border);
    border-radius: var(--ripi-radius-sm);
    font-size: 1rem;
    line-height: 1.4;
    background: var(--ripi-bg);
    color: var(--ripi-text);
    transition: border-color var(--ripi-transition), box-shadow var(--ripi-transition);
    font-family: inherit;
    min-height: var(--ripi-input-height);
}

.ripi-wizard__form textarea {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.55;
}

.ripi-wizard__form input::placeholder,
.ripi-wizard__form textarea::placeholder {
    color: var(--ripi-text-soft);
}

/* Hide native browser spin buttons on number inputs — they overlap
 * the absolutely-positioned addon and look noisy. */
.ripi-wizard__form input[type="number"]::-webkit-outer-spin-button,
.ripi-wizard__form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

.ripi-wizard__form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ripi-wizard__form input:hover,
.ripi-wizard__form textarea:hover,
.ripi-wizard__form select:hover {
    border-color: var(--ripi-text-soft);
}

.ripi-wizard__form input:focus,
.ripi-wizard__form textarea:focus,
.ripi-wizard__form select:focus {
    border-color: var(--ripi-accent);
    outline: none;
    box-shadow: 0 0 0 4px var(--ripi-accent-glow);
}

/* ---- Input + addon (m², m, °) overlay approach ----
 * ACF tries to lay these out with floats and absolutes; themes
 * fight back. We embrace the absolute approach so no flex / float
 * direction can swap things : the input fills the wrap, the addon
 * is anchored to the right edge, the input gets enough right
 * padding to keep its text out of the addon.
 */

.ripi-wizard__form .acf-input-wrap {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.ripi-wizard__form .acf-input-wrap > input,
.ripi-wizard__form .acf-input-wrap > textarea {
    width: 100% !important;
    margin: 0 !important;
}

/* Default extra room when an append is present.
 * Modern browsers narrow this with :has(); older ones still work
 * because the addon sits on top with z-index. */
.ripi-wizard__form .acf-input-wrap:has(.acf-input-append) > input,
.ripi-wizard__form .acf-input-wrap:has(.acf-input-append) > textarea {
    padding-right: 3.75rem !important;
}

.ripi-wizard__form .acf-input-wrap:has(.acf-input-prepend) > input,
.ripi-wizard__form .acf-input-wrap:has(.acf-input-prepend) > textarea {
    padding-left: 3.75rem !important;
}

.ripi-wizard__form .acf-input-append,
.ripi-wizard__form .acf-input-prepend {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 1rem !important;
    background: var(--ripi-bg-alt) !important;
    color: var(--ripi-text-muted) !important;
    border: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    margin: 0 !important;
    float: none !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.ripi-wizard__form .acf-input-append {
    right: 1.5px !important;
    left: auto !important;
    border-top-right-radius: calc(var(--ripi-radius-sm) - 2px) !important;
    border-bottom-right-radius: calc(var(--ripi-radius-sm) - 2px) !important;
    border-left: 1.5px solid var(--ripi-border) !important;
}

.ripi-wizard__form .acf-input-prepend {
    left: 1.5px !important;
    right: auto !important;
    border-top-left-radius: calc(var(--ripi-radius-sm) - 2px) !important;
    border-bottom-left-radius: calc(var(--ripi-radius-sm) - 2px) !important;
    border-right: 1.5px solid var(--ripi-border) !important;
}

.ripi-wizard__form .acf-input-wrap:focus-within .acf-input-append {
    border-left-color: var(--ripi-accent) !important;
}

.ripi-wizard__form .acf-input-wrap:focus-within .acf-input-prepend {
    border-right-color: var(--ripi-accent) !important;
}

/* Fields that swap their static append for a ripi-unit-toggle need
 * a wider right padding so the toggle never overlaps the typed value. */
.ripi-wizard__form [data-name="ripi_area_m2"] .acf-input-wrap > input {
    padding-right: 9.5rem !important;
}
.ripi-wizard__form [data-name="ripi_frontage_m"] .acf-input-wrap > input,
.ripi-wizard__form [data-name="ripi_depth_m"] .acf-input-wrap > input {
    padding-right: 7.5rem !important;
}

/* ---- Unit toggle (m² / pi²) — absolutely placed inside the wrap ---- */

.ripi-unit-toggle {
    position: absolute !important;
    right: 1.5px !important;
    top: 1.5px !important;
    bottom: 1.5px !important;
    display: inline-flex !important;
    align-items: stretch !important;
    border-left: 1.5px solid var(--ripi-border) !important;
    overflow: hidden !important;
    background: var(--ripi-bg) !important;
    border-top-right-radius: calc(var(--ripi-radius-sm) - 2px) !important;
    border-bottom-right-radius: calc(var(--ripi-radius-sm) - 2px) !important;
    z-index: 2 !important;
}

.ripi-unit-toggle__btn,
.ripi-unit-toggle__btn:focus,
.ripi-unit-toggle__btn:active,
.ripi-unit-toggle__btn:hover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1rem !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ripi-text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: background var(--ripi-transition), color var(--ripi-transition);
    font-family: inherit !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    outline: none !important;
}

.ripi-unit-toggle__btn:hover {
    background: var(--ripi-accent-soft) !important;
    background-color: var(--ripi-accent-soft) !important;
    color: var(--ripi-accent-strong) !important;
}

.ripi-unit-toggle__btn--active,
.ripi-unit-toggle__btn--active:hover,
.ripi-unit-toggle__btn--active:focus,
.ripi-unit-toggle__btn--active:active {
    background: var(--ripi-accent) !important;
    background-color: var(--ripi-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ---- Button group : equal-width buttons ----
 * `min-width: 0` lets a Yes/No pair sit side-by-side even when the
 * field wrapper is only 33 % wide. `flex-wrap: nowrap` keeps them
 * on the same row at any wrapper width — they always shrink instead
 * of stacking vertically. */

.ripi-wizard__form .acf-button-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
    align-items: stretch !important;
}

.ripi-wizard__form .acf-button-group label {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    border-radius: var(--ripi-radius-sm) !important;
    border: 1.5px solid var(--ripi-border) !important;
    background: var(--ripi-bg) !important;
    background-color: var(--ripi-bg) !important;
    color: var(--ripi-text) !important;
    padding: 0.85rem 1rem !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all var(--ripi-transition);
    margin: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ripi-wizard__form .acf-button-group label:hover {
    border-color: var(--ripi-accent) !important;
    background: var(--ripi-accent-soft) !important;
    background-color: var(--ripi-accent-soft) !important;
    color: var(--ripi-accent-strong) !important;
}

/* Active / selected state — selectors duplicated with focus / active
 * to defeat Salient's brand-yellow override on `<label>:focus`. */
.ripi-wizard__form .acf-button-group label.selected,
.ripi-wizard__form .acf-button-group label.selected:hover,
.ripi-wizard__form .acf-button-group label.selected:focus,
.ripi-wizard__form .acf-button-group label.selected:active,
.ripi-wizard__form .acf-button-group label.selected:focus-visible,
.ripi-wizard__form .acf-button-group input:checked + label,
.ripi-wizard__form .acf-button-group input:checked + label:hover,
.ripi-wizard__form .acf-button-group input:checked + label:focus,
.ripi-wizard__form .acf-button-group input:checked + label:focus-visible {
    background: var(--ripi-accent) !important;
    background-color: var(--ripi-accent) !important;
    border-color: var(--ripi-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px var(--ripi-accent-glow) !important;
}

/* Reset focus/active backgrounds on the unselected labels so themes
 * (Salient in particular) don't paint them yellow on click-and-hold. */
.ripi-wizard__form .acf-button-group label:focus,
.ripi-wizard__form .acf-button-group label:focus-visible,
.ripi-wizard__form .acf-button-group label:active {
    background: var(--ripi-bg) !important;
    background-color: var(--ripi-bg) !important;
    color: var(--ripi-text) !important;
    outline: 3px solid var(--ripi-accent-glow) !important;
    outline-offset: 2px !important;
}

@media (max-width: 480px) {
    .ripi-wizard__form .acf-button-group label {
        font-size: 0.9rem !important;
        padding: 0.7rem 0.5rem !important;
    }
}

/* ---- Yes/No tri-state (Oui / Non / vide) ----
 * Since 2.1.0 the former true_false fields are rendered as
 * `button_group` with `allow_null: 1`, so we get a proper three-state
 * answer (oui / non / no answer). Styling is inherited from the
 * shared `.acf-button-group` rules below — nothing field-specific
 * is needed here. The defensive selectors strip any residual markup
 * from the legacy toggle / native-checkbox modes (2.0.0 → 2.0.2). */
.ripi-wizard__form .acf-true-false,
.ripi-wizard__form .acf-switch,
.ripi-wizard__form .acf-switch-slider,
.ripi-wizard__form .acf-switch-on,
.ripi-wizard__form .acf-switch-off {
    display: none !important;
}

/* ---- Hide ACF 6.x email validation button ----
 * ACF renders a "Validate Email" CTA next to email inputs that calls
 * a deliverability API. We don't use it, the visitor doesn't need it,
 * and translating the label still left a useless button on the form. */
.ripi-wizard__form .acf-field-email .acf-input button,
.ripi-wizard__form .acf-field-email .acf-input [class*="validate"],
.ripi-wizard__form .acf-field-email .acf-input .acf-button {
    display: none !important;
}

/* ---- Hide ACF 6.3+ anti-spam honeypot field ----
 * ACF auto-injects a fake « Validate Email » input on every acf_form()
 * render to catch bots. WordPress' default `.acf-hidden` would keep
 * it off-screen, but Salient repaints `.acf-hidden` and reveals it
 * on every step of the wizard. We push it firmly off-screen while
 * keeping it in the DOM (bots still find and fill it). */
.ripi-wizard__form .acf-field[data-name="_validate_email"],
.ripi-wizard__form .acf-field[data-name="validate_email"],
.ripi-wizard__form .acf-hidden {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ---- Checkbox / radio ---- */

.ripi-wizard__form .acf-checkbox-list,
.ripi-wizard__form .acf-radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ripi-wizard__form .acf-checkbox-list li,
.ripi-wizard__form .acf-radio-list li {
    margin: 0;
}

.ripi-wizard__form .acf-checkbox-list label,
.ripi-wizard__form .acf-radio-list label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    cursor: pointer !important;
    color: var(--ripi-text) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    user-select: none !important;
}

/* Custom checkbox / radio visuals — neutralise themes (Salient,
 * Astra, etc.) that repaint native inputs to invisibility, and
 * align the look with the rest of the wizard (rounded corners,
 * teal accent, soft focus ring). */
.ripi-wizard__form .acf-checkbox-list input[type="checkbox"],
.ripi-wizard__form .acf-radio-list input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 0 0 auto !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--ripi-border) !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    cursor: pointer !important;
    position: relative !important;
    transition: border-color var(--ripi-transition), background-color var(--ripi-transition), box-shadow var(--ripi-transition);
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    vertical-align: middle !important;
    inset: auto !important;
}

.ripi-wizard__form .acf-checkbox-list input[type="checkbox"] {
    border-radius: var(--ripi-radius-sm) !important;
}

.ripi-wizard__form .acf-radio-list input[type="radio"] {
    border-radius: 50% !important;
}

.ripi-wizard__form .acf-checkbox-list input[type="checkbox"]:hover,
.ripi-wizard__form .acf-radio-list input[type="radio"]:hover {
    border-color: var(--ripi-accent) !important;
}

.ripi-wizard__form .acf-checkbox-list input[type="checkbox"]:focus,
.ripi-wizard__form .acf-checkbox-list input[type="checkbox"]:focus-visible,
.ripi-wizard__form .acf-radio-list input[type="radio"]:focus,
.ripi-wizard__form .acf-radio-list input[type="radio"]:focus-visible {
    border-color: var(--ripi-accent) !important;
    outline: 3px solid var(--ripi-accent-glow) !important;
    outline-offset: 2px !important;
}

.ripi-wizard__form .acf-checkbox-list input[type="checkbox"]:checked,
.ripi-wizard__form .acf-radio-list input[type="radio"]:checked {
    background: var(--ripi-accent) !important;
    background-color: var(--ripi-accent) !important;
    border-color: var(--ripi-accent) !important;
}

/* White check glyph rendered via a CSS mask — survives themes that
 * strip background-image from inputs. */
.ripi-wizard__form .acf-checkbox-list input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #fff !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polyline points='3.5 8.5 6.8 11.5 12.5 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polyline points='3.5 8.5 6.8 11.5 12.5 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    -webkit-mask-size: 88% 88% !important;
            mask-size: 88% 88% !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
}

.ripi-wizard__form .acf-radio-list input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 0.55rem !important;
    height: 0.55rem !important;
    border-radius: 50% !important;
    background: #fff !important;
}

/* ---- Gallery / repeater frames ---- */

.ripi-wizard__form .acf-gallery,
.ripi-wizard__form .acf-repeater {
    border: 1.5px dashed var(--ripi-border);
    border-radius: var(--ripi-radius);
    background: var(--ripi-bg-alt);
    padding: 0.5rem;
}

/* ACF action buttons / links inside gallery, repeater, file fields.
 * Themes (especially Salient) repaint every <a> and <button> with
 * brand colors that turn out unreadable on light backgrounds. We
 * force them back to a clean accent-tinted button look.
 */
.ripi-wizard__form .acf-gallery-add,
.ripi-wizard__form .acf-gallery .acf-button,
.ripi-wizard__form .acf-gallery-toolbar a,
.ripi-wizard__form .acf-repeater .acf-button,
.ripi-wizard__form .acf-repeater .acf-actions a,
.ripi-wizard__form .acf-actions a,
.ripi-wizard__form .acf-actions button,
.ripi-wizard__form a.acf-button,
.ripi-wizard__form .acf-image-uploader .acf-button,
.ripi-wizard__form .acf-file-uploader .acf-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.5rem 1rem !important;
    background: var(--ripi-accent-soft) !important;
    background-image: none !important;
    color: var(--ripi-accent-strong) !important;
    border: 1.5px solid var(--ripi-accent) !important;
    border-radius: var(--ripi-radius-sm) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background var(--ripi-transition), color var(--ripi-transition), border-color var(--ripi-transition);
}

.ripi-wizard__form .acf-gallery-add:hover,
.ripi-wizard__form .acf-gallery .acf-button:hover,
.ripi-wizard__form .acf-gallery-toolbar a:hover,
.ripi-wizard__form .acf-repeater .acf-button:hover,
.ripi-wizard__form .acf-repeater .acf-actions a:hover,
.ripi-wizard__form .acf-actions a:hover,
.ripi-wizard__form .acf-actions button:hover,
.ripi-wizard__form a.acf-button:hover,
.ripi-wizard__form .acf-image-uploader .acf-button:hover,
.ripi-wizard__form .acf-file-uploader .acf-button:hover {
    background: var(--ripi-accent) !important;
    color: #fff !important;
    border-color: var(--ripi-accent) !important;
}

/* Gallery bulk-action select : align with the rest of the inputs */
.ripi-wizard__form .acf-gallery-toolbar select,
.ripi-wizard__form select.acf-gallery-bulk-actions {
    padding: 0.45rem 0.75rem !important;
    border: 1.5px solid var(--ripi-border) !important;
    border-radius: var(--ripi-radius-sm) !important;
    background: var(--ripi-bg) !important;
    color: var(--ripi-text) !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
}

/* ---- Aligned half-width / third-width fields via CSS Grid ----
 *
 * 6-column grid : full-width = 6 cols, half = 3 cols, third = 2 cols.
 * Grid items in the same row stretch to row height by default —
 * combined with `margin-top: auto` on `.acf-input`, the inputs of
 * side-by-side fields land on the same baseline regardless of how
 * tall the labels and descriptions get.
 *
 * Critical detail : ACF renders the wrapper as `.acf-fields .-label`
 * (instruction placement), not `.-left`. We target `.acf-fields`
 * directly so it works everywhere.
 */

.ripi-wizard__form .acf-fields {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    column-gap: 1.25rem !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.ripi-wizard__form .acf-fields > .acf-field {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 1.4rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ripi-border-soft) !important;
    grid-column: 1 / -1 !important; /* default = full row */
    float: none !important;
}

.ripi-wizard__form .acf-fields > .acf-field:first-child {
    border-top: 0 !important;
    padding-top: 0.25rem !important;
}

/* Width-based grid spans */
.ripi-wizard__form .acf-fields > .acf-field[data-width="50"] {
    grid-column: span 3 !important;
}

.ripi-wizard__form .acf-fields > .acf-field[data-width="33"] {
    grid-column: span 2 !important;
}

.ripi-wizard__form .acf-fields > .acf-field[data-width="34"] {
    grid-column: span 2 !important;
}

.ripi-wizard__form .acf-fields > .acf-field[data-width="25"] {
    grid-column: span 2 !important; /* approx — 6/4 isn't whole */
}

.ripi-wizard__form .acf-fields > .acf-field[data-width="75"] {
    grid-column: span 4 !important;
}

/* Push input to the bottom of each column — produces aligned
 * baselines across siblings of the same grid row. */
.ripi-wizard__form .acf-fields > .acf-field > .acf-input {
    margin-top: auto !important;
}

/* When a [data-width] field follows another [data-width] field, the
 * top border would create a small horizontal line interrupting the
 * row visually. Drop it for siblings inside the same row. */
.ripi-wizard__form .acf-fields > .acf-field[data-width] + .acf-field[data-width] {
    border-top: 0 !important;
}

/* ============================================================
 * Form footer : Save (left) ↔ Continue (right)
 * Layout produced by JS wrapping save + submit in
 * `.ripi-wizard__form-footer`.
 * ============================================================ */

.ripi-wizard__form > input[type="hidden"] {
    display: none;
}

.ripi-wizard__form-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1.25rem !important;
    margin: 2.25rem 0 0 0 !important;
    padding: 1.5rem 0 0 0 !important;
    border-top: 1px solid var(--ripi-border-soft) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    /* The wrapping JS lands the footer inside `.acf-fields` (since
     * its anchor — the save link — was injected via html_after_fields).
     * `.acf-fields` is a flex/grid row layout for ACF columns ; force
     * the footer to span the full width so it never sits beside a
     * dropzone or any other field. */
    flex: 1 1 100% !important;
    grid-column: 1 / -1 !important;
}

/* The bare `.ripi-wizard__save-link` button before the JS wrap (or
 * if the wrap is bypassed) also needs to span the full width so it
 * stays under the dropzones rather than next to them. */
.ripi-wizard__form .ripi-wizard__save-link {
    flex: 1 1 auto;
    grid-column: 1 / -1;
}

.ripi-wizard__form-footer .acf-form-submit {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: right !important;
    flex: 0 0 auto !important;
    width: auto !important;
    background: transparent !important;
}

.ripi-wizard__form-footer .ripi-wizard__save-link {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Fallback : if the JS wrapping fails for any reason, the bare
 * children still align reasonably (save flushes left, submit flushes
 * right, on their own row each). */
.ripi-wizard__form > .acf-form-submit {
    text-align: right !important;
    margin-top: 1.5rem !important;
}

.ripi-wizard__form > .ripi-wizard__save-link {
    margin-top: 1.5rem !important;
}

@media (max-width: 600px) {
    .ripi-wizard__form-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    .ripi-wizard__form-footer .acf-form-submit {
        text-align: center !important;
    }
    .ripi-wizard__form-footer .ripi-wizard__save-link {
        align-self: center !important;
    }
}

/* Hide the static "m²" append on the area field — the JS-driven unit
 * toggle replaces it. Belt-and-suspenders : the JS already does the
 * same via inline style, but if the JS hasn't loaded yet the toggle
 * and the static label briefly co-exist and look odd. */
.ripi-wizard__form [data-name="ripi_area_m2"] .acf-input-wrap > .acf-input-append,
.ripi-wizard__form [data-name="ripi_frontage_m"] .acf-input-wrap > .acf-input-append,
.ripi-wizard__form [data-name="ripi_depth_m"] .acf-input-wrap > .acf-input-append {
    display: none !important;
}

/* Live conversion display under any input that has a ripi-unit-toggle
 * ("≈ 1 324 pi²", "≈ 65 pi", etc.). */
.ripi-unit-equivalent {
    margin-top: 0.5rem !important;
    font-size: 0.92rem !important;
    color: var(--ripi-text-muted) !important;
    font-style: italic !important;
    min-height: 1.3em !important;
    opacity: 0;
    transition: opacity 0.18s var(--ripi-transition);
}

.ripi-unit-equivalent--visible {
    opacity: 1;
}

/* ---- Save link (bottom-left) ----
 * The !important rules are necessary to win against opinionated themes
 * (Salient, Astra, Divi…) that target every <button> on the site with
 * brand-coloured backgrounds.
 */

.ripi-wizard .ripi-wizard__save-link,
button.ripi-wizard__save-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    color: var(--ripi-text-muted) !important;
    padding: 0.55rem 0.95rem !important;
    border-radius: 999px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    font-family: inherit !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-width: 0 !important;
    transition: all var(--ripi-transition);
}

.ripi-wizard .ripi-wizard__save-link:hover,
button.ripi-wizard__save-link:hover {
    color: var(--ripi-accent-strong) !important;
    background: var(--ripi-accent-soft) !important;
    border-color: color-mix(in srgb, var(--ripi-accent) 30%, transparent) !important;
    transform: none !important;
}

.ripi-wizard .ripi-wizard__save-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ripi-accent-glow) !important;
}

.ripi-wizard__save-icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* ---- Submit button (bottom-right) ----
 * Now rendered as a <button> for predictable flex-centering of the
 * label, with a span inside that we can target precisely.
 */

.ripi-wizard button.ripi-wizard__submit,
button.ripi-wizard__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.85rem 2rem !important;
    height: auto !important;
    line-height: 1.2 !important;
    background: var(--ripi-accent) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--ripi-radius-sm) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: background var(--ripi-transition),
                box-shadow var(--ripi-transition) !important;
    box-shadow: 0 2px 8px var(--ripi-accent-glow) !important;
    font-family: inherit !important;
    min-width: 11rem !important;
    min-height: var(--ripi-input-height) !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
}

.ripi-wizard button.ripi-wizard__submit > span,
button.ripi-wizard__submit > span {
    display: inline-block !important;
    line-height: 1 !important;
    color: inherit !important;
    font-weight: inherit !important;
}

.ripi-wizard button.ripi-wizard__submit:hover,
button.ripi-wizard__submit:hover {
    background: var(--ripi-accent-strong) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: 0 4px 14px var(--ripi-accent-glow) !important;
}

.ripi-wizard button.ripi-wizard__submit:active,
.ripi-wizard button.ripi-wizard__submit:focus,
.ripi-wizard button.ripi-wizard__submit:focus-visible,
button.ripi-wizard__submit:active,
button.ripi-wizard__submit:focus,
button.ripi-wizard__submit:focus-visible {
    transform: none !important;
    box-shadow: 0 2px 6px var(--ripi-accent-glow), 0 0 0 3px var(--ripi-accent-glow) !important;
    background: var(--ripi-accent-strong) !important;
    color: #fff !important;
    outline: none !important;
}

@media (max-width: 600px) {
    button.ripi-wizard__submit {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ============================================================
 * Back navigation
 * ============================================================ */

.ripi-wizard__nav {
    margin-top: 1.75rem;
    text-align: center;
}

.ripi-wizard__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ripi-text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    transition: background var(--ripi-transition), color var(--ripi-transition);
}

.ripi-wizard__back:hover {
    background: var(--ripi-bg-alt);
    color: var(--ripi-accent-strong);
}

/* ============================================================
 * Success / info / error states
 * ============================================================ */

.ripi-wizard--success,
.ripi-wizard--info,
.ripi-wizard--error {
    text-align: center;
    background: var(--ripi-bg);
    border: 1px solid var(--ripi-border-soft);
    border-radius: var(--ripi-radius-lg);
    padding: 3.5rem 2.5rem;
    box-shadow: var(--ripi-shadow);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.ripi-wizard__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--ripi-success-soft);
    color: var(--ripi-success);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    border: 3px solid var(--ripi-success);
}

.ripi-wizard__success-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ripi-text);
    margin: 0 0 1.25rem;
    letter-spacing: -0.015em;
}

.ripi-wizard--success p,
.ripi-wizard--info p {
    color: var(--ripi-text-muted);
    max-width: 520px;
    margin: 0.85rem auto;
    font-size: 1.02rem;
    line-height: 1.6;
}

.ripi-wizard__success-meta {
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.ripi-wizard__success-meta a {
    color: var(--ripi-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ripi-wizard__success-meta a:hover {
    color: var(--ripi-accent-strong);
}

.ripi-wizard--info .ripi-wizard__title {
    font-size: 1.6rem;
    margin: 0 0 1rem;
    color: var(--ripi-text);
}

.ripi-wizard__cta {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: var(--ripi-accent);
    color: #fff;
    border-radius: var(--ripi-radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: background var(--ripi-transition), transform var(--ripi-transition);
}

.ripi-wizard__cta:hover {
    background: var(--ripi-accent-strong);
    transform: translateY(-1px);
}

.ripi-wizard--error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #7f1d1d;
}