/* Scoped to the login/register modals: the Google sign-in button.
           Unscoped .btn-outline-secondary previously also matched the
           profile-avatar dropdown-toggle in the main nav and stretched it
           to 300px wide. */
        .modal-form .btn-outline-secondary {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            height: 40px; /* Set the desired height */
            width: 300px; /* Set the desired width */
            border-radius: 0.375rem;
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            text-decoration: none;
            color: #495057;
            font-size: 1rem;
            font-weight: 500;
            transition: background-color 0.2s, border-color 0.2s;
        }

        .modal-form .btn-outline-secondary:hover {
            background-color: #e2e6ea;
            border-color: #dae0e5;
        }

        .modal-form .btn-outline-secondary svg {
            margin-right: 0.5rem;
            vertical-align: middle;
        }

        .text-center {
            text-align: center;
        }

        .mt-3 {
            margin-top: 1rem;
        }

        .separator {
            margin: 1.5rem 0;
            font-size: 1rem;
            color: #6c757d;
        }
        
         .button-text {
        display: inline-block;
        text-align: center;
        width: 100%; /* Makes the text take full width */
    }
    
    .button-spacing {
    margin-top: 20px; /* Adjust as needed */
}

















.pro-mobile-header{
  display:none;
}

@media(max-width:768px){

  .desktop-only-header{
    display:none !important;
  }

  .pro-mobile-header{
    display:block;
    background:var(--light-bg);
    padding:14px 16px;
    border-bottom:1px solid var(--light-border);
  }

  .pro-mobile-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
  }

  .pro-mobile-logo img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
  }

  .pro-mobile-menu-btn{
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid var(--light-border);
    background:var(--light-surface);
    color:#222;
    font-size:20px;
  }

  .pro-mobile-search{
    display:flex;
    background:var(--light-surface);
    border:1px solid var(--light-border);
    border-radius:14px;
    overflow:hidden;
  }

  .pro-mobile-search input{
    flex:1;
    background:transparent;
    border:none;
    padding:14px;
    color:#222;
    outline:none;
    font-size:15px;
  }

  .pro-mobile-search input::placeholder{
    color:#888;
  }

  .pro-mobile-search button{
    width:58px;
    border:none;
    background:var(--brand-green);
    color:#fff;
    font-size:18px;
  }
}

html.dark .pro-mobile-header{
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
}

html.dark .pro-mobile-menu-btn{
  border:1px solid #333;
  background:#1b1b1b;
  color:#fff;
}

html.dark .pro-mobile-search{
  background:#1c1c1c;
  border:1px solid #333;
}

html.dark .pro-mobile-search input{
  color:#fff;
}

html.dark .pro-mobile-search input::placeholder{
  color:#aaa;
}

html.dark .pro-mobile-search button{
  background:#fff;
  color:#000;
}




/* .modal-dialog-slideout / .pro-mobile-menu-content are defined once,
   below, with an explicit light/dark split (this used to be duplicated
   here and again further down with a second, more complete copy). */


.pro-mobile-search-btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px;
    background:var(--light-surface);
    border:1px solid var(--light-border);
    border-radius:14px;
    color:#666;
    cursor:pointer;
}

html.dark .pro-mobile-search-btn{
    background:#1c1c1c;
    border:1px solid #333;
    color:#999;
}














.search-overlay{
  position:fixed;
  inset:0;
  background:var(--light-surface-alt);
  z-index:99999;
  display:none;
  padding:0;
}

.search-overlay.active{
  display:block;
}

.search-box{
  width:100%;
  max-width:100%;
  min-height:100vh;
  margin:0;
  background:var(--light-surface-alt);
  border-radius:0;
  padding:0;
}

.search-top{
  background:var(--brand-black);
  padding:14px;
  display:flex;
  align-items:center;
  gap:10px;
}

.close-search{
  position:static;
  background:none;
  border:0;
  color:#fff;
  font-size:34px;
  cursor:pointer;
}

#liveSearchInput{
  width:100%;
  padding:16px;
  border:0;
  border-radius:8px;
  font-size:16px;
  outline:none;
  background:#fff;
}

.search-results{
  padding:18px 16px;
  max-height:none;
  overflow-y:auto;
}

.search-section{
  margin-bottom:28px;
}

.search-section h4{
  font-size:14px;
  font-weight:700;
  color:#6f7f88;
  margin-bottom:14px;
}

