/* ==========================================================================
   APP.CSS — simple design system for the microjob / marketplace template
   Replaces style.css + color.css + custom.css.
   Keep every class name below — the PHP templates and JS (magnific popup,
   mmenu, bootstrap-select, dashboard nav) target these selectors. Only the
   look changes, not the hooks.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Brand colour comes from the CMS colour-picker loop in overall_header.tpl
     ( --theme-color-1 etc ). We read it here so admin colour settings still
     work, and expose it under friendlier names. */
  --primary: var(--theme-color-1, hsl(152 69% 31%));
  --primary-dark: hsl(152 69% 24%);
  --primary-light: hsl(152 55% 94%);

  --bg: hsl(0 0% 98%);
  --surface: hsl(0 0% 100%);
  --border: hsl(210 16% 90%);
  --text: hsl(215 25% 18%);
  --text-muted: hsl(215 12% 46%);
  --text-faint: hsl(215 10% 62%);

  --success: hsl(152 60% 36%);
  --success-bg: hsl(152 55% 94%);
  --warning: hsl(38 92% 40%);
  --warning-bg: hsl(45 100% 95%);
  --danger: hsl(4 74% 52%);
  --danger-bg: hsl(4 86% 96%);
  --info: hsl(211 86% 52%);
  --info-bg: hsl(211 100% 96%);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,24,32,.06);
  --shadow: 0 4px 16px rgba(16,24,32,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,32,.12);

  --gap: 16px;
  --header-h: 64px;
  --bottom-nav-h: 62px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 2. Reset / base ----------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  margin:0;
  font-size:15px;
  line-height:1.55;
  padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px));
}
img{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}
h1,h2,h3,h4,h5,h6{color:var(--text);font-weight:600;line-height:1.3;margin:0 0 .5em}
h1{font-size:26px}
h2{font-size:22px}
h3{font-size:18px}
h4{font-size:16px}
small,.small{font-size:13px;color:var(--text-muted)}
hr{border:none;border-top:1px solid var(--border);margin:20px 0}
::selection{background:var(--primary-light);color:var(--primary-dark)}

/* container widths only if bootstrap-grid.css isn't already loaded globally */
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 16px}
.section{padding:28px 0}
.section.gray{background:var(--bg)}
.margin-bottom-0{margin-bottom:0}
.padding-bottom-50{padding-bottom:32px}
.clearfix::after{content:"";display:table;clear:both}

/* ---------- 3. Buttons ---------------------------------------------------*/
.button,button.button,a.button,input[type=submit],input[type=button]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;
  border:1px solid var(--primary);
  padding:11px 20px;
  border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;
  cursor:pointer;line-height:1.2;
  transition:background .15s ease,border-color .15s ease,transform .05s ease;
}
.button:hover,button.button:hover,a.button:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.button:active{transform:translateY(1px)}
.button.gray{background:var(--surface);color:var(--text);border-color:var(--border)}
.button.gray:hover{background:var(--bg);color:var(--text)}
.button.dark{background:var(--text);border-color:var(--text)}
.button.full-width{display:flex;width:100%}
.button.big{padding:14px 22px;font-size:15px}
.button:disabled,.button.button-progress{opacity:.65;cursor:default}
.btn-compact{display:inline-block;background:var(--primary);color:#fff;padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600}
.btn-compact:hover{background:var(--primary-dark);color:#fff}

/* small circular icon button (post-ad plus, etc.) */
.circle-icon{
  width:38px;height:38px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- 4. Forms -------------------------------------------------------*/
.form-group{margin-bottom:16px}
label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.input-text,.with-border,input[type=text],input[type=email],input[type=password],
input[type=number],input[type=tel],input[type=phone],input[type=url],input[type=search],
input[type=date],textarea,select,.form-control{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:14px;
  color:var(--text);
  font-family:var(--font);
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{min-height:110px;resize:vertical}
.input-text:focus,.with-border:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);
}
.input-with-icon,.input-with-icon-left{position:relative;margin-bottom:14px}
.input-with-icon-left input,.input-with-icon input{padding-left:40px}
.input-with-icon-left i,.input-with-icon i{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--text-faint);font-size:15px;
}
.submit-field{margin-bottom:16px}
.submit-field h5{font-size:13px;font-weight:600;margin-bottom:6px}
::placeholder{color:var(--text-faint)}

/* checkboxes / radios (keeps structure: input + label > span.icon) */
.checkbox,.radio{position:relative;display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:6px}
.checkbox input,.radio input{position:absolute;opacity:0;width:18px;height:18px}
.checkbox label,.radio label{display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;font-weight:400}
.checkbox .checkbox-icon,.radio .radio-label{
  width:18px;height:18px;border:1.5px solid var(--border);flex:0 0 18px;
  border-radius:5px;background:var(--surface);display:inline-block;position:relative;
}
.radio .radio-label{border-radius:50%}
.checkbox input:checked + label .checkbox-icon,
.radio input:checked + label .radio-label{background:var(--primary);border-color:var(--primary)}

/* switch toggle */
.switch-button{position:relative;display:inline-block;width:40px;height:22px}
.switch-button input{opacity:0;width:0;height:0}

/* validation helpers used by micro-post / ad-post JS */
.quick-error{display:none;color:var(--danger);font-size:12px;margin-top:4px}
.status-not-available{color:var(--danger)}

/* notifications */
.notification{border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;margin-bottom:14px}
.notification.error{background:var(--danger-bg);color:var(--danger)}
.notification.success{background:var(--success-bg);color:var(--success)}
.notification .close{float:right;cursor:pointer}

/* #post_error (ad-post, micro-post, ad-edit, contact, dashboard, withdraw,
   profile-setting, microjob-detail/edit) — turned into a floating toast
   instead of an inline block, so a validation error doesn't shove the page
   layout around. Whatever markup the form JS injects here (typically a
   .notification.error div) is picked up automatically. */
#post_error:empty{display:none}
#post_error{
  position:fixed;top:80px;right:16px;z-index:9998;max-width:360px;width:calc(100% - 32px);
}
#post_error .notification{box-shadow:var(--shadow-lg);animation:toast-in .25s ease;margin-bottom:10px}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){
  #post_error{left:16px;right:16px;max-width:none;width:auto;top:auto;bottom:calc(var(--bottom-nav-h) + 16px)}
}

/* ---------- 5. Cards / boxes ----------------------------------------------*/
.dashboard-box,.card,.boxed-list-item,.job-listing,.category-box,.pricing-plan{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.dashboard-box{margin-bottom:20px}
.dashboard-box .headline{padding:16px 18px;border-bottom:1px solid var(--border)}
.dashboard-box .headline h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.dashboard-box .content{padding:18px}
.dashboard-box .content.with-padding{padding:18px}
.dashboard-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--primary-light);color:var(--primary-dark);
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;margin:4px;
}

