/* =============================================================================
   Lernsehen Checkout Theme – Dark Neumorphism
   Basiert auf: ls-design-vorgabe.md
   Bootstrap 5.3 + nm-* Klassen
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design Tokens – Dark Theme (Standard)
   ----------------------------------------------------------------------------- */
:root {
  --nm-bg:           #0b0f16;
  --nm-surface:      #0f1622;
  --nm-surface-2:    #0c131f;
  --nm-text:         #e9eef7;
  --nm-muted:        #9aa6bb;
  --nm-accent:       #6aa9ff;

  --nm-shadow-dark:  rgba(0, 0, 0, .65);
  --nm-shadow-light: rgba(255, 255, 255, .06);
  --nm-border:       rgba(255, 255, 255, .08);

  --nm-danger:       #ef4444;
  --nm-success:      #22c55e;

  /* Bootstrap override tokens */
  --bs-body-bg:      var(--nm-bg);
  --bs-body-color:   var(--nm-text);
  --bs-border-color: var(--nm-border);
}

/* -----------------------------------------------------------------------------
   2. Design Tokens – Light Theme
   ----------------------------------------------------------------------------- */
[data-theme="light"] {
  --nm-bg:           #e0e5ec;
  --nm-surface:      #e0e5ec;
  --nm-surface-2:    #d3d8e2;
  --nm-text:         #2d3a4a;
  --nm-muted:        #718096;
  --nm-accent:       #4d9de0;

  --nm-shadow-dark:  rgba(163, 177, 198, .60);
  --nm-shadow-light: rgba(255, 255, 255, .92);
  --nm-border:       rgba(163, 177, 198, .20);

  --bs-body-bg:      var(--nm-bg);
  --bs-body-color:   var(--nm-text);
}

/* Light: Cards und Buttons = gleicher Ton wie BG */
[data-theme="light"] .nm-card,
[data-theme="light"] .nm-btn,
[data-theme="light"] .nm-ham {
  background: var(--nm-bg) !important;
}

/* -----------------------------------------------------------------------------
   3. Theme-Transition beim Wechsel
   ----------------------------------------------------------------------------- */
