/* Eine Quelle fuer die Optik des gesamten Kaeufer-Flows: Werbeplatz im Theme,
   Upload-Schritt und Bestaetigung. Diese Datei wird auf jeder Seite eingereiht
   (wp-sap.php), auch auf der Bestaetigungsseite - deshalb stehen die Werte
   hier und nicht in inc/page/style.css.

   Das Praefix --wpsap- macht sie gegenueber Theme-Variablen kollisionsfrei.
   inc/page/style.css liest sie mit Fallback, damit die Seite auch traegt,
   wenn diese Datei einmal nicht geladen wird. */
:root {
    /* Eigener Stack statt inherit: der Flow soll in jedem Theme gleich
       aussehen, nicht die Schrift des Themes uebernehmen. */
    --wpsap-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --wpsap-ink: #161616;
    --wpsap-ink-soft: #4a4a4a;
    --wpsap-muted: #6b7280;
    --wpsap-line: #dcdfe3;
    --wpsap-surface: #ffffff;
    --wpsap-canvas: #f0f1f2;
    --wpsap-canvas-soft: #fafafa;

    --wpsap-radius: 8px;
    --wpsap-radius-sm: 5px;
    --wpsap-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
    --wpsap-focus: 0 0 0 3px rgba(22, 22, 22, .18);
}

/* Freistehende, abgerundete Karte auf hellem Grund (SS1) statt des frueheren
   kantigen Vollbreiten-Bandes. Der Radius stand bis 1.8.2 per !important auf 0
   und musste hier aktiv ueberschrieben werden - jetzt traegt die Box Ecken und
   einen weichen Schatten selbst. width:100% bleibt: die Karte fuellt die Breite
   ihres Widgets/Containers, hebt sich aber durch Radius und Schatten ab. */
.wpsap_ads_plugin_ads_box {
    width: 100%;
    box-sizing: border-box;
    background-color: #F2F3F5;
    /* border-radius: 14px; */
    /* box-shadow: var(--wpsap-shadow, 0 1px 3px rgba(0, 0, 0, .08)); */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: var(--wpsap-font, sans-serif);
}

.wpsap_ads_plugin_ads_box_container {
    max-width: 100%;
}

/* Derselbe Stil wie der primaere Button des Kauf-Flows. Bis 1.8.0 standen die
   Werte hier und in inc/page/style.css doppelt und mussten von Hand gleich
   gehalten werden - jetzt lesen beide dieselben Variablen.
   Schriftart und -groesse muessen dabeistehen: ohne sie erbt der Button die
   des Themes und faellt dort fett, schmal oder riesig aus. Der Selektor nennt
   zusaetzlich die Box, damit Theme-Regeln auf "button" nicht gewinnen. */
.wpsap_ads_plugin_ads_box button.wpsap_ads_plugin_ads_box_btn {
    background-color: var(--wpsap-ink, #161616);
    color: #fff;
    border: 1px solid var(--wpsap-ink, #161616);
    font-family: var(--wpsap-font, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    padding: .75rem 1.5rem;
    border-radius: var(--wpsap-radius-sm, 5px);
    cursor: pointer;
    box-shadow: var(--wpsap-shadow, 0 1px 3px rgba(0, 0, 0, .08));
    transition: background-color .15s ease, transform .15s ease;
}

.wpsap_ads_plugin_ads_box button.wpsap_ads_plugin_ads_box_btn:hover {
    background-color: #2c2c2c;
}

.wpsap_ads_plugin_ads_box button.wpsap_ads_plugin_ads_box_btn:focus-visible {
    outline: none;
    box-shadow: var(--wpsap-focus, 0 0 0 3px rgba(22, 22, 22, .18));
}

.wpsap_ads_plugin_ads_box_title {
    font-family: var(--wpsap-font, sans-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wpsap-ink, #161616);
    margin: 0 0 24px 0;
}

/* Ohne eigene Groesse erbt der Hinweis die des Themes und ueberragt dort den
   Titel. Fester Wert statt 50 %: die Box bringt ihre Schriftgroesse selbst
   mit, ein relativer Wert haette hier keinen verlaesslichen Bezugspunkt. */
p.wpsap_ads_plugin_ads_box_note {
    font-family: var(--wpsap-font, sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--wpsap-muted, #8a8a8a);
    margin: 16px 0 0 0;
}

.wpsap_ads_plugin_ads_box img {
    max-width: 100%;
    height: auto;
}