/* ============================================================
   KRANKIKOM BUTTON SYSTEM
   Requires: css/palette.css
   Paste into: Elementor → Site Settings → Custom CSS
   ============================================================ */


/* ---- SHARED TOKENS ----------------------------------------- */
:root {
  --btn-radius:     8px;
  --btn-weight:     600;
  --btn-transition: background-color 0.15s ease,
                    border-color 0.15s ease,
                    color 0.15s ease;

  --btn-disabled-bg:     var(--color-gray-50);
  --btn-disabled-color:  var(--color-gray-400);
  --btn-disabled-border: var(--color-gray-200);
}


/* ---- BASE --------------------------------------------------- */
/* Frontend direct button class + Elementor editor wrapper class */
.btn,
.elementor-widget-button[class*="kk-btn-"] .elementor-button {
  --btn-bg:           transparent;
  --btn-bg-hover:     transparent;
  --btn-bg-active:    var(--btn-bg-hover);
  --btn-color:        inherit;
  --btn-border:       var(--btn-bg);
  --btn-border-hover: var(--btn-bg-hover);
  --btn-ring:         currentColor;
  --btn-px:           20px;
  --btn-py:           12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-py) var(--btn-px);
  font-size: 14px;
  font-family: inherit;
  font-weight: var(--btn-weight) !important;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  transition: var(--btn-transition);

  background-color: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  border: 1.5px solid var(--btn-border) !important;
  border-radius: var(--btn-radius) !important;
}

.btn:hover,
.elementor-widget-button[class*="kk-btn-"] .elementor-button:hover {
  --btn-bg:     var(--btn-bg-hover);
  --btn-border: var(--btn-border-hover);
}

.btn:active,
.elementor-widget-button[class*="kk-btn-"] .elementor-button:active {
  --btn-bg: var(--btn-bg-active);
}

.btn:focus-visible,
.elementor-widget-button[class*="kk-btn-"] .elementor-button:focus-visible {
  outline: 2px solid var(--btn-ring);
  outline-offset: 3px;
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"],
.elementor-widget-button[class*="kk-btn-"] .elementor-button:disabled,
.elementor-widget-button[class*="kk-btn-"] .elementor-button.is-disabled,
.elementor-widget-button[class*="kk-btn-"] .elementor-button[aria-disabled="true"] {
  --btn-bg:     var(--btn-disabled-bg);
  --btn-color:  var(--btn-disabled-color);
  --btn-border: var(--btn-disabled-border);
  cursor: not-allowed;
  pointer-events: none;
}


/* ---- SIZES -------------------------------------------------- */
.btn-md,
.elementor-widget-button.kk-btn-md .elementor-button {
  --btn-px: 20px;
  --btn-py: 12px;
  font-size: 14px;
}

.btn-xl,
.elementor-widget-button.kk-btn-xl .elementor-button {
  --btn-px: 24px;
  --btn-py: 15px;
  font-size: 16px;
}

.btn-2xl,
.elementor-widget-button.kk-btn-2xl .elementor-button {
  --btn-px: 28px;
  --btn-py: 18px;
  font-size: 18px;
}

.btn-icon,
.elementor-widget-button.kk-btn-icon .elementor-button {
  --btn-px: var(--btn-py);
}


/* ---- VARIANTS ---------------------------------------------- */

.btn-primary,
.elementor-widget-button.kk-btn-primary .elementor-button {
  --btn-bg:        var(--color-brand-500);
  --btn-bg-hover:  var(--color-brand-600);
  --btn-bg-active: var(--color-brand-700);
  --btn-color:     var(--color-brand-900);
  --btn-ring:      var(--color-brand-700);
}

.btn-secondary,
.elementor-widget-button.kk-btn-secondary .elementor-button {
  --btn-bg:        var(--color-blue-dark-900);
  --btn-bg-hover:  var(--color-blue-dark-500);
  --btn-bg-active: var(--color-blue-dark-900);
  --btn-color:     var(--color-white);
  --btn-ring:      var(--color-white);
}

/* Plugin value: tertiary */
.btn-tertiary,
.elementor-widget-button.kk-btn-tertiary .elementor-button,
.btn-tertiary-outlined,
.elementor-widget-button.kk-btn-tertiary-outlined .elementor-button {
  --btn-bg:           transparent;
  --btn-bg-hover:     var(--color-brand-300);
  --btn-bg-active:    var(--color-brand-300);
  --btn-color:        var(--color-brand-700);
  --btn-border:       var(--color-brand-700);
  --btn-border-hover: var(--color-brand-700);
  --btn-ring:         var(--color-brand-700);
}

.btn-tertiary-ghost,
.elementor-widget-button.kk-btn-tertiary-ghost .elementor-button {
  --btn-bg:        transparent;
  --btn-bg-hover:  var(--color-gray-50);
  --btn-bg-active: var(--color-gray-50);
  --btn-color:     var(--color-gray-400);
  --btn-border:    var(--color-gray-200);
  --btn-ring:      var(--color-gray-400);
}

.btn-tertiary-color,
.elementor-widget-button.kk-btn-tertiary-color .elementor-button {
  --btn-bg:        var(--color-brand-100);
  --btn-bg-hover:  var(--color-brand-200);
  --btn-bg-active: var(--color-brand-200);
  --btn-color:     var(--color-brand-700);
  --btn-border:    var(--color-brand-100);
  --btn-ring:      var(--color-brand-700);
}

.btn-link,
.elementor-widget-button.kk-btn-link .elementor-button {
  --btn-bg:           transparent;
  --btn-bg-hover:     transparent;
  --btn-bg-active:    transparent;
  --btn-color:        var(--color-gray-600);
  --btn-border:       transparent;
  --btn-border-hover: transparent;
  --btn-ring:         var(--color-gray-600);
}

.btn-link:hover,
.elementor-widget-button.kk-btn-link .elementor-button:hover {
  text-decoration: underline;
}

.btn-link-color,
.elementor-widget-button.kk-btn-link-color .elementor-button {
  --btn-bg:           transparent;
  --btn-bg-hover:     transparent;
  --btn-bg-active:    transparent;
  --btn-color:        var(--color-brand-700);
  --btn-border:       transparent;
  --btn-border-hover: transparent;
  --btn-ring:         var(--color-brand-700);
}

.btn-link-color:hover,
.elementor-widget-button.kk-btn-link-color .elementor-button:hover {
  text-decoration: underline;
}


/* ---- ELEMENTOR INNER MARKUP -------------------------------- */
.elementor-button.btn .elementor-button-content-wrapper,
.elementor-widget-button[class*="kk-btn-"] .elementor-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.elementor-button.btn .elementor-button-icon,
.elementor-widget-button[class*="kk-btn-"] .elementor-button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
}

.elementor-button.btn .elementor-button-text,
.elementor-widget-button[class*="kk-btn-"] .elementor-button .elementor-button-text {
  line-height: 1;
}