/**
 * Copyright (c) recodar Services LLC. All rights reserved.
 *
 * Bedienelemente im ganzen Shop: Schaltflächen, Eingabefelder, Auswahllisten,
 * Optionsfelder - überall gleich, sobald der Schalter im Backend an ist.
 *
 * Jede Regel steht in @layer UND trägt "!important": so schlägt sie jedes Theme,
 * unabhängig von Spezifität und Ladereihenfolge.
 *
 * Die Maße und Farben stehen als Variablen darüber: Wer sie anpassen will,
 * überschreibt sie, ohne diese Datei anzufassen.
 */
:root {
    /* Absichtlich nicht das Maß des Themes; Shop-Rundung: "var(--rcs-button-radius, 8px)". */
    --rcs-control-radius: 8px;
    --rcs-control-height: 42px;
    --rcs-control-padding: 0 18px;
    --rcs-control-font: 14px;
    --rcs-control-border: #d1d5db;
    --rcs-control-focus: #111827;
    --rcs-control-primary: var(--rcs-color-primary, #111827);
    --rcs-control-primary-text: #fff;
    --rcs-control-surface: #fff;
    --rcs-control-text: #1f2933;
}

@layer rcs-controls {
    /* Nur ausgezeichnete Schaltflächen, nicht jedes type=submit; "display" ohne "!important",
       damit Verstecktes versteckt bleibt. --full und --sm bleiben unangetastet. */
    .action.primary,
    button.action.primary,
    a.action.primary,
    .rcs-btn--primary,
    .rcs-btn--add-to-cart,
    .rcs-btn--quote {
        display: inline-flex;
        align-items: center !important;
        justify-content: center !important;
        gap: .5em !important;
        min-height: var(--rcs-control-height) !important;
        padding: var(--rcs-control-padding) !important;
        border: 1px solid var(--rcs-control-primary) !important;
        border-radius: var(--rcs-control-radius) !important;
        background: var(--rcs-control-primary) !important;
        color: var(--rcs-control-primary-text) !important;
        font-family: inherit !important;
        font-size: var(--rcs-control-font) !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        text-decoration: none !important;
        letter-spacing: 0 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .action.primary:hover,
    button.action.primary:hover,
    a.action.primary:hover,
    .rcs-btn--primary:hover,
    .rcs-btn--add-to-cart:hover,
    .rcs-btn--quote:hover {
        filter: brightness(1.12) !important;
        color: var(--rcs-control-primary-text) !important;
    }

    .action.secondary,
    button.action.secondary,
    a.action.secondary,
    .rcs-btn--secondary,
    .rcs-btn--outline,
    .rcs-btn--outline-accent,
    .rcs-btn--ghost,
    .rcs-btn--light {
        display: inline-flex;
        align-items: center !important;
        justify-content: center !important;
        gap: .5em !important;
        min-height: var(--rcs-control-height) !important;
        padding: var(--rcs-control-padding) !important;
        border: 1px solid var(--rcs-control-border) !important;
        border-radius: var(--rcs-control-radius) !important;
        background: var(--rcs-control-surface) !important;
        color: var(--rcs-control-text) !important;
        font-family: inherit !important;
        font-size: var(--rcs-control-font) !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        text-decoration: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    /* Eingabefelder, Auswahllisten, mehrzeilige Felder. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"]:not(.rcs-cart-qty-input),
    input[type="date"],
    select,
    textarea {
        min-height: var(--rcs-control-height) !important;
        padding: 8px 12px !important;
        border: 1px solid var(--rcs-control-border) !important;
        border-radius: var(--rcs-control-radius) !important;
        background-color: var(--rcs-control-surface) !important;
        color: var(--rcs-control-text) !important;
        font-family: inherit !important;
        font-size: var(--rcs-control-font) !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
    }

    .block-search input[type="text"],
    .block-search input[type="search"],
    .rcs-live-search input[type="text"],
    .rcs-live-search input[type="search"] {
        min-height: 0 !important;
        padding: 0 8px 0 16px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .block-search .action.search,
    .block-search button.action.search,
    .rcs-live-search .action.search,
    .rcs-live-search button.action.search {
        border-radius: 50% !important;
    }

    .block-search input[type="text"]:focus,
    .block-search input[type="search"]:focus,
    .rcs-live-search input[type="text"]:focus,
    .rcs-live-search input[type="search"]:focus {
        border-color: transparent !important;
        outline: 0 !important;
    }

    /* Der Kasten um ein mehrzeiliges Feld bekommt volle Breite (Kontaktformular ab 960 px). */
    .field > .control:has(> textarea),
    .control:has(> textarea) {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    textarea {
        /* Sonst gilt das cols-Attribut; ohne "!important" verliert die Ebene gegen das Theme. */
        width: 100% !important;
        max-width: 100% !important;
        min-height: 120px !important;
        padding: 12px !important;
        resize: vertical !important;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="number"]:not(.rcs-cart-qty-input):focus,
    input[type="date"]:focus,
    select:focus,
    textarea:focus {
        border-color: var(--rcs-control-focus) !important;
        outline: 2px solid color-mix(in srgb, var(--rcs-control-focus) 25%, transparent) !important;
        outline-offset: 1px !important;
    }

    /* Optionsfelder und Haken nativ per accent-color; Schiebeschalter ("toggle"/"switch") ausgenommen. */
    input[type="radio"]:not([class*="toggle"] *):not([class*="switch"] *),
    input[type="checkbox"]:not([class*="toggle"] *):not([class*="switch"] *) {
        width: 18px !important;
        height: 18px !important;
        margin: 0 8px 0 0 !important;
        accent-color: var(--rcs-control-primary) !important;
        vertical-align: middle !important;
    }

    /* Der Mengenwähler (Warenkorb, Produktseite, Optionen-Dialog) in den Maßen der übrigen Bedienelemente. */
    .rcs-cart-qty-stepper {
        display: inline-flex !important;
        align-items: stretch !important;
        height: var(--rcs-control-height) !important;
        min-height: var(--rcs-control-height) !important;
        overflow: hidden !important;
        border: 1px solid var(--rcs-control-border) !important;
        border-radius: var(--rcs-control-radius) !important;
        background: var(--rcs-control-surface) !important;
    }

    .rcs-cart-qty-stepper .rcs-cart-qty-btn,
    button.rcs-cart-qty-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--rcs-control-text) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .rcs-cart-qty-stepper .rcs-cart-qty-btn:hover,
    button.rcs-cart-qty-btn:hover {
        background: color-mix(in srgb, var(--rcs-control-text) 6%, transparent) !important;
    }

    .rcs-cart-qty-stepper .rcs-cart-qty-btn svg {
        width: 16px !important;
        height: 16px !important;
        display: block !important;
    }

    .rcs-cart-qty-input,
    input.rcs-cart-qty-input {
        width: 46px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-left: 1px solid var(--rcs-control-border) !important;
        border-right: 1px solid var(--rcs-control-border) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--rcs-control-text) !important;
        font-family: inherit !important;
        font-size: var(--rcs-control-font) !important;
        text-align: center !important;
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }

    .rcs-cart-qty-input::-webkit-outer-spin-button,
    .rcs-cart-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    /* Kleine Knöpfe neben einem Feld - "Captcha neu laden" ist der häufigste.
       Sie tragen ihren Text und sollen keine Fläche in Grundfarbe sein. */
    .action.reload,
    button.action.reload,
    .captcha-reload {
        display: inline-flex;
        align-items: center !important;
        justify-content: center !important;
        gap: .4em !important;
        width: auto !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border: 1px solid var(--rcs-control-border) !important;
        border-radius: var(--rcs-control-radius) !important;
        background: var(--rcs-control-surface) !important;
        box-shadow: none !important;
        color: var(--rcs-control-text) !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        cursor: pointer !important;
    }

    .action.reload:hover,
    button.action.reload:hover,
    .captcha-reload:hover {
        border-color: var(--rcs-control-focus) !important;
        color: var(--rcs-control-text) !important;
    }

    /* Suchknopf im Kopf: Form der anderen, aber quadratisch und ohne Grund. */
    .action.search,
    button.action.search {
        display: inline-flex;
        align-items: center !important;
        justify-content: center !important;
        width: var(--rcs-control-height) !important;
        min-width: 0 !important;
        height: var(--rcs-control-height) !important;
        min-height: var(--rcs-control-height) !important;
        padding: 0 !important;
        border: 1px solid transparent !important;
        border-radius: var(--rcs-control-radius) !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: var(--rcs-control-text) !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .action.search:hover,
    button.action.search:hover {
        background-color: color-mix(in srgb, var(--rcs-control-text) 8%, transparent) !important;
        color: var(--rcs-control-text) !important;
    }

    /* Der Mengenwähler des Themes (Porto .qty-changer) als Reihe mit "In den Warenkorb". */
    .box-tocart:has(.field.qty .qty-changer) {
        display: block !important;
        width: 100% !important;
        margin: 0 0 1.5em !important;
    }

    .box-tocart .fieldset:has(.field.qty .qty-changer) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .box-tocart .fieldset:has(.field.qty .qty-changer) > .field.qty {
        margin-right: 0 !important;
    }

    /* Die Schaltfläche nimmt den Rest der Zeile und schrumpft, statt umzubrechen. */
    .box-tocart .fieldset:has(.field.qty .qty-changer) > .actions {
        margin: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .box-tocart .fieldset:has(.field.qty .qty-changer) > .actions > button.tocart {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Beide gleich hoch, dann liegen ihre Kanten auf einer Linie. */
    .box-tocart .fieldset:has(.field.qty .qty-changer) > .actions > button.tocart {
        margin-top: 0 !important;
        height: var(--rcs-control-height) !important;
        min-height: var(--rcs-control-height) !important;
        align-self: center !important;
    }

    /* Was sonst noch in der Zeile steht, bekommt seine eigene. */
    .box-tocart .fieldset:has(.field.qty .qty-changer) > .moved-add-to-links {
        flex: 1 0 100% !important;
        margin: 0 !important;
    }

    /* Die Breite nimmt sich der Kasten selbst; sonst schneidet "overflow: hidden" das Plus ab. */
    .field.qty:has(.qty-changer),
    .field.qty > .control:has(.qty-changer) {
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Die Beschriftung "Menge:" steht nicht im Bild, nimmt aber ihren Platz
       ein und schiebt den Kasten nach rechts. Sie verschwindet auf die Art,
       die ein Vorleseprogramm weiterhin findet - nicht mit "display: none". */
    .field.qty:has(.qty-changer) > .label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .field.qty > .control:has(.qty-changer) {
        display: inline-flex !important;
        align-items: stretch !important;
        height: var(--rcs-control-height) !important;
        overflow: hidden !important;
        border: 1px solid var(--rcs-control-border) !important;
        border-radius: var(--rcs-control-radius) !important;
        background: var(--rcs-control-surface) !important;
    }

    .field.qty > .control:has(.qty-changer) input.qty {
        order: 0 !important;
        width: 56px !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: center !important;
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }

    .field.qty > .control:has(.qty-changer) .qty-changer {
        display: contents !important;
    }

    .field.qty > .control:has(.qty-changer) .qty-changer > a {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--rcs-control-text) !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    /* Minus nach links, Plus nach rechts - die Trennlinie zeigt jeweils zum
       Feld. */
    .field.qty > .control:has(.qty-changer) .qty-changer > a.qty-dec {
        order: -1 !important;
        border-right: 1px solid var(--rcs-control-border) !important;
    }

    .field.qty > .control:has(.qty-changer) .qty-changer > a.qty-inc {
        order: 1 !important;
        border-left: 1px solid var(--rcs-control-border) !important;
    }

    .field.qty > .control:has(.qty-changer) .qty-changer > a:hover {
        background: color-mix(in srgb, var(--rcs-control-text) 8%, transparent) !important;
        color: var(--rcs-control-text) !important;
    }

    /* Wo weder unser noch Portos Mengenwähler steht, sondern nur Magentos
       Zahlenfeld: dieselbe Höhe wie alles andere, die Zahl in der Mitte, und
       eine Breite, die zu einer Menge passt und nicht zu einer Postleitzahl. */
    input.qty:not(.rcs-cart-qty-input),
    .box-tocart .field.qty input[type="number"]:not(.rcs-cart-qty-input) {
        width: 76px !important;
        text-align: center !important;
    }
}