/**
 * The return form.
 *
 * ⚠ Every value the Elementor widget can change is a --kbr-* custom property, declared here with a
 * default inside :where(.kbr-app). :where() has zero specificity, so a theme or an Elementor rule
 * overrides any of it without a specificity fight, and the widget looks finished with no controls
 * touched.
 *
 * Elementor writes the properties onto {{WRAPPER}}; only the typography groups use real selectors,
 * because Group_Control_Typography emits a bundle of declarations rather than one value.
 *
 * @package Kaybee\Returns
 */

:where(.kbr-app) {
    /* Wrapper */
    --kbr-max-width: 46rem;
    --kbr-bg: transparent;
    --kbr-padding: 0;
    --kbr-radius: 0;
    --kbr-border-width: 0;
    --kbr-border-color: transparent;

    /* Palette */
    --kbr-text: inherit;
    --kbr-muted: #6b6b6b;
    --kbr-line: #e0e0e0;
    --kbr-accent: #1d1d1b;

    /* Step titles */
    --kbr-title-color: inherit;
    --kbr-title-margin: 0 0 1rem;

    /* Intro */
    --kbr-intro-color: inherit;
    --kbr-intro-margin: 0 0 1.5rem;
    --kbr-intro-link: var(--kbr-accent);
    --kbr-intro-link-hover: var(--kbr-accent);

    /* Fields */
    --kbr-field-gap: 1rem;
    --kbr-field-bg: #fff;
    --kbr-field-color: #1d1d1b;
    --kbr-field-placeholder: #9a9a9a;
    --kbr-field-border-width: 1px;
    --kbr-field-border-color: #c9c9c9;
    --kbr-field-radius: 3px;
    --kbr-field-padding: 0.65rem 0.85rem;
    --kbr-field-height: auto;
    --kbr-field-focus-border: var(--kbr-accent);
    --kbr-field-focus-bg: #fff;
    --kbr-field-focus-shadow: 0 0 0 3px rgba(29, 29, 27, 0.12);

    /* Labels */
    --kbr-label-color: inherit;
    --kbr-label-margin: 0 0 0.35rem;
    --kbr-required-color: #b32d2e;

    /* Primary button */
    --kbr-btn-primary-bg: #1d1d1b;
    --kbr-btn-primary-color: #fff;
    --kbr-btn-primary-border-color: #1d1d1b;
    --kbr-btn-primary-bg-hover: #3a3a37;
    --kbr-btn-primary-color-hover: #fff;
    --kbr-btn-primary-border-color-hover: #3a3a37;

    /* Secondary button */
    --kbr-btn-secondary-bg: transparent;
    --kbr-btn-secondary-color: #1d1d1b;
    --kbr-btn-secondary-border-color: #c9c9c9;
    --kbr-btn-secondary-bg-hover: #f3f3f3;
    --kbr-btn-secondary-color-hover: #1d1d1b;
    --kbr-btn-secondary-border-color-hover: #1d1d1b;

    /* Muted button (Zurück) */
    --kbr-btn-ghost-bg: transparent;
    --kbr-btn-ghost-color: #6b6b6b;
    --kbr-btn-ghost-border: #dcdcdc;
    --kbr-btn-ghost-bg-hover: #f3f3f3;
    --kbr-btn-ghost-color-hover: #1d1d1b;
    --kbr-btn-ghost-border-hover: #c9c9c9;

    /* Buttons, shared */
    --kbr-btn-border-width: 1px;
    --kbr-btn-radius: 3px;
    --kbr-btn-padding: 0.7rem 1.4rem;
    --kbr-btn-min-width: 0;
    --kbr-btn-transition: 150ms;
    --kbr-btn-disabled-bg: #d8d8d8;
    --kbr-btn-disabled-color: #8a8a8a;
    --kbr-btn-disabled-opacity: 1;

    /* Item rows */
    --kbr-item-bg: transparent;
    --kbr-item-bg-hover: rgba(0, 0, 0, 0.015);
    --kbr-item-bg-selected: rgba(0, 0, 0, 0.03);
    --kbr-item-border-width: 1px;
    --kbr-item-border-color: var(--kbr-line);
    --kbr-item-radius: 4px;
    --kbr-item-padding: 0.9rem 1rem;
    --kbr-item-gap: 0.5rem;
    --kbr-item-title-color: inherit;
    --kbr-item-meta-color: var(--kbr-muted);
    --kbr-item-image-size: 56px;
    --kbr-item-image-radius: 3px;

    /* Toggle */
    --kbr-toggle-width: 42px;
    --kbr-toggle-height: 24px;
    --kbr-toggle-off: #c9c9c9;
    --kbr-toggle-on: var(--kbr-accent);
    --kbr-toggle-knob: #fff;
    --kbr-toggle-radius: 999px;
    --kbr-toggle-focus: rgba(29, 29, 27, 0.25);

    /* Quantity stepper */
    --kbr-stepper-size: 2.6rem;
    --kbr-stepper-input-width: 4rem;
    --kbr-stepper-bg: var(--kbr-field-bg);
    --kbr-stepper-bg-hover: #f3f3f3;
    --kbr-stepper-color: var(--kbr-field-color);
    --kbr-stepper-border: var(--kbr-field-border-color);

    /* Hint (equal-value note under the exchange wish) */
    --kbr-hint-color: #6b5b2e;
    --kbr-hint-bg: #fdf8e8;
    --kbr-hint-border: #e3cf8a;

    /* Unfolded panel */
    --kbr-panel-bg: transparent;
    --kbr-panel-border-width: 1px;
    --kbr-panel-border-color: var(--kbr-line);
    --kbr-panel-radius: 0;
    --kbr-panel-padding: 1rem 0 0.25rem;
    --kbr-panel-margin: 0.9rem 0 0;
    --kbr-panel-gap: 1rem;
    --kbr-panel-accent: var(--kbr-accent);

    /* Progress indicator */
    --kbr-steps-gap: 0.85rem;
    --kbr-steps-margin-bottom: 1.5rem;
    --kbr-steps-font-size: 0.9em;
    --kbr-steps-color: var(--kbr-muted);
    --kbr-steps-color-current: var(--kbr-text);
    --kbr-steps-color-done: var(--kbr-muted);
    --kbr-steps-marker-size: 1.6rem;
    --kbr-steps-marker-bg: transparent;
    --kbr-steps-marker-color: var(--kbr-muted);
    --kbr-steps-marker-border: var(--kbr-line);
    --kbr-steps-marker-bg-current: var(--kbr-accent);
    --kbr-steps-marker-color-current: #fff;
    --kbr-steps-marker-bg-done: var(--kbr-line);
    --kbr-steps-marker-color-done: var(--kbr-text);
    --kbr-steps-connector-width: 1.25rem;
    --kbr-steps-connector-height: 1px;
    --kbr-steps-connector-color: var(--kbr-line);

    /* Order summary */
    --kbr-order-label-color: var(--kbr-muted);
    --kbr-order-value-color: inherit;
    --kbr-order-meta-gap: 1.75rem;

    /* Review cards (step 3) */
    --kbr-review-gap: 0.5rem;
    --kbr-review-bg: transparent;
    --kbr-review-border-width: 1px;
    --kbr-review-border-color: var(--kbr-line);
    --kbr-review-radius: 4px;
    --kbr-review-padding: 0.9rem 1rem;
    --kbr-review-title-color: inherit;
    --kbr-review-meta-color: var(--kbr-muted);
    --kbr-review-label-color: var(--kbr-muted);
    --kbr-review-value-color: inherit;
    --kbr-review-facts-gap: 1.75rem;
    --kbr-review-image-size: 48px;
    --kbr-review-image-radius: 3px;

    /* Success box */
    --kbr-success-bg: #f2f8f3;
    --kbr-success-color: #1d1d1b;
    --kbr-success-border-color: #cde5d2;
    --kbr-success-border-width: 1px;
    --kbr-success-radius: 4px;
    --kbr-success-padding: 1.25rem 1.5rem;

    /* Errors */
    --kbr-error-bg: #fdf2f2;
    --kbr-error-color: #8a2224;
    --kbr-error-border-color: #f0cccc;
    --kbr-error-border-width: 1px;
    --kbr-error-radius: 4px;
    --kbr-error-padding: 0.85rem 1rem;
    --kbr-field-error-color: #b32d2e;
    --kbr-field-error-border: #b32d2e;

    /* Info */
    --kbr-info-bg: #f4f6f8;
    --kbr-info-color: #3c4650;
    --kbr-info-border-color: #dde3e9;

    /* Loading */
    --kbr-spinner-color: var(--kbr-accent);
    --kbr-spinner-size: 20px;
}

