:root {
  --hron-blue-primary: #2A5EF6;
  --hron-blue-dark: #064CBE;
  --hron-orange-primary: #FF9F00;
  --hron-orange-dark: #FA7F00;
  --hron-red-primary: #FF7000;
  --hron-red-dark: #F14E0F;
  --hron-teal-primary: #00C897;
  --hron-teal-dark: #00A37A;
  --hron-old-demo: #f06f63;
  --hron-old-demo-dark: #d65a4e;
  --hron-navy: #08153A;
  --hron-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.hron-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 12px 24px;
  font-family: var(--hron-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none;
  overflow: hidden;
  letter-spacing: 0.3px;
  z-index: 1;
  /* Prevent shrinking */
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 100%;
}

/* Hover, Active, Focus, Visited - Fix for Blue Text Issue */
.hron-btn:hover,
.hron-btn:focus,
.hron-btn:active,
.hron-btn:visited {
  color: #fff;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

.hron-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.hron-btn:active {
  transform: translateY(0);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Text Wrapper */
.hron-btn-text {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  display: inline; /* Keep flow but allow reset */
}

/* Icon Styles */
.hron-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0; /* Prevent icon shrinking */
}

/* Gap handles spacing now, removing margins to prevent double spacing */
.hron-icon-right { margin-left: 0; }
.hron-icon-left { margin-right: 0; }

.hron-btn-icon svg {
  width: 1.25em;
  height: 1.25em;
  display: block;
}

.hron-btn-icon img {
    height: 1.4em;
    width: auto;
    display: block;
    background: transparent;
    max-width: none;
    margin: 0; /* Reset theme margins */
    padding: 0;
}

/* Optional: If we want white icons on solid buttons, we can apply a different filter
   or trust the assets are white/contrasting.
   If the assets are full color, we show them full color.
*/

/* Outline Variants: Keep original colors or adjust if needed */
[class*="hron-btn-outline"] .hron-btn-icon img {
    filter: none; 
}

/* Colors (Gradients) */
.hron-btn-recruit {
  background-image: linear-gradient(135deg, var(--hron-blue-primary) 0%, var(--hron-blue-dark) 100%);
}

.hron-btn-boarding {
  background-image: linear-gradient(135deg, var(--hron-orange-primary) 0%, var(--hron-orange-dark) 100%);
}

.hron-btn-staff {
  background-image: linear-gradient(135deg, var(--hron-red-primary) 0%, var(--hron-red-dark) 100%);
}

.hron-btn-wellbeing {
  background-image: linear-gradient(135deg, var(--hron-teal-primary) 0%, var(--hron-teal-dark) 100%);
}

.hron-btn-old-demo {
  background-image: linear-gradient(135deg, var(--hron-old-demo) 0%, var(--hron-old-demo-dark) 100%);
}

.hron-btn-dark {
  background-color: var(--hron-navy);
  border-color: var(--hron-navy);
}

.hron-btn-outline-recruit,
.hron-btn-outline-recruit:visited,
.hron-btn-outline-recruit:focus {
  color: var(--hron-blue-primary);
  background: transparent;
  border: 2px solid var(--hron-blue-primary);
}
.hron-btn-outline-recruit:hover,
.hron-btn-outline-recruit:active {
  background: var(--hron-blue-primary);
  color: #fff;
  border-color: var(--hron-blue-primary);
}

.hron-btn-outline-boarding,
.hron-btn-outline-boarding:visited,
.hron-btn-outline-boarding:focus {
  color: var(--hron-orange-primary);
  background: transparent;
  border: 2px solid var(--hron-orange-primary);
}
.hron-btn-outline-boarding:hover,
.hron-btn-outline-boarding:active {
  background: var(--hron-orange-primary);
  color: #fff;
  border-color: var(--hron-orange-primary);
}

.hron-btn-outline-staff,
.hron-btn-outline-staff:visited,
.hron-btn-outline-staff:focus {
  color: var(--hron-red-primary);
  background: transparent;
  border: 2px solid var(--hron-red-primary);
}
.hron-btn-outline-staff:hover,
.hron-btn-outline-staff:active {
  background: var(--hron-red-primary);
  color: #fff;
  border-color: var(--hron-red-primary);
}

.hron-btn-outline-wellbeing,
.hron-btn-outline-wellbeing:visited,
.hron-btn-outline-wellbeing:focus {
  color: var(--hron-teal-primary);
  background: transparent;
  border: 2px solid var(--hron-teal-primary);
}
.hron-btn-outline-wellbeing:hover,
.hron-btn-outline-wellbeing:active {
  background: var(--hron-teal-primary);
  color: #fff;
  border-color: var(--hron-teal-primary);
}

.hron-btn-outline-old-demo,
.hron-btn-outline-old-demo:visited,
.hron-btn-outline-old-demo:focus {
  color: var(--hron-old-demo);
  background: transparent;
  border: 2px solid var(--hron-old-demo);
}
.hron-btn-outline-old-demo:hover,
.hron-btn-outline-old-demo:active {
  background: var(--hron-old-demo);
  color: #fff;
  border-color: var(--hron-old-demo);
}

.hron-btn-outline-dark,
.hron-btn-outline-dark:visited,
.hron-btn-outline-dark:focus {
  color: var(--hron-navy);
  background: transparent;
  border: 2px solid var(--hron-navy);
}
.hron-btn-outline-dark:hover,
.hron-btn-outline-dark:active {
  background: var(--hron-navy);
  color: #fff;
  border-color: var(--hron-navy);
}

/* Shapes */
.hron-rounded-pill { border-radius: 50rem; }
.hron-rounded { border-radius: 0.5rem; }
.hron-rounded-sm { border-radius: 0.25rem; }
.hron-square { border-radius: 0; }

/* Sizes */
.hron-btn-lg {
  padding: 16px 40px;
  font-size: 20px;
}
.hron-btn-sm {
  padding: 6px 16px;
  font-size: 14px;
}

/* Book Demo Special */
.hron-btn-demo-anim {
  background-size: 300% 100%;
  background-image: linear-gradient(to right, #2A5EF6, #00C897, #FF9F00, #F14E0F, #2A5EF6);
  animation: hronGradientFlow 6s ease infinite;
  font-weight: 700;
  text-transform: uppercase;
}

@keyframes hronGradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Utilities */
.hron-ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: scale(0);
  animation: hronRippleKeyframe 0.6s linear;
  pointer-events: none;
}

@keyframes hronRippleKeyframe {
  to { transform: scale(4); opacity: 0; }
}

.hron-confetti-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999; overflow: hidden;
}

.hron-confetti-particle {
  position: absolute;
  width: 20px; height: 20px;
  background-size: contain; background-repeat: no-repeat;
  background-position: center;
}