@import url("mobile-safety.css");

@media (max-width: 900px) {
  .mobile-toggle {
    display: block;
  }
  .menu {
    display: none;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 20px;
    box-shadow: var(--shadow);
  }
  .menu.show {
    display: flex;
  }
  .hero-grid,
  .layout,
  .profile-head-grid,
  .detail-grid,
  .chat-layout,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero h1,
  .page-hero h1 {
    font-size: 42px;
  }
  .form-grid,
  .stats,
  .grid,
  .plans,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .list-card {
    grid-template-columns: 1fr;
  }
  .list-card img {
    width: 100%;
    height: 260px;
  }
  .preview {
    display: none;
  }
}
@media (max-width: 560px) {
  .container {
    padding: 0 14px;
  }
  .form-grid,
  .stats,
  .grid,
  .plans,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 36px;
  }
  .topbar {
    height: auto;
    padding: 12px 0;
  }
  .menu {
    top: 70px;
  }
  .cta {
    display: block;
  }
  .profile-card img {
    height: 220px;
  }
}

/* EMERGENCY SEARCH PAGE MOBILE CLEANUP
   Fixes hero spacing, filter/results overlap, and cropped search bar.
   Mobile-only; desktop/backend untouched. */
@media (max-width: 768px) {
  .page-hero {
    padding: 38px 0 28px !important;
    min-height: auto !important;
  }

  .page-hero .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }

  .page-hero h1 {
    font-size: 46px !important;
    line-height: 1.05 !important;
    margin: 0 0 14px !important;
  }

  .page-hero p {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    max-width: 310px !important;
  }

  .search-page-section {
    padding: 28px 0 70px !important;
    overflow: visible !important;
  }

  .search-page-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .search-filter-card {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 34px !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }

  .search-results-area {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .search-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
    margin: 0 0 24px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .search-toolbar strong {
    display: block !important;
    width: 100% !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .search-keyword-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    flex: none !important;
    overflow: hidden !important;
  }

  .search-keyword-wrap input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  .sort-wrap {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }

  .sort-wrap select {
    min-width: 0 !important;
    max-width: 220px !important;
    height: 52px !important;
    box-sizing: border-box !important;
  }
}

/* Keep only the first hero image badge; hide the duplicate second badge. */
.hero-image::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   SUCCESS STORIES MOBILE CROPPING FIX - UI ONLY
   Fixes success hero image and share-story modal on phones.
========================================================= */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .success-stories-page,
  .premium-stories-hero,
  .stories-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .premium-stories-hero .container,
  .stories-section .container,
  .stories-hero-grid,
  .stories-hero-copy,
  .stories-hero-image,
  .premium-hero-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .premium-stories-hero .container,
  .stories-section .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .stories-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .stories-hero-image,
  .premium-hero-image {
    display: block !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .stories-hero-image img,
  .premium-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 0.9 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
  }

  .share-story-cta {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 26px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #storyModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #storyModal .upi-modal-card {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100vh - 28px) !important;
    padding: 26px 16px 22px !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #storyModal .upi-close {
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 2 !important;
  }

  #storyModalContent,
  #storyModalContent * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #storyModalContent h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    padding-right: 46px !important;
    margin: 22px 0 18px !important;
  }

  #shareStoryForm.story-share-form,
  #storyModal .story-share-form,
  #storyModal .admin-form.story-share-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding: 16px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #storyModal .story-share-form input,
  #storyModal .story-share-form textarea,
  #storyModal .story-share-form select,
  #storyModal .story-upload-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #storyModal .story-share-form input,
  #storyModal .story-share-form textarea {
    border-radius: 12px !important;
  }

  #storyModal .story-upload-box {
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  #storyModal .story-upload-box span {
    display: block !important;
    margin: 0 0 8px !important;
  }

  #storyModal .story-upload-box input[type="file"] {
    font-size: 14px !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid #ffd3e2 !important;
    border-radius: 12px !important;
  }

  #storyModal .story-share-form textarea {
    min-height: 112px !important;
    resize: vertical !important;
  }

  #storyModal .story-share-form .btn {
    width: auto !important;
    min-width: 156px !important;
    max-width: 100% !important;
    justify-self: start !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 420px) {
  .premium-stories-hero .container,
  .stories-section .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .stories-hero h1 {
    font-size: 36px !important;
    line-height: 1.12 !important;
  }

  .stories-hero p {
    font-size: 18px !important;
  }

  #storyModal {
    padding: 10px !important;
  }

  #storyModal .upi-modal-card {
    max-width: calc(100vw - 20px) !important;
    padding: 24px 14px 18px !important;
  }

  #shareStoryForm.story-share-form,
  #storyModal .story-share-form,
  #storyModal .admin-form.story-share-form {
    padding: 14px !important;
  }
}

