/*=========================================================
  SINHOI 2026
  BUTTONS
==========================================================*/


/*=========================================================
BASE BUTTON
==========================================================*/

.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-height:56px;

    padding:0 34px;

    border:none;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.02em;

    text-decoration:none;

    cursor:pointer;

    overflow:hidden;

    transition:var(--transition);

    white-space:nowrap;

}


/*=========================================================
HOVER
==========================================================*/

.btn:hover,
button:hover,
input[type="submit"]:hover{

    transform:translateY(-4px);

    background:var(--primary-hover);

    color:#fff;

    box-shadow:0 20px 45px rgba(47,107,83,.28);

}


/*=========================================================
ACTIVE
==========================================================*/

.btn:active{

    transform:translateY(-1px);

}


/*=========================================================
FOCUS
==========================================================*/

.btn:focus-visible{

    outline:3px solid rgba(47,107,83,.3);

    outline-offset:5px;

}


/*=========================================================
PRIMARY
==========================================================*/

.btn-primary{

    background:var(--primary);

    color:#fff;

}


/*=========================================================
SECONDARY
==========================================================*/

.btn-secondary{

    background:var(--secondary);

    color:var(--dark);

}

.btn-secondary:hover{

    background:#c9a768;

}


/*=========================================================
DARK
==========================================================*/

.btn-dark{

    background:var(--dark);

    color:#fff;

}

.btn-dark:hover{

    background:#1E221B;

}


/*=========================================================
WHITE
==========================================================*/

.btn-white{

    background:#fff;

    color:var(--dark);

}

.btn-white:hover{

    background:#F4F4F4;

}


/*=========================================================
OUTLINE
==========================================================*/

.btn-outline{

    background:transparent;

    color:var(--primary);

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

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


/*=========================================================
OUTLINE WHITE
==========================================================*/

.btn-outline-light{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.35);

}

.btn-outline-light:hover{

    background:#fff;

    color:var(--dark);

}


/*=========================================================
GHOST
==========================================================*/

.btn-ghost{

    background:transparent;

    color:var(--primary);

}

.btn-ghost:hover{

    background:rgba(47,107,83,.08);

}


/*=========================================================
LINK BUTTON
==========================================================*/

.btn-link{

    padding:0;

    min-height:auto;

    border:none;

    background:none;

    color:var(--primary);

    box-shadow:none;

}

.btn-link:hover{

    transform:none;

    background:none;

}


/*=========================================================
SIZES
==========================================================*/

.btn-sm{

    min-height:42px;

    padding:0 22px;

    font-size:.82rem;

}

.btn-lg{

    min-height:66px;

    padding:0 48px;

    font-size:1.05rem;

}

.btn-xl{

    min-height:74px;

    padding:0 60px;

    font-size:1.1rem;

}


/*=========================================================
WIDTH
==========================================================*/

.btn-block{

    width:100%;

}


/*=========================================================
ROUNDED
==========================================================*/

.btn-square{

    border-radius:12px;

}

.btn-pill{

    border-radius:999px;

}


/*=========================================================
ICON BUTTON
==========================================================*/

.btn-icon{

    display:inline-flex;

    align-items:center;

    gap:14px;

}

.btn-icon svg{

    transition:var(--transition);

}

.btn-icon:hover svg{

    transform:translateX(5px);

}


/*=========================================================
CIRCLE BUTTON
==========================================================*/

.btn-circle{

    width:60px;

    height:60px;

    padding:0;

    border-radius:50%;

}


/*=========================================================
LOADING
==========================================================*/

.btn-loading{

    pointer-events:none;

    opacity:.75;

}

.btn-loading::after{

    content:"";

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.25);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}


/*=========================================================
DISABLED
==========================================================*/

.btn:disabled,
button:disabled{

    opacity:.45;

    pointer-events:none;

}


/*=========================================================
BADGE BUTTON
==========================================================*/

.btn-badge{

    position:absolute;

    top:-8px;

    right:-8px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#ff3b30;

    color:#fff;

    font-size:.7rem;

}


/*=========================================================
SHADOW VARIANTS
==========================================================*/

.btn-shadow{

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}

.btn-shadow-lg{

    box-shadow:0 30px 70px rgba(0,0,0,.22);

}


/*=========================================================
ELEMENTOR
==========================================================*/

.elementor-button{

    min-height:56px;

    padding:0 34px !important;

    border-radius:999px !important;

    background:var(--primary);

    color:#fff !important;

    font-family:'Montserrat',sans-serif;

    font-size:.95rem;

    font-weight:700;

    transition:var(--transition);

    box-shadow:none;

}

.elementor-button:hover{

    transform:translateY(-4px);

    background:var(--primary-hover);

    box-shadow:0 20px 45px rgba(47,107,83,.28);

}

.elementor-button-content-wrapper{

    align-items:center;

    gap:12px;

}

.elementor-button-icon{

    transition:var(--transition);

}

.elementor-button:hover .elementor-button-icon{

    transform:translateX(4px);

}


/*=========================================================
BUTTON GROUP
==========================================================*/

.btn-group{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}


/*=========================================================
ANIMATIONS
==========================================================*/

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}