/* Bootstrap Bridge for existing ds-* markup.
 * Goal: keep existing HTML, render in a serious Bootstrap-like UI.
 */

:root {
  --gs-brand: #0d6efd; /* Bootstrap primary */
  --gs-success: #198754;
  --gs-warning: #ffc107;
  --gs-danger: #dc3545;
  --gs-muted: #6c757d;
  --gs-bg: #f8f9fa;
  --gs-card-bg: #ffffff;
  --gs-border: rgba(0,0,0,.125);
  --gs-radius: .75rem;
}

body.ds-page {
  background: var(--gs-bg);
  color: #212529;
}

.ds-page__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

.ds-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.ds-header__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
}

.ds-header__meta {
  margin: 6px 0 0;
  color: var(--gs-muted);
}

.ds-card {
  background: var(--gs-card-bg);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  padding: 16px;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.03);
}

.ds-card__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

.ds-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ds-stack { display: grid; gap: 14px; }
.ds-stack--tight { display: grid; gap: 10px; }
.ds-muted { color: var(--gs-muted); }

.ds-input {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .5rem;
}

.ds-input:focus {
  outline: 0;
  border-color: rgba(13,110,253,.55);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}

.ds-form-label {
  display: block;
  margin-bottom: .25rem;
  font-weight: 600;
  font-size: .95rem;
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .5rem .85rem;
  border-radius: .6rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.ds-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.2);
}

.ds-btn:disabled,
.ds-btn[disabled],
.ds-btn[aria-disabled="true"] {
  opacity: .65;
  cursor: not-allowed;
}

.ds-btn--primary { background: var(--gs-brand); border-color: var(--gs-brand); color: #fff; }
.ds-btn--primary:hover { background: #0b5ed7; border-color: #0a58ca; color: #fff; }

.ds-btn--secondary { background: #212529; border-color: #212529; color: #fff; }
.ds-btn--secondary:hover { background: #1a1e21; border-color: #1a1e21; color: #fff; }

.ds-btn--orange { background: var(--gs-warning); border-color: var(--gs-warning); color: #212529; }
.ds-btn--orange:hover { background: #ffca2c; border-color: #ffc720; color: #212529; }

.ds-btn--purple { background: #6f42c1; border-color: #6f42c1; color: #fff; }
.ds-btn--purple:hover { background: #5a35a3; border-color: #563099; color: #fff; }

.ds-btn--danger { background: var(--gs-danger); border-color: var(--gs-danger); color: #fff; }
.ds-btn--danger:hover { background: #bb2d3b; border-color: #b02a37; color: #fff; }

.ds-btn--ghost { background: #f1f3f5; border-color: #e9ecef; color: #212529; }
.ds-btn--ghost:hover { background: #e9ecef; border-color: #dee2e6; color: #212529; }

.ds-alert {
  border-radius: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--gs-border);
}
.ds-alert--success { background: rgba(25,135,84,.08); border-color: rgba(25,135,84,.25); }
.ds-alert--info { background: rgba(13,110,253,.08); border-color: rgba(13,110,253,.25); }
.ds-alert--danger { background: rgba(220,53,69,.08); border-color: rgba(220,53,69,.25); }

.ds-badge {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.08);
}
.ds-badge--success { background: #34c759; color: #fff; border: 1px solid transparent; }
.ds-badge--danger { background: #ff3b30; color: #fff; border: 1px solid transparent; }
.ds-badge--muted { background: #8e8e93; color: #fff; border: 1px solid transparent; }
.ds-badge--orange { background: #ff9500; color: #fff; border: 1px solid transparent; }
.ds-badge--purple { background: #af52de; color: #fff; border: 1px solid transparent; }

.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th, .ds-table td { padding: .6rem .65rem; vertical-align: top; }
.ds-table thead th { border-bottom: 2px solid rgba(0,0,0,.08); color: var(--gs-muted); font-size: .9rem; }
.ds-table tbody tr { border-top: 1px solid rgba(0,0,0,.06); }

/* keep existing modal styles in gutscheinshop-ui.css; just ensure font colors */
.gs-modal { color: #212529; }