/* ---------- 6. Header / top nav -------------------------------------------*/
#header-container{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:500}
#header{padding:0}
#header .container{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
#header .left-side{display:flex;align-items:center;gap:18px}
#logo img{max-height:34px;display:block}
#header .navigation ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center}
#header .navigation ul li a{
  display:flex;align-items:center;gap:6px;color:var(--text);font-size:14px;font-weight:500;padding:8px 10px;border-radius:var(--radius-sm);
}
#header .navigation ul li a:hover{background:var(--bg)}
.country-flag img{width:22px;height:22px;border-radius:6px;object-fit:cover}
.right-side{display:flex;align-items:center;gap:10px}
.header-widget{display:flex;align-items:center}
.header-notifications-trigger a{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);padding:8px 10px;border-radius:var(--radius-sm)}
.header-notifications-trigger a:hover{background:var(--bg)}
.header-notifications-dropdown{
  display:none;position:absolute;right:16px;top:var(--header-h);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);min-width:220px;padding:6px;z-index:600;
}
.header-notifications.user-menu:hover .header-notifications-dropdown,
.header-notifications.user-menu:focus-within .header-notifications-dropdown{display:block}
.user-menu-small-nav{list-style:none;margin:0;padding:0}
.user-menu-small-nav li a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text);font-size:14px}
.user-menu-small-nav li a:hover{background:var(--bg);color:var(--primary)}
.notify-button{background:var(--primary);border:none;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.notify-button .bell-icon{width:18px;height:18px}
.mmenu-trigger .hamburger,.dashboard-responsive-nav-trigger .hamburger{width:22px;height:16px;position:relative;display:block}
.hamburger-box,.hamburger-inner{display:block}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{
  background:var(--text);height:2px;border-radius:2px;
}

/* user status / verify email bar */
.user-status-message{background:var(--warning-bg);color:#7a4b00;padding:10px 0;font-size:13px}
.user-status-message .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* scrolling marquee notice */
.wrap{background:var(--primary-light);color:var(--primary-dark);font-size:13px;padding:6px 0}

/* ---------- 7. Sticky bottom nav (mobile) ---------------------------------*/
.mobile-bottom-menu-wrapper{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 16px rgba(16,24,32,.06);
  z-index:900;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.mobile-bottom-menu{display:flex;justify-content:space-around;align-items:flex-end;margin:0;padding:8px 4px;list-style:none}
.mobile-bottom-menu li{flex:1;text-align:center}
.mobile-bottom-menu li a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--text-muted);font-size:11px;font-weight:500;padding:4px;
}
.mobile-bottom-menu li a i{font-size:18px}
.mobile-bottom-menu li a:hover,.mobile-bottom-menu li a.active{color:var(--primary)}
.mobile-bottom-menu li a .circle-icon{
  width:42px;height:42px;margin-top:-24px;border:4px solid var(--surface);box-shadow:var(--shadow);
}
.mobile-bottom-menu li a .circle-icon i{font-size:16px}

/* floating support button — kept small & out of the way */
.float{
  position:fixed;right:16px;bottom:calc(var(--bottom-nav-h) + 16px);
  width:44px;height:44px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;z-index:800;
}
.float .support-icon{width:22px;height:22px;border-radius:0}

/* ---------- 8. Dashboard layout & sidebar nav ------------------------------*/
.dashboard-sidebar{margin-bottom:20px}
.dashboard-sidebar-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.dashboard-nav-container{padding:6px}
.dashboard-responsive-nav-trigger{
  display:none;align-items:center;gap:10px;padding:12px 14px;font-weight:600;font-size:14px;color:var(--text);cursor:pointer;
}
.dashboard-nav ul{list-style:none;margin:0 0 6px;padding:0}
.dashboard-nav ul[data-submenu-title]{margin-bottom:14px}
.dashboard-nav ul[data-submenu-title]::before{
  content:attr(data-submenu-title);
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);font-weight:700;padding:10px 12px 6px;
}
.dashboard-nav ul li a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);
  color:var(--text);font-size:14px;font-weight:500;
}
.dashboard-nav ul li a:hover{background:var(--bg)}
.dashboard-nav ul li.active a,.dashboard-nav ul li.active-submenu a{background:var(--primary-light);color:var(--primary-dark)}
.dashboard-nav ul li a i{width:18px;text-align:center;color:var(--text-faint)}
.dashboard-nav ul li.active a i,.dashboard-nav ul li.active-submenu a i{color:var(--primary-dark)}
.nav-tag{
  margin-left:auto;background:var(--bg);color:var(--text-muted);
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;
}
.dashboard-nav ul li.active a .nav-tag{background:var(--surface);color:var(--primary-dark)}

/* profile summary card */
.dashboard-profile-card{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;margin-bottom:20px;
}
.dashboard-profile-card .user-id{display:flex;gap:14px;align-items:center;min-width:0}
.dashboard-profile-card .user-img{
  width:60px;height:60px;border-radius:var(--radius);overflow:hidden;flex:0 0 60px;
  background:var(--bg);
}
.dashboard-profile-card .user-img img{width:100%;height:100%;object-fit:cover}
.dashboard-profile-card h2{font-size:17px;margin:0}
.dashboard-profile-card .meta{font-size:13px;color:var(--text-muted);margin-top:2px}
.balance-row{display:flex;gap:10px;flex-wrap:wrap}
.balance-chip{
  background:var(--bg);border-radius:var(--radius-sm);padding:10px 16px;text-align:center;min-width:120px;
}
.balance-chip .label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.balance-chip .value{font-size:17px;font-weight:700;color:var(--success);margin-top:2px}

/* quick action grid */
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.quick-actions a{
  flex:1 1 140px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 10px;color:var(--text);font-size:13px;font-weight:600;text-align:center;
}
.quick-actions a i{font-size:18px;color:var(--primary)}
.quick-actions a:hover{border-color:var(--primary);color:var(--primary)}

