/**
 * Styles of the withdrawal button and of the two module pages.
 *
 * The palette comes from the theme variables (custom.css :root) rather than
 * from fixed values, so the module follows the shop if those ever change.
 *
 * The button has to stand out from the Impressum, AGB and Widerruf links that
 * sit above it in the footer - section 356a BGB asks for a control that is
 * legible and prominently placed. Those links are plain grey text, so a filled
 * disc in the theme accent colour reads as a different kind of element at a
 * glance, which is exactly the distinction the statute is after.
 */

/**
 * The submit of the form and the way back from the confirmation page share one
 * class, so that the two rectangular buttons cannot drift apart. They did once:
 * the submit carried the theme .btn class, which forces uppercase, so the two
 * labels rendered in different letter cases. Neither element uses .btn any more.
 *
 * The footer button is deliberately not part of this group any longer. It is a
 * disc with a label rather than a filled rectangle, and forcing one class over
 * both shapes would mean every later change to either of them fighting the
 * other. Its own rules live under .noi-widerruf-badge below.
 */
.noi-widerruf-action {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    border: 2px solid var(--pink-neon, #ff00ff);
    border-radius: 10px;
    background: var(--pink-neon, #ff00ff);
    color: var(--white-color, #ffffff);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.noi-widerruf-action:hover,
.noi-widerruf-action:focus,
.noi-widerruf-action:active {
    background: var(--white-color, #ffffff);
    color: var(--pink-neon, #ff00ff);
    text-decoration: none;
}

.noi-widerruf-action:focus-visible {
    outline: 3px solid var(--font-color, #333333);
    outline-offset: 3px;
}

/**
 * The footer button: a disc in the accent colour with the statutory label
 * beside it, both inside one link.
 *
 * Nothing here changes colour on hover. The disc only dims, the same way the
 * social icons it stands next to behave, because the row would look broken if
 * one of three otherwise identical discs reacted differently. The label keeps
 * its underline off for the same reason - the theme puts one on links by
 * default, and here it fights the shape.
 */
.noi-widerruf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    padding: 0.25rem;
    border-radius: 999px;
    color: var(--font-color, #333333);
    line-height: 1.25;
    text-decoration: none;
}

.noi-widerruf-badge:hover,
.noi-widerruf-badge:focus,
.noi-widerruf-badge:active {
    color: var(--font-color, #333333);
    text-decoration: none;
}

/**
 * The disc has no background. The circle lives in the SVG, with the glyph
 * masked out of it, exactly as the neighbouring social icons are drawn - their
 * PNGs are a filled circle with the shape removed, and nothing behind them.
 * So the colour here paints the SVG through currentColor, not a box.
 */
.noi-widerruf-badge__disc {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--pink-neon, #ff00ff);
    transition: filter 0.15s ease;
}

.noi-widerruf-badge:hover .noi-widerruf-badge__disc,
.noi-widerruf-badge:focus .noi-widerruf-badge__disc {
    filter: brightness(0.92);
}

/**
 * Capitals come from here rather than from the translation, so that the string
 * read out by a screen reader and the one stored in translations/de.php stay
 * the statutory "Vertrag widerrufen". They also cost the label a step of size:
 * capitals read larger than they measure, and at the size of the surrounding
 * links they started to compete with the column heading above.
 *
 * min-content puts every word on its own line, so the label stacks instead of
 * stretching the button sideways. It is the width of the longest word, which
 * makes the break a property of the text rather than a hardcoded line break:
 * no <br> to keep in sync with the translation, and a longer wording in another
 * language stacks the same way instead of overflowing the column.
 */
.noi-widerruf-badge__label {
    width: min-content;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.noi-widerruf-badge:focus-visible {
    outline: 3px solid var(--font-color, #333333);
    outline-offset: 2px;
}

/**
 * The button renders at the end of the footer's contact block, below its
 * social icons, because that is where the theme calls displayFooterAfter.
 *
 * There is nothing to position here. The contact block is a column laid out
 * with a gap, so being the last child of it is the whole placement - the
 * button keeps its distance from the icons above whatever their number, and
 * follows the column if the footer grid ever changes. An earlier version of
 * this file rebuilt the footer grid to aim the button at that column from a
 * row of its own; every measurement it needed for that is now gone.
 *
 * The negative margins cancel the padding the link carries for its focus
 * outline. Without them the disc sits four pixels lower and four to the right
 * of the social icons above it, which is exactly the kind of near miss that
 * reads as a rendering fault.
 */
.noi-widerruf-footer {
    display: flex;
    margin-top: -0.25rem;
    margin-left: -0.25rem;
}

.noi-widerruf {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.noi-widerruf__title {
    margin: 0 0 1rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.noi-widerruf__lead {
    margin-bottom: 1.75rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.noi-widerruf__alert {
    margin-bottom: 1.5rem;
    border-radius: 10px;
}

.noi-widerruf__form .form-group {
    margin-bottom: 1.25rem;
}

.noi-widerruf__form .form-control {
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border-soft-color, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
}

.noi-widerruf__form .form-control:focus {
    border-color: var(--default-blue-color, #24b9d7);
    box-shadow: none;
    outline: none;
}

.noi-widerruf__form .has-error .form-control {
    border-color: var(--pink-neon, #ff00ff);
}

.noi-widerruf__required {
    color: var(--pink-neon, #ff00ff);
}

.noi-widerruf__optional {
    color: var(--font-grey-color, #333333);
    font-weight: 400;
    opacity: 0.7;
}

.noi-widerruf__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

.noi-widerruf__error {
    display: block;
    margin-top: 0.35rem;
    color: var(--pink-neon, #ff00ff);
    font-size: 0.875rem;
    font-weight: 600;
}

/**
 * The scope block is laid out explicitly, including text alignment. Left to
 * the theme, the options drifted to the right edge of the panel while the
 * heading stayed left, which read as a rendering fault rather than a choice.
 *
 * The block is a div with role=radiogroup, not a fieldset. A legend is lifted
 * out of the normal flow by the browser and pinned to the top edge of its
 * fieldset, outside the parent padding, which left the heading floating above
 * the panel instead of sitting inside it.
 */
.noi-widerruf__scope {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    border: 0;
    border-radius: 10px;
    background: var(--blue-pastel-color, #cff5f9);
    text-align: left;
}

.noi-widerruf__legend {
    display: block;
    width: auto;
    margin: 0 0 0.85rem;
    padding: 0;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--font-color, #333333);
    text-align: left;
}

.noi-widerruf__choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

.noi-widerruf__choice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--white-color, #ffffff);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.noi-widerruf__choice:hover {
    border-color: var(--default-blue-color, #24b9d7);
}

.noi-widerruf__choice input {
    flex: 0 0 auto;
    margin: 0;
}

.noi-widerruf__choice-text {
    flex: 1 1 auto;
}

.noi-widerruf__items {
    margin-top: -0.5rem;
}

/* Confirmation page */

.noi-widerruf--done .noi-widerruf__card {
    padding: 2.5rem 2rem;
    border-radius: 10px;
    background: var(--blue-pastel-color, #cff5f9);
    text-align: center;
}

.noi-widerruf__mark {
    display: block;
    margin: 0 auto 1.25rem;
    color: var(--default-blue-color, #24b9d7);
    line-height: 0;
}

.noi-widerruf--done .noi-widerruf__lead {
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.noi-widerruf__note {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.noi-widerruf--done .noi-widerruf__hint {
    margin-bottom: 1.75rem;
}

/**
 * The honeypot has to be unreachable for a person while staying a plain,
 * fillable field for an automated client. Moving it out of view does that;
 * display:none would let some clients skip it.
 */
.noi-widerruf__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 575px) {
    .noi-widerruf-action {
        display: block;
        width: 100%;
        padding: 0.9rem 1rem;
    }

    .noi-widerruf--done .noi-widerruf__card {
        padding: 2rem 1.25rem;
    }
}