.keyword-list,
.suggestion-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.keyword-chip,
.search-suggestion{
  background:var(--light-bg);
  color:#333;
  border:0;
  padding:13px 16px;
  border-radius:5px;
  font-size:15px;
  font-weight:500;
}





















.search-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--light-bg);
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
  text-decoration:none;
  color:#111;
}

.search-item img{
  width:85px;
  height:65px;
  min-width:85px;
  object-fit:cover;
  border-radius:6px;
}

.search-item h4{
  font-size:14px;
  line-height:1.3;
  margin:0 0 5px;
  font-weight:700;
  color:#111;
}

.search-item p{
  font-size:12px;
  margin:0 0 4px;
  color:#666;
}

.search-price{
  font-size:13px !important;
  font-weight:800 !important;
  color:#000 !important;
}



@media(max-width: 600px){
  .search-item{
    padding:9px;
    gap:10px;
  }

  .search-item img{
    width:75px;
    height:58px;
    min-width:75px;
  }

  .search-item h4{
    font-size:13px;
  }
}













.modal-dialog-slideout{
  margin:0;
  width:82%;
  max-width:320px;
  height:100%;
}

.pro-mobile-menu-content{
  min-height:100vh;
  background:var(--light-bg);
  color:#222;
  border-radius:0;
  border:none;
}

.pro-mobile-menu-content .modal-header{
  border-bottom:1px solid var(--light-border);
}

.pro-mobile-menu-content .modal-title{
  color:#222;
  font-weight:700;
}

.pro-mobile-menu-content .modal-body{
  padding:10px 18px;
}

.pro-mobile-menu-content .modal-body a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 5px;
  color:#222;
  font-size:15px;
  border-bottom:1px solid var(--light-border);
  text-decoration:none;
}

.pro-mobile-menu-content .modal-body a i{
  width:20px;
}

html.dark .pro-mobile-menu-content{
  background:var(--header-bg);
  color:#fff;
}

html.dark .pro-mobile-menu-content .modal-header{
  border-bottom:1px solid #2b2b2b;
}

html.dark .pro-mobile-menu-content .modal-title{
  color:#fff;
}

html.dark .pro-mobile-menu-content .modal-body a{
  color:#fff;
  border-bottom:1px solid #2b2b2b;
}
















.mobile-submenu{
  display:none;
  background:var(--light-surface);
  border-left:2px solid var(--light-border);
}

.mobile-submenu a{
  padding-left:42px !important;
  font-size:14px !important;
  color:#333 !important;
}

html.dark .mobile-submenu{
  background:#1b1b1b;
  border-left:2px solid #555;
}

html.dark .mobile-submenu a{
  color:#ddd !important;
}

.menu-arrow{
  margin-left:auto;
}




.mobile-currency-box{
    margin-bottom:5px;
}

.currency-current{
    margin-left:auto;
    margin-right:8px;
    background:#000000;
    color:#fff;
    padding:3px 8px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}

.mobile-currency-box > a{
    display:flex;
    align-items:center;
}


#currencyMobileSub{
    max-height:300px;
    overflow-y:auto;
}






@media(max-width:768px){

  .pro-mobile-search.search-fixed{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:9999;
    background:var(--light-bg);
    padding:10px 16px;
    border-radius:0;
    border-bottom:1px solid var(--light-border);
  }

}

html.dark .pro-mobile-search.search-fixed{
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
}





/* #pageLoader / .loader-logo removed: dead code. The markup was commented
   out in includes/header.php and never existed in includes/user_header.php
   (which still ran the fade-out script against a non-existent element) -
   confirmed inert before removing, not an active themed splash screen. */




.menu-badge{
    display:inline-block !important;
    background:var(--brand-green) !important;
    color:#ffffff !important;
    font-size:9px !important;
    font-weight:800 !important;
    padding:2px 6px !important;
    border-radius:3px !important;
    margin-left:5px !important;
    line-height:1 !important;
    text-transform:uppercase !important;
}































