/* ===============================
   UNIVERSAL BUTTON ENGINE
================================*/
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
/*   border-radius:6px; */
	border-radius: var(--btn-radius, 6px);
  border:none;
  white-space:nowrap;
  transition:all .25s ease;
  
}

.btn-sm{height:var(--btn-h,36px);min-width:120px;padding:0 18px;font-size:15px;}
.btn-md{height:var(--btn-h,44px);min-width:140px;padding:0 10px;font-size:15px;}
.btn-lg{height:var(--btn-h,52px);min-width:160px;padding:0 5px;font-size:16px;}
.btn-xl{height:var(--btn-h,60px);min-width:180px;padding:0 34px;font-size:18px;}

.btn{
  width: var(--btn-w, auto);
/*   padding: var(--btn-py, 10px) var(--btn-px, 10px); */
padding:var(--btn-py,initial) var(--btn-px,initial);
  margin-top:    var(--btn-mt, 0) !important;
  margin-right:  var(--btn-mr, 0) !important;
  margin-bottom: var(--btn-mb, 0) !important;
  margin-left:   var(--btn-ml, 0) !important;
}

.btn-dark{
  background:#000;
  color:#fff;
border: 1px solid #000000;
/* 	font-size: 15px; */
    font-weight: 100;
	
}
.btn-dark:hover{
  
	background-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(0, 0, 0, 0.1);
}

.btn-pink{
  background:#e9124d;
  color:#fff;
		box-shadow: 0px 2px 2px rgb(139, 0, 36) !important;
}
.btn-pink:hover{
  background:#fff;
	color:#000;
border: 1px solid #000;
}

.btn-navy{
  background:#101e69;
  color:#fff;
}
.btn-navy:hover{
  background:#000;
  box-shadow:0 0 14px rgba(16,30,105,.35);
}
 
.btn-blue{
  background:#305cde;
  color:#fff;
}
.btn-blue:hover{
  background:#1e90ff;
}

.btn-white{
  background:#fff;
  color:#000;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.btn-white:hover{
  background:#e9124d;
  color:#fff;
	 box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.2), 0 0 14px rgba(0, 0, 0, 0.1);
}


.btn-outline-dark{
  background:#fff;
  border:2px solid #000;
  color:#000;
}
.btn-outline-dark:hover{
  background:#000;
/*   color:#fff; */
}

.btn-gradient{
  color:#fff;
  background:linear-gradient(270deg,#F61351,#1e90ff,#F61351);
  background-size:400% 400%;
  animation:gradientWave 6s ease infinite;
}
.btn-gradient:hover{
  animation:none;
  filter:brightness(.9);
background: linear-gradient(to right, #d01045, #1a78c5) !important;
     
}
.btn-gradient.button-text-animation::before,
.btn-gradient.button-text-animation::after {
  color:#fff;
}



@media (max-width:768px){
  a.btn{
    margin-top:var(--btn-mt,0px) !important;
    margin-bottom:var(--btn-mb,0px) !important;
  }
  a.btn[data-mobile-center="1"]{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:fit-content;
  }
	.btn-ai {
		margin-left:0px !important
	}
}


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

.btn-icon {
    position: relative;
   

    /* defaults */
    --btn-bg: #E9124D;
    --btn-color: #fff;
    --btn-hover-bg: #fff;
    --btn-hover-color: #E9124D;
    --btn-icon: url("");
    --btn-icon-hover: var(--btn-icon);

    /* NEW */
    --btn-icon-filter: none;
    --btn-icon-hover-filter: none;
    background: var(--btn-bg);
    color: var(--btn-color);
    transition: all .25s ease;
}

/* ICON */
.btn-icon::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: var(--btn-icon) no-repeat center;
    background-size: contain;
 filter: var(--btn-icon-filter);
}

/* HOVER */
.btn-icon:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--btn-hover-color) 30%, transparent);
}

.btn-icon:hover::before {
    background-image: var(--btn-icon-hover);
	 filter: var(--btn-icon-hover-filter);
}
.btn-ai {
    --btn-bg: #E9124D;
    --btn-color: #fff;
 padding-left: 30px;
    --btn-hover-bg: #fff;
    --btn-hover-color: #E9124D;

    --btn-icon: url("https://supportappsdev.wpenginepowered.com/wp-content/uploads/2025/12/Vector.webp");
    --btn-icon-hover: url("https://supportappsstg.wpenginepowered.com/wp-content/uploads/2025/12/AI-Assistant.webp");
	margin-left: 385px !important;
}
.btn-submit {
    --btn-bg: #fff;
    --btn-color: #E9124D;
 padding-left: 22px;
    --btn-hover-bg: #E9124D;
    --btn-hover-color: #fff;

    --btn-icon: url("https://supportappsdev.wpenginepowered.com/wp-content/uploads/2025/12/ticket-1.png");
    --btn-icon-hover: url("https://supportappsdev.wpenginepowered.com/wp-content/uploads/2025/12/ticket-1.png");
	--btn-icon-hover-filter: brightness(0) invert(1) ;
}

.wp-block-column.headersupportbtn.is-layout-flow.wp-block-column-is-layout-flow {
     margin-right: -279px !important;
}
@media(max-width:768px) {
	.btn-ai {
		margin-left:-13px !important
	}
}
/* Mobile Override */
@media (max-width: 768px){
  .btn{
    width: var(--btn-mw, var(--btn-w, auto));
    height: var(--btn-mh, var(--btn-h, auto));
  }
}