/*
 * SM-Barrierefreiheit fuer JTL-Shop 5
 * Alle Groessen laufen ueber CSS-Variablen, die vom Plugin gesetzt werden:
 * --smbf-scale / --smbf-zoom (Besucher) sowie Basis-/Maximalwerte (Backend).
 */

/* ---------- Zoomstufe (skaliert em/rem-basiertes Layout) ---------- */
html.smbf-zoom {
    font-size: calc(100% * var(--smbf-zoom)) !important;
}

/* ---------- Schriftgroessen-Skalierung mit Backend-Obergrenze ---------- */
html.smbf-scale body {
    font-size: clamp(calc(var(--smbf-b-text) * 1px),
        calc(var(--smbf-b-text) * var(--smbf-scale) * 1px),
        calc(var(--smbf-m-text) * 1px)) !important;
}
html.smbf-scale h1 {
    font-size: clamp(calc(var(--smbf-b-h1) * 1px),
        calc(var(--smbf-b-h1) * var(--smbf-scale) * 1px),
        calc(var(--smbf-m-h1) * 1px)) !important;
}
html.smbf-scale h2 {
    font-size: clamp(calc(var(--smbf-b-h2) * 1px),
        calc(var(--smbf-b-h2) * var(--smbf-scale) * 1px),
        calc(var(--smbf-m-h2) * 1px)) !important;
}
html.smbf-scale h3 {
    font-size: clamp(calc(var(--smbf-b-h3) * 1px),
        calc(var(--smbf-b-h3) * var(--smbf-scale) * 1px),
        calc(var(--smbf-m-h3) * 1px)) !important;
}
html.smbf-scale h4 {
    font-size: clamp(calc(var(--smbf-b-h4) * 1px),
        calc(var(--smbf-b-h4) * var(--smbf-scale) * 1px),
        calc(var(--smbf-m-h4) * 1px)) !important;
}
html.smbf-scale h5 {
    font-size: clamp(calc(var(--smbf-b-h5) * 1px),
        calc(var(--smbf-b-h5) * var(--smbf-scale) * 1px),
        calc(var(--smbf-m-h5) * 1px)) !important;
}
html.smbf-scale h6 {
    font-size: clamp(calc(var(--smbf-b-h6) * 1px),
        calc(var(--smbf-b-h6) * var(--smbf-scale) * 1px),
        calc(var(--smbf-m-h6) * 1px)) !important;
}

/* ---------- PDF / Druck ---------- */
@media print {
    body {
        font-size: clamp(calc(var(--smbf-b-pdf) * 1px),
            calc(var(--smbf-b-pdf) * var(--smbf-scale) * 1px),
            calc(var(--smbf-m-pdf) * 1px)) !important;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: clamp(calc(var(--smbf-b-pdf) * 1.4 * 1px),
            calc(var(--smbf-b-pdf) * 1.4 * var(--smbf-scale) * 1px),
            calc(var(--smbf-m-pdfHead) * 1px)) !important;
    }
}

/* ---------- Layout-Optionen ---------- */
html.smbf-lh body {
    line-height: 1.9 !important;
    letter-spacing: 0.03em !important;
    word-spacing: 0.08em !important;
}
html.smbf-ul a {
    text-decoration: underline !important;
}
html.smbf-bb a.btn,
html.smbf-bb .btn,
html.smbf-bb button[type="submit"],
html.smbf-bb input[type="submit"],
html.smbf-bb .productlist > a,
html.smbf-bb .actions > a {
    padding: 0.9em 1.6em !important;
    min-height: 2.8em !important;
}
html.smbf-ff body,
html.smbf-ff body * {
    font-family: var(--smbf-font) !important;
}

/* ---------- Deutlicher Fokusrahmen fuer Tastaturbedienung ---------- */
html.smbf-focus :focus {
    outline: 3px solid var(--smbf-focus) !important;
    outline-offset: 2px !important;
}

