/* ════════════════════════════════════════════════════════════════════════
   02-buttons.css — Tlačítka

   Použití na Divi Button modulu:
   - Přidat v Advanced tab → CSS Class: btn-primary  (nebo btn-secondary, btn-soft)
   - V Design tab nenastavovat NIC kromě textu
   - Divi default vzhled bude přepsán následujícími styly

   Pro vlastní HTML tlačítka (Code module) použít <button class="btn btn-primary">…
   ════════════════════════════════════════════════════════════════════════ */

/* ── Base třída pro všechna tlačítka ────────────────────────────── */
.btn,
.et_pb_button.btn,
.et_pb_button_module_wrapper .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-base) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  line-height: 1 !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap;
  transition: all var(--t-base);
  border: 0 !important;
  text-decoration: none;
  cursor: pointer;
}

/* Divi Button modul — vypnout výchozí styly */
.et_pb_button.btn,
.et_pb_button_module_wrapper .et_pb_button {
  background: transparent;
}
.et_pb_button.btn::after,
.et_pb_button_module_wrapper .et_pb_button::after {
  display: none !important; /* Divi šipka po hoveru — pryč */
}

/* SVG ikona uvnitř tlačítka */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Primary — růžová CTA ────────────────────────────────────────── */
.btn-primary,
.et_pb_button.btn-primary {
  background: var(--pink) !important;
  color: #fff !important;
  box-shadow: var(--shadow-pink);
  border: 0 !important;
}
.btn-primary:hover,
.et_pb_button.btn-primary:hover {
  background: var(--pink-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-pink-h);
}

/* ── Secondary / Ghost — žluté ───────────────────────────────────── */
.btn-secondary,
.btn-ghost,
.et_pb_button.btn-secondary,
.et_pb_button.btn-ghost {
  background: var(--yellow-cta) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--yellow-cta) !important;
  box-shadow: none;
}
.btn-secondary:hover,
.btn-ghost:hover,
.et_pb_button.btn-secondary:hover,
.et_pb_button.btn-ghost:hover {
  background: var(--yellow-hover) !important;
  border-color: var(--yellow-hover) !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-yellow);
}

/* ── Soft — tichá růžová varianta ────────────────────────────────── */
.btn-soft,
.et_pb_button.btn-soft {
  background: var(--pink-50) !important;
  color: var(--pink) !important;
  border: 0 !important;
}
.btn-soft:hover,
.et_pb_button.btn-soft:hover {
  background: var(--pink) !important;
  color: #fff !important;
}

/* ── Outline (bílá s pink obrysem, pro hero na žluté pozadí) ─────── */
.btn-outline,
.et_pb_button.btn-outline {
  background: #fff !important;
  color: var(--pink) !important;
  border: 1.5px solid var(--pink) !important;
}
.btn-outline:hover,
.et_pb_button.btn-outline:hover {
  background: var(--pink) !important;
  color: #fff !important;
}

/* ── Velikosti — modifikátory ───────────────────────────────────── */
.btn-sm  { padding: 9px 16px !important; font-size: 13px !important; }
.btn-lg  { padding: 16px 32px !important; font-size: 15.5px !important; }
.btn-xl  { padding: 18px 36px !important; font-size: 17px !important; height: 54px; }

/* ── Plná šířka ──────────────────────────────────────────────────── */
.btn-block,
.btn-full {
  width: 100% !important;
  justify-content: center;
}

/* ── Disabled state ──────────────────────────────────────────────── */
.btn:disabled,
.btn.is-disabled,
.et_pb_button.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}