/* alert banners (pending / not-complete tasks) */
.dash-alert{
  background:var(--warning-bg);color:#7a4b00;border:1px solid #ffe8b5;
  border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;margin-bottom:14px;
}
.dash-alert a{font-weight:700;color:#7a4b00}
.dash-alert .count{background:#fff3d7;padding:2px 8px;border-radius:6px}

/* ---------- 9. Tables -------------------------------------------------------*/
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-notice{
  display:none;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);
  background:var(--bg);border-radius:var(--radius-sm);padding:8px 12px;margin-top:8px;
}
table.table,.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.table thead th{background:var(--bg);color:var(--text-muted);font-weight:600;font-size:12px}
.table tbody tr:hover{background:var(--bg)}
.badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:700;border-radius:6px;color:#fff}
.badge.blue{background:var(--info)}
.badge.green{background:var(--success)}
.badge.gray{background:var(--text-faint)}
.badge.yellow{background:var(--warning)}
.badge.red{background:var(--danger)}
.text-success{color:var(--success) !important}
.text-danger{color:var(--danger) !important}

/* ---------- 10. Popups / modals (magnific-popup skin) ----------------------*/
.zoom-anim-dialog,.popup-dialog{
  background:var(--surface);border-radius:var(--radius-lg);
  padding:28px;max-width:420px;margin:40px auto;box-shadow:var(--shadow-lg);
}
.popup-dialog.big-dialog{max-width:640px}
.popup-tabs-nav{list-style:none;display:flex;gap:16px;padding:0;margin:0 0 18px;border-bottom:1px solid var(--border)}
.popup-tabs-nav li a{display:inline-flex;align-items:center;gap:6px;padding:0 0 12px;font-weight:700;color:var(--text);border-bottom:2px solid transparent}
.popup-tabs-nav li:first-child a{color:var(--primary);border-color:var(--primary)}
.welcome-text{margin-bottom:16px}
.welcome-text h3{margin-bottom:4px}
.welcome-text span{font-size:13px;color:var(--text-muted)}
.social-login-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.facebook-login,.google-login{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;font-size:14px;font-weight:600;background:var(--surface);cursor:pointer;
}
.social-login-separator{text-align:center;color:var(--text-faint);font-size:12px;margin:8px 0;position:relative}
.mfp-bg{background:rgba(15,23,28,.55)}

/* ---------- 11. Footer ------------------------------------------------------*/
#footer{background:var(--surface);border-top:1px solid var(--border);margin-top:40px;font-size:13px}
.footer-middle-section{padding:32px 0}
.footer-links h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:12px}
.footer-links ul{list-style:none;margin:0;padding:0}
.footer-links ul li{margin-bottom:8px}
.footer-links ul li a{color:var(--text-muted)}
.footer-links ul li a:hover{color:var(--primary)}
.footer-bottom-section{border-top:1px solid var(--border);padding:16px 0;color:var(--text-muted)}
.footer-bottom-section .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-social-links{list-style:none;display:flex;gap:10px;margin:0;padding:0}
.footer-social-links a{
  width:32px;height:32px;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.footer-social-links a:hover{background:var(--primary);color:#fff}

/* ---------- 12. Titlebar / breadcrumbs -------------------------------------*/
#titlebar{background:var(--surface);border-bottom:1px solid var(--border);padding:20px 0}
#breadcrumbs ul{list-style:none;display:flex;gap:6px;margin:6px 0 0;padding:0;font-size:13px;color:var(--text-muted)}
#breadcrumbs ul li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--text-faint)}
#breadcrumbs ul li a{color:var(--text-muted)}

/* ---------- 13. Pagination --------------------------------------------------*/
.pagination ul{list-style:none;display:flex;gap:6px;padding:0;margin:20px 0 0}
.pagination ul li a{
  display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;
  border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:600;
}
.pagination ul li a.current-page{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---------- 14. Cookie consent ----------------------------------------------*/
.cookieConsentContainer{
  position:fixed;left:16px;right:16px;bottom:calc(var(--bottom-nav-h) + 16px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:16px;z-index:950;max-width:420px;
}
.cookieTitle h3{font-size:15px;margin-bottom:4px}
.cookieDesc p{font-size:13px;color:var(--text-muted);margin:0 0 10px}

/* ---------- 14b. Post-ad package picker (postModal) --------------------------*/
.compact-advert-wrapper{display:flex;gap:12px;flex-wrap:wrap}
.compact-advert-card{
  flex:1 1 200px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;text-align:center;
}
.compact-advert-card .icon{font-size:28px;margin-bottom:6px}
.compact-advert-card .icon-socials{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.compact-advert-card .icon-socials img{width:20px;height:20px}
.compact-advert-card h4{font-size:14px;margin:6px 0}
.compact-advert-card p{font-size:12px;color:var(--text-muted);margin:0 0 10px}

.install-pwa-btn{
  position:fixed;right:16px;bottom:calc(var(--bottom-nav-h) + 70px);z-index:900;
  background:var(--primary);color:#fff;border:none;padding:11px 16px;
  border-radius:999px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);cursor:pointer;
}

/* ---------- 14c. Auth pages (login / signup) ---------------------------------*/
.login-register-page{
  max-width:440px;margin:48px auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-sm);
}
.margin-0-auto{float:none;margin-left:auto;margin-right:auto}
.forgot-password{font-size:13px;color:var(--text-muted)}
.margin-top-70{height:1px}
@media (max-width:560px){.login-register-page{padding:22px;margin:24px auto}}
[id$="-availability-status"]{display:block;font-size:12px;color:var(--danger);margin-top:4px}
.has-error input,input.has-error{border-color:var(--danger) !important;box-shadow:0 0 0 3px var(--danger-bg) !important}
.has-success input,input.has-success{border-color:var(--success) !important}

/* ---------- 15. Utility ------------------------------------------------------*/
.text-right{text-align:right}
.text-center{text-align:center}
.full-width{width:100%}
.hidden{display:none !important}

/* ==========================================================================
   17. PLUGIN MECHANICS — Magnific Popup + mmenu base CSS.
   This is NOT theme skin — it's the required positioning/visibility CSS
   these two JS libraries depend on to function at all. It was bundled
   inside the old style.css and got lost when that file was removed.
   Ported from the original build (both are open-source MIT-licensed
   libraries), kept structurally as-is since these are mechanics, not
   decoration. Do not delete .mfp-hide or the .mm-* rules below — every
   popup/modal on the site (#postModal, #exchangeModal, #airtimeModal,
   #verify-mobile-dialog, #sign-in-dialog, #citiesModal, login/signup
   dialogs) and the mobile off-canvas menu depend on them.
   ========================================================================== */

/* --- Magnific Popup (modals / #postModal / dashboard modals) ---------------*/
.mfp-hide{display:none!important}
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:100000;overflow:hidden;position:fixed;background:#111;opacity:.001;transition:opacity .3s ease-out}
.mfp-bg.mfp-ready{opacity:.85}
.mfp-bg.mfp-removing{opacity:0}
.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:100000;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}
.mfp-container{height:100%;text-align:center;position:absolute;width:100%;left:0;top:0;padding:0 18px;box-sizing:border-box}
.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}
.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:505;opacity:0;transition:all .2s ease-out}
.mfp-ready .mfp-content{opacity:1}
.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}
.mfp-auto-cursor .mfp-content{cursor:auto}
.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{user-select:none}
button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;border:0;appearance:none;display:block;padding:0;z-index:506;background:0 0}
button.mfp-close{
  position:absolute;width:40px;height:40px;top:14px;right:14px;z-index:9999;
  color:var(--text-muted);border-radius:50%;background:var(--bg);font-size:0;
}
button.mfp-close::before{content:"\2715";font-size:16px;line-height:40px}
button.mfp-close:hover{background:var(--border);color:var(--text)}
.small-dialog-content input[type=submit]{width:100%;margin-top:26px;margin-bottom:10px}
body.mfp-zoom-out-cur,body.compensate-for-scrollbar{overflow:hidden}
.my-mfp-zoom-in .zoom-anim-dialog{opacity:0;transition:all .2s ease-in-out;transform:scale(.8)}
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog{opacity:1;transform:scale(1)}
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog{transform:scale(.8);opacity:0}

