.mobile-app-header, .mobile-app-tabs { display: none; }
.mobile-app-menu { display: none; }
.mobile-chat-back { display: none; }
.policy-back-icon { display: none !important; }
#accDropdown #profileViewIcon,
#accDropdown .profile-link[href="profile.html"] .profile-icon-img {
  display: block;
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* Keep the desktop dialogs unchanged; adapt their layout only on mobile. */
@media (max-width: 900px) {
.custom-popup-box .policy-back-text-arrow { display: none; }
.custom-popup-box .policy-back-icon { display: inline-block !important; margin-right: 4px; font-size: .875em; }
.custom-policies-overlay, .custom-popup-overlay {
  position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important;
  padding: 16px !important; align-items: center !important; justify-content: center !important;
  background: rgb(0 0 0 / 48%) !important; z-index: 12000 !important; overflow: hidden !important;
}
.custom-policies-box, .custom-popup-box {
  box-sizing: border-box !important; position: relative !important; inset: auto !important; transform: none !important;
  width: min(680px,100%) !important; max-width: 100% !important; height: auto !important; max-height: calc(100dvh - 32px) !important;
  margin: 0 !important; padding: 20px !important; border-radius: 8px !important; background: #fff !important;
  overflow: auto !important; opacity: 1 !important; animation: none !important; color: #252b2a !important;
  scrollbar-width: thin; scrollbar-color: #bbb transparent;
}
.custom-policies-header { margin: 0 !important; padding: 8px 44px 20px 0 !important; font-size: 20px !important; text-align: left !important; color: #252b2a !important; }
.custom-policies-box .custom-close-icon { position: absolute !important; inset: 12px 12px auto auto !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; font-size: 26px !important; color: #58595b !important; cursor: pointer; }
.custom-policies-box .custom-accordion-wrapper { flex: none !important; margin: 0 !important; width: 100% !important; overflow: visible !important; }
.custom-policies-box .custom-accordion-btn { position: static !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; width: 100% !important; min-height: 56px !important; height: auto !important; padding: 14px 4px !important; margin: 0 !important; background: #fff !important; color: #353b38 !important; border: 0 !important; font: 15px/1.4 Arial,sans-serif !important; text-align: left !important; white-space: normal !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.custom-policies-box .custom-accordion-btn i { position: static !important; color: var(--primary-color, #b8d057) !important; font-size: 14px !important; }
.custom-policies-box .custom-close-btn-bottom { position: static !important; align-self: flex-end !important; width: 112px !important; min-height: 44px; margin: 20px 0 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: 4px !important; background: #b8d057 !important; color: #fff !important; font: 16px Arial,sans-serif !important; }
.custom-popup-box .custom-popup-close, .custom-popup-box .custom-popup-closee { position: static !important; display: block !important; width: auto !important; min-height: 44px; margin: 0 0 12px !important; padding: 8px 0 !important; background: transparent !important; color: #b8d057 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font: 16px Arial,sans-serif !important; cursor: pointer; }
.custom-popup-box h2 { margin: 20px 0 12px !important; font: 600 17px/1.45 Arial,sans-serif !important; color: var(--primary-color, #b8d057) !important; }
.custom-popup-box h3 { margin: 0 0 16px !important; font: 400 14px/1.7 Arial,sans-serif !important; color: #303633 !important; text-indent: 0 !important; overflow-wrap: anywhere; }
.custom-popup-box .custom-content-scroll { max-height: none !important; overflow: visible !important; }
.custom-policies-box button:focus-visible, .custom-popup-box button:focus-visible { outline: 2px solid #7b8d32 !important; outline-offset: 2px; }
}
.mobile-auth-menu { display: none; }
.composer-direction { display: flex; align-items: flex-start; gap: 6px; max-width: 100%; }
.composer-direction input { flex: 1; min-width: 0; }
.composer-direction button { flex: 0 0 36px; width: 36px; height: 40px; padding: 0; border: 0; color: #7b8d32; background: transparent; }
@media (max-width: 900px) {
  body > :is(aside[class^="sidebar"],#sidebar.sidebar,.profile-slider) { display: none !important; }
  body.messages-page-ready > aside.sidebar { display: block !important; }
  body { background: #f3f5f4 !important; color: #252b2a; font-family: Arial, sans-serif; }
  .mobile-app-header { box-shadow: 0 2px 12px rgb(29 40 34 / 5%); }
  .mobile-app-tabs { box-shadow: 0 -4px 18px rgb(29 40 34 / 6%); }
  .mobile-app-tabs button[data-mobile-compose] i { display: grid; place-items: center; width: 42px; height: 30px; border-radius: 8px; background: #b8d057; color: #fff; }
  .mobile-app-tabs [aria-current="page"] { border-top: 2px solid #b8d057; }
  .mobile-notifications { position: relative; }
  .mobile-notifications:not([data-unread=""])[data-unread]::after { content: attr(data-unread); position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; background: #b8d057; color: #273212; border-radius: 50%; font-size: 10px; display: grid; place-items: center; }
  .mobile-audience { display: flex; gap: 4px; margin-bottom: 12px; }
  .mobile-audience button { flex: 1; min-height: 44px; border: 1px solid #dde3d9; background: #f5f8ed; color: #58652f; font-size: 12px; padding: 6px; }
  .mobile-app-menu #accDropdown { position: static !important; display: block !important; width: 100% !important; box-shadow: none !important; margin: 20px 0 0 !important; transform: none !important; border: 0 !important; }
  .mobile-app-menu #accDropdown .profile-link, .mobile-app-menu .signout-btn { min-height: 44px; }
  body > .post-box { background: #fff; border: 1px solid #e2e7e3; border-radius: 8px !important; box-shadow: none !important; }
  .post-card2 { border: 1px solid #e2e7e3; border-radius: 8px !important; background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 3%) !important; line-height: 1.55; }
  .post-card2 .post-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
  .post-card2 .post-actions button { min-height: 44px; font-size: 13px; padding: 8px 4px !important; }
  .post-card2 p { unicode-bidi: plaintext; overflow-wrap: anywhere; }
  .post-card2 .post-avatar, .post-card2 .user-avatar { width: 40px !important; height: 40px !important; object-fit: cover; flex-shrink: 0; }
  .modal { z-index: 2200 !important; }
  .modal > :is(.edit-content,.add-content,.modal-content) { background: #fff !important; opacity: 1 !important; width: calc(100% - 24px) !important; max-width: 560px !important; max-height: calc(100dvh - 32px) !important; overflow-y: auto !important; padding: 20px 16px !important; margin: 16px auto !important; border-radius: 8px !important; }
  .modal .styled-form, .modal .styled-form input, .modal .styled-form textarea, .modal .styled-form button, .modal .custom-dropdown { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .mobile-chat-back { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 0; background: transparent; color: #596637; }
  body.messages-page-ready[data-mobile-conversation="list"] { overflow-y: auto !important; height: auto !important; }
  body.messages-page-ready .messages-sidebar { position: static !important; width: calc(100% - 24px) !important; height: auto !important; margin: 12px !important; padding: 12px !important; border-radius: 8px; background: #fff !important; color: #333 !important; }
  body.messages-page-ready .messages-sidebar .sidebar-top { max-height: 45dvh !important; height: auto !important; overflow-y: auto !important; }
  body.messages-page-ready .messages-sidebar-heading, body.messages-page-ready .messages-sidebar-heading p, body.messages-page-ready .messages-sidebar-heading span, body.messages-page-ready .messages-empty-sidebar { color: #59615c !important; }
  body.messages-page-ready .messages-sidebar-heading { margin: 0 0 12px !important; }
  body.messages-page-ready .messages-sidebar .sidebar-top { padding: 0 !important; }
  body.messages-page-ready .messages-sidebar .sidebar-footer { display: none !important; }
  body.messages-page-ready[data-mobile-conversation="chat"] .messages-sidebar { display: none !important; }
  body.messages-page-ready[data-mobile-conversation="list"] .messages-page-main { height: auto !important; min-height: 300px; }
  body.messages-page-ready .messages-chat-top { flex-direction: row !important; align-items: center !important; gap: 6px !important; padding: 10px !important; }
  body.messages-page-ready .messages-chat-user { flex: 1; min-width: 0; gap: 8px; }
  body.messages-page-ready .messages-chat-user img { width: 36px; height: 36px; flex-shrink: 0; }
  body.messages-page-ready .messages-chat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.messages-page-ready .messages-chat-actions { width: auto !important; flex-shrink: 0; gap: 4px; }
  body.messages-page-ready .messages-profile-link { display: none !important; }
  html { width: 100%; min-width: 0; scroll-padding-top: 70px; }
  body { width: 100%; min-width: 0; min-height: 100svh; margin: 0; padding: 64px 0 calc(76px + env(safe-area-inset-bottom)) !important; box-sizing: border-box; }
  *, *::before, *::after { box-sizing: border-box; }
  input, textarea, select { font-size: 16px !important; }
  img, video { max-width: 100%; }
  button, a { touch-action: manipulation; }
  body > .navbar, body > header.navbar, body > nav.navbar,
  body > .profile, body > .user-info-icons, .sidebar-action-dock, .tooltip { display: none !important; }
  .mobile-app-header { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 60px; padding: 4px 12px; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e3e4e6; z-index: 1100; }
  .mobile-app-header button, .mobile-app-header > a:not(.mobile-brand), .mobile-menu-heading button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: #58595b; font-size: 21px; padding: 0; margin: 0; }
  .mobile-header-actions { display: flex; align-items: center; gap: 2px; }
  .mobile-profile-menu-button { color: #58595b !important; }
  .mobile-account-button { border-radius: 50%; overflow: hidden; }
  .mobile-account-button img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
  .mobile-app-header .mobile-notifications { position: relative; color: #58595b; }
  .mobile-app-header .mobile-notifications i { font-size: 24px; line-height: 1; }
  .mobile-app-header .mobile-notifications::after { top: 1px; right: 1px; }
  .mobile-brand { display: flex; height: 48px; align-items: center; }
  .mobile-brand img { width: 108px; height: 48px; object-fit: contain; }
  .mobile-app-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e3e4e6; padding: 4px 4px env(safe-area-inset-bottom); z-index: 1100; }
  .mobile-app-tabs a, .mobile-app-tabs button { height: 60px; min-width: 0; margin: 0; padding: 6px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; font: inherit; font-size: 11px; color: #58595b; background: transparent; border: 0; text-decoration: none; border-radius: 0; width: 100%; }
  .mobile-app-tabs i { font-size: 21px; }
  .mobile-app-tabs [aria-current="page"] { color: #b8d057; background: #f5f8e9; }
  .mobile-app-menu[open] { display: block; position: fixed; inset: 0 auto 0 0; width: min(220px,78vw); height: 100dvh; max-height: 100dvh; max-width: 78vw; margin: 0; padding: 0; border: 0; background: #b8d057; color: #fff; overflow-y: auto; }
  .mobile-app-menu::backdrop { background: rgb(0 0 0 / 40%); }
  .mobile-app-menu .mobile-menu-heading,
  .mobile-app-menu .mobile-quick-links,
  .mobile-app-menu .mobile-audience { display: none !important; }
  .mobile-app-menu .sidebar { display: flex !important; position: static !important; width: 100% !important; min-height: 100dvh; height: auto !important; max-height: none !important; margin: 0 !important; padding: 22px 12px 24px !important; background: #b8d057 !important; color: #fff !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; }
  .mobile-app-menu .sidebar-top { width: 100%; }
  .mobile-app-menu .sidebar-top > p { margin: 0 0 14px 0 !important; color: #fff !important; font-size: 18px !important; font-weight: 500 !important; }
  .mobile-app-menu .sidebar .menu-item { width: 100% !important; min-height: 42px; margin: 0 !important; padding: 9px 8px !important; color: #fff !important; font-size: 14px !important; background: transparent !important; }
  .mobile-app-menu .sidebar .menu-item.active { width: 100% !important; height: auto !important; color: #b8d057 !important; background: #fff !important; }
  .mobile-app-menu .sidebar .sidebar-footer { margin-top: auto !important; color: #fff !important; }
  .mobile-app-menu .sidebar .sidebar-footer a { color: #fff !important; }
  .mobile-profile-menu[open] { display: block; position: fixed; inset: 0 0 0 auto; width: min(230px,calc(100vw - 48px)); height: 100dvh; max-height: 100dvh; max-width: none; margin: 0; padding: 0; border: 0; background: #fff; color: #333; overflow: visible; }
  .mobile-profile-menu::backdrop { background: rgb(0 0 0 / 40%); }
  .mobile-profile-menu .profile-slider { display: flex !important; position: static !important; width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 20px 16px max(20px,env(safe-area-inset-bottom)) !important; overflow-y: auto !important; overflow-x: hidden !important; box-shadow: none !important; border: 0 !important; }
  .mobile-profile-menu > .mobile-menu-heading { display: none; }
  body > #accDropdown.mobile-account-dropdown-open { display: block !important; position: fixed !important; top: 56px !important; right: 12px !important; width: min(300px, calc(100vw - 24px)) !important; max-height: calc(100dvh - 68px); overflow-y: auto; z-index: 1300 !important; }
  html:has(.mobile-app-menu[open]) { overflow: hidden; }
  .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #eee; }
  .mobile-quick-links { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
  .mobile-quick-links a { color: #58595b; text-decoration: none; padding: 8px 0; }
  .mobile-app-menu :is(.sidebar,.sidebar2,.sidebar3,.sidebar4,.sidebar5,.sidebar6,.profile-slider) { position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; transform: none !important; margin: 0 !important; padding: 12px 0 !important; overflow: visible !important; box-shadow: none !important; border: 0 !important; }
  .mobile-app-menu .sidebar { flex-direction: column !important; gap: 24px; padding: 22px 16px max(16px, env(safe-area-inset-bottom)) !important; }
  .mobile-app-menu .sidebar-top { flex: 0 0 auto; }
  .mobile-app-menu .sidebar .sidebar-footer { flex-shrink: 0; padding: 0 !important; }
  .mobile-app-menu .sidebar-footer p { margin: 8px 0 0 !important; white-space: normal; line-height: 1.5; }
  .mobile-app-menu .profile-slider { display: block !important; }
  .mobile-app-menu .sidebar-footer { position: static !important; margin-top: 20px !important; }
  .mobile-app-menu .menu-item, .mobile-app-menu .sidebar-links a { min-height: 44px; }
  .bgcolor { display: none !important; }
  body > .post-box, #posts-feed, #storiesMount, body > .scroll-wrapper, body > .profile-wrapper5, body > .user-info, body > .tabs { width: calc(100% - 24px) !important; max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; left: auto !important; right: auto !important; transform: none !important; }
  body > .post-box { position: relative !important; top: auto !important; height: auto !important; margin-top: 0 !important; padding: 12px !important; }
  #storiesMount { position: relative !important; top: auto !important; margin-top: -48px !important; }
  .eltahi-stories-shell { position: relative !important; top: 0 !important; left: auto !important; width: 100% !important; margin: 0 auto 16px !important; transform: none !important; padding: 14px !important; border-radius: 8px !important; }
  .eltahi-stories-heading { margin-bottom: 12px !important; }
  .eltahi-stories-heading h2 { font-size: 16px !important; }
  .eltahi-stories-heading span { font-size: 11px !important; }
  #storiesMount { position: relative !important; padding: 14px !important; border: 1px solid #e2e7e3; border-radius: 8px !important; box-shadow: none !important; }
  .post-box::before, .post-box::after { display: none !important; }
  .post-box .icon-btn img { width: 24px !important; height: 24px !important; position: static !important; object-fit: contain; }
  #posts-feed { padding: 0 !important; margin-top: 12px !important; }
  #posts-feed > div { max-width: 100% !important; width: 100% !important; }
  .post-card2 { width: 100% !important; max-width: 100% !important; margin: 0 0 12px !important; padding: 14px !important; overflow-wrap: anywhere; }
  .post-box .post-input { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .post-box .user-section { position: relative !important; }
  .post-box .post-icon-img { display: none !important; }
  .post-box .user-section::before { content: '+'; position: absolute; left: 66px; top: 50%; z-index: 2; transform: translateY(-50%); color: #58595b; font-size: 24px; line-height: 1; font-weight: 600; pointer-events: none; }
  .post-box .post-input { padding-left: 38px !important; }
  .mobile-app-header .icon-label::after,
  .mobile-app-header .icon-label-hover::after,
  .post-box .icon-label::after,
  .post-box .icon-label-hover::after,
  .profile-icon .icon-label::after { display: none !important; content: none !important; }
  .post-box :is(::before, ::after) { content: none !important; display: none !important; }
  .post-box .icon-section { margin: 12px 0 0 !important; gap: 12px !important; overflow-x: auto; justify-content: flex-start !important; padding-bottom: 8px; }
  .icon-hover-wrapper, .icon-hover-wrapper2 { flex-shrink: 0; }
  .post-box .icon-hover-wrapper { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
  .post-box .icon-btn { display: grid !important; place-items: center !important; width: 48px !important; height: 48px !important; padding: 0 !important; border-radius: 50% !important; background: #f1f2f2 !important; color: #58595b !important; }
  .post-box .icon-btn i { font-size: 21px !important; line-height: 1 !important; }
  .post-box .icon-img { width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; }
  .post-box .icon-label-hover, .add-post-modal .icon-label-hover { position: static; transform: none; opacity: 1; background: transparent; color: #58595b; padding: 2px 0; font-size: 10px; white-space: nowrap; }
  .post-image-container img, .post-image-container video { width: 100% !important; height: auto !important; object-fit: contain; }
  .post-header, .post-header .user-info2 { min-width: 0; }
  .post-card2 .post-header { gap: 8px; align-items: flex-start; }
  .post-card2 .user-info2 { flex: 1 1 auto; min-width: 0; gap: 8px; align-items: flex-start; }
  .post-card2 .user-info2 > div { min-width: 0; }
  .post-card2 .user-name { display: block; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
  .post-card2 .post-menu { flex: 0 0 auto; padding-top: 2px; }
  .post-card2 .post-header + p { margin-top: 4px !important; }
  .post-card2 .post-title { margin: 10px 0 8px; font-size: 16px; line-height: 1.4; }
  .post-card2 .post-preview-text, .post-card2 .post-full-content { font-size: 15px; line-height: 1.65; }
  .post-card2 .post-rating { margin: 8px 0; font-size: 13px; line-height: 1.5; }
  .post-card2 .post-actions { border-top: 1px solid #eef0ee; padding-top: 6px; }
  .post-card2 .post-actions button { min-height: 40px; margin-top: 0 !important; background: transparent; color: #202020; }
  .post-card2 .post-actions button i { color: #b8d057 !important; }
  .post-header .user-name { overflow-wrap: anywhere; }
  .eltahi-story-toast { left: 12px !important; right: 12px !important; width: auto !important; bottom: 84px !important; }
  body > .scroll-wrapper { height: auto !important; margin-top: 0 !important; }
  .scroll-wrapper .cover-photo, .scroll-wrapper img { width: 100% !important; max-height: 220px; object-fit: cover; }
  body > .profile-wrapper5 { position: relative !important; top: auto !important; height: 96px !important; margin-top: -32px !important; }
  .profile-img5 { width: 96px !important; height: 96px !important; margin: 0 !important; left: 0 !important; position: relative !important; }
  .profile-wrapper5 .edit-button { left: 68px !important; right: auto !important; bottom: 0 !important; top: auto !important; width: 32px !important; height: 32px !important; }
  body > .user-info { position: relative !important; top: auto !important; margin-top: 12px !important; padding: 0 4px !important; }
  body > .tabs { position: relative !important; top: auto !important; overflow-x: auto; gap: 0 !important; white-space: nowrap; padding: 0 !important; margin-top: 16px !important; justify-content: flex-start !important; }
  .tabs .tab-link { min-height: 44px; padding: 12px !important; flex: 0 0 auto; }
  .settings-wrapper { width: 100% !important; max-width: 680px !important; margin: 12px auto !important; padding: 0 12px !important; }
  .settings-wrapper > :is(.section,.content-section) { width: 100% !important; max-width: 100% !important; max-height: none !important; margin: 0 0 16px !important; padding: 16px !important; overflow: visible !important; }
  .settings-wrapper input:not([type="checkbox"]):not([type="radio"]), .settings-wrapper textarea, .settings-wrapper select, .settings-wrapper .custom-dropdown, .settings-wrapper .custom-dropdown button { max-width: 100% !important; width: 100% !important; min-width: 0 !important; }
  .settings-wrapper .form-row { flex-wrap: wrap; gap: 12px; }
  .settings-wrapper .form-row > * { min-width: 0; flex: 1 1 160px; }
  .settings-wrapper h1 { font-size: 22px !important; }
  .mobile-search { position: relative !important; left: auto !important; right: auto !important; transform: none !important; width: calc(100% - 24px) !important; max-width: none !important; min-width: 0 !important; margin: 8px 12px !important; height: 44px; }
  .mobile-search input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; }
  .search-page .search-scroll-wrapper { width: calc(100% - 24px) !important; max-width: 680px !important; margin: 12px auto !important; padding: 0 !important; }
  .search-page :is(.search-hero-card,.search-results-card,.results-section,.account-card,.post-result-card) { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere; }
  .search-page .account-card { grid-template-columns: 46px minmax(0,1fr) !important; }
  .search-page .account-card > button { grid-column: 2; }
  [data-mobile-page="profile"] body > :is(.about-section,.about-section2,.about-section3,.about-section4,.about-section5,.about-section6,.about-section7,.about-section8,#ratings-list,#ratings-list2,#follow-list,#follow-list2,#follow-list4,#follow-list5,#follow-list6) { position: relative !important; width: calc(100% - 24px) !important; max-width: 680px !important; margin: 16px auto !important; left: auto !important; top: auto !important; transform: none !important; overflow-wrap: anywhere; }
  [data-mobile-page="profile"] :is(#ratings-list,#ratings-list2,#follow-list,#follow-list2,#follow-list4,#follow-list5,#follow-list6) > * { width: 100% !important; max-width: 100% !important; }
  [data-mobile-page="profile"] .about-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  [data-mobile-page="profile"] .about-header .edit-btn { position: static !important; flex-shrink: 0; margin: 0 !important; min-width: 44px; min-height: 44px; }
  html[data-mobile-page="massages"] body .messages-page-main { padding: 12px !important; margin: 0 !important; width: 100% !important; height: calc(100dvh - 140px) !important; }
  html[data-mobile-page="massages"] body .chat-container { width: 100% !important; max-width: 100% !important; height: 100% !important; }
  .add-post-modal { inset: 8px !important; transform: none !important; width: auto !important; max-width: none !important; height: calc(100dvh - 16px) !important; max-height: calc(100dvh - 16px) !important; margin: 0 !important; padding: 0 12px max(12px,env(safe-area-inset-bottom)) !important; animation: none !important; overflow: hidden; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 0; }
  .add-post-modal:is([style*="display: block"],[style*="display: flex"]) { display: grid !important; }
  .add-post-modal .add-post-header { margin: 0; padding: 4px 0; min-height: 48px; }
  .add-post-modal .add-post-header h2 { font-size: 18px; line-height: 1.3; }
  .add-post-modal .close-btn-post { position: static !important; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; font-size: 18px; }
  .add-post-modal .icon-section2 { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px 4px !important; margin: 0 !important; padding: 10px 0 !important; overflow: visible; }
  .add-post-modal .icon-hover-wrapper2 { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-width: 0; height: 66px; }
  .add-post-modal .icon-btn { display: grid !important; place-items: center; flex: 0 0 40px; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 50%; }
  .add-post-modal .icon-btn i { font-size: 21px; line-height: 1; }
  .add-post-modal .icon-btn .icon-img { position: static !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; object-fit: contain; }
  .add-post-modal .icon-btn:not(.active) { background: #f1f2f2 !important; color: #58595b !important; }
  .add-post-modal .icon-btn.active { background: #b8d057 !important; color: #fff !important; }
  .add-post-modal .icon-label-hover { visibility: visible !important; width: 100%; padding: 0; font-size: 10px; line-height: 12px; white-space: normal; text-align: center; }
  .add-post-modal .icon-label-hover::after { display: none !important; content: none !important; }
  .add-post-modal :is(.scrollable-form,.scrollable-container) { min-height: 0 !important; height: 100% !important; width: 100% !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; padding: 12px 0 !important; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cdd3ce transparent; }
  .add-post-modal :is(.scrollable-form,.scrollable-container)::-webkit-scrollbar { width: 4px; }
  .add-post-modal :is(.scrollable-form,.scrollable-container)::-webkit-scrollbar-thumb { background: #cdd3ce; }
  .add-post-modal :is(.styled-form,.form-row,.input-group,.modern-dropdown,.custom-dropdown,.section,.subrecipe-item,.ingredient-item,.ingredient-item2) { max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .add-post-modal .form-row { display: grid !important; grid-template-columns: minmax(0,1fr); gap: 10px !important; width: 100% !important; height: auto !important; margin: 10px 0 !important; padding: 0 !important; }
  .add-post-modal .form-row > .input-group { width: 100% !important; margin: 0 !important; }
  .add-post-modal :is(.modern-dropdown,.modern-dropdown2,.custom-dropdown,.dropdown-toggle,.custom-dropdown-btn) { width: 100% !important; max-width: 100% !important; min-width: 0; }
  .add-post-modal .styled-form div { max-width: 100%; min-width: 0; }
  .add-post-modal div:has(> div > #requiredBtn) { display: grid !important; grid-template-columns: minmax(0,1fr); gap: 10px; }
  .add-post-modal :is(div:has(> div > #requiredBtn),div:has(> #requiredBtn),div:has(> #optionalBtn),#requiredBtn,#optionalBtn) { width: 100% !important; max-width: 100% !important; }
  .add-post-modal input:not([type="checkbox"]):not([type="radio"]), .add-post-modal textarea, .add-post-modal .upload-box, .add-post-modal .custom-dropdown button, .add-post-modal .modern-dropdown button { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .add-post-modal :is(input[type="text"],input[type="email"],input[type="number"],input[type="date"],.dropdown-toggle,.custom-dropdown-btn,.custom-dropdown > button) { min-height: 44px !important; height: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 10px 12px !important; font-size: 14px !important; line-height: 20px; border-radius: 4px; }
  .add-post-modal .dropdown-toggle > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .add-post-modal textarea { margin: 10px 0 0 !important; min-height: 112px; padding: 12px !important; font-size: 14px !important; line-height: 1.5; }
  .add-post-modal .upload-box { margin: 12px 0 !important; height: 112px !important; min-height: 112px; font-size: 13px; }
  .add-post-modal :is(.dropdown-menu,.dropdown-menue,.custom-dropdown-menu) { position: relative !important; inset: auto !important; max-width: 100% !important; width: 100% !important; height: auto !important; max-height: 180px; margin: 4px 0 0 !important; padding: 8px !important; overflow-y: auto; }
  .add-post-modal :is(.dropdown-menu,.dropdown-menue,.custom-dropdown-menu) label { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 !important; padding: 6px 4px !important; font-size: 13px; line-height: 1.4; white-space: normal; text-align: left; }
  .add-post-modal :is(.dropdown-menu,.dropdown-menue,.custom-dropdown-menu) input[type="checkbox"] { flex: 0 0 16px; width: 16px !important; height: 16px; margin: 0 !important; }
  .add-post-modal :is(.ingredient-item,.ingredient-item2,.subrecipe-item) { width: 100% !important; padding: 12px 0 !important; border: 0; border-top: 1px solid #edf0ed; }
  .add-post-modal .field-label { margin-left: 0 !important; font-size: 14px !important; line-height: 1.4; }
  .add-post-modal .add-Ingredient-btn { min-height: 40px; margin: 8px 0 !important; max-width: 100%; }
  .add-post-modal .postbtn { position: static !important; width: 100% !important; max-width: none !important; transform: none !important; margin: 10px 0 0 !important; min-height: 44px; font-size: 16px; }
  .contact-content { width: calc(100% - 24px) !important; max-width: 420px !important; max-height: calc(100dvh - 32px) !important; padding: 24px 16px 16px !important; overflow-y: auto; margin: auto !important; }
  .contact-content :is(input,textarea,button,.custom-dropdown,.dropdown-menue) { width: 100% !important; max-width: 100% !important; }
  .modal > :is(.modal-content,.custom-modal-content,.edit-modal-content) { width: calc(100% - 24px) !important; max-width: 560px !important; max-height: calc(100dvh - 32px) !important; overflow: auto; padding: 16px !important; margin: 16px auto !important; }
  .modal :is(input,textarea,select,.form-row,.input-group) { max-width: 100% !important; min-width: 0 !important; }
  .modal .form-row { flex-wrap: wrap; }
  #editModal .edit-content form { width: 100% !important; }
  #editModal .edit-content :is(input,textarea,.custom-dropdown) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  #editModal .edit-content :is(input,textarea) { border: 1px solid #d8dfd7 !important; border-radius: 6px; padding: 12px !important; min-height: 44px; }
  #editModal .edit-content .submit-btn { position: static !important; transform: none !important; width: 100% !important; margin: 20px 0 0 !important; }
  .custom-confirm-modal, .custom-confirm-box { max-width: calc(100% - 32px) !important; }
  [data-mobile-page="index"] body { display: block; padding: 76px 12px 20px !important; }
  [data-mobile-page="index"] body > .navbar { display: flex !important; width: 100% !important; min-width: 0 !important; padding: 8px 12px !important; justify-content: space-between !important; }
  [data-mobile-page="index"] .navbar .nav-wrapper { display: none !important; }
  [data-mobile-page="index"] .mobile-auth-menu { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #59615c; font-size: 22px; }
  [data-mobile-page="index"] .navbar .nav-wrapper.mobile-expanded { display: flex !important; flex-direction: column; position: absolute; top: 64px; right: 12px; width: 220px; padding: 14px; gap: 16px; background: #fff; border: 1px solid #e2e7e3; border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
  [data-mobile-page="index"] .navbar .nav-links { position: static !important; width: auto !important; margin: 0 !important; }
  [data-mobile-page="index"] .navbar .logo img { width: 98px !important; height: auto !important; margin: 0 !important; }
  [data-mobile-page="index"] .wrapper-container { position: static !important; transform: none !important; width: 100% !important; max-width: 460px; margin: 12px auto !important; padding: 0 !important; }
  [data-mobile-page="index"] .wrapper { width: 100% !important; height: auto !important; min-height: 440px; margin: 0 !important; padding: 24px 14px !important; overflow: visible !important; }
  [data-mobile-page="index"] :is(.wrapper,.container,.logo-container,.slogan,.form-cols) { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
  [data-mobile-page="index"] .form-cols { margin: 0 !important; gap: 8px; flex-wrap: wrap; }
  [data-mobile-page="index"] .login-form, [data-mobile-page="index"] .register-form { display: none !important; position: static !important; transform: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  [data-mobile-page="index"] [data-mobile-auth="login"] .login-form, [data-mobile-page="index"] [data-mobile-auth="register"] .register-form { display: block !important; }
  [data-mobile-page="index"] .form-selector { width: 100%; gap: 4px; }
  [data-mobile-page="index"] .form-btn { min-width: 0; flex: 1; padding: 8px 4px; font-size: 12px; }
  [data-mobile-page="index"] .form-container, [data-mobile-page="index"] .user-form, [data-mobile-page="index"] .form-row { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  [data-mobile-page="index"] .form-row { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  [data-mobile-page="index"] .form-row > * { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
  [data-mobile-page="index"] .user-form input, [data-mobile-page="index"] .user-form button1, [data-mobile-page="index"] .user-form .signup-dropdown-btn { width: 100% !important; max-width: 100% !important; }
  [data-mobile-page="index"] .image-section { display: none !important; }
  [data-mobile-page="index"] .footer { position: static !important; width: 100% !important; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding: 12px !important; }
  [data-mobile-page="index"] #passwordHintCallout, [data-mobile-page="index"] .auth-message { position: static !important; width: 100% !important; max-width: 100% !important; transform: none !important; margin: 12px 0 !important; }
}
.info-slide-close { display: none; }
.info-slide-frame, .mobile-slide-controls { display: contents; }
html body .info-slide-modal .circle-indicators.info-slide-dots { position: fixed !important; top: var(--info-dots-top) !important; left: var(--info-dots-left) !important; bottom: auto !important; right: auto !important; width: auto !important; margin: 0 !important; transform: translateX(-50%) !important; display: flex; gap: 12px; z-index: 5; pointer-events: auto; }
.info-slide-modal .circle-indicators.info-slide-dots .circle { flex: 0 0 6px; width: 6px; height: 6px; margin: 0; }
.info-slide-modal .mobile-slide-controls .scroll-right { grid-column: 3; }
[aria-busy="true"][data-modal], a[aria-busy="true"] { cursor: progress; }
@media (max-width: 900px) {
.info-slide-modal { box-sizing: border-box !important; position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; padding: 64px 12px 128px !important; align-items: center !important; justify-content: center !important; z-index: 2400 !important; background: rgb(25 31 20 / 65%) !important; }
.info-slide-modal .info-slide-content { display: block !important; position: relative !important; width: 100% !important; max-width: 520px !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: visible !important; border-radius: 8px; background: transparent !important; }
.info-slide-modal .image-container { position: relative !important; inset: auto !important; transform: none !important; display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; height: min(calc((100vw - 24px) * .5625), 292px) !important; max-height: calc(100dvh - 144px) !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scroll-snap-type: y mandatory; }
.info-slide-modal .image-container img { display: block !important; flex: 0 0 100%; min-width: 0 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; object-fit: contain; scroll-snap-align: start; }
.info-slide-modal .mobile-slide-controls { position: absolute; left: 0; right: 0; top: calc(100% + 12px); bottom: auto; z-index: 3; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 0; pointer-events: none; }
.info-slide-modal .mobile-slide-controls .scroll-btn { position: static !important; transform: none !important; margin: 0 !important; padding: 0; width: 44px !important; height: 44px !important; background: rgb(184 208 87 / 92%); color: #33411b; font-size: 22px; pointer-events: auto; }
.info-slide-modal :is(.close-btnr,.close-btns) { display: none !important; }
.info-slide-modal .scroll-btn { position: absolute !important; top: 50% !important; bottom: auto !important; margin: 0 !important; width: 36px !important; height: 44px !important; }
.info-slide-modal .scroll-left { left: 4px !important; right: auto !important; }
.info-slide-modal .scroll-right { right: 4px !important; left: auto !important; }
.info-slide-modal .scroll-btn:disabled { opacity: .35; cursor: default; }
.info-slide-modal .circle-indicators { position: absolute !important; bottom: 20px !important; margin: 0 !important; }
.info-slide-modal .info-slide-close { display: grid !important; place-items: center; position: fixed !important; top: var(--info-close-top) !important; left: var(--info-close-left) !important; right: auto !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: #000 !important; font-size: 18px; z-index: 6; }
.info-slide-modal .info-slide-close:focus-visible { outline: 2px solid #000; outline-offset: -5px; }
.portrait-about-modal .info-slide-content { max-width: min(520px, calc((100dvh - 200px) * .5625)) !important; }
.portrait-about-modal .image-container { height: min(calc((100vw - 24px) * 16 / 9), calc(520px * 16 / 9), calc(100dvh - 200px)) !important; }
}

@media (max-width: 900px) {
  .mobile-app-header .mobile-header-actions { display: flex !important; align-items: center !important; flex: 0 0 auto; gap: 2px; height: 44px; margin: 0 !important; padding: 0 !important; }
  .mobile-app-header .mobile-header-actions button { position: static !important; display: grid !important; place-items: center; width: 40px !important; height: 44px !important; min-width: 40px; margin: 0 !important; padding: 0 !important; transform: none !important; background: transparent !important; }
  .mobile-app-header .mobile-account-button img { width: 30px !important; height: 30px !important; margin: 0 !important; }
  .mobile-app-header button[hidden] { display: none !important; }
  [data-mobile-page="notification"] body > :is(#follow-list,#follow-list1,#follow-list2) { position: relative !important; inset: auto !important; width: calc(100% - 24px) !important; max-width: 680px; margin: 16px auto !important; padding: 0 !important; transform: none !important; }
  [data-mobile-page="notification"] .elt-notif-empty { padding: 20px 16px; background: #fff; border: 1px solid #e2e7e3; border-radius: 8px; line-height: 1.5; }
  .mobile-app-menu .sidebar-links { width: 100%; margin: 0; padding: 0; list-style: none; }
  .mobile-app-menu .sidebar-links .nav-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 8px; font-size: 14px; white-space: normal; }
  body > #accDropdown.mobile-account-dropdown-open { left: auto !important; margin: 0 !important; padding: 16px !important; transform: none !important; background: #fff; border: 1px solid #e2e7e3; border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 15%); }
  body > #accDropdown .profile-header { display: flex; flex-direction: column; align-items: center; text-align: center; }
  body > #accDropdown .profile-dropdown-pic { display: block; flex: 0 0 60px; width: 60px; height: 60px; margin: 0 auto 8px; object-fit: cover; border-radius: 50%; }
  body > #accDropdown .profile-link { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; padding: 10px 8px; margin: 0; font-size: 14px; line-height: 20px; }
  body > #accDropdown .profile-icon-img { position: static !important; display: block; flex: 0 0 15px; width: 15px; height: 15px; margin: 0; object-fit: contain; }
  body > #accDropdown :is(hr,.signout-btn) { width: 100% !important; margin-left: 0 !important; }
  .mobile-profile-menu .profile-slider .slider-card { max-width: 100% !important; }
  .mobile-profile-menu .profile-slider :is(.slider-header,.slider-card-ad) { margin: 0 !important; width: 100% !important; }
  .mobile-profile-menu .profile-slider :is(.slider-header img,.slider-card-ad > img) { display: block; width: calc(100% + 32px) !important; max-width: none !important; height: auto !important; margin: -20px -16px 10px !important; object-fit: contain; }
  .mobile-profile-menu .profile-slider :is(.Advertise-btn,.Advertise-btn2,.complete-btn,.progress-bar) { width: 100% !important; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  [data-mobile-page="profile"] body > .scroll-wrapper { margin-top: 12px !important; overflow: visible !important; }
  [data-mobile-page="profile"] .cover-photo-wrapper5 { margin: 0 !important; width: 100%; }
  [data-mobile-page="profile"] .cover-photo5 { width: 100% !important; max-width: none !important; aspect-ratio: 2.6; border-radius: 8px 8px 0 0; box-shadow: none; }
  [data-mobile-page="profile"] .cover-photo5 .cover-img5 { display: block; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; }
  [data-mobile-page="profile"] .share-btn5 { top: 8px; right: 8px; min-height: 36px; font-size: 13px; padding: 8px; }
  [data-mobile-page="profile"] .share-btn6 { top: 8px; left: 8px; right: auto; width: 36px; height: 36px; }
  [data-mobile-page="profile"] .share-dropdown { left: auto !important; right: 8px !important; width: 300px !important; max-width: calc(100% - 16px); }
  [data-mobile-page="profile"] .profile-share-open .cover-photo5 { overflow: visible; }
  [data-mobile-page="profile"] .profile-share-open .cover-img5 { border-radius: inherit; }
  [data-mobile-page="profile"] .profile-share-open .share-dropdown { display: flex !important; align-items: center; gap: 6px; top: 52px; padding: 6px; box-sizing: border-box; border: 1px solid #dde2df; border-radius: 6px; z-index: 70; }
  [data-mobile-page="profile"] .share-dropdown input { flex: 1 1 0; min-width: 0; height: 36px; margin: 0; padding: 0 8px; font-size: 13px !important; text-overflow: ellipsis; }
  [data-mobile-page="profile"] .share-dropdown button { flex: 0 0 62px; width: 62px; height: 36px; padding: 0 6px; font-size: 13px; line-height: 1; }
  [data-mobile-page="profile"] body > .profile-wrapper5 { isolation: isolate; margin-top: -28px !important; padding-left: 16px; height: 80px !important; }
  [data-mobile-page="profile"] body > .profile-wrapper5::before { content: ''; position: absolute; inset: 28px 0 0; background: #fff; z-index: -1; }
  [data-mobile-page="profile"] .profile-img5 { width: 80px !important; height: 80px !important; border: 3px solid #fff; transform: none !important; box-shadow: none; }
  [data-mobile-page="profile"] .profile-wrapper5 .edit-button { left: 72px !important; width: 28px !important; height: 28px !important; border: 2px solid #fff; box-shadow: none; }
  [data-mobile-page="profile"] body > .user-info { margin-top: 0 !important; padding: 12px 16px 16px !important; min-height: 0; box-shadow: none; border-radius: 0 0 8px 8px; }
  [data-mobile-page="profile"] .user-info h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: 18px !important; line-height: 1.4; margin: 0 0 8px; }
  [data-mobile-page="profile"] .user-info h1 :is(.stars,.review-count) { font-size: 12px; white-space: nowrap; }
  [data-mobile-page="profile"] .user-info p { margin: 6px 0 !important; font-size: 13px !important; line-height: 1.45; overflow-wrap: anywhere; }
  [data-mobile-page="profile"] .user-info #followersInfo { margin-bottom: 12px !important; padding-bottom: 12px; border-bottom: 1px solid #eef0ee; color: #58595b !important; }
  [data-mobile-page="profile"] .user-info p :is(i,img) { width: 18px; margin-right: 6px; text-align: center; }
  [data-mobile-page="profile"] body > .tabs { margin: 12px auto 16px !important; border: 0; border-bottom: 1px solid #dde2df; border-radius: 0; scrollbar-width: none; box-shadow: none; }
  [data-mobile-page="profile"] .tabs::-webkit-scrollbar { display: none; }
  [data-mobile-page="profile"] .tabs .tab-link { display: flex; align-items: center; justify-content: center; flex: 1 0 auto; min-width: 74px; text-align: center; font-size: 13px; border-bottom: 2px solid transparent; }
  [data-mobile-page="profile"] .tabs .tab-link.active { border-bottom-color: #b8d057; }
  [data-mobile-page="profile"] .post-box .icon-label-hover::after { display: none !important; content: none !important; }
  html[data-mobile-page="profile"] body:is(.restaurant-profile-ui,.supplier-profile-ui) > :is(.profile-wrapper5,.user-info) { width: calc(100% - 24px) !important; max-width: 680px !important; }
  html[data-mobile-page="profile"] body:is(.restaurant-profile-ui,.supplier-profile-ui) > .profile-wrapper5 { margin-top: -28px !important; }
  html[data-mobile-page="profile"] body:is(.restaurant-profile-ui,.supplier-profile-ui) .profile-img5 { width: 80px !important; height: 80px !important; margin-left: 0 !important; }
  html[data-mobile-page="profile"] body:is(.restaurant-profile-ui,.supplier-profile-ui) .cover-photo5 { width: 100% !important; max-width: none !important; }
  html[data-mobile-page="profile"] body:is(.restaurant-profile-ui,.supplier-profile-ui) > .user-info { padding: 12px 16px 16px !important; margin-top: 0 !important; min-height: 0 !important; }
  html[data-mobile-page="profile"] #userName { min-width: 0; max-width: 100%; }
  html[data-mobile-page="profile"] #userName .profile-name-text { flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; }
  html[data-mobile-page="profile"] #userName .profile-rating-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 100%; }
  html[data-mobile-page="profile"] #userName .profile-rating-line :is(.stars,.review-count) { font-size: 12px !important; letter-spacing: 0 !important; }
  html[data-mobile-page="profile"] #userName .profile-catalog-button { position: relative !important; top: auto; right: auto; flex: 0 0 auto; max-width: 100%; margin-left: auto; min-height: 36px; height: auto; padding: 8px 10px; }
  html[data-mobile-page="profile"] .user-info .profile-action-buttons { display: flex; width: 100%; justify-content: space-between !important; gap: 4px !important; }
  html[data-mobile-page="profile"] .user-info .profile-action-item { flex: 1 1 0; min-width: 0; width: auto; }
  html[data-mobile-page="profile"] .profile-rate-card { top: auto; bottom: calc(100% + 12px); left: auto; right: 0; width: 266px; max-width: calc(100vw - 56px); transform: none; }
  html[data-mobile-page="profile"] .profile-rate-card::before { top: auto; bottom: -6px; left: auto; right: 17px; transform: rotate(225deg); }
}

/* Mobile auth/contact controls use the elTahi brand green and compact 13px type. */
@media (max-width: 900px) {
  [data-mobile-page="index"] .login-form .input-field { font-size: 14px !important; }
  [data-mobile-page="index"] :is(.btn-submit,#SignUpBtn1,#SignUpBtn2,#SignUpBtn3) { font-size: 16px !important; }

  [data-mobile-page="index"] .form-cols :is(label, a),
  [data-mobile-page="index"] .switch-form a,
  [data-mobile-page="index"] .switch-form2 a,
  [data-mobile-page="index"] #SignInBtn,
  [data-mobile-page="index"] #openForgetBtn2,
  [data-mobile-page="index"] #contactDropdownBtn,
  [data-mobile-page="index"] #selectedContactRelation,
  [data-mobile-page="index"] #contactDropdownMenue,
  [data-mobile-page="index"] #contactDropdownMenue label {
    color: #b8d057 !important;
    font-size: 13px !important;
  }

  [data-mobile-page="index"] #SignInBtn {
    color: #fff !important;
  }

  [data-mobile-page="index"] #contactDropdownBtn {
    color: #888 !important;
    font-size: 13px !important;
    text-align: left;
  }

  [data-mobile-page="index"] #contactDropdownBtn .dropdown-arrow {
    color: #b8d057 !important;
    font-size: 13px !important;
  }

  [data-mobile-page="index"] #contactDropdownMenue {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 132px !important;
    padding: 6px 8px !important;
    overflow-y: auto !important;
    background: #fff !important;
  }

  [data-mobile-page="index"] #contactDropdownMenue li {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    color: #222 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  [data-mobile-page="index"] #contactDropdownMenue li input[type="checkbox"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  [data-mobile-page="index"] #contactDropdownMenue li label {
    flex: 1 1 auto !important;
    color: #222 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }
}

/* Center one scalable tick in both direct and label-backed checkbox squares. */
html body input[type="checkbox"]:not(:where(.switch input, [role="switch"])):checked::after,
html body input[type="checkbox"]:checked + .checkmark::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 75% !important;
  height: 75% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}