/* DESKTOP HEADER PROFESSIONAL - DO NOT AFFECT MOBILE */
@media(min-width:769px){

  .topbar.desktop-only-header{
    height:44px;
    background:var(--light-bg) !important;
    border-bottom:1px solid var(--light-border);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    z-index:9999;
  }

  .roladel-desktop-main-header{
     top:0 !important;
    height:66px;
    background:var(--light-bg) !important;
    border-bottom:1px solid var(--light-border);
    padding:0 !important;
    z-index:9998;
  }

  .roladel-desktop-main-header .container{
    max-width:1280px;
    height:100%;
  }

  .desktop-navbar{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:36px;
  }

  .desktop-navbar hr,
  .desktop-menu hr{
    display:none !important;
  }

  .desktop-navbar .form-inline{
    margin:0 !important;
  }

  /* SEARCH BAR: the visual focus of the header - wider, pill-shaped.
     Base rule below (white pill) is what the ALWAYS-GREEN dashboard
     header (.roladel-user-header) needs and keeps unconditionally; the
     public header (.roladel-desktop-main-header) gets its own scoped
     override further down since its background now changes with the
     site theme instead of always being dark. */
  .desktop-navbar .input-group{
    width:480px;
    max-width:40vw;
  }

  .desktop-navbar .input-group:focus-within{
    box-shadow:0 0 0 3px rgba(0,0,0,.28);
    border-radius:24px;
  }

  .desktop-navbar .form-control{
    height:46px;
    background:#ffffff;
    color:#1a1a1a;
    border:1px solid transparent;
    border-radius:24px 0 0 24px;
    padding-left:20px;
  }

  .desktop-navbar .form-control::placeholder{
    color:#8a8a8a;
  }

  .desktop-navbar .btn{
    height:46px;
    padding:0 20px;
    border-radius:0 24px 24px 0;
    background:var(--brand-green);
    border-color:var(--brand-green);
    transition:background-color .2s ease, border-color .2s ease;
  }

  .desktop-navbar .btn:hover{
    background:#2a2a2a;
    border-color:#2a2a2a;
  }

  .desktop-menu .navbar-nav{
    display:flex;
    align-items:center;
    gap:20px;
  }

  /* Every header icon: same box, vertically centered, consistent size
     regardless of which FontAwesome modifiers (fa-lg/fa-fw/none) the
     markup happens to use for a given nav item. Base color (white) is
     what the always-green dashboard header needs; the public header's
     own light/dark colors are scoped further down. */
  .desktop-menu .nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    color:#fff !important;
    font-size:14px;
    font-weight:600;
    padding:10px !important;
    border-radius:10px;
    transition:color .2s ease, background-color .2s ease;
  }

  .desktop-menu .nav-link i{
    font-size:18px;
    width:20px;
    text-align:center;
    line-height:1;
  }

  .desktop-menu .nav-link:hover{
    color:#fff !important;
    background-color:rgba(255,255,255,.14);
  }

  /* Badge offset retuned for the larger nav-link padding above. Same
     selector as style.css's original rule (same specificity) so this
     wins purely by loading later - not a new/parallel rule. */
  .navbar-login .navbar-nav > .nav-item.dropdown > .nav-link .new-indicator{
    top:4px;
    right:6px;
  }

  /* ── Public header theme reactivity ──────────────────────────────
     Everything above stays exactly as-is for .roladel-user-header (the
     dashboard header keeps its fixed green branding, unaffected by the
     site theme - unchanged from before). These overrides are scoped to
     .roladel-desktop-main-header only, and win purely on specificity
     (more classes than the shared rules above), so nothing here can
     leak into the dashboard header. */
  .roladel-desktop-main-header .desktop-navbar .form-control{
    background:var(--light-surface);
    color:#1a1a1a;
    border:1px solid var(--light-border);
  }

  .roladel-desktop-main-header .desktop-menu .nav-link{
    color:#222 !important;
  }

  .roladel-desktop-main-header .desktop-menu .nav-link:hover{
    color:var(--brand-green) !important;
    background-color:rgba(0,0,0,.05);
  }

}

html.dark .topbar.desktop-only-header,
html.dark .roladel-desktop-main-header{
  background:var(--header-bg) !important;
  border-bottom:1px solid var(--header-border);
}

@media(min-width:769px){

  html.dark .roladel-desktop-main-header .desktop-navbar .form-control{
    background:#ffffff;
    color:#1a1a1a;
    border:1px solid transparent;
  }

  html.dark .roladel-desktop-main-header .desktop-menu .nav-link{
    color:#fff !important;
  }

  html.dark .roladel-desktop-main-header .desktop-menu .nav-link:hover{
    color:#fff !important;
    background-color:rgba(255,255,255,.14);
  }

}

