/* Global Nurse Gateway — Auth Shell (Login & Signup) — v1.4.7 */

/* ---- Suppress all WordPress/theme chrome ---- */
body.gng-auth-page #wpadminbar,
body.gng-auth-page .site-header,
body.gng-auth-page .site-footer,
body.gng-auth-page #masthead,
body.gng-auth-page #colophon,
body.gng-auth-page #page,
body.gng-auth-page .wp-site-blocks,
body.gng-auth-page header,
body.gng-auth-page footer,
body.gng-auth-page nav {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.gng-auth-page {
    margin:     0 !important;
    padding:    0 !important;
    overflow:   hidden;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* ================================================================
   Outer layout
   ================================================================ */
.gng-auth-wrap {
    display:    flex;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ================================================================
   LEFT — branding panel
   ================================================================ */
.gng-auth-left {
    width:       45%;
    flex-shrink: 0;
    display:     flex;
    flex-direction: column;
    justify-content: space-between;
    padding:     52px 56px;
    position:    relative;
    overflow:    hidden;

    /* Deep navy base */
    background-color: #0f172a;

    /* Aurora mesh — multiple soft glows */
    background-image:
        radial-gradient(ellipse 700px 500px at -5%  -5%,  rgba(56,168,216,0.28) 0%, transparent 65%),
        radial-gradient(ellipse 400px 600px at 105% 105%, rgba(56,168,216,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 300px 300px at 50%  55%,  rgba(99,179,237,0.06) 0%, transparent 65%);

    /* Subtle dot grid texture */
    background-image:
        radial-gradient(ellipse 700px 500px at -5%  -5%,  rgba(56,168,216,0.28) 0%, transparent 65%),
        radial-gradient(ellipse 400px 600px at 105% 105%, rgba(56,168,216,0.18) 0%, transparent 65%),
        url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
}

/* ---- Top: logo ---- */
.gng-auth-logo {
    display: block;
}

.gng-auth-logo a {
    display:         inline-block;
    text-decoration: none;
}

.gng-auth-logo img,
.gng-auth-logo-img {
    max-width:  180px;
    max-height: 56px;
    width:      auto;
    height:     auto;
    display:    block;
    /* Make logo visible on dark bg */
    filter: brightness(0) invert(1);
}

.gng-auth-logo-text {
    font-size:      22px;
    font-weight:    800;
    color:          #fff;
    letter-spacing: -.4px;
    line-height:    1.2;
}

.gng-auth-logo-text span {
    color: #38A8D8;
}

/* ---- Middle: main statement ---- */
.gng-auth-statement {
    flex: 1;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         40px 0;
}

.gng-auth-statement-eyebrow {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color:          #38A8D8;
    margin:         0 0 18px;
}

.gng-auth-statement-text {
    font-size:      36px;
    font-weight:    800;
    color:          #ffffff;
    line-height:    1.2;
    letter-spacing: -.8px;
    margin:         0 0 20px;
}

.gng-auth-statement-sub {
    font-size:   16px;
    color:       rgba(255,255,255,0.55);
    line-height: 1.65;
    margin:      0;
    max-width:   340px;
}

/* ---- Bottom: trust line ---- */
.gng-auth-trust {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding-top: 28px;
    border-top:  1px solid rgba(255,255,255,0.08);
}

.gng-auth-trust-dot {
    width:        6px;
    height:       6px;
    border-radius: 50%;
    background:   #38A8D8;
    flex-shrink:  0;
}

.gng-auth-trust-text {
    font-size: 13px;
    color:     rgba(255,255,255,0.4);
}

/* ================================================================
   RIGHT — form panel
   ================================================================ */
.gng-auth-right {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         60px 64px;
    background:      #ffffff;
    overflow-y:      auto;
}

.gng-auth-form-wrap {
    width:     100%;
    max-width: 400px;
}

/* ---- Heading block ---- */
.gng-auth-heading {
    font-size:      32px;
    font-weight:    800;
    color:          #0f172a;
    margin:         0 0 6px;
    letter-spacing: -.7px;
    line-height:    1.15;
}

.gng-auth-subheading {
    font-size:   14px;
    color:       #94a3b8;
    margin:      0 0 32px;
    line-height: 1.5;
}

/* Thin rule between heading and form */
.gng-auth-rule {
    height:        1px;
    background:    #f1f5f9;
    margin:        0 0 28px;
}

/* ================================================================
   Override gng-wrap / gng-form-container inside auth shell
   ================================================================ */
.gng-auth-page .gng-wrap {
    max-width: none !important;
    padding:   0    !important;
    margin:    0    !important;
}

.gng-auth-page .gng-form-container {
    max-width:     none        !important;
    border:        none        !important;
    border-radius: 0           !important;
    padding:       0           !important;
    background:    transparent !important;
    margin:        0           !important;
}

/* Hide the h2 — we render our own heading above */
.gng-auth-page .gng-form-container > h2 {
    display: none !important;
}

/* ================================================================
   Form fields
   ================================================================ */
.gng-auth-page .gng-form .gng-field {
    margin-bottom: 20px;
}

.gng-auth-page .gng-form label {
    font-size:     13px;
    font-weight:   600;
    color:         #374151;
    margin-bottom: 7px;
    letter-spacing: .1px;
}

.gng-auth-page .gng-form input[type="text"],
.gng-auth-page .gng-form input[type="email"],
.gng-auth-page .gng-form input[type="password"] {
    height:        48px;
    padding:       0 14px;
    border-radius: 10px;
    border:        1.5px solid #e2e8f0;
    background:    #f8fafc;
    font-size:     15px;
    color:         #0f172a;
    transition:    border-color .15s, box-shadow .15s, background .15s;
}

.gng-auth-page .gng-form input:focus {
    border-color: #38A8D8;
    background:   #fff;
    box-shadow:   0 0 0 2px rgba(56,168,216,0.15);
    outline:      none;
}

/* ---- Submit button ---- */
.gng-auth-page #gng-login-form .gng-btn-primary,
.gng-auth-page #gng-signup-form .gng-btn-primary {
    width:          100%;
    height:         48px;
    font-size:      15px;
    font-weight:    700;
    border-radius:  10px;
    margin-top:     4px;
    letter-spacing: .1px;
    background:     linear-gradient(135deg, #38A8D8 0%, #2a96c6 100%);
    box-shadow:     0 2px 8px rgba(56,168,216,0.3);
    transition:     box-shadow .15s, transform .1s;
}

.gng-auth-page #gng-login-form .gng-btn-primary:hover,
.gng-auth-page #gng-signup-form .gng-btn-primary:hover {
    box-shadow: 0 4px 14px rgba(56,168,216,0.4);
    transform:  translateY(-1px);
    opacity:    1;
}

.gng-auth-page #gng-login-form .gng-btn-primary:active,
.gng-auth-page #gng-signup-form .gng-btn-primary:active {
    transform:  translateY(0);
    box-shadow: 0 1px 4px rgba(56,168,216,0.25);
    opacity:    1;
}

/* ---- Alt action links ---- */
.gng-auth-page .gng-alt-action {
    font-size:  13px;
    color:      #94a3b8;
    margin-top: 16px;
    text-align: center;
}

.gng-auth-page .gng-alt-action a {
    color:       #38A8D8;
    font-weight: 600;
}

.gng-auth-page .gng-alt-action a:hover {
    text-decoration: underline;
}

/* ---- Alerts ---- */
.gng-auth-page .gng-message {
    border-radius: 8px;
    font-size:     13px;
}

/* ---- Resend section ---- */
.gng-auth-page #gng-resend-section {
    margin-top:    20px;
    padding:       16px 18px;
    background:    #f8fafc;
    border-radius: 10px;
    font-size:     13px;
    color:         #64748b;
    text-align:    center;
}

.gng-auth-page #gng-resend-section .gng-btn-secondary {
    width:         100%;
    margin-top:    10px;
    border-radius: 10px;
    font-size:     13px;
}

