:root {
    --maxWidth: 685px;
    --grad1: linear-gradient(#f6f9ff, #f1f1f1), linear-gradient(to right, #e5b8bf, #6FBAFB);
    --color1: #ffffff00;
    --color2: #525249;
    --color3:#3c3c38;
    --color4: #8e8e8e;
    --color39:#edede5;
    --color5: #164dff;
    --svg-filter: invert(0.7) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(91%);
    --color6: #ffffff;
    --color7: #564a51;
    --color8: #ffffffc6;
    --hyperlink: #4c4c44;
    --hyperlink-hover: #363631;
    --color13: #454648;
    --color11: #626359;
    --color12:#2f2f2f;
    --color15: #d6d6d6;
    --color16: #5d5d5d;
    --colorShort: #ffa8a8;
    --colorLong:#a2f3c5;
    --colorNeutral:#fff6b3;
}

:root.dark-theme{
    --maxWidth: 685px;
    --grad1: linear-gradient(#111317, #1b1f28), linear-gradient(to right, #CF6978, #6FBAFB);
    --color1: #0c0d0f;
    --color2:#ffffff;
    --color3: #dfdfdf;
    --color4:#b7b7b7;
    --color39:#2a2a2a;
    --color5: #4973ff;
    --svg-filter: none;
    --color6: #111317;
    --color7: #d8d6ca;
    --color8: #000000c6;
    --hyperlink: #cacabb;
    --hyperlink-hover: #b0b0a3;
    --color11: #a7a89f;
    --color12:#e1e1e1;
    --color13: #B0B3B8;
    --color15: #383838;
    --color16: #A7A7A0;
    --colorShort: #580000;
    --colorLong:#005826;
    --colorNeutral:#5B5314;
}

/* --- Athiti Latin Letters --- */

@font-face {
    font-family: 'Athiti-Latin';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/athiti/pe0sMISdLIZIv1wAoDBCBfe_Kdxicw.woff2') format('woff2');
    unicode-range: U+0020-002F, U+003A-007E; /* basic Latin punctuation and letters */
}

@font-face {
    font-family: 'Athiti-Latin';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/athiti/pe0vMISdLIZIv1wICxJXKNWyAw.woff2') format('woff2');
    unicode-range: U+0020-002F, U+003A-007E;
}

@font-face {
    font-family: 'Athiti-Latin';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/athiti/pe0sMISdLIZIv1wA-DFCBfe_Kdxicw.woff2') format('woff2');
    unicode-range: U+0020-002F, U+003A-007E;
}

@font-face {
    font-family: 'Athiti-Latin';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/athiti/pe0sMISdLIZIv1wA1DZCBfe_Kdxicw.woff2') format('woff2');
    unicode-range: U+0020-002F, U+003A-007E;
}

/* --- Athiti Numbers --- */

@font-face {
    font-family: 'Athiti-Numbers';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/athiti/pe0sMISdLIZIv1wAoDBCBfe_Kdxicw.woff2') format('woff2');
    unicode-range: U+0030-0039; /* digits 0-9 */
}

@font-face {
    font-family: 'Athiti-Numbers';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/athiti/pe0vMISdLIZIv1wICxJXKNWyAw.woff2') format('woff2');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Athiti-Numbers';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/athiti/pe0sMISdLIZIv1wA-DFCBfe_Kdxicw.woff2') format('woff2');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Athiti-Numbers';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/athiti/pe0sMISdLIZIv1wA1DZCBfe_Kdxicw.woff2') format('woff2');
    unicode-range: U+0030-0039;
}

/* --- Vazirmatn Persian Letters --- */

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

@font-face {
    font-family: 'Vazirmatn-Persian';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
}

/* --- Vazirmatn Numbers (Persian/Arabic digits) --- */

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

@font-face {
    font-family: 'Vazirmatn-Numbers';
    src: url('../fonts/vazirmatn/Vazirmatn-FD-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+06F0-06F9;
}

html[dir="ltr"] body {
  font-family: 'Athiti-Latin', 'Athiti-Numbers', 'Vazirmatn-Persian', sans-serif;
}

html[dir="rtl"] body {
  font-family: 'Vazirmatn-Persian',  'Vazirmatn-Numbers', 'Athiti-Latin', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--color1);
    color: #ffffff;
}

input, textarea, select, button {
    font-family: inherit;
}

.preloader,
.preloader-ar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--color4);
    z-index: 9999;
}

