/*
 * packages/aimeos_composer/Resources/Public/Css/widerruf-steps.css
 * Styling for the Widerruf form: step indicator (StepIndicator.html), uniform field layout and the
 * product-selection step's desktop table layout. Matches the Aimeos checkout look via --ai-* variables.
 * Relevant files: Resources/Private/Frontend/Widerruf/Partials/Form/StepIndicator.html, Frontend/Widerruf/Templates/Form.html, Classes/Form/Hooks/WiderrufProductInjectionHook.php
 */

.widerruf-steps-nav {
    margin: 0 0 1.5rem 0;
}

ol.widerruf-steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
    margin: 0 auto 1.5rem auto;
    padding: 0 0 .25rem 0;
}

ol.widerruf-steps .step {
    flex: 1 1 0;
    text-align: center;
    color: var(--bs-gray-500, #8a8a8a);
    font-weight: 600;
    line-height: 1.4;
    padding: .5rem .25rem;
    border-bottom: 3px solid var(--ai-tertiary, #ccc);
}

/* The number badge in front of each step label. */
ol.widerruf-steps .step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--ai-tertiary, #ccc);
    color: var(--ai-bg, #fff);
    font-size: .85rem;
    vertical-align: middle;
}

/* Completed step: clickable button rendered as plain text (so it looks like the checkout step link). */
ol.widerruf-steps .step.active {
    color: var(--ai-primary, #282828);
    border-bottom-color: var(--ai-secondary, #555);
}

ol.widerruf-steps .step.active .step-number {
    background: var(--ai-secondary, #555);
}

ol.widerruf-steps .step.active .step-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

ol.widerruf-steps .step.active .step-link:hover .step-label,
ol.widerruf-steps .step.active .step-link:focus .step-label {
    text-decoration: underline;
}

/* Current step: emphasised. */
ol.widerruf-steps .step.current {
    color: var(--ai-primary, #282828);
    border-bottom-color: var(--ai-primary, #282828);
}

ol.widerruf-steps .step.current .step-number {
    background: var(--ai-primary, #282828);
}

/* Upcoming step: muted, not interactive. */
ol.widerruf-steps .step.upcoming {
    color: var(--bs-gray-500, #8a8a8a);
}

/* Below desktop, show only the numbered badges so the 4-step bar never gets cramped. */
@media (max-width: 767.98px) {
    ol.widerruf-steps .step .step-label {
        display: none;
    }

    ol.widerruf-steps .step .step-number {
        margin-right: 0;
    }
}

/* =====================================================================================
 * Uniform field layout across ALL steps (scoped to the Widerruf form via its id prefix).
 * The fields keep the brand look of .form-control (orwo/rmonline borders/rounding); this only
 * normalises width, spacing, labels and the overall column so every step looks the same.
 * ===================================================================================== */
/* Full width: the form uses the available content width (the site container caps it already).
 * No narrow centred column – the fields below stay full-width and responsive at every breakpoint. */
form[id^="widerruf-"] {
    width: 100%;
}

/* The step indicator already names each step, so hide the redundant per-step page heading. */
form[id^="widerruf-"] > h2 {
    display: none;
}

/* Consistent vertical rhythm between fields in every step. */
form[id^="widerruf-"] .form-element {
    margin-bottom: 1rem;
}

/* Inputs / selects / textareas fill the column uniformly (brand border stays). */
form[id^="widerruf-"] .form-control {
    width: 100%;
}

/* Labels consistent (block, above the control). */
form[id^="widerruf-"] .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Intro / static texts: same lead-in spacing, not heading-sized. */
form[id^="widerruf-"] .form-element-statictext p {
    margin: 0 0 1rem 0;
}

/* Navigation row consistent across steps. */
form[id^="widerruf-"] .actions {
    margin-top: 1.5rem;
}

/* Read-only overview on the confirmation step (injected StaticText, class .widerruf-summary).
 * The body text is plain (newlines -> <br>); the bold heading is added via CSS so no markup is
 * needed in the (escaped) StaticText content. */
form[id^="widerruf-"] .widerruf-summary {
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--ai-bg-light, #f6f6f6);
    border: 1px solid var(--ai-tertiary, #ccc);
    border-radius: 0.5rem;
    line-height: 1.8;
}

form[id^="widerruf-"] .widerruf-summary::before {
    content: "Übersicht deiner Angaben";
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
}

/* =====================================================================================
 * Product-selection step (page-products): table-like layout on desktop.
 *
 * Each returnable product is injected as a SingleSelect (see WiderrufProductInjectionHook): the label
 * is the product title, the control is the return-quantity dropdown. These are the ONLY SingleSelect
 * fields in the form, so their wrapper class ".form-element-select" targets exactly the product rows
 * (the other steps use Text / RadioButton / Checkbox / Textarea wrappers). On desktop we put the title
 * and the dropdown side by side and align them into fixed columns so the rows read like a table; below
 * the md breakpoint we keep the default stacked layout (label above control).
 * ===================================================================================== */
@media (min-width: 768px) {
    form[id^="widerruf-"] .form-element-select {
        display: grid;
        /* Title fills the remaining width; the dropdown gets a fixed column so all rows line up.
         * 12rem comfortably fits the longest option text ("nicht zurücksenden"). The two direct
         * children (the <label>, then the <select>) auto-place into the two columns. */
        grid-template-columns: 1fr 12rem;
        align-items: center;
        column-gap: 1.5rem;
        /* Light row separator to reinforce the table feel (brand tertiary with a safe fallback). */
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--ai-tertiary, #ddd);
    }

    /* Title sits in the left column – drop the stacked-layout bottom gap so it aligns with the select. */
    form[id^="widerruf-"] .form-element-select > .form-label {
        margin-bottom: 0;
    }

    /* The dropdown (Bootstrap's .form-select) fills its fixed column. */
    form[id^="widerruf-"] .form-element-select > select {
        width: 100%;
    }

    /* Validation error / description are <span>s – let them span the whole row beneath the two columns
     * instead of being squeezed into a grid cell (which would offset the table). Note: this must NOT
     * catch the <select> itself, which is why we target <span> specifically. */
    form[id^="widerruf-"] .form-element-select > span {
        grid-column: 1 / -1;
    }
}

/* =====================================================================================
 * Per-position withdrawal info on the product step (injected StaticText elements, see
 * WiderrufProductInjectionHook). Earlier withdrawals reduce or exhaust what can still be returned.
 * The text is plain (StaticText escapes markup); all styling lives here.
 * ===================================================================================== */

/* "Bereits widerrufen: X von Y" note shown directly under a partially-withdrawn position's dropdown. */
form[id^="widerruf-"] .widerruf-withdrawn-note {
    margin: -0.25rem 0 0.75rem 0;
    color: var(--bs-gray-600, #6c757d);
    font-size: 0.875rem;
    font-style: italic;
}

/* A position whose full ordered quantity was already withdrawn: still listed (so the customer sees
 * it) but marked and without a dropdown, i.e. not selectable. */
form[id^="widerruf-"] .widerruf-fully-withdrawn {
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ai-tertiary, #ddd);
    color: var(--bs-gray-500, #8a8a8a);
    text-decoration: line-through;
}

/* A personalised product, excluded from the right of withdrawal (EU 2023/2673): listed for
 * transparency but without a dropdown, so not selectable. Muted + italic to read as a note – NOT
 * struck through (line-through would imply "removed/done"; this position is simply not eligible). */
form[id^="widerruf-"] .widerruf-not-withdrawable {
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ai-tertiary, #ddd);
    color: var(--bs-gray-600, #6c757d);
    font-style: italic;
}

/* Drop the default StaticText paragraph margin inside these one-liners so spacing stays tight. */
form[id^="widerruf-"] .widerruf-withdrawn-note p,
form[id^="widerruf-"] .widerruf-fully-withdrawn p,
form[id^="widerruf-"] .widerruf-not-withdrawable p {
    margin: 0;
}

/* General info note on mixed orders explaining that personalised products are excluded from
 * withdrawal (injected StaticText, class .widerruf-info). A calm, non-alarming hint with a left
 * accent rule – distinct from the headline message used for error/"nothing available" states. */
form[id^="widerruf-"] .widerruf-info {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--ai-bg-light, #f6f6f6);
    border-left: 4px solid var(--ai-secondary, #6c757d);
    border-radius: 0.25rem;
    color: var(--bs-gray-700, #495057);
    font-size: 0.9375rem;
}

form[id^="widerruf-"] .widerruf-info p {
    margin: 0;
}

/* =====================================================================================
 * "Bestellung nicht gefunden" state on the product step (WiderrufNotFound element,
 * see WiderrufProductInjectionHook and Resources/Private/Frontend/Widerruf/Partials/WiderrufNotFound.html).
 * The notice text (.widerruf-message) and the action controls (.widerruf-notfound-actions)
 * are rendered by the custom partial instead of the standard StaticText partial.
 * ===================================================================================== */

/* Notice text: same styling as the existing .widerruf-info block for visual consistency. */
form[id^="widerruf-"] .widerruf-message {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--ai-bg-light, #f6f6f6);
    border-left: 4px solid var(--ai-secondary, #6c757d);
    border-radius: 0.25rem;
    color: var(--bs-gray-700, #495057);
    font-size: 0.9375rem;
}

/* Action row: flex, with a modest gap between the back button and the support link. */
form[id^="widerruf-"] .widerruf-notfound-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Back-to-Step-1 submit button: rendered as an inline link (no button chrome), brand colour,
 * underline on hover/focus. Mirrors the .step-link treatment in the step indicator. */
form[id^="widerruf-"] .widerruf-back-link {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ai-primary, #282828);
    text-decoration: underline;
    cursor: pointer;
}

form[id^="widerruf-"] .widerruf-back-link:hover,
form[id^="widerruf-"] .widerruf-back-link:focus {
    color: var(--ai-secondary, #555);
    text-decoration: underline;
}

/* Optional support link: normal inline link, consistent spacing with the back button. */
form[id^="widerruf-"] .widerruf-support-link {
    color: var(--ai-primary, #282828);
    text-decoration: underline;
}

form[id^="widerruf-"] .widerruf-support-link:hover,
form[id^="widerruf-"] .widerruf-support-link:focus {
    color: var(--ai-secondary, #555);
}