/*
 * ==========================================================================
 *  Dedicated Styles for Authentication Pages (Login/Register)
 *  File: public/frontend_theme/css/auth-style.css
 *  This file uses dynamic CSS variables defined in the main layout.
 * ==========================================================================
 */

/*
 * --- Auth Card and Tabs Styling ---
 */

/* Style for the inactive tabs (e.g., "Register") */
.auth-card .nav-pills .nav-link {
    background-color: transparent;
    color: #6c757d; /* Standard muted text color */
    border: 0;
    font-weight: 500;
    border-radius: 0.375rem; /* Bootstrap's default rounded corner */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Style for the active tab (e.g., "Login") - USES DYNAMIC COLOR */
.auth-card .nav-pills .nav-link.active,
.auth-card .nav-pills .show > .nav-link {
    background-color: var(--theme-primary-color);
    color: #ffffff;
}


/*
 * --- Themed Primary Button (for Login/Register actions) ---
 */

/* 1. Default State - USES DYNAMIC COLOR */
.btn-primary-themed {
    background-color: var(--theme-primary-color);
    color: #ffffff;
    border-color: var(--theme-primary-color);
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* 2. Hover State - USES DYNAMIC HOVER COLOR */
.btn-primary-themed:hover {
    background-color: var(--theme-primary-hover-color);
    color: #ffffff;
    border-color: var(--theme-primary-hover-color);
}

/* 3. Focus and Active State - USES DYNAMIC ACTIVE COLOR */
.btn-primary-themed:focus,
.btn-primary-themed:active {
    background-color: var(--theme-primary-active-color);
    color: #ffffff;
    border-color: var(--theme-primary-active-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-color-rgb, 40, 116, 240), 0.5); /* Optional: Focus ring */
}

/* 4. Disabled State (Static colors, not themed) */
.btn-primary-themed:disabled,
.btn-primary-themed.disabled {
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #e9ecef;
    pointer-events: none;
    opacity: 0.65;
}