/* --- mmenu (off-canvas mobile menu, #header .mmenu-init) -------------------*/
.mm-hidden{display:none!important}
.mm-wrapper{overflow-x:hidden;position:relative}
.mm-menu{box-sizing:border-box;background:inherit;display:block;padding:0;margin:0;position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}
.mm-panels,.mm-panels>.mm-panel{background:inherit;border-color:inherit;box-sizing:border-box;margin:0;position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}
.mm-panels{overflow:hidden}
.mm-panel{transform:translate3d(100%,0,0);transition:transform .4s ease;transform-origin:top left}
.mm-panel.mm-opened{transform:translate3d(0,0,0)}
.mm-panel.mm-subopened{transform:translate3d(-30%,0,0)}
.mm-panel.mm-highest{z-index:1}
.mm-panel.mm-noanimation{transition:none!important}
.mm-panels>.mm-panel{-webkit-overflow-scrolling:touch;overflow:scroll;overflow-x:hidden;overflow-y:auto;padding:0 20px}
.mm-panels>.mm-panel:not(.mm-hidden){display:block}
.mm-listview,.mm-listview>li{list-style:none;display:block;padding:0;margin:0}
.mm-listview{font-size:14px;line-height:20px}
.mm-listview>li{position:relative;border-bottom:1px solid rgba(255,255,255,.08)}
.mm-listview>li>a,.mm-listview>li>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:inherit;display:block;padding:14px 20px;margin:0}
.mm-menu{background:#20242b;color:#fff}
.mm-menu .mm-listview>li:hover{background:rgba(255,255,255,.05)}
html.mm-opened{overflow-x:hidden;position:relative}
html.mm-blocking,html.mm-blocking body{overflow:hidden}
#mm-blocker{background:rgba(0,0,0,.5);display:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:899}
html.mm-blocking #mm-blocker{display:block}
.mm-menu.mm-offcanvas,.mmenu-init{z-index:901;display:none;position:fixed;top:0;bottom:0}
.mm-menu.mm-offcanvas.mm-opened{display:block}
.mm-menu.mm-offcanvas{width:80%;min-width:200px;max-width:360px}
html.mm-opening .mm-menu.mm-opened ~ .mm-slideout{transform:translate3d(80%,0,0)}
@media all and (min-width:450px){
  html.mm-opening .mm-menu.mm-opened ~ .mm-slideout{transform:translate3d(360px,0,0)}
}

/* --- mobile menu trigger (hamburger button) --------------------------------*/
.mmenu-trigger{
  display:none;height:40px;width:40px;position:relative;border-radius:var(--radius-sm);
  cursor:pointer;border:1px solid var(--border);align-items:center;justify-content:center;
}
.hamburger{padding:0;display:inline-block;cursor:pointer;background:0 0;border:0;margin:0;overflow:visible}
.hamburger-box{position:relative;width:20px;height:16px;display:block}
.hamburger-inner{display:block;top:50%;margin-top:-1px;position:absolute;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .15s ease}
.hamburger-inner::before,.hamburger-inner::after{content:"";display:block;position:absolute;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .15s ease,top .15s ease,opacity .1s ease}
.hamburger-inner::before{top:-6px}
.hamburger-inner::after{top:6px}
.hamburger--collapse.is-active .hamburger-inner{transform:rotate(-45deg)}
.hamburger--collapse.is-active .hamburger-inner::before{top:0;opacity:0}
.hamburger--collapse.is-active .hamburger-inner::after{top:0;transform:rotate(-90deg)}
@media(max-width:991px){
  .mmenu-trigger{display:inline-flex}
}

/* ==========================================================================
   18. SITE-WIDE COMPONENTS — covers listings, hero search, pricing, blog,
   testimonials, sidebar widgets, payment tabs, tables, uploads. These are
   reused across most of the other .tpl files, so adding them here means
   those pages inherit the simple look without needing their own edits.
   ========================================================================== */

/* --- spacing utilities (generated) -------------------------------------- */
.margin-top-0{margin-top:0}.margin-top-5{margin-top:5px}.margin-top-10{margin-top:10px}
.margin-top-12{margin-top:12px}.margin-top-15{margin-top:15px}.margin-top-20{margin-top:20px}
.margin-top-25{margin-top:25px}.margin-top-30{margin-top:30px}.margin-top-35{margin-top:20px}
.margin-top-45{margin-top:24px}.margin-top-50{margin-top:26px}.margin-top-60{margin-top:28px}
.margin-top-65{margin-top:30px}.margin-top-70{margin-top:32px}.margin-top-80{margin-top:36px}
.margin-bottom-5{margin-bottom:5px}.margin-bottom-10{margin-bottom:10px}.margin-bottom-15{margin-bottom:15px}
.margin-bottom-20{margin-bottom:20px}.margin-bottom-25{margin-bottom:25px}.margin-bottom-30{margin-bottom:24px}
.margin-bottom-35{margin-bottom:20px}.margin-bottom-50{margin-bottom:24px}.margin-bottom-60{margin-bottom:26px}
.margin-bottom-70{margin-bottom:28px}.margin-bottom-75{margin-bottom:30px}.margin-bottom-80{margin-bottom:32px}
.margin-zero,.no-mar{margin:0 !important}
.padding-top-0{padding-top:0}.padding-top-55{padding-top:28px}.padding-top-60{padding-top:30px}.padding-top-65{padding-top:32px}
.padding-bottom-0{padding-bottom:0}.padding-bottom-10{padding-bottom:10px}.padding-bottom-65{padding-bottom:32px}
.padding-bottom-75{padding-bottom:36px}.padding-0{padding:0}
.mt-6,.mt-10{margin-top:10px}.mb-5{margin-bottom:5px}.mb-6{margin-bottom:10px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb0{margin-bottom:0}
.mr-1{margin-right:6px}.pull-right{float:right}.pull-left{float:left}
.text-white{color:#fff}.text-success{color:var(--success)!important}.text-danger{color:var(--danger)!important}
/* .hidden-xs / .hidden-sm intentionally do nothing: these Bootstrap-3-era
   classes are left over on ~10 templates (status badges, proof buttons on
   the my-ads/my-jobs tables) wrapping content that must stay visible on
   mobile. They were never actually defined in the original stylesheet
   either, so this matches how the site always behaved. Don't add a
   display:none rule for them. */
.hide-under-768px{}
@media(max-width:767px){.hide-under-768px{display:none!important}}

/* --- section / headline -------------------------------------------------- */
.section-headline{margin-bottom:24px}
.section-headline.centered{text-align:center}
.section-headline h3{font-size:20px;margin-bottom:0}
.headline-link{font-size:13px;font-weight:600;color:var(--primary)}
.page-title{font-size:22px;margin-bottom:4px}
.single-page-section{padding:24px 0}
.white-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.breadcrumb{list-style:none;display:flex;gap:6px;padding:0;margin:0;font-size:13px;color:var(--text-muted)}

/* --- hero / search bar (index.tpl) --------------------------------------- */
.intro-banner{
  background:linear-gradient(180deg,rgba(15,23,28,.55),rgba(15,23,28,.55)),var(--primary) center/cover no-repeat;
  padding:56px 0 70px;color:#fff;text-align:center;
}
.banner-headline h3{color:#fff;font-size:26px;margin-bottom:6px}
.banner-headline h3 span{display:block;font-size:15px;font-weight:400;opacity:.9;margin-top:6px}
.intro-banner-search-form{
  background:var(--surface);border-radius:var(--radius);padding:8px;
  display:flex;flex-wrap:wrap;gap:8px;box-shadow:var(--shadow-lg);max-width:760px;margin:0 auto;
}
.intro-search-field{flex:1 1 200px;position:relative}
.intro-search-field input{border:none;background:transparent;padding:12px 14px}
.intro-search-field input:focus{box-shadow:none}
.intro-search-field.with-autocomplete .input-with-icon{position:relative}
.intro-search-field .input-with-icon i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint)}
.intro-search-field .input-with-icon input{padding-left:36px}
.intro-search-button{flex:0 0 auto}
.intro-search-button .button{height:100%;padding:12px 24px}
#qucikad-ajaxsearch-dropdown{
  position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:50;max-height:280px;overflow:auto;text-align:left;
}
#qucikad-ajaxsearch-dropdown ul{list-style:none;margin:0;padding:6px}
.qucikad-ajaxsearch-li-cats{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text);cursor:pointer}
.qucikad-ajaxsearch-li-cats:hover{background:var(--bg)}

