:root {
  --sidebar-width: 260px;
  --avatar-gutter-desktop: 220px;
  --avatar-gutter-mobile: 64px;
}

/* ===== Base RTL ===== */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  overflow-x: hidden; /* prevent horizontal widening */
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}

html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end   { text-align: left  !important; }

/* Icon/text spacing */
html[dir="rtl"] .nav-link i,
html[dir="rtl"] .menu-item i,
html[dir="rtl"] .btn i,
html[dir="rtl"] i.material-icons,
html[dir="rtl"] .fa,
html[dir="rtl"] [class^="icon-"],
html[dir="rtl"] [class*=" icon-"] {
  margin-left: .4rem;
  margin-right: 0;
}

/* Preserve icon fonts that break if font-family changes */
.material-icons,
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  font-family: "Material Icons" !important;
}
[class^="vjs-icon"],
[class*=" vjs-icon"] {
  font-family: VideoJS !important;
}

/* Breadcrumb chevrons flip */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
}

/* ===== Header layout (keep visual order correct) ===== */
html[dir="rtl"] .page-header {
  direction: ltr !important;              /* lay out children left->right */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-inline: 12px !important;
  position: relative;
  z-index: 1020;
  overflow: visible !important;
}

html[dir="rtl"] .page-header > * {
  float: none !important;
  position: static !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Visual order in header: [avatar/actions] – [search] – [logo/hamburger] */
html[dir="rtl"] .page-header-right { order: 0 !important; }
html[dir="rtl"] .search-field-wrap {
  order: 1 !important;
  flex: 1 1 640px !important;
  min-width: 240px;
  margin: 0 12px !important;
}
html[dir="rtl"] .page-header-left { order: 2 !important; }

html[dir="rtl"] .page-header .toggle-sidebar,
html[dir="rtl"] .page-header .mobile-search-toggle {
  margin-left: .75rem;
  margin-right: .25rem;
}
html[dir="rtl"] .page-header .logo {
  display: inline-flex;
  margin-left: .75rem;
  margin-right: 0;
}

/* ===== Avatar gutter in header ===== */
@media (min-width: 992px) {
  /* Desktop / tablets */
  html[dir="rtl"] .page-header-right {
    margin-left: clamp(160px, 14vw, var(--avatar-gutter-desktop)) !important;
  }
}
@media (max-width: 991.98px) {
  /* Phones */
  html[dir="rtl"] .page-header-right {
    margin-left: clamp(48px, 8vw, var(--avatar-gutter-mobile)) !important;
  }
}

/* Slight extra inset for the first control (usually avatar) */
html[dir="rtl"] .page-header-right > *:first-child {
  margin-left: 16px !important;
}

/* ===== Dropdowns (user menu, etc.) ===== */

/* Generic dropdowns: open to the right in RTL */
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .page-header-right .dropdown-menu,
html[dir="rtl"] .user-dropdown .dropdown-menu,
html[dir="rtl"] .navbar .dropdown-menu,
html[dir="rtl"] .dropdown-menu[data-bs-popper] {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  transform-origin: top right !important;
  text-align: right;
  position: absolute;
  max-width: calc(100vw - 16px);
  white-space: nowrap;
  z-index: 2050;
}

/* Header-right dropdowns: anchor to avatar's right edge, stay inside viewport */
html[dir="rtl"] .page-header .page-header-right .dropdown,
html[dir="rtl"] .page-header .page-header-right .user-dropdown {
  position: relative !important;
}

html[dir="rtl"] .page-header .page-header-right .dropdown .dropdown-menu,
html[dir="rtl"] .page-header .page-header-right .user-dropdown .dropdown-menu {
  right: 0 !important;         /* menu right edge = avatar right edge */
  left: auto !important;
  top: calc(100% + 4px) !important;
  transform: none !important;
  transform-origin: top right !important;
  text-align: right;
  max-width: calc(100vw - 16px);
  z-index: 2050;
}

/* Neutralize helpers that try to flip it outward */
html[dir="rtl"] .page-header .page-header-right .dropdown .dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
  transform-origin: top right !important;
}
html[dir="rtl"] .page-header .page-header-right .dropstart .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 4px) !important;
  margin: 0 !important;
  transform: none !important;
}
html[dir="rtl"] .page-header .page-header-right .dropstart .dropdown-toggle::before {
  display: none !important;
}

