/* ═══════════════════════════════════════════
   Brühwerk Component Library v1.0
   BEM with .bw- prefix · All states defined
   ═══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   BUTTONS — .bw-btn
   ══════════════════════════════════════════ */

.bw-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: var(--bw-font-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--bw-r-sm) !important;
  cursor: pointer !important;
  transition: all var(--bw-t-fast) !important;
  white-space: nowrap !important;
  padding: 14px 28px !important;
}

/* Sizes */
.bw-btn--sm { padding: 10px 20px !important; font-size: 13px !important; }
.bw-btn--lg { padding: 18px 36px !important; font-size: 16px !important; }

/* Primary */
.bw-btn--primary {
  background: var(--bw-accent) !important;
  color: var(--bw-accent-ink) !important;
  box-shadow: 0 4px 16px rgba(200,149,108,0.25) !important;
}
.bw-btn--primary:hover {
  background: var(--bw-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(200,149,108,0.35) !important;
}
.bw-btn--primary:active { transform: translateY(0) !important; }

/* Secondary */
.bw-btn--secondary {
  background: var(--bw-bg-raised) !important;
  color: var(--bw-text) !important;
  border: 1px solid var(--bw-border-strong) !important;
}
.bw-btn--secondary:hover {
  border-color: var(--bw-accent) !important;
  color: var(--bw-accent) !important;
}

/* Ghost */
.bw-btn--ghost {
  background: transparent !important;
  color: var(--bw-text-muted) !important;
}
.bw-btn--ghost:hover { color: var(--bw-text) !important; }

/* Disabled */
.bw-btn[disabled],
.bw-btn--disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Loading */
.bw-btn--loading {
  position: relative !important;
  color: transparent !important;
  pointer-events: none !important;
}
.bw-btn--loading::after {
  content: "" !important;
  position: absolute !important;
  width: 18px !important; height: 18px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: bw-spin 0.6s linear infinite !important;
}
@keyframes bw-spin { to { transform: rotate(360deg); } }

/* Focus */
.bw-btn:focus-visible {
  outline: 2px solid var(--bw-accent) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════
   CARDS — .bw-card
   ══════════════════════════════════════════ */

.bw-card {
  background: var(--bw-bg-elevated) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: var(--bw-r-lg) !important;
  overflow: hidden !important;
  transition: transform var(--bw-t-normal), box-shadow var(--bw-t-normal), border-color var(--bw-t-normal) !important;
}
.bw-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--bw-shadow-md) !important;
  border-color: var(--bw-border-strong) !important;
}
.bw-card--elevated {
  background: var(--bw-bg-raised) !important;
  box-shadow: var(--bw-shadow-sm) !important;
}
.bw-card--highlighted {
  border-color: var(--bw-accent) !important;
  box-shadow: 0 0 0 1px var(--bw-accent), var(--bw-shadow-md) !important;
}
.bw-card__body { padding: 20px 24px !important; }
.bw-card__footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--bw-border) !important;
}

/* ══════════════════════════════════════════
   FORM FIELDS — .bw-field
   ══════════════════════════════════════════ */

.bw-field { margin-bottom: 20px !important; }
.bw-field__label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bw-text-muted) !important;
  margin-bottom: 6px !important;
}
.bw-field__label .bw-field__req { color: var(--bw-accent) !important; }

.bw-field__input,
.bw-field select,
.bw-field textarea {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: var(--bw-r-md) !important;
  padding: 14px 16px !important;
  color: var(--bw-text) !important;
  font-size: 15px !important;
  font-family: var(--bw-font-sans) !important;
  transition: border-color var(--bw-t-fast), box-shadow var(--bw-t-fast) !important;
}
.bw-field__input:focus,
.bw-field select:focus,
.bw-field textarea:focus {
  outline: none !important;
  border-color: var(--bw-accent) !important;
  box-shadow: 0 0 0 3px rgba(200,149,108,0.15) !important;
}
.bw-field--error .bw-field__input {
  border-color: var(--bw-error) !important;
}
.bw-field__error {
  font-size: 12px !important;
  color: var(--bw-error) !important;
  margin-top: 4px !important;
}

