* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --purple-dark: #6a11cb;
    --purple-light: #a044ff;
    --bg: #f5f7fb;
    --card-bg: #eef1f6;
    --text-dark: #1a1a2e;
    --text-muted: #888;
    --white: #ffffff;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
    /* top padding keeps the fixed Back to Home pill clear of the card */
    padding: 72px 16px 24px;
}

/* ===== BACK TO HOME (top-left fixed) ===== */
.back-home {
    position: fixed;
    top: 20px;
    left: 24px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 30px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(106,17,203,0.18);
    color: var(--purple-dark);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 14px rgba(106,17,203,0.1);
}

.back-home:hover {
    background: var(--purple-dark);
    color: white;
    border-color: var(--purple-dark);
    box-shadow: 0 6px 20px rgba(106,17,203,0.3);
    transform: translateX(-2px);
}

.back-home i { font-size: 16px; }

/* ===== ANIMATED BACKGROUND BLOBS ===== */
.bg-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    animation: drift 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.bg-blob-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #a044ff, #6a11cb);
    top: -180px; left: -120px;
    animation-delay: 0s;
}

.bg-blob-2 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, #6a11cb, #a044ff);
    bottom: -140px; right: -100px;
    animation-delay: -5s;
}

.bg-blob-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #a044ff80, transparent);
    top: 50%; right: 30%;
    animation-delay: -9s;
    animation-duration: 16s;
}

@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.06); }
    66%       { transform: translate(-20px, 25px) scale(0.95); }
}

/* ===== WRAPPER ===== */
.wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    width: 980px;
    max-width: 100%;
    min-height: 560px;
    background: var(--white);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(106, 17, 203, 0.15), 0 8px 24px rgba(0,0,0,0.06);
    animation: fadeUp 0.7s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== LEFT PANEL ===== */
.left {
    width: 46%;
    min-width: 0;
    background: linear-gradient(145deg, #6a11cb 0%, #8b2fec 50%, #a044ff 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 44px;
    position: relative;
    overflow: hidden;
}

.left::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    top: -100px; right: -100px;
}

.left::after {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    bottom: -70px; left: -70px;
}

.left-inner { position: relative; z-index: 1; width: 100%; }

.left-icon {
    width: 72px; height: 72px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 28px;
    backdrop-filter: blur(6px);
    font-size: 30px;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); }
    50%       { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
}

.left h1 {
    overflow-wrap: anywhere;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    line-height: 1.35;
    margin-bottom: 14px;
    font-weight: 700;
}

.left p {
    font-size: 14px;
    opacity: 0.8;
    line-height: 1.7;
    margin-bottom: 32px;
    font-weight: 300;
}

.left-divider {
    width: 40px; height: 2px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    margin: 0 auto 24px;
}

.left-question {
    font-size: 13px;
    opacity: 0.75;
    margin-bottom: 14px;
}

.btn-register {
    padding: 11px 32px;
    border-radius: 30px;
    border: 2px solid rgba(255,255,255,0.6);
    background: transparent;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
    margin-bottom: 20px;
}

.btn-register:hover {
    background: white;
    color: var(--purple-dark);
    border-color: white;
}

/* Back to home link inside left panel */
.btn-back-left {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: 0.25s;
    margin-top: 6px;
}

.btn-back-left:hover {
    color: white;
    gap: 10px;
}

/* ===== RIGHT PANEL ===== */
.right {
    width: 54%;
    padding: 52px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    min-width: 0;
}

.right-header { margin-bottom: 28px; }

.right-header h2 {
    overflow-wrap: anywhere;
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 6px;
}

.right-header p {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 300;
}

/* ===== MESSAGES ===== */
.messages { margin-bottom: 16px; }

.alert-error, .alert-success {
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Success messages (e.g. "You have been logged out.") fade out and collapse by themselves */
.alert-success[data-auto-dismiss] {
    max-height: 120px;
    overflow: hidden;
    transition: opacity 0.5s ease, max-height 0.5s ease, margin 0.5s ease, padding 0.5s ease, border-width 0.5s ease;
}

.alert-success[data-auto-dismiss].is-hiding {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .alert-success[data-auto-dismiss] { transition: none; }
}

/* ===== INPUT GROUP ===== */
.input-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 7px;
    display: block;
}

.input-wrap {
    position: relative;
    margin-bottom: 18px;
}

.input-wrap input {
    width: 100%;
    padding: 13px 46px;
    border-radius: 14px;
    border: 1.5px solid rgba(106,17,203,0.14);
    background: var(--bg);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    outline: none;
    transition: 0.25s;
    /* prevents iOS auto-zoom on focus (needs >=16px) while keeping visual size via transform-safe font */
    font-size: 16px;
}

