/* Login/Register Tabs */
.login-page-wrapper .nav-pills .nav-link {
    color: #6c757d;
    background: #f8f9fa;
    border-bottom: 2px solid #eee;
}

.login-page-wrapper .nav-pills .nav-link.active {
    background-color: #fff;
    color: #00A79E;
    border-bottom: 2px solid #00A79E;
}

.btn-teal {
    background-color: #00A79E;
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-teal:hover {
    background-color: #008f88;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 167, 158, 0.2);
}

.text-teal {
    color: #00A79E !important;
}

.login-page-wrapper .form-control:focus {
    border-color: #00A79E;
    background-color: #f8ffff;
}

/* Validation Stars */
.required {
    color: #dc3545;
    text-decoration: none;
}
.buttonlogingdash{
    background-color: #00A79E !important;
}
/* Custom Teal Buttons for My Account */
.login-page-wrapper .btn-teal,
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-form-login [name="login"],
.woocommerce-form-register [name="register"] {
    background-color: #00A79E !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 50px !important; /* Makes them rounded like the reference */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    width: 100%; /* Makes them full width in the card */
}

/* Hover State - Slightly darker teal */
.login-page-wrapper .btn-teal:hover,
.woocommerce-form-login .button:hover,
.woocommerce-form-register .button:hover,
.woocommerce-form-login [name="login"]:hover,
.woocommerce-form-register [name="register"]:hover {
    background-color: #008f88 !important; 
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 167, 158, 0.3);
}

/* Styling the Tab Buttons at the top */
.login-page-wrapper .nav-pills .nav-link.active {
    background-color: #ffffff !important;
    color: #00A79E !important;
    border-bottom: 3px solid #00A79E !important;
}

/* Optional: Link color for "Lost your password?" */
.text-teal, 
.lost_password a {
    color: #00A79E !important;
    font-weight: 600;
}