html {
  transition: background-color .25s ease, color .25s ease;
}
body,
.nm-card,
.nm-inset,
.nm-btn,
.form-control,
.form-select,
.nm-topbar {
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* -----------------------------------------------------------------------------
   4. Base
   ----------------------------------------------------------------------------- */
html,
body {
  background-color: var(--nm-bg);
  color: var(--nm-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
}

a {
  color: var(--nm-accent);
  text-decoration: none;
}
a:hover {
  color: var(--nm-accent);
  text-decoration: underline;
  opacity: .85;
}

/* -----------------------------------------------------------------------------
   5. nm-card – Raised Card
   ----------------------------------------------------------------------------- */
.nm-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  border: 1px solid var(--nm-border);
  border-radius: 18px;
  box-shadow:
     10px  10px 24px var(--nm-shadow-dark),
    -8px  -8px  18px var(--nm-shadow-light);
  padding: 1.5rem;
}

/* -----------------------------------------------------------------------------
   6. nm-inset – Eingedrückte Fläche
   ----------------------------------------------------------------------------- */
.nm-inset {
  background: var(--nm-surface-2);
  border: 1px solid var(--nm-border);
  border-radius: 16px;
  box-shadow:
    inset  10px  10px 18px var(--nm-shadow-dark),
    inset -8px  -8px  14px var(--nm-shadow-light);
}

/* -----------------------------------------------------------------------------
   7. nm-btn – Buttons
   ----------------------------------------------------------------------------- */
.nm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--nm-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)) !important;
  box-shadow:
     10px  10px 24px var(--nm-shadow-dark),
    -8px  -8px  18px var(--nm-shadow-light);
  color: var(--nm-text) !important;
  transition: box-shadow .15s ease, transform .1s ease;
  text-decoration: none !important;
}
.nm-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  color: var(--nm-text) !important;
}
.nm-btn:active:not(:disabled) {
  transform: none;
  box-shadow:
    inset 4px  4px 10px var(--nm-shadow-dark),
    inset -3px -3px 8px var(--nm-shadow-light);
}
.nm-btn:disabled,
.nm-btn.disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Primary */
.nm-btn-primary {
  background: linear-gradient(160deg, #1d4ed8, #1e40af) !important;
  border-color: rgba(106, 169, 255, .35) !important;
  color: #e9eef7 !important;
}
[data-theme="light"] .nm-btn-primary {
  background: linear-gradient(160deg, #4d9de0, #3a8fd4) !important;
}

/* Danger */
.nm-btn-danger {
  background: linear-gradient(160deg, #991b1b, #7f1d1d) !important;
  border-color: rgba(220, 38, 38, .35) !important;
  color: #fca5a5 !important;
}
[data-theme="light"] .nm-btn-danger {
  background: linear-gradient(160deg, #9e5252, #8a3e3e) !important;
}

/* Success */
.nm-btn-success {
  background: linear-gradient(160deg, #15803d, #166534) !important;
  border-color: rgba(34, 197, 94, .35) !important;
  color: #86efac !important;
}

/* Small */
.nm-btn-sm {
  padding: .35rem .85rem;
  font-size: .8rem;
}

/* Large */
.nm-btn-lg {
  padding: .75rem 1.75rem;
  font-size: 1rem;
}

/* Block (volle Breite) */
.nm-btn-block {
  width: 100%;
}

/* -----------------------------------------------------------------------------
   8. Formulare – form-control / form-select
   ----------------------------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control {
  background: var(--nm-surface-2) !important;
  color: var(--nm-text) !important;
  border: 1px solid var(--nm-border) !important;
  border-radius: 14px !important;
  box-shadow:
    inset  10px  10px 18px var(--nm-shadow-dark),
    inset -8px  -8px  14px var(--nm-shadow-light) !important;
  padding: .6rem 1rem;
}
.form-control::placeholder {
  color: var(--nm-muted);
  opacity: .8;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(106, 169, 255, .45) !important;
  box-shadow:
    inset  10px  10px 18px var(--nm-shadow-dark),
    inset -8px  -8px  14px var(--nm-shadow-light),
    0 0 0 3px rgba(106, 169, 255, .18) !important;
  outline: none;
}
.form-select option {
  background: var(--nm-surface);
  color: var(--nm-text);
}

/* Checkbox / Radio – Neumorphismus */
.form-check-input {
  background-color: var(--nm-surface-2) !important;
  border-color: var(--nm-border) !important;
  box-shadow: inset 2px 2px 5px var(--nm-shadow-dark), inset -1px -1px 3px var(--nm-shadow-light);
}
.form-check-input:checked {
  background-color: var(--nm-accent) !important;
  border-color: var(--nm-accent) !important;
}

/* -----------------------------------------------------------------------------
   9. nm-label – Feldbezeichnungen
   ----------------------------------------------------------------------------- */
.nm-label,
label.nm-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-muted);
  margin-bottom: .5rem;
  display: block;
}

/* -----------------------------------------------------------------------------
   10. nm-pill – Badge / Tag
   ----------------------------------------------------------------------------- */
.nm-pill {
  display: inline-block;
  border: 1px solid var(--nm-border);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--nm-muted);
  letter-spacing: .03em;
}
.nm-pill-accent { border-color: rgba(106, 169, 255, .35); color: var(--nm-accent); }
.nm-pill-success { border-color: rgba(34, 197, 94, .35); color: #86efac; }
.nm-pill-danger  { border-color: rgba(239, 68, 68, .35);  color: #fca5a5; }
.nm-pill-warning { border-color: rgba(245, 158, 11, .35); color: #fcd34d; }

/* -----------------------------------------------------------------------------
   11. nm-alert – Statusmeldungen
   ----------------------------------------------------------------------------- */
.nm-alert {
  border-radius: 14px;
  border: 1px solid;
  padding: .9rem 1.1rem;
  font-size: .9rem;
}
.nm-alert-success { background: rgba(34, 197, 94, .09);  border-color: rgba(34, 197, 94, .30);  color: #86efac; }
.nm-alert-danger  { background: rgba(239, 68, 68, .09);  border-color: rgba(239, 68, 68, .30);  color: #fca5a5; }
.nm-alert-warning { background: rgba(245, 158, 11, .09); border-color: rgba(245, 158, 11, .30); color: #fcd34d; }
.nm-alert-info    { background: rgba(106, 169, 255, .09); border-color: rgba(106, 169, 255, .30); color: #93c5fd; }

/* -----------------------------------------------------------------------------
   12. nm-hr – Trennlinie
   ----------------------------------------------------------------------------- */
.nm-hr,
hr.nm-hr {
  border: none;
  border-top: 1px solid var(--nm-border);
  margin: 1.25rem 0;
}

/* -----------------------------------------------------------------------------
   13. Tabellen (Bootstrap override)
   ----------------------------------------------------------------------------- */
.table {
  --bs-table-bg:           var(--nm-surface-2);
  --bs-table-color:        var(--nm-text);
  --bs-table-border-color: var(--nm-border);
  --bs-table-hover-bg:     rgba(106, 169, 255, .06);
  --bs-table-striped-bg:   rgba(255, 255, 255, .02);
  border-radius: 14px;
  overflow: hidden;
}
.table thead > tr > th {
  color: var(--nm-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .03);
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--nm-border);
}
.table tbody > tr > td {
  padding: .75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--nm-border);
}
.table tbody > tr:last-child > td {
  border-bottom: none;
}

/* -----------------------------------------------------------------------------
   14. nm-fab – Floating Action Button
   ----------------------------------------------------------------------------- */
.nm-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nm-accent);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 4px 20px rgba(106, 169, 255, .45), 0 2px 8px rgba(0, 0, 0, .5);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
  z-index: 1000;
  text-decoration: none;
}
.nm-fab:hover {
  transform: scale(1.1);
  background: #89bcff;
  color: #fff;
}
.nm-fab:active {
  transform: scale(.96);
}

/* -----------------------------------------------------------------------------
   15. Topbar / Header
   ----------------------------------------------------------------------------- */
.nm-topbar {
  background: var(--nm-surface);
  border-bottom: 1px solid var(--nm-border);
  box-shadow: 0 2px 12px var(--nm-shadow-dark);
  padding: .75rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.nm-topbar .ls-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--nm-text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.nm-topbar .ls-brand:hover {
  color: var(--nm-accent);
  text-decoration: none;
}
.nm-topbar .ls-nav-link {
  color: var(--nm-muted);
  font-size: .88rem;
  font-weight: 500;
  padding: .35rem .75rem;
  border-radius: 12px;
  transition: color .15s, background .15s;
  text-decoration: none;
}
.nm-topbar .ls-nav-link:hover,
.nm-topbar .ls-nav-link.active {
  color: var(--nm-text);
  background: rgba(255, 255, 255, .05);
}

/* Theme-Toggle Icons */
.nm-theme-icon-sun  { display: block; }
.nm-theme-icon-moon { display: none; }
[data-theme="light"] .nm-theme-icon-sun  { display: none; }
[data-theme="light"] .nm-theme-icon-moon { display: block; }

/* -----------------------------------------------------------------------------
   16. st-orb – Branding-Element
   ----------------------------------------------------------------------------- */
.st-orb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, #93c5fd 25%, #6aa9ff 60%, #1e3a6e 100%);
  box-shadow: 0 0 18px rgba(106, 169, 255, .45);
  display: inline-block;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   17. st-dropzone – Upload-Dropzone
   ----------------------------------------------------------------------------- */
.st-dropzone {
  background: var(--nm-surface-2);
  border-radius: 18px;
  border: 1px solid var(--nm-border);
  box-shadow:
    inset 10px 10px 18px var(--nm-shadow-dark),
    inset -8px -8px 14px var(--nm-shadow-light);
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-dropzone.st-hover {
  border-color: rgba(106, 169, 255, .45);
  box-shadow:
    inset 10px 10px 18px var(--nm-shadow-dark),
    inset -8px -8px 14px var(--nm-shadow-light),
    0 0 24px rgba(106, 169, 255, .20);
}

/* -----------------------------------------------------------------------------
   18. st-progress – Fortschrittsbalken
   ----------------------------------------------------------------------------- */
.st-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--nm-surface-2);
  box-shadow:
    inset 4px 4px 8px var(--nm-shadow-dark),
    inset -3px -3px 6px var(--nm-shadow-light);
  overflow: hidden;
}
.st-progress .progress-bar {
  background: linear-gradient(90deg, #4a87e8, #6aa9ff);
  border-radius: 999px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, .10) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .10) 50%,
    rgba(255, 255, 255, .10) 75%, transparent 75%, transparent
  );
  background-size: 1rem 1rem;
  animation: st-stripe 1s linear infinite;
}
@keyframes st-stripe {
  from { background-position: 1rem 0; }
  to   { background-position: 0 0; }
}

/* -----------------------------------------------------------------------------
   19. Layout
   ----------------------------------------------------------------------------- */
.ls-main {
  min-height: calc(100vh - 120px);
}

.ls-page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nm-text);
  letter-spacing: .02em;
  margin-bottom: .25rem;
}
.ls-page-subtitle {
  font-size: .88rem;
  color: var(--nm-muted);
}

/* Footer */
.ls-footer {
  background: var(--nm-surface);
  border-top: 1px solid var(--nm-border);
  padding: 1.5rem 0;
  margin-top: 3rem;
  font-size: .82rem;
  color: var(--nm-muted);
}
.ls-footer a {
  color: var(--nm-muted);
}
.ls-footer a:hover {
  color: var(--nm-accent);
}

/* -----------------------------------------------------------------------------
   20. Breadcrumb
   ----------------------------------------------------------------------------- */
.ls-breadcrumb .breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: .82rem;
}
.ls-breadcrumb .breadcrumb-item,
.ls-breadcrumb .breadcrumb-item a {
  color: var(--nm-muted);
}
.ls-breadcrumb .breadcrumb-item.active {
  color: var(--nm-text);
}
.ls-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--nm-border);
  content: "›";
}

