@font-face { font-family: 'Bricolage Grotesque'; font-weight: 200 800; font-display: swap; src: url('../../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 300 900; font-display: swap; src: url('../../fonts/figtree-latin-wght-normal.woff2') format('woff2'); }


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

    body.login {
        font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        margin: 0; padding: 0;
        background: #FFFFFF;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* ── outer split ── */
    .cl-layout {
        flex: 1;
        display: grid;
        grid-template-columns: 1fr 480px;
        min-height: 100vh;
    }

    /* ── image panel ── */
    .cl-panel {
        position: relative;
        overflow: hidden;
        background-color: #14232A;
        background-image:
            linear-gradient(180deg, rgba(10,20,50,.2) 0%, rgba(10,20,50,.55) 100%),
            var(--cl-hero);
        background-size: cover;
        background-position: center;
    }
    .cl-panel__overlay {
        position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(135deg, rgba(10,76,74,.22) 0%, transparent 55%);
    }
    .cl-panel__stripe {
        position: absolute; bottom: 0; left: 0; right: 0;
        height: 4px; z-index: 2;
        background: #C8962E;
    }

    /* ── form column ── */
    .cl-form-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 3rem 2.5rem;
        background: #FFFFFF;
        overflow: hidden;
    }

    /* ── #login reset ── */
    #login {
        width: 100%;
        max-width: 360px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* hide WP logo link — brand is in .cl-brand */
    .login .wp-login-logo,
    .login h1.wp-login-logo {
        position: absolute !important;
        width: 1px !important; height: 1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        margin: -1px !important; padding: 0 !important;
        border: 0 !important; white-space: nowrap !important;
    }

    /* ── #login width fix — core sets width:320px which overrides max-width ── */
    #login {
        width: 100% !important;
        max-width: 360px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── brand ── */
    .cl-brand {
        /* !important beats core .login * { padding:0 } reset */
        padding-bottom: 3.5rem !important;
        margin-bottom: 0 !important;
    }
    .cl-brand__link {
        display: inline-flex; align-items: center; gap: .6rem;
        text-decoration: none !important;
    }
    .cl-brand__img {
        width: 44px; height: 44px; object-fit: contain; display: block;
    }
    .cl-brand__wordmark {
        font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: 1.45rem; font-weight: 650;
        letter-spacing: -.025em; line-height: 1; color: #0B7A75;
    }
    .cl-brand__wordmark em { font-style: normal; font-weight: 400; color: inherit; }

    /* ── "Sign in" heading ── */
    /* !important needed on all spacing — core .login * { padding:0; margin:0 } resets everything */
    .cl-heading {
        font-family: 'Bricolage Grotesque', system-ui, sans-serif !important; font-size: 2.1rem !important; font-weight: 600 !important;
        letter-spacing: -.035em !important; line-height: 1.1 !important;
        color: #14232A !important;
        margin: 0 !important;
        padding-top: 0.5rem !important;
        padding-bottom: 2.75rem !important;
    }

    /* ── form shell — core sets bg, border, padding, overflow:hidden ── */
    #loginform,
    .login form {
        background: transparent !important;
        border: none !important; border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important; margin: 0 !important;
        /* override core overflow:hidden which clips floated button + register row */
        overflow: visible !important;
    }

    /* ── field spacing ── */
    #login form > p,
    .login form > p { margin: 0 0 1.25rem !important; }
    #login form .user-pass-wrap,
    .login form .user-pass-wrap { margin: 0 0 1.25rem !important; }
    #login form .user-pass-wrap > p,
    .login form .user-pass-wrap > p { margin: 0 !important; }
    #login form .forgetmenot,
    .login form .forgetmenot { margin: 0 0 .75rem !important; }

    /* core: #loginform p.submit { margin: -10px 0 20px } — ID beats class, so match it */
    #loginform p.submit,
    .login form p.submit {
        float: none !important; clear: both !important;
        width: 100% !important;
        margin: 1.5rem 0 0 !important;
        padding: 0 !important;
    }
    /* ensure the reCAPTCHA / any iframe inside form isn't clipped */
    .login form .g-recaptcha,
    .login form .recaptcha-container,
    #loginform > div,
    #loginform > .g-recaptcha {
        margin: 0 0 1.25rem !important;
        overflow: visible !important;
    }

    /* ── labels ── */
    .login label {
        display: block;
        font-size: .8125rem; font-weight: 600;
        color: #475569; margin: 0 0 .4rem;
    }
    .login .forgetmenot label {
        display: inline; font-weight: 500;
        color: #64748b; margin: 0;
    }

    /* ── inputs ── */
    .login input[type="text"].input,
    .login input[type="password"].input,
    .login input[type="text"],
    .login input[type="password"],
    .login form .input {
        display: block; width: 100%; max-width: none !important;
        background: #f8fafc;
        border: 1.5px solid #e2e8f0;
        border-radius: 3px;
        padding: .75rem 1rem;
        font-size: 1rem; font-family: inherit;
        color: #14232A; line-height: 1.4;
        transition: border-color .2s, box-shadow .2s;
        box-shadow: none;
    }
    .login input[type="text"]:focus,
    .login input[type="password"]:focus,
    .login form .input:focus {
        outline: none;
        border-color: #0B7A75;
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(10,76,74,.1);
    }

    /* show-password toggle */
    .login .wp-pwd { position: relative; }
    .login .wp-pwd .button.wp-hide-pw {
        position: absolute; top: 50%; right: .75rem;
        transform: translateY(-50%);
        background: none !important; border: none !important;
        box-shadow: none !important; padding: .25rem !important;
        color: #94a3b8; width: auto !important; min-width: 0 !important;
    }
    .login .wp-pwd input { padding-right: 2.75rem; }

    /* ── Log In button — core floats .button-primary right; kill it here ── */
    .login .button-primary,
    .wp-core-ui .button-primary.button-large,
    .wp-core-ui .button-primary,
    #wp-submit {
        float: none !important;
        display: block !important; width: 100% !important;
        background: #0B7A75 !important; border: none !important;
        border-radius: 3px !important;
        padding: .8rem 1.25rem !important;
        height: auto !important; min-height: 0 !important;
        font-size: 1rem !important; font-weight: 700 !important;
        font-family: inherit !important; text-align: center !important;
        text-shadow: none !important; color: #fff !important;
        box-shadow: 0 4px 16px rgba(10,76,74,.25) !important;
        line-height: 1.4 !important; cursor: pointer;
        transition: background .15s, box-shadow .15s, transform .15s !important;
    }
    .login .button-primary:hover,
    .wp-core-ui .button-primary:hover,
    .wp-core-ui .button-primary:focus {
        background: #C8962E !important;
        box-shadow: 0 6px 20px rgba(234,40,57,.28) !important;
        transform: translateY(-1px);
    }

    /* ── Create Free Account button ── */
    #loginform .cl-register-row,
    .cl-register-row {
        display: block !important;
        float: none !important;
        clear: both !important;
        margin: 1.25rem 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .cl-btn-register {
        display: block !important; width: 100% !important;
        text-align: center !important; text-decoration: none !important;
        background: transparent !important;
        border: 1.5px solid #0B7A75 !important;
        border-radius: 3px !important;
        padding: .8rem 1.25rem !important;
        font-size: 1rem !important; font-weight: 700 !important;
        font-family: inherit !important; color: #0B7A75 !important;
        box-shadow: none !important;
        height: auto !important; line-height: 1.4 !important;
        cursor: pointer;
        transition: background .15s, color .15s, transform .15s !important;
    }
    .cl-btn-register:hover {
        background: #0B7A75 !important;
        color: #fff !important; transform: translateY(-1px);
    }

    /* ── forgot password (#nav) ── */
    #login #nav {
        margin: 1.25rem 0 0 !important; padding: 0 !important;
        text-align: center;
    }
    #login #nav a[href*="action=register"],
    #login #nav a.wp-login-register { display: none !important; }
    #login #nav a[href*="lostpassword"],
    #login #nav a[href*="lost-password"] {
        font-size: .8125rem !important; font-weight: 500 !important;
        color: #64748b !important; text-decoration: none !important;
    }
    #login #nav a[href*="lostpassword"]:hover,
    #login #nav a[href*="lost-password"]:hover {
        color: #0B7A75 !important; text-decoration: underline !important;
    }

    /* ── notices / errors ── */
    .login .message, .login #login_error, .login .notice {
        border-radius: 3px; box-shadow: none;
        margin: 0 0 1.25rem !important;
    }

    /* ── back to site ── */
    #backtoblog { margin: 2rem 0 0 !important; text-align: center; }
    #backtoblog a {
        font-size: .8125rem !important; font-weight: 500 !important;
        color: #94a3b8 !important; text-decoration: none !important;
    }
    #backtoblog a:hover { color: #0B7A75 !important; }
    .login .privacy-policy-page-link { text-align: center; margin-top: .75rem; }
    .login .privacy-policy-page-link a { font-size: .75rem; color: #cbd5e1; }
    .language-switcher { display: none !important; }

    /* ── register page ── */
    /* hide core "Registration confirmation will be emailed to you." */
    #reg_passmail { display: none !important; }

    /* asterisk on required field labels */
    .cl-required {
        color: #dc2626 !important;
        font-weight: 700 !important;
        margin-left: .1em !important;
    }

    /* ToS checkbox row */
    .cl-tos-row {
        margin: 1.5rem 0 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }
    .cl-tos-label {
        display: flex !important;
        align-items: flex-start !important;
        gap: .625rem !important;
        cursor: pointer;
        font-size: .875rem !important;
        font-weight: 500 !important;
        color: #475569 !important;
        line-height: 1.5 !important;
    }
    .cl-tos-label input[type="checkbox"] {
        flex-shrink: 0 !important;
        margin: .2rem 0 0 !important;
        width: 1rem !important; height: 1rem !important;
        accent-color: #0B7A75;
        cursor: pointer;
    }
    .cl-tos-label a {
        color: #0B7A75 !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
        font-weight: 600 !important;
    }
    .cl-tos-label a:hover { color: #C8962E !important; }

    /* ── mobile ── */
    @media screen and (max-width: 782px) {
        /* The photo is dropped on small screens: it pushed the form below the fold. */
        .cl-panel { display: none; }
        .cl-layout {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            min-height: 100vh;
        }
        .cl-form-col {
            min-height: 0;
            justify-content: flex-start;
            /* generous side padding; enough bottom room for the register button */
            padding: 2.25rem 1.75rem 5rem !important;
            overflow-y: auto;
        }
        #login { max-width: 100% !important; }
        .cl-brand { padding-bottom: 2.5rem !important; }
        .cl-heading { padding-top: 0.5rem !important; padding-bottom: 2rem !important; }
    }

    .cl-brand__img { color: #0B7A75; width: 40px; height: 40px; }

    .cl-brand__logo { display: block; height: 56px; width: auto; }

    /* ── country dropdown: matches the text inputs ── */
    .login select,
    .login select.input {
        display: block; width: 100%; max-width: none !important;
        min-height: 3rem; height: auto;
        padding: .75rem 2.5rem .75rem 1rem;
        font-size: 1rem; font-family: inherit; line-height: 1.4;
        color: #14232A;
        background-color: #f8fafc;
        border: 1.5px solid #e2e8f0; border-radius: 3px;
        box-shadow: none; margin: 0;
        -webkit-appearance: none; appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 1rem center; background-size: .95rem;
        transition: border-color .2s, box-shadow .2s;
        cursor: pointer;
    }
    .login select:focus {
        outline: none; border-color: #0B7A75; background-color: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(10,76,74,.1);
    }
    .login select:invalid { color: #64748b; }
    .login select option { color: #14232A; }

    /* ── register page: tighter rhythm for the longer form ── */
    .login-action-register .cl-brand { padding-bottom: 2rem !important; }
    .login-action-register .cl-heading { padding-bottom: 1.75rem !important; }
    .login-action-register #login form > p { margin-bottom: 1.1rem !important; }

    @media screen and (max-width: 782px) {
        .login-action-register .cl-brand { padding-bottom: 1.5rem !important; }
        .login input[type="text"], .login input[type="password"], .login select { min-height: 3rem; }
        .cl-tos-label input[type="checkbox"] { width: 1.15rem !important; height: 1.15rem !important; }
    }

    /* ── register page: compact, so the logo and the whole form stay in view ── */
    .login-action-register .cl-form-col { justify-content: flex-start; padding: 1.5rem 2.5rem; }
    /* auto margins centre the form when it is short and keep the top reachable when it is tall */
    .login-action-register #login { margin: auto 0 !important; }
    .login-action-register .cl-brand { padding-bottom: .9rem !important; }
    .login-action-register .cl-brand__logo { height: 42px; }
    .login-action-register .cl-heading { font-size: 1.6rem !important; padding-top: 0 !important; padding-bottom: 1rem !important; }
    .login-action-register #login form > p,
    .login-action-register .cl-reg-names { margin: 0 0 .75rem !important; }
    .login-action-register label { margin: 0 0 .2rem; font-size: .78rem; }
    .login-action-register form .input,
    .login-action-register select {
        padding: .5rem .8rem; min-height: 2.6rem; font-size: 1rem; line-height: 1.3;
    }
    .login-action-register select { padding-right: 2.2rem; background-position: right .8rem center; }
    .cl-reg-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .cl-reg-names > p { margin: 0 !important; min-width: 0; }
    .login-action-register .cl-tos-row { margin: .8rem 0 0 !important; }
    .login-action-register .cl-tos-label { font-size: .8rem !important; line-height: 1.4 !important; gap: .5rem !important; }
    .login-action-register #registerform p.submit,
    .login-action-register form p.submit { margin: 1rem 0 0 !important; }
    .login-action-register #wp-submit { padding: .65rem 1.25rem !important; }
    .login-action-register #login #nav { margin: .9rem 0 0 !important; }
    .login-action-register #backtoblog { margin: 1rem 0 0 !important; }
    .login-action-register .message,
    .login-action-register #login_error { margin-bottom: .9rem !important; padding: .6rem .8rem; font-size: .85rem; }
    @media screen and (max-width: 782px) {
        .login-action-register .cl-form-col { padding: 1.25rem 1.25rem 2.5rem !important; }
        .login-action-register form .input, .login-action-register select { min-height: 2.75rem; }
    }
    @media screen and (max-width: 340px) {
        .cl-reg-names { grid-template-columns: minmax(0, 1fr); }
    }