/* Checkbox & Radio */
.bw-field__check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
}
.bw-field__check input[type="checkbox"],
.bw-field__check input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important; height: 20px !important;
  min-width: 20px !important;
  border: 2px solid rgba(255,255,255,0.25) !important;
  background: transparent !important;
  cursor: pointer !important;
  margin: 1px 0 0 !important;
}
.bw-field__check input[type="checkbox"] { border-radius: 5px !important; }
.bw-field__check input[type="radio"] { border-radius: 50% !important; }
.bw-field__check input:checked {
  border-color: var(--bw-accent) !important;
  background: var(--bw-accent) !important;
}
.bw-field__check input[type="radio"]:checked {
  background: transparent !important;
  box-shadow: inset 0 0 0 5px var(--bw-accent) !important;
}

/* ══════════════════════════════════════════
   BADGES — .bw-badge
   ══════════════════════════════════════════ */

.bw-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  line-height: 1.2 !important;
}
.bw-badge--default {
  background: rgba(255,255,255,0.08) !important;
  color: var(--bw-text-muted) !important;
}
.bw-badge--accent {
  background: rgba(200,149,108,0.15) !important;
  color: var(--bw-accent) !important;
}
.bw-badge--success {
  background: rgba(110,211,154,0.12) !important;
  color: var(--bw-success) !important;
}
.bw-badge--warning {
  background: rgba(232,182,71,0.12) !important;
  color: var(--bw-warning) !important;
}
.bw-badge--error {
  background: rgba(226,109,109,0.12) !important;
  color: var(--bw-error) !important;
}

/* ══════════════════════════════════════════
   CHIP — .bw-chip
   ══════════════════════════════════════════ */

.bw-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: var(--bw-bg-raised) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  color: var(--bw-text-muted) !important;
  cursor: pointer !important;
  transition: all var(--bw-t-fast) !important;
}
.bw-chip:hover { border-color: var(--bw-accent) !important; color: var(--bw-accent) !important; }
.bw-chip--active {
  background: rgba(200,149,108,0.1) !important;
  border-color: var(--bw-accent) !important;
  color: var(--bw-accent) !important;
}
.bw-chip__remove {
  width: 14px !important; height: 14px !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
}
.bw-chip__remove:hover { opacity: 1 !important; }

/* ══════════════════════════════════════════
   RATING — .bw-rating
   ══════════════════════════════════════════ */

.bw-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.bw-rating__stars {
  color: #e8b647 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
}
.bw-rating__count {
  font-size: 13px !important;
  color: var(--bw-text-faint) !important;
  margin-left: 4px !important;
}

/* ══════════════════════════════════════════
   NOTICE / TOAST — .bw-notice
   ══════════════════════════════════════════ */

.bw-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-radius: var(--bw-r-md) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.bw-notice--info {
  background: rgba(200,149,108,0.08) !important;
  border: 1px solid rgba(200,149,108,0.2) !important;
  color: var(--bw-text-muted) !important;
}
.bw-notice--success {
  background: rgba(110,211,154,0.08) !important;
  border: 1px solid rgba(110,211,154,0.2) !important;
  color: var(--bw-success) !important;
}
.bw-notice--error {
  background: rgba(226,109,109,0.08) !important;
  border: 1px solid rgba(226,109,109,0.2) !important;
  color: var(--bw-error) !important;
}
.bw-notice__icon { flex-shrink: 0 !important; margin-top: 1px !important; }

/* ══════════════════════════════════════════
   ACCORDION — .bw-accordion
   ══════════════════════════════════════════ */

