.customer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px 0 20px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;

}
:root {
    --header-height: 120px; /* Adjust to match your header height */
    --footer-height: 300px; /* Adjust to match your footer height */
  }

.container.customer {
    min-height: calc(100vh - var(--header-height) - var(--footer-height));

}


.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 30px 0;
}

.customer-title-container {
    text-align: left;
    margin-bottom: 0;
}

.customer-title {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0;
    display: block;

    &.visible {
        display: block;
    }

    &.hide {
        display: none;
    }
}

.customer-logout {
    text-align: right;
    margin-bottom: 0;
}

.customer-form-container {
    max-width: 320px;
    width: 100%;
    padding: 0px 0 40px 0;
}

.login-form-error {
    color: red;
    margin-bottom: 10px;
}

.login-form-info {
    color: #232557;
    margin-bottom: 10px;
}

.login-form-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 24px 0;
}

.login-form-field {
    display: flex;
    flex-direction: column;
    width: 100%;

    .login-form-label {
        font-size: 14px;
        color: #a3a3a3;
        margin-bottom: 5px;
    }

    .login-form-input {
        padding: 0px 12px;
        border: 1px solid #000;
        background: #fff;
        height: 50px;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
    }
}

.login-form-input::placeholder {
    color: #a3a3a3;
}

.login-form-actions {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.login-form-actions a:hover {
    text-decoration: underline;
}


.login-form-button {
    padding: 15px 21px;
    background: #232557;
    color: white;
    border: 1px solid #000;
    text-align: center;
    text-transform: uppercase;
    height: 50px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        background: #fff;
        color: #232557;
        text-decoration: none;
        border: 1px solid #232557;
    }

    &--secondary {
        background-color: transparent;
        color: #232557;
        border: 1px solid #232557;

        &:hover {
            background: #232557;
            color: #fff;
            border: 1px solid #232557;
        }
    }
}


.login-form-forgot-password {
    margin-top: 10px;
    text-align: left;
    font-size: 16px;
    line-height: 23px;

    a {
        color: #000;
    }
}

.login-guest {
    margin-top: 20px;
    width: 100%;

    .login-guest-button {
        width: 100%;
        height: 50px;
    }
}

.login-password-recovery {
    /* Style, but form is now on reset_password page */
    width: 100%;
}

.login-guest-button {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 0;
}

/* Add form input styles */
.form-vertical {
  width: 100%;

  label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #a3a3a3;
    font-weight: normal;
  }

  input, select, textarea {
    width: 100%;
    padding: 15px 21px;
    margin-bottom: 10px;
    border: 1px solid #000;
    background: #fff;
    height: 50px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 16px;
  }

  button {
    background-color: #281D58;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    height: 50px;
  }
}

.hide {
  display: none;
}

.customer-content-container {
  width: 100%;
  max-width: 1320px;
  padding: 40px 0;
}