/* ==========================================================================
   AFUS CMS — Mobile
   Authoritative mobile layout layer. Loaded only at <= 768px.
   Desktop presentation belongs to afus-ui.css.
   ========================================================================== */

:root {
  --afus-mobile-gap: 14px;
  --afus-mobile-radius: 18px;
}

/* ==========================================================================
   Base / viewport
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

input,
select,
textarea {
  max-width: 100%;
  font-size: 16px !important;
}

/* ==========================================================================
   Main mobile canvas
   ========================================================================== */

.afus-body-in {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px var(--afus-mobile-gap) 84px !important;
}

.afus-main,
.afus-main.post-page,
.afus-main.one-page {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
}

.afus-main-in,
.afus-template-question .afus-main-in,
.afus-template-custom .afus-main-in {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.rightsidebar {
  display: none !important;
}

/* ==========================================================================
   Header
   One authoritative mobile definition.
   ========================================================================== */

.afus-header {
  position: relative;
  height: 64px !important;
  padding: 0 14px !important;
  gap: 8px !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

.afus-rtl .header-left {
  flex-direction: row !important;
}

.header-middle {
  display: none !important;
}

.header-right {
  display: flex;
  align-items: center;
  min-width: 0 !important;
  margin-inline-start: auto !important;
}

.header-right ul {
  display: flex;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.afus-left-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
}

.header-right a,
.header-right button,
.header-right [role="button"],
.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
}

.header-right .reglink,
.header-right .search-toggle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  line-height: 42px !important;
  border-radius: 14px !important;
}

.header-right .hreg {
  display: none;
}

.afus-logo {
  flex: 0 1 132px !important;
  width: 132px !important;
  max-width: 132px !important;
  height: 44px !important;
  overflow: hidden !important;
}

.afus-logo a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

.afus-logo img {
  width: 100% !important;
  max-width: 132px !important;
  max-height: 34px !important;
  object-fit: contain !important;
}

.afus-logo .afus-mlogo {
  display: block !important;
}

.afus-night img.afus-mlogon {
  display: block !important;
}

.afus-logo .afus-logol,
.afus-logo .afus-logoln,
.afus-night img.afus-mlogo,
.afus-night .afus-logo .afus-logon {
  display: none !important;
}

/* ==========================================================================
   Drawer / search / navigation
   ========================================================================== */

