/* Aktions-CI "Polarweiss Gipfelstürmer". Werte aus dem :root des Designentwurfs
   .vorgaben/draft_html.txt - nicht aus den Key Visuals gemessen, der Entwurf ist die
   verbindliche Vorlage. */

/* Zwei Wurzeln, mit Absicht. */
/* Die Body-ID setzt NOVA aus dem <Identifier> des Frontend-Links - sie greift auf der */
/* ganzen Seite, also auch in Kopf, Fuß und OPC-Bereichen. Sie hängt aber an tlink und */
/* damit an einem Datenbankfeld. .sellx-ac rendert das Plugin dagegen immer selbst: Der */
/* Aktionsblock trägt seine Farben deshalb auch dann, wenn der Identifier fehlt. */
/* :is() nimmt die Spezifität des stärksten Arguments, beide Wege schlagen also das Theme. */
/* Kopf, Fuß und die Bootstrap-Utilities liegen außerhalb des Blocks - dort bleibt die ID */
/* die einzige Wurzel. */
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) {
    --sac-navy: #16203c;
    --sac-navy-rgb: 22, 32, 60;
    --sac-navy-hover: #1d2a4d;
    --sac-navy-deep: #0d1638;

    --sac-red: #c8102e;

    /* Auf hellen Flächen deckungsgleich mit --sac-red; als eigener Token erhalten, weil
       Text und Fläche unterschiedliche Schwellen haben. */
    --sac-red-ink: #c8102e;

    --sac-sky: #a9c4dc;

    /* Flächenrollen des Entwurfs: der Eisgrund trägt "So geht's", Karten liegen darauf,
       die Formularsektion bekommt einen eigenen Verlauf (siehe unten). */
    --sac-page: #f4f7f9;
    --sac-card: #eef2f5;
    --sac-tint: #eef2f5;
    --sac-border: #c7d0da;

    /* Zwei Namen, ein Wert: --sac-muted wird auf dem Formularverlauf zu Navy gezogen,
       --sac-muted-soft bleibt der Nebenton fuer eigene helle Flaechen darin. */
    --sac-muted-soft: #55617a;
    --sac-muted: var(--sac-muted-soft);
    --sac-white: #fefefe;

    /* Fußtext auf Navy. */
    --sac-navy-ink: #c9d3e6;

    /* Rot ist der Aktionsakzent und darf deshalb kein Fehlerton sein. */
    --sac-danger: #b00020;
    --sac-success: #2e8b57;

    /* Der Verlauf der Formularsektion, aus .form-section des Entwurfs. */
    --sac-form-top: #c3d3e0;
    --sac-form-bottom: #adc2d4;

    /* Der Fokusring des Entwurfs - kräftiger als der Bootstrap-Schatten. */
    --sac-focus: #4c6ea0;

    /* Bootstrap-Variablen im Scope umdefinieren, damit var()-basierte Regeln mitziehen. */
    --primary: #16203c;
    --primary-rgb: 22, 32, 60;
    --secondary: #55617a;
    --danger: #b00020;
}

/* ─── Schaltflächen ───────────────────────────────────────────────────────── */