/* -----------------------------------------------------------------------------
   21. WooCommerce Notices (global)
   ----------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error li,
.woocommerce-notice {
  border-radius: 14px;
  border: 1px solid;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  margin-bottom: 1rem;
  list-style: none;
}
.woocommerce-message {
  background: rgba(34, 197, 94, .09);
  border-color: rgba(34, 197, 94, .30);
  color: #86efac;
}
.woocommerce-info {
  background: rgba(106, 169, 255, .09);
  border-color: rgba(106, 169, 255, .30);
  color: #93c5fd;
}
.woocommerce-error {
  background: rgba(239, 68, 68, .09);
  border-color: rgba(239, 68, 68, .30);
  color: #fca5a5;
  padding-left: 1.1rem;
}

/* -----------------------------------------------------------------------------
   22. Sidebar
   ----------------------------------------------------------------------------- */
.ls-sidebar-sticky {
  position: sticky;
  top: 80px; /* Unterhalb der Topbar */
}

/* Chevron-Rotation beim Öffnen des Collapse */
.ls-sidebar-toggle .ls-chevron {
  transition: transform .2s ease;
  flex-shrink: 0;
}
.ls-sidebar-toggle[aria-expanded="true"] .ls-chevron {
  transform: rotate(-180deg);
}

/* Sidebar-Widget-Container */
.ls-sidebar-sticky .nm-card,
#ls-sidebar-mobile .nm-card {
  margin-bottom: .75rem;
}
.ls-sidebar-sticky .nm-card:last-child,
#ls-sidebar-mobile .nm-card:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   23. Responsive Anpassungen
   ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .nm-card {
    border-radius: 14px;
    padding: 1rem;
  }
  .nm-topbar {
    padding: .6rem 0;
  }
}