/* --------------------------------------------------------------------- */

.kbr-app {
    max-width: var(--kbr-max-width);
    background: var(--kbr-bg);
    padding: var(--kbr-padding);
    border-radius: var(--kbr-radius);
    border: var(--kbr-border-width) solid var(--kbr-border-color);
    color: var(--kbr-text);
}

.kbr-app *,
.kbr-app *::before,
.kbr-app *::after {
    box-sizing: border-box;
}

.kbr-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.kbr-step__title {
    color: var(--kbr-title-color);
    margin: var(--kbr-title-margin);
}

/* A focus ring on a programmatically focused heading reads as an error to sighted users; screen
   reader users get the announcement either way. */
.kbr-step__title:focus {
    outline: none;
}

.kbr-step__title:focus-visible {
    outline: 2px solid var(--kbr-accent);
    outline-offset: 3px;
}

.kbr-intro {
    color: var(--kbr-intro-color);
    margin: var(--kbr-intro-margin);
}

.kbr-intro a { color: var(--kbr-intro-link); }
.kbr-intro a:hover { color: var(--kbr-intro-link-hover); }

/* --- Fields ---------------------------------------------------------- */

.kbr-form {
    display: flex;
    flex-direction: column;
    gap: var(--kbr-field-gap);
    align-items: flex-start;
}

