/* Page background for home/welcome */
body.home-page {
    margin: 0;
    min-height: 100vh;
    background: #eaeaed;
}

.welcome-main-container {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 48px;
    width: 100%;
    margin: 0;
    padding: 56px clamp(16px, 4vw, 80px) 80px;
    /* Background now comes from body for full-bleed color */
    font-family: Foundation Sans, var(--default-font-family);
}

.welcome-main-container * {
    box-sizing: border-box;
}

.welcome-main-container input,
.welcome-main-container select,
.welcome-main-container textarea,
.welcome-main-container button {
    outline: 0;
}

/* Left: sign‑in card */
.welcome-main-container .frame-1 {
    background: #ffffff;
    padding: 32px;
    flex: 1 1 0;
    max-width: 540px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.welcome-main-container .frame-2 {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.welcome-main-container .frame-3 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welcome-main-container .sign-in {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: #000000;
}

.welcome-main-container .frame-4 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.welcome-main-container .frame-5,
.welcome-main-container .frame-6,
.welcome-main-container .frame-7 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.welcome-main-container .text-field,
.welcome-main-container .text-field-b {
    width: 100%;
    max-width: 470px;
}

.welcome-main-container .frame-8,
.welcome-main-container .frame-9,
.welcome-main-container .frame-c,
.welcome-main-container .frame-d {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.welcome-main-container .frame-9,
.welcome-main-container .frame-d {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.welcome-main-container .email-address,
.welcome-main-container .password,
.welcome-main-container .required,
.welcome-main-container .required-f,
.welcome-main-container .colon {
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
}

.welcome-main-container .required,
.welcome-main-container .required-f {
    color: #c9102e;
}

.welcome-main-container .frame-a,
.welcome-main-container .frame-10 {
    width: 100%;
    max-width: 470px;
}

.welcome-main-container .email-input,
.welcome-main-container .password-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 2px;
    border: 2px solid #d0d0ce;
    font-size: 16px;
    line-height: 1.3;
}

.welcome-main-container .email-input:focus,
.welcome-main-container .password-input:focus {
    border-color: #027dba;
}

.welcome-main-container .frame-11 {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.welcome-main-container .remove-red-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-12-04/1QAg3bxRus.png)
        no-repeat center;
    background-size: cover;
    cursor: pointer;
}

/* Make room inside password box for eye icon */
.welcome-main-container .password-input {
    padding-right: 44px;
}

.welcome-main-container .frame-13 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.welcome-main-container .checkbox-component {
    width: 18px;
    height: 18px;
    border: 1px solid #000000;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.welcome-main-container .checkbox-component:checked {
    background-color: #ffb81c;
    border-color: #ffb81c;
}

.welcome-main-container .checkbox-component:checked::after {
    content: "";
    width: 9px;
    height: 6px;
    border-left: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(-45deg) translateY(-1px);
}

.welcome-main-container .remember-me {
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
}

.welcome-main-container .primary-button {
    margin-top: 8px;
    padding: 10px 25px;
    background: #ffb81a;
    border: none;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 120px;
    align-self: flex-start;
}

.welcome-main-container .primary-button:hover {
    background: #555555;
}

.welcome-main-container .label-text-14 {
    color: #000000;
}

/* Hover/active state: dark button with white label */
.welcome-main-container .primary-button:hover .label-text-14,
.welcome-main-container .primary-button:active .label-text-14,
.welcome-main-container .primary-button:focus-visible .label-text-14 {
    color: #ffffff;
}

.welcome-main-container .primary-button:active,
.welcome-main-container .primary-button:focus-visible {
    background: #555555;
}

.welcome-main-container .forgot-password {
    margin-top: 12px;
    font-size: 16px;
    color: #027dba;
    text-decoration: underline;
    cursor: pointer;
}

.welcome-main-container .terms-of-use {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.4;
}

.welcome-main-container .enbridge-gas {
    color: #000000;
}

.welcome-main-container .terms-of-use-15 {
    color: #027dba;
    text-decoration: underline;
}

/* Right: registration card (styled to match sign‑in tile) */
.welcome-main-container .frame-16 {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1 1 0;
    max-width: 540px;
    padding: 32px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.welcome-main-container .frame-17 {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.welcome-main-container .frame-18 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welcome-main-container .register-mya {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    color: #000000;
}

.welcome-main-container .benefits-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.welcome-main-container .frame-1a,
.welcome-main-container .frame-1b,
.welcome-main-container .frame-1d,
.welcome-main-container .frame-1f {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.welcome-main-container .check,
.welcome-main-container .check-1c,
.welcome-main-container .check-1e,
.welcome-main-container .check-20 {
    width: 24px;
    height: 24px;
    background-size: cover;
    flex-shrink: 0;
}

.welcome-main-container .check {
    background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-12-04/QoLULSLDYh.png)
        no-repeat center;
}

.welcome-main-container .check-1c {
    background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-12-04/Pnr6SwxxHD.png)
        no-repeat center;
}

.welcome-main-container .check-1e {
    background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-12-04/hV0HNLZWYw.png)
        no-repeat center;
}

.welcome-main-container .check-20 {
    background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-12-04/dmnjs50aED.png)
        no-repeat center;
}

.welcome-main-container .easy-access,
.welcome-main-container .view-balance,
.welcome-main-container .monitor-usage,
.welcome-main-container .service-management {
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
}

.welcome-main-container .frame-21 {
    display: flex;
    align-items: flex-start;
}

.welcome-main-container .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    background: #555555;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 2px;
    cursor: pointer;
    border: none;
    text-decoration: none !important;
}

.welcome-main-container .label-text-22 {
    color: #ffffff;
    text-decoration: none !important;
}

/* Force no underline specifically for the Register link */
.welcome-main-container .register-link,
.welcome-main-container .register-link:hover,
.welcome-main-container .register-link:focus,
.welcome-main-container .register-link:active {
    text-decoration: none !important;
    color: #ffffff;
}

.welcome-main-container .register-link .label-text-22 {
    text-decoration: none !important;
    color: #ffffff;
}

/* Basic responsiveness */
@media (max-width: 991.98px) {
    .welcome-main-container {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 32px 16px 56px;
    }

    .welcome-main-container .frame-1,
    .welcome-main-container .frame-16 {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .welcome-main-container {
        padding: 24px 12px 40px;
    }

    .welcome-main-container .frame-1,
    .welcome-main-container .frame-16 {
        padding: 24px 16px;
    }

    .welcome-main-container .sign-in,
    .welcome-main-container .register-mya {
        font-size: 24px;
    }
}

@media (min-width: 1200px) {
    .welcome-main-container {
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
    }
}