/* Dashboard header (includes/user_header.php) sits below the same fixed
   topbar as the public header but keeps its own brand-green background. */
.roladel-user-header{
  top:29px;
  background-color:var(--brand-green) !important;
}

/* Same content width/alignment as the public header's container. height:100%
   is a no-op here since .roladel-user-header has no explicit height (kept
   auto on purpose - see header.css history), included only for parity. */
.roladel-user-header .container{
  max-width:1280px;
  height:100%;
}










@media(min-width:769px){

  .desktop-header-logo{
    display:flex;
    align-items:center;
    text-decoration:none;
  }

  .desktop-header-logo img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    transition:opacity .2s ease;
  }

  .desktop-header-logo:hover img{
    opacity:.85;
  }

}












#desktopCurrencySub{
    max-height:260px;
    overflow-y:auto;
}

#desktopCurrencySub a{
    display:block;
    padding:8px 12px;
    cursor:pointer;
    text-decoration:none;
}

#desktopCurrencySub a:hover{
    background:#f5f5f5;
}




/* =========================================================
   SMART APP INSTALL BAR (includes/header.php)
   Slim Kwork-style bar, guests + mobile only (see PHP gate above the
   markup). Hidden on desktop as a second guard using the same
   768px breakpoint the rest of the site already uses for its own
   mobile/desktop split.
========================================================= */
.app-install-bar{
  display:none;
}

@media(max-width:768px){

  .app-install-bar{
    display:flex;
    align-items:center;
    gap:10px;
    background:#ffffff;
    border-bottom:1px solid #eee;
    padding:8px 12px;
  }

  .app-install-bar__close{
    flex-shrink:0;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    color:#999;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:0;
  }

  .app-install-bar__logo{
    flex-shrink:0;
    width:34px;
    height:34px;
    border-radius:8px;
    object-fit:cover;
  }

  .app-install-bar__text{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.25;
  }

  .app-install-bar__title{
    font-size:13px;
    font-weight:700;
    color:#111;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .app-install-bar__subtitle{
    font-size:11px;
    color:#777;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .app-install-bar__buttons{
    flex-shrink:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
  }

  .app-install-bar__btn{
    flex-shrink:0;
    background:var(--brand-green);
    color:#fff;
    font-size:13px;
    font-weight:700;
    padding:7px 16px;
    border-radius:999px;
    text-decoration:none;
    white-space:nowrap;
    transition:background-color .2s ease;
  }

  .app-install-bar__btn:hover{
    background:#2a2a2a;
    color:#fff;
    text-decoration:none;
  }

  /* Logged-in variant: same markup/classes as the guest bar above (close,
     logo, text, buttons all reused as-is) - fixed to the bottom instead
     of sitting in normal flow at the top. Deliberately always dark like
     Fiverr's/Facebook's own mobile install nudge - unlike the header
     (which now follows the site theme, see the theme-reactive rules
     above), this bar is a system-notification-style element, not page
     chrome, so it intentionally does not change with html.dark. Sits
     directly above .mobile-bottom-nav via the shared
     --mobile-bottom-nav-height token (styles/variables.css) instead of
     overlapping it. */
  .app-install-bar--loggedin{
    position:fixed;
    left:0;
    right:0;
    bottom:var(--mobile-bottom-nav-height);
    z-index:1001;
    background:var(--header-bg);
    border-bottom:none;
    border-top:1px solid var(--dark-border);
    /* Fixed + full-width + this z-index sits on top of whatever a
       shorter page's own content renders in that same screen region -
       confirmed via real touch-tap testing to intercept taps meant for
       page controls underneath it (e.g. settings.php's theme toggle,
       positioned high enough in its own short sidebar to fall in this
       exact zone on common mobile viewport heights - a real device
       there would tap this bar's background, not the toggle, no matter
       how deliberately they aimed). Only the guest bar's controls
       (close button, install links) below need their own taps; the
       bar's background/logo/text never do, so this lets a tap on the
       background pass through to the real page instead of being
       silently swallowed here. */
    pointer-events:none;
  }

  .app-install-bar--loggedin .app-install-bar__close,
  .app-install-bar--loggedin .app-install-bar__btn{
    pointer-events:auto;
  }

  .app-install-bar--loggedin .app-install-bar__title{
    color:#fff;
  }

  .app-install-bar--loggedin .app-install-bar__close{
    color:rgba(255,255,255,.7);
  }

  .app-install-bar--loggedin .app-install-bar__close:hover{
    background:rgba(255,255,255,.12);
    color:#fff;
  }

}

