/* Content Container specific padding to match Figma */
    .content_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fafafa !important;
        border: 1px solid #eee !important;
        border-radius: 20px !important;
    }

    /* Top Back Arrow styling */
    .back-arrow-container {
        position: absolute;
        left: 32px;
        top: 40px;
        color: #AC4242;
        transition: opacity 0.2s;
    }
    .back-arrow-container:hover {
        opacity: 0.8;
    }

    /* Hide standard header/titles and use a custom styled one */
    .tabbed-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20px 40px 50px 40px;
        box-sizing: border-box;
    }
    
    @media (min-width: 768px) {
        .tabbed-form {
            padding: 40px 96px 50px 96px;
        }
    }

    .form-header-title {
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        color: #1A1A1A;
        letter-spacing: -0.02em;
        margin: 0;
        line-height: 1;
    }

    .form-full-divider {
        border: none;
        border-top: 1px solid #EAEAEA;
        margin: 20px -40px 25px -40px;
        width: calc(100% + 80px);
    }

    @media (min-width: 768px) {
        .form-full-divider {
            margin: 25px -96px 30px -96px;
            width: calc(100% + 192px);
        }
    }

    .safeguarded-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 16px;
        font-weight: 600;
        color: #AC4242;
        margin-bottom: 20px; /* 20px space below safeguard status */
    }

    /* Tab Menu styling */
    .tab-menu {
        display: flex;
        width: 100%;
        border-bottom: 2px solid #EAEAEA;
        margin-bottom: 30px;
    }

    .tab-btn {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        cursor: pointer;
        border: none;
        background: none;
        font-size: 18px;
        font-weight: 700;
        color: #707070;
        border-bottom: 2px solid transparent;
        transition: color 0.2s, border-color 0.2s;
    }

    .tab-btn.active {
        color: #AC4242 !important;
        border-bottom: 2px solid #AC4242 !important;
    }

    /* Hide/Show tab content */
    .tab-content {
        display: none;
        width: 100%;
    }

    .tab-content.active {
        display: block;
    }

    /* Form Fields styling */
    .form-group, .password-group {
        position: relative;
        width: 100%;
        margin-bottom: 0px;
    }

    .form-group span.label, .password-group span.label {
        display: none !important;
    }

    .form-group span.input, .password-group span.input {
        display: block;
        width: 100%;
    }

    .form-group input, .password-group input {
        width: 100% !important;
        height: 60px !important;
        background-color: #F2F2F2 !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        color: #1A1A1A !important;
        outline: none !important;
        box-sizing: border-box !important;
        transition: background-color 0.2s;
    }

    .form-group input:focus, .password-group input:focus {
        background-color: #EAEAEA !important;
    }

    /* Email field needs left padding for envelope icon */
    .tab-content-email .form-group input {
        padding: 0 20px 0 54px !important;
    }

    /* Hide default globe icon only (let flag icons show when selected) */
    .iti__selected-flag .iti__globe {
        display: none !important;
    }
    
    /* Inject custom red-brown globe SVG ONLY when no country code is selected */
    .iti__selected-flag:has(.iti__globe)::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12C21 13.6569 16.9706 15 12 15C7.02944 15 3 13.6569 3 12M21 12C21 10.3431 16.9706 9 12 9C7.02944 9 3 10.3431 3 12M12 21C7.02944 21 3 16.9706 3 12M12 21C10.3431 21 9 16.9706 9 12C9 7.02944 10.3431 3 12 3M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3M12 3C7.02944 3 3 7.02944 3 12' stroke='%23AC4242' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 6px;
    }

    /* Style the selected flag container for vertical separator line */
    .iti__selected-flag {
        border-right: 1px solid #D0D0D0 !important;
        padding-right: 12px !important;
        margin-right: 10px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        background-color: transparent !important;
    }

    /* Envelope Icon styling */
    .email-icon-wrapper {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #A0A0A0;
        pointer-events: none;
        z-index: 10;
    }

    /* Password field styling */
    .form-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 15px; /* 15px space below suggestions pills or phone input */
    }

    .password-group {
        position: relative;
        width: 100%;
    }

    .password-group input {
        padding: 0 54px 0 20px !important;
    }

    .password-toggle-btn {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #AC4242;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
    .password-toggle-btn:hover {
        opacity: 0.8;
    }

    .char-hint {
        color: #FF9443;
        font-size: 14px;
        font-weight: 500;
        margin-top: 15px;
        padding-left: 4px;
    }

    /* Error and Success styling */
    .error-content, .error-contentr {
        color: #EA4335;
        font-size: 15px;
        font-weight: 500;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-left: 4px;
        text-align: left;
    }

    .has-error input {
        background-color: #FEF4F4 !important;
        border: 1px solid #FE8D8D !important;
    }

    /* Buttons styling */
    .form-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 30px; /* 30px space below password char hint */
    }

    .submit_btn {
        width: 100% !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #AC4242 !important;
        color: #FFFFFF !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border: none !important;
        border-radius: 9999px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(172, 66, 66, 0.15) !important;
        transition: background-color 0.2s, opacity 0.2s !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .submit_btn:hover:not(:disabled) {
        background-color: #fe8d8d !important;
    }

    .submit_btn:disabled {
        background-color: #D0D0D0 !important;
        color: #FFFFFF !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        opacity: 0.8 !important;
    }

    /* Forgot password container and link */
    .forgot-password-container {
        text-align: center;
        margin-top: 15px;
    }
    
    .forgot-password-container a {
        font-size: 16px;
        font-weight: 600;
        color: #AC4242;
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .forgot-password-container a:hover {
        color: #fe8d8d;
        text-decoration: underline;
    }

    /* Sign up prompt container and text */
    .signup-prompt {
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: #2c2c2c;
        line-height: 1.5;
        margin: 20px 0 10px 0;
    }

    .signup-prompt a {
        font-weight: 700;
        color: #AC4242;
        text-decoration: underline;
        transition: color 0.2s;
    }

    .signup-prompt a:hover {
        color: #fe8d8d;
    }

    /* Google SSO styling */
    .google-sso-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 5px 0 15px 0;
    }

    .google-sso-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        background-color: #FFFFFF;
        border: 1px solid #EEEEEE;
        border-radius: 100px;
        font-family: 'Noto Sans', sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #1F1F1F;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .google-sso-btn:hover {
        background-color: #FAFAFA;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: #E0E0E0;
    }

    .google-sso-btn .google-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .google-sso-btn .google-text {
        line-height: 18px;
        white-space: nowrap;
    }

    /* Divider and Footer matching landing page */
    .form-divider {
        width: 100%;
        height: 1px;
        background-color: #EAEAEA;
        margin: 15px 0;
    }

    .company-title {
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        color: #1A1A1A;
        letter-spacing: -0.02em;
        margin: 0 0 10px 0;
    }

    .terms-text {
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: #707070;
        line-height: 1.6;
        margin: 0;
    }

    .terms-text a {
        font-weight: 700;
        color: #AC4242;
        text-decoration: none;
    }

    .terms-text a:hover {
        text-decoration: underline;
    }

    /* intl-tel-input styling overrides */
    .iti__selected-flag .iti__flag,
    .iti__selected-flag .iti__globe {
        display: none !important;
    }
    
    .iti__selected-flag:has(.iti__globe)::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12C21 13.6569 16.9706 15 12 15C7.02944 15 3 13.6569 3 12M21 12C21 10.3431 16.9706 9 12 9C7.02944 9 3 10.3431 3 12M12 21C7.02944 21 3 16.9706 3 12M12 21C10.3431 21 9 16.9706 9 12C9 7.02944 10.3431 3 12 3M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3M12 3C7.02944 3 3 7.02944 3 12' stroke='%23AC4242' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 6px;
    }

    .iti__selected-flag {
        border-right: 1px solid #D0D0D0 !important;
        padding-right: 12px !important;
        margin-right: 10px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        background-color: transparent !important;
    }

    .iti {
        width: 100% !important;
        display: block !important;
    }