/* --- how-it-works steps (index.tpl) -------------------------------------- */
.how-it-works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 22px;text-align:center;
}
.step-number{
  position:absolute;top:14px;right:16px;font-size:34px;font-weight:800;
  color:var(--primary-light);line-height:1;
}
.step-icon{
  width:52px;height:52px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 14px;
}
.step-card h4{font-size:16px;margin-bottom:6px}
.step-card p{font-size:13px;color:var(--text-muted);margin:0}
@media(max-width:767px){.how-it-works-grid{grid-template-columns:1fr}}

/* --- feature grid (index.tpl "why choose us") ----------------------------- */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{text-align:center;padding:10px}
.feature-icon{
  width:48px;height:48px;border-radius:var(--radius-sm);background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 12px;
}
.feature-card h4{font-size:15px;margin-bottom:6px}
.feature-card p{font-size:13px;color:var(--text-muted);margin:0}
@media(max-width:991px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features-grid{grid-template-columns:1fr}}

/* --- closing call-to-action banner (index.tpl) ----------------------------- */
.cta-banner{background:var(--primary);color:#fff;padding:48px 0;margin-top:20px}
.cta-banner h3{color:#fff;font-size:22px;margin-bottom:6px}
.cta-banner p{color:rgba(255,255,255,.85);margin-bottom:20px}
.cta-banner-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-banner-actions .button.gray{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.cta-banner-actions .button.gray:hover{background:rgba(255,255,255,.12);color:#fff}
.cta-banner-actions .button:not(.gray){background:#fff;color:var(--primary-dark);border-color:#fff}
.cta-banner-actions .button:not(.gray):hover{background:rgba(255,255,255,.9)}

/* --- categories grid ------------------------------------------------------ */
.categories-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.category-box{
  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;position:relative;color:var(--text);
}
.category-box:hover{border-color:var(--primary)}
.category-icon{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--primary-light);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 44px;overflow:hidden}
.category-icon img{width:100%;height:100%;object-fit:cover}
.category-box-content h3{font-size:14px;margin:0}
.category-box-content h3 small{color:var(--text-muted);font-weight:400}
.category-box-counter{display:none}
.category-box-arrow{margin-left:auto;color:var(--text-faint)}

/* --- ad / job listing cards ----------------------------------------------- */
.listings-container{display:grid;gap:16px}
.listings-container.grid-layout{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.listings-container.grid-layout-3{grid-template-columns:repeat(3,1fr)}
.listings-container.compact-layout{grid-template-columns:1fr}
@media(max-width:767px){.listings-container.grid-layout,.listings-container.grid-layout-3{grid-template-columns:1fr}}

.feat_property,.job-listing{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.feat_property.highlight,.job-listing.highlight{border-color:var(--primary)}
.feat_property .thumb{position:relative;aspect-ratio:16/10;background:var(--bg)}
.feat_property .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.feat_property .thmb_cntnt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:10px}
.feat_property .tag{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.feat_property .tag li a{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--surface);color:var(--text)}
.feat_property .tag .featured a{background:var(--info);color:#fff}
.feat_property .tag .urgent a{background:var(--danger);color:#fff}
.feat_property .fp_price{align-self:flex-end;background:var(--surface);color:var(--primary-dark);font-weight:700;font-size:13px;padding:5px 10px;border-radius:6px}
.feat_property .details{padding:14px}
.feat_property h4{font-size:15px;margin-bottom:4px}
.feat_property .text-thm{font-size:12px;color:var(--primary);margin-bottom:4px}
.prop_details{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:8px 0 0;font-size:12px;color:var(--text-muted)}
.listing-footer,.job-listing-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text-muted);padding-top:10px;margin-top:10px;border-top:1px solid var(--border)}
.author-link{color:var(--text-muted)}

.job-listing{display:flex;gap:14px;padding:14px}
.job-listing-company-logo{flex:0 0 72px;width:72px;height:72px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg)}
.job-listing-company-logo img{width:100%;height:100%;object-fit:cover}
.job-listing-description{flex:1;min-width:0}
.job-listing-title{font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.job-listing-text{font-size:13px;color:var(--text-muted)}
.job-type{font-size:12px;color:var(--primary)}
.job-tags{list-style:none;display:flex;gap:6px;padding:0;margin:6px 0}
.job-property{font-size:12px;color:var(--text-muted)}
.table-property-price{font-weight:700;color:var(--success)}
.company-logo-myads{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover}

/* --- market card (ad-listing.tpl) ------------------------------------------ */
.market-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;color:var(--text);
}
.market-card:hover{border-color:var(--primary);color:var(--text)}
.market-card.highlight{border-color:var(--primary);box-shadow:var(--shadow)}
.market-image-wrap{position:relative;aspect-ratio:4/3;background:var(--bg)}
.market-image-wrap .listing-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.market-badges{position:absolute;top:8px;left:8px;display:flex;gap:6px}
.market-badges .badge{font-size:10px;padding:3px 8px}
.market-details{padding:12px 14px}
.market-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.market-location{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.market-price{font-size:15px;font-weight:700;color:var(--success)}

/* --- pricing plans --------------------------------------------------------- */
.billing-cycle-radios{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.pricing-plans-container .row{align-items:stretch}
.pricing-plan{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 18px;text-align:center;position:relative;height:100%;
  display:flex;flex-direction:column;transition:border-color .15s ease,box-shadow .15s ease;
}
.pricing-plan:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.pricing-plan.recommended{border-color:var(--primary);box-shadow:var(--shadow)}
.pricing-plan h3{font-size:15px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}
.recommended-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;
}
.pricing-plan-label{font-size:22px;font-weight:700;color:var(--text);margin:6px 0 4px}
.pricing-plan .button{margin-top:auto}
.pricing-plan-features{text-align:left;font-size:13px;color:var(--text-muted);margin-top:12px}
.pricing-plan-features ul{list-style:none;padding:0;margin:10px 0 0}
.pricing-plan-features ul li{padding:6px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.icon-text.yes{color:var(--success)}
.icon-text.no{color:var(--danger)}

/* billing-cycle toggle: only the label matching the selected cycle shows */
.pricing-plans-container .billed-monthly-label,
.pricing-plans-container .billed-yearly-label,
.pricing-plans-container .billed-lifetime-label{display:none}
.pricing-plans-container.billing-monthly .billed-monthly-label,
.pricing-plans-container.billing-yearly .billed-yearly-label,
.pricing-plans-container.billing-lifetime .billed-lifetime-label{display:block}

/* collapsed feature list with "View more" toggle */
.feature-list-collapsed li{display:none}
.feature-list-collapsed li:nth-child(-n+4){display:block}
.feature-list-collapsed.expanded li{display:block}
.view-more-features{
  display:flex;align-items:center;gap:6px;margin-top:6px;padding:0;
  background:none;border:none;color:var(--primary);font-size:12.5px;font-weight:700;cursor:pointer;
}
.view-more-features:hover{color:var(--primary-dark)}

/* --- featured/urgent/highlight add-on row (ad-post/micro-post/ad-edit) -----*/
.premium-plans{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}
.premium-plans:last-child{border-bottom:none}
.premium-plans-text{font-size:13px;color:var(--text-muted);flex:1 1 220px}
.premium-plans-price{font-size:13px;font-weight:700;color:var(--primary-dark);flex:0 0 auto;margin-left:auto}

/* --- testimonials ------------------------------------------------------------*/
.single-testimonial{padding:10px}
.single-inner{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center}
.testimonial-content{font-size:14px;color:var(--text-muted);font-style:italic}
.author-info .image img{width:52px;height:52px;border-radius:50%;object-fit:cover;margin:14px auto 8px}
.author-info .name{margin:0;font-size:14px}
.author-info .designation{font-size:12px;color:var(--text-faint)}

/* --- blog cards & widgets ---------------------------------------------------*/
.blog-listing .job-listing-description{padding:14px}
.blog-cat{font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;margin-bottom:6px}
.author-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;vertical-align:middle}
.sidebar-widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.widget-title{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:12px}
.blog-widget ul{list-style:none;padding:0;margin:0}
.blog-widget ul li{padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}

/* --- tabs (payment method tabs, popup tabs) ---------------------------------*/
.nav-buttons-scroll{overflow-x:auto;padding:10px 0}
.nav-buttons-scroll::-webkit-scrollbar{height:5px}
.nav-buttons-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
.nav-buttons{list-style:none;display:flex;gap:8px;flex-wrap:nowrap;padding:0;margin:0 0 16px}
.payment-tab-trigger,.nav-button{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;color:var(--text);background:var(--surface);cursor:pointer;white-space:nowrap;
}
.payment-tab-trigger.payment-tab-active,.nav-button.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}
.payment-logo{height:20px;width:auto}
/* The premium/plan toggle (ad-post.tpl, micro-post.tpl, reseller.tpl) puts
   the active class on the *wrapper* (.payment-tab.payment-tab-active), not
   on .payment-tab-content itself — the content only shows when its parent
   carries that class. */
.payment-tab{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.payment-tab-trigger{padding:14px 16px;cursor:pointer}
.payment-tab-trigger label{margin:0;cursor:pointer;display:flex;align-items:center;font-weight:600}
.payment-tab-content{display:none;padding:0 16px 16px}
.payment-tab.payment-tab-active{border-color:var(--primary)}
.payment-tab.payment-tab-active .payment-tab-content{display:block}
.tab-pane,.tab-content .pane{display:none}
.tab-pane.active,.tab-content .pane.active{display:block}
.PaymentMethod-heading{font-weight:700;margin-bottom:6px}
.PaymentMethod-info{font-size:12px;color:var(--text-muted)}
.payment-form-row{margin-bottom:14px}
.payment-errors{color:var(--danger);font-size:12px;margin-top:6px}
.total-costs{font-weight:700;font-size:16px;color:var(--text)}

/* --- status tables (my-ads / my-jobs / applicant lists) stack on mobile -----*/
/* Shared by ad-my, ad-expire, ad-hidden, ad-pending-approval, ad-resubmission,
   microjob-my, microjob-applicant, microjob-pending-approval, microjob-stop,
   membership_current — all use <table class="dashboard-box-list">. A wide
   3-column table with a huge first column scrolls badly on mobile, so below
   767px it reflows into stacked cards instead of a horizontal-scroll table. */
@media(max-width:767px){
  .dashboard-box-list,.dashboard-box-list tbody,.dashboard-box-list tr,
  .dashboard-box-list td,.dashboard-box-list th{display:block;width:100%}
  .dashboard-box-list{border:none}
  .dashboard-box-list tr{
    margin-bottom:14px;border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow-sm);
  }
  .dashboard-box-list tr:first-child{
    display:flex;justify-content:space-between;margin-bottom:8px;border:none;box-shadow:none;
    padding:0 2px;font-size:11px;text-transform:uppercase;color:var(--text-faint);
  }
  .dashboard-box-list tr:first-child th{width:auto;flex:1;padding:0}
  .dashboard-box-list td,.dashboard-box-list th{border:none;border-bottom:1px solid var(--border);padding:10px 12px;white-space:normal}
  .dashboard-box-list td:last-child{border-bottom:none}
}

/* --- DataTables skin (transaction.tpl, and anywhere #datatable/.DataTable is used) */
/* jquery.dataTables.min.css / responsive.dataTables.min.css (still linked,
   untouched) provide the plugin's structural CSS; this re-skins the classes
   it generates at runtime (search box, length menu, pagination, info text)
   to match the rest of the site instead of DataTables' default look. */
.dataTables_wrapper{font-size:13px;color:var(--text)}
.dataTables_wrapper .dataTables_filter{margin-bottom:14px;text-align:right}
.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;
  font-size:13px;margin-left:8px;background:var(--surface);color:var(--text);
}
.dataTables_wrapper .dataTables_filter input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;margin:0 6px;background:var(--surface);
}
.dataTables_wrapper .dataTables_info{color:var(--text-muted);padding-top:12px}
.dataTables_wrapper .dataTables_paginate{padding-top:12px}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;
  padding:0 8px;margin-left:4px;border-radius:var(--radius-sm);border:1px solid var(--border)!important;
  color:var(--text)!important;background:var(--surface)!important;cursor:pointer;font-size:13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{opacity:.4;cursor:default}
table.dataTable{width:100%!important;border-collapse:collapse;font-size:13px}
table.dataTable thead th{
  background:var(--bg);color:var(--text-muted);font-weight:600;font-size:12px;
  padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;
}
table.dataTable tbody td{padding:10px 12px;border-bottom:1px solid var(--border)}
table.dataTable tbody tr:hover{background:var(--bg)}
table.dataTable td.control::before{
  background:var(--primary)!important;box-shadow:none!important;font-size:11px;line-height:16px!important;
}
@media(max-width:560px){.dataTables_wrapper .dataTables_filter{text-align:left}}

/* --- basic table / misc data tables -----------------------------------------*/
.basic-table{width:100%;border-collapse:collapse;font-size:13px}
.basic-table th,.basic-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.basic-table thead th{background:var(--bg);color:var(--text-muted);font-weight:600;font-size:12px}
.table-alt-row:nth-child(even){background:var(--bg)}

/* --- buttons / dropdowns / selects ------------------------------------------*/
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-block{display:flex;width:100%;justify-content:center}
.btn-flat{border:none;background:transparent}
.btn-icon{padding:8px;width:36px;height:36px;justify-content:center}
.dropdown{position:relative;display:inline-block}
.dropdown-toggle{display:inline-flex;align-items:center;gap:6px}
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:180px;padding:6px;z-index:60;list-style:none;margin:4px 0 0;
}
.dropdown.open .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu li a{display:block;padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--text)}
.dropdown-menu li a:hover{background:var(--bg)}
select.selectpicker,.bootstrap-select .dropdown-toggle{width:100%}

