/**
 * Custom Button Effects - CSS
 * @author Kopf & Hand
 * @package Kopf & Hand Theme
 * @link https://kopf-hand.de
 *
 * BUTTON-FARBEN:
 * ff-button-1: border: color-1, color: color-1, bg: color-2
 * ff-button-2: border: color-1, color: color-2, bg: color-1
 * ff-button-3: border: color-3, color: color-3, bg: color-2
 * ff-button-4: border: color-3, color: color-2, bg: color-3
 */

/* ============================================================
   1. BASIS-STYLES - Gemeinsame Styles für alle Buttons
   ============================================================ */

[class*="ff-button-"] {
  display: inline-block;
  padding: .75em 1.25em;
  text-decoration: none;
  font-size: var(--font-size-s);
  font-weight: 700;
  font-family: var(--font-1);
  border-width: .2rem;
  border-style: solid;
  border-radius: 50rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.0);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

/* Individuelle Farben */
.ff-button-1 {
  border-color: var(--color-1, darkblue);
  color: var(--color-1, darkblue);
  background: var(--color-2, white);
}

.ff-button-2 {
  border-color: var(--color-1, darkblue);
  color: var(--color-2, white);
  background: var(--color-1, darkblue);
}

.ff-button-3 {
  border-color: var(--color-3, red);
  color: var(--color-3, red);
  background: var(--color-2, white);
}

.ff-button-4 {
  border-color: var(--color-3, red);
  color: var(--color-2, white);
  background: var(--color-3, red);
}

/* Icon-Farben */
.ff-button-1 i,
.ff-button-1 svg {
  color: var(--color-1, darkblue);
  fill: var(--color-1, darkblue);
}

.ff-button-2 i,
.ff-button-2 svg {
  color: var(--color-2, white);
  fill: var(--color-2, white);
}

.ff-button-3 i,
.ff-button-3 svg {
  color: var(--color-3, red);
  fill: var(--color-3, red);
}

.ff-button-4 i,
.ff-button-4 svg {
  color: var(--color-2, white);
  fill: var(--color-2, white);
}

/* ============================================================
   2. DIVI BUTTON OVERRIDES
   ============================================================ */

.et_pb_button[class*="ff-button-"],
a.et_pb_button[class*="ff-button-"] {
  all: unset !important;
  display: inline-block !important;
  padding: .75em 1.25em !important;
  text-decoration: none !important;
  font-size: var(--font-size-s) !important;
  font-weight: 700 !important;
  font-family: var(--font-1) !important;
  border-width: .2rem !important;
  border-style: solid !important;
  border-radius: 50rem !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.0) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.et_pb_button.ff-button-1,
a.et_pb_button.ff-button-1 {
  border-color: var(--color-1, darkblue) !important;
  color: var(--color-1, darkblue) !important;
  background: var(--color-2, white) !important;
}

.et_pb_button.ff-button-2,
a.et_pb_button.ff-button-2 {
  border-color: var(--color-1, darkblue) !important;
  color: var(--color-2, white) !important;
  background: var(--color-1, darkblue) !important;
}

.et_pb_button.ff-button-3,
a.et_pb_button.ff-button-3 {
  border-color: var(--color-3, red) !important;
  color: var(--color-3, red) !important;
  background: var(--color-2, white) !important;
}

.et_pb_button.ff-button-4,
a.et_pb_button.ff-button-4 {
  border-color: var(--color-3, red) !important;
  color: var(--color-2, white) !important;
  background: var(--color-3, red) !important;
}

/* HOVER STATES */
.et_pb_button[class*="ff-button-"]:hover,
a.et_pb_button[class*="ff-button-"]:hover {
  transform: none !important;
  padding: .75em 1.25em !important;
}

/* ============================================================
   3. PSEUDO-ELEMENT BLOCKIERUNG
   ============================================================ */

.et_pb_button[class*="ff-button-"]:before,
a.et_pb_button[class*="ff-button-"]:before,
.et_pb_button[class*="ff-button-"]:after,
a.et_pb_button[class*="ff-button-"]:after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   4. BUTTON-TEXT STYLES
   ============================================================ */

[class*="ff-button-"] .button-text {
  display: inline-block !important;
  transition: transform 0.2s ease-out !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   5. VISUAL BUILDER STYLES
   ============================================================ */

.et-fb [class*="ff-button"] {
  all: revert !important;
  display: inline-block !important;
  padding: 0.75em 1.25em !important;
  border: 2px dashed #ccc !important;
  background: #f0f0f0 !important;
  color: #333 !important;
  text-decoration: none !important;
  border-radius: 50rem !important;
}

/* ============================================================
   6. DOWNLOAD BUTTON (basiert auf ff-button-3)
   ============================================================ */

.ff-button-download {
  border-color: var(--color-3, red);
  color: var(--color-3, red);
  background: var(--color-2, white);
}

/* Download Icon im Button */
.ff-download-icon {
  width: 1em;
  height: 1em;
  margin-right: .33em;
  vertical-align: middle;
  fill: currentColor;
}

/* Divi Override für Download-Button */
.et_pb_button.ff-button-download,
a.et_pb_button.ff-button-download {
  border-color: var(--color-3, red) !important;
  color: var(--color-3, red) !important;
  background: var(--color-2, white) !important;
}

/* Divi: kein ::before für Download-Button */
.et_pb_button.ff-button-download::before,
a.et_pb_button.ff-button-download::before {
  display: none !important;
  content: none !important;
}