/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.contrast-btn {
  font-family: 'Nohemi-Regular', sans-serif;
  font-size: 16px;
  margin: 30px 0;
  display: block;
  width: fit-content;
  transition: .4s ease all;
}

.contrast-btn.full-w {width: 100%; text-align: center;}

/* === Text Styles === */

.contrast-btn.text-white {color: var(--pure-white);}
.contrast-btn.text-black {color: var(--charcoal-black);}
.contrast-btn.text-green {color: var(--contrast-green);}

/* === FILL Style === */

.contrast-btn.fill,
.contrast-btn.stroke {
  padding: 18px 45px;
  border-radius: 100px;
  transition: .4s ease all;
}

.contrast-btn.fill:hover,
.contrast-btn.stroke:hover{
  transform: scale(1.02);
}

.contrast-btn.fill.white {
  background: #FFF;
}

.contrast-btn.fill.green {
  background: var(--contrast-green);
  color: #FFF;
}

.contrast-btn.fill.teal {
  background: var(--teal-blue);
  color: #FFF;
}

.contrast-btn.fill.black {
  background: var(--charcoal-black);
  color: #FFF;
}

.contrast-btn.fill.gradient--green {
  background: linear-gradient(99deg, var(--contrast-green) 12.31%, var(--teal-blue) 114.72%);
  color: #FFF;
}


/* === STROKE Style === */

.contrast-btn.stroke {border-width: 3px; border-style: solid; i}

.contrast-btn.stroke.green {
 border-color: var(--contrast-green);
}

.contrast-btn.stroke.white {
 border-color: var(--pure-white);
}

.contrast-btn.stroke.black {
 border-color: var(--charcoal-black);
}

.contrast-btn.stroke.teal {
 border-color: var(--teal-blue);
}


/* === TEXT Color === */

.contrast-btn.text-black {color: var(--charcoal-black);}
.contrast-btn.text-white {color: var(--pure-white);}
.contrast-btn.text-green {color: var(--contrast-green);}
.contrast-btn.text-light-gray {color: var(--light-gray);}



/* === Toggle Style === */

.contrast-btn.toggle--full {
  --toggle-height: 60px;
  --toggle-circle-size: calc(var(--toggle-height) + -10px);
  --circle-offset: 5px;
  --text-padding: 25px;
  align-items: center;
  background: var(--light-gray);
  border-radius: 100px;
  color: var(--charcoal-black);
  cursor: pointer;
  display: inline-flex
;
  font-family: 'Nohemi-Medium', sans-serif;
  font-size: 18px;
  height: var(--toggle-height);
  justify-content: flex-start;
  overflow: visible;
  padding-left: calc(var(--circle-offset) + var(--toggle-circle-size) + var(--text-padding) - 5px);
  padding-right: calc(var(--text-padding) + 10px);
  position: relative;
  text-decoration: none;
  transition: color .3s ease-in-out, background-color .4s ease-in-out, transform .4s ease;
}

.contrast-btn.toggle--full span {
  display: inline-block;
  transition: transform 0.4s ease-in-out, color 0s ease-in-out;
}

.contrast-btn.toggle--full::after {
  background: var(--contrast-green);
  border: 8px solid var(--stroke-color, transparent);
  border-radius: 100px;
  border-radius: 200px;
  box-sizing: border-box;
  content: "";
  height: calc(100% + 16px);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  inset: -8px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 0;
  width: calc(100% + 16px);
}

.contrast-btn.toggle--full::before {
  content: "";
  width: var(--toggle-circle-size);
  height: var(--toggle-circle-size);
  position: absolute;
  top: var(--circle-offset); /* Use consistent offset */
  left: var(--circle-offset);
  background-color: var(--contrast-green); /* Default circle color */
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out, left 0.3s cubic-bezier(0.54, -0.29, 0.69, 1.37);
}

.contrast-btn.toggle--full:hover::before {left: 5%;}

.contrast-btn.toggle--full.active::before {
  left: calc(100% - var(--toggle-circle-size) - var(--circle-offset)); /* Move circle to the right */
  background-color: var(--charcoal-black); 
}