.preloader-ar {
    font-size: 19px;
}

.main {
    position: relative;
    width: 100%;
    max-width: var(--maxWidth); /* Lock max width */
    box-sizing: border-box; /* Include padding in width */
    border-left: 1px solid var(--color39);
    border-right: 1px solid var(--color39);
    background-color: var(--color1); /* Ensure content background is visible */
    height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll */

    background-image: url('/static/images/bg_s.png'); /* Add the PNG as a background */
    background-size: cover; /* Ensure it fits the width of the page */
    background-position: center; /* Center the image vertically and horizontally */
    background-attachment: fixed; /* Prevent scrolling */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.main.disabled {
    pointer-events: none;
    opacity: 0.6; /* Optional: makes content look faded */
    position: relative; /* Needed if you want to add an overlay */
}

/* Optional: Add an overlay to prevent interactions */
.main.disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 999;
}

.container,
.container-ar {
    text-align: center;
    width: 100%;
    /* max-width: 400px; */
    box-sizing: border-box;
    padding: 15px;
    /* background: linear-gradient(to bottom, #161820, #121215); */
    border-radius: 20px;
    margin-top: 0px;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); */
}

.user-container,
.user-container-ar {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 20px;
    margin-top: 0px;
}

#registration-message {
    margin-bottom: 20px;
    text-align: center;
    color: var(--color2);
    font-size: 18px;
    font-weight: bold;
    margin-top: 50px;
    height: 30px;
}

html[dir=rtl] #registration-message {
    font-size: 14px;
}

#login-message {
    padding-left: 50px;
    padding-right: 50px;
    text-align: center;
    color: var(--color2);
    font-size: 16px;
    font-weight: bold;
    margin-top: 50px;
    height: 30px;
    transition: opacity 1s ease;
    opacity: 1;
}

html[dir=rtl] #login-message {
    font-size: 14px;
}

#login-message.hidden {
    opacity: 0;
}

#user-message {
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 10px;
    text-align: center;
    color: var(--color2);
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    height: 30px;
    transition: opacity 1s ease-out;
    opacity: 1;
    
}

html[dir=rtl] #user-message {
    font-size: 11px;
}

#user-message.hidden {
    opacity: 0;
}

/* #user-message.fade-out {
    opacity: 0;
} */

.login-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 0 0 0;
  max-width: 300px;
}

