/* =========================================================
   PARYX LOGIN
   ========================================================= */

:root {
    --auth-page-green: #064831;
    --auth-page-green-dark: #022d1d;

    --auth-panel-green: #fffdf8;
    --auth-panel-green-deep: #f5f0e4;

    --auth-gold: #e5c45f;
    --auth-gold-light: #f4d667;
    --auth-gold-dark: #b99538;

    --auth-white: #ffffff;
    --auth-text-dark: #15251f;

    --auth-field-background: #f8f8f8;
    --auth-field-border: #d0d1d0;
    --auth-field-placeholder: #858886;

    --auth-error: #ffd0d0;
    --auth-success: #c7f2d3;
}

/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--auth-page-green);
}

body {
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;

    background: var(--auth-page-green);

    font-family:
        Inter,
        Manrope,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}

/* =========================================================
   PAGE
   ========================================================= */

.auth-page {
    color: var(--auth-white);

    background:
        linear-gradient(
            180deg,
            #07533a 0%,
            var(--auth-page-green) 42%,
            var(--auth-page-green-dark) 100%
        );
}

.auth-layout {
    display: grid;

    min-height: 100vh;
    min-height: 100dvh;

    place-items: center;

    padding:
        max(1.25rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
}

/* =========================================================
   MAIN GOLD-BORDERED PANEL
   ========================================================= */

.auth-panel {
    position: relative;

    width: min(100%, 25rem);

    padding:
        2.15rem
        1.35rem
        1.7rem;

    overflow: hidden;

    border:
        1px solid
        rgba(212, 175, 55, 0.88);

    border-radius: 1.5rem;

    background:
        linear-gradient(
            180deg,
            var(--auth-panel-green) 0%,
            var(--auth-panel-green-deep) 100%
        );

    box-shadow:
        0 1.15rem 2.6rem
        rgba(0, 0, 0, 0.22);

    animation:
        auth-panel-enter
        420ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

/* =========================================================
   BRAND
   ========================================================= */

.auth-brand {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.paryx-logo {
    display: block;
    width: min(100%, 25rem);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    background: transparent;
    user-select: none;
    pointer-events: none;
}


.auth-tagline {
    display: flex;
    flex-direction: column;

    gap: 0.1rem;

    margin: 1.05rem 0 0;

    font-size: 1rem;
    font-weight: 520;
    line-height: 1.45;
}

.auth-tagline span {
    color: var(--auth-page-green);
}

/* =========================================================
   LOGIN FORM
   ========================================================= */

.auth-form {
    position: relative;
    z-index: 1;

    margin-top: 1.75rem;
}

.auth-fields {
    padding: 0.4rem;

    overflow: hidden;

    border-radius: 1.15rem;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 0.55rem 1.25rem
        rgba(0, 0, 0, 0.13);
}

/* =========================================================
   INPUTS
   ========================================================= */

.auth-field {
    position: relative;

    display: flex;

    min-height: 4.15rem;

    align-items: center;

    border:
        1px solid
        var(--auth-field-border);

    border-radius: 0.85rem;

    background:
        var(--auth-field-background);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.auth-field + .auth-field {
    margin-top: 0.38rem;
}

.auth-field:focus-within {
    border-color: var(--auth-gold-light);

    background: var(--auth-white);

    box-shadow:
        0 0 0 3px
        rgba(212, 175, 55, 0.14);
}

.auth-field__icon {
    display: grid;

    width: 3.35rem;
    flex: 0 0 3.35rem;

    place-items: center;

    color: #777c79;
}

.auth-field__icon svg,
.auth-field__toggle svg {
    width: 1.5rem;
    height: 1.5rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-field input {
    width: 100%;
    min-width: 0;

    padding:
        1rem
        0.7rem
        1rem
        0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #1f2925;

    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.2;
}

.auth-field input::placeholder {
    color:
        var(--auth-field-placeholder);

    opacity: 1;
}

.auth-field__toggle {
    display: grid;

    width: 3.45rem;
    min-height: 3.45rem;
    flex: 0 0 3.45rem;

    place-items: center;

    padding: 0;

    border: 0;

    background: transparent;
    color: #777c79;

    cursor: pointer;
}

.auth-field__toggle:focus-visible {
    border-radius: 0.7rem;

    outline:
        2px solid
        var(--auth-page-green);

    outline-offset: -0.2rem;
}

/* =========================================================
   SIGN-IN BUTTON
   ========================================================= */

.auth-submit {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 4.25rem;

    align-items: center;
    justify-content: center;

    margin-top: 0.4rem;

    padding: 0.9rem 1rem;

    border:
        1px solid
        var(--auth-gold-dark);

    border-radius: 0.85rem;

    background:
        linear-gradient(
            135deg,
            var(--auth-gold-light),
            var(--auth-gold)
        );

    color:
        var(--auth-text-dark);

    font-size: 1.08rem;
    font-weight: 720;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.24);

    transition:
        transform 120ms ease,
        filter 120ms ease,
        opacity 120ms ease;
}

.auth-submit:hover {
    filter: brightness(1.035);
}

.auth-submit:active {
    transform: scale(0.986);
}

.auth-submit:focus-visible {
    outline:
        3px solid
        rgba(255, 255, 255, 0.82);

    outline-offset: 0.2rem;
}

.auth-submit:disabled {
    opacity: 0.76;
    cursor: wait;
}

.auth-submit__spinner {
    display: none;

    width: 1.15rem;
    height: 1.15rem;

    margin-left: 0.65rem;

    border:
        2px solid
        rgba(21, 37, 31, 0.24);

    border-top-color:
        var(--auth-text-dark);

    border-radius: 50%;

    animation:
        auth-spinner
        700ms
        linear
        infinite;
}

.auth-submit.is-loading
.auth-submit__spinner {
    display: block;
}

/* =========================================================
   LOGIN MESSAGE
   ========================================================= */

.auth-message {
    margin: 0.8rem 0 0;

    padding: 0.68rem 0.78rem;

    border-radius: 0.68rem;

    background:
        rgba(6, 72, 49, 0.07);

    color: var(--auth-text-dark);

    font-size: 0.85rem;
    font-weight: 560;
    line-height: 1.4;

    text-align: center;
}

.auth-message[hidden] {
    display: none;
}

.auth-message.is-error,
.auth-message[data-type="error"] {
    background:
        rgba(175, 38, 38, 0.09);

    color: #9b2f2f;
}

.auth-message.is-success,
.auth-message[data-type="success"] {
    background:
        rgba(39, 174, 96, 0.10);

    color: #23683e;
}

/* =========================================================
   FOOTER
   ========================================================= */

.auth-footer {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 1.35rem;

    text-align: center;
}

.auth-link {
    color: var(--auth-page-green);

    font-size: 0.98rem;
    font-weight: 520;

    text-decoration: none;
}

.auth-link:hover,
.auth-link:focus-visible {
    color: var(--auth-gold-dark);
}

.auth-club-contact {
    margin: 1.15rem 0 0;

    color: #52635b;

    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.4;
}

.auth-club-contact a {
    color: var(--auth-page-green);

    font-weight: 650;

    text-decoration: none;
}

.auth-link:focus-visible,
.auth-club-contact a:focus-visible {
    border-radius: 0.2rem;

    outline:
        2px solid
        var(--auth-gold);

    outline-offset: 0.25rem;
}

/* =========================================================
   SMALLER PHONES
   ========================================================= */

@media (max-width: 390px) {
    .auth-layout {
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }

    .auth-panel {
        padding:
            1.75rem
            1rem
            1.4rem;

        border-radius: 1.35rem;
    }

    .paryx-logo { width: min(100%, 20rem); }

    .auth-tagline {
        margin-top: 0.85rem;

        font-size: 0.9rem;
    }

    .auth-form {
        margin-top: 1.45rem;
    }

    .auth-field,
    .auth-submit {
        min-height: 3.85rem;
    }

    .auth-footer {
        margin-top: 1.1rem;
    }

    .auth-club-contact {
        margin-top: 0.9rem;

        font-size: 0.88rem;
    }
}

/* =========================================================
   SHORTER SCREENS
   ========================================================= */

@media (max-height: 720px) {
    .auth-layout {
        place-items: start center;
    }

    .auth-panel {
        margin: auto 0;

        padding-top: 1.1rem;
        padding-bottom: 1rem;
    }

    .paryx-logo { width: min(100%, 18rem); }

    .auth-tagline {
        margin-top: 0.6rem;

        font-size: 0.84rem;
    }

    .auth-form {
        margin-top: 1rem;
    }

    .auth-field,
    .auth-submit {
        min-height: 3.45rem;
    }

    .auth-footer {
        margin-top: 0.85rem;
    }

    .auth-club-contact {
        margin-top: 0.65rem;
    }
}

/* Small and short phones must remain usable */
@media (max-width: 390px) and (max-height: 720px) {
    .paryx-logo { width: min(100%, 17rem); }
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes auth-panel-enter {
    from {
        opacity: 0;

        transform:
            translateY(0.65rem)
            scale(0.99);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes auth-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .auth-panel,
    .auth-submit__spinner {
        animation: none;
        transition: none;
    }

    .auth-field,
    .auth-submit {
        transition: none;
    }
}


/* =========================================================
   ACCESS SWITCH
   ========================================================= */

.auth-access-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    margin-top: 1rem;
    padding-top: 0.9rem;

    border-top:
        1px solid
        rgba(6, 72, 49, 0.11);

    color: #7a8881;

    font-size: 0.79rem;
    font-weight: 500;
    line-height: 1.35;
}

.auth-access-switch a {
    color: var(--auth-page-green);

    font-weight: 650;

    text-decoration: none;
}

.auth-access-switch a:hover,
.auth-access-switch a:focus-visible {
    color: var(--auth-gold-dark);
}

.auth-access-switch a:focus-visible {
    border-radius: 0.2rem;

    outline:
        2px solid
        var(--auth-gold);

    outline-offset: 0.2rem;
}

@media (max-width: 390px) {
    .auth-access-switch {
        margin-top: 0.8rem;
        padding-top: 0.75rem;
        font-size: 0.75rem;
    }
}