/* ===== Input group borders in RTL ===== */
html[dir="rtl"] .input-group > .form-control {
  text-align: right;
}
html[dir="rtl"] .input-group .input-group-text,
html[dir="rtl"] .form-control + .input-group-append {
  border-right: 0 !important;
  border-left: 1px solid rgba(255,255,255,.15) !important;
}

/* ===== Offcanvas/mobile menus (if present) open from right ===== */
html[dir="rtl"] .offcanvas,
html[dir="rtl"] .off-canvas,
html[dir="rtl"] .mobile-menu,
html[dir="rtl"] .drawer {
  left: auto !important;
  right: 0 !important;
}

/* ===================================================================== */
/* ========== SIDEBAR: right-side, open/close, content shift =========== */
/* ===================================================================== */

/* Sidebar itself lives on the right in RTL */
html[dir="rtl"] .page-sidebar,
html[dir="rtl"] #app-sidebar,
html[dir="rtl"] .app-sidebar {
  right: 0 !important;
  left: auto !important;
  transition: transform .25s ease !important;
}

/* Helper: treat these body classes as "sidebar is OPEN" */
@media (min-width: 0) {
  /* CLOSED state: none of these flags present */
  html[dir="rtl"]
  body:not(.visible-sidebar):not(.sidebar-open):not(.rtl-open):not(.page-sidebar-open)
  .page-sidebar {
    transform: translateX(100%) !important; /* hide offscreen to the right */
  }

  /* OPEN state: any flag present */
  html[dir="rtl"] body.visible-sidebar .page-sidebar,
  html[dir="rtl"] body.sidebar-open .page-sidebar,
  html[dir="rtl"] body.rtl-open .page-sidebar,
  html[dir="rtl"] body.page-sidebar-open .page-sidebar {
    transform: none !important;
  }
}

/* Content wrapper: default = full width, no sidebar gap */
html[dir="rtl"] .page-main-wrap {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* When sidebar is OPEN on desktop, reserve space on the right only */
@media (min-width: 992px) {
  html[dir="rtl"] body.visible-sidebar .page-main-wrap,
  html[dir="rtl"] body.sidebar-open .page-main-wrap,
  html[dir="rtl"] body.rtl-open .page-main-wrap,
  html[dir="rtl"] body.page-sidebar-open .page-main-wrap {
    margin-right: var(--sidebar-width) !important;
    margin-left: 0 !important;
  }
}

/* Overlay that covers content when sidebar is open */
html[dir="rtl"] .page-sidebar-content-overlay {
  left: 0 !important;
  right: 0 !important;
  display: none !important;
}

html[dir="rtl"] body.visible-sidebar .page-sidebar-content-overlay,
html[dir="rtl"] body.sidebar-open .page-sidebar-content-overlay,
html[dir="rtl"] body.rtl-open .page-sidebar-content-overlay,
html[dir="rtl"] body.page-sidebar-open .page-sidebar-content-overlay {
  display: block !important;
  right: var(--sidebar-width) !important;
}

html[dir="rtl"] #app-header a[href*="/accounts/login"],
html[dir="rtl"] nav a[href*="/accounts/login"] {
  position: relative;
  font-size: 0 !important;          /* hide original English text */
  white-space: nowrap;
}

html[dir="rtl"] #app-header a[href*="/accounts/login"]::after,
html[dir="rtl"] nav a[href*="/accounts/login"]::after {
  content: "ورود";
  font-size: 16px;                  /* visible Persian text */
  font-weight: 500;
}

/* REGISTER -> ثبت‌نام */
html[dir="rtl"] #app-header a[href*="/accounts/signup"],
html[dir="rtl"] nav a[href*="/accounts/signup"] {
  position: relative;
  font-size: 0 !important;
  white-space: nowrap;
}

html[dir="rtl"] #app-header a[href*="/accounts/signup"]::after,
html[dir="rtl"] nav a[href*="/accounts/signup"]::after {
  content: "ثبت‌نام";
  font-size: 16px;
  font-weight: 500;
}

#app-header form[action*="/search"],
#app-header form[action*="search"],
#app-header input[type="search"],
#app-header input[placeholder*="Search"],
#app-header input[placeholder*="جستجو"],
#app-header .header-search,
#app-header .search-bar,
#app-header .search-wrapper,
#app-header .search-container {
    display: none !important;
}