/* =========================================================
   SUCCESS STORY MODAL MOBILE POLISH - UI ONLY
   Adds spacing, cleaner inputs, better upload control, and
   prevents cropped popup content on phone screens.
========================================================= */
@media (max-width: 768px) {
  #storyModal {
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #storyModal.show {
    animation: storyModalFadeIn .22s ease-out both !important;
  }

  #storyModal .upi-modal-card {
    width: 92vw !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 24px !important;
    border-radius: 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    animation: storyModalSlideUp .24s ease-out both !important;
  }

  #storyModal .upi-close {
    position: sticky !important;
    top: 0 !important;
    margin-left: auto !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
    z-index: 10 !important;
  }

  #storyModalContent h2 {
    margin: 0 0 22px !important;
    padding-right: 0 !important;
    font-size: 31px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  #shareStoryForm.story-share-form,
  #storyModal .story-share-form,
  #storyModal .admin-form.story-share-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    margin: 0 !important;
    border: 1px solid #ffd1df !important;
    border-radius: 20px !important;
    background: #fff8fb !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #storyModal .story-share-form input:not([type="file"]),
  #storyModal .story-share-form textarea,
  #storyModal .story-share-form select {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid #ffc7d9 !important;
    border-radius: 13px !important;
    background: #fff !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    outline: none !important;
  }

  #storyModal .story-share-form input:not([type="file"]):focus,
  #storyModal .story-share-form textarea:focus,
  #storyModal .story-share-form select:focus {
    border-color: #ec1d63 !important;
    box-shadow: 0 0 0 3px rgba(236, 29, 99, 0.12) !important;
  }

  #storyModal .story-share-form textarea {
    min-height: 118px !important;
    padding: 14px !important;
    resize: vertical !important;
  }

  #storyModal .story-upload-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  #storyModal .story-upload-box span {
    display: block !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  #storyModal .story-upload-box input[type="file"] {
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px !important;
    border: 1px solid #ffc7d9 !important;
    border-radius: 13px !important;
    background: #fff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  #storyModal .story-upload-box input[type="file"]::file-selector-button {
    min-height: 34px !important;
    margin-right: 10px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #ec1d63 !important;
    color: #fff !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  #sharePhotoPreview {
    margin: 0 !important;
    border-radius: 16px !important;
  }

  #shareStoryMessage {
    margin: 0 !important;
  }

  #storyModal .story-share-form .btn {
    width: auto !important;
    min-width: 170px !important;
    max-width: 100% !important;
    min-height: 50px !important;
    align-self: flex-start !important;
    justify-self: start !important;
    margin-top: 6px !important;
    padding: 0 22px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 420px) {
  #storyModal {
    padding: 12px !important;
  }

  #storyModal .upi-modal-card {
    width: 94vw !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  #storyModalContent h2 {
    font-size: 29px !important;
    margin-bottom: 20px !important;
  }

  #shareStoryForm.story-share-form,
  #storyModal .story-share-form,
  #storyModal .admin-form.story-share-form {
    gap: 16px !important;
    padding: 16px !important;
  }

  #storyModal .story-share-form .btn {
    width: 100% !important;
    align-self: stretch !important;
  }
}

