/* ==========================================================================
   Soyka Bestellportal – Widget-Styles
   Alle Selektoren unter .soyka-widget für konfliktfreies Embedding.
   ========================================================================== */

.soyka-widget *,
.soyka-widget *::before,
.soyka-widget *::after {
  box-sizing: border-box;
}


/* 1.Variable */
.soyka-widget {
    --primärgrün: #1f7405;
    --akzentgelb: #ffc300;
    --hellgelb: #FFE493;
    --primärrot: #A52418;
    --hintergrundgrün: #4A5A4C;
    --hintergrundgrau: #F6F6F2;
    --border-main: 2px solid var(--hintergrundgrün);
    --radius-main: 5px;
    --radius-pille: 25px;
    --bg-card: white;
    --text-main: #333;
    --text-secondary: #555;
    --table-border: #ddd;
    --input-bg: white;
    --input-border: #ddd;
  }

  @media (prefers-color-scheme: dark) {
    .soyka-widget {
      --primärgrün: #2ea00a;
      --hintergrundgrau: #1a1a1a;
      --hintergrundgrün: #c0ccb8;
      --bg-card: #2a2a2a;
      --text-main: #e0e0e0;
      --text-secondary: #aaa;
      --table-border: #444;
      --input-bg: #333;
      --input-border: #555;
      --hellgelb: #5a4a10;
      --border-main: 2px solid var(--hintergrundgrün);
    }
  }
/* 2.Basis */   
  .soyka-widget {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--hintergrundgrau);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
        transition: background-color 0.3s, color 0.3s;
  }
  .soyka-widget .header-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  .soyka-widget .logo {
      height: 80px;
      margin-right: 20px;
  }
  .soyka-widget .title-text {
      font-size: 2.1em;
      color: var(--hintergrundgrün);
      text-align: center;
      margin: 0;
  }
    .soyka-widget .subtitle-text {
      font-size: 1.1em;
      color: var(--hintergrundgrün);
      text-align: center;
      margin: 0;
  }
  .soyka-widget .intro-text {
      font-size: 1.1em;
      color: var(--hintergrundgrün);
      text-align: center;
      margin-top: 10px;
      margin-bottom: 20px;
}

/* 3.Container-Layout */

    .soyka-widget .dual-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      width: 90%;
      max-width: 1200px;
      margin: 0 auto 20px auto;
      flex-wrap: wrap;
    }
      .soyka-widget .customer-info-container, 
      .soyka-widget .info-container {
        background-color: var(--bg-card);
        border: var(--border-main);
        border-radius: var(--radius-main);
        display: flex;
        flex-direction: column;
        width: 280px;
        padding: 12px 15px;
        margin: 15px auto;
        box-sizing: border-box;
       }
      .soyka-widget .customer-info-container {
        gap: 15px;
      }
      .soyka-widget .info-container {
        font-size: 0.8em;
      }
/* Zentrierter Upload/Download-Bereich */
.soyka-widget .upload-download-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 15px 0 0 0;
}
.soyka-widget .upload-download-centered #rechercheButton,
.soyka-widget .upload-download-centered .upload-trigger-button {
  min-width: 280px;
}