.input-wrap input:focus {
    border-color: var(--purple-dark);
    background: white;
    box-shadow: 0 0 0 4px rgba(106,17,203,0.08);
}

.input-wrap input::placeholder { color: #bbb; }

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%; transform: translateY(-50%);
    color: #aaa;
    font-size: 17px;
    transition: 0.25s;
}

.input-wrap:focus-within .input-icon { color: var(--purple-dark); }

.input-toggle {
    position: absolute;
    right: 6px;
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    top: 50%; transform: translateY(-50%);
    color: #aaa;
    font-size: 17px;
    cursor: pointer;
    transition: 0.2s;
}

.input-toggle:hover { color: var(--purple-dark); }

/* ===== OPTIONS ===== */
.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 22px;
    color: var(--text-muted);
}

.options label {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    min-height: 32px;
}

.options input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--purple-dark);
    cursor: pointer;
}

.forgot-link {
    display: inline-block;
    padding: 6px 0;
    text-decoration: none;
    color: var(--purple-dark);
    font-weight: 500;
    transition: 0.2s;
}

.forgot-link:hover { text-decoration: underline; }

/* ===== LOGIN BUTTON ===== */
.login-btn {
    width: 100%;
    padding: 14px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 6px 20px rgba(106,17,203,0.32);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    letter-spacing: 0.3px;
    min-height: 48px;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(106,17,203,0.42);
}

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

/* ===== DIVIDER ===== */
.divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0;
    color: #ccc; font-size: 12px;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}

/* ===== SOCIAL ===== */
.social-row {
    display: flex; gap: 12px; justify-content: center;
    flex-wrap: wrap;
}

.social-btn {
    flex: 1;
    min-width: 44px;
    padding: 10px;
    border-radius: 12px;
    border: 1.5px solid #e8e8e8;
    background: white;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--text-muted);
    transition: 0.25s;
}

