/*
 * Dial A Med portal sign-in page (login.php, body.dam-login). Loaded after dam-portal.css, which supplies the
 * brand tokens (--dam-*), fonts and focus outline. Wide screens: one card split into a red brand panel and the
 * form. Below 860px the brand panel becomes a compact banner above the form. The navy background has faint,
 * white-only pills and shapes that wander slowly along curving paths. All motion is decorative and is
 * switched off under prefers-reduced-motion.
 */

body.dam-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
    overflow-x: hidden;
    background: radial-gradient(circle at 18% 12%, #33367a 0%, var(--dam-navy) 42%, var(--dam-navy-dark) 100%);
    color: var(--dam-text);
}

/* ---------- Background: dot grid and two slow-drifting glows ---------- */

.dam-auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.dam-auth-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}

.dam-auth-glow {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .45;
}

.dam-auth-glow--top {
    top: -18vmax;
    right: -12vmax;
    background: radial-gradient(circle, #4a4fa8 0%, rgba(35, 36, 89, 0) 70%);
    animation: dam-auth-drift 22s ease-in-out infinite alternate;
}

.dam-auth-glow--blue {
    bottom: -22vmax;
    left: -14vmax;
    background: radial-gradient(circle, #5157c9 0%, rgba(35, 36, 89, 0) 70%);
    animation: dam-auth-drift 26s ease-in-out infinite alternate-reverse;
}

/* ---------- Background: faint white pills, tablets, crosses and rings drifting slowly behind the card ---------- */

/*
 * Fluid wandering: each shape drifts on X and Y with two separate ease-in-out animations whose periods never
 * line up, plus a slow turn, so together they trace slow curving paths with no visible stop or repeat.
 * --fx/--fy are registered so they can animate; a browser without @property support shows the shapes still.
 */
@property --fx {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --fy {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

.dam-float {
    --x: 50%;
    --y: 50%;
    --r: 0deg;
    --s: 1;
    --ax: 6vw;      /* horizontal swing either side of the start point */
    --ay: 7vh;      /* vertical swing */
    --tx: 31s;      /* seconds for one horizontal sweep */
    --ty: 43s;      /* seconds for one vertical sweep */
    --spin: 40deg;
    --delay: 0s;
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: block;
    translate: var(--fx) var(--fy);
    rotate: var(--r);
    scale: var(--s);
    animation:
        dam-float-x var(--tx) ease-in-out var(--delay) infinite alternate,
        dam-float-y var(--ty) ease-in-out calc(var(--delay) * 1.7) infinite alternate,
        dam-float-turn calc(var(--tx) + var(--ty)) ease-in-out var(--delay) infinite alternate;
    will-change: translate, rotate;
}

/* Capsule: two very faint white halves with a thin outline. */
.dam-float--capsule {
    width: 76px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .07) 0 50%, rgba(255, 255, 255, .03) 50% 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Round tablet with a score line. */
.dam-float--tablet {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .09)) center / 70% 1.5px no-repeat,
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025) 70%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.dam-float--cross {
    width: 40px;
    height: 40px;
    opacity: .06;
    border-radius: 4px;
    background:
        linear-gradient(#fff, #fff) center / 34% 100% no-repeat,
        linear-gradient(#fff, #fff) center / 100% 34% no-repeat;
}

.dam-float--ring {
    width: 64px;
    height: 64px;
    border: 6px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}

.dam-float-1  { --x: 6%;  --y: 12%; --r: -32deg; --s: 1.15; --ax: 5vw; --ay: 8vh;  --tx: 29s; --ty: 41s; --delay: -11s; }
.dam-float-2  { --x: 11%; --y: 72%; --s: 1.1;   --ax: 6vw; --ay: 9vh;  --tx: 37s; --ty: 27s; --spin: -55deg; --delay: -23s; }
.dam-float-3  { --x: 88%; --y: 9%;  --r: 12deg; --s: 1.2; --ax: 4vw; --ay: 7vh; --tx: 33s; --ty: 47s; --spin: 70deg; --delay: -5s; }
.dam-float-4  { --x: 83%; --y: 78%; --r: 28deg; --s: 1.3; --ax: 7vw; --ay: 6vh; --tx: 43s; --ty: 31s; --delay: -17s; }
.dam-float-5  { --x: 3%;  --y: 42%; --s: 1.4;   --ax: 3vw; --ay: 12vh; --tx: 39s; --ty: 53s; --delay: -29s; }
.dam-float-6  { --x: 93%; --y: 48%; --s: .8;    --ax: 3vw; --ay: 14vh; --tx: 27s; --ty: 49s; --spin: -45deg; --delay: -8s; }
.dam-float-7  { --x: 38%; --y: 4%;  --r: 70deg; --s: .75; --ax: 12vw; --ay: 3vh; --tx: 47s; --ty: 29s; --spin: -60deg; --delay: -19s; }
.dam-float-8  { --x: 28%; --y: 89%; --r: 20deg; --s: .8;  --ax: 10vw; --ay: 3vh; --tx: 41s; --ty: 33s; --spin: -80deg; --delay: -31s; }
.dam-float-9  { --x: 60%; --y: 91%; --r: -58deg; --s: .9; --ax: 9vw; --ay: 3vh; --tx: 35s; --ty: 25s; --delay: -14s; }
.dam-float-10 { --x: 70%; --y: 5%;  --s: .7;    --ax: 8vw; --ay: 3vh;  --tx: 31s; --ty: 37s; --delay: -2s; }
.dam-float-11 { --x: 94%; --y: 26%; --s: .9;    --ax: 3vw; --ay: 10vh; --tx: 45s; --ty: 35s; --spin: 50deg; --delay: -26s; }
.dam-float-12 { --x: 19%; --y: 30%; --r: 48deg; --s: .65; --ax: 4vw; --ay: 9vh; --tx: 25s; --ty: 39s; --spin: 65deg; --delay: -9s; }

@media (max-width: 859.98px) {
    /* Fewer, smaller shapes on phones and tablets: they sit in the margins above and below the card. */
    .dam-float { --s: .75; --ay: 2vh; }
    .dam-float-1  { --x: 4%;  --y: 2%; }
    .dam-float-2  { --x: 8%;  --y: 92%; }
    .dam-float-3  { --x: 84%; --y: 2%; }
    .dam-float-4  { --x: 72%; --y: 94%; }
    .dam-float-7  { --x: 44%; --y: 1%; }
    .dam-float-9  { --x: 40%; --y: 95%; }
    .dam-float-5,
    .dam-float-6,
    .dam-float-8,
    .dam-float-10,
    .dam-float-11,
    .dam-float-12 { display: none; }
}

/* ---------- Card ---------- */

.dam-auth {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 880px;
    min-height: 520px;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--dam-surface);
    box-shadow: 0 30px 60px -12px rgba(5, 6, 25, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    animation: dam-auth-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

.dam-auth.is-error {
    animation: dam-auth-rise .6s cubic-bezier(.2, .7, .2, 1) both, dam-auth-shake .45s ease .6s;
}

/* ---------- Brand panel ---------- */

.dam-auth__showcase {
    position: relative;
    display: flex;
    flex: 0 0 44%;
    flex-direction: column;
    padding: 2.5rem 2.25rem;
    overflow: hidden;
    background: linear-gradient(150deg, #e0262f 0%, var(--dam-red-dark) 55%, #6e000b 100%);
    color: #fff;
    isolation: isolate;
}

.dam-auth__brand {
    display: flex;
    align-items: center;
}

.dam-auth__brand img {
    width: 56px;
    height: 56px;
    margin-right: .9rem;
    border-radius: .9rem;
    box-shadow: 0 8px 20px rgba(60, 0, 6, .45), 0 0 0 2px rgba(255, 255, 255, .25);
}

.dam-auth__brand h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}

.dam-auth__brand p {
    margin: 0;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .78);
}

.dam-auth__headline {
    margin: auto 0 1.5rem;
    padding-top: 2.5rem;
    font-family: var(--dam-font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.dam-auth__headline span {
    display: block;
    color: #ffd7d9;
}

.dam-auth__features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dam-auth__features li {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .7rem;
    font-size: .925rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    animation: dam-auth-rise .5s cubic-bezier(.2, .7, .2, 1) both;
}

.dam-auth__features li:nth-child(1) { animation-delay: .25s; }
.dam-auth__features li:nth-child(2) { animation-delay: .35s; }
.dam-auth__features li:nth-child(3) { animation-delay: .45s; }

.dam-auth__feature-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.dam-auth__feature-icon .dam-icon {
    width: 18px;
    height: 18px;
}

/* Decorative medical shapes: a plus, a capsule and a ring; the plus and capsule float slowly. */
.dam-auth__deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.dam-auth__shape {
    position: absolute;
    display: block;
}

.dam-auth__shape--cross {
    top: 14%;
    right: -26px;
    width: 150px;
    height: 150px;
    opacity: .12;
    background:
        linear-gradient(#fff, #fff) center / 34% 100% no-repeat,
        linear-gradient(#fff, #fff) center / 100% 34% no-repeat;
    border-radius: 14px;
    animation: dam-auth-float 9s ease-in-out infinite;
}

.dam-auth__shape--capsule {
    bottom: 18%;
    right: 12%;
    width: 92px;
    height: 34px;
    border-radius: 999px;
    opacity: .2;
    background: linear-gradient(90deg, #fff 0 50%, transparent 50%);
    box-shadow: inset 0 0 0 2px #fff;
    transform: rotate(-35deg);
    animation: dam-auth-float-tilt 11s ease-in-out infinite;
}

.dam-auth__shape--ring {
    bottom: -70px;
    left: -60px;
    width: 220px;
    height: 220px;
    border: 28px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

/* ---------- Form panel ---------- */

.dam-auth__panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 2.75rem 2.75rem 1.5rem;
}

.dam-auth__form {
    width: 100%;
    max-width: 340px;
    margin: auto;
}

.dam-auth__title {
    margin: 0 0 .3rem;
    font-family: var(--dam-font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--dam-navy);
}

.dam-auth__lead {
    margin: 0 0 1.6rem;
    color: var(--dam-muted);
}

.dam-auth__alert {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .7rem .85rem;
    border: 1px solid #fecaca;
    border-left: 4px solid var(--dam-red);
    border-radius: .6rem;
    background: var(--dam-red-soft);
    color: #991b1b;
    font-size: .9rem;
    font-weight: 500;
}

.dam-auth__alert .dam-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--dam-red);
}

.dam-auth__form label {
    margin-bottom: .4rem;
    font-size: .875rem;
    font-weight: 600;
    color: #374151;
}

.dam-auth__field {
    position: relative;
}

.dam-auth__field-icon {
    position: absolute;
    top: 50%;
    left: .85rem;
    display: flex;
    color: #9096a8;
    transform: translateY(-50%);
    transition: color .15s ease;
    pointer-events: none;
}

.dam-auth__field-icon .dam-icon,
.dam-auth__reveal .dam-icon {
    width: 18px;
    height: 18px;
}

.dam-auth__field:focus-within .dam-auth__field-icon {
    color: var(--dam-red);
}

.dam-auth__form .form-control {
    height: auto;
    padding: .72rem .85rem .72rem 2.6rem;
    border: 1px solid #d5d8e2;
    border-radius: .65rem;
    background-color: #f8f9fc;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.dam-auth__form .form-control:hover {
    border-color: #b9bdcc;
}

.dam-auth__form .form-control:focus {
    border-color: var(--dam-red);
    background-color: #fff;
    box-shadow: 0 0 0 .22rem rgba(220, 38, 38, .14);
}

.dam-auth__form .dam-auth__password {
    padding-right: 2.9rem;
}

.dam-auth__reveal {
    position: absolute;
    top: 50%;
    right: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #6b7280;
    transform: translateY(-50%);
    cursor: pointer;
}

.dam-auth__reveal:hover {
    background: #eef0f5;
    color: var(--dam-navy);
}

.dam-auth__reveal[hidden] {
    display: none;
}

.dam-auth__reveal-hide,
.dam-auth__reveal[aria-pressed="true"] .dam-auth__reveal-show {
    display: none;
}

.dam-auth__reveal[aria-pressed="true"] .dam-auth__reveal-hide {
    display: flex;
}

.dam-auth__hint {
    margin: .4rem 0 0;
    font-size: .8rem;
    font-weight: 600;
    color: #b45309;
}

.dam-auth__hint:empty {
    display: none;
}

/* Sign-in button: red gradient pill with a sliding arrow; a spinner replaces the arrow while submitting. */
.dam-auth__submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1.6rem;
    padding: .78rem 1rem;
    border: 0;
    border-radius: 2rem;
    background: linear-gradient(135deg, #ef3b44 0%, var(--dam-red) 45%, var(--dam-red-dark) 100%);
    color: #fff;
    font-family: var(--dam-font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 22px -8px rgba(220, 38, 38, .65);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.dam-auth__submit:hover,
.dam-auth__submit:focus {
    color: #fff;
    filter: brightness(1.05);
    box-shadow: 0 14px 26px -8px rgba(220, 38, 38, .75);
    transform: translateY(-1px);
}

.dam-auth__submit:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px -6px rgba(220, 38, 38, .7);
}

.dam-auth__submit .dam-icon {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

.dam-auth__submit:hover .dam-icon {
    transform: translateX(3px);
}

.dam-auth__spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dam-auth-spin .7s linear infinite;
}

.dam-auth__submit.is-busy {
    cursor: progress;
    filter: saturate(.85);
    transform: none;
}

.dam-auth__submit.is-busy .dam-auth__spinner {
    display: inline-block;
}

.dam-auth__submit.is-busy .dam-icon {
    display: none;
}

.dam-auth__footer {
    margin: 2rem 0 0;
    font-size: .78rem;
    text-align: center;
    color: #9ca3af;
}

/* ---------- Narrow screens: brand panel becomes a banner above the form ---------- */

@media (max-width: 859.98px) {
    .dam-auth {
        flex-direction: column;
        max-width: 420px;
        min-height: 0;
    }

    .dam-auth__showcase {
        flex: 0 0 auto;
        padding: 1.5rem 1.5rem 1.4rem;
    }

    .dam-auth__headline {
        margin: 1.1rem 0 0;
        padding-top: 0;
        font-size: 1.2rem;
    }

    .dam-auth__headline span {
        display: inline;
    }

    .dam-auth__features {
        display: none;
    }

    .dam-auth__shape--cross {
        top: -20px;
        right: -30px;
        width: 120px;
        height: 120px;
    }

    .dam-auth__shape--capsule,
    .dam-auth__shape--ring {
        display: none;
    }

    .dam-auth__panel {
        padding: 1.75rem 1.5rem 1.25rem;
    }

    .dam-auth__footer {
        margin-top: 1.5rem;
    }
}

@media (max-width: 400px) {
    body.dam-login {
        padding: 1rem .75rem;
    }

    .dam-auth__brand img {
        width: 48px;
        height: 48px;
    }

    .dam-auth__brand h1 {
        font-size: 1.3rem;
    }
}

/* ---------- Motion ---------- */

@keyframes dam-auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes dam-auth-shake {
    0%, 100% { transform: none; }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

@keyframes dam-auth-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-6vmax, 5vmax) scale(1.12); }
}

@keyframes dam-auth-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes dam-auth-float-tilt {
    0%, 100% { transform: rotate(-35deg) translateY(0); }
    50% { transform: rotate(-28deg) translateY(-10px); }
}

@keyframes dam-float-x {
    from { --fx: calc(var(--ax) * -1); }
    to { --fx: var(--ax); }
}

@keyframes dam-float-y {
    from { --fy: calc(var(--ay) * -1); }
    to { --fy: var(--ay); }
}

@keyframes dam-float-turn {
    from { rotate: var(--r); }
    to { rotate: calc(var(--r) + var(--spin)); }
}

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

@media (prefers-reduced-motion: reduce) {
    .dam-auth,
    .dam-auth.is-error,
    .dam-auth__features li,
    .dam-auth-glow,
    .dam-auth__shape,
    .dam-float {
        animation: none;
    }

    .dam-auth__submit,
    .dam-auth__submit .dam-icon,
    .dam-auth__form .form-control,
    .dam-auth__field-icon {
        transition: none;
    }

    .dam-auth__submit:hover,
    .dam-auth__submit:focus,
    .dam-auth__submit:hover .dam-icon {
        transform: none;
    }

    .dam-auth__spinner {
        animation-duration: 1.6s;
    }
}