/* Kundenwunsch volle Breite */
.soyka-widget .wunsch-row {
  width: 90%;
  max-width: 1200px;
  margin: 18px auto 0 auto;
}
.soyka-widget .wunsch-col-full { display: flex; flex-direction: column; }
.soyka-widget .wunsch-col-full label {
  font-weight: bold; font-size: 0.85em;
  color: var(--hintergrundgrün); display: block; margin-bottom: 5px;
}
.soyka-widget .wunsch-col-full textarea {
  width: 100%; box-sizing: border-box;
  border: var(--border-main); border-radius: var(--radius-main);
  background: var(--input-bg); padding: 10px; font-family: inherit;
  font-size: 0.85em; color: var(--text-main);
  resize: vertical; outline: none; transition: border-color 0.3s;
}
.soyka-widget .wunsch-col-full textarea:focus { border-color: var(--primärgrün); }
.soyka-widget .bk-zone {
  position: relative; /* Wichtig für die Position des Pfeils */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 25px 25px 40px 25px;
  border: 2px solid var(--primärgrün); /* Durchgehender grüner Rand */
  border-radius: var(--radius-pille);  /* Rund wie deine anderen Buttons */
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
}
.soyka-widget .bk-zone:hover, .soyka-widget .bk-zone.dragover {
  background-color: #e8e8e4 !important;
}
.soyka-widget .close-upload-btn {
position: absolute;
  bottom: 6px;
  right: 6px;
  background: var(--hintergrundgrau);
  border: 1px solid var(--primärgrün);
  color: var(--primärgrün);
  width: auto;
  height: auto;
  border-radius: var(--radius-pille);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  line-height: 1;
  padding: 4px 10px;
  box-shadow: none;
}
.soyka-widget .close-upload-btn:hover {
  background-color: #e8e8e4;
  border-color: var(--primärrot);
  color: var(--hintergrundgrün) !important;
  box-shadow: none;
}
/* Texte innerhalb der Zone beim Hover behalten ihre Farbe */
.soyka-widget .bk-zone:hover strong { color: var(--primärgrün) !important; }
.soyka-widget .bk-zone:hover small { color: var(--text-secondary) !important; }
.soyka-widget .bk-zone:hover .bk-icon { color: var(--text-main) !important; }
.soyka-widget .bk-zone .bk-icon { font-size: 1.4em; line-height: 1; }
.soyka-widget .bk-zone strong { color: var(--primärgrün); transition: color 0.3s; }
.soyka-widget .bk-zone small { color: var(--text-secondary); transition: color 0.3s; }
.soyka-widget .bk-zone input[type="file"] { display: none; }
.soyka-widget .bk-file-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.soyka-widget .bk-file-tag {
  display: flex; align-items: center; justify-content: space-between;
  background: #eaf4e8; border: 1px solid #c5dfc0; border-radius: 4px;
  padding: 3px 7px; font-size: 0.74em; color: var(--hintergrundgrün); word-break: break-all;
}
.soyka-widget .bk-file-tag .bk-rm {
  cursor: pointer; color: var(--primärrot); font-weight: bold;
  margin-left: 5px; flex-shrink: 0; background: none; border: none;
  font-size: 1em; padding: 0; border-radius: 0; line-height: 1;
}
.soyka-widget .bk-file-tag .bk-rm:hover { background: none; color: darkred; }
.soyka-widget .bk-send-status {
  font-size: 0.78em; font-weight: bold; color: var(--primärgrün);
  text-align: center; margin-top: 4px; min-height: 1em;
}
@media (max-width: 768px) {
  .soyka-widget .upload-download-centered #rechercheButton,
  .soyka-widget .upload-download-centered .upload-trigger-button { min-width: auto; width: 100%; }
}
        .soyka-widget .info-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          gap: 1px;
        }

        .soyka-widget .info-row span:first-child {
          font-weight: bold;
          color: var(--hintergrundgrün);
          flex-shrink: 0;
        }

        .soyka-widget .info-row span:last-child {
          color: var(--text-secondary);
          text-align: right;
          flex-grow: 1;
}


/* 4.Formulare & Eingabe*/

.soyka-widget .main-content-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.soyka-widget .form-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin-top: 30px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }
  .soyka-widget .form-container input, 
  .soyka-widget .input-group input {
    border: 1px solid var(--input-border);
    outline: none;
    transition: border-color 0.3s ease-in-out;
    min-width: 0;
    background-color: var(--input-bg);
    color: var(--text-main);
  }

  .soyka-widget .form-container input:focus,
  .soyka-widget .input-group input:focus {
    border-color: var(--primärgrün);
  }
  .soyka-widget .form-container input {
    padding: 12px;
    font-size: 0.9em;
    border-radius: 8px;
  }
  .soyka-widget .input-group {
    display: flex;
    flex-direction: column;
  }
  .soyka-widget .input-group label {
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 5px;
    color: var(--hintergrundgrün);
  }
  .soyka-widget .input-group input {
    padding: 10px;
    font-size: 0.8em;
    border-radius: var(--radius-main);
  }
  .soyka-widget .form-container input#anzahl { flex: 0.6; }
  .soyka-widget .form-container input#isbn { flex: 1.2; }
  .soyka-widget .form-container input#titel { flex: 2.5; }
  .soyka-widget .form-container input#preis { flex: 0.7; }
  .soyka-widget .form-container input#bestellzeichen { flex: 0.8; }
  .soyka-widget .form-container #addButton { flex-shrink: 0; white-space: nowrap; }
