/*
 * CONTABIL 2.3.1 - MODERN LOGIN
 * ------------------------------------------------------------
 * Visual implementation based on the supplied reference design.
 *
 * This stylesheet is intended for the supplied login.php.
 * It keeps the existing Contabil login process and image assets,
 * while modernizing the presentation.
 */

:root {
    --contabil-blue: #086b9c;
    --contabil-blue-dark: #075b82;

    --contabil-teal: #078995;
    --contabil-teal-dark: #076b76;
    --contabil-cyan: #21b7bb;

    --contabil-heading: #173d4c;
    --contabil-text: #4f6874;
    --contabil-muted: #7b909d;

    --contabil-border: #d4e1e7;
    --contabil-card: rgba(255, 255, 255, .97);
}


/* ============================================================
   PAGE
   ============================================================ */

html,
body {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

body {
    position: relative;

    font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;

    color: var(--contabil-text);

    background:
        linear-gradient(
            90deg,
            rgba(242, 252, 253, .96) 0%,
            rgba(248, 253, 254, .93) 42%,
            rgba(242, 251, 253, .89) 100%
        ),
        url("../images/login/blake-wisz-1554907-unsplash.jpg")
        center center / cover fixed no-repeat;

    overflow: hidden;
}


/*
 * Soft wash over the original background image.
 * This gives the same airy feel as the reference design.
 */
body:before {
    content: "";

    position: fixed;
    z-index: -1;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(41, 190, 193, .13),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 78%,
            rgba(54, 178, 202, .11),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.20),
            rgba(226,247,249,.38)
        );
}


/* ============================================================
   MAIN PAGE
   ============================================================ */

.login_page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    box-sizing: border-box;

    padding-top: 26px;
    padding-bottom: 30px;

    text-align: center;
}


/* ============================================================
   CONTABIL BRAND
   ============================================================ */

.brand {
    position: relative;
    z-index: 5;

    margin-bottom: 38px;

    text-align: center;
}

.brand h1 {
    margin: 0;

    color: var(--contabil-blue);

    font-family: "Ubuntu", "Segoe UI", Arial, sans-serif;

    font-size: 48px;
    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1.5px;

    text-shadow:
        0 2px 10px rgba(8, 107, 156, .08);
}

.brand_subtitle {
    margin-top: 7px;

    color: #738896;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* ============================================================
   TOP RIGHT MESSAGE
   ============================================================ */

.top_message {
    position: absolute;

    top: 38px;
    right: 5.5%;

    color: #738894;

    font-size: 10px;
    font-weight: 650;

    letter-spacing: 2px;

    text-align: right;
}

.top_message span,
.bottom_message span {
    color: #9aadb5;

    margin: 0 6px;
}

.top_message_line {
    width: 92px;
    height: 3px;

    margin: 15px 0 0 auto;

    background: var(--contabil-cyan);

    border-radius: 3px;
}


/* ============================================================
   LOGIN CARD
   ============================================================ */

#container {
    position: relative;
    z-index: 10;

    width: 566px;

    margin: 0 auto;

    box-sizing: border-box;

    background: var(--contabil-card);

    border: 1px solid rgba(255,255,255,.90);

    border-radius: 21px;

    overflow: hidden;

    box-shadow:
        0 28px 65px rgba(38, 82, 95, .15),
        0 7px 22px rgba(38, 82, 95, .07);

    text-align: left;
}


/* ============================================================
   CARD HEADER
   ============================================================ */

#top {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    padding: 17px 28px;

    background:
        linear-gradient(
            135deg,
            var(--contabil-teal-dark),
            var(--contabil-teal)
        );

    color: #fff;

    font-size: 16px;
    font-weight: 650;

    border-radius: 0;
}


/*
 * Small cyan accent line.
 */
#top:after {
    content: "";

    position: absolute;

    left: 28px;
    bottom: 0;

    width: 46px;
    height: 3px;

    background: #72e1dd;

    border-radius: 3px;
}


/* ============================================================
   LOGIN CONTENT
   ============================================================ */

#login_form {
    position: relative;

    width: 100%;

    min-height: 0;

    box-sizing: border-box;

    padding: 42px 40px 38px;

    background: #fff;

    color: var(--contabil-text);
}


/* ============================================================
   WELCOME
   ============================================================ */

#welcome_message {
    margin: 0 0 38px;

    text-align: center;
}

#welcome_message strong {
    display: block;

    color: var(--contabil-heading);

    font-size: 27px;
    line-height: 1.2;

    font-weight: 650;
}

#welcome_message span {
    display: block;

    margin-top: 8px;

    color: #728998;

    font-size: 16px;

    line-height: 1.4;
}


/* ============================================================
   LOGIN FIELD
   ============================================================ */

.login_field {
    display: flex;

    width: 100%;
    height: 64px;

    margin-bottom: 23px;

    box-sizing: border-box;
}


