/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

.tabcontent.active {
    display: block;
}

#popupOverlayReg {
    z-index: 9999;
}

/* Style the form container and tab buttons */
.form-container {
    max-width: 500px;
    margin: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

/* Style the placeholder text within input fields */
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder {
    color: #293080; /* Color of the placeholder text */
    opacity: 1; /* Make sure the placeholder is fully opaque */
    text-align: right; /* Align the placeholder text to the right */
    direction: rtl; /* Text direction right-to-left */
}

.tab {
    display: flex; /* Use flexbox layout */
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.tab button {
    flex: 1; /* Make each button take up equal width */
    background-color: #ffffff;
    color: #0f74e0;
    border: 1px solid #0f74e0;
    outline: none;
    cursor: pointer;
    padding: 14px 30px;
    transition: 0.3s;
    font-size: 17px;
    border-radius: 0;
    margin: 0; /* Adjust margin as needed, possibly remove if you want buttons to touch */
    position: relative;
}

.tab button.active {
    background-color: #0f74e0;
    color: #ffffff;
    border: 1px solid #0f74e0; /* Solid border for the active tab */
}

.tab .tablinks.active {
    background-color: #0f74e0;
    color: #ffffff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 20px;
    border: none;
}

/* Style the input fields and labels */
input[type=text], input[type=password], input[type=email], input[type=tel], label {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    color: #293080; /* Set text color */
    text-align: right; /* Align text to the right */
    direction: rtl; /* Enable right-to-left text direction */
}


/* Grid layout for the signup form */
.signup-grid {
    display: grid;
    grid-template-columns: 50% 50%; /* Two columns for most fields */
    grid-gap: 10px;
}

.full-width {
    grid-column: 1 / -1; /* Span full width for password and TOS checkbox */
}

.full-width {
    grid-column: 1 / -1; /* Span full width for password and TOS checkbox */
}

/* Style the submit buttons */
button[type=submit], #facebookLogin {
    width: 100%;
    background-color: #293080;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
    color: #fff;
    font-size: 18px;

}

button[type=submit]:hover, #facebookLogin:hover {
    background-color: #0f74e0;
}


/* Separator style with space for the word 'או' */
.separator {
    display: flex;
    align-items: center;
    justify-content: center; /* Ensure the content is centered */
    text-align: center;
    color: #0f74e0;
    position: relative; /* Position relative for absolute positioning of the word */
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #0f74e0;
    margin: 0 1em; /* Space on both sides of the separator lines */
}

/* Absolute positioning of the word 'או' */
.separator .or-text {
    position: absolute;
    background: #FFF; /* Background color of the word container should match the background of the parent element */
    padding: 0 0.5em; /* Padding on the sides of the word */
    color: #0f74e0; /* Color of the text */
    font-size: 1em; /* Adjust the font size as needed */
}


/* Icon styles for the tab buttons */
.icomoon-user-check::before, .icomoon-user-plus::before {
    font-family: 'icomoon';
    position: absolute;
    right: 100%; /* Place the icon to the left of the button text */
    margin-right: 8px;
}

.icomoon-user-check::before {
    content: "\e976";
}

.icomoon-user-plus::before {
    content: "\e974";
}

/* Style the fb_reg_button*/
.fb_reg_button {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    background-color: #1877F2;
    padding: 0;
    position: relative;
    border: none;
    outline: none;
}

.fb_icon_container {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.fb_icon {
    font-size: 28px;
    color: #fff;
}

.fb_separator {
    background-color: rgba(255, 255, 255, 0.7);
    width: 2px;
    height: 100%;
}

.fb_text {
    flex-grow: 1;
    text-align: center;
    padding-left: 12px;
    color: #fff;
    font-size: 18px;
    line-height: 50px;
}

/* Style the fb_reg_button*/
.fb_log_button {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    background-color: #1877F2;
    padding: 0;
    position: relative;
    border: none;
    outline: none;
}

.fb_icon_container {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.fb_icon {
    font-size: 28px;
    color: #fff;
}

.fb_separator {
    background-color: rgba(255, 255, 255, 0.7);
    width: 2px;
    height: 100%;
}

.fb_text {
    flex-grow: 1;
    text-align: center;
    padding-left: 12px;
    color: #fff;
    font-size: 18px;
    line-height: 50px;
}


.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #ccc;
}

/* General disabled style */
.disabled {
    opacity: 0.7; /* Slightly faded to indicate it's disabled */
    cursor: not-allowed; /* Change cursor to indicate the button is disabled */
    pointer-events: none; /* Disable button clicks */
}

/* Specific style for the Facebook button when disabled */
.fb_reg_button.disabled {
    background-color: #afa9a9; /* A muted version of the Facebook blue */
    color: #cccccc; /* Keep the text white for contrast */
}

/* Specific style for the registration button when disabled */
.signup_button.disabled {
    background-color: #afa9a9; /* Light grey which is a muted version of your active button color */
    color: #cccccc; /* Muted text color */
}


#popupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

#popupMessage {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

#popupOverlayReg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

#popupMessage {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}


/* Hide classes within elements with class "full-width" */
.full-width .fb_reg_button,
.full-width .fb_separator,
.full-width .fb_text,
.full-width p {
    display: none !important;
}

/* Hide classes within elements with class "fb_icon_container" */
.fb_icon_container,
.fb_icon_container .fb_icon {
    display: none !important;
}

/* Hide classes within elements with class "fb_log_button" */
.fb_log_button,
.fb_log_button .fb_icon_container,
.fb_log_button .fb_separator,
.fb_log_button .fb_text {
    display: none !important;
}