.register-in-login {
  color: var(--color5);
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

html[dir=rtl] .register-in-login {
    font-size: 12px;
}

.forgot-message {
  color: var(--color5);
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}

html[dir=rtl] .forgot-message {
    font-size: 12px;
}

.message {
    color: red;
    margin-bottom: 15px;
}

html[dir=rtl] .message {
    font-size: 12px;
}

.header-icon-back {
    position: absolute;
    top: 27px;
    left: 15px;
    z-index: 10; /* Make sure it's on top of background */
}

html[dir=rtl] .header-icon-back {
    left: auto;
    right: 15px; 
    transform: rotate(180deg); 
}

.header-icon-back img {
    object-fit: contain;
    filter: var(--svg-filter);
    width: 15px;
    height: 15px;
}

h1 {
    font-size: 34px;
    color: var(--color2);
    margin-bottom: 20px;
    font-weight: 200;
}

html[dir=rtl] h1 {
    font-size: 28px;
}

h2 {
    font-size: 22px;
    color: var(--color2);
    margin-bottom: 20px;
    font-weight: 200;
    text-align: start;
    line-height: 1;
    margin-bottom: 50px;
}

html[dir=rtl] h2 {
    font-size: 18px;
    line-height: 1.4;
}

.registration-form input[type="text"],
.registration-form input[type="email"],
.registration-form input[type="number"],
.registration-form input[type="password"] {
    direction: ltr;
    width: 80%;
    padding: 6px;
    margin: 7px 0;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 10px;
    background-color: transparent;
    color: var(--color3);
    font-size: 16px;
    text-align: start;
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */
    max-width: 320px;
}

.registration-form input[type="username"]{
    direction: ltr;
    width: 80%;
    padding: 6px;
    margin: 7px 0;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 10px;
    background-color: transparent;
    color: var(--color3);
    font-size: 16px;
    text-align: start;
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */
    max-width: 320px;
}

html[dir=rtl] .registration-form input[type="username"]{
    direction: rtl;

}

.registration-form input[type="otp"]{
    direction: ltr;
    text-align: center;
    width: 100px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 20px !important;
    padding: 6px;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 10px;
    background-color: transparent;
    color: var(--color3);
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */

}

.login-form {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}

.login-form input[type="otp"]{
    direction: ltr;
    text-align: center;
    width: 100px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 20px !important;
    padding: 6px;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 10px;
    background-color: transparent;
    color: var(--color3);
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */

}


.login-form.user {
    gap: 5px; 
    align-items: start !important; 
}

.registration-form {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
}

.user-label,
.user-label-ar {
    font-size: 17px;
    color: var(--color4);
    text-align: start;
    background-color: var(--color8);
    width: 100%;
    padding: 7px;
    border-radius: 10px;
    box-sizing: border-box; /* ensures padding doesn't overflow width */
    margin-bottom: 3px;
}

.user-label-ar {
    font-size: 14px;
}

.photo-preview {
    display: none;
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid silver;
    margin-top: 30px;
    margin-bottom: 30px;
}

html[dir=rtl] .registration-form input[type="text"],
html[dir=rtl] .registration-form input[type="email"],
html[dir=rtl] .registration-form input[type="number"],
html[dir=rtl] .registration-form input[type="password"],
html[dir=rtl] .login-form input[type="text"],
html[dir=rtl] .login-form input[type="email"],
html[dir=rtl] .login-form input[type="password"],
html[dir=rtl] .login-form input[type="number"],
html[dir=rtl] .registration-list {
    font-size: 14px  !important;
    border-radius: 10px;
}




html[dir=rtl] .login-form input[type="email"],
html[dir=rtl] .login-form input[type="number"],
html[dir=rtl] .login-form input[type="password"],
html[dir=rtl] .registration-form input[type="email"],
html[dir=rtl] .registration-form input[type="number"],
html[dir=rtl] .registration-form input[type="password"],
html[dir=rtl] .login-form input[type="number"],
html[dir=rtl] .reset-form input[type="password"] {
    text-align: start;
}

.registration-list {
    width: 80%;
    padding: 6px;
    margin: 7px 0;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 10px;
    background-color: transparent;
    color: var(--color3);
    font-size: 16px;
    text-align: start;
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */
    max-width: 320px;
}

.login-form input[type="email"],
.login-form input[type="number"],
.login-form input[type="password"] {
    direction: ltr;
    width: 80%;
    padding: 6px;
    margin: 7px 0;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 10px;
    background-color: transparent;
    color: var(--color3);
    font-size: 16px;
    text-align: start;
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */
    max-width: 320px;
}

.login-form input[type="text"] {
    direction: ltr;
    width: 80%;
    padding: 6px;
    margin: 7px 0;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 10px;
    background-color: transparent;
    color: var(--color3);
    font-size: 16px;
    text-align: start;
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */
    max-width: 320px;
}

.reset-form input[type="password"] {
    direction: ltr;
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 5px;
    background-color: transparent;
    color: var(--color3);
    font-size: 16px;
    text-align: start;
    background-image: var(--grad1);
    background-origin: border-box; /* Ensure the border gradient is aligned */
    background-clip: padding-box, border-box; /* Clip backgrounds to padding and border */
    max-width: 320px;
}

.reset-form input::placeholder,
.registration-form input::placeholder,
.login-form input::placeholder {
    color: var(--color4);
    font-size: 16px !important;
}

html[dir=rtl] .reset-form input::placeholder,
html[dir=rtl] .registration-form input::placeholder,
html[dir=rtl] .login-form input::placeholder {
    font-size: 12px !important;
}

html[dir=rtl] .login-form input[type="email"]::placeholder,
html[dir=rtl] .login-form input[type="number"]::placeholder,
html[dir=rtl] .login-form input[type="password"]::placeholder,
html[dir=rtl] .registration-form input[type="email"]::placeholder,
html[dir=rtl] .registration-form input[type="number"]::placeholder,
html[dir=rtl] .registration-form input[type="password"]::placeholder,
html[dir=rtl] .reset-form input[type="password"]::placeholder {
    text-align: start !important;
}

.choose {
    width: 120px;
    padding: 5px;
    margin: 10px 10px;
    border: 1px solid transparent; /* Transparent border to overlay the gradient */
    border-radius: 15px;
    background-color: transparent;
    color: var(--color3);
    font-size: 17px;
    background-image: var(--grad1);
    background-origin: border-box; 
    background-clip: padding-box, border-box; 
}

html[dir=rtl] .choose {
    font-size: 13px;
}

/* .registration-form input::placeholder {
    color: var(--color4);
}

.login-form input::placeholder {
    color: var(--color4);
} */

.register-button-r, .login-button-r,.register-button-l, .login-button-l, .google-button, .submit {
    padding: 10px;
    margin-top: 35px;
    color: #efefef;
    font-size: 19px;
    font-weight: bold;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    max-width: 300px;
}

html[dir=rtl] .register-button-r, html[dir=rtl] .login-button-r, html[dir=rtl] .register-button-l, html[dir=rtl] .login-button-l, html[dir=rtl] .google-button, html[dir=rtl] .submit {
    font-size: 14px;
}

.register-button-r {
    background-image: linear-gradient(to right, #9c5862, #5a8ab5); /* Two backgrounds: one for the inner and one for the border */
    width: 80%;

}

.login-button-r {
    background-image: linear-gradient(to right, #71444b, #3b5367); /* Two backgrounds: one for the inner and one for the border */
    width: 70%;
}

.login-button-l {
    background-image: linear-gradient(to right, #9c5862, #5a8ab5); /* Two backgrounds: one for the inner and one for the border */
    width: 80%;
}

.submit {
    background-image: linear-gradient(to right, #9c5862, #5a8ab5); /* Two backgrounds: one for the inner and one for the border */
    width: 80%;
}

.register-button-l {
    background-image: linear-gradient(to right, #71444b, #3b5367); /* Two backgrounds: one for the inner and one for the border */
    width: 70%;
}

.button-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically (if needed) */
}

.google-button {
    background-color: #ffffff;
    max-width: 300px;         /* Optional: Set a max width */
    border: 1px solid #6f6f6f;
    color: black;
    display: flex;
    align-items: center;      /* Vertically center content */
    justify-content: center;  /* Horizontally center content */
    gap: 10px;                /* Space between logo and text */
    padding: 10px;
    cursor: pointer;
    font-size: 19px;
    min-width: 180px;
}

.google-logo {
    width: 25px;
    height: 25px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color9);
}

.header-icons {
    display: flex;
    align-items: center;
}

.header-icons img {
    width: 24px;
    height: 24px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color9);
}

.header-icons {
    display: flex;
    align-items: center;
}

.header-icon, .header-icon-back {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-icon-back {
    margin-left: -15px; /* 5px spacing between back and settings */
    margin-right: 3px;
}

.header-icon {
    /* margin-right: 5px;  */
    background: var(--color4); /* White background with 20% transparency */
    border-radius: 7px; /* Rounded corners */
    padding: 6px; /* Optional: Adds some spacing around the icon */
    display: inline-flex; /* Keeps the icon centered */
    align-items: center; 
    justify-content: center;
    margin-left: 7px;
    /* this is for now, later we need to remove opacity 0 */
    opacity: 0;
}

.header-icon img, .header-icon-back img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: var(--svg-filter);
}

.header-icon-back img {
    width: 15px;
    height: 15px;
    margin-left: 15px;
}

html[dir="rtl"] .header-icon-back img {
    margin-left: 0px;
}

.header-profile {
    display: flex;
    align-items: center;
    gap:5px;
}

.header-profile img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #4a90e2; /* Blue border */
    margin-top: -5px;
}

.side-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 250px;
    background-color: var(--color6);
    color: var(--color7);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    padding: 20px;
    z-index: 9999;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
}

/* LTR - slides from left */
.side-menu.ltr {
    left: 0;
    transform: translateX(-100%);
}

/* RTL - slides from right */
.side-menu.rtl {
    right: 0;
    transform: translateX(100%);
}

.side-menu.open.ltr {
    transform: translateX(0);
}

.side-menu.open.rtl {
    transform: translateX(0);
}

.side-menu ul {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.side-menu ul li {
    margin: 15px 0;
    font-size: 18px;
    margin-left: 30px;
}

html[dir="rtl"] .side-menu ul li {
    font-size: 13px;
    margin-left: auto;
    margin-right: 30px;
}

.side-menu-profile-img {
    border-radius: 50%; 
    width: 60px;
    height: 60px;
    padding: 2px; 
    /* box-shadow: 0 0 0 2px #5298FB; */
    display: block;
    margin-bottom: 30px;
    margin-left: -30px;
}

html[dir="rtl"] .side-menu-profile-img {
    margin-bottom: 30px;
    margin-right: -30px;
    margin-left: auto;
}

.sidemenu-close-btn {
    color: #aeaeae;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    background: none;
    border: none;
    cursor: pointer;
    right: 15px;
}

.sidemenu-close-btn-ar {
    color: #aeaeae;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    background: none;
    border: none;
    cursor: pointer;
    left: 15px;
}

.prev-page {
    transform: rotate(0deg); 
}

.prev-page-ar {
    transform: rotate(180deg); 
}

.header-profile-info {
    display: flex;
    flex-direction: column;
    text-align: right; /* Align text to the right */
}

html[dir="rtl"] .header-profile-info {
    text-align: left; /* Align text to the left for RTL */
}

.header-profile-info .header-name {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: var(--color3);
    margin: 0;
}

.header-profile-info .header-title {
    font-size: 14px;
    color: #8e8e93; /* Lighter gray for the title */
    margin: 0;
}

html[dir="rtl"] .header-profile-info .header-title {
    font-size: 11px; /* Adjust size for RTL */
}

.hyperlink,
.hyperlink-ar {
    color: var(--hyperlink);
    text-decoration: none;
    font-weight:200;
}

.hyperlink-ar {
    font-size: 13px;
}

.hyperlink2,
.hyperlink2-ar {
    color: var(--hyperlink);
    text-decoration: none;
}

.hyperlink2-ar {
    font-size: 13px;
}

/* Inactive modifier */
.hyperlink2.inactive,
.hyperlink2-ar.inactive {
    opacity: 0;
    pointer-events: none; /* Optional: disable clicks */
}

.hyperlink a,
.hyperlink-ar a {
    color: var(--hyperlink);
    text-decoration: none;
    font-weight:200;
}

.hyperlink a:hover,
.hyperlink-ar a:hover {
    color: var(--hyperlink-hover); /* Darken slightly on hover for better UX */
}

.prev-page {
    transform: rotate(0deg); 
}

.prev-page-ar {
    transform: rotate(180deg); 
}

/* posts css */

.no-posts-message, .end-of-posts-message {
    color: var(--color13);
    font-size: 14px;
    text-align: Left;
    margin: 20px 0;
}

.post {
    /* width: 70%; */
    /* background-color: #242731;  */
    padding: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
    font-size: 14px;
    position: relative;
    margin-top: -5px;
}

.post-header {
    display: flex;
    /* align-items: center; */
    margin-bottom: 12px;
}

.profile-img,
.profile-img-ar {
    width: 40px;
    max-height: 40px;
    border-radius: 50%;
    border: 2px solid #34f6e6; /* Blue border around the profile image */
    margin-right: 10px;
    margin-left: -20px;
    margin-top: 5px;
}

.profile-img-ar {
    margin-right: -20px;
    margin-left: 10px;
}

.profile-img-offline,
.profile-img-offline-ar {
    width: 40px;
    max-height: 40px;
    border-radius: 50%;
    border: 2px solid #ababab; /* Blue border around the profile image */
    margin-right: 10px;
    margin-left: -20px;
    margin-top: 5px;
}

.profile-img-offline-ar {
    margin-right: -20px;
    margin-left: 10px;
}

.hyperlink-post,
.hyperlink-post-ar {
    color: var(--hyperlink);
    text-decoration: none;
}

.hyperlink-post-ar {
    font-size: 11px;
}

.username,
.username-ar {
    font-weight: bold;
    font-size: 16px;
    color: var(--color11);
}

.username-ar {
    font-size: 13px;
}

.verified-icon {
    width: 14px;
    height: 14px;
    margin-top: 5px;
    margin-left: 4px;
    display: inline-block;
    vertical-align: top;
}

.timestamp-right {
    position: absolute;
    right: 0; 
    color: var(--color13);
    font-size: 12px;
    font-weight: 300;
}

.timestamp-right-ar {
    position: absolute;
    left: 0; /* Align to the right side of the container */
    color: var(--color13);
    font-size: 12px;
    font-weight: 300;
}

.post-predictions {
    display: flex;
    gap: 4px; /* Add some space between tags */
    margin-top: 8px;
    margin-bottom: -5px;

}

.prediction,
.prediction-ar {
    color: var(--color13);
    padding: 2px 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
    font-size: 1em;
    line-height: 1.2;
}

.prediction-ar {
    font-size: 0.85em;
    line-height: 1.8;
}

.prediction img,
.prediction-ar img{
    width: 14px;
    height: 14px;
    margin-bottom: -3px;
}

.back-svg img {
    filter: var(--svg-filter);
}

.therefore-arrow,
.therefore-arrow-ar {
    width: 7px; 
    height: 7px; 
    transform: rotate(180deg); 
    margin-bottom: 1px;
}

.therefore-arrow-ar {
    transform: rotate(0deg); 
}

.post-content,
.post-content-ar {
    color: var(--color12);
    margin: 10px 0;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Limits to 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight:700;
}

.post-content-ar {
    line-height: 1.4;
    font-weight: 600;
    font-size: 0.9em;
}

.post-tags {
    display: flex;
    flex-wrap: wrap; 
    gap: 4px; 
    margin-top: -3px;
    margin-bottom: 7px;
    max-height: 2.8em; 
    overflow: hidden;
    position: relative;
}

.tag,
.tag-ar {
    background-color: var(--color15);
    color: var(--color16);
    padding: 4px 4px;
    border-radius: 4px;
    font-size: 0.9em;
    line-height: 0.7;
    white-space: nowrap;
}

.tag-ar {
    font-size: 0.65em;
    line-height: 0.9;
}

.image-video-thumbnail {
    position: relative;
    /* width: 100%; */
    overflow: hidden;
    margin-top: -10px;
    margin-left: -31px;
    margin-right: -31px;
    
}

.image-video-thumbnail img {
    width: 100%;
}

.image-video-thumbnail video {
    width: 100%;
}

.post-actions,
.post-actions-ar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    color: var(--color13);
    padding-left: 40px;
}

.post-actions-ar {
    padding-left: 10px;
    padding-right: 30px;
}

.post-actions div,
.post-actions-ar div {
    display: flex;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
}

.post-actions img,
.post-actions-ar img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.post-actions-ar img {
    margin-left: 6px;
}

.comment-action {
    padding: 5px;
}

.comment-action img {
    filter: var(--svg-filter);
}

.like-action {
    padding: 5px;
}

.like-action img {
    filter: var(--svg-filter);
}

.share-action {
    padding: 5px;
}

.share-action img {
    filter: var(--svg-filter);
}

.open-post-action {
    padding: 5px;
}

.open-post-action img {
    filter: var(--svg-filter);
}