/* ============================================================
   AIMDUK — login.css
   Page-specific styles for login.php ONLY.
   All selectors prefixed with .login- — no global classes
   are overridden here. Colors/fonts/radii/shadows are pulled
   from theme.css tokens so this matches the site's maroon +
   gold identity rather than any generic template palette.
   ============================================================ */
html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

/* ════════════════════════════════════════════
   SECTION SHELL
   ════════════════════════════════════════════ */
.login-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 15px;
    background:var(--grad-hero);
    overflow:hidden;
}

.login-section__orb-1,
.login-section__orb-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.login-section__orb-1 {
    width: 380px;
    height: 380px;
    top: -120px;
    left: -100px;
    background: radial-gradient(circle, rgba(184,150,62,.25), transparent 70%);
}

.login-section__orb-2 {
    width: 420px;
    height: 420px;
    bottom: -140px;
    right: -120px;
    background: radial-gradient(circle, rgba(184,150,62,.18), transparent 70%);
}


/* ════════════════════════════════════════════
   CARD
   ════════════════════════════════════════════ */
.login-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width:100%;
    max-width:520px;
    margin:auto;
    padding:3rem;
    position: relative;
}

.login-card__brand {
    text-align: center;
    margin-bottom: 2rem;
}

.login-card__brand-mark {
    width: 66px;
    height: 66px;
    margin-inline: auto;
    border-radius: 50%;
    /* background: var(--grad-maroon); */
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: var(--shadow-gold); */
    margin-bottom: 1rem;
}

.login-card__brand-mark img {
    width: 66px;
    height: 66px;
    object-fit: contain;
}

.login-card__brand-mark i {
    font-size: 1.4rem;
    color: var(--gold-light);
}

.login-card__title {
    font-family: var(--font-serif);
    font-size:clamp(1.6rem,3vw,2.2rem);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}

.login-card__subtitle {
    font-size:clamp(.8rem,2vw,.95rem);
    color: var(--text-muted);
    margin-top: .85rem;
}


/* ════════════════════════════════════════════
   FIELDS — icon + underline style
   ════════════════════════════════════════════ */
.login-field {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .85rem;
    border-bottom: 1.5px solid rgba(184,150,62,.3);
    padding: .6rem .1rem;
    margin-bottom: .3rem;
    transition: border-color .2s ease;
}

.login-field:focus-within {
    border-bottom-color: var(--primary);
}

.login-field__icon {
    font-size: 1rem;
    color: var(--gold);
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.login-field__input {
    flex: 1;
    border: none;
    outline: none;
    width:100%;
    min-width:0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: .92rem;
    color: var(--text-dark);
    padding: .2rem 0;
}

.login-field__input::placeholder {
    color: var(--text-muted);
    opacity: .75;
}

.login-field__toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color .2s ease;
}

.login-field__toggle:hover {
    color: var(--primary);
}

.login-field--invalid {
    border-bottom-color: #b3261e;
}

.login-field__error {
    font-size: .72rem;
    color: #b3261e;
    margin: .25rem 0 1.1rem;
    display: none;
}

.login-field__error.is-visible {
    display: block;
}


/* ════════════════════════════════════════════
   ROW — remember me / forgot password
   ════════════════════════════════════════════ */
.login-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.4rem 0 1.75rem;
}

.login-checkbox {
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
    user-select: none;
}

.login-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.login-checkbox__box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid rgba(184,150,62,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .8rem;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.login-checkbox__box i {
    opacity: 0;
    transform: scale(.6);
    transition: var(--transition-fast);
}

.login-checkbox input:checked + .login-checkbox__box {
    background: var(--primary);
    border-color: var(--primary);
}

.login-checkbox input:checked + .login-checkbox__box i {
    opacity: 1;
    transform: scale(1);
}

.login-checkbox input:focus-visible + .login-checkbox__box {
    box-shadow: 0 0 0 3px rgba(184,150,62,.25);
}

.login-checkbox__label {
    font-size: .8rem;
    color: var(--text-mid);
}

.login-card__forgot {
    font-size: .8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    font-style: italic;
    transition: color .2s ease;
}

.login-card__forgot:hover {
    color: var(--gold-deep);
    text-decoration: underline;
}


/* ════════════════════════════════════════════
   SUBMIT BUTTON
   ════════════════════════════════════════════ */
.login-card__submit {
    width:100%;
    padding:15px;
    font-size:15px;
    background: var(--grad-maroon);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px rgba(74,10,24,.3);
    transition: var(--transition);
}

.login-card__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(74,10,24,.4);
}

.login-card__submit:active {
    transform: translateY(0);
}


/* ════════════════════════════════════════════
   FOOTNOTE
   ════════════════════════════════════════════ */
.login-card__footnote {
    text-align: center;
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 1.75rem;
}

.login-card__footnote a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.login-card__footnote a:hover {
    text-decoration: underline;
}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .login-card {
        padding: 2.25rem 1.5rem;
    }
}

@media(max-width:576px){

.login-card__row{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
}

.login-card__forgot{
    width:100%;
}

}

@media(max-width:768px){

.login-card{
    padding:2rem;
}

}

@media(max-width:576px){

.login-card{
    padding:1.5rem;
}

}

@media(max-width:768px){

.login-section__orb-1,
.login-section__orb-2{

width:220px;
height:220px;
filter:blur(45px);

}

}

@media(max-width:400px){

.login-card{

padding:1.25rem;

}

.login-card__title{

font-size:1.5rem;

}

.login-card__subtitle{

font-size:.8rem;

}

.login-checkbox__label{

font-size:.75rem;

}

.login-card__forgot{

font-size:.75rem;

}

}