@keyframes storyModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes storyModalSlideUp {
  from { transform: translateY(14px) scale(.98); }
  to { transform: translateY(0) scale(1); }
}

/* =========================================================
   GLOBAL MOBILE NAVBAR FIX
   Scope: mobile only. Keeps desktop/backend/logic untouched.
   Makes hamburger left, logo centered, menu same on all pages.
========================================================= */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  .topbar {
    height: 80px !important;
    min-height: 80px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(236, 72, 153, 0.13) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07) !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }

  .topbar .container.nav,
  .topbar .nav,
  header.topbar .container.nav {
    width: 100% !important;
    max-width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: grid !important;
    grid-template-columns: 52px 1fr 52px !important;
    align-items: center !important;
    justify-content: initial !important;
    gap: 0 !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .topbar .mobile-toggle,
  header.topbar .mobile-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 23px !important;
    color: #e91e63 !important;
    background: #fff7fb !important;
    border: 1px solid #ffd2e3 !important;
    box-shadow: 0 8px 22px rgba(233, 30, 99, 0.12) !important;
    z-index: 3 !important;
  }

  .topbar .brand-logo,
  .topbar .logo,
  header.topbar .brand-logo,
  header.topbar .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    height: 62px !important;
    min-height: 0 !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  .topbar .site-logo-img,
  header.topbar .site-logo-img,
  .site-logo-img {
    width: auto !important;
    max-width: 142px !important;
    height: 50px !important;
    max-height: 50px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .topbar .menu,
  header.topbar .menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px 28px 20px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(236, 72, 153, 0.18) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
    z-index: 9998 !important;
    overflow: visible !important;
  }

  .topbar .menu.show,
  header.topbar .menu.show {
    display: flex !important;
  }

  .topbar .nav-links,
  header.topbar .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
  }

  .topbar .nav-links a,
  header.topbar .nav-links a {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #111827 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  .topbar .nav-links a.active,
  header.topbar .nav-links a.active {
    color: #e91e63 !important;
  }

  .topbar .nav-account,
  header.topbar .nav-account {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 4px !important;
    flex-wrap: wrap !important;
  }

  .topbar .message-icon-link,
  .topbar .notification-icon-link,
  .topbar .profile-icon-link,
  header.topbar .message-icon-link,
  header.topbar .notification-icon-link,
  header.topbar .profile-icon-link {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e8edf5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
  }

  .topbar .login-link,
  .topbar .register-link,
  header.topbar .login-link,
  header.topbar .register-link {
    min-height: 44px !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 390px) {
  .topbar .container.nav,
  .topbar .nav,
  header.topbar .container.nav {
    padding: 0 14px !important;
    grid-template-columns: 50px 1fr 50px !important;
  }

  .topbar .site-logo-img,
  header.topbar .site-logo-img,
  .site-logo-img {
    max-width: 132px !important;
    height: 48px !important;
    max-height: 48px !important;
  }

  .topbar .mobile-toggle,
  header.topbar .mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/* Admin link visibility safety fix: mobile menu CSS uses display: block !important,
   so keep Admin hidden unless session.js confirms the logged-in user is an admin. */
.admin-nav-link:not(.is-admin-visible),
.topbar .nav-links a.admin-nav-link:not(.is-admin-visible),
header.topbar .nav-links a.admin-nav-link:not(.is-admin-visible) {
  display: none !important;
}

.admin-nav-link[hidden] {
  display: none !important;
}

/* =========================================================
   GLOBAL MOBILE NAV DRAWER POLISH
   Applies same horizontal icon row menu on every frontend page.
========================================================= */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; }

  header.topbar,
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  header.topbar .container.nav,
  .topbar .container.nav,
  header.topbar .nav,
  .topbar .nav {
    display: grid !important;
    grid-template-columns: 52px 1fr 52px !important;
    align-items: center !important;
    min-height: 82px !important;
    padding: 12px 24px !important;
    position: relative !important;
  }

  header.topbar .mobile-toggle,
  .topbar .mobile-toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 25px !important;
    line-height: 1 !important;
    color: #f01868 !important;
    background: #fff !important;
    border: 1px solid rgba(240,24,104,.22) !important;
    box-shadow: 0 10px 26px rgba(240,24,104,.10) !important;
    z-index: 10001 !important;
  }

  header.topbar .brand-logo,
  .topbar .brand-logo,
  header.topbar .logo,
  .topbar .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  header.topbar .site-logo-img,
  .topbar .site-logo-img,
  .site-logo-img {
    width: auto !important;
    max-width: 132px !important;
    height: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
  }

  header.topbar nav.menu,
  .topbar nav.menu,
  header.topbar .menu,
  .topbar .menu {
    display: none !important;
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    top: 88px !important;
    width: auto !important;
    max-width: none !important;
    padding: 24px 28px 22px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(236,72,153,.16) !important;
    box-shadow: 0 26px 70px rgba(15,23,42,.16) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  header.topbar nav.menu.show,
  .topbar nav.menu.show,
  header.topbar .menu.show,
  .topbar .menu.show {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
  }

  header.topbar .nav-links,
  .topbar .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
  }

  header.topbar .nav-links a,
  .topbar .nav-links a {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #111827 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: -0.3px !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  header.topbar .nav-links a.active,
  .topbar .nav-links a.active {
    color: #ee1765 !important;
  }

  header.topbar nav.menu.show .nav-account,
  .topbar nav.menu.show .nav-account,
  header.topbar .menu.show .nav-account,
  .topbar .menu.show .nav-account {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 6px 0 0 !important;
    margin: 0 !important;
  }

  header.topbar nav.menu.show .nav-account .message-icon-link,
  header.topbar nav.menu.show .nav-account .notification-icon-link,
  header.topbar nav.menu.show .nav-account .profile-icon-link,
  .topbar nav.menu.show .nav-account .message-icon-link,
  .topbar nav.menu.show .nav-account .notification-icon-link,
  .topbar nav.menu.show .nav-account .profile-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #221345 !important;
    border: 1px solid #e7ebf2 !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.09) !important;
    text-decoration: none !important;
    position: relative !important;
  }

  header.topbar nav.menu.show .nav-account .message-icon-link i,
  header.topbar nav.menu.show .nav-account .notification-icon-link i,
  .topbar nav.menu.show .nav-account .message-icon-link i,
  .topbar nav.menu.show .nav-account .notification-icon-link i {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  header.topbar nav.menu.show .nav-account .profile-avatar,
  .topbar nav.menu.show .nav-account .profile-avatar {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  header.topbar nav.menu.show .nav-account .notification-count,
  .topbar nav.menu.show .nav-account .notification-count {
    position: absolute !important;
    top: -7px !important;
    right: -4px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ee1765 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  header.topbar nav.menu.show .nav-account .login-link,
  header.topbar nav.menu.show .nav-account .register-link,
  header.topbar nav.menu.show .nav-account .user-box,
  .topbar nav.menu.show .nav-account .login-link,
  .topbar nav.menu.show .nav-account .register-link,
  .topbar nav.menu.show .nav-account .user-box {
    display: none !important;
  }
}

@media (max-width: 390px) {
  header.topbar .container.nav,
  .topbar .container.nav,
  header.topbar .nav,
  .topbar .nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  header.topbar nav.menu,
  .topbar nav.menu,
  header.topbar .menu,
  .topbar .menu {
    left: 16px !important;
    right: 16px !important;
    padding: 24px 28px 22px !important;
  }
}

@media (max-width: 768px){

  .users-stat-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }

  .users-stat-card{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:18px !important;
    min-height:110px !important;
    padding:18px 20px !important;
    position:relative !important;
    overflow:hidden !important;
  }

  .users-stat-icon{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
  }

  .users-stat-card > div{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .users-stat-card h3{
    margin:0 0 8px !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }

  .users-stat-card h2{
    margin:0 !important;
    font-size:38px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  .users-stat-card::after{
    right:-35px !important;
    bottom:-35px !important;
  }
}

@media (max-width:768px){

  body.admin-body #usersPanel .users-stat-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    width:100% !important;
  }

  body.admin-body #usersPanel .users-stat-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:72px 1fr !important;
    align-items:center !important;
    column-gap:16px !important;
    min-height:108px !important;
    padding:18px !important;
    box-sizing:border-box !important;
  }

  body.admin-body #usersPanel .users-stat-icon{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
    grid-column:1 !important;
  }

  body.admin-body #usersPanel .users-stat-card > div{
    grid-column:2 !important;
    min-width:0 !important;
  }

  body.admin-body #usersPanel .users-stat-card h3{
    margin:0 0 8px !important;
    font-size:15px !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }

  body.admin-body #usersPanel .users-stat-card h2{
    margin:0 !important;
    font-size:36px !important;
    line-height:1 !important;
  }
}