.soyka-widget .visually-hidden {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* 5.Tabelle */  
.soyka-widget table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      margin: 15px 0;
      border-radius: 8px;
      overflow: visible;
      background-color: var(--bg-card);
      border: 1px solid var(--table-border);
    }
    .soyka-widget th, .soyka-widget td {
      padding: 12px;
      text-align: center;
      font-size: 0.8em;
      border-bottom: 1px solid var(--table-border);
      border-right: 1px solid var(--table-border);
      white-space: normal; 
      word-wrap: break-word;
      color: var(--text-main);
    }
    .soyka-widget th {
      background-color: var(--hellgelb);
      color: var(--hintergrundgrün);
      font-weight: bold;
      }
    .soyka-widget th:last-child, .soyka-widget td:last-child { border-right: none; }
    .soyka-widget tbody tr:last-child td { border-bottom: none; }
    .soyka-widget th:nth-child(1), .soyka-widget td:nth-child(1) { width: 5%; }  /* Anzahl */
    .soyka-widget th:nth-child(2), .soyka-widget td:nth-child(2) { width: 15%; } /* ISBN */
    .soyka-widget th:nth-child(3), .soyka-widget td:nth-child(3) { width: 29%; } /* Titel */
    th:nth-child(4), td:nth-child(4),
    th:nth-child(5), td:nth-child(5),
    .soyka-widget th:nth-child(6), .soyka-widget td:nth-child(6) { width: 10%; } /* Preis, Bestellz, Gesamt */
    .soyka-widget th:nth-child(7), .soyka-widget td:nth-child(7) { width: 3%; }  /* Buchschutz */
    .soyka-widget th:nth-child(8), .soyka-widget td:nth-child(8) { width: 10%; } /* Bearbeiten */