/* ---- Password toggle (SaaS-standard eye icon) ---- */
.gng-password-wrap {
    position: relative;
}

.gng-password-wrap input[type="password"],
.gng-password-wrap input[type="text"] {
    padding-right: 44px !important;
    width: 100%;
    box-sizing: border-box;
}

.gng-password-wrap .gng-pw-toggle,
.gng-password-wrap .gng-pw-toggle:hover,
.gng-password-wrap .gng-pw-toggle:focus,
.gng-password-wrap .gng-pw-toggle:active {
    position:       absolute !important;
    right:          12px !important;
    top:            50% !important;
    transform:      translateY(-50%) !important;
    background:     transparent !important;
    background-color: transparent !important;
    border:         none !important;
    box-shadow:     none !important;
    cursor:         pointer !important;
    padding:        4px !important;
    margin:         0 !important;
    line-height:    0 !important;
    border-radius:  4px !important;
    outline:        none !important;
    -webkit-appearance: none !important;
    appearance:     none !important;
    min-height:     0 !important;
    min-width:      0 !important;
    width:          auto !important;
    height:         auto !important;
}

.gng-password-wrap .gng-pw-toggle {
    color: #94a3b8 !important;
    transition: color .15s;
}

.gng-password-wrap .gng-pw-toggle:hover {
    color: #64748b !important;
}

.gng-password-wrap .gng-pw-toggle:focus-visible {
    box-shadow: 0 0 0 2px #38A8D8 !important;
}

.gng-password-wrap .gng-pw-toggle.active,
.gng-password-wrap .gng-pw-toggle.active:hover {
    color: #38A8D8 !important;
}

.gng-pw-toggle svg {
    display: block;
    pointer-events: none;
}

/* ================================================================
   Responsive — hide left panel below 860px
   ================================================================ */
@media (max-width: 860px) {
    body.gng-auth-page {
        overflow-y: auto;
    }

    .gng-auth-left {
        display: none;
    }

    .gng-auth-right {
        padding:     48px 28px;
        align-items: flex-start;
        padding-top: 56px;
    }

    .gng-auth-wrap {
        min-height: 100dvh;
    }
}