@media (max-width: 768px){

  .admin-body #profilesPanel .admin-mini-metrics > div{
    display:grid !important;
    grid-template-columns:76px 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:18px !important;
    row-gap:4px !important;
    align-items:center !important;

    min-height:118px !important;
    padding:22px 26px !important;
  }

  .admin-body #profilesPanel .admin-mini-metrics > div::before{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
  }

  .admin-body #profilesPanel .admin-mini-metrics > div span{
    grid-column:2 !important;
    grid-row:1 !important;

    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
    text-align:left !important;
    align-self:end !important;
  }

  .admin-body #profilesPanel .admin-mini-metrics > div strong{
    grid-column:2 !important;
    grid-row:2 !important;

    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    text-align:left !important;
    align-self:start !important;
    font-size:38px !important;
  }
}

/* ===== Profile Approval Filters - Mobile ===== */
@media (max-width: 768px){

    .admin-body #profilesPanel .profile-approval-filters{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
        width:100% !important;
    }

    .admin-body #profilesPanel .profile-approval-filters button{
        width:100% !important;
        height:46px !important;
        padding:0 16px !important;
        font-size:15px !important;
        font-weight:600 !important;
        white-space:nowrap !important;
    }

    /* Active tab spans full width */
    .admin-body #profilesPanel .profile-approval-filters button.active{
        grid-column:1 / -1 !important;
    }
}