.leftmenu {
  width: min(86vw, 340px) !important;
  max-width: 340px !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

[dir="rtl"] .leftmenu,
.afus-rtl .leftmenu {
  direction: rtl;
}

[dir="ltr"] .leftmenu,
.afus-ltr .leftmenu {
  direction: ltr;
}

.afus-search {
  top: 70px !important;
  width: calc(100vw - 28px) !important;
  max-width: 420px !important;
  padding: 10px !important;
}

.afus-search-in {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px !important;
  box-sizing: border-box;
}

.afus-search-field {
  flex: auto;
  width: 100% !important;
  min-height: 44px;
}

.afus-nav-sub-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.afus-nav-sub-list::-webkit-scrollbar {
  display: none;
}

.afus-nav-sub-item { flex: 0 0 auto; }
.afus-nav-sub-link {
  margin: 4px 2px !important;
  padding: 8px 11px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* ==========================================================================
   Home / cards / featured
   ========================================================================== */

.afus-part-q-list,
.container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.box,
.grid-sizer,
.afus-template-home .box,
.afus-template-home .grid-sizer,
.afus-template-home .with-side .box,
.afus-template-home .with-side .grid-sizer {
  width: 100% !important;
}

.afus-featured-grid {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 14px;
  border-radius: 14px;
}

.afus-featured-grid .featured-posts {
  width: 100% !important;
  height: auto !important;
  min-height: 210px;
}

.featured-posts .featured-content { inset-inline: 16px; bottom: 14px; }
.featured-posts .featured-title { font-size: 21px; }
.afus-q-item-main { border-radius: 14px; }
.afus-q-item-title a h2 { font-size: 14px; line-height: 1.55; }
.post-meta { font-size: 11px; }

.afus-inner,
.maincom {
  max-width: 100%;
  box-sizing: border-box;
}

.afus-main.one-page .afus-inner {
  padding: 16px !important;
  border-radius: var(--afus-mobile-radius) !important;
}

/* ==========================================================================
   Forms / uploads / embedded media
   ========================================================================== */

.afus-form-tall-table,
.afus-form-wide-table,
.afus-form-wide-table tbody,
.afus-form-wide-table tr,
.afus-form-wide-label,
.afus-form-wide-data,
.afus-form-wide-text {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.afus-form-wide-table tbody,
.afus-form-wide-table tr {
  display: block !important;
}

textarea {
  width: 100% !important;
  min-height: 120px;
  box-sizing: border-box;
}

.file-label {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.upload-wrapper {
  align-items: stretch;
}

.afus-video,
.videoembedup,
.list-video {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.afus-video iframe,
.videoembedup iframe,
.list-video iframe,
.vjs-theme-forest,
.afus-video .instaframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

.gallery-img,
.afus-news-thumb {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

.head-title { padding: 14px 10px; }
.head-title::before { opacity: .42; }
.afus-gallery { width: 100%; padding: 8px; border-radius: 20px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gallery-img { max-height: 72vh; border-radius: 15px; }
.afus-gallery.owl-carousel .owl-item { border-radius: 15px; }
.afus-gallery:hover .gallery-img { transform: none; }

/* ==========================================================================
   Quick View
   ========================================================================== */

.mfp-wrap .mfp-content {
  width: calc(100vw - 24px) !important;
  max-width: 680px !important;
  margin: 72px auto 24px !important;
  padding: 0 0 8px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #fff !important;
}

.mfp-content .rightview {
  padding: 18px !important;
  gap: 12px !important;
}

body.afus-rtl .mfp-content .rightview,
body.afus-rtl .mfp-content .afus-q-view,
body.afus-rtl .mfp-content .afus-q-view-content {
  direction: rtl !important;
  text-align: right !important;
}

body.afus-ltr .mfp-content .rightview,
body.afus-ltr .mfp-content .afus-q-view,
body.afus-ltr .mfp-content .afus-q-view-content {
  direction: ltr !important;
  text-align: left !important;
}

body.afus-rtl .mfp-content h1,
body.afus-rtl .mfp-content h2,
body.afus-rtl .mfp-content h3,
body.afus-rtl .mfp-content p {
  text-align: right !important;
}

.mfp-content .afus-q-view-title,
.mfp-content .afus-q-view-title a {
  font-size: 25px !important;
  line-height: 1.45 !important;
}

.mfp-close {
  right: 14px !important;
  top: 12px !important;
}


/* ==========================================================================
   Author / profile cards — mobile geometry
   Visual styling remains in afus-styles.css; this layer only adapts layout.
   ========================================================================== */

.postuser.user-boxx,
.user-boxx.afus-profile {
  width: 100% !important;
  padding: 38px 0 0 !important;
}

.postuser .user-box,
.afus-profile .user-box {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0;
  padding: 54px 14px 14px !important;
  box-sizing: border-box;
  border-radius: 20px !important;
}

.postuser .user-box-alink,
.afus-profile .user-box-alink {
  top: -38px !important;
  inset-inline-start: 50% !important;
  width: 84px !important;
  height: 84px !important;
  border-width: 5px;
  transform: translateX(-50%);
}

.postuser .user-box-header,
.afus-profile .user-box-header {
  min-height: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center !important;
}

.postuser .user-box-name,
.postuser .user-box-buttons,
.afus-profile .user-box-name,
.afus-profile .user-box-buttons {
  justify-content: center;
  flex-wrap: wrap;
}

.postuser .user-box-name h3,
.afus-profile .user-box-name h3 {
  max-width: 100%;
  font-size: 18px;
  white-space: normal;
  text-align: center;
}

.postuser .user-box-buttons,
.afus-profile .user-box-buttons { gap: 7px; }
.postuser .user-box-buttons .afus-follow,
.afus-profile .user-box-buttons .afus-follow { min-width: 108px; min-height: 38px; }
.postuser .afus-stats,
.afus-profile .afus-stats { margin-top: 14px; }
.postuser .afus-stats span,
.afus-profile .afus-stats span { padding: 6px 4px; }
.postuser .afus-stats span strong,
.afus-profile .afus-stats span strong { font-size: 22px; }

/* Article engagement keeps the desktop 3-column component unchanged. */
.afus-engagement-line .afus-view-count,
.afus-inline-reactions .afus-inline-reaction-item,
.afus-inline-reactions .afus-inline-reaction-button { min-height: 46px; }
.afus-engagement-line .afus-view-count-data { font-size: 15px; }
.afus-inline-reactions .reaction-label,
.afus-inline-reactions .reaction-count { font-size: 12px; }
.afus-inline-reactions .afus-inline-reaction-button { gap: 5px; padding: 0 5px; }
.afus-inline-reactions .afus-inline-reaction-button::before { font-size: 16px; }

/* ==========================================================================
   Remaining mobile components
   ========================================================================== */

.afus-q-view-buttons,
.bm-posts {
  flex-wrap: wrap !important;
  max-width: 100%;
}

/* Article actions: compact, centered and direction-neutral. */
.afus-q-view-buttons {
  justify-content: center !important;
  gap: 6px !important;
}
.afus-q-view-buttons button {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 6px !important;
}

/* Previous / next: two balanced touch targets. */
.prev-next {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: auto !important;
  max-width: none !important;
  margin: 0 -16px -16px !important;
  padding: 10px !important;
}
.afus-next-q,
.afus-prev-q {
  min-width: 0;
  min-height: 48px;
  margin: 0 !important;
  padding: 10px 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  line-height: 1.35;
  text-align: center !important;
  overflow-wrap: anywhere;
}
.afus-next-q i,
.afus-prev-q i { flex: 0 0 auto; font-size: 20px !important; margin: 0 !important; }


.afus-dropdownc {
  max-width: calc(100vw - 28px) !important;
}

/* User menu follows document direction and stays inside viewport. */
.afus-dropdown2 {
  position: fixed !important;
  top: 68px !important;
  width: min(240px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  padding: 8px !important;
}
.afus-rtl .afus-dropdown2 { right: 12px !important; left: auto !important; direction: rtl; }
.afus-ltr .afus-dropdown2 { left: 12px !important; right: auto !important; direction: ltr; }
.afus-dropdown2 a { white-space: normal !important; text-align: start !important; }

.modal-dialog {
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  margin: 12px auto !important;
}

.modal-content {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

.afus-main-in table,
pre,
code {
  overflow-wrap: anywhere;
}

pre,
code {
  white-space: pre-wrap;
}

.ias-trigger-next,
.load-nomore {
  width: min(280px, calc(100vw - 40px)) !important;
}

.afus-welcome {
  padding: 22px 18px !important;
  border-radius: 22px !important;
}

.afus-welcome h1 {
  font-size: 30px !important;
  line-height: 1.15;
}

.afus-welcome-orb {
  display: none !important;
}

.user-boxx,
.user-box,
.shorts-item,
.afus-browse-cat-item,
.afus-polls li,
.grid3 .afus-poll-grid,
.afus-poll-grid,
.afus-playlist-thumb {
  width: 100%;
}


.shorts-item-in {
  position: relative;
  z-index: 3;
}

.shorts-item-inright {
  position: absolute;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 4;
  padding: 4px;
  background-color: #ffffff45;
  border-radius: 14px;
}

.shorts-item-inright a {
  color: #fff;
}

.afus-shorts.owl-carousel .owl-item {
  padding-inline-end: 70px;
}

.afus-browse-cat-list {
  flex-direction: column;
  -webkit-flex-direction: column;
}

.meta-when {
  display: none;
}

.afus-playlist-thumb {
  margin: 0;
}

.afus-flter {
  position: relative;
  font-size: 0;
}

.afus-flter i {
  font-size: 18px;
}

.afus-playlist-uo {
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
}

.afus-nav-footer-list {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

/* ==========================================================================
   Empty states / poll editor
   ========================================================================== */
.afus-site-logo { max-height: 34px; }
.afus-empty-state { min-height: 300px; padding: 34px 22px; align-items: center; }
.afus-empty-copy { width: 100%; max-width: 100%; margin: 0; text-align: center; }
.afus-empty-code { font-size: 72px; }
.afus-empty-title { font-size: 28px; }
.nopost { min-height: 280px; margin: 24px auto; padding: 34px 22px; text-align: center !important; }
.afus-polls-up { padding: 14px; }
.afus-poll-edit-choice { grid-template-columns: 58px minmax(0,1fr); }
.afus-poll-edit-choice img, .afus-poll-edit-placeholder { width: 58px; height: 48px; }
.afus-poll-image-id { grid-column: 2; }
.afus-poll-edit-image { align-items: stretch; flex-direction: column; }
.afus-poll-edit-image img { width: 100%; height: 160px; }

/* ==========================================================================
   Small phones
   ========================================================================== */

@media (max-width: 380px) {
  .afus-body-in {
    padding-inline: 10px !important;
  }

  .afus-header {
    padding-inline: 8px !important;
  }

  .afus-welcome h1 {
    font-size: 26px !important;
  }

  .afus-logo {
    flex-basis: 116px !important;
    width: 116px !important;
    max-width: 116px !important;
  }
}


/* Article media must never exceed the phone canvas. */
.afus-q-view,
.afus-q-view-main,
.afus-q-view-content,
.post-content {
  min-width: 0;
  max-width: 100%;
}
.afus-q-view-content img,
.post-content img,
.mce-content-body img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin-inline: auto !important;
  object-fit: contain;
}

/* Creation forms inherit RTL/LTR from the selected language. */
.afus-form-tall-table,
.afus-form-wide-table,
.afus-form-tall-label,
.afus-form-wide-label,
.afus-form-tall-data,
.afus-form-wide-data,
.dropzone,
.mce-content-body {
  direction: inherit;
  text-align: start;
}
.afus-form-tall-text,
.afus-form-wide-text,
.afus-form-tall-number,
.afus-form-wide-number,
textarea,
select {
  direction: inherit;
  text-align: start;
}
input[type="url"],
input[type="email"] { direction: ltr; }
.dropzone .dz-message { text-align: center; }