/* ---------- Maus-Hervorhebung (Lupenbereich um den Zeiger) ---------- */
#smbf-spot {
    position: fixed;
    z-index: 2147482000;
    width: var(--smbf-spot-size);
    height: var(--smbf-spot-size);
    border-radius: 50%;
    border: 3px solid var(--smbf-spot-color);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, var(--smbf-spot-dim));
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

/* ---------- Farbschemen ---------- */
html.smbf-scheme-hcbw  { --smbf-s-bg: #000000; --smbf-s-fg: #ffffff; --smbf-s-link: #7fd4ff; }
html.smbf-scheme-hchy  { --smbf-s-bg: #000000; --smbf-s-fg: #ffd500; --smbf-s-link: #fff36b; }
html.smbf-scheme-dark  { --smbf-s-bg: #22262b; --smbf-s-fg: #f2f2f2; --smbf-s-link: #8ab4f8; }
html.smbf-scheme-sepia { --smbf-s-bg: #f3e9d2; --smbf-s-fg: #3d3427; --smbf-s-link: #8a5a1f; }
html.smbf-scheme-custom {
    --smbf-s-bg: var(--smbf-c-bg);
    --smbf-s-fg: var(--smbf-c-text);
    --smbf-s-link: var(--smbf-c-link);
}

html.smbf-scheme body {
    background-color: var(--smbf-s-bg) !important;
    background-image: none !important;
    color: var(--smbf-s-fg) !important;
}
/* Hintergrundflaechen zurueckdringen, damit der Koentrast erhalten bleibt */
html.smbf-scheme header,
html.smbf-scheme nav,
html.smbf-scheme footer,
html.smbf-scheme main,
html.smbf-scheme section,
html.smbf-scheme article,
html.smbf-scheme aside,
html.smbf-scheme .card,
html.smbf-scheme .productbox,
html.smbf-scheme .modal-content,
html.smbf-scheme .box,
html.smbf-scheme .table,
html.smbf-scheme table,
html.smbf-scheme tr,
html.smbf-scheme td,
html.smbf-scheme th,
html.smbf-scheme div[class],
html.smbf-scheme span[class],
html.smbf-scheme li[class] {
    background-color: transparent !important;
    background-image: none !important;
}
html.smbf-scheme p,
html.smbf-scheme li,
html.smbf-scheme td,
html.smbf-scheme th,
html.smbf-scheme label,
html.smbf-scheme h1,
html.smbf-scheme h2,
html.smbf-scheme h3,
html.smbf-scheme h4,
html.smbf-scheme h5,
html.smbf-scheme h6,
html.smbf-scheme span[class],
html.smbf-scheme dt,
html.smbf-scheme dd {
    color: var(--smbf-s-fg) !important;
}
html.smbf-scheme a {
    color: var(--smbf-s-link) !important;
}
html.smbf-scheme .btn,
html.smbf-scheme button[type="submit"],
html.smbf-scheme input[type="submit"],
html.smbf-scheme a.btn {
    background-color: var(--smbf-s-link) !important;
    color: var(--smbf-s-bg) !important;
    border-color: var(--smbf-s-link) !important;
}
html.smbf-scheme input[type="text"],
html.smbf-scheme input[type="email"],
html.smbf-scheme input[type="password"],
html.smbf-scheme input[type="search"],
html.smbf-scheme input[type="tel"],
html.smbf-scheme input[type="number"],
html.smbf-scheme textarea,
html.smbf-scheme select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid var(--smbf-s-fg) !important;
}
html.smbf-scheme img {
    max-width: 100%;
}

/* ================= Widget (eigene, unveraenderliche Optik) =================
   Steht am Ende, damit es die Schema-Regeln ueberschreibt. */

#smBarrierefreiheit {
    position: fixed;
    z-index: 2147483000;
}

#smbf-open {
    position: fixed;
    z-index: 2147483000;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.25);
    background-color: var(--smbf-btn-bg);
    color: var(--smbf-btn-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 0;
}
#smbf-open:focus {
    outline: 3px solid var(--smbf-focus);
    outline-offset: 2px;
}