/* Icon section */
.login_icon {
    flex: 0 0 68px;

    width: 68px;
    height: 64px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f2f8f9;

    border: 1px solid var(--contabil-border);
    border-right: 0;

    border-radius: 11px 0 0 11px;
}

.login_icon img {
    display: block;

    max-width: 31px;
    max-height: 31px;

    width: auto;
    height: auto;
}


/* Input section */
.login_input {
    position: relative;

    flex: 1;

    min-width: 0;

    height: 64px;
}

.login_input input {
    display: block;

    width: 100%;
    height: 64px;

    box-sizing: border-box;

    padding: 0 18px;

    border: 1px solid var(--contabil-border);
    border-left: 0;

    border-radius: 0 11px 11px 0;

    background: #fff;

    color: var(--contabil-heading);

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: 16px;

    outline: none;

    box-shadow: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.login_input input:hover {
    background: #fcfeff;
}

.login_input input:focus {
    border-color: var(--contabil-cyan);

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(33, 183, 187, .10),
        0 4px 14px rgba(8, 127, 140, .05);
}

.login_field:focus-within .login_icon {
    border-color: var(--contabil-cyan);

    background: #eefafb;
}

.login_input input::placeholder {
    color: #899da8;
}


/* ============================================================
   PASSWORD EYE
   ============================================================ */

.password_input input {
    padding-right: 55px;
}

.password_toggle {
    position: absolute;

    top: 0;
    right: 0;

    width: 55px;
    height: 64px;

    border: 0;

    background: transparent;

    color: #7e96a3;

    font-size: 21px;

    cursor: pointer;

    outline: none;
}

.password_toggle:hover {
    color: var(--contabil-teal);
}


/* ============================================================
   FORGOT PASSWORD
   ============================================================ */

.forgot_password {
    margin-top: -7px;
    margin-bottom: 23px;

    text-align: right;
}

.forgot_password a {
    color: #087b9d;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;
}

.forgot_password a:hover {
    color: var(--contabil-teal-dark);

    text-decoration: underline;
}


/* ============================================================
   SIGN IN
   ============================================================ */

#submit_button {
    position: static;

    clear: both;

    margin: 0;

    text-align: center;
}

#submit_button input[type="submit"] {
    width: 100%;
    height: 64px;

    box-sizing: border-box;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #159ea8,
            #08747f
        );

    color: #fff;

    font-family: "Segoe UI", Arial, sans-serif;

    font-size: 20px;

    font-weight: 650;

    cursor: pointer;

    box-shadow:
        0 9px 20px rgba(8, 127, 140, .18);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

#submit_button input[type="submit"]:hover {
    transform: translateY(-1px);

    box-shadow:
        0 12px 24px rgba(8, 127, 140, .24);

    filter: brightness(1.03);
}

#submit_button input[type="submit"]:active {
    transform: translateY(0);
}


/* ============================================================
   REGISTER DIVIDER
   ============================================================ */

.register_divider {
    position: relative;

    height: 25px;

    margin: 23px 0 16px;

    text-align: center;
}

.register_divider:before,
.register_divider:after {
    content: "";

    position: absolute;

    top: 50%;

    width: 38%;

    height: 1px;

    background: #dce6e9;
}

.register_divider:before {
    left: 0;
}

.register_divider:after {
    right: 0;
}

.register_divider span {
    position: relative;
    z-index: 2;

    display: inline-block;

    padding: 0 12px;

    background: #fff;

    color: #7b909b;

    font-size: 13px;

    line-height: 25px;
}


/* ============================================================
   REGISTER BUSINESS
   ============================================================ */

#register_button {
    clear: both;

    text-align: center;
}

#register_button a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 60px;

    box-sizing: border-box;

    border: 1px solid #159ba5;

    border-radius: 11px;

    background: #fff;

    color: #08737e;

    text-decoration: none;

    font-size: 18px;

    font-weight: 650;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

#register_button a:hover {
    background: #f3fbfc;

    border-color: #087f8c;

    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(8, 127, 140, .08);
}

.register_icon {
    margin-right: 12px;

    font-size: 21px;
}

.register_hint {
    display: block;

    margin-top: 12px;

    color: #7d919c;

    font-size: 13px;

    line-height: 1.5;

    text-align: center;
}


/* ============================================================
   VALIDATION ERROR
   ============================================================ */

.error {
    width: calc(100% - 80px);

    margin: 18px auto 0;

    box-sizing: border-box;

    padding: 11px 13px;

    border: 1px solid rgba(200, 63, 88, .25);

    border-radius: 9px;

    background: #fff4f6;

    color: #c83f58;

    font-size: 13px;

    text-align: left;
}


/* ============================================================
   LEFT FEATURE PANEL
   ============================================================ */