.kbr-field { width: 100%; }

.kbr-field__label,
.kbr-panel__label {
    display: block;
    color: var(--kbr-label-color);
    margin: var(--kbr-label-margin);
}

.kbr-field__input,
.kbr-select,
.kbr-textarea {
    width: 100%;
    background: var(--kbr-field-bg);
    color: var(--kbr-field-color);
    border: var(--kbr-field-border-width) solid var(--kbr-field-border-color);
    border-radius: var(--kbr-field-radius);
    padding: var(--kbr-field-padding);
    font: inherit;
}

.kbr-field__input { height: var(--kbr-field-height); }

.kbr-field__input::placeholder { color: var(--kbr-field-placeholder); }

.kbr-field__input:focus,
.kbr-select:focus,
.kbr-textarea:focus {
    outline: none;
    border-color: var(--kbr-field-focus-border);
    background: var(--kbr-field-focus-bg);
    box-shadow: var(--kbr-field-focus-shadow);
}

.kbr-field__input.is-invalid {
    border-color: var(--kbr-field-error-border);
}

.kbr-field__error {
    color: var(--kbr-field-error-color);
    margin: 0.35rem 0 0;
    font-size: 0.9em;
}

.kbr-help {
    color: var(--kbr-muted);
    margin: 0;
    font-size: 0.9em;
}

/* --- Buttons --------------------------------------------------------- */

/* ⚠ Scoped under .kbr-app, like the stepper. Themes style `button` and `.elementor button` with
   their own brand colour, padding and radius; a single class selector loses to a two-part one, which
   is why the primary button rendered in the theme's yellow instead of these values. Everything a
   theme is likely to set is reset explicitly rather than assumed. */
.kbr-app .kbr-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    text-align: center;
    text-decoration: none;
    border-style: solid;
    border-width: var(--kbr-btn-border-width);
    border-radius: var(--kbr-btn-radius);
    padding: var(--kbr-btn-padding);
    min-width: var(--kbr-btn-min-width);
    margin: 0;
    box-shadow: none;
    transition: background-color var(--kbr-btn-transition) ease,
                color var(--kbr-btn-transition) ease,
                border-color var(--kbr-btn-transition) ease;
}

.kbr-app .kbr-button--primary {
    background: var(--kbr-btn-primary-bg);
    color: var(--kbr-btn-primary-color);
    border-color: var(--kbr-btn-primary-border-color);
}

.kbr-app .kbr-button--primary:hover:not(:disabled) {
    background: var(--kbr-btn-primary-bg-hover);
    color: var(--kbr-btn-primary-color-hover);
    border-color: var(--kbr-btn-primary-border-color-hover);
}

.kbr-app .kbr-button--secondary {
    background: var(--kbr-btn-secondary-bg);
    color: var(--kbr-btn-secondary-color);
    border-color: var(--kbr-btn-secondary-border-color);
}

.kbr-app .kbr-button--secondary:hover:not(:disabled) {
    background: var(--kbr-btn-secondary-bg-hover);
    color: var(--kbr-btn-secondary-color-hover);
    border-color: var(--kbr-btn-secondary-border-color-hover);
}