/* 6.Buttons */

  .soyka-widget button {
    cursor: pointer;
    border-radius: var(--radius-pille);
    padding: 12px 28px;
    background-color: var(--hintergrundgrau);
    color: var(--hintergrundgrün);
    border: 1px solid var(--primärgrün);
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
    text-shadow: none;
  }
  .soyka-widget button:hover {
    background-color: #e8e8e4;
    color: var(--hintergrundgrün);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 -1px 2px rgba(0,0,0,0.04);
  }
  .soyka-widget .edit-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    padding: 5px;
    border-radius: 8px;
    color: var(--primärgrün);
    box-shadow: none;
  }
 .soyka-widget .edit-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: none;
  .soyka-widget }.export-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
  }
  .soyka-widget .export-container button {
    border-color: var(--akzentgelb);
    box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
  }
  .soyka-widget .export-container button:hover {
  background-color: #e8e8e4;
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 8px rgba(255,195,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.04);
}
.soyka-widget .remove-btn {
  color: var(--primärrot);
  background: var(--hintergrundgrau);
  border: 1px solid var(--primärrot);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .remove-btn svg {
  width: 10px;
  height: 10px;
  stroke: var(--primärrot);
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: stroke 0.2s;
  display: block;
}

.soyka-widget .remove-btn:hover {
  background-color: #e8e8e4;
  color: var(--primärrot);
  box-shadow: 0 2px 6px rgba(165,36,24,0.18);
}
.soyka-widget .remove-btn:hover svg {
  stroke: var(--primärrot);
}
.soyka-widget #rechercheButton {
  border-color: var(--akzentgelb);
  border-width: 1px;
  width: 100%;
  box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget #rechercheButton:hover {
  background-color: #e8e8e4;
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 8px rgba(255,195,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.04);
}
.soyka-widget .clear-btn {
  background: var(--hintergrundgrau);
  border: 1px solid var(--primärrot) !important;
  color: var(--primärrot) !important;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  position: absolute;
  right: -46px;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 4px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .clear-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--primärrot);
  stroke-width: 1.8;
  stroke-linecap: round;
  display: block;
  transition: stroke 0.2s;
}
.soyka-widget .clear-btn:hover {
  background-color: #e8e8e4 !important;
  color: var(--primärrot) !important;
  box-shadow: 0 2px 6px rgba(165,36,24,0.18);
}
.soyka-widget .clear-btn:hover svg {
  stroke: var(--primärrot);
}
/* Styling für den neuen Trigger-Button */
.soyka-widget .upload-trigger-button {
  cursor: pointer;
  border-radius: 25px;
  padding: 12px 28px;
  background-color: var(--hintergrundgrau);
  color: var(--hintergrundgrün);
  border: 1px solid var(--primärgrün);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .upload-trigger-button:hover {
  background-color: #e8e8e4;
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 -1px 2px rgba(0,0,0,0.04);
}

/* Container für die Animation */
.soyka-widget .morph-container {
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 45px;
  display: flex;
  align-items: flex-start;
}

/* Wenn expandiert, soll der Container die Höhe der bk-zone annehmen */
.soyka-widget .morph-container.expanded {
  min-height: 140px; /* Die Zone ist größer als der Button */
}

/* Die bk-zone braucht eine Transition für das Einblenden */
.soyka-widget .bk-zone {
  transition: opacity 0.4s ease-in;
  width: 100%;
}
/* 7.Responsive Design */
@media (max-width: 768px) {
  .soyka-widget .form-container,
  .soyka-widget .dual-container,
  .soyka-widget .export-container {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    gap: 15px;
  }
    .soyka-widget .customer-info-container,
    .soyka-widget .info-container {
        width: 80%;
      }

    .soyka-widget .form-container input {
        width: 100% !important;
        flex: none !important;
        }
    .soyka-widget .export-container button {
        width: 100% !important;
        flex: none;
        }
    .soyka-widget .agb-checkbox {
        flex-wrap: wrap;
        padding: 10px 15px;
        text-align: center;
        justify-content: center;
      }
}

/* 8. Links */
.soyka-widget a.buchschutz-link, 
.soyka-widget a.buchschutz-link:visited,
.soyka-widget a.rabatt-link, 
.soyka-widget a.rabatt-link:visited,
.soyka-widget .agb-checkbox a, 
.soyka-widget .agb-checkbox a:visited,
.soyka-widget #aufforstungtext {
  color: var(--hintergrundgrün);
  text-decoration: underline;
  text-decoration-color: var(--akzentgelb);
  text-underline-offset: 3px;
  font-weight: bold;
  transition: color 0.3s;
  }
  .soyka-widget a.aufforstung-link, 
  .soyka-widget a.aufforstung-link:visited,
  .soyka-widget #aufforstung {
    color: var(--primärgrün);
    font-weight: bold;
    text-decoration: none;
  }
.soyka-widget a:hover {
  color: var(--primärrot) !important;
  text-decoration-color: var(--primärrot);
}

