/* Common button class */
.btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.btn-flex{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:8px;
}

/* Remove all outlines and focus rings */
.btn,
button,
.btn:focus,
button:focus,
.btn:focus-visible,
button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Remove focus ring in Firefox */
.btn::-moz-focus-inner,
button::-moz-focus-inner {
    border: 0;
}

/* Button sizes */
button.btn.btn-sm,
.btn.btn-sm {
    font-size: 12px;
    padding: 0.4rem 0.9rem;
    border-radius: 5px;
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

button.btn.btn-md,
.btn.btn-md {
    font-size: 14px;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

button.btn.btn-lg,
.btn.btn-lg {
    font-size: 16px;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Full width button */
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Grey Button */
.btn-grey {
    background-color: #fff;
    color: #4D4D4D;
    border-color: #4D4D4D;
    font-size: 14px;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    border-color: #4D4D4D;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-grey:hover {
    background-color: var(--primary);
    color: var(--light);
}
.btn-grey:hover .icon-small{
    background-color: #fff !important;
}
/* Orange Button */
.btn-orange {
    background-color: #fff !important;
    color: #E7510F !important;
    border-color: #E7510F !important;
    font-size: 14px;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-orange:hover {
    background-color: #E7510F !important;
    color: #fff !important;
}
.btn-orange:hover .theme-brand-orange{
    background-color: #fff !important;
}
/* Disabled state */
.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}