/* Zurück. Deliberately the quietest control on the step: it is navigation, not the thing the
   customer came to do, and it sits opposite the primary action rather than competing with it. */
.kbr-app .kbr-button--ghost {
    background: var(--kbr-btn-ghost-bg);
    color: var(--kbr-btn-ghost-color);
    border-color: var(--kbr-btn-ghost-border);
}

.kbr-app .kbr-button--ghost:hover:not(:disabled) {
    background: var(--kbr-btn-ghost-bg-hover);
    color: var(--kbr-btn-ghost-color-hover);
    border-color: var(--kbr-btn-ghost-border-hover);
}

.kbr-app .kbr-button:disabled {
    background: var(--kbr-btn-disabled-bg);
    color: var(--kbr-btn-disabled-color);
    border-color: var(--kbr-btn-disabled-bg);
    opacity: var(--kbr-btn-disabled-opacity);
    cursor: not-allowed;
}

.kbr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* margin-right:auto rather than justify-content:space-between — it keeps working on a step that
   has only one button, and on a step that later gains a third. */
.kbr-actions .kbr-back {
    margin-right: auto;
}

/* --- Item list ------------------------------------------------------- */

/* --- Progress ---------------------------------------------------------- */

.kbr-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbr-steps-gap);
    list-style: none;
    margin: 0 0 var(--kbr-steps-margin-bottom);
    padding: 0;
    counter-reset: none;
}

.kbr-steps__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--kbr-steps-color);
    font-size: var(--kbr-steps-font-size);
}

/* The connector between steps. Not drawn before the first one, and suppressed once the row wraps
   would be nice — but there is no selector for "first on its line", so a short fixed rule that
   still reads correctly when wrapped is the better trade. */
.kbr-steps__item + .kbr-steps__item::before {
    content: "";
    display: block;
    width: var(--kbr-steps-connector-width);
    height: var(--kbr-steps-connector-height);
    background: var(--kbr-steps-connector-color);
    margin-right: 0.25rem;
}

.kbr-steps__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--kbr-steps-marker-size);
    height: var(--kbr-steps-marker-size);
    border-radius: 999px;
    background: var(--kbr-steps-marker-bg);
    color: var(--kbr-steps-marker-color);
    border: 1px solid var(--kbr-steps-marker-border);
    font-size: 0.85em;
    line-height: 1;
    flex: 0 0 auto;
}

.kbr-steps__item.is-current {
    color: var(--kbr-steps-color-current);
    font-weight: 600;
}

.kbr-steps__item.is-current .kbr-steps__marker {
    background: var(--kbr-steps-marker-bg-current);
    color: var(--kbr-steps-marker-color-current);
    border-color: var(--kbr-steps-marker-bg-current);
}

.kbr-steps__item.is-done {
    color: var(--kbr-steps-color-done);
}

.kbr-steps__item.is-done .kbr-steps__marker {
    background: var(--kbr-steps-marker-bg-done);
    color: var(--kbr-steps-marker-color-done);
    border-color: var(--kbr-steps-marker-bg-done);
}

@media (max-width: 480px) {
    /* Four labels never fit. The numbers still convey the position, and the current step keeps its
       label so the customer is never left with only digits. */
    .kbr-steps__item:not(.is-current) .kbr-steps__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --- Order summary ----------------------------------------------------- */

.kbr-order-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem var(--kbr-order-meta-gap);
    margin: 0 0 1.25rem;
    padding: 0;
}

.kbr-order-summary__item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.kbr-order-summary__label {
    color: var(--kbr-order-label-color);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.kbr-order-summary__value {
    color: var(--kbr-order-value-color);
    margin: 0;
    font-weight: 600;
}

.kbr-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kbr-item-gap);
}

.kbr-item {
    background: var(--kbr-item-bg);
    border: var(--kbr-item-border-width) solid var(--kbr-item-border-color);
    border-radius: var(--kbr-item-radius);
    padding: var(--kbr-item-padding);
}

.kbr-item:hover { background: var(--kbr-item-bg-hover); }
.kbr-item.is-selected { background: var(--kbr-item-bg-selected); }

.kbr-item.is-exhausted {
    opacity: 0.55;
}

.kbr-item__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.kbr-item__label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.kbr-item.is-exhausted .kbr-item__label { cursor: default; }