@media (max-width: 640px){

  body.admin-body #profilesPanel .admin-table tbody tr:not(.admin-inline-edit-row) > td.admin-actions.profile-row-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 14px !important;
  }

  body.admin-body #profilesPanel .admin-table tbody tr:not(.admin-inline-edit-row) > td.admin-actions.profile-row-actions .btn,
  body.admin-body #profilesPanel .admin-table tbody tr:not(.admin-inline-edit-row) > td.admin-actions.profile-row-actions button{
    display: flex !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 0 12px 0 !important;
    border-radius: 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.admin-body #profilesPanel .admin-table tbody tr:not(.admin-inline-edit-row) > td.admin-actions.profile-row-actions button:last-child{
    margin-bottom: 0 !important;
  }
}

@media (max-width: 640px){

  body.admin-body #profilesPanel 
  .admin-table tbody tr:not(.admin-inline-edit-row) 
  > td.admin-actions.profile-row-actions 
  button.btn.mini.kebab{
      display:none !important;
      visibility:hidden !important;
      width:0 !important;
      height:0 !important;
      padding:0 !important;
      margin:0 !important;
      overflow:hidden !important;
  }

}

@media (max-width:768px){

    .admin-body #profilesPanel .profile-premium-banner{
        min-height:170px !important;
        padding:22px !important;
        align-items:flex-start !important;
    }

    .admin-body #profilesPanel .profile-banner-copy{
        width:100% !important;
        z-index:2;
    }

    .admin-body #profilesPanel .profile-banner-copy h3{
        color:#0f172a !important;
        font-size:34px !important;
        line-height:1.1 !important;
        margin:10px 0 !important;
    }

    .admin-body #profilesPanel .profile-banner-copy p{
        color:#475569 !important;
        font-size:17px !important;
        line-height:1.6 !important;
    }

    .admin-body #profilesPanel .admin-kicker{
        color:#e91e63 !important;
        font-weight:700;
    }
}

