/* Best Care sign-in page: dark green brand panel on the left, white card on the right. */

.bc-login {
    --bc-green: #1f9d2b;
    --bc-green-dark: #12801f;
    --bc-forest: #06321a;
    --bc-lime: #7ed957;
    --bc-ink: #18241b;
    --bc-muted: #5f6b63;
    --bc-line: #dbe3dd;
    --bc-field: #f6f8f7;
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--bc-ink);
    font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(60% 50% at 85% 20%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(160deg, #f4f8f5 0%, #e8f1ea 55%, #dfeee2 100%);
}

/* Photo set with CLINIC_LOGIN_IMAGE fills the page; the left side is shaded
   dark green so the brand text reads over it. The photo carries its own
   corner swooshes and crosses, so the CSS ones are hidden. */
.bc-login--photo {
    background: var(--bc-photo) center / cover no-repeat, #e8f1ea;
}
.bc-login.bc-login--photo::before {
    width: 100%;
    clip-path: none;
    background: linear-gradient(90deg, rgba(4, 38, 19, 0.9) 0%, rgba(6, 52, 26, 0.82) 30%, rgba(6, 52, 26, 0.45) 50%, rgba(6, 52, 26, 0) 64%);
}
.bc-login--photo .bc-swoosh,
.bc-login--photo .bc-cross {
    display: none;
}
.bc-login--photo .bc-clock {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}

/* Dark green panel with a curved right edge. */
.bc-login::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    width: 58vw;
    background:
        radial-gradient(80% 60% at 20% 15%, rgba(126, 217, 87, 0.22) 0%, rgba(126, 217, 87, 0) 60%),
        linear-gradient(150deg, rgba(4, 38, 19, 0.97) 0%, rgba(8, 64, 32, 0.93) 55%, rgba(12, 86, 40, 0.9) 100%);
    clip-path: ellipse(100% 125% at 0% 50%);
    z-index: 0;
}

/* Lime swoosh in the bottom-right corner. */
.bc-swoosh {
    position: fixed;
    right: -12vw;
    bottom: -22vh;
    width: 46vw;
    height: 46vh;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(126, 217, 87, 0.15) 0%, rgba(31, 157, 43, 0.75) 100%);
    transform: rotate(-18deg);
    z-index: 0;
}

/* Faint crosses. */
.bc-cross {
    position: fixed;
    width: 96px;
    height: 96px;
    opacity: 0.12;
    z-index: 0;
}
.bc-cross::before,
.bc-cross::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 4px;
}
.bc-cross::before { left: 33%; top: 0; width: 34%; height: 100%; }
.bc-cross::after { top: 33%; left: 0; width: 100%; height: 34%; }
.bc-cross--tl { top: -10px; left: -10px; color: #ffffff; }
.bc-cross--br { right: 24px; bottom: 24px; color: #ffffff; opacity: 0.35; }

.bc-clock {
    position: absolute;
    top: 22px;
    right: 40px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #3d4a41;
    font-weight: 600;
    font-size: 0.95rem;
}
.bc-clock__sep { opacity: 0.45; padding: 0 0.35rem; }

.bc-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 3rem;
    min-height: 100vh;
    max-width: 1440px;
    margin: 0 auto;
    padding: 4.5rem 4rem 3rem;
}

/* Brand panel */
.bc-hero {
    color: #ffffff;
    text-align: center;
    max-width: 640px;
    justify-self: center;
}
.bc-hero__mark {
    width: clamp(120px, 14vw, 200px);
    height: auto;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
.bc-hero__name {
    margin: 0.75rem 0 0;
    font-family: "Archivo Black", "Arial Black", sans-serif;
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    line-height: 1;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #8be23f 0%, #f2c200 35%, #9be23f 60%, #e9c400 85%, #7fdc3a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.bc-hero__sub {
    margin: 0.35rem 0 0;
    font-family: "Merriweather", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 2.15rem);
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.bc-hero__si {
    margin: 0.3rem 0 0;
    font-family: "Noto Sans Sinhala", sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 2vw, 1.75rem);
    color: var(--bc-lime);
}

.bc-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
}
.bc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
}
.bc-tile i {
    font-size: 1.75rem;
    color: var(--bc-lime);
}