/* Make sure header doesn’t reserve space for center (search) column */
#app-header .app-header-center,
#app-header .header-center {
    flex: 0 0 auto !important;
}

#app-header > * {
    display: flex;
    align-items: center;
}

/*
  In most MediaCMS builds there is a 3-part layout:
  left (avatar), center (search), right (logo/menu).
  We group logo + hamburger on the right side.
*/

/* Example: treat this as the "right" header group */
#app-header .app-header-right,
#app-header .header-right {
    margin-right: 0;
    margin-left: 0.5rem;
    display: flex;
    align-items: center;
}

/* Re-order within that group: logo and hamburger next to each other */
#app-header .app-header-right .logo,
#app-header .app-header-right .site-logo,
#app-header .app-header-right a[href="/"] {
    order: 1;
    margin-inline: .25rem;
}

#app-header .app-header-right .menu-toggle,
#app-header .app-header-right .hamburger,
#app-header .app-header-right .sidebar-toggle {
    order: 2;
    margin-inline: .25rem;
}

html[dir="rtl"] .page-header-left > div {
  display: flex;
  align-items: center;
}

/* Visual order inside header-left: [logo] [hamburger] [close] */
html[dir="rtl"] .page-header-left .logo {
  order: 0;
  margin-left: .5rem;      /* small gap between logo and hamburger */
  margin-right: 0;
}

html[dir="rtl"] .page-header-left .toggle-sidebar {
  order: 1;
  margin-left: 0;
  margin-right: .25rem;    /* gap from the right edge */
}

html[dir="rtl"] .page-header-left .close-search-field {
  order: 2;
}

html[dir="rtl"] .sidebar-theme-switcher-inner {
  direction: ltr !important;
}

html[dir="rtl"] .page-main-inner .messages {
    margin-top: 1.5rem;
    text-align: right;
}

html[dir="rtl"] .page-main-wrap > .messages {
  margin: 1.5rem 1rem 0 1rem;
  text-align: right;
}

/* When sidebar is open on desktop, shift messages left by sidebar width */
@media (min-width: 992px) {
  html[dir="rtl"] body.visible-sidebar .page-main-wrap > .messages,
  html[dir="rtl"] body.sidebar-open .page-main-wrap > .messages,
  html[dir="rtl"] body.rtl-open .page-main-wrap > .messages,
  html[dir="rtl"] body.page-sidebar-open .page-main-wrap > .messages {
    margin-right: calc(var(--sidebar-width) + 1rem) !important;
    margin-left: 1rem !important;
  }
}

html[dir="rtl"] .page-main-wrap > .messages {
  margin-top: 1.5rem;
  margin-inline: 1rem;
  text-align: right;
}

/* -------------------------------------------------------
   Hide "My media" in avatar dropdown for simple users
   (so it never flashes before JS runs)
-------------------------------------------------------- */
body[data-superuser="0"] .user-dropdown .dropdown-menu a[href*="/my-media"],
body[data-superuser="0"] .user-dropdown .dropdown-menu a[href*="/my_media"],
body[data-superuser="0"] .user-dropdown .dropdown-menu a[href*="my-media"] {
  display: none !important;
}

/* --- Custom: Bigger & better placed header logo --- */
.logo { display: flex; align-items: center; }
.logo span { display: flex; align-items: center; }


/* Force header logo size (RTL) */
html[dir="rtl"] #app-header .logo img,
html[dir="rtl"] .page-header .logo img {
  height: 48px !important;
  max-height: none !important;
  width: auto !important;
  max-width: 220px !important;
}