/* Positionen */
#smBarrierefreiheit[data-position="unten-rechts"] #smbf-open { bottom: 20px; right: 20px; }
#smBarrierefreiheit[data-position="unten-links"]  #smbf-open { bottom: 20px; left: 20px; }
#smBarrierefreiheit[data-position="oben-rechts"]  #smbf-open { top: 20px; right: 20px; }
#smBarrierefreiheit[data-position="oben-links"]   #smbf-open { top: 20px; left: 20px; }

#smBarrierefreiheit[data-position="unten-rechts"] #smbf-panel { bottom: 90px; right: 20px; }
#smBarrierefreiheit[data-position="unten-links"]  #smbf-panel { bottom: 90px; left: 20px; }
#smBarrierefreiheit[data-position="oben-rechts"]  #smbf-panel { top: 90px; right: 20px; }
#smBarrierefreiheit[data-position="oben-links"]   #smbf-panel { top: 90px; left: 20px; }

#smbf-panel {
    position: fixed;
    z-index: 2147483000;
    width: min(390px, calc(100vw - 32px));
    max-height: min(76vh, 640px);
    overflow-y: auto;
    background-color: #ffffff;
    color: #16191d;
    border: 1px solid #b9c0c8;
    border-radius: 10px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}
#smbf-panel[hidden] {
    display: none;
}

#smbf-panel .smbf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #d5dae0;
    background-color: #f2f5f8;
    position: sticky;
    top: 0;
}
#smbf-panel #smbf-title {
    font-size: 17px;
    font-weight: 700;
}
#smbf-panel .smbf-x {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #16191d;
    padding: 2px 8px;
    border-radius: 6px;
}

#smbf-panel .smbf-body {
    padding: 12px 14px 16px;
}
#smbf-panel .smbf-group {
    margin-bottom: 16px;
}
#smbf-panel .smbf-label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}
#smbf-panel .smbf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#smbf-panel .smbf-chip {
    border: 1px solid #8b95a1;
    border-radius: 999px;
    background: #ffffff;
    color: #16191d;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
}
#smbf-panel .smbf-chip[aria-pressed="true"] {
    background: #16191d;
    color: #ffffff;
    border-color: #16191d;
}
#smbf-panel .smbf-chip-hcbw   { background: #000; color: #fff; border-color: #666; }
#smbf-panel .smbf-chip-hchy   { background: #000; color: #ffd500; border-color: #666; }
#smbf-panel .smbf-chip-dark   { background: #22262b; color: #f2f2f2; border-color: #666; }
#smbf-panel .smbf-chip-sepia  { background: #f3e9d2; color: #3d3427; border-color: #666; }
#smbf-panel .smbf-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--smbf-focus); }

#smbf-panel .smbf-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
#smbf-panel .smbf-step {
    border: 1px solid #8b95a1;
    background: #ffffff;
    color: #16191d;
    border-radius: 6px;
    min-width: 40px;
    min-height: 36px;
    font-size: 15px;
    cursor: pointer;
}
#smbf-panel input[type="range"] {
    flex: 1;
    min-width: 90px;
}
#smbf-panel output {
    min-width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#smbf-panel .smbf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
#smbf-panel .smbf-check input {
    width: 18px;
    height: 18px;
}
#smbf-panel .smbf-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #d5dae0;
    padding-top: 12px;
}
#smbf-panel #smbf-status {
    font-size: 13px;
    color: #2c6e2c;
}
#smbf-panel .smbf-reset {
    border: 1px solid #8b95a1;
    background: #ffffff;
    color: #16191d;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
}
#smbf-panel button:focus,
#smbf-panel input:focus {
    outline: 3px solid var(--smbf-focus);
    outline-offset: 1px;
}

/* Auf kleinen Geraten: Panel fast volle Breite */
@media (max-width: 480px) {
    #smbf-panel {
        width: calc(100vw - 24px);
        max-height: 60vh;
    }
}