/* Popup Overlay */
.popup-overlay {
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    display: none;
    transition: opacity 0.3s;
}



#popmake-4624.popmake {
    width: 460px !important;
    min-width: auto !important;
    max-width: none !important;
    max-height: none !important;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0px 16px 30px -10px rgba(26, 34, 56, 0.2);
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    isolation: isolate;
    position: fixed !important;
    top: 200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 10000;
}

.popup-overlay.active {
    display: block;
    opacity: 1;
}

.popup-modal.active {
    display: flex;
}

/* Close Button */
.popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
}

/* Tabs Container */
.auth-tabs {
    display: none !important;
}

/* Single Tab Button */
.auth-tab {
    flex: 1;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 30px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1A2238;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Active Tab */
.auth-tab.active {
    background: #1A2238;
    box-shadow: 0px 4px 10px rgba(26, 34, 56, 0.3);
    color: #FFFFFF;
}

/* Forms container */
.auth-forms {
    width: 100%;
}

/* Login/Register form inside tabs */
.auth-form-login,
.auth-form-register {
    width: 100%;
}

/* UM form styling */
.pum-content .um,
.popup-modal .um-form {
    background: transparent;
    box-shadow: none;
    border-radius: 16px;
    font-family: 'Rubik', sans-serif;
    color: #333;
}

/* Input fields */
.pum-content .um-field-area input,
.popup-modal .um-field-area input {
    width: 100%;
    height: 48px;
    padding: 12px;
    background: #F8F8FB;
    border: 1px solid #DDD;
    border-radius: 6px;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 22px;
    color: #1A2238;
    margin-bottom: 1rem;
    box-sizing: border-box;
}
.pum-content .um-field-area input::placeholder,
.popup-modal .um-field-area input::placeholder {
    color: #B8B9B9;
    font-family: 'Rubik', sans-serif;
}

/* Buttons */
.pum-content .um-button,
.popup-modal .um-button {
    width: 100%;
    padding: 14px;
    background: #004AAD;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.pum-content .um-button:hover,
.popup-modal .um-button:hover {
    background: #003080;
}

/* Register button */
.pum-content .um-right .um-button.um-alt,
.popup-modal .um-right .um-button.um-alt {
    background: #eee;
    color: #333;
}

.pum-content .um-right .um-button.um-alt:hover,
.popup-modal .um-right .um-button.um-alt:hover {
    background: #ddd;
}

/* Checkbox */
.pum-content .um-field-checkbox,
.popup-modal .um-field-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.pum-content .um-field-checkbox input,
.popup-modal .um-field-checkbox input {
    margin-right: 8px;
}

/* Forgot password link */
.pum-content .um-link-alt,
.popup-modal .um-link-alt {
    display: block;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #004AAD;
    text-decoration: none;
}

.pum-content .um-link-alt:hover,
.popup-modal .um-link-alt:hover {
    text-decoration: underline;
}

/* Tabs container */
.auth-tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    gap: 20px;
    width: 388px;
    height: 46px;
    background: #F8F8FB;
    border-radius: 100px;
    margin-bottom: 30px; /* מרווח לפני שדות הטופס */
}

/* Tab buttons */
.auth-tab {
    flex: 1;
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-radius: 30px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1A2238;
    cursor: pointer;
    height: 34px;
    transition: all 0.3s ease;
}

/* Tab active */
.auth-tab.active {
    background: #1A2238;
    color: #FFFFFF;
    box-shadow: 0px 4px 10px rgba(26, 34, 56, 0.3);
}

.um-popup-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F8F8FB;
    border-radius: 40px;
    padding: 8px 10px;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
    width: 90%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.um-popup-tab {
    flex: 1;
    padding: 0.7rem 0;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 500;
    background: transparent;
    color: #9197A6;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    margin: 0 2px;
    box-shadow: none;
}

.um-popup-tab.active {
    background: #1A2238;
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,34,56,0.10);
    z-index: 1;
}

.um-popup-form {
    display: none;
}

.um-popup-form.active {
    display: block;
}

.um-popup-social-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 24px;
}

.um-popup-social-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 4px;
    width: 120px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #FF6A3D;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    color: #1A2238;
    cursor: pointer;
    opacity: 1;
    transition: box-shadow 0.2s, border-color 0.2s;
    text-align: center;
    flex: none;
    order: 0;
    flex-grow: 0;
}
.um-popup-social-btn:hover {
    box-shadow: 0 2px 8px rgba(255,106,61,0.10);
    border-color: #FF6A3D;
}