.feature_panel {
    position: absolute;

    z-index: 2;

    width: 300px;

    text-align: left;
}

.left_panel {
    left: 4.1%;
    top: 238px;
}

.feature_item {
    display: flex;

    align-items: center;

    width: 285px;

    margin-bottom: 31px;
}

.feature_icon {
    flex: 0 0 76px;

    width: 76px;
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 31px;

    box-sizing: border-box;
}

.feature_text {
    padding-left: 22px;
}

.feature_text strong {
    display: block;

    color: #173d4c;

    font-size: 18px;

    font-weight: 650;

    line-height: 1.25;
}

.feature_text span {
    display: block;

    margin-top: 5px;

    color: #718997;

    font-size: 14px;

    line-height: 1.35;
}


/* Feature colors */
.feature_pos .feature_icon {
    background: #d9f5f5;
    color: #087f87;
}

.feature_inventory .feature_icon {
    background: #dceeff;
    color: #2784df;
}

.feature_customers .feature_icon {
    background: #eee5ff;
    color: #7b4ce0;
}

.feature_reports .feature_icon {
    background: #fff0db;
    color: #ef8b17;
}


/* ============================================================
   TRUSTED MESSAGE
   ============================================================ */

.trusted_message {
    margin-top: 133px;

    color: #657d89;

    font-size: 16px;

    line-height: 1.35;
}

.trusted_line {
    width: 92px;
    height: 3px;

    margin-top: 19px;

    background: var(--contabil-cyan);

    border-radius: 3px;
}


/* ============================================================
   RIGHT MESSAGE
   ============================================================ */

.right_panel {
    position: absolute;

    z-index: 2;

    top: 270px;
    right: 5.3%;

    width: 245px;

    text-align: center;
}

.more_than_pos {
    color: #08719a;

    font-family: "Segoe Print", "Comic Sans MS", cursive;

    font-size: 38px;

    line-height: 1.13;

    transform: rotate(-3deg);
}

.more_than_pos span {
    display: block;
}

.more_line {
    width: 245px;
    height: 3px;

    margin-top: 18px;

    background: #08719a;

    border-radius: 50%;

    transform: rotate(-7deg);
}


/* ============================================================
   BOTTOM RIGHT MESSAGE
   ============================================================ */

.bottom_message {
    position: absolute;

    right: 5.4%;
    bottom: 29px;

    color: #80939d;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;

    text-align: right;
}


/* ============================================================
   REMOVE OLD LINE BREAK SPACING
   ============================================================ */

#login_form > br {
    display: none;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 1100px) {

    .feature_panel,
    .right_panel,
    .top_message,
    .bottom_message {
        display: none;
    }
}

@media (max-width: 650px) {

    .login_page {
        padding-top: 20px;
    }

    .brand {
        margin-bottom: 25px;
    }

    .brand h1 {
        font-size: 37px;
    }

    .brand_subtitle {
        font-size: 10px;
        letter-spacing: 2px;
    }

    #container {
        width: calc(100% - 28px);
    }

    #login_form {
        min-height: 0;

        padding: 30px 22px 28px;
    }

    #welcome_message strong {
        font-size: 23px;
    }

    #welcome_message span {
        font-size: 14px;
    }

    .login_icon {
        flex-basis: 56px;
        width: 56px;
    }

    .login_input input {
        font-size: 14px;
    }

    #submit_button input[type="submit"] {
        font-size: 18px;
    }

    #register_button a {
        font-size: 16px;
    }
}


/* ============================================================
   ONE-SCREEN FIX
   IMPORTANT: everything above remains unchanged.
   Only vertical spacing is adjusted for desktop viewports.
   ============================================================ */

@media (min-width: 1101px) {
    html,
    body {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .login_page {
        height: 100vh;
        min-height: 0;
        box-sizing: border-box;
        padding-top: 12px;
        padding-bottom: 6px;
        overflow: hidden;
    }

    .brand {
        margin-bottom: 17px;
    }

    #container {
        width: 566px;
    }

    #top {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    #login_form {
        min-height: 0;
        padding-top: 21px;
        padding-bottom: 19px;
    }

    #welcome_message {
        margin-bottom: 22px;
    }

    .login_field {
        margin-bottom: 14px;
    }

    .forgot_password {
        margin-bottom: 14px;
    }

    .register_divider {
        margin-top: 14px;
        margin-bottom: 9px;
    }

    .register_hint {
        margin-top: 7px;
    }

    .login_footer {
        margin-top: 5px;
    }
}