/* --- file upload -------------------------------------------------------------*/
.BrowseButton{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.BrowseButton-button{background:var(--bg);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer}
.BrowseButton-file-name{font-size:12px;color:var(--text-muted)}
.uploadFile{border:1px dashed var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center;font-size:13px;color:var(--text-muted)}

/* --- category picker modal (ad-post.tpl / ad-edit.tpl / micro-post.tpl) -----*/
/* This modal has its own dedicated stylesheet (category-modal.css, still
   linked in the page, untouched) which expects to control its own width
   (870px) and padding. My generic .popup-dialog rules (max-width:640px,
   padding:28px) were fighting it — squeezing its 5-column category grid
   into a narrower box with doubled-up padding. Give this one modal room. */
#categoryModal.popup-dialog{max-width:900px;padding:0;width:92vw}
#categoryModal .tg-thememodaldialog{max-width:100%}
@media(max-width:767px){#categoryModal.popup-dialog{width:96vw}}

/* Minimal Owl Carousel fallback: the category slider's own JS
   (owl.carousel-category.min.js) is loaded but its matching base CSS
   never was, in the original build either. This keeps the category grid
   from collapsing if the carousel JS doesn't fully take over. */
.owl-carousel{display:block;position:relative;width:100%}
.owl-carousel .owl-stage{display:flex;flex-wrap:wrap;position:relative}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden}
.owl-carousel .owl-item{flex:0 0 auto}

/* --- external link box (microjob-detail.tpl) ---------------------------------*/
.link-container{display:flex;align-items:center;gap:10px}
.link-input{flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--text);background:var(--bg)}
.link-button{display:flex;align-items:center;gap:6px;padding:9px 16px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;text-transform:uppercase}
.link-button:hover{background:var(--primary-dark)}