.um-popup-social-btn img {
    width: 24px;
    height: 24px;
    margin: 0; 
    display: inline-block;
}

.um-popup-social-title {
    margin: 0;
    margin-bottom: 12px;
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #9197A6;
}


/* Divider (line with "or" text) */
.um-popup-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 24px 0;
}

.um-popup-line {
    flex-grow: 1;
    height: 0;
    border-top: 0.5px solid #9197A6;
    margin: 0 12px;
}

.um-popup-or {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #9197A6;
    line-height: 22px;
}


.um-field {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 4px;
    max-width: 100%;
}

/* === Custom Login Popup Overrides (from Figma specs) === */

/* 1. Email label 24px below divider */
.um-popup-divider + .um-form .um-field-label:first-of-type label {
    margin-top: 24px !important;
}

/* 2. Error message under input */
.um-form .um-field-error {
    color: #CB4747 !important;
    font-family: 'Rubik', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.1px !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* 3. Email input box highlighted by default */
#um_field_4155_username .um-field-area input,
#um_field_4155_username .um-field-area input:focus {
    border: 1px solid #CB4747 !important;
    background: #F8F8FB !important;
    border-radius: 6px !important;
    height: 48px !important;
    padding: 12px !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
}

/* 4. Label style for all fields */
.um-form .um-field-label label {
    font-family: 'Rubik', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: #1A2238 !important;
    width: 100% !important;
    margin-bottom: 4px !important;
    align-self: stretch !important;
}

/* Input text color */
#um_field_4155_username .um-field-area input,
#um_field_4155_username .um-field-area input:focus,
#username-4155 {
    color: #1A2238 !important;
}
#um_field_4155_password .um-field-area input::placeholder,
#password-4155::placeholder {
    color: #9197A6 !important;
    opacity: 1 !important;
}

/* Placeholder color */
#um_field_4155_username .um-field-area input::placeholder,
#username-4155::placeholder {
    color: #9197A6 !important;
    opacity: 1 !important;
}
#um_field_4155_username .um-field-area input::placeholder,
#username-4155::placeholder {
    color: #1A2238 !important;
    opacity: 1 !important;
}

/* Email hint below input */
#um_field_4155_username .um-field-hint {
    color: #CB4747 !important;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.1px;
    margin-top: 4px;
    margin-bottom: 0;
    padding: 0;
    transition: color 0.2s;
}

/* When error is present, make hint red */
#um_field_4155_username .um-field-error + .um-field-hint {
    display: none !important;
}

#um_field_4155_username .um-field-area {
    display: flex;
    flex-direction: column;
}

#um_field_4155_username .um-field-help {
    order: 2;
    color: #CB4747 !important;
    font-family: 'Rubik', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.1px !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
#um_field_4155_username .um-form-field {
    order: 1;
}

/* Password input styling */
#um_field_4155_user_password .um-field-area input[type="password"] {
    height: 48px !important;
    padding: 12px !important;
    background: #F8F8FB !important;
    border-radius: 6px !important;
    border: 1px solid #DDD !important;
    font-family: 'Rubik', sans-serif !important;
    font-size: 16px !important;
    color: #B8B9B9 !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
}

/* Password placeholder color */
#um_field_4155_user_password .um-field-area input[type="password"]::placeholder {
    color: #B8B9B9 !important;
    opacity: 1 !important;
    font-family: 'Rubik', sans-serif !important;
}

/* Forgot password link styling */
#um_field_4155_user_password + .um-col-alt-b .um-link-alt,
#um_field_4155_user_password .um-link-alt,
.um-col-alt-b .um-link-alt {
    margin-top: 8px;
    margin-bottom: 16px;
    text-align: left;
    color: #034C95 !important;
    font-family: 'Rubik', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    text-decoration: none !important;
    transition: text-decoration 0.2s;
}

#um_field_4155_user_password + .um-col-alt-b .um-link-alt:hover,
#um_field_4155_user_password .um-link-alt:hover,
.um-col-alt-b .um-link-alt:hover {
    text-decoration: underline !important;
} 

#um_field_4155_user_password {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.um-col-alt-b {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
}

.um-col-alt-b .um-link-alt {
    margin-top: -20px !important;
    margin-bottom: 0 !important;
    color: #034C95 !important;
    font-family: 'Rubik', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    text-decoration: none !important;
    display: block !important;
    text-align: left !important;
    transition: text-decoration 0.2s;
    padding-left: 16px !important;
}