.bc-tagline {
    position: relative;
    display: inline-block;
    margin: 2.25rem 0 0;
    font-family: "Great Vibes", cursive;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.05;
    color: #ffffff;
    transform: rotate(-7deg);
}
.bc-tagline svg {
    display: block;
    width: 75%;
    height: 18px;
    margin: 0.1rem 0 0 auto;
}

/* Sign-in card */
.bc-card {
    width: 100%;
    max-width: 580px;
    justify-self: center;
    padding: 2.75rem 3rem 2rem;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(9, 45, 22, 0.18), 0 2px 6px rgba(9, 45, 22, 0.06);
}
.bc-card__logo {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
}
.bc-card__rule {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--bc-line);
}
.bc-card__title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--bc-ink);
}
.bc-card__copy {
    margin: 0.35rem 0 1.5rem;
    color: var(--bc-muted);
}

.bc-field {
    display: flex;
    align-items: center;
    height: 60px;
    margin-bottom: 1rem;
    border: 1px solid var(--bc-line);
    border-radius: 12px;
    background: var(--bc-field);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.bc-field:focus-within {
    border-color: var(--bc-green);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(31, 157, 43, 0.14);
}
.bc-field.is-invalid { border-color: #d64545; }
.bc-field__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60%;
    border-right: 1px solid var(--bc-line);
    color: #5b6660;
    font-size: 1.15rem;
}
.bc-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 1rem;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1.05rem;
    color: var(--bc-ink);
}
.bc-field input::placeholder { color: #8a948e; }
.bc-field__toggle {
    width: 56px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #5b6660;
    font-size: 1.1rem;
    cursor: pointer;
}
.bc-field__toggle:focus-visible { outline: 2px solid var(--bc-green); outline-offset: -6px; border-radius: 10px; }

.bc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0 1.5rem;
}
.bc-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-weight: 600;
    color: var(--bc-ink);
    cursor: pointer;
}
.bc-check input {
    width: 20px;
    height: 20px;
    accent-color: var(--bc-green);
}
.bc-link {
    font-weight: 700;
    color: var(--bc-green);
}
.bc-link:hover { color: var(--bc-green-dark); }

.bc-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 60px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #27ad33 0%, #14891f 100%);
    box-shadow: 0 12px 24px rgba(20, 137, 31, 0.28);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}
.bc-submit:hover { filter: brightness(1.05); box-shadow: 0 14px 28px rgba(20, 137, 31, 0.34); }
.bc-submit:active { transform: translateY(1px); }
.bc-submit:focus-visible { outline: 3px solid rgba(31, 157, 43, 0.4); outline-offset: 3px; }