@media (max-width:768px){

    .admin-body #profilesPanel .profile-banner-art{
        display:none !important;
    }

}

/* Hide 3-dot menu on Users cards (Mobile) */
@media (max-width:768px){

    body.admin-body #usersPanel .users-row-action{
        display:none !important;
    }

}

@media (max-width:768px){

    body.admin-body #usersPanel .users-row-action{
        display:none !important;
        visibility:hidden !important;
        width:0 !important;
        height:0 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
    }

}

@media (max-width:390px){

    body.admin-body #usersPanel .admin-profile-mini.users-profile-cell > div{
        min-width:0 !important;
    }

    body.admin-body #usersPanel .admin-profile-mini.users-profile-cell b{
        display:block !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    body.admin-body #usersPanel .admin-profile-mini.users-profile-cell small{
        display:block !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

} 

@media (max-width:768px){

  body.admin-body #usersPanel .admin-table td:nth-child(n+2):nth-child(-n+8){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    min-height:42px !important;
    line-height:1 !important;
  }

  body.admin-body #usersPanel .admin-table td:nth-child(n+2):nth-child(-n+8)::before{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    line-height:1 !important;
  }

  body.admin-body #usersPanel .admin-table td:nth-child(n+2):nth-child(-n+8) > *{
    align-items:center !important;
    line-height:1 !important;
  }
}

@media (max-width:768px){

  body.admin-body #usersPanel .users-membership-cell{
    width:100% !important;
    min-height:auto !important;
    display:grid !important;
    align-items:center !important;
    padding:14px 16px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
  }

  body.admin-body #usersPanel .users-membership-cell::before{
    grid-column:1 !important;
    white-space:nowrap !important;
    line-height:1 !important;
  }

  body.admin-body #usersPanel .users-membership-cell > div{
    grid-column:2 !important;
    min-width:0 !important;
    text-align:right !important;
  }

  body.admin-body #usersPanel .users-membership-cell b{
    display:block !important;
    max-width:100% !important;
    font-size:15px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  body.admin-body #usersPanel .users-membership-cell small{
    margin-top:4px !important;
    font-size:12px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }
}

@media (max-width:768px){

  body.admin-body #paymentsPanel .membership-payment-metrics{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    width:100% !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card{
    width:100% !important;
    min-height:112px !important;
    display:grid !important;
    grid-template-columns:70px 1fr !important;
    grid-template-rows:auto auto auto !important;
    column-gap:16px !important;
    row-gap:2px !important;
    align-items:center !important;
    padding:18px !important;
    box-sizing:border-box !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card i{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
    width:58px !important;
    height:58px !important;
    align-self:center !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card span{
    grid-column:2 !important;
    grid-row:1 !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card strong{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    font-size:34px !important;
    line-height:1 !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card small{
    grid-column:2 !important;
    grid-row:3 !important;
    margin:3px 0 0 !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }
}

@media (max-width:768px){
  body.admin-body #paymentsPanel .payment-metric-card{
    grid-template-columns:72px 1fr !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    padding:18px 20px !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card i{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card span{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    margin:0 0 4px !important;
    line-height:1.15 !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card strong{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:0 !important;
    line-height:1 !important;
  }

  body.admin-body #paymentsPanel .payment-metric-card small{
    display:none !important;
  }
}