/* Short desktop: preserve every element, only tighten spacing. */
@media (min-width: 1101px) and (max-height: 760px) {
    .login_page {
        padding-top: 6px;
        padding-bottom: 4px;
    }

    .brand {
        margin-bottom: 8px;
    }

    #top {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #login_form {
        padding-top: 14px;
        padding-bottom: 13px;
    }

    #welcome_message {
        margin-bottom: 14px;
    }

    .login_field {
        margin-bottom: 8px;
    }

    .forgot_password {
        margin-bottom: 8px;
    }

    .register_divider {
        margin-top: 8px;
        margin-bottom: 5px;
    }

    #register_button a {
        height: 54px;
    }

    .register_hint {
        margin-top: 5px;
        line-height: 1.3;
    }

    .login_footer {
        margin-top: 4px;
    }
}

/* Very short desktop: still show Register and its hint. */
@media (min-width: 1101px) and (max-height: 680px) {
    .brand h1 {
        font-size: 42px;
    }

    .brand_subtitle {
        margin-top: 3px;
    }

    #login_form {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #welcome_message {
        margin-bottom: 10px;
    }

    .login_field {
        height: 52px;
        margin-bottom: 6px;
    }

    .login_icon,
    .login_input,
    .login_input input,
    .password_toggle {
        height: 52px;
    }

    .forgot_password {
        margin-top: -4px;
        margin-bottom: 6px;
    }

    #submit_button input[type="submit"] {
        height: 52px;
    }

    .register_divider {
        height: 18px;
        margin-top: 6px;
        margin-bottom: 4px;
    }

    .register_divider span {
        line-height: 18px;
    }

    #register_button a {
        height: 44px;
    }

    .register_hint {
        margin-top: 3px;
        font-size: 11px;
    }

    .login_footer {
        display: none;
    }
}

/* Mobile keeps natural scrolling. */
@media (max-width: 650px) {
    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .login_page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
}


/* ============================================================
   FINAL ALIGNMENT CORRECTION
   ------------------------------------------------------------
   Based on the 1366 x 640 desktop viewport:
   - keep the complete design visible
   - center the left feature group against the login card
   - align the right handwritten panel with the card
   - do not change fonts, colors, wording or artwork
   ============================================================ */

@media (min-width: 1101px) and (max-height: 700px) {

    /* Left feature group:
       move the complete group upward and tighten only its
       vertical rhythm so Reports remains comfortably visible. */
    .left_panel {
        top: 190px;
    }

    .feature_item {
        margin-bottom: 20px;
    }

    /* Keep the trusted message associated with the feature group,
       without allowing it to fall into the bottom edge. */
    .trusted_message {
        margin-top: 92px;
    }

    /* Right-side handwritten message:
       bring it up to the visual middle of the card. */
    .right_panel {
        top: 238px;
    }
}

/* Exact short viewport tuning for the 640px-high screen shown. */
@media (min-width: 1101px) and (min-height: 620px) and (max-height: 660px) {

    .left_panel {
        top: 184px;
    }

    .feature_item {
        margin-bottom: 18px;
    }

    .trusted_message {
        margin-top: 78px;
    }

    .right_panel {
        top: 224px;
    }
}


/* ============================================================
   FINAL OPEN-SPACING ADJUSTMENT
   ------------------------------------------------------------
   Only for the short desktop viewport shown in the screenshot.
   Gives the Contabil heading, subtitle and login card more
   breathing room. No fonts, colors, side panels or wording
   are changed.
   ============================================================ */

@media (min-width: 1101px) and (min-height: 620px) and (max-height: 660px) {

    /* More breathing room between:
       Contabil 2.3.1
       POS & BUSINESS MANAGEMENT
       Login card */
    .brand h1 {
        margin-bottom: 0;
    }

    .brand_subtitle {
        margin-top: 7px;
    }

    .brand {
        margin-bottom: 24px;
    }
}


/* ============================================================
   FINAL FORM SPACING POLISH
   ------------------------------------------------------------
   Short desktop viewport only.
   Adds a little breathing room between:
     1. Password field and Forgot Password
     2. Sign In and OR/Register section
   No fonts, colors, side panels, wording or layout are changed.
   ============================================================ */

@media (min-width: 1101px) and (min-height: 620px) and (max-height: 660px) {

    /* Space after the password textbox before Forgot Password */
    .forgot_password {
        margin-top: 2px;
        margin-bottom: 10px;
    }

    /* Slightly more separation below Sign In */
    .register_divider {
        margin-top: 13px;
        margin-bottom: 8px;
    }
}


/* ============================================================
   FINAL MICRO-ADJUSTMENT
   ------------------------------------------------------------
   1. More breathing room between Forgot Password and Sign In.
   2. Lift the complete left feature panel slightly upward.
   3. Everything else remains unchanged.
   ============================================================ */

@media (min-width: 1101px) and (min-height: 620px) and (max-height: 660px) {

    /* More space between Forgot Password and Sign In */
    .forgot_password {
        margin-bottom: 16px;
    }

    /* Lift the complete left feature group slightly */
    .left_panel {
        top: 174px;
    }
}