html.dark .app-install-bar{
  background:var(--dark-surface);
  border-bottom:1px solid var(--dark-border);
}

html.dark .app-install-bar__title{
  color:#fff;
}

html.dark .app-install-bar__subtitle{
  color:#aaa;
}

html.dark .app-install-bar__close{
  color:#aaa;
}




/* =========================================================
   BATCH 3: HEADER & NAVIGATION PREMIUM REDESIGN
   Profile/notifications/messages dropdown polish + the profile toggle
   button + desktop category nav spacing. Scoped to the two header navs
   only (.roladel-desktop-main-header, .roladel-user-header) so nothing
   outside the header is affected. Not scoped under html.dark - dark
   mode already overrides background/border/color on these same
   selectors independently in dark_mode.css, so this is pure layout
   (radius/shadow/spacing/transition), left unscoped on purpose.
========================================================= */

@media(min-width:769px){

  .roladel-desktop-main-header .dropdown-menu,
  .roladel-user-header .dropdown-menu{
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    border:1px solid #eee;
    padding:8px;
    margin-top:12px;
  }

  .roladel-desktop-main-header .dropdown-item,
  .roladel-user-header .dropdown-item{
    border-radius:8px;
    padding:.5rem .75rem;
    transition:background-color .15s ease, color .15s ease;
  }

  .roladel-desktop-main-header .dropdown-divider,
  .roladel-user-header .dropdown-divider{
    margin:.4rem 0;
  }

  /* Profile / balance dropdown toggle button - kept compact so the
     balance badge never dominates the header; avatar + username stay
     the visual lead, the badge is a small secondary detail. */
  .desktop-menu .dropdown-toggle.btn-outline-secondary{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    gap:6px;
    padding:4px 10px 4px 4px;
    border-radius:999px;
    font-size:13px;
    transition:background-color .2s ease, border-color .2s ease;
  }

  .desktop-menu .dropdown-toggle.btn-outline-secondary img{
    width:26px;
    height:26px;
    object-fit:cover;
    flex-shrink:0;
  }

  /* The balance badge: small and quiet, not a dominant pill. */
  .desktop-menu .dropdown-toggle.btn-outline-secondary .badge-success{
    font-size:10px;
    font-weight:600;
    padding:.2em .5em;
    border:none;
    border-radius:999px;
  }

  /* Desktop category navigation (the mega-menu bar under the header) */
  .main-cat-list > li > a{
    padding:0 16px;
    transition:color .2s ease;
  }

  .main-cat-list > li .menu-cont li a{
    transition:color .2s ease, background-color .2s ease;
  }

}

/* Dashboard topbar profile dropdown's balance summary (previously an
   inline <style> block duplicated inside includes/user_header.php).
   Restyled to match the compact/modern dropdown language above instead
   of the old boxy shadowed card. Unscoped: .balance-box is unique to
   this dropdown, and dark mode already overrides it at higher
   specificity (html.dark .balance-box), so this can't leak there. */
.balance-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#f8f9fa;
  border:1px solid #eee;
  border-radius:8px;
  padding:10px 12px;
  margin:4px 4px 8px;
}

.balance-box .pre-text{
  color:#888;
  font-size:12px;
}

.balance-box .username{
  font-weight:600;
  color:#222;
}

.balance-box .badge-success{
  font-size:11px;
  font-weight:600;
  padding:.3em .6em;
  border:none;
  border-radius:999px;
}

/* Topbar buttons (Contact Us / Sign In) - base colors/layout are defined
   in style.css; this just adds the same smooth-hover language used
   throughout the rest of the header. */
.left-button{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* style.css hardcodes .left-button/.currency-button text to white
   unconditionally - correct for the old always-dark topbar, wrong now
   that the topbar is light by default (see the theme-reactive rule
   above). Scoped to .topbar so it only wins where it's needed, at a
   specificity (0,2,0) still lower than html.dark .left-button /
   html.dark .currency-button (0,2,1) in dark_mode.css, so dark mode -
   already correct - is untouched. */
.topbar .left-button,
.topbar .currency-button{
  color:#222;
}