*{
 padding: 0;
 margin: 0;
}

/* Base face for the pages that load only this sheet (login, error pages).
   Set on the root and left to inherit, never forced on every element with
   the universal selector: that override used to break the bold and strong
   text inside sections designed around another family, because each child
   was pinned to PT Sans Narrow instead of inheriting its parent's face. */
:root {
    font-family: 'PT Sans Narrow', sans-serif;
}

/* Form controls do not inherit the document face by default. */
button,
input,
select,
textarea {
    font-family: inherit;
}
.logoMain{
    width: 100px;
}
.loginContainer{
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: relative;
    background: url("../../images/banners/loginBanner.jpg");
    background-size: cover;
    background-position: top;
    display: flex;
    justify-content: end;
}
.loginFormWrap{
    height: 100%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: black;
    opacity: 0.9;
}

.ctaPrimary {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
    box-sizing: border-box;
    font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px; /* Text size */
    letter-spacing: 1px; /* Space between letters */
    font-weight: 600; /* Bold text */
    line-height: normal; /* Default line height */
    padding: 8px 16px; /* Inner spacing */
    color: #000; /* Text color */
    background-color: #ffe01b; /* Yellow background */
    border: 2px solid #000; /* Black border */
    border-radius: 50px; /* Fully rounded corners */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Ensures proper alignment */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Shadow effect */
}

.ctaPrimary:hover {
    background-color: #ffcc00; /* Darker yellow background on hover */
    transform: translateY(-2px); /* Move slightly upward */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25); /* Increase shadow on hover */
}

.ctaPrimary:active {
    background-color: #e6b800; /* Slightly darker yellow when active */
    transform: translateY(1px); /* Move slightly downward */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); /* Reduce shadow when active */
}

.ctaPrimary:focus {
    outline: none; /* Remove default focus outline */
}

.ctaRegister {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
    box-sizing: border-box;
    font-family: "Graphik Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 0.8px;
    font-weight: 600;
    line-height: normal;
    padding: 8px 18px;
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.ctaRegister:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12);
}

.ctaRegister:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.15);
}

.ctaRegister:focus {
    outline: none;
}

.loginFormWrap form{
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.loginTitle{
    font-family: inherit;
    color: white;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
}
.inputLogin{
    width:75%;
    height: 45px;
    line-height: 45px;
    border: 2px solid #545454;
    background-color: transparent;
    color: #a9a9a9;
    padding: 0 15px;
    margin-bottom: 15px;
    font-size: inherit;
    font-family: inherit;
}
.rememberMe{
    display: flex;
    column-gap: 5px;
    justify-content: center;
    align-items: center;
}
.rememberMeText{
    color: #a7a4a4;
    font-size: 14px;
}
.loginRegisterButton{
    margin-top: 30px;
    width: 50%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    background: #4cae4c;
    cursor: pointer;
}
.loginRegisterButton:hover{
    background: #318031;
}
.lostPassword{
    color: #fec512;
    margin-top: 10px;
}
.loginForm{
    margin-top: 20px;
}
.registerLink a{
    color: #fec512;
}
.invalid-feedback{
    color: red;
    margin-bottom: 10px;
}
.alert-success{
    color: #d9016e;
}


@media only screen and (max-width: 1400px) {
    .loginFormWrap{
     width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .loginFormWrap{
        width: 100%;
    }
}

/* Responsive safety layer (additive, small screens only, desktop unchanged) */
@media (max-width: 640px){ .ctaRegister { white-space: normal; overflow-wrap: anywhere; } }