/* --- fullscreen proof-image modal (microjob-applicant.tpl, microjob-done.tpl) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-content{max-width:80%;max-height:80%;border:4px solid #fff;background:#222;padding:14px;border-radius:var(--radius);position:relative;z-index:1001}
.modal-body{max-width:90vw;text-align:center;color:#fff;font-weight:600;font-size:16px}
.modal .close{position:absolute;top:10px;right:16px;font-size:30px;color:#fff;cursor:pointer;z-index:1002}
body.modal-open{overflow:hidden}

/* --- secondary "similar ads" listing card (microjob-all.tpl, microjob-detail.tpl) */
.job-ad-item{margin:10px 0;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.job-ad-item.row_even,.job-ad-item.row_featured{background:var(--bg)}
.item-info{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.item-image-box{flex:0 0 15%}
.item-image-box2{flex:0 0 20%}
.item-image-box img,.item-image-box2 img{width:100%;border-radius:var(--radius-sm)}
.ad-info{flex:1;margin-left:10px}
.ad-info span{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;color:var(--text-muted)}
.ad-info span .featured{width:10px;height:10px;background:var(--warning);border-radius:50%;display:inline-block}
.ad-info .title{font-size:15px;font-weight:700;color:var(--text)}
.ad-meta{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 0;padding:0;font-size:12px;color:var(--text-muted)}
.ad-button{margin-top:10px;text-align:center}
.progress{margin:5px 0;height:10px;background:var(--bg);border-radius:6px;overflow:hidden}
.progress-bar{height:100%;background:var(--primary)}

/* --- consolidated filters panel (microjob-all.tpl, ad-listing.tpl) ----------*/
/* Category, keyword, sort, price and custom-field filters all live in one
   .filters-panel now instead of being split across a top search bar and a
   separate sidebar. On desktop it's always visible as a compact bar; on
   mobile it's collapsed behind the "Filters" toggle button. */
.filter-toggle-btn{display:none;margin-bottom:12px}
.filters-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-top:16px;
}
.filters-panel-header{display:none}
.filters-panel-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:12px}
.filters-panel-row:last-of-type{margin-bottom:0}
.filters-panel-row > .dropdown.category-dropdown{flex:1 1 200px}
.filters-panel-row > #keywords{flex:2 1 240px}
.filters-panel-row > select#sort-filter{flex:1 1 200px}
.filters-panel-row > button.button{flex:0 0 auto}
.filters-panel .sidebar-widget{flex:1 1 220px;background:transparent;border:none;padding:0;margin:0}
.filters-panel .sidebar-widget .label-title{font-size:12px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.filters-panel .range-widget{display:flex;gap:8px}
.filters-panel .range-inputs{display:flex;gap:8px;flex:1}

@media(max-width:767px){
  .filter-toggle-btn{display:inline-flex}
  .filters-panel{display:none}
  .filters-panel.mobile-open{
    display:block;position:fixed;inset:0;z-index:950;border-radius:0;overflow-y:auto;
    padding:16px 16px calc(var(--bottom-nav-h) + 16px);
  }
  .filters-panel-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);font-size:15px;
  }
  .filters-panel-close{width:32px;height:32px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
  .filters-panel-row{flex-direction:column;align-items:stretch}
}

