.mobile-app-header, .mobile-app-tabs { display: none; }
.mobile-app-menu { display: none; }
.mobile-chat-back { display: none; }
.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 { 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: #25300c; }
  .mobile-app-tabs [aria-current="page"] { border-top: 2px solid #8a9f34; }
  .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-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: #7c942a; background: #f5f8e9; }
  .mobile-app-menu[open] { display: block; position: fixed; inset: 0 auto 0 0; width: min(360px,90%); height: 100dvh; max-height: 100dvh; max-width: 90%; margin: 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border: 0; background: #fff; color: #333; overflow-y: auto; }
  .mobile-app-menu::backdrop { background: rgb(0 0 0 / 40%); }
  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 .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: 12px !important; padding: 12px !important; }
  #storiesMount { top: auto !important; margin-top: 12px !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 .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-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-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: 14px !important; animation: none !important; overflow: auto; }
  .add-post-modal .icon-section2 { justify-content: flex-start !important; gap: 14px !important; overflow-x: auto; padding-bottom: 8px; }
  .add-post-modal :is(.scrollable-form,.scrollable-container) { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 230px) !important; padding: 8px 0 !important; }
  .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: flex; flex-wrap: wrap; gap: 8px !important; width: 100% !important; }
  .add-post-modal .form-row > .input-group { flex: 1 1 130px; }
  .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 .dropdown-menu, .add-post-modal .dropdown-menue { max-width: 100% !important; width: 100% !important; max-height: 220px; overflow-y: auto; }
  .add-post-modal .postbtn { position: sticky !important; bottom: 0 !important; width: 100% !important; max-width: none !important; left: auto !important; right: auto !important; transform: none !important; margin: 10px 0 0 !important; min-height: 44px; }
  .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-modal { box-sizing: border-box !important; position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; padding: 60px 44px !important; align-items: center !important; justify-content: center !important; z-index: 2400 !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: min(900px,100%) !important; height: auto !important; max-height: calc(100dvh - 120px) !important; margin: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; }
.info-slide-modal .image-container img { display: block !important; flex-shrink: 0; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; object-fit: contain; }
.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-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid #d8dfd7; border-radius: 6px; background: white; color: #333; }