/* Bootstrap 4 kompiliert seine Komponentenfarben zu Hex, die Variablen oben erreichen sie */
/* nicht. Die ID schlägt jede Themeregel; !important steht nur dort, wo die Utility-Klasse */
/* selbst mit !important arbeitet. */
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn:focus,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--sac-navy-rgb), 0.3);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-primary {
    color: #fff;
    background-color: var(--sac-navy);
    border-color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-primary:hover,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-primary:focus,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-primary:not(:disabled):not(.disabled):active,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--sac-navy-hover);
    border-color: var(--sac-navy-hover);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-primary:disabled,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-primary.disabled {
    color: #fff;
    background-color: var(--sac-navy);
    border-color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-primary {
    color: var(--sac-navy);
    background-color: transparent;
    border-color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-primary:hover,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-primary:not(:disabled):not(.disabled):active,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--sac-navy);
    border-color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-primary:disabled,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-primary.disabled {
    color: var(--sac-navy);
    background-color: transparent;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-secondary {
    color: var(--sac-muted);
    background-color: transparent;
    border-color: var(--sac-border);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-secondary:hover,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-secondary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--sac-muted);
    border-color: var(--sac-muted);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-secondary:focus,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(90, 107, 123, 0.35);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-link {
    color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-link:hover,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .btn-link:focus {
    color: var(--sac-navy-hover);
}

/* ─── Verweise ────────────────────────────────────────────────────────────── */

/* :not(.btn), weil Schaltflaechen ihre Farbe aus den Regeln oben beziehen. */
/* Navy, nicht --sac-navy-ink: Das ist der Fusston fuer Text auf Navy und kam auf den hellen
   Flaechen der Aktion nicht ueber 1.6:1 - der Verweis verschwand im Grund. */
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) a:not(.btn) {
    color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) a:not(.btn):hover,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) a:not(.btn):focus {
    color: var(--sac-navy-hover);
}

/* Im Aktionsblock darf der Akzent auf Verweisen liegen, in Kopf und Fuss nicht. */
.sellx-ac a:not(.btn):hover,
.sellx-ac a:not(.btn):focus {
    color: var(--sac-red-ink);
}

/* Der Fuss liegt auf Navy und dreht die Farben um. Die zweite Zeile ist die staerkere:
   Auf der Landingpage traegt der Body die Aktions-ID, und ohne sie gewaenne die Regel
   oben. */
.sellx-ac-foot a:not(.btn),
#sellx_aktionscodes_landing .sellx-ac-foot a:not(.btn) {
    color: var(--sac-navy-ink);
}

.sellx-ac-foot a:not(.btn):hover,
.sellx-ac-foot a:not(.btn):focus,
#sellx_aktionscodes_landing .sellx-ac-foot a:not(.btn):hover,
#sellx_aktionscodes_landing .sellx-ac-foot a:not(.btn):focus {
    color: var(--sac-white);
}

/* ─── Formulare ───────────────────────────────────────────────────────────── */

/* Feldmaße des Entwurfs: 46px hoch, 1.5px Rahmen, 4px Radius. Bootstrap liefert 38px und
   1px - beides zu zierlich für ein Formular, das die halbe Seite trägt. */
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .form-control,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .custom-select {
    height: 2.875rem;
    border: 1.5px solid var(--sac-border);
    border-radius: 4px;
    background-color: #fff;
    font-size: 0.90625rem;
    color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) textarea.form-control {
    height: auto;
    padding-top: 0.625rem;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) label,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .col-form-label {
    font-size: 0.84375rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Der Entwurf setzt einen Umriss statt eines Schattens - auf dem Verlauf der
   Formularsektion trägt ein 0.2rem-Schatten zu wenig. */
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .form-control:focus,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .custom-select:focus,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .form-control-file:focus {
    border-color: var(--sac-focus);
    outline: 3px solid var(--sac-focus);
    outline-offset: 1px;
    box-shadow: none;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sac-navy);
    border-color: var(--sac-navy);
}