/* Ensure the logo container can grow */
html[dir="rtl"] #app-header .logo,
html[dir="rtl"] .page-header .logo {
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
  overflow: visible !important;
}

/* If the header itself is too short, increase it */
html[dir="rtl"] #app-header,
html[dir="rtl"] .page-header {
  min-height: 60px !important;
}

/* Media page: hide Share + Save action buttons */
.page-media .media-actions .share,
.page-media .media-actions .save {
  display: none !important;
}

/* Also hide player share overlay (if it exists) */
.page-media .video-js.vjs-mediacms .share-video-btn,
.page-media .video-js.vjs-mediacms .share-options-wrapper {
  display: none !important;
}

/* Ensure media info fields are RTL + right-aligned */
.page-media .media-info-content,
.page-media .media-content-field,
.page-media .media-content-field-label,
.page-media .media-content-field-content {
  direction: rtl;
  text-align: right;
}

/* If field content uses flex, force it to the right */
.page-media .media-content-field-content {
  justify-content: flex-end;
}

/* Categories/Tags lists align right */
.page-media #categories .media-content-field-content,
.page-media #tags .media-content-field-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Media page RTL alignment (Categories/Tags) */
.viewer-info,
.viewer-info-inner,
.media-info-content,
.media-content-banner,
.media-content-field {
  direction: rtl;
  text-align: right;
}

/* Ensure label + content sit correctly in RTL */
.media-content-field {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 12px;
}

.media-content-field-label {
  min-width: 90px;
  text-align: right;
}

.media-content-field-content {
  flex: 1;
  text-align: right;
}

/* ========== Hide user avatars on media page ========== */
.page-media .media-author-banner .author-banner-thumb,
.page-media .comment-author-thumb,
.page-media .comments-form .thumbnail,
.page-media .media-links-top-left .user-thumb-link {
  display: none !important;
}

/* If hiding avatar leaves extra spacing, fix layout */
.page-media .comment .comment-inner {
  align-items: flex-start;
}

.page-media .comment .comment-content {
  margin-right: 0 !important;
}



/* ========== Comment meta spacing (author vs time) ========== */
.page-media .comment .comment-meta {
  direction: rtl;
  display: flex;
  flex-direction: row-reverse; /* author on the right, then date */
  align-items: center;
  gap: 10px;                  /* the spacing you asked for */
}

.page-media .comment .comment-date {
  opacity: 0.75;
  white-space: nowrap;
}

/* Categories row – independent of core media-content-field CSS */
.media-categories-row{
  direction: rtl;
  text-align: right;
  width: 100%;
  display: flex;
  flex-direction: row;          /* IMPORTANT: not row-reverse */
  align-items: center;
  justify-content: flex-start;  /* start = right in RTL */
  gap: 10px;
}

.media-categories-label{
  margin: 0;
  white-space: nowrap;
  font-weight: 400;
}

.media-categories-values{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;                      /* lets value take remaining space */
}

/* Hide forgot password link in allauth login */
a[href*="password/reset"],
a[href*="reset/password"],
a[href*="account/password/reset"],
a[href*="accounts/password/reset"]{
  display: none !important;
}

/* ===== Captcha layout fix (django-simple-captcha + form.as_p) ===== */

/* Make the captcha label take full line (right aligned) */
form.login label[for="id_captcha_1"]{
  display: block;
  text-align: right;
  margin-bottom: 6px;
}

/* Enlarge captcha image + push it to the LEFT */
form.login img.captcha,
form.login img[src*="/captcha/image/"]{
  display: block;
  float: left;          /* force left side even in RTL */
  width: 260px;         /* bigger (change if you want) */
  height: auto;
  margin: 0 0 8px 0;
}

/* Keep the input under the image (full width) */
form.login #id_captcha_1,
form.login input[name="captcha_1"]{
  display: block;
  clear: both;          /* ensures it goes under the floated image */
  width: 100%;
}

/* Optional: hide the "forgot password" link */
form.login a[href*="password/reset"],
form.login a[href*="account/password/reset"],
form.login .secondaryAction{
  display: none !important;
}