.bw-accordion { border-top: 1px solid var(--bw-border) !important; }
.bw-accordion__item { border-bottom: 1px solid var(--bw-border) !important; }
.bw-accordion__trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 18px 0 !important;
  background: none !important;
  border: none !important;
  color: var(--bw-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: var(--bw-font-sans) !important;
}
.bw-accordion__trigger:hover { color: var(--bw-accent) !important; }
.bw-accordion__icon {
  width: 20px !important; height: 20px !important;
  transition: transform var(--bw-t-fast) !important;
  flex-shrink: 0 !important;
  color: var(--bw-text-faint) !important;
}
.bw-accordion__item.is-open .bw-accordion__icon { transform: rotate(180deg) !important; }
.bw-accordion__body {
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height var(--bw-t-normal) !important;
}
.bw-accordion__item.is-open .bw-accordion__body { max-height: 500px !important; }
.bw-accordion__content {
  padding: 0 0 20px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--bw-text-muted) !important;
}

/* ══════════════════════════════════════════
   TABS — .bw-tabs
   ══════════════════════════════════════════ */

.bw-tabs__nav {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--bw-border) !important;
  margin-bottom: 24px !important;
}
.bw-tabs__tab {
  padding: 12px 24px !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--bw-text-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all var(--bw-t-fast) !important;
  font-family: var(--bw-font-sans) !important;
}
.bw-tabs__tab:hover { color: var(--bw-text) !important; }
.bw-tabs__tab.is-active {
  color: var(--bw-accent) !important;
  border-bottom-color: var(--bw-accent) !important;
}

/* ══════════════════════════════════════════
   BREADCRUMB — .bw-breadcrumb
   ══════════════════════════════════════════ */

.bw-breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--bw-text-faint) !important;
}
.bw-breadcrumb a {
  color: var(--bw-text-faint) !important;
  text-decoration: none !important;
  transition: color var(--bw-t-fast) !important;
}
.bw-breadcrumb a:hover { color: var(--bw-accent) !important; }
.bw-breadcrumb__sep { opacity: 0.4 !important; }
.bw-breadcrumb__current { color: var(--bw-text-muted) !important; }

/* ══════════════════════════════════════════
   TRUST BAR — .bw-usp
   ══════════════════════════════════════════ */

.bw-usp {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 16px 0 !important;
}
.bw-usp__item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--bw-text-muted) !important;
  white-space: nowrap !important;
}
.bw-usp__icon {
  width: 18px !important; height: 18px !important;
  color: var(--bw-success) !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════
   DRAWER — .bw-drawer
   ══════════════════════════════════════════ */

.bw-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity var(--bw-t-normal), visibility var(--bw-t-normal) !important;
}
.bw-drawer-backdrop.is-open { opacity: 1 !important; visibility: visible !important; }

.bw-drawer {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: min(420px, 90vw) !important;
  background: var(--bw-bg-elevated) !important;
  border-left: 1px solid var(--bw-border) !important;
  z-index: 9999 !important;
  transform: translateX(100%) !important;
  transition: transform var(--bw-t-normal) !important;
  display: flex !important;
  flex-direction: column !important;
}
.bw-drawer.is-open { transform: translateX(0) !important; }
.bw-drawer__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--bw-border) !important;
}
.bw-drawer__close {
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border: none !important;
  color: var(--bw-text-muted) !important; cursor: pointer !important;
  border-radius: var(--bw-r-sm) !important;
  transition: color var(--bw-t-fast) !important;
}
.bw-drawer__close:hover { color: var(--bw-text) !important; }
.bw-drawer__body { flex: 1 !important; overflow-y: auto !important; padding: 24px !important; }
.bw-drawer__footer {
  padding: 20px 24px !important;
  border-top: 1px solid var(--bw-border) !important;
}

/* ══════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════ */

.bw-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.bw-container { max-width: var(--bw-container) !important; margin-inline: auto !important; padding-inline: 24px !important; }
.bw-container--narrow { max-width: var(--bw-container-narrow) !important; }
.bw-text-center { text-align: center !important; }
.bw-text-accent { color: var(--bw-accent) !important; }
.bw-text-muted { color: var(--bw-text-muted) !important; }
.bw-text-serif { font-family: var(--bw-font-serif) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}