.kbr-item__image {
    width: var(--kbr-item-image-size);
    height: var(--kbr-item-image-size);
    object-fit: cover;
    border-radius: var(--kbr-item-image-radius);
    flex: 0 0 auto;
}

.kbr-item__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.kbr-item__title { color: var(--kbr-item-title-color); }

.kbr-item__meta {
    color: var(--kbr-item-meta-color);
    font-size: 0.9em;
}

/* --- Toggle ---------------------------------------------------------- */

.kbr-toggle {
    position: relative;
    display: inline-block;
    width: var(--kbr-toggle-width);
    height: var(--kbr-toggle-height);
    flex: 0 0 auto;
}

/* The real checkbox stays in the layout and keeps its keyboard behaviour; it is only made
   transparent. Replacing it with a div would mean re-implementing all of that by hand. */
.kbr-toggle__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.kbr-toggle__input:disabled { cursor: not-allowed; }

.kbr-toggle__track {
    position: absolute;
    inset: 0;
    background: var(--kbr-toggle-off);
    border-radius: var(--kbr-toggle-radius);
    transition: background-color 150ms ease;
    pointer-events: none;
}

.kbr-toggle__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--kbr-toggle-height) - 4px);
    height: calc(var(--kbr-toggle-height) - 4px);
    background: var(--kbr-toggle-knob);
    border-radius: 50%;
    transition: transform 150ms ease;
}

.kbr-toggle__input:checked + .kbr-toggle__track {
    background: var(--kbr-toggle-on);
}

.kbr-toggle__input:checked + .kbr-toggle__track::after {
    transform: translateX(calc(var(--kbr-toggle-width) - var(--kbr-toggle-height)));
}

.kbr-toggle__input:focus-visible + .kbr-toggle__track {
    box-shadow: 0 0 0 3px var(--kbr-toggle-focus);
}

/* --- Panel ----------------------------------------------------------- */

.kbr-panel {
    background: var(--kbr-panel-bg);
    border-top: var(--kbr-panel-border-width) solid var(--kbr-panel-border-color);
    border-radius: var(--kbr-panel-radius);
    padding: var(--kbr-panel-padding);
    margin: var(--kbr-panel-margin);
    display: flex;
    flex-direction: column;
    gap: var(--kbr-panel-gap);
}

.kbr-panel[hidden] { display: none; }

.kbr-panel__group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.kbr-panel__group input[type="radio"],
.kbr-panel__group input[type="checkbox"] {
    accent-color: var(--kbr-panel-accent);
}

/* ⚠ A second label inside the same group — "Bitte kurz beschreiben" under the Grund select — sat
   flush against the control above it. The group's flex `gap` only spaces the groups apart, and
   .kbr-panel__label carries a bottom margin but no top one, so a label following a control had
   nothing between them. Keyed to the panel gap so the Elementor control governs it too. */
.kbr-panel__group > .kbr-select + .kbr-panel__label,
.kbr-panel__group > .kbr-textarea + .kbr-panel__label,
.kbr-panel__group > .kbr-field__error + .kbr-panel__label {
    margin-top: var(--kbr-panel-gap);
}

.kbr-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1.25rem;
    cursor: pointer;
}

.kbr-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ⚠ Scoped under .kbr-app rather than left as bare classes. Themes style `button` and `.elementor
   button` heavily — padding, line-height, brand background — and a single class loses to a
   two-part selector. Everything the theme is likely to set is therefore reset explicitly here
   rather than assumed. */
.kbr-app .kbr-stepper__button {
    -webkit-appearance: none;
    appearance: none;

    /* Flex centring, not line-height: a line-height equal to the box only centres a glyph whose
       own metrics are symmetrical, and "−" and "+" are not. */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: var(--kbr-stepper-size);
    height: var(--kbr-stepper-size);
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;

    font: inherit;
    font-size: 1.05em;
    line-height: 1;
    text-align: center;
    cursor: pointer;

    background: var(--kbr-stepper-bg);
    color: var(--kbr-stepper-color);
    border: var(--kbr-field-border-width) solid var(--kbr-stepper-border);
    border-radius: var(--kbr-field-radius);
}

.kbr-app .kbr-stepper__button:hover:not(:disabled) {
    background: var(--kbr-stepper-bg-hover);
}

.kbr-app .kbr-stepper__button:disabled { opacity: 0.45; cursor: not-allowed; }