.bc-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--bc-muted);
    font-size: 0.95rem;
}
.bc-note i { color: #6b7770; }

.bc-alert {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid #f1c1c1;
    background: #fdf1f1;
    color: #8e2626;
    font-weight: 600;
}

/* Tablet and phone: brand panel shrinks to a header above the card. */
@media (max-width: 991.98px) {
    .bc-login::before {
        width: 100%;
        height: 360px;
        bottom: auto;
        clip-path: ellipse(120% 100% at 50% 0%);
    }
    .bc-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 3.5rem 16px 2rem;
    }
    .bc-clock { right: 16px; top: 14px; color: #e9f5ec; font-size: 0.85rem; }
    .bc-hero__mark { width: 84px; }
    .bc-hero__name { font-size: 2.4rem; }
    .bc-tiles,
    .bc-tagline { display: none; }
    .bc-card { padding: 2rem 1.25rem 1.5rem; border-radius: 22px; }
    .bc-card__title { font-size: 1.5rem; }
    .bc-card__logo { display: none; }
    .bc-card__rule:first-of-type { display: none; }
    .bc-swoosh { width: 80vw; right: -30vw; }
}

/* Photo layout on tablet and phone: shade the top behind the brand header. */
@media (max-width: 991.98px) {
    .bc-login.bc-login--photo::before {
        height: 100%;
        clip-path: none;
        background: linear-gradient(180deg, rgba(4, 38, 19, 0.92) 0%, rgba(6, 52, 26, 0.8) 30%, rgba(6, 52, 26, 0.25) 55%, rgba(6, 52, 26, 0) 70%);
    }
    .bc-login--photo .bc-clock { color: #3d4a41; }
}

/* ------------------------------------------------------------------------
   Fit on one screen: sizes follow the viewport height (dvh tracks Safari's
   toolbars), and decoration drops out on short screens instead of scrolling.
   ------------------------------------------------------------------------ */
.bc-layout {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: clamp(3rem, 7vh, 4.5rem);
    padding-bottom: clamp(1rem, 3vh, 3rem);
}
.bc-hero__mark { width: min(14vw, 19vh, 200px); }
.bc-hero__name { margin-top: min(0.75rem, 1.2vh); font-size: min(6vw, 8.5vh, 5.4rem); }
.bc-hero__sub { font-size: min(2.4vw, 3.6vh, 2.15rem); }
.bc-hero__si { font-size: min(2vw, 3vh, 1.75rem); }
.bc-tiles { margin-top: min(2.25rem, 3.5vh); }
.bc-tile { padding: min(1.1rem, 1.8vh) 0.5rem; }
.bc-tagline { margin-top: min(2.25rem, 3.5vh); font-size: min(3.4vw, 5vh, 3rem); }

.bc-card { padding: clamp(1.25rem, 4vh, 2.75rem) clamp(1.25rem, 3vw, 3rem) clamp(1rem, 3vh, 2rem); }
.bc-card__logo { width: auto; max-width: 100%; max-height: clamp(64px, 14vh, 140px); }
.bc-card__rule { margin: clamp(0.75rem, 2.2vh, 1.5rem) 0; }
.bc-card__title { font-size: clamp(1.3rem, 3.4vh, 1.85rem); }
.bc-card__copy { margin-bottom: clamp(0.75rem, 2.2vh, 1.5rem); }
.bc-field { height: clamp(46px, 6.6vh, 60px); margin-bottom: clamp(0.6rem, 1.6vh, 1rem); }
.bc-row { margin: 0.25rem 0 clamp(0.75rem, 2.2vh, 1.5rem); }
.bc-submit { height: clamp(48px, 6.6vh, 60px); }

@media (min-width: 992px) and (max-height: 760px) {
    .bc-tagline { display: none; }
}
@media (min-width: 992px) and (max-height: 640px) {
    .bc-tiles { display: none; }
}

/* Phones and tablets: compact brand header above the card. */
@media (max-width: 991.98px) {
    .bc-layout {
        align-content: center;
        gap: clamp(0.75rem, 2.5vh, 1.5rem);
        padding: clamp(2.5rem, 7vh, 3.5rem) 16px clamp(0.75rem, 2vh, 1.5rem);
    }
    .bc-hero__mark { width: clamp(44px, 9vh, 84px); }
    .bc-hero__name { margin-top: 0.25rem; font-size: clamp(1.6rem, 5vh, 2.4rem); }
    .bc-hero__sub { font-size: clamp(0.9rem, 2.4vh, 1.25rem); }
    .bc-hero__si { font-size: clamp(0.8rem, 2vh, 1.1rem); }
    .bc-card { padding: clamp(1rem, 3vh, 2rem) 1.25rem; }
    .bc-card__title { font-size: clamp(1.25rem, 3.2vh, 1.5rem); }
    .bc-card__copy { font-size: 0.9rem; }
}
@media (max-width: 991.98px) and (max-height: 700px) {
    .bc-hero__si,
    .bc-note,
    .bc-card__rule { display: none; }
}
@media (max-width: 991.98px) and (max-height: 600px) {
    .bc-hero__sub,
    .bc-card__copy { display: none; }
}

/* Success notice (reset link sent) and the centred "Back to sign in" row. */
.bc-alert--ok { border-color: #bfe3b8; background: #eef9eb; color: #155a22; }
.bc-row--center { justify-content: center; margin: clamp(0.75rem, 2vh, 1.25rem) 0 0; }