/* ============================================
   Buttons — Premium redesign
   ============================================ */

/* Star/Favorite Button */
.btn-star {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--color-accent);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.25s var(--ease-spring, ease), box-shadow 0.2s ease;
  flex-shrink: 0;
}

.btn-star:hover {
  background: rgba(244, 197, 66, 0.1);
  border-color: var(--color-accent-border, rgba(244,197,66,0.35));
  transform: scale(1.08);
}

.btn-star:active { transform: scale(0.94); }

.btn-star.saved i { font-weight: 900; }

/* Share Button */
.btn-share {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--color-text-secondary);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.25s var(--ease-spring, ease);
  flex-shrink: 0;
}

.btn-share:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--color-border-strong, rgba(255,255,255,0.14));
  color: var(--color-accent);
  transform: scale(1.06);
}

.btn-share:active { transform: scale(0.94); }

.btn-share.copied {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}

/* Message Button */
.btn-message {
  flex: 1;
  padding: 11px 16px;
  background: var(--color-accent);
  color: #111;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s var(--ease-spring, ease),
              box-shadow 0.2s ease;
  box-shadow: 0 3px 12px rgba(244, 197, 66, 0.2);
  letter-spacing: 0.02em;
}

.btn-message:hover {
  background: var(--color-accent-hover, #ffd45e);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(244, 197, 66, 0.3);
}

.btn-message:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(244, 197, 66, 0.15);
}

/* Report Button */
.btn-report {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--color-text-secondary);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.25s var(--ease-spring, ease);
  flex-shrink: 0;
}

.btn-report:hover {
  background: rgba(244, 67, 54, 0.1);
  border-color: rgba(244, 67, 54, 0.35);
  color: #f87171;
  transform: scale(1.06);
}

.btn-report:active { transform: scale(0.94); }

/* Seller Profile Button */
.btn-profile {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--color-text-secondary);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.25s var(--ease-spring, ease);
  flex-shrink: 0;
}

.btn-profile:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--color-border-strong, rgba(255,255,255,0.14));
  color: var(--color-accent);
  transform: scale(1.06);
}

.btn-profile:active { transform: scale(0.94); }

/* Edit Button */
.btn-edit {
  flex: 1;
  padding: 11px 16px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.25s var(--ease-spring, ease);
}

.btn-edit:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--color-border-strong, rgba(255,255,255,0.14));
  transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
  padding: 10px 16px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--color-border-strong, rgba(255,255,255,0.14));
}

/* Danger Button */
.btn-danger {
  padding: 10px 16px;
  background: rgba(244, 67, 54, 0.85);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-danger:hover {
  background: #d32f2f;
  transform: translateY(-1px);
}

.btn-danger:active { transform: translateY(0); }

.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Cancel Button */
.cancel-btn {
  padding: 10px 20px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cancel-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--color-border-strong, rgba(255,255,255,0.14));
}

/* Delete Button */
.delete-btn {
  padding: 10px 20px;
  background: transparent;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.delete-btn:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: #f87171;
}