/* ─── Meldungen ───────────────────────────────────────────────────────────── */

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .alert-info {
    color: var(--sac-navy);
    background-color: var(--sac-tint);
    border-color: var(--sac-border);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .alert-success {
    color: #14532d;
    background-color: #e6f4ec;
    border-color: #b7dfc8;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .alert-warning {
    color: #6b4500;
    background-color: #fdf3e0;
    border-color: #f0d9a8;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .alert-danger {
    color: var(--sac-danger);
    background-color: #fdecef;
    border-color: #f3c2cc;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .form-error-msg,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .invalid-feedback {
    color: var(--sac-danger);
}

/* ─── Kennzeichen ─────────────────────────────────────────────────────────── */

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .badge-primary {
    color: #fff;
    background-color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .badge-secondary {
    color: #fff;
    background-color: var(--sac-muted);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .badge-info {
    color: var(--sac-navy-deep);
    background-color: var(--sac-sky);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .badge-success {
    color: #fff;
    background-color: var(--sac-success);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .badge-warning {
    color: #3d2c00;
    background-color: #f0b429;
}

/* Der Prämienstörer trägt das Rot des Key Visuals, nicht das Grün von badge-success. */
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .sellx-ac-product-free {
    color: #fff;
    background-color: var(--sac-red);
}

/* ─── Ablaufanzeige ───────────────────────────────────────────────────────── */

/* Die Pfeilspitzen des Steppers sind Rahmendreiecke und führen die Flächenfarbe mit.
   Die Tönung statt des Schnees: Der Seitengrund trägt jetzt den Schneeton, ein Stepper in
   derselben Farbe verschwände darin. */
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper {
    background: var(--sac-tint);
    border-color: var(--sac-border);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper .step::after {
    border-left-color: var(--sac-tint);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper .step::before {
    border-left-color: var(--sac-border);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper .step-active {
    background: #fff;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper .step-active::after {
    border-left-color: #fff;
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper .step-active .step-content::after,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper .step-current .step-content::after {
    background: var(--sac-red);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .stepper .step-check {
    color: var(--sac-navy);
}

/* ─── Auswahlkacheln ──────────────────────────────────────────────────────── */

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .swatches-text,
:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .swatches-image {
    border-color: var(--sac-border);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .swatches-text.active {
    color: var(--sac-navy);
    background-color: var(--sac-tint);
    border-color: var(--sac-navy);
}

:is(#sellx_aktionscodes_landing, .sellx-ac, .sellx-ac-page) .swatches-image.active {
    border-color: var(--sac-navy);
}

/* ─── Kopf, Fuß und Hilfsklassen ──────────────────────────────────────────── */

/* Der Seitengrund bleibt neutral - im Entwurf tragen die Sektionen ihre eigenen Flächen,
   nicht der Rahmen darum. #main-wrapper wird trotzdem gesetzt, weil NOVA dort ein hartes
   Weiß hinterlegt (themes/base/sass/_base.scss:56) und der Entwurf mit #fefefe arbeitet. */
#sellx_aktionscodes_landing #main-wrapper {
    background: var(--sac-white);
}

/**
 * Die Abschnitte laufen randlos.
 *
 * NOVA deckelt #content-wrapper über .container-fluid-xl auf 1650px und legt links und
 * rechts eine Rinne an (themes/base/sass/_base_crit.scss:167). Das ist für eine Shopseite
 * richtig und für diese falsch: Key Visual, Eisfläche und Verlauf sollen von Kante zu Kante
 * gehen. Der Deckel fällt deshalb hier - und nicht über einen 50vw-Ausbruch am einzelnen
 * Abschnitt, der die Scrollleiste mitzählen und waagerecht überlaufen würde.
 *
 * Die Inhalte bleiben in ihrem {container} und behalten damit ihre Lesebreite.
 */
#sellx_aktionscodes_landing #content-wrapper {
    max-width: none;
    padding-left: 0;
    padding-right: 0;

    /* NOVA setzt hier einen Abstand nach oben, der die Brotkrume vom Kopf löst. Beides
       gibt es auf Aktionsseiten nicht - das Motiv soll am Kopf kleben. */
    padding-top: 0;
}
#sellx_aktionscodes_landing #content {
    padding-bottom: 0;
}

/* Die Sektionsflächen des Entwurfs. Über .sellx-ac-section, damit sie auch ohne Body-ID
   greifen - die Klassen rendert das Plugin selbst. */
.sellx-ac-section-ice {
    background: var(--sac-page, #f4f7f9);
}

.sellx-ac-section-form {
    background: linear-gradient(
        180deg,
        var(--sac-form-top, #c3d3e0) 0%,
        var(--sac-form-bottom, #adc2d4) 100%
    );

    /* Nebentext wird hier zu Navy: --sac-muted kommt auf dem unteren Ende des Verlaufs
       nur auf 3.4:1 und damit unter AA. Auf der Eisfläche bleibt es bei 5.8:1 zulässig.
       Beide Namen, weil Aufbau- und Farbdatei je einen davon lesen. */
    --sellx-ac-muted: var(--sac-navy, #16203c);
    --sac-muted: var(--sac-navy, #16203c);
}

.sellx-ac-section-navy {
    background: var(--sac-navy, #16203c);
    color: var(--sac-navy-ink, #c9d3e6);
}

#sellx_aktionscodes_landing .bg-primary {
    background-color: var(--sac-navy) !important;
}

#sellx_aktionscodes_landing .text-primary {
    color: var(--sac-navy) !important;
}

#sellx_aktionscodes_landing .border-primary {
    border-color: var(--sac-navy) !important;
}

/* Die Überschrift aus layout/index.tpl entfällt: Die sichtbare Headline steckt im Key */
/* Visual, die Dokumentüberschrift liefert der Hero-Block des Plugins. */
#sellx_aktionscodes_landing .index-heading-wrapper {
    display: none;
}

/* ─── Warenkorb und Checkout ──────────────────────────────────────────────── */

/* .sellx-ac-page umschließt <main> und trägt deshalb auch NOVAs Rinnen an #content-wrapper. */
.sellx-ac-page {
    background: var(--sac-page, #f4f7f9);
    color: var(--sac-navy, #16203c);
}

/* NOVA hinterlegt #main-wrapper hart mit Weiß (themes/base/sass/_base.scss:56). */
.sellx-ac-page #main-wrapper {
    background: transparent;
}

.sellx-ac-page h1,
.sellx-ac-page h2,
.sellx-ac-page h3,
.sellx-ac-page .h1,
.sellx-ac-page .h2,
.sellx-ac-page .h3 {
    color: var(--sac-navy, #16203c);
}

.sellx-ac-page .text-muted-util,
.sellx-ac-page .text-muted,
.sellx-ac-page small {
    color: var(--sac-muted, #55617a);
}

/* Der Entwurf setzt flache Karten mit feinem Rahmen, NOVA weiche Ecken und Schatten. */
.sellx-ac-page .card,
.sellx-ac-page .panel {
    background-color: var(--sac-white, #fefefe);
    border: 1px solid var(--sac-border, #c7d0da);
    border-radius: 4px;
    box-shadow: none;
}

.sellx-ac-page .card-gray {
    background-color: var(--sac-card, #eef2f5);
    border-color: var(--sac-border, #c7d0da);
}

.sellx-ac-page .card-header,
.sellx-ac-page .card-footer {
    background-color: transparent;
    border-color: var(--sac-border, #c7d0da);
}

/* Die Positionsliste liegt bei NOVA direkt auf dem Seitengrund und verschwände in der Fläche. */
.sellx-ac-page .basket-items {
    padding: 1.25rem 1.25rem 0.25rem;
    background-color: var(--sac-white, #fefefe);
    border: 1px solid var(--sac-border, #c7d0da);
    border-radius: 4px;
}

.sellx-ac-page .cart-items-header {
    color: var(--sac-muted, #55617a);
    border-bottom: 1px solid var(--sac-border, #c7d0da);
}

.sellx-ac-page .cart-items-body + .cart-items-body {
    padding-top: 1rem;
    border-top: 1px solid var(--sac-border, #c7d0da);
}

/* Die Mengenanzeige der Prämie ersetzt das Zählfeld, siehe basket/cart_items.tpl. */
.sellx-ac-page .sellx-ac-cart-qty {
    color: var(--sac-muted, #55617a);
    font-size: 0.9375rem;
}

.sellx-ac-page hr,
.sellx-ac-page .border,
.sellx-ac-page .border-top,
.sellx-ac-page .border-bottom,
.sellx-ac-page .border-left,
.sellx-ac-page .border-right {
    border-color: var(--sac-border, #c7d0da) !important;
}

.sellx-ac-page .table,
.sellx-ac-page .table th,
.sellx-ac-page .table td {
    border-color: var(--sac-border, #c7d0da);
}

/* Der Ablaufbalken des Checkouts ist derselbe .stepper wie auf der Landingpage. */
.sellx-ac-page .checkout-steps {
    margin-bottom: 2rem;
}

.sellx-ac-page .list-group-item {
    background-color: transparent;
    border-color: var(--sac-border, #c7d0da);
}