[class*="BrowseButton-input"]{display:none}

/* --- full-page loader (microjob-my.tpl, microjob-all.tpl) -------------------*/
.page-loader{position:fixed;inset:0;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;z-index:9999}
.page-loader img{width:44px;height:44px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- highlighted balance box (micro-post.tpl / microjob_edit.tpl) -----------*/
.balance-highlight{background:var(--primary-light);padding:12px;border-radius:var(--radius-sm);text-align:center}
.balance-highlight h2{color:var(--primary-dark);margin:0}

/* --- worldwide / limited-country marker (microjob-all/detail.tpl) -----------*/
.tooltip-icon.global{color:var(--success)}
.tooltip-icon.limited{color:var(--warning)}

/* --- inline warning notice (microjob-detail.tpl) -----------------------------*/
.inline-warning{background:var(--danger-bg);color:var(--danger);padding:10px 12px;border:1px solid #f5c6cb;border-radius:var(--radius-sm);margin-bottom:15px;font-size:13px}

/* --- image lightbox (microjob-detail.tpl) -------------------------------------*/
.image-popup-preview{display:flex;align-items:center;justify-content:center}
.image-popup-preview img{max-width:200px;height:auto;cursor:pointer;border-radius:var(--radius-sm)}
.image-popup-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.8);align-items:center;justify-content:center}
.image-popup-overlay .close-x{position:absolute;top:20px;right:30px;color:#fff;font-size:30px;cursor:pointer}
.image-popup-overlay img{max-width:90%;max-height:90%;border-radius:var(--radius)}

/* --- listing thumbnail (ad-listing.tpl) ---------------------------------------*/
.listing-thumb-img{width:100%;height:auto;border-radius:var(--radius-sm)}

/* --- simple support chatbox (contact.tpl) ------------------------------------*/
.chatbox-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.chatboxcontent{height:400px;overflow-y:auto;padding:14px;background:var(--bg)}
.chatbox-form{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--border)}
.chatbox-form .input-text{flex:1}
.chatbox-attach{cursor:pointer;font-size:18px}
.chat-message{margin-bottom:12px;max-width:70%;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border)}
.chat-message.odd{margin-left:auto;background:var(--primary-light);border-color:var(--primary-light);text-align:right}
.chat-message.even{margin-right:auto}
.msg-time{font-size:11px;color:var(--text-faint);margin-top:4px}
.chat-media{max-width:200px;border-radius:var(--radius-sm)}

/* --- bank/virtual-account card (deposit.tpl, JS-rendered) -------------------*/
.bank-details-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.bank-field{margin-bottom:14px}
.bank-field small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:4px}
.bank-field strong{font-size:15px;color:var(--text)}
.bank-account-box{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:2px solid var(--primary);border-radius:var(--radius-sm);padding:10px 14px;margin-top:4px;
}
.bank-account-box strong{font-size:20px;letter-spacing:1px;font-family:monospace;color:var(--primary-dark)}
.bank-note{margin-top:14px;padding-top:10px;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--success)}

/* --- "more" menu grid (more.tpl) --------------------------------------------*/
.more-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.more-menu-grid a{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:14px;font-weight:500;
}
.more-menu-grid a:hover{border-color:var(--primary);color:var(--primary)}
.more-menu-grid a i{width:18px;text-align:center;color:var(--primary)}
.more-menu-grid a.danger i{color:var(--danger)}
.more-menu-grid a .count{margin-left:auto}

/* --- status labels / counters -------------------------------------------------*/
.status-available{color:var(--success)}
.status-not-available{color:var(--danger)}
.featured,.count{background:var(--primary-light);color:var(--primary-dark);font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.highlight{outline:2px solid var(--primary-light)}
.currency-sign,.currency-code{font-weight:600}

/* --- misc small icons ----------------------------------------------------------*/
[class^="icon-feather-"],[class*=" icon-feather-"],[class^="la-"],[class*=" la-"]{line-height:1}

/* ---------- 15b. Mobile safety net (prevents any page from breaking/scrolling sideways) */
/* NOTE: overflow-x:hidden on html/body was here before and got removed —
   it breaks position:sticky (the header) because sticky stops working
   inside any ancestor with overflow set to anything but visible. Mobile
   overflow safety now comes only from max-width/word-break rules below,
   which don't have that side effect. */
img,video,iframe,canvas,svg{max-width:100%}
input,select,textarea,button{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
h1,h2,h3,h4,p,a,span,td,th,label{overflow-wrap:break-word}

/* ---------- 16. Responsive ---------------------------------------------------*/
@media (min-width:992px){
  .mobile-bottom-menu-wrapper{display:none}
  body{padding-bottom:0}
  .dashboard-responsive-nav-trigger{display:none}
}
@media (max-width:991px){
  #header .navigation{display:none}
  .header-widget.d-none.d-lg-block{display:none !important}
  .dashboard-responsive-nav-trigger{display:flex}
  .dashboard-nav{display:none}
  .dashboard-nav-container.open .dashboard-nav{display:block}
  .dashboard-profile-card{flex-direction:column;align-items:stretch}
  .balance-row{justify-content:space-between}
  .balance-chip{flex:1}
}
@media (max-width:560px){
  .container{padding:0 14px}
  h1{font-size:22px}
  .dashboard-box .content{padding:14px}
  .quick-actions a{flex:1 1 45%}
}