/*==========================================================
    Emirates Online Visa
    Buttons CSS
    Version: 1.0.0
==========================================================*/


/*==========================================================
    Base Button
==========================================================*/

.eov-btn,
button,
input[type="submit"],
.elementor-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:54px;

    padding:16px 28px;

    border:none;

    border-radius:var(--eov-btn-radius);

    font-family:var(--eov-font-primary);

    font-size:16px;

    font-weight:600;

    line-height:1;

    letter-spacing:.2px;

    text-decoration:none;

    cursor:pointer;

    transition:var(--eov-transition);

    white-space:nowrap;

    user-select:none;

}


/*==========================================================
    Primary Button
==========================================================*/

.eov-btn-primary,
.elementor-button{

    background:var(--eov-primary);

    color:#fff;

    box-shadow:var(--eov-shadow-sm);

}

.eov-btn-primary:hover,
.elementor-button:hover{

    background:var(--eov-primary-hover);

    color:#fff;

    transform:translateY(-2px);

    box-shadow:var(--eov-shadow-md);

}


/*==========================================================
    Secondary Button
==========================================================*/

.eov-btn-secondary{

    background:#fff;

    color:var(--eov-primary);

    border:1px solid var(--eov-primary);

}

.eov-btn-secondary:hover{

    background:var(--eov-primary);

    color:#fff;

}


/*==========================================================
    Dark Button
==========================================================*/

.eov-btn-dark{

    background:var(--eov-secondary);

    color:#fff;

}

.eov-btn-dark:hover{

    background:#000;

}


/*==========================================================
    Outline Button
==========================================================*/

.eov-btn-outline{

    background:transparent;

    color:var(--eov-primary);

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

}

.eov-btn-outline:hover{

    background:var(--eov-primary);

    color:#fff;

}


/*==========================================================
    Ghost Button
==========================================================*/

.eov-btn-ghost{

    background:transparent;

    color:var(--eov-heading);

}

.eov-btn-ghost:hover{

    background:rgba(139,30,45,.08);

    color:var(--eov-primary);

}


/*==========================================================
    White Button
==========================================================*/

.eov-btn-white{

    background:#fff;

    color:var(--eov-primary);

}

.eov-btn-white:hover{

    background:#f8f8f8;

}


/*==========================================================
    Success Button
==========================================================*/

.eov-btn-success{

    background:var(--eov-success);

    color:#fff;

}

.eov-btn-success:hover{

    filter:brightness(.92);

}


/*==========================================================
    Warning Button
==========================================================*/

.eov-btn-warning{

    background:var(--eov-warning);

    color:#fff;

}

.eov-btn-warning:hover{

    filter:brightness(.92);

}


/*==========================================================
    Danger Button
==========================================================*/

.eov-btn-danger{

    background:var(--eov-danger);

    color:#fff;

}

.eov-btn-danger:hover{

    filter:brightness(.92);

}


/*==========================================================
    Button Sizes
==========================================================*/

.eov-btn-sm{

    min-height:42px;

    padding:12px 20px;

    font-size:14px;

}

.eov-btn-md{

    min-height:54px;

}

.eov-btn-lg{

    min-height:62px;

    padding:18px 34px;

    font-size:18px;

}


/*==========================================================
    Full Width
==========================================================*/

.eov-btn-block{

    width:100%;

}


/*==========================================================
    Rounded
==========================================================*/

.eov-btn-pill{

    border-radius:999px;

}


/*==========================================================
    Icon
==========================================================*/

.eov-btn i,
.eov-btn svg{

    font-size:18px;

    transition:var(--eov-transition);

}

.eov-btn:hover i,
.eov-btn:hover svg{

    transform:translateX(3px);

}


/*==========================================================
    Disabled
==========================================================*/

.eov-btn:disabled,
button:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

}


/*==========================================================
    Loading
==========================================================*/

.eov-btn-loading{

    pointer-events:none;

    opacity:.8;

}


/*==========================================================
    Focus
==========================================================*/

.eov-btn:focus,
button:focus,
.elementor-button:focus{

    outline:3px solid rgba(139,30,45,.25);

    outline-offset:2px;

}


/*==========================================================
    Elementor Override
==========================================================*/

.elementor-button{

    border-radius:12px !important;

    box-shadow:var(--eov-shadow-sm);

}

.elementor-button:hover{

    box-shadow:var(--eov-shadow-md);

}


/*==========================================================
    Responsive
==========================================================*/

@media(max-width:767px){

.eov-btn,
.elementor-button{

    width:100%;

}

}