.social-btn:hover {
    border-color: rgba(106,17,203,0.3);
    color: var(--purple-dark);
    background: rgba(106,17,203,0.04);
    transform: translateY(-2px);
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   Desktop  : > 1024px  (default styles above)
   Laptop   : 901px - 1024px  (slightly narrower wrapper)
   Tablet   : 601px - 900px   (still 2-column but tighter)
   Mobile   : <= 600px        (stacked layout)
   Small    : <= 380px        (extra compact)
   ========================================================= */

/* ----- Laptop / small desktop ----- */
@media (max-width: 1024px) {
    .wrapper {
        width: 92%;
        min-height: 520px;
    }

    .left { padding: 50px 34px; }

    .right { padding: 44px 40px; }

    .left h1 { font-size: 23px; }
}

/* ----- Tablet ----- */
@media (max-width: 900px) {
    .wrapper {
        width: 94%;
    }

    .left {
        width: 42%;
        padding: 40px 28px;
    }

    .right {
        width: 58%;
        padding: 40px 32px;
    }

    .left h1 { font-size: 21px; }
    .left p { font-size: 13px; margin-bottom: 24px; }

    .bg-blob-1, .bg-blob-2 {
        opacity: 0.22;
    }
}

/* ----- Mobile (stacked layout) ----- */
@media (max-width: 768px) {
    body {
        padding: 60px 12px 16px;
        align-items: flex-start;
    }

    .wrapper {
        flex-direction: column;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        min-height: auto;
        border-radius: 20px;
    }

    .left {
        width: 100%;
        padding: 40px 28px 34px;
        border-radius: 0;
    }

    .left::before { width: 220px; height: 220px; top: -80px; right: -80px; }
    .left::after  { width: 160px; height: 160px; bottom: -50px; left: -50px; }

    .left h1 { font-size: 21px; }

    .right {
        width: 100%;
        padding: 32px 26px 36px;
    }

    .back-home {
        top: 14px;
        left: 14px;
        padding: 8px 16px;
        font-size: 12px;
    }

    .bg-blob { display: none; }
}

/* ----- Small phones ----- */
@media (max-width: 480px) {
    .wrapper {
        border-radius: 16px;
    }

    .left {
        padding: 34px 22px 28px;
    }

    .left-icon {
        width: 60px; height: 60px;
        font-size: 26px;
        margin-bottom: 20px;
    }

    .left h1 { font-size: 19px; }
    .left p { font-size: 12.5px; margin-bottom: 20px; }
    .left-question { font-size: 12px; }

    .btn-register {
        padding: 10px 26px;
        font-size: 13px;
    }

    .right { padding: 28px 20px 32px; }

    .right-header h2 { font-size: 23px; }
    .right-header p { font-size: 13px; }

    .input-wrap input { padding: 12px 42px; }

    .options {
        font-size: 12.5px;
    }

    .login-btn { font-size: 14px; padding: 13px; }

    .social-row { gap: 8px; }
    .social-btn { font-size: 16px; padding: 9px; }
}

/* ----- Very small phones ----- */
@media (max-width: 360px) {
    .back-home {
        font-size: 11px;
        padding: 7px 12px;
        gap: 5px;
    }

    .left { padding: 28px 16px 24px; }
    .left h1 { font-size: 17px; }

    .right { padding: 24px 16px 28px; }

    .right-header h2 { font-size: 21px; }

    .input-icon, .input-toggle { font-size: 15px; }

    .options {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ----- Short screens (landscape phones / small laptops) ----- */
@media (max-height: 620px) and (min-width: 769px) {
    body { padding-top: 64px; }
    .wrapper { min-height: auto; }
    .left, .right { padding-top: 32px; padding-bottom: 32px; }
}

/* ===== First-impression extras ===== */
.left-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
}

.left-clinic {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: 0.78;
    margin: -14px auto 12px;
}



.mobile-register { display: none; }

/* =========================================================
   MOBILE LAYOUT (phones / small tablets)
   A short purple header (logo, clinic name, title, tagline) and the form on a
   white sheet with rounded top corners right under it, so the input fields
   are visible on the first screen. The Register link sits below the form.
   Keep this block LAST so it wins over the earlier mobile rules.
   ========================================================= */
@media (max-width: 768px) {
    body {
        padding: 0;
        align-items: flex-start;
        background: var(--white);
    }

    .wrapper {
        width: 100%;
        max-width: 520px;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        background: var(--white);
    }

    /* ----- Purple header ----- */
    .left {
        width: 100%;
        padding: 68px 24px 54px;      /* top space is for the Back to Home pill */
        flex-shrink: 0;
    }

    .left-inner { display: flex; flex-direction: column; align-items: center; }

    .left-icon {
        width: 54px; height: 54px;
        font-size: 25px;
        margin: 0 auto 12px;
        border-radius: 16px;
        animation: none;
    }
    .left-icon img { border-radius: 14px; }

    .left-clinic { margin: -2px 0 6px; font-size: 10.5px; }

    .left h1 {
        font-size: 20px;
        line-height: 1.3;
        margin: 0;
    }

    /* The divider and the Register button are not needed up here */
    .left-divider,
    .left-question,
    .left .btn-register { display: none; }

    .left-tagline {
        margin: 10px 0 0;
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
    }

    /* ----- White form sheet, overlapping the header ----- */
    .right {
        width: 100%;
        flex: 1;
        position: relative;
        margin-top: -26px;
        padding: 30px 22px 28px;
        background: var(--white);
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -8px 24px rgba(106, 17, 203, 0.10);
        justify-content: flex-start;
    }

    .right-header { margin-bottom: 20px; }
    .right-header h2 { font-size: 24px; margin-bottom: 4px; }
    .right-header p { font-size: 13.5px; }

    /* Register link under the form */
    .mobile-register {
        display: block;
        margin-top: 22px;
        text-align: center;
        font-size: 13.5px;
        color: var(--text-muted);
    }

    .mobile-register a {
        color: var(--purple-dark);
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-register a:active { text-decoration: underline; }

    /* Back to Home pill sits on the purple header */
    .back-home {
        top: 14px;
        left: 14px;
        padding: 7px 15px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.92);
    }
}

@media (max-width: 360px) {
    .left { padding: 62px 16px 50px; }
    .left h1 { font-size: 18px; }
    .right { padding: 26px 16px 24px; }
    .right-header h2 { font-size: 22px; }
}

/* =========================================================
   MOBILE: EASIER TO TAP AND TYPE
   Bigger fields and button, comfortable tap areas for the checkbox and the
   Forgot Password link, and room for the phone's bottom bar.
   ========================================================= */
@media (max-width: 768px) {
    .right { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

    .input-wrap { margin-bottom: 16px; }

    .input-wrap input {
        padding-top: 15px;
        padding-bottom: 15px;
        scroll-margin-top: 90px;     /* keeps the label visible when the keyboard opens */
    }

    .options { margin-bottom: 20px; }
    .options label { min-height: 44px; }
    .options input[type="checkbox"] { width: 20px; height: 20px; }
    .forgot-link { padding: 12px 0; }

    .login-btn {
        padding: 16px;
        font-size: 16px;
    }

    .login-btn:active { transform: scale(0.985); }

    .mobile-register a { padding: 6px 2px; }
}