/* Brand gradient for hero only; modern-nav uses a flat bar.
         Guest homepage uses a photo <img> — skip solid/gradient flash there. */
      .banner_box,
      body:not(.modern-nav) .innerheaders {
        background: var(--bmf-hgr-left);
        background: -webkit-linear-gradient(to left, var(--bmf-hgr-left), var(--bmf-hgr-right));
        background: linear-gradient(to left, var(--bmf-hgr-left), var(--bmf-hgr-right));
        color: var(--bmf-header-fcolor);
      }
      body.modern-nav .banner_sec:not(.banner_sec--member) .banner_box {
        background: transparent !important;
        color: var(--bmf-header-fcolor);
      }
      /* Dark mode: deepen brand gradient for hero (nav is modern flat) */
      html[data-theme="dark"] .banner_box,
      html[data-theme="dark"] body:not(.modern-nav) .innerheaders,
      html[data-theme="dark"] body:not(.modern-nav) .header_sec.innerheaders {
        background: var(--bmf-hgr-left) !important;
        background: linear-gradient(
          125deg,
          color-mix(in srgb, var(--bmf-hgr-left) 38%, #0a0b10 62%) 0%,
          color-mix(in srgb, var(--bmf-hgr-right) 34%, #12141a 66%) 55%,
          color-mix(in srgb, var(--bmf-hgr-left) 28%, #0d0f14 72%) 100%
        ) !important;
        color: #e8eaed !important;
      }
      
      .banner_details a.explore_btn, .banner_details a.explore_btn:hover, .creator_sec a.browse_btn, .creator_sec a.browse_btn:hover {
          background: var(--bmf-btn-bg);
          border: var(--bmf-btn-bg);
          color: var(--bmf-btn-ft);
          box-shadow: none;
      }
      .welcome_sec p b {
        color:var(--bmf-btn-bg);
      }
      .welcome_sec p:before {
        background: var(--bmf-btn-bg);
      }
      

      /* Verified badge — brand SVG + hero palette color */
      .verified-badge-icon {
          display: inline-block;
          width: 22px;
          height: 22px;
          vertical-align: -4px;
          margin-left: 6px;
          background-color: var(--bmf-hgr-left);
          -webkit-mask: var(--bmf-badge-url, url(/images/badge.svg)) center / contain no-repeat;
          mask: var(--bmf-badge-url, url(/images/badge.svg)) center / contain no-repeat;
      }
      .creator_txtInnr h5.verified {
          background: none !important;
          padding-right: 28px;
          position: relative;
      }
      .creator_txtInnr h5.verified::after,
      .feed_boxtopLeft .media-body h4 span::after {
          content: '';
          position: absolute;
          background-color: var(--bmf-hgr-left);
          -webkit-mask: var(--bmf-badge-url, url(/images/badge.svg)) center / contain no-repeat;
          mask: var(--bmf-badge-url, url(/images/badge.svg)) center / contain no-repeat;
      }
      .creator_txtInnr h5.verified::after {
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
      }
      .feed_boxtopLeft .media-body h4 span {
          background: none !important;
          padding-right: 26px;
          position: relative;
          display: inline-block;
      }
      .feed_boxtopLeft .media-body h4 span::after {
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 18px;
          height: 18px;
      }
      .post-user-badge {
          display: inline-flex !important;
          align-items: center;
          gap: 6px;
          background: none !important;
          padding-right: 0 !important;
          padding-bottom: 0 !important;
          position: static;
          vertical-align: middle;
          line-height: 1.2;
      }
      .post-user-badge::after {
          content: '';
          position: static;
          display: inline-block;
          flex-shrink: 0;
          width: 22px;
          height: 22px;
          background-color: var(--bmf-hgr-left);
          -webkit-mask: var(--bmf-badge-url, url(/images/badge.svg)) center / contain no-repeat;
          mask: var(--bmf-badge-url, url(/images/badge.svg)) center / contain no-repeat;
      }

      /* Main profile avatar — status dot bottom-right (overrides min.css) */
      .profilePic {
          overflow: visible !important;
      }
      .profilePicOnline::after,
      .profilePicOffline::after {
          top: auto !important;
          left: auto !important;
          bottom: 16px !important;
          right: 16px !important;
          transform: none !important;
          z-index: 5 !important;
      }

      /* Small avatar online/offline dots — outside bottom-right (overrides min.css) */
      .profilePicSmall {
          overflow: visible !important;
          border-radius: 0 !important;
          background: transparent !important;
          box-shadow: none !important;
      }
      .profilePicSmall img {
          width: 75px !important;
          height: 75px !important;
          max-width: none !important;
          object-fit: cover !important;
          object-position: center;
          border-radius: 50% !important;
          display: block;
          box-shadow: 0 0 15px -9px #333;
      }
      .profilePicOnlineSm::after,
      .profilePicOfflineSm::after {
          top: auto !important;
          left: auto !important;
          bottom: 4px !important;
          right: 4px !important;
          transform: none !important;
          z-index: 5 !important;
      }

      /* Phone: 56px logo bar — page content starts below it, not under it */
      @media only screen and (max-width: 991.98px) {
          #wrap {
              margin-top: 56px !important;
          }
          .site-logo {
              max-height: 36px !important;
          }
          .header_sec,
          .innerheaders.header_sec {
              height: 56px !important;
              min-height: 56px !important;
              padding-top: 0 !important;
              padding-bottom: 0 !important;
          }
          .header_sec.innerheaders .nav_top,
          .innerheaders.header_sec .nav_top {
              display: flex !important;
              align-items: center !important;
              min-height: 56px !important;
              height: 56px !important;
          }
          .nav_top .navbar-brand {
              display: flex !important;
              align-items: center !important;
              height: 56px !important;
              margin: 0 !important;
              padding: 0 !important;
          }
          .nav_top .navbar-brand img {
              margin-top: 0 !important;
              max-height: 36px !important;
          }
          .header_sec .nav_top > .navbar-toggler,
          .innerheaders .nav_top > .navbar-toggler {
              position: relative !important;
              top: auto !important;
              right: auto !important;
              left: auto !important;
              margin: 0 12px 0 auto !important;
              padding: 0 !important;
              width: 44px !important;
              height: 44px !important;
              display: inline-flex !important;
              align-items: center !important;
              justify-content: center !important;
          }

          /* Drawer must not be clipped by the 56px header (iOS landscape) */
          .header_sec,
          .innerheaders.header_sec,
          .header_sec .container,
          .header_sec .nav_top {
              overflow: visible !important;
          }
          #navbarSupportedContent.navbar-collapse,
          .header_sec .navbar-collapse {
              position: fixed !important;
              top: 0 !important;
              bottom: 0 !important;
              width: 270px !important;
              height: 100vh !important;
              height: 100dvh !important;
              max-height: 100vh !important;
              max-height: 100dvh !important;
              overflow-x: hidden !important;
              overflow-y: auto !important;
              -webkit-overflow-scrolling: touch;
              overscroll-behavior: contain;
              z-index: 2000 !important;
              display: block !important;
              padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
          }
          #navbarSupportedContent.navbar-collapse.collapsing,
          #navbarSupportedContent.navbar-collapse.show {
              height: 100vh !important;
              height: 100dvh !important;
              overflow-y: auto !important;
          }
          #navbarSupportedContent .menu_sec,
          #navbarSupportedContent .menu_sec li {
              display: block !important;
              float: none !important;
              width: 100% !important;
          }
          #navbarSupportedContent .menu_sec li a {
              display: block !important;
              width: 100% !important;
          }
      }
      @media only screen and (max-width: 600px) {
          body {
              padding-top: 0 !important;
          }
      }

      /* Global Livewire Pagination Styles */
      .pagination {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        align-items: center;
      }

      .pagination .page-item {
        margin: 0 2px;
        list-style: none;
      }

      .pagination .page-link {
        border: none !important;
        color: #667eea !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        transition: all 0.3s ease;
        background: transparent !important;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        font-size: 14px !important;
        font-weight: 500;
        line-height: 1.2;
      }

      .pagination .page-link span {
        font-size: 14px !important;
        line-height: 1.2;
        display: inline-block;
      }

      /* Fix arrow size - control the HTML entity arrows (‹ and ›) */
      .pagination .page-link span.d-none.d-md-block {
        font-size: 18px !important;
        line-height: 1;
        font-weight: normal;
        vertical-align: middle;
      }

      .pagination .page-link span.d-block.d-md-none {
        font-size: 12px !important;
        line-height: 1.2;
      }

      .pagination .page-link:hover {
        background: #667eea !important;
        color: white !important;
        text-decoration: none;
      }

      .pagination .page-item.active .page-link {
        background: #667eea !important;
        color: white !important;
        border-color: #667eea !important;
      }

      .pagination .page-item.disabled .page-link {
        color: #6c757d !important;
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.5;
        background: #e9ecef !important;
      }

      .pagination .page-item.disabled .page-link span {
        font-size: 14px !important;
      }

      /* Tailwind pagination SVGs have no size without Tailwind CSS (default ~300–600px) */
      nav[role="navigation"] svg.w-5,
      nav[role="navigation"] svg.h-5,
      .pagination svg,
      svg.w-5.h-5 {
        width: 1.25rem !important;
        height: 1.25rem !important;
        max-width: 1.25rem !important;
        max-height: 1.25rem !important;
        display: inline-block;
        vertical-align: middle;
        flex-shrink: 0;
      }
      nav[role="navigation"] span.relative.z-0.inline-flex,
      nav[role="navigation"] span.inline-flex {
        display: inline-flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 2px;
      }