/*==================================================
  BUTTONS
  SVFutureTechAI Theme
==================================================*/

/*---------------------------------
  Base Button
----------------------------------*/

.sv-btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

padding:14px 28px;

border:none;
border-radius:12px;

font-size:15px;
font-weight:600;

cursor:pointer;

transition:all .3s ease;

white-space:nowrap;

text-decoration:none;

}

/*---------------------------------
  Primary
----------------------------------*/

.sv-btn-primary{

background:var(--sv-primary);
color:#fff;

}

.sv-btn-primary:hover{

background:var(--sv-primary-dark);

transform:translateY(-2px);

box-shadow:var(--sv-shadow);

}

/*---------------------------------
  Secondary
----------------------------------*/

.sv-btn-secondary{

background:#eef2ff;

color:var(--sv-primary);

}

.sv-btn-secondary:hover{

background:var(--sv-primary);

color:#fff;

}

/*---------------------------------
  Outline
----------------------------------*/

.sv-btn-outline{

background:transparent;

border:2px solid var(--sv-border);

color:var(--sv-text);

}

.sv-btn-outline:hover{

border-color:var(--sv-primary);

color:var(--sv-primary);

}

/*---------------------------------
  White
----------------------------------*/

.sv-btn-white{

background:#fff;

color:var(--sv-primary);

}

.sv-btn-white:hover{

background:#f8fafc;

}

/*---------------------------------
  Gradient
----------------------------------*/

.sv-btn-gradient{

background:linear-gradient(
135deg,
#2563eb,
#6366f1
);

color:#fff;

}

.sv-btn-gradient:hover{

opacity:.95;

}

/*---------------------------------
  Sizes
----------------------------------*/

.sv-btn-sm{

padding:10px 18px;

font-size:14px;

}

.sv-btn-lg{

padding:18px 34px;

font-size:17px;

}

/*---------------------------------
  Full Width
----------------------------------*/

.sv-btn-block{

width:100%;

}

/*---------------------------------
  Rounded
----------------------------------*/

.sv-btn-pill{

border-radius:50px;

}

/*---------------------------------
  Icon
----------------------------------*/

.sv-btn i,
.sv-btn svg{

font-size:16px;

}

/*---------------------------------
  Disabled
----------------------------------*/

.sv-btn:disabled{

opacity:.5;

pointer-events:none;

}

/*---------------------------------
  Loading
----------------------------------*/

.sv-btn-loading{

position:relative;

pointer-events:none;

opacity:.8;

}

.sv-btn-loading::after{

content:"";

width:16px;
height:16px;

border:2px solid rgba(255,255,255,.4);
border-top-color:#fff;

border-radius:50%;

animation:sv-spin .8s linear infinite;

}

/*---------------------------------
  Animation
----------------------------------*/

@keyframes sv-spin{

100%{

transform:rotate(360deg);

}

}

/*---------------------------------
  Mobile
----------------------------------*/

@media(max-width:768px){

.sv-btn{

width:100%;

}

}