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

.profile-reg-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;
    font-family: Foundation Sans, var(--default-font-family);
}

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

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

/* Prevent browser validation popups - use inline validation only */
.profile-reg-main-container input:invalid,
.profile-reg-main-container input:valid {
    box-shadow: none;
}


/* Left: registration form card */
.profile-reg-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);
}

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

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

.profile-reg-main-container .back-to-sign-in {
    font-size: 16px;
    color: #027dba;
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 4px;
}

.profile-reg-main-container .back-to-sign-in:hover {
    text-decoration: none;
}

.profile-reg-main-container .register-for-account {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: #000000;
}

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

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

/* Text field containers - each field is self-contained */
.profile-reg-main-container .text-field,
.profile-reg-main-container .text-field-b,
.profile-reg-main-container .text-field-12,
.profile-reg-main-container .text-field-1a {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 470px;
    gap: 8px;
    min-height: fit-content;
}

/* Label styling */
.profile-reg-main-container .label-input {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 1.3;
}

.profile-reg-main-container .label-input label,
.profile-reg-main-container .email-address,
.profile-reg-main-container .confirm-email-address,
.profile-reg-main-container .create-password,
.profile-reg-main-container .confirm-password {
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
    margin: 0;
    font-weight: normal;
}

.profile-reg-main-container .label-input label.email-address,
.profile-reg-main-container .label-input label.confirm-email-address,
.profile-reg-main-container .label-input label.create-password,
.profile-reg-main-container .label-input label.confirm-password {
    display: inline;
}

.profile-reg-main-container .required {
    color: #c9102e;
    font-size: 16px;
    line-height: 1.3;
}

/* Input wrapper for consistent styling */
.profile-reg-main-container .input-wrapper {
    width: 100%;
    position: relative;
}

.profile-reg-main-container .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Input field styling */
.profile-reg-main-container .email-input,
.profile-reg-main-container .password-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 2px;
    border: 2px solid #d0d0ce;
    font-size: 16px;
    line-height: 1.3;
    font-family: Foundation Sans, var(--default-font-family);
}

.profile-reg-main-container .email-input:focus,
.profile-reg-main-container .password-input:focus {
    border-color: #027dba;
    outline: none;
}

.profile-reg-main-container .email-input:invalid:not(:placeholder-shown),
.profile-reg-main-container .password-input:invalid:not(:placeholder-shown) {
    border-color: #c9102e;
}

/* Password input with eye icon */
.profile-reg-main-container .password-input {
    padding-right: 44px;
}

.profile-reg-main-container .remove-red-eye,
.profile-reg-main-container .remove-red-eye-22 {
    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;
    z-index: 1;
}

/* Checkbox section - separate from text fields */
.profile-reg-main-container .frame-13 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
}

.profile-reg-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;
    flex-shrink: 0;
    margin-top: 2px;
}

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

.profile-reg-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);
}

.profile-reg-main-container .marketing-info {
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
    margin: 0;
    cursor: pointer;
}

.profile-reg-main-container .label-input label.marketing-info {
    font-weight: normal;
}

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

.profile-reg-main-container .creating-account {
    color: #000000;
}

.profile-reg-main-container .terms-of-use-24 {
    color: #027dba;
    text-decoration: underline;
}

.profile-reg-main-container .dot {
    color: #000000;
}

.profile-reg-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;
}

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

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

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

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

/* Right: password requirements card (styled to match registration tile) */
.profile-reg-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);
}

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

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

.profile-reg-main-container .frame-19 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-reg-main-container .password-requirements {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    color: #000000;
}

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

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

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

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

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

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

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

.profile-reg-main-container .at-least-characters-long,
.profile-reg-main-container .must-include-uppercase-letters,
.profile-reg-main-container .must-include-lowercase-letters,
.profile-reg-main-container .must-include-number-or-symbol {
    font-size: 16px;
    line-height: 1.3;
    color: #000000;
}

.profile-reg-main-container .need-help-section {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.3;
}

.profile-reg-main-container .need-help-or-assistance {
    color: #000000;
}

.profile-reg-main-container .contact-us-link {
    color: #027dba;
    text-decoration: underline;
    cursor: pointer;
}

.profile-reg-main-container .contact-us-link:hover {
    text-decoration: none;
}

/* Error message styling - appears directly under input */
.profile-reg-main-container .field-validation-error {
    color: #c9102e;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 4px;
    margin-bottom: 0;
    display: block;
    min-height: 0;
    word-wrap: break-word;
    width: 100%;
    padding: 0;
}

/* Hide error messages when empty to maintain spacing */
.profile-reg-main-container .field-validation-error:empty {
    display: none;
    min-height: 0;
}

/* Ensure consistent spacing between fields */
.profile-reg-main-container .frame-7 > * {
    margin-bottom: 0;
}

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

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

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

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

    .profile-reg-main-container .register-for-account,
    .profile-reg-main-container .password-requirements {
        font-size: 24px;
    }
}

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