/* ====================================================================================================
   BUTTONS COMPONENT
   ====================================================================================================
   Centralized button styles for consistent UI across the website
   ==================================================================================================== */

/* ===== BASE BUTTON STYLES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-primary);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-medium);
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    outline: none;
}

.btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== BUTTON VARIANTS ===== */

/* Primary Button */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--color-white);
    border-color: var(--color-gray-900);
    color: var(--color-gray-900);
}

.btn-secondary:hover {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-900);
    color: var(--color-white);
}

/* Outline Button */
.btn-outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Ghost Button */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-primary);
}

.btn-ghost:hover {
    background-color: rgba(57, 126, 143, 0.1);
}

/* White Button */
.btn-white {
    background-color: var(--color-white);
    border-color: var(--color-gray-900);
    color: var(--color-gray-900);
}

.btn-white:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Dark Button */
.btn-dark {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-900);
    color: var(--color-white);
}

.btn-dark:hover {
    background-color: var(--color-black);
    border-color: var(--color-black);
}

/* ===== BUTTON SIZES ===== */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-body-sm);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-body-lg);
}

.btn-xl {
    padding: 1.25rem 2.5rem;
    font-size: var(--font-size-body-lg);
}

/* ===== BUTTON WIDTH ===== */
.btn-block {
    display: block;
    width: 100%;
}

/* ===== BUTTON WITH ICON ===== */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-icon-only {
    padding: 0.75rem;
    aspect-ratio: 1;
}

/* ===== LEGACY BUTTON STYLES (for backward compatibility) ===== */
a.btn-seemore {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-900);
    text-align: center;
    padding: 0.5rem 1rem;
    margin: auto;
    color: var(--color-gray-900);
    display: block;
    text-decoration: none;
}

a.btn-seemore:hover {
    background-color: var(--color-gray-900);
    color: var(--color-white);
    border-color: var(--color-gray-900);
}

a.btn-seemore-review {
    position: relative;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-900);
    text-align: center;
    padding: 0.5rem 1rem;
    margin: auto;
    color: var(--color-gray-900);
    display: block;
    text-decoration: none;
    margin-top: 4rem;
}

a.btn-seemore-review:hover {
    background-color: var(--color-gray-900);
    color: var(--color-white);
    border-color: var(--color-gray-900);
}

a.btn-contact {
    background-color: var(--color-white);
    text-align: center;
    padding: 0.5rem 1rem;
    margin: auto;
    color: var(--color-primary);
    display: block;
    text-decoration: none;
}

a.btn-register {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    text-align: center;
    padding: 0.5rem 1rem;
    margin: auto;
    color: var(--color-white);
    display: block;
    text-decoration: none;
}

a.btn-register-new {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
    margin-right: 20px;
    margin-left: auto;
    color: var(--color-white);
    display: block;
    text-decoration: none;
}

a.btn-register-new-white {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-900);
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
    margin-right: 20px;
    margin-left: auto;
    color: var(--color-primary);
    display: block;
    text-decoration: none;
}

a.btn-service-area {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    width: 30%;
    text-align: center;
    padding: 0.5rem 1rem;
    color: var(--color-white);
    display: block;
    text-decoration: none;
}

a.btn-service-area:hover {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-900);
    color: var(--color-white);
}

a.btn-cta-blue {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    text-align: center;
    padding: 1rem;
    margin-left: auto;
    color: var(--color-white);
    display: block;
    text-decoration: none;
}

a.btn-cta-blue:hover {
    background-color: var(--color-white);
    border-color: var(--color-gray-900);
    color: var(--color-gray-900);
}

a.btn-cta-blue-new {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    width: 100%;
    text-align: center;
    padding: 1rem;
    color: var(--color-white);
    display: block;
    text-decoration: none;
}

a.btn-cta-blue-new:hover {
    background-color: var(--color-white);
    border-color: var(--color-gray-900);
    color: var(--color-gray-900);
}

.btn-cta-blue-new-img {
    width: 25px;
    height: 25px;
    object-fit: cover;
}

a.btn-cta-white {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-900);
    text-align: center;
    padding: 1rem;
    margin-right: auto;
    color: var(--color-gray-900);
    display: block;
    text-decoration: none;
}

a.btn-cta-white:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

a.btn-cta-white-new {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-900);
    width: 100%;
    text-align: center;
    padding: 1rem;
    color: var(--color-gray-900);
    display: block;
    text-decoration: none;
}

a.btn-cta-white-new:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Disabled button state */
.custom-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== RESPONSIVE BUTTON STYLES ===== */
@media (max-width: 1024px) {
    a.btn-seemore {
        width: 40%;
        margin-top: 3rem;
    }

    a.btn-seemore-review {
        width: 40%;
        margin-top: 3rem;
    }

    a.btn-contact {
        width: 70%;
        margin-top: 3rem;
    }

    a.btn-register {
        width: 70%;
        margin-top: 3rem;
    }

    a.btn-register-new {
        margin-top: 3rem;
        margin-right: auto;
    }

    a.btn-register-new-white {
        margin-top: 3rem;
        margin-right: auto;
    }

    a.btn-cta-blue {
        width: 100%;
        margin-top: 1rem;
    }

    a.btn-cta-blue-new {
        margin-top: 1rem;
    }

    a.btn-cta-white {
        width: 100%;
        margin-top: 1rem;
    }

    a.btn-cta-white-new {
        margin-top: 1rem;
    }
}

@media (min-width: 1025px) {
    a.btn-seemore {
        width: 20%;
    }

    a.btn-seemore-review {
        width: 20%;
    }

    a.btn-contact {
        width: 100%;
    }

    a.btn-register {
        width: 20%;
    }

    a.btn-cta-blue {
        width: 50%;
    }

    a.btn-cta-white {
        width: 50%;
    }
}

@media (max-width: 576px) {
    .btn,
    .expertise-btn,
    .cta-banner-btn,
    .btn-view-more,
    a.btn-seemore,
    a.btn-seemore-review,
    a.btn-contact,
    a.btn-register,
    a.btn-register-new,
    a.btn-register-new-white,
    a.btn-service-area,
    a.btn-cta-blue,
    a.btn-cta-blue-new,
    a.btn-cta-white,
    a.btn-cta-white-new {
        width: 100% !important;
        justify-content: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .btn-icon-only {
        width: auto !important;
    }
}