.contrast-btn.toggle--full.active {
  color: var(--pure-white); /* Change text color when active */
  background: var(--contrast-green);
}

.contrast-btn.toggle--full.active span {
  transform: translateX(-35%); /* Text shifts left with the circle movement */
}

/* Transparent Green Button */
.contrast-btn.toggle--full.toggle--transparent-green {
  --stroke-color: var(--contrast-green);
  background: transparent;
}

.contrast-btn.toggle--full.toggle--transparent-green.active {
  color: var(--contrast-green); /* Change text to green */
}

.contrast-btn.toggle--full.toggle--transparent-green.active::before {
  background-color: var(--contrast-green); /* Circle turns green */
}

/* Transparent Black Button */
.contrast-btn.toggle--full.toggle--transparent-black {
  --stroke-color: var(--charcoal-black);
  background: transparent;
  color: var(--contrast-green);
}

.contrast-btn.toggle--full.toggle--transparent-black.active {
  color: var(--contrast-green); /* Change text to green */
}
.contrast-btn.toggle--full.toggle--transparent-black:before {top: 3px;}

.contrast-btn.toggle--full.toggle--transparent-black.active::before {
  background-color: var(--contrast-green); /* Circle turns green */
}



/* Iteration 1: Transparent Background with Green Stroke */
.contrast-btn.toggle--full.toggle--transparent-green {
  --stroke-color: var(--contrast-green);

  background: transparent;
  /*border: 2px solid var(--stroke-color);*/
  color: #fff; /* Default text color */
  transition: color var(--contrast-toggle-action), border-color var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--transparent-green::before {
  background-color: #fff; /* Default circle color */
  transition: background-color var(--contrast-toggle-action), left var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--transparent-green.active {
  color: var(--pure-white); /* Change text to green */
  border-color: var(--stroke-color); /* Keep stroke green */
  background-color: var(--contrast-green);
}

.contrast-btn.toggle--full.toggle--transparent-green.active::before {
  background-color: var(--charcoal-black); /* Circle turns green */
  left: calc(100% - var(--toggle-circle-size) - var(--circle-offset)); /* Circle moves to the right */
}

.contrast-btn.toggle--full.toggle--transparent-green.active span {
  transform: translateX(-35%); /* Text shifts left */
}


/* Iteration 2: Transparent Background with Charcoal Black Stroke */
.contrast-btn.toggle--full.toggle--transparent-black {
  --stroke-color: var(--charcoal-black);
  background: transparent;
  border: 2px solid var(--stroke-color);
  color: var(--stroke-color); /* Default text color */
  transition: color var(--contrast-toggle-action), border-color var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--transparent-black::before {
  background-color: var(--stroke-color); /* Default circle color */
  transition: background-color var(--contrast-toggle-action), left var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--transparent-black.active {
  color: var(--contrast-green); /* Change text to green */
  border-color: var(--stroke-color); /* Stroke remains charcoal black */
}

.contrast-btn.toggle--full.toggle--transparent-black.active::before {
  background-color: var(--contrast-green); /* Circle turns green */
  left: calc(100% - var(--toggle-circle-size) - var(--circle-offset)); /* Circle moves to the right */
}

.contrast-btn.toggle--full.toggle--transparent-black.active span {
  transform: translateX(-35%); /* Text shifts left */
}


/* Iteration 3: Transparent Background with White Stroke */
.contrast-btn.toggle--full.toggle--transparent-white {
  --stroke-color: var(--pure-white);
  background: transparent;
  border: 2px solid var(--stroke-color);
  color: var(--stroke-color); /* Default text color */
  transition: color var(--contrast-toggle-action), border-color var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--transparent-white::before {
  background-color: var(--stroke-color); /* Default circle color */
  transition: background-color var(--contrast-toggle-action), left var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--transparent-white.active {
  color: var(--contrast-green); /* Change text to green */
  border-color: var(--stroke-color); /* Stroke remains white */
}

.contrast-btn.toggle--full.toggle--transparent-white.active::before {
  background-color: var(--contrast-green); /* Circle turns green */
  left: calc(100% - var(--toggle-circle-size) - var(--circle-offset)); /* Circle moves to the right */
}

.contrast-btn.toggle--full.toggle--transparent-white.active span {
  transform: translateX(-35%); /* Text shifts left */
}

/* Iteration 4: White Background with White Stroke and Green Text / Circle */
.contrast-btn.toggle--full.toggle--fill-white.green-text {
  --stroke-color: var(--pure-white);
  background: #FFF;
  border: 2px solid var(--stroke-color);
  color: var(--charcoal-black); /* Default text color */
  transition: color var(--contrast-toggle-action), border-color var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--fill-white.green-text::before {
  background-color: var(--contrast-green); /* Default circle color */
  transition: background-color var(--contrast-toggle-action), left var(--contrast-toggle-action);
}

.contrast-btn.toggle--full.toggle--fill-white.green-text.active {
  background-color: var(--contrast-green);
  color: var(--pure-white); /* Change text to green */
  border-color: var(--stroke-color); /* Stroke remains white */
}

.contrast-btn.toggle--full.toggle--fill-white.green-text.active::before {
  background-color: var(--contrast-green); /* Circle turns green */
  left: calc(100% - var(--toggle-circle-size) - var(--circle-offset)); /* Circle moves to the right */
}

.contrast-btn.toggle--full.toggle--fill-white.green-text.active span {
  transform: translateX(-35%); /* Text shifts left */
}

/* === Inline Text with Toggle Beside // Input Checkbox - Small === */

.contrast-btn.has-inline-toggle {
  display: inline-flex;
  grid-gap: 10px;
  align-items: center;
  font-size: 13px;
  line-height: 14px;
}

.contrast-toggle__checkbox {
  --toggle-size: 13px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  background-position: 0;
  background-size: 205%;
  border-radius: 99em;
  border: 2px var(--contrast-green) solid;
  cursor: pointer;
  font-size: var(--toggle-size);
  height: 30px;
  position: relative;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  width: 100px;
  -webkit-box-shadow: -6px 1px 50px 2px #505050;
  box-shadow: -6px 1px 50px 2px #505050;
}

.contrast-toggle__checkbox::before {
  background: var(--pure-white);
  border-radius: 50%;
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  width: 20px;
}

.contrast-toggle__checkbox:checked::before {
  left: calc(100% - 23px);
  background: var(--contrast-green);
  
}

.contrast-toggle__checkbox:checked {
  box-shadow: -6px 1px 50px 5px #2b5444;
}

/* =============================== */


/* === Empty Style with Arrow === */

.contrast-btn.empty {
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
}

.contrast-btn.empty.has-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
  text-decoration: none;
  font-family: 'Nohemi-Regular', sans-serif;
  font-size: 18px;
  position: relative;
}


.contrast-btn.has-arrow:after,
.contrast-btn.empty.has-arrow:after{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 15px;
  background-size: contain;
  background-repeat: no-repeat;ß
  transition: .3s ease all;
}

.contrast-btn.empty.has-arrow.green:after,
.contrast-btn.stroke.has-arrow.arrow-green:after,
.contrast-btn.fill.has-arrow.arrow-green:after {
  background-image: url("https://203759.fs1.hubspotusercontent-na1.net/hubfs/203759/contrast-web-platform--2025/images/icons/icon--arrow-up-right__green.svg");
}
.contrast-btn.empty.has-arrow.white:after,
.contrast-btn.stroke.has-arrow.arrow-white:after,
.contrast-btn.fill.has-arrow.arrow-white:after {
  background-image: url("https://203759.fs1.hubspotusercontent-na1.net/hubfs/203759/contrast-web-platform--2025/images/icons/icon--arrow-up-right__white.svg");
}
.contrast-btn.empty.has-arrow.black:after,
.contrast-btn.stroke.has-arrow.arrow-black:after,
.contrast-btn.fill.has-arrow.arrow-black:after {
  background-image: url("https://203759.fs1.hubspotusercontent-na1.net/hubfs/203759/contrast-web-platform--2025/images/icons/icon--arrow-up-right__black.svg");
}

.contrast-btn.empty.has-arrow:hover:after {transform: scale(1.3);}