/*
 * Global button styles — two independently configurable variants,
 * each activated ONLY via an explicit CSS class:
 *
 *   .im-btn-default  – green gradient pill CTA (matches "Więcej" read-more style)
 *   .im-btn-alt      – orange gradient pill (inverted)
 *
 * ⚠ These styles are NOT applied automatically to generic buttons.
 *   You must manually add .im-btn-default or .im-btn-alt in
 *   Divi → module → Advanced → CSS Class.
 *
 * ⚠ Scoped to body:not(.et-fb) so Divi Visual Builder is not affected.
 *
 * Padding is controllable via --im-btn-default-padding-y / -x (admin panel).
 */

:root {
  /* ---- Default variant (green → orange) ---- */
  --im-btn-default-padding-y: 0.9rem;
  --im-btn-default-padding-x: 1.5rem;
  --im-btn-default-font-size: 14px;
  --im-btn-default-font-weight: 700;

  /* ---- Alt variant (orange → green) ---- */
  --im-btn-alt-padding-y: 0.9rem;
  --im-btn-alt-padding-x: 1.5rem;
  --im-btn-alt-font-size: 14px;
  --im-btn-alt-font-weight: 700;
}

/* ==================================================================
   BUTTON 1 — .im-btn-default  (green gradient → orange on hover)
   Matches the "Więcej" read-more pill button style.
   ================================================================== */

body:not(.et-fb) .im-btn-default {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  padding: var(--im-btn-default-padding-y) var(--im-btn-default-padding-x) !important;
  border: 0 !important;
  border-radius: 3rem !important;
  background: linear-gradient(135deg, var(--imc-green, #9bd818) 0%, #b7ea53 100%) !important;
  color: var(--imc-on-green, #1a1a1a) !important;
  font-family: var(--imc-font-header, "Quicksand", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--im-btn-default-font-size) !important;
  font-weight: var(--im-btn-default-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: 1px;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .2) !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}

/* Arrow icon */
body:not(.et-fb) .im-btn-default::after {
  content: "\2192";
  font-size: .95em;
  transform: translateX(0);
  transition: transform 220ms ease;
}

/* Hover & focus */
body:not(.et-fb) .im-btn-default:hover,
body:not(.et-fb) .im-btn-default:focus-visible {
  background: linear-gradient(135deg, var(--imc-orange, #ff9d00) 0%, #ffc04d 100%) !important;
  color: var(--imc-on-orange, #1a1a1a) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 157, 0, .35), 0 8px 20px rgba(17, 24, 39, .15) !important;
}

body:not(.et-fb) .im-btn-default:hover::after,
body:not(.et-fb) .im-btn-default:focus-visible::after {
  transform: translateX(3px);
}

body:not(.et-fb) .im-btn-default:focus-visible {
  outline: 2px solid #111827 !important;
  outline-offset: 3px;
}

/* ==================================================================
   BUTTON 2 — .im-btn-alt  (orange gradient → green on hover)
   Inverted colour scheme of Button 1.
   ================================================================== */

body:not(.et-fb) .im-btn-alt {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  padding: var(--im-btn-alt-padding-y) var(--im-btn-alt-padding-x) !important;
  border: 0 !important;
  border-radius: 3rem !important;
  background: linear-gradient(135deg, var(--imc-orange, #ff9d00) 0%, #ffc04d 100%) !important;
  color: var(--imc-on-orange, #1a1a1a) !important;
  font-family: var(--imc-font-header, "Quicksand", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--im-btn-alt-font-size) !important;
  font-weight: var(--im-btn-alt-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: 1px;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(255, 157, 0, .25) !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}

/* Arrow icon */
body:not(.et-fb) .im-btn-alt::after {
  content: "\2192";
  font-size: .95em;
  transform: translateX(0);
  transition: transform 220ms ease;
}

/* Hover & focus */
body:not(.et-fb) .im-btn-alt:hover,
body:not(.et-fb) .im-btn-alt:focus-visible {
  background: linear-gradient(135deg, var(--imc-green, #9bd818) 0%, #b7ea53 100%) !important;
  color: var(--imc-on-green, #1a1a1a) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(155, 216, 24, .35), 0 8px 20px rgba(17, 24, 39, .15) !important;
}

body:not(.et-fb) .im-btn-alt:hover::after,
body:not(.et-fb) .im-btn-alt:focus-visible::after {
  transform: translateX(3px);
}

body:not(.et-fb) .im-btn-alt:focus-visible {
  outline: 2px solid #111827 !important;
  outline-offset: 3px;
}

/* ==================================================================
   DISABLED STATE
   ================================================================== */

body:not(.et-fb) .im-btn-default[disabled],
body:not(.et-fb) .im-btn-default[aria-disabled="true"],
body:not(.et-fb) .im-btn-alt[disabled],
body:not(.et-fb) .im-btn-alt[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
  box-shadow: none !important;
}