.kbr-app .kbr-stepper__input {
    box-sizing: border-box;
    /* Same height as the buttons. Left to the theme's input padding the three controls end up
       different heights, which is what made the row look broken. */
    height: var(--kbr-stepper-size);
    width: var(--kbr-stepper-input-width);
    min-height: 0;
    padding: 0 0.25rem;
    margin: 0;
    text-align: center;
    font: inherit;
    background: var(--kbr-field-bg);
    color: var(--kbr-field-color);
    border: var(--kbr-field-border-width) solid var(--kbr-field-border-color);
    border-radius: var(--kbr-field-radius);
}

/* The native spinners duplicate our own buttons and squeeze the digits off-centre. */
.kbr-stepper__input::-webkit-outer-spin-button,
.kbr-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kbr-stepper__input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.kbr-stepper__max {
    color: var(--kbr-muted);
    font-size: 0.9em;
    /* "max. 2" is one piece of information and must not break across two lines. */
    white-space: nowrap;
}

.kbr-exchange__same { color: var(--kbr-muted); margin: 0; }

/* The equal-value condition under the free-text wish. Quieter than a label, louder than nothing. */
.kbr-hint {
    color: var(--kbr-hint-color);
    background: var(--kbr-hint-bg);
    border-left: 3px solid var(--kbr-hint-border);
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9em;
}

/* --- Review (step 3) --------------------------------------------------- */

.kbr-review {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kbr-review-gap);
}

.kbr-review__item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--kbr-review-bg);
    border: var(--kbr-review-border-width) solid var(--kbr-review-border-color);
    border-radius: var(--kbr-review-radius);
    padding: var(--kbr-review-padding);
}

.kbr-review__image {
    width: var(--kbr-review-image-size);
    height: var(--kbr-review-image-size);
    object-fit: cover;
    border-radius: var(--kbr-review-image-radius);
    flex: 0 0 auto;
}

.kbr-review__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.kbr-review__title { color: var(--kbr-review-title-color); font-weight: 600; }
.kbr-review__meta { color: var(--kbr-review-meta-color); font-size: 0.9em; }

/* Wraps rather than scrolling: three short facts fit one line on a desktop and stack on a phone,
   which is the whole reason this is not a table any more. */
.kbr-review__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem var(--kbr-review-facts-gap);
    margin: 0.6rem 0 0;
    padding: 0;
}

.kbr-review__fact {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.kbr-review__label {
    margin: 0;
    color: var(--kbr-review-label-color);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kbr-review__value {
    margin: 0;
    color: var(--kbr-review-value-color);
}

/* The exchange target and the customer's own words: attached to their fact, one line down, so a
   long free-text wish never pushes the labels out of alignment. */
.kbr-review__extra {
    display: block;
    color: var(--kbr-review-meta-color);
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

/* --- Messages -------------------------------------------------------- */

.kbr-message {
    border-style: solid;
    margin: 0 0 1.25rem;
}

.kbr-message--error {
    background: var(--kbr-error-bg);
    color: var(--kbr-error-color);
    border-color: var(--kbr-error-border-color);
    border-width: var(--kbr-error-border-width);
    border-radius: var(--kbr-error-radius);
    padding: var(--kbr-error-padding);
}

.kbr-message--info {
    background: var(--kbr-info-bg);
    color: var(--kbr-info-color);
    border-color: var(--kbr-info-border-color);
    border-width: var(--kbr-error-border-width);
    border-radius: var(--kbr-error-radius);
    padding: var(--kbr-error-padding);
}

.kbr-success {
    background: var(--kbr-success-bg);
    color: var(--kbr-success-color);
    border: var(--kbr-success-border-width) solid var(--kbr-success-border-color);
    border-radius: var(--kbr-success-radius);
    padding: var(--kbr-success-padding);
}

.kbr-success__message { margin: 0 0 1rem; }

.kbr-instructions { margin: 0 0 1.25rem; }

.kbr-download { margin-top: 0.25rem; }

/* --- Busy ------------------------------------------------------------ */

.kbr-app.is-busy .kbr-app__body {
    opacity: 0.6;
    pointer-events: none;
}

.kbr-loading {
    color: var(--kbr-muted);
    margin: 0;
}

/* --- Small screens --------------------------------------------------- */

@media (max-width: 480px) {
    .kbr-item__header { align-items: flex-start; }

    /* One fact per line rather than three cramped columns. */
    .kbr-review__facts { flex-direction: column; gap: 0.4rem; }
}

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