/* 8. Sonderelemente */
.soyka-widget .switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}
.soyka-widget .switch input { opacity: 0; width: 0; height: 0; }
.soyka-widget .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}
.soyka-widget .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.soyka-widget input:checked + .slider { background-color: var(--primärgrün); }
.soyka-widget input:checked + .slider:before { transform: translateX(14px); }
.soyka-widget .error, .soyka-widget #fallbackHinweis {
  color: var(--primärrot);
  font-size: 0.85em;
  margin-top: 5px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.soyka-widget .total-container {
  text-align: center;
  margin: 20px 0 30px 0;
  font-size: 1.3em;
  color: var(--hintergrundgrün);
  display: none;
}
.soyka-widget #finalPrice {
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: underline double;
  color: var(--text-main);
}
.soyka-widget .order-type-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}
.soyka-widget .regular-label, .soyka-widget .express-label {
  color: var(--hintergrundgrün);
  font-size: 0.8em;
  transition: color 0.3s;
}
.soyka-widget input:checked ~ .express-label {
  color: var(--akzentgelb);
  font-weight: bold;
}
.soyka-widget .agb-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 20px 0;
}
.soyka-widget .agb-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 8px;
}
.soyka-widget #agbCheckbox:invalid {
  outline: 2px solid var(--primärrot);
  border-radius: 2px;
}
/* 9.Modaldesign */
.soyka-widget #customModal {
  display: none; 
  position: fixed; 
  z-index: 10000; /* Höher als alles andere */
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.6); 
  backdrop-filter: blur(3px); /* Leichter Unschärfe-Effekt im Hintergrund */
  align-items: center; 
  justify-content: center;
}

.soyka-widget .modal-content {
  background-color: var(--hintergrundgrau);
  padding: 30px;
  border-radius: var(--radius-main);
  border: 8px solid var(--primärrot);
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: soyka-modalAppear 0.3s ease-out;
}

@keyframes soyka-modalAppear {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.soyka-widget .modal-content h3 {
  color: var(--hintergrundgrün);
  margin-top: 0;
  font-size: 1.5rem;
}

.soyka-widget .modal-content p {
  color: var(--text-main);
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 20px 0;
}

.soyka-widget .modal-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.soyka-widget .modal-buttons button {
  padding: 12px 28px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85em;
  border-radius: var(--radius-pille);
  transition: transform 0.1s, box-shadow 0.3s, background-color 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), inset 0 -1px 2px rgba(0,0,0,0.04);
}

.soyka-widget .modal-buttons button:active {
  transform: scale(0.95);
}

.soyka-widget #modalConfirmBtn {
  background-color: var(--hintergrundgrau);
  color: rgb(0, 0, 0);
  border: 1px solid var(--akzentgelb);
  box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget #modalConfirmBtn:hover {
  background-color: #e8e8e4;
  box-shadow: 0 2px 8px rgba(255,195,0,0.25);
}

.soyka-widget #modalCancelBtn {
  background-color: var(--hintergrundgrau);
  color: var(--primärrot);
  border: 1px solid var(--primärrot);
  box-shadow: 0 2px 6px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
}

.soyka-widget #modalCancelBtn:hover {
  background-color: #e8e8e4;
  box-shadow: 0 2px 8px rgba(165,36,24,0.18);
}
/* Dark-Mode Zusatz-Overrides */
@media (prefers-color-scheme: dark) {
  .soyka-widget .bk-file-tag { background: #333; border-color: #555; color: var(--text-main); }
  .soyka-widget .bk-zone:hover, .soyka-widget .bk-zone.dragover { background-color: #222 !important; }
  .soyka-widget .upload-trigger-button { background-color: var(--hintergrundgrau); color: var(--hintergrundgrün); }
  .soyka-widget .slider { background-color: #555; }
  .soyka-widget input:checked + .slider { background-color: var(--primärgrün); }
  .soyka-widget #modalConfirmBtn { background-color: var(--hintergrundgrau); color: var(--text-main); }
  .soyka-widget .close-upload-btn:hover { background-color: #333; }
  .soyka-widget #modalCancelBtn:hover { background-color: #2a2020; }
  .soyka-widget button:hover,
  .soyka-widget .export-container button:hover,
  .soyka-widget .upload-trigger-button:hover,
  .soyka-widget #rechercheButton:hover,
  .soyka-widget #modalConfirmBtn:hover { background-color: #222; }
  .soyka-widget .remove-btn:hover, .soyka-widget .clear-btn:hover { background-color: #222 !important; }
}

/* 11. Sticky Table Header */
.soyka-widget #orderTable thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--hellgelb);
}