/* -----------------------------
 * Bottle-Trade Buttons
 * -----------------------------*/

/* --- Modernes Button-Design: größer, flach, abgerundet, klare Farben, sanfte Hover-Effekte --- */
.bt-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    border: none;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px 0 rgba(60,60,60,0.07);
    background: white;
}

.bt-button--primary {
    background: linear-gradient(90deg, #2ecc40 0%, #27ae60 100%);
    color: #fff;
    box-shadow: 0 2px 8px 0 rgba(46,204,64,0.10);
}

.bt-button--primary:hover, .bt-button--primary:focus {
    background: linear-gradient(90deg, #27ae60 0%, #2ecc40 100%);
    color: #fff;
    box-shadow: 0 4px 16px 0 rgba(46,204,64,0.18);
    transform: translateY(-2px) scale(1.03);
}

.bt-button--secondary {
    background: linear-gradient(90deg, #00582A 0%, #008040 100%);
    color: #fff;
    box-shadow: 0 2px 8px 0 rgba(0,88,42,0.10);
}

.bt-button--secondary:hover, .bt-button--secondary:focus {
    background: linear-gradient(90deg, #008040 0%, #00582A 100%);
    color: #fff;
    box-shadow: 0 4px 16px 0 rgba(0,88,42,0.18);
    transform: translateY(-2px) scale(1.03);
}

.bt-button--danger {
    background: linear-gradient(90deg, #8B0000 0%, #c0392b 100%);
    color: #fff;
    box-shadow: 0 2px 8px 0 rgba(139,0,0,0.10);
}

.bt-button--danger:hover, .bt-button--danger:focus {
    background: linear-gradient(90deg, #c0392b 0%, #8B0000 100%);
    color: #fff;
    box-shadow: 0 4px 16px 0 rgba(139,0,0,0.18);
    transform: translateY(-2px) scale(1.03);
}

.bt-button--small {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

.bt-button--large {
    padding: 1.1rem 2.2rem;
    font-size: 1.18rem;
}

.bt-button--full {
    display: block;
    width: 100%;
}

.bt-button:disabled,
.bt-button--disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.bt-button--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bt-button--icon .bt-button__icon {
    margin-right: 0.5rem;
}

.bt-button--icon-only {
    padding: 0.75rem;
    line-height: 1;
}

/* Aliasing für alte Klassen (Abwärtskompatibilität) */
.btn,
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.btn-primary,
.button--primary {
    background-color: var(--wine-accent, #8B0000);
    color: white;
}

.btn-primary:hover,
.button--primary:hover {
    background-color: var(--wine-hover, #6d0000);
}

.btn-secondary,
.button--secondary {
    background-color: #f8f0f0;
    color: var(--wine-accent, #8B0000);
    border-color: var(--wine-accent, #8B0000);
}

.btn-secondary:hover,
.button--secondary:hover {
    background-color: #f0e5e5;
}

.btn-success,
.button--success {
    background-color: #28a745;
    color: white;
}

.btn-danger,
.button--danger {
    background-color: #dc3545;
    color: white;
}

/* WW-Button-Styles übernehmen alle Eigenschaften der modernen BT-Buttons */
.ww-button { @extend .bt-button; }
.ww-button--danger { @extend .bt-button--danger; }
.ww-button--success { @extend .bt-button--primary; }
.ww-button--sm { @extend .bt-button--small; }

/* Falls @extend nicht unterstützt wird, hier die Fallback-Variante: */
.ww-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  border: none;
  font-size: 1.05rem;
  box-shadow: 0 2px 8px 0 rgba(60,60,60,0.07);
  background: white;
}
.ww-button--danger {
  background: linear-gradient(90deg, #8B0000 0%, #c0392b 100%);
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(139,0,0,0.10);
}
.ww-button--danger:hover, .ww-button--danger:focus {
  background: linear-gradient(90deg, #c0392b 0%, #8B0000 100%);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(139,0,0,0.18);
  transform: translateY(-2px) scale(1.03);
}
.ww-button--success {
  background: linear-gradient(90deg, #2ecc40 0%, #27ae60 100%);
  color: #fff;
  box-shadow: 0 2px 8px 0 rgba(46,204,64,0.10);
}
.ww-button--success:hover, .ww-button--success:focus {
  background: linear-gradient(90deg, #27ae60 0%, #2ecc40 100%);
  color: #fff;
  box-shadow: 0 4px 16px 0 rgba(46,204,64,0.18);
  transform: translateY(-2px) scale(1.03);
}
.ww-button--sm {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}