/* ============================================================
   Marketplace — Premium theme (own code)
   Modern, responsive, better-than-Marketplace look:
   indigo/violet gradient brand, rounded cards, soft shadows,
   pill buttons, micro-interactions. No external libraries.
   ============================================================ */
:root {
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --brand-soft: #eef2ff;
  --dark: #0f172a;
  --dark-2: #1e1b4b;
  --success: #10b981;
  --danger: #ef4444;
  --warn: #f59e0b;
  --bg: #edf1f2;
  --line: #e6eaf2;
  --text: #475569;
  --muted: #94a3b8;
  --ink: #1e293b;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Source Sans Pro", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 14.5px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: #4338ca; }
h1,h2,h3,h4 { color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
/* Marketplace uses the Bootstrap 1170px container */
.container { max-width: 1170px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header (Marketplace-style: black bar + white category bar) ---------- */
/* Sticky on desktop AND mobile (round 119): the whole header (topbar +
   category bar) stays pinned at the top while scrolling, like Marketplace.
   -webkit-sticky covers older iOS Safari; width:100% keeps it full-width. */
.site-header { position: -webkit-sticky; position: sticky; top: 0; width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05); }
.topbar { background: #1c2b36; color: #fff; }
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 54px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800;
  color: #fff !important; white-space: nowrap; }
.brand:hover { color: #fff !important; }
.brand .logo-dot { width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .45); flex-shrink: 0; }
/* Fixed display size — Marketplace's navbar logo is 22px tall; whatever size
   is uploaded, it renders at exactly this height (width auto keeps ratio). */
.brand-logo { height: 22px; width: auto; max-width: 190px; object-fit: contain;
  display: block; margin: 0; }
.top-links { display: flex; gap: 6px; flex: 1; }
/* Marketplace black navbar links: square background on hover (#16232d) and on the
   active page (#131e26) — no underline. */
/* 17px vertical padding = the hover/active box fills the FULL 54px bar
   height, exactly like Marketplace's navbar links. */
.top-links a { color: #cbd5e1; font-size: 14px; font-weight: 500; position: relative; padding: 17px 13px; }
.top-links a:hover { background: #16232d; color: #fff; }
.top-links a.active, .top-links a.active:hover { background-color: #131e26; color: #fff; }
/* No flex gap — like Marketplace's navbar the spacing comes from each item's
   own padding, items sit flush next to each other. */
.top-actions { display: flex; align-items: center; margin-left: auto; }

/* White category bar (hidden on mobile) — no bottom border, like Marketplace */
.catbar { background: #fff; }
.catbar-inner { display: flex; align-items: center; height: 46px; gap: 8px; }
.cat-nav { display: flex; gap: 0; }
.cat-dd { position: relative; }
/* Marketplace white-bar category items: square, hover #f6f8f8, open #f6f8f8 */
.cat-dd-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 13px 15px;
  font-size: 13.5px; font-weight: 600; color: #363f44; transition: background .15s; }
.cat-dd-toggle:hover { background: #f6f8f8; color: #363f44; }
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid #98a6ad; }
/* Marketplace dropdown-menu: white, radius 2px, light border/shadow; item hover
   #edf1f2 (bg-light), square rows, bold "Most Popular"/"Browse All". */
/* Marketplace's own geometry: NO top margin and SQUARE top corners, so the panel
   sits flush against the bar with no white seam showing through. (This is the
   Bootstrap rule Marketplace ships: `.navbar-nav > li > .dropdown-menu { margin-top:
   0; border-top-left-radius: 0; border-top-right-radius: 0; }`.) The 2px margin
   that used to sit here was the small gap visible above the panel. */
.cat-dd-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 160px;
  background: #fff; border: 1px solid #dee5e7; border-radius: 0 0 2px 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  padding: 5px 0; margin: 0; z-index: 1200; }
.cat-dd-menu a { display: flex; align-items: center; gap: 8px; padding: 5px 15px; color: #58666e;
  font-size: 14px; border-radius: 0; }
.cat-dd-menu a:hover { background: #edf1f2; color: #363f44; }
.cat-dd-menu .m-bold { font-weight: 700; }
/* Marketplace-style 16x16 icons before "Most Popular" / "Browse All" (desktop only) */
.m-r-sm { margin-right: 10px; }
.cat-ico { flex-shrink: 0; color: #98a6ad; }
.cat-dd-menu a:hover .cat-ico { color: #363f44; }
@media (max-width: 767px) { .cat-ico { display: none; } }
/* Subcategory links inside the category dropdowns (Marketplace tree).
   Marketplace dropdown link color is #333 (Bootstrap), hover #141719. */
.cat-dd-sep { border-top: 1px dashed #dee5e7; margin: 6px 0; }
.cat-dd-sub { padding-left: 15px !important; font-size: 13px !important; color: #333 !important; }
.cat-dd-sub:hover { color: #141719 !important; background: #edf1f2 !important; }
.cat-dd-sub img, .m-cat-menu a img { vertical-align: -2px; flex-shrink: 0; }
/* Category icon image next to the category name on item cards */
.hp-cat-img { width: 16px; height: 16px; border-radius: 3px; object-fit: contain;
  vertical-align: -2px; margin-right: 5px; background: #fff; }
/* Admin categories page */
.cat-table td { vertical-align: middle; }
.cat-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #98a6ad; }
.cat-thumb { width: 30px; height: 30px; border-radius: 8px; object-fit: contain;
  background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; }
.cat-thumb-def { color: #94a3b8; }
.cat-child .cat-name { padding-left: 16px; color: #58666e; }
.cat-branch { color: #c0c8cc; margin-right: 4px; font-weight: 700; }
.cat-count { background: #eef2ff; color: var(--brand); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 700; }
.inline-form { display: inline-block; margin: 0; vertical-align: middle; }
/* Responsive table: scrolls inside its panel on small screens (no page-wide blank space) */
.cat-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-table { min-width: 720px; }
/* Clickable parent category → auto-selects the parent in the add form */
.cat-set-parent { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  margin-left: 8px; border: 1px dashed #c7d3d6; border-radius: 999px; font-size: 11px;
  font-weight: 700; color: var(--brand); cursor: pointer; transition: all .15s; vertical-align: 1px; }
.cat-set-parent:hover { background: #eef2ff; border-color: var(--brand); text-decoration: none; }
.cat-set-parent svg { flex-shrink: 0; }
/* Move up/down buttons */
.cat-move { display: inline-flex; align-items: center; justify-content: center; width: 28px;
  height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: #64748b; cursor: pointer; transition: all .15s; }
.cat-move:hover { border-color: var(--brand); color: var(--brand); background: #eef2ff; }
/* Add-form hint line (with cancel button) */
.cat-form-hint { display: none; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--brand);
  background: #eef2ff; border-radius: 8px; padding: 9px 12px; }
.cat-form-hint-cancel { flex-shrink: 0; background: rgba(79, 70, 229, .1); border: 0;
  color: var(--brand); font-weight: 700; font-size: 12px; cursor: pointer;
  padding: 5px 12px; border-radius: 7px; transition: background .15s; }
.cat-form-hint-cancel:hover { background: rgba(79, 70, 229, .2); }
/* Professional confirm modal (replaces the browser confirm box) */
.amodal-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(2, 6, 23, .6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.amodal-overlay.show { opacity: 1; pointer-events: auto; }
.amodal { background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  width: 400px; max-width: 100%; padding: 30px 28px 24px; text-align: center;
  transform: translateY(10px) scale(.98); transition: transform .2s ease; }
.amodal-overlay.show .amodal { transform: none; }
.amodal-ico { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #f05050, #ef6c6c); box-shadow: 0 12px 26px rgba(240, 80, 80, .35); }
/* The icon follows the ACTION, not a fixed "danger" assumption. The modal is
   shared by every admin confirmation, so a red warning triangle used to sit on
   top of "Release $17.50 to the provider" — an action that is not destructive.
   tone-* mirrors the button tones (data-confirm-tone) so the two always agree.
   tone-danger is the default and matches the base rule above. */
.amodal-ico.tone-danger  { background: linear-gradient(135deg, #f05050, #ef6c6c); box-shadow: 0 12px 26px rgba(240, 80, 80, .35); }
.amodal-ico.tone-success { background: linear-gradient(135deg, #27c24c, #3ed167); box-shadow: 0 12px 26px rgba(39, 194, 76, .35); }
.amodal-ico.tone-warning { background: linear-gradient(135deg, #e0b400, #fad733); box-shadow: 0 12px 26px rgba(224, 180, 0, .35); }
.amodal-ico.tone-primary { background: linear-gradient(135deg, #7266ba, #8b80cd); box-shadow: 0 12px 26px rgba(114, 102, 186, .35); }
.amodal h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.amodal p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 22px; }
.amodal-actions { display: flex; gap: 10px; }
.amodal-actions .btn { flex: 1; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 13.5px; }
.cat-dd-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background: #e5e5e5; }
/* Marketplace category-bar search: square (radius 2px), no border, bg-light
   #edf1f2, input-sm 12px, "Search..." placeholder. */
.cat-search { display: flex; align-items: center; margin-left: auto; background: #edf1f2;
  border: 0; border-radius: 2px; overflow: hidden; }
.cat-search input { border: 0; background: transparent; padding: 5px 15px; font-size: 12px;
  width: 210px; height: 30px; color: #58666e; }
.cat-search input:focus { outline: none; }
.cat-search button { border: 0; background: transparent; color: #58666e; padding: 0 11px 0 3px;
  cursor: pointer; display: flex; align-items: center; transition: color .15s; }
.cat-search button:hover { color: #19a9d5; }

/* Buttons — Marketplace: border-radius 2px everywhere, flat colors. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px;
  border-radius: 2px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s; font-family: inherit; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 2px; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 2px; }
.btn-block { display: flex; width: 100%; }
/* Info (Marketplace #23b7e5) — used for the auth action buttons */
.btn-info { background: #23b7e5; border: 1px solid #23b7e5; color: #fff !important; box-shadow: none; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: #19a9d5; border-color: #19a9d5; color: #fff !important; transform: none; box-shadow: none; }
/* Success (Marketplace #27c24c) — Add Credit, Sign up, hero CTA. Border uses the
   same color as the background so it reads as borderless (Marketplace). */
.btn-success { background: #27c24c; border: 1px solid #27c24c; color: #fff !important; box-shadow: none; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: #23ad44; border-color: #23ad44; color: #fff !important; transform: none; box-shadow: none; }
/* Primary (Marketplace #7266ba) — "View upload preparation guide" on /upload,
   "Open the file Browser" in the uploader, checklist CTAs. */
.btn-primary { background: #7266ba; border: 1px solid #7266ba; color: #fff !important; box-shadow: none; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #6254b2; border-color: #5a4daa; color: #fff !important; transform: none; box-shadow: none; }
.btn-danger { background: #f05050; border: 1px solid #f05050; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #ee3939; border-color: #ed2a2a; color: #fff !important; transform: none; }
.btn-warning { background: #fad733; border: 1px solid #fad733; color: #333; }
.btn-warning:hover { background: #f5d633; border-color: #f5d633; color: #333; transform: none; }
.btn-default { background: #fff; border: 1px solid #dee5e7; border-bottom-color: #d8e1e3;
  color: #58666e !important; box-shadow: 0 1px 1px rgba(90, 90, 90, .1); }
.btn-default:hover, .btn-default:focus, .btn-default:active { background: #edf1f2; border-color: #c7d3d6; color: #58666e !important; }
.btn-black { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-black:hover { border-color: #fff; color: #fff; }
.btn-trans { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-trans:hover { background: rgba(255,255,255,.18); color: #fff; }
/* Facebook (Marketplace exact #3a5898 / hover #35508b) */
.btn-facebook { background: #3a5898; border-color: #3a5898; color: #fff !important; }
.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active { background: #35508b; border-color: #35508b; color: #fff !important; }

/* User dropdown — opens on CLICK only (Bootstrap behaviour).
   Square trigger: hover #16232d, open/active #131e26 (Marketplace bg-black). */
.user-dd { position: relative; }
/* 10px vertical padding around the 34px avatar = full 54px bar height */
.user-dd > a { display: flex; align-items: center; gap: 9px; color: #e2e8f0; font-size: 13.5px; padding: 10px 10px; border-radius: 0; }
.user-dd > a:hover { background: #16232d; color: #fff; }
.user-dd.open > a, .user-dd.open > a:hover { background-color: #131e26; color: #fff; }
/* Avatar image in the trigger: custom avatar -> default-avatar.png -> first letter.
   Semi-round like Marketplace (Bootstrap img-rounded = 6px), NOT a full circle,
   and NO border (Marketplace's navbar avatar has no white border). */
/* Marketplace's navbar avatar is thumb-xs = 34px */
.avatar-img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover;
  display: inline-block; background: #fff; border: 0; }
.avatar-img.av-fallback { background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 700; font-size: 13px; border: 0; }
.user-dd.open .dd-menu { display: block; }
/* Marketplace navbar dropdown: .w-md = 240px wide, margin-top 0, square top
   corners (border-top-radius 0), right-aligned, radius 2px, border #dee5e7
   + rgba(0,0,0,.1), soft shadow, items at 5px 15px, hover #edf1f2/#141719.
   Messages/Notifications stay w-xl 320px. */
.dd-menu { display: none; position: absolute; right: 0; top: 100%; width: 240px;
  background: #fff; border: 1px solid #dee5e7; border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 2px; border-top-left-radius: 0; border-top-right-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  padding: 5px 0; margin: 0; list-style: none;
  z-index: 1200; animation: ddIn .16s ease; }
.msg-dd .dd-menu, .notif-dd .dd-menu { width: 320px; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd-menu .dd-credit { padding: 12px 16px; background: #f9f9fa; border-bottom: 1px solid #e5e5e5; margin: -5px 0 0; }
.dd-menu .dd-credit p { margin: 0 0 10px; color: #363f44; font-size: 13.5px; }
.dd-menu .dd-credit strong { color: #363f44; }
.dd-menu li.dd-sep { height: 1px; margin: 9px 0; background: #e5e5e5; overflow: hidden; }
/* Menu links (NOT the Add Credit button inside .dd-credit) */
.dd-menu li:not(.dd-credit) > a { display: flex; align-items: center; gap: 10px; padding: 5px 15px;
  color: #333; font-size: 13.5px; white-space: nowrap; text-decoration: none; }
.dd-menu li:not(.dd-credit) > a:hover { background: #edf1f2; color: #141719; text-decoration: none; }
.dd-menu li:not(.dd-credit) > a .fa { width: 16px; text-align: center; color: #98a6ad; font-size: 13px; }
.dd-menu li:not(.dd-credit) > a:hover .fa { color: #23b7e5; }
/* Round 123b — achievement mini-strips in the account dropdown: force
   dark legible text (never white-on-white), like Marketplace. */
.dd-menu li.text-center { color: #363f44; font-size: 13px; padding: 10px 0; }
.dd-menu li.text-center strong { color: #141719; }
/* Round 123b — same achievement strips in the MOBILE account menu
   (dark panel): light text on the dark background. */
.m-strip { padding: 12px 14px; color: #cbd5e1; font-size: 13px; text-align: center; }
.m-strip strong { color: #fff; }
.m-strip .progress { background: rgba(255, 255, 255, .14); }
/* Round 125 — Achievements (/badges) grid: 4 badges per row on PC,
   3 per row on phones, everything centered (Marketplace-style). The old
   col-xs-3 class has no width in this theme, so rows were misaligned. */
.badges-grid { justify-content: center; }
.badges-grid > div {
  width: 25%;
  padding: 6px 10px;
  box-sizing: border-box;
  text-align: center;
}
@media (max-width: 767px) {
  .badges-grid > div { width: 33.33333333%; }
}
/* Round 129 — level strip FULLY REVERTED to the original design
   (before the round-126 change): no custom rules at all. The strip
   renders exactly like before — floated badges far left/right with
   the theme margins, centered text, bar below, original theme band
   colour (.bg-light.lter) and default progress track. */

/* Mobile menu — full-screen overlay below the bar (Marketplace-style):
   only the category dropdowns (+ compact account area) live in here.
   The menu itself scrolls; the page behind is locked while it is open. */
.nav-toggle { display: none; background: none; border: 0; color: #fff;
  padding: 9px 11px; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center; }
.mobile-panel { display: none; }
.mobile-panel.open {
  display: block;
  position: fixed;
  top: 54px; left: 0; right: 0; bottom: 0;
  background: #1c2b36;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 14px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 900;
}
body.menu-open { overflow: hidden; }
/* Marketplace submenu emphasis: bold "Browse All" / "Most Popular" + divider */
.m-cat-menu a.m-bold, .m-profile-menu a.m-bold { font-weight: 700; color: #cbd5e1; }
.m-cat-menu a.m-bb { border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 10px; margin-bottom: 4px; }
.m-cats-title { margin: 12px 12px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: #64748b; }
/* Mobile collapsibles (Profile + Categories) — open on CLICK only, caret
   rotates, the open/active trigger gets Marketplace's .bg-black nav active
   color (#131e26) with white text. */
.m-cat-toggle, .m-profile-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: #cbd5e1; padding: 11px 12px; border-radius: 8px;
  font-size: 14px; text-align: left; }
.m-cat-toggle:hover, .m-profile-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.m-cat-toggle.open, .m-profile-toggle.open { background-color: #131e26; color: #fff; }
.m-cat-toggle .caret, .m-profile-toggle .caret {
  margin-left: auto; border-top-color: #7793a7; transition: transform .15s; }
.m-cat-toggle.open .caret, .m-profile-toggle.open .caret { transform: rotate(180deg); border-top-color: #fff; }
.m-cat-menu, .m-profile-menu { display: none; padding: 2px 0 6px; }
.m-cat-menu.open, .m-profile-menu.open { display: block; }
.m-cat-menu a, .m-profile-menu a {
  display: flex; align-items: center; gap: 10px;
  color: #94a3b8; padding: 9px 12px 9px 26px; font-size: 13.5px; text-decoration: none; }
.m-cat-menu a:hover, .m-profile-menu a:hover { color: #fff; background: rgba(255,255,255,.05); }
.m-profile-menu a .fa { width: 16px; text-align: center; color: #64748b; font-size: 13px; }
.m-profile-menu a:hover .fa { color: #23b7e5; }
.m-profile-avatar { width: 28px; height: 28px; flex: none; }
.m-profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-credit { padding: 12px 16px; background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.08); margin: 0 0 4px; }
.m-credit p { margin: 0 0 10px; color: #cbd5e1; font-size: 13.5px; }
.m-credit strong { color: #fff; }
.m-sep { height: 1px; margin: 6px 12px; background: rgba(255,255,255,.08); }
.m-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.m-actions .btn-black { border-color: rgba(255,255,255,.35); }

/* ---------- Flash messages ---------- */
.flashbar { margin-top: 18px; }
/* Public-site flash messages (no wrapper section — Marketplace shows them
   inline at the top of the page content, only when they exist). */
.flash-alerts { max-width: 1170px; margin: 0 auto; padding: 18px 15px 0; }
.flash-alerts .alert { margin-bottom: 10px; }
.alert { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 44px 12px 16px;
  border-radius: 12px; font-size: 13.5px; margin-bottom: 12px; line-height: 1.5; }
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.alert-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
/* Marketplace warning alert (e.g. "You have already purchased this file"):
   cream background, tan border, brown text. */
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-warning.b-a { border-color: #faebcc; border-radius: 0; padding: 10px; }

/* Refund request thread (/refunds/view/{id}) — mobile-safe layout:
   no horizontal overflow; long item names, status text and message
   bodies (URLs included) wrap instead of stretching the page. */
.refund-page { overflow-x: hidden; }
.refund-page .panel,
.refund-page .list-group-item,
.refund-page .link-info { overflow-wrap: break-word; word-break: break-word; }
.refund-page img { max-width: 100%; height: auto; }
.refund-page .list-group-item { padding-right: 12px; }
/* Marketplace message layout: the avatar floats left and the message text
   stays BESIDE it (not below). The theme's global .clear { clear:both }
   would push the text under the avatar, so only here we cancel it and
   create a block-formatting context next to the float. */
.refund-page .list-group-item .clear { clear: none; overflow: hidden; min-width: 0; }
/* The theme's col-md-* widths apply at every screen size, so the content
   column stays 66% wide on phones. Below tablets the thread takes the
   full row width (desktop 66%/33% layout is untouched). */
@media (max-width: 991px) {
  .refund-page .col-md-8,
  .refund-page .col-md-4,
  .refund-page .col-sm-4 { width: 100%; float: none; }
}
/* Reply/decide buttons: one equal-width row on PC AND mobile. */
.refund-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 4px; }
.refund-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 0;
  padding: 7px 6px;
  white-space: nowrap;
  text-align: center;
  font-size: 13px;
}
.refund-actions .btn i { margin-right: 5px; }
@media (max-width: 359px) {
  .refund-actions { gap: 5px; }
  .refund-actions .btn { font-size: 12px; padding: 7px 3px; }
  .refund-actions .btn i { margin-right: 4px; }
}
/* Always-visible X close button on every alert */
.alert-close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: currentColor; opacity: .6;
  padding: 7px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, background .15s; }
.alert-close:hover { opacity: 1; background: rgba(0, 0, 0, .07); }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; text-align: center; padding: 74px 20px 66px; overflow: hidden;
  background: radial-gradient(900px 400px at 15% -10%, rgba(124,58,237,.5), transparent 60%),
              radial-gradient(800px 400px at 85% 110%, rgba(79,70,229,.45), transparent 55%),
              linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%); }
.hero h1 { color: #fff; font-size: 40px; font-weight: 800; line-height: 1.15; margin: 0 auto 12px; max-width: 760px; }
.hero h1 .grad { background: linear-gradient(90deg, #818cf8, #c4b5fd, #f0abfc);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: #c7d2fe; font-size: 16px; margin: 0 auto 26px; max-width: 560px; }
.hero-search { max-width: 600px; margin: 0 auto 26px; display: flex; background: #fff;
  border-radius: 999px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.hero-search input { flex: 1; border: 0; padding: 0 18px; font-size: 15px; border-radius: 999px; background: transparent; color: var(--ink); }
.hero-search input:focus { outline: none; }
.hero-search button { border: 0; border-radius: 999px; padding: 12px 26px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; cursor: pointer; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Section titles ---------- */
.section-title { display: flex; align-items: center; gap: 10px; margin: 34px 0 18px; font-size: 23px;
  font-weight: 800; color: var(--ink); }
.section-title .dot { width: 12px; height: 12px; border-radius: 4px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); transform: rotate(45deg); }
.section-title .pull-right { margin-left: auto; font-size: 13px; font-weight: 600; }

/* ---------- Item cards ---------- */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 20px; }
.item-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease; }
.item-panel:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.item-preview { position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff 45%, #e0e7ff); color: #a5b4fc;
  border-bottom: 1px solid var(--line); }
.item-preview .ph { font-size: 40px; opacity: .8; }
.item-label { position: absolute; top: 10px; left: 10px; z-index: 2; }
.item-label span { display: inline-block; padding: 4px 12px; font-size: 11px; font-weight: 700; color: #fff;
  border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.item-label .lbl-popular { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.item-label .lbl-featured { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.item-title { padding: 13px 14px 6px; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.item-title a { color: var(--ink); }
.item-title a:hover { color: var(--brand); }
.item-meta { padding: 4px 14px 14px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-cat { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.item-price { border-radius: 999px; padding: 5px 14px; font-size: 13.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #334155, #475569); }
.item-price.free { background: linear-gradient(135deg, #10b981, #059669); }
.item-price.sale { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 12px; height: 12px; }

/* ---------- Panels ---------- */
.panel { background: #fff; border: 1px solid var(--line); margin-bottom: 18px;
  box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink);
  background: #fbfcfe; }
.panel-body { padding: 15px; }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); background: #fff;
  border: 1px dashed #cbd5e1; border-radius: var(--radius); }

/* ---------- User account pages (full width — the menu lives only in the navbar dropdown) ---------- */

/* ---------- Tables ---------- */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 11px 16px; border-bottom: 1px solid #eef1f6; text-align: left; font-size: 13.5px; }
.table th { background: #f8fafc; font-weight: 700; color: var(--ink); }
.table tr:last-child td { border-bottom: 0; }
.table-striped tbody tr:nth-child(odd) { background: #fafbfe; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: #f5f7ff; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; }
.badge-pending { background: linear-gradient(135deg, #f59e0b, #d97706); }
.badge-approved { background: linear-gradient(135deg, #10b981, #059669); }
.badge-rejected { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.badge-draft { background: #94a3b8; }

/* ---------- Forms ---------- */
.form-control { width: 100%; padding: 10px 14px; border: 1px solid #cbd5e1;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); transition: all .15s; }
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.13); }

/* Password visibility toggle */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 44px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: #94a3b8; display: flex; align-items: center;
  justify-content: center; padding: 8px; border-radius: 8px; transition: color .15s, background .15s; }
.pw-toggle:hover { color: var(--brand); background: #f1f5f9; }
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; color: #334155; }
textarea.form-control { min-height: 96px; resize: vertical; }
.row2 { display: flex; gap: 14px; }
.row2 > div { flex: 1; min-width: 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
/* Long live-link previews wrap inside the box instead of overflowing
   (blog post / blog category / info page / category forms) */
.hint code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  vertical-align: bottom;
}

/* ---------- Auth pages — moved to assets/css/auth.css (split, round 121).
   Loaded on auth pages via layout/auth_head.php. Shared rules stay here. ---------- */

/* ---------- Admin panel — moved to assets/css/admin.css (split, round 121).
   Loaded on admin pages via layout/admin_header.php. Shared rules stay here. ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 18px 0; }
.stat-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow); }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.stat-value { font-size: 24px; font-weight: 800; color: var(--ink); margin-top: 7px; }
/* A .stat-box that is an <a> — the dashboard's jobs / quotes summary cards,
   which open the screen holding the full stage breakdown. .stat-box was
   written for a <div>, so the anchor's own colour, underline and inline
   display have to be undone, and it needs a hover cue to read as clickable. */
.stat-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.stat-link:hover, .stat-link:focus { border-color: #23b7e5; box-shadow: 0 2px 10px rgba(0, 0, 0, .07); color: inherit; text-decoration: none; }
.stat-link .stat-foot { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Admin login — moved to assets/css/admin.css (split, round 121).
   Loaded on the admin login page via layout/admin_login_head.php. ---------- */


.footer { background: #1c2b36; color: #cbd5e1; }
.footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 42px 0 30px; }
.footer h4 { color: #fff; font-size: 14px; margin: 0 0 14px; font-weight: 400; }
.footer h4 strong { font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: #96abbb; font-size: 13.5px; }
.footer a:hover { color: #fff; }
.footer .social { display: flex; gap: 8px; }
.footer .soc { width: 34px; height: 34px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff !important;
  transition: transform .15s, opacity .15s; }
.footer .soc:hover { transform: translateY(-2px); opacity: .85; }
.soc-fb { background: #3a5898; }
.soc-tw { background: #2baadf; }
.soc-ig { background: #e1306c; }
.soc-yt { background: #ff0000; }
.soc-pin { background: #ca1f28; }
.soc-rss { background: #f26722; }
.footer .bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: #5c798f; }
.footer .legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer .legal a { color: #96abbb; font-size: 12.5px; }
.footer .legal a:hover { color: #fff; }
.footer .heart { color: #f05050; }

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero, .section-title, .items-grid, .panel, .container > h1, .auth-wrap { animation: fadeUp .45s ease both; }

/* ---------- Responsive ---------- */
/* Mid screens: hide the least-used top links (like Marketplace's lg breakpoint) */
@media (max-width: 1100px) {
  .topbar-inner { gap: 12px; }
  .top-links { gap: 4px; }
  .top-links a.hide-lg { display: none; }
}
@media (max-width: 920px) {
  .top-links, .catbar { display: none; }
  /* Mobile (Marketplace-style): ONLY the logo and the 3-line hamburger stay in
     the black bar. The account/profile menu and the category menus live
     inside the opened hamburger panel — the avatar dropdown is desktop-only. */
  .top-actions { display: none !important; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .footer .cols { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 52px 16px 46px; }
  .hero h1 { font-size: 28px; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 23px; }
  .hero p { font-size: 14px; }
  .hero-search { border-radius: 14px; flex-direction: column; gap: 6px; padding: 8px; }
  .hero-search input { padding: 12px 14px; border-radius: 10px; }
  .row2 { flex-direction: column; gap: 0; }
  .footer .cols { grid-template-columns: 1fr; }
  .topbar-inner { gap: 12px; }
  .brand-logo { max-width: 150px; }
}

/* ==========================================================================
   CODESSTER-STYLE HOME PAGE (added 2026-08-27)
   ========================================================================== */

/* ---------- Hero / frontpage header ---------- */
.frontpage-header {
  width: 100%;
  padding: 58px 20px 54px;
  text-align: center;
  color: #fff;
  position: relative;
  /* Round 168 — equal hero height on home / forum / sale / free */
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Marketplace-style: the background image shows through fully (no dark
     overlay — readability comes from the h1 text-shadow, same as Marketplace).
     The night image is the default fallback. */
  background:
    url('../../static/img/backgrounds/frontpage-bg-night.jpg') 50% 50% / cover no-repeat,
    linear-gradient(160deg, #0b1522 0%, #14283a 52%, #0e3a54 100%);
}
/* Day (06:00–11:59): Marketplace's bright morning/noon image */
.frontpage-header.fp-day {
  background:
    url('../../static/img/backgrounds/frontpage-bg-noon.jpg') 50% 50% / cover no-repeat,
    linear-gradient(160deg, #5aa7d6 0%, #8ec9ec 52%, #bfe0f5 100%);
}
/* Afternoon (12:00–17:59): Marketplace's afternoon image (purple→blue gradient) */
.frontpage-header.fp-afternoon {
  background:
    url('../../static/img/backgrounds/frontpage-bg-afternoon.jpg') 50% 50% / cover no-repeat,
    linear-gradient(160deg, #4a4f9e 0%, #2f8fd8 52%, #5ec4ea 100%);
}
/* Sunset (18:00–23:59): Marketplace's sunset image (warm orange sky) */
.frontpage-header.fp-sunset {
  background:
    url('../../static/img/backgrounds/frontpage-bg-sunset.jpg') 50% 50% / cover no-repeat,
    linear-gradient(160deg, #3d2b56 0%, #c05a3a 52%, #e89b4f 100%);
}
/* Night (00:00–05:59): Marketplace's night image */
.frontpage-header.fp-night {
  background:
    url('../../static/img/backgrounds/frontpage-bg-night.jpg') 50% 50% / cover no-repeat,
    linear-gradient(160deg, #0b1522 0%, #14283a 52%, #0e3a54 100%);
}
.frontpage-header h1 {
  max-width: 840px;
  margin: 0 auto 30px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 5, .7);
}
.frontpage-header h1 strong { color: #fff; font-weight: 700; }
/* Round 103: the /sale /free /forum sub-lines get the same 840px width as
   the h1 (so the hero keeps the home page's width/height proportions). */
.frontpage-header h3 {
  max-width: 840px;
  margin: -8px auto 0;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 5, .7);
}

.fp-search {
  max-width: 640px;
  margin: 0 auto 30px;
  display: flex;
  /* Marketplace 3-part input-group: the "All files" select and the search
     button have a solid bg-light (#edf1f2) background; only the input in
     the middle is translucent white rgba(255,255,255,.5), so the hero
     background (day/afternoon/night) shows through it. */
  background: transparent;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.fp-search select {
  border: 0;
  background: #edf1f2;
  color: #58666e;
  font-size: 18px;
  height: 48px;
  padding: 0 34px 0 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2358666e' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.fp-search select:focus { outline: none; }
.fp-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: rgba(255, 255, 255, .5);
  padding: 0 16px;
  font-size: 18px;
  color: #58666e;
}
.fp-search input::placeholder { color: #7c8a90; }
.fp-search input:focus { outline: none; }
.fp-search button {
  border: 0;
  background: #edf1f2;
  color: #58666e;
  padding: 0 20px;
  cursor: pointer;
  border-radius: 0 2px 2px 0;
  transition: background .15s, color .15s;
}
.fp-search button .fa { font-size: 16px; }
.fp-search button:hover { background: #23b7e5; color: #fff; }

.fp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Marketplace transparent hero buttons */
.btn-transparant-white {
  color: #ffffff !important;
  border: 1px solid #fff;
  background: transparent;
  text-decoration: none;
}
.btn-transparant-white:hover,
.btn-transparant-white:focus,
.btn-transparant-white:active {
  color: #2baadf !important;
  border-color: #2baadf !important;
  text-decoration: none;
}
.b-white { border-color: #ffffff !important; }
.text-lg { font-size: 18px; }
.m-b-sm { margin-bottom: 10px; }
.m-r-md { margin-right: 20px; }

/* Hero CTA buttons — Marketplace: font 18px/500, padding 10px 16px, radius 2px.
   "Create a free account" is solid green #27c24c (btn-success), the other
   two stay transparent with a white border. */
.fp-cta .btn { padding: 10px 16px; font-size: 18px; font-weight: 500; border-radius: 2px; }
.fp-cta .btn-success { background: #27c24c; border-color: #27c24c; box-shadow: none; }
.fp-cta .btn-success:hover,
.fp-cta .btn-success:focus,
.fp-cta .btn-success:active { background: #23ad44; border-color: #23ad44; color: #fff; transform: none; }

/* ---------- Promo strip ("Create an account today and Download 4 Free Files
   every Week") — Marketplace: bg-dark dker #232735, h3-sized 24px white text,
   cyan bold link, bold white "Download 4 Free Files". Logged-out visitors
   only (Marketplace hides it once you log in). ---------- */
.promo-strip {
  background: #232735;
  color: #fff;
  text-align: center;
  padding: 20px 16px;
}
.promo-strip .promo-txt { font-size: 24px; font-family: inherit; font-weight: 500;
  line-height: 1.1; color: inherit; }
.promo-strip a { color: #19a9d5; font-weight: 700; text-decoration: none; }
.promo-strip a:hover { color: #2baadf; }
.promo-strip strong { color: #fff; font-weight: 700; }

/* ---------- Section headers ---------- */
.hp-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px 0 6px;
  padding: 14px 0 12px;
  border-bottom: 1px solid #dee5e7;
}
.hp-section .hp-title { font-size: 24px; font-weight: 300; color: #363f44; line-height: 1.15; } /* Round 198f: Marketplace h3 size on PC */
.hp-section .hp-title b { font-weight: 700; }
.hp-section .hp-more {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #58666e;
  background: #fff;
  border: 1px solid #dee5e7;
  border-radius: 2px;
  padding: 5px 10px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.hp-section .hp-more:hover { background: #edf1f2; text-decoration: none; color: #141719; }

/* ---------- Item card grid (Featured / Popular / Sale / Free) ---------- */
.hp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.hp-card {
  background: #fff;
  border: 1px solid #dee5e7;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.hp-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); transform: translateY(-2px); }

.hp-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #1c2b36 0%, #24384a 60%, #2e4a5f 100%);
  color: #5c798f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hp-thumb a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: .9; }

.hp-badge { position: absolute; right: 0; bottom: 10px; z-index: 2; }
.hp-badge span {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .3px;
}
.hp-badge .lbl-popular { background: #f05050; }
.hp-badge .lbl-featured { background: #23b7e5; }

.hp-title2 { padding: 12px 12px 4px; font-size: 14px; font-weight: 700; line-height: 1.35; min-height: 40px; }
.hp-title2 a { color: #363f44; text-decoration: none; }
.hp-title2 a:hover { color: #141719; }

.hp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
.hp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  color: #58666e;
  background: #fcfdfd;
  border: 1px solid #dee5e7;
  border-radius: 2px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.hp-iconbtn:hover { background: #edf1f2; border-color: #c7d3d6; text-decoration: none; }

.hp-stars { display: inline-flex; gap: 1px; align-items: center; }
/* Star size comes from the width/height attributes written by hp_stars() /
   it_stars() (grid = 17x16, list row = 12x12) — no CSS override here, so the
   12x12 list stars are NOT forced back up to 17x16. */

.hp-foot {
  margin-top: auto;
  border-top: 1px solid #edf1f2;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hp-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #98a6ad;
  font-size: 12.5px;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-cat:hover { color: #58666e; text-decoration: none; }
.hp-cat-icon {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, #23b7e5, #7266ba);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hp-price { display: inline-flex; align-items: center; gap: 6px; }
.hp-price del { color: #98a6ad; font-size: 12.5px; }
.hp-pricebtn {
  display: inline-block;
  background: #edf1f2;
  color: #363f44;
  border: 1px solid #dee5e7;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 2px;
  text-decoration: none;
  transition: all .15s;
}
.hp-pricebtn:hover { text-decoration: none; background: #dde6e9; color: #141719; }
.hp-pricebtn.free { background: #27c24c; border-color: #27c24c; color: #fff; }
.hp-pricebtn.free:hover { background: #23ad44; color: #fff; }
.hp-pricebtn.sale { background: #f05050; border-color: #f05050; color: #fff; }
.hp-pricebtn.sale:hover { background: #ee3939; color: #fff; }

/* ---------- Cookie consent modal ---------- */
.cm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cm-overlay.show { display: flex; }
.cm-box {
  background: #fff;
  max-width: 520px;
  width: 100%;
  border-radius: 6px;
  padding: 22px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.cm-title { font-size: 16px; font-weight: 700; color: #363f44; margin-bottom: 10px; }
.cm-body { font-size: 13.5px; color: #58666e; line-height: 1.6; }
.cm-body a { color: #19a9d5; }
.cm-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- Search page (Marketplace style) ---------- */
.crumb { font-size: 13px; color: #98a6ad; margin: 26px 0 4px; }
.crumb a { color: #98a6ad; }
.crumb a:hover { color: #23b7e5; }
.s-page-title { font-size: 26px; font-weight: 800; color: #363f44; margin: 4px 0 6px; }
.s-found { margin: 0 0 18px; }
.s-search { display: flex; max-width: 640px; background: #fff; border: 1px solid #dee5e7;
  border-radius: 4px; overflow: hidden; margin: 0; }
.s-search select { border: 0; background: #f6f8f8; color: #58666e; font-size: 13.5px;
  padding: 10px 26px 10px 12px; flex-shrink: 0; max-width: 160px; }
.s-search input { flex: 1; min-width: 0; border: 0; padding: 10px 14px; font-size: 14px; }
.s-search input:focus { outline: none; }
.s-search button { width: 46px; border: 0; background: #23b7e5; color: #fff; cursor: pointer;
  font-size: 15px; flex-shrink: 0; }
.s-search button:hover { background: #19a9d5; }
.s-layout { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 40px; }
.s-side { width: 220px; flex-shrink: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 12px; }
.s-side h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: #98a6ad; margin: 0 0 10px; padding: 0 8px; }
.s-side ul { list-style: none; margin: 0 0 14px; padding: 0; }
.s-side li a { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 8px; color: #58666e; font-size: 13.5px; }
.s-side li a:hover { background: #f6f8f8; color: #363f44; }
.s-side li.active a { background: #eef2ff; color: var(--brand); font-weight: 700; }
.s-side .cnt { background: #edf1f2; color: #58666e; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; padding: 2px 9px; }
.s-side li.active .cnt { background: var(--brand); color: #fff; }
.s-results { flex: 1; min-width: 0; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 10px; }
.pager .pg { min-width: 36px; height: 36px; padding: 0 12px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  color: #58666e; font-size: 13.5px; font-weight: 600; }
.pager .pg:hover { border-color: var(--brand); color: var(--brand); }
.pager .pg.active { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 767px) {
  .s-layout { flex-direction: column; }
  .s-side { width: 100%; }
  .s-search select { max-width: 110px; font-size: 12.5px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .frontpage-header { padding: 44px 16px 40px; }
  .frontpage-header h1 { font-size: 27px; }
}
@media (max-width: 767px) {
  .frontpage-header h1 { font-size: 22px; margin-bottom: 22px; }
  /* Marketplace keeps the search in one row on mobile: smaller select + button */
  .fp-search { flex-direction: row; border-radius: 4px; margin-bottom: 22px; }
  .fp-search select { width: auto; min-width: 88px; height: 44px; border-bottom: 0;
    padding: 0 26px 0 10px; font-size: 14px; }
  .fp-search input { height: 44px; padding: 0 12px; font-size: 15px; }
  .fp-search button { height: 44px; width: auto; padding: 0 14px; }
  /* Promo strip keeps the same 24px h3 design on mobile (Marketplace) */
  .hp-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .nr-grid { grid-template-columns: 1fr; }
  .hp-section { margin: 26px 0 2px; padding: 12px 0 10px; }
  .hp-section .hp-title { font-size: 24px; } /* Round 198f: keep Marketplace 24px on mobile too */
  .hp-title2 { font-size: 13px; min-height: 36px; }
  .hp-actions { padding: 6px 10px; }
  .hp-foot { padding: 8px 10px; }
  .hp-cat { font-size: 11.5px; }
}
@media (max-width: 380px) {
  .hp-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CODESSTER-STYLE HEADER — logged-in area & click dropdowns (added 2026-08-27)
   ========================================================================== */

/* Top-level category items: click opens the menu, never navigates (Marketplace) */
.cat-dd.open .cat-dd-menu { display: block; }
.cat-dd.open .cat-dd-toggle, .cat-dd.open .cat-dd-toggle:hover { background: #f6f8f8; color: #363f44; }

/* ==========================================================================
   SERVICES + HIRE A FREELANCER — mega menus (added 2026-09-12)

   The two new sections carry a full category tree, which does not fit a
   narrow dropdown. `.cat-dd-mega` widens the panel and lays the category
   groups out in columns, reusing the existing .cat-dd-menu look so the
   header stays visually consistent.
   ========================================================================== */
.cat-dd-menu.cat-dd-mega { min-width: 660px; padding: 12px 6px; }
.cat-dd-mega .mega-row { display: flex; flex-wrap: wrap; }
.cat-dd-mega .mega-col { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 12px 10px; }
.cat-dd-mega .mega-head { display: flex; align-items: center; font-weight: 700; font-size: 13.5px; padding: 2px 0 6px; }
/* Hover feedback in the wide Services menu: NO underline — the text simply
   changes colour instead, and it is the SAME colour for every category in the
   menu (the parent headings and their children alike), taken from the tab's own
   section colour. .cat-dd-mega is used by the Services panel alone, so nothing
   else in the header is affected. */
.cat-dd-mega .mega-head:hover { background: transparent; text-decoration: none; color: #7266ba !important; }
.cat-dd-mega ul { margin: 0; padding: 0; }
.cat-dd-mega .cat-dd-sub { padding: 2px 0 !important; display: flex; align-items: center; }
.cat-dd-mega .cat-dd-sub:hover { background: transparent !important; text-decoration: none; color: #7266ba !important; }
/* Categories carry their own 16x16 icon in these two menus (Marketplace's own
   markup), so the icon and the label sit on one line and never wrap apart. */
.cat-dd-mega .cat-dd-sub img, .cat-dd-mega .mega-head img { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   FULL-WIDTH PANELS — the Services and Hire a Freelancer menus only.

   Marketplace's shape: the panel spans the whole bar instead of hanging under
   its own tab. That is Bootstrap's "static dropdown" trick — the item loses
   its positioning context so the panel positions against the bar itself.
   Only the two tabs that opt in with .cat-dd-static are affected; every
   other dropdown in the header keeps the narrow panel it has always had.
   -------------------------------------------------------------------------- */
/* The panel spans the whole BAR — edge to edge of the screen — while its
   content is aligned by a .container INSIDE the panel, which is exactly how
   Marketplace builds it (.dropdown-menu.wrapper.w-full.b-a > .container). The
   white background therefore reaches both edges while the columns still line
   up with the page. */
.catbar { position: relative; }                   /* the bar is the panel's context */
.cat-dd.cat-dd-static { position: static; }
.cat-dd-menu.cat-dd-mega.cat-dd-full { left: 0; right: 0; width: auto; min-width: 0; }
/* Three columns, like Marketplace's (its own markup is three col-sm-4 columns). */
.cat-dd-mega.cat-dd-full .mega-col { flex: 0 0 33.3333%; max-width: 33.3333%; }
.cat-dd-mega .mega-inner { display: block; }
/* Hire a Freelancer: Marketplace's NARROW panel under its own tab, one category
   per row. Slightly wider than a plain dropdown so the icon and the longest
   label ("Web Designers & Web Developers") stay on one line. */
.cat-dd-menu.cat-dd-exp { min-width: 250px; }

/* Small helpers the section pages rely on (unchanged — the two rules below
   are the site-wide ones, kept exactly as they were). */
.text-primary { color: #23b7e5 !important; }
.text-info    { color: #23b7e5 !important; }

/* Section colours for the two menu tabs — Marketplace's own: Services is the
   purple .text-primary (#7266ba), Hire a Freelancer the blue .text-info
   (#23b7e5). Scoped to the header, so the site-wide .text-primary /
   .text-info above keep painting everything else blue. */
.cat-dd-toggle .text-primary { color: #7266ba !important; }
.cat-dd-toggle .text-info    { color: #23b7e5 !important; }
.cat-dd-menu .mega-head.text-primary { color: #7266ba !important; }
.cat-dd-menu .mega-head.text-info    { color: #23b7e5 !important; }
.l-h-2x { line-height: 2em; }
.no-radius { border-radius: 0 !important; }
.list-unstyled { padding-left: 0; list-style: none; }

@media (max-width: 1199px) {
  .cat-dd-menu.cat-dd-mega { min-width: 520px; }
}
@media (max-width: 991px) {
  .cat-dd-menu.cat-dd-mega { min-width: 420px; }
  .cat-dd-mega .mega-col { flex: 0 0 50%; max-width: 50%; }
  .cat-dd-mega.cat-dd-full .mega-col { flex: 0 0 50%; max-width: 50%; }
}

/* Messages / Notifications icon buttons */
.msg-dd, .notif-dd { position: relative; }
.dd-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 54px;
  border-radius: 0;
  color: #cbd5e1;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.dd-icon:hover { background: #16232d; color: #fff; text-decoration: none; }
.msg-dd.open .dd-icon, .notif-dd.open .dd-icon { background-color: #131e26; color: #fff; }
.dd-badge {
  position: absolute;
  top: 1px;
  right: -1px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: #f05050;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Messages / Notifications dropdown panels */
.dd-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 300px;
  background: #fff;
  border: 1px solid #dee5e7;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
  z-index: 300;
  overflow: hidden;
}
.msg-dd.open .dd-panel,
.notif-dd.open .dd-panel { display: block; }
.dd-panel-head {
  padding: 12px 16px;
  background: #f6f8f8;
  border-bottom: 1px solid #edf1f2;
  font-size: 13px;
  color: #58666e;
}
.dd-panel-head strong { color: #23b7e5; }
.dd-panel-body { padding: 28px 16px; text-align: center; color: #98a6ad; font-size: 13.5px; }
.dd-panel-foot { padding: 12px 16px; border-top: 1px solid #edf1f2; }

/* Account caret in the topbar (Marketplace puts avatar + caret, no name) */
.user-dd .dd-toggle .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #cbd5e1;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.user-dd .dd-toggle:hover .caret { border-top-color: #fff; }
.user-dd.open .dd-toggle .caret { border-top-color: #fff; }

/* Hidden on tablets/mobile — Marketplace shows these only on md+ screens */
@media (max-width: 991px) {
  .hide-mobile { display: none !important; }
}

/* ==========================================================================
   NOTIFICATIONS — page + header dropdown (added 2026-08-27)
   ========================================================================== */

.nt-page { padding: 10px 0 40px; }
.nt-page .crumbs { font-size: 13px; color: #98a6ad; padding: 14px 0 2px; }
.nt-page .crumbs a { color: #19a9d5; text-decoration: none; }
.nt-page .crumbs a:hover { color: #1797be; }
.nt-page .crumbs .sep { margin: 0 7px; color: #cfdadd; }
.nt-title { font-size: 24px; font-weight: 300; color: #363f44; margin: 8px 0 18px; }
.nt-title b { font-weight: 700; }

.nt-empty { text-align: center; padding: 70px 20px; color: #98a6ad; background: #fff; border: 1px solid #dee5e7; border-radius: 8px; }
.nt-empty p { margin: 14px 0 0; font-size: 14px; }

.nt-list { background: #fff; border: 1px solid #dee5e7; border-radius: 8px; overflow: hidden; }
.nt-item { display: flex; align-items: flex-start; gap: 13px; padding: 14px 18px; border-bottom: 1px solid #edf1f2; border-left: 3px solid transparent; text-decoration: none; transition: background .15s; }
.nt-item:last-child { border-bottom: none; }
.nt-item:hover { background: #f6f8f8; text-decoration: none; }
.nt-item.unread { border-left-color: #23b7e5; background: #f6fbfe; }
.nt-item.unread:hover { background: #eef7fc; }

/* The circle keeps a colour even for a notification type that has no rule of
   its own (the default below), so an icon can never end up white on white. */
.nt-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #98a6ad, #7b8a92); }
.nt-avatar.nt-bell    { background: linear-gradient(135deg, #23b7e5, #1797be); }
.nt-avatar.nt-heart   { background: linear-gradient(135deg, #f05050, #d63737); }
.nt-avatar.nt-comment { background: linear-gradient(135deg, #7266ba, #5a4daa); }
.nt-avatar.nt-dollar  { background: linear-gradient(135deg, #27c24c, #1e983b); }
.nt-avatar.nt-x       { background: linear-gradient(135deg, #fad733, #e6c20a); }
.nt-avatar.nt-info    { background: linear-gradient(135deg, #98a6ad, #7b8a92); }
/* A follower is a PERSON (Marketplace's convention: follow rows link to the
   member's profile), and a job is the briefcase. Both were falling through to
   no rule at all, which painted their icon white on white. */
.nt-avatar.nt-user      { background: linear-gradient(135deg, #23b7e5, #1797be); }
.nt-avatar.nt-user-plus { background: linear-gradient(135deg, #23b7e5, #1797be); }
.nt-avatar.nt-briefcase { background: linear-gradient(135deg, #7266ba, #5a4daa); }

.nt-body { min-width: 0; }
.nt-msg { display: block; font-size: 13.5px; line-height: 1.5; color: #363f44; }
.nt-msg strong { font-weight: 700; color: #1f2427; }
.nt-time { display: block; margin-top: 3px; font-size: 12px; color: #98a6ad; }

/* Header bell dropdown notification rows */
.dd-notif-list { max-height: 300px; overflow-y: auto; }
.dd-notif { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #edf1f2; text-decoration: none; transition: background .15s; }
.dd-notif:hover { background: #f6f8f8; text-decoration: none; }
.dd-notif .nt-avatar { width: 28px; height: 28px; }
.dd-notif-text { min-width: 0; }
.dd-notif-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: #363f44; }
.dd-notif-msg strong { color: #1f2427; }
.dd-notif-time { display: block; margin-top: 2px; font-size: 11px; color: #98a6ad; }

/* Mobile: notifications page list is full width, no extra padding */
@media (max-width: 767px) {
  .nt-item { padding: 12px 14px; }
  .nt-title { font-size: 20px; }
}

/* ==========================================================================
   SOURCE SANS PRO — same font as Marketplace (files in assets/fonts/sourcesanspro/)
   ========================================================================== */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('../fonts/sourcesanspro/sourcesanspro-light.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
       url('../fonts/sourcesanspro/sourcesanspro.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
       url('../fonts/sourcesanspro/sourcesanspro-bold.woff') format('woff');
}

/* ==========================================================================
   FONT AWESOME 4.2.0 (same icon font as Marketplace) — added 2026-08-27
   Only the icons used by the account menu / header are included.
   Font files live in assets/fonts/ (woff, ttf, eot, svg).
   ========================================================================== */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
.fa-lg { font-size: 1.33333333em; line-height: .75em; vertical-align: -15%; }
.fa-fw { width: 1.28571429em; text-align: center; }
.fa-user:before { content: "\f007"; }
.fa-cog:before { content: "\f013"; }
.fa-cloud-download:before { content: "\f0ed"; }
.fa-briefcase:before { content: "\f0b1"; }
.fa-history:before { content: "\f1da"; }
.fa-heart:before { content: "\f004"; }
.fa-folder-open:before { content: "\f07c"; }
.fa-link:before { content: "\f0c1"; }
.fa-trophy:before { content: "\f091"; }
.fa-tachometer:before { content: "\f0e4"; }
.fa-files-o:before { content: "\f0c5"; }
.fa-cloud-upload:before { content: "\f0ee"; }
.fa-money:before { content: "\f0d6"; }
.fa-list:before { content: "\f03a"; }
.fa-undo:before { content: "\f0e2"; }
.fa-caret-square-o-down:before { content: "\f150"; }
.fa-sign-out:before { content: "\f08b"; }
.fa-envelope-o:before { content: "\f003"; }
.fa-bell-o:before { content: "\f0a2"; }
.fa-caret-down:before { content: "\f0d7"; }
.fa-search:before { content: "\f002"; }
.fa-bars:before { content: "\f0c9"; }
.fa-times:before { content: "\f00d"; }
.fa-expand:before { content: "\f065"; }
.fa-compress:before { content: "\f066"; }
.fa-eye:before { content: "\f06e"; }
.fa-eye-slash:before { content: "\f070"; }
.fa-facebook-square:before { content: "\f082"; }
.fa-google:before { content: "\f1a0"; }
.fa-exclamation-triangle:before { content: "\f071"; }
.fa-minus-circle:before { content: "\f056"; }
.fa-check:before { content: "\f00c"; }
/* Settings (/edit) sidebar icons (Marketplace-style solid FA glyphs) */
.fa-lock:before { content: "\f023"; }
.fa-picture-o:before { content: "\f03e"; }
.fa-shield:before { content: "\f132"; }
.fa-users:before { content: "\f0c0"; }
.fa-map-marker:before { content: "\f041"; }
.fa-file-text-o:before { content: "\f0f6"; }
/* Author Dashboard (round 40) — dashboard + support-thread icons */
.fa-upload:before { content: "\f093"; }
.fa-bar-chart:before { content: "\f080"; }
.fa-check-circle-o:before { content: "\f05d"; }
.fa-clock-o:before { content: "\f017"; }
.fa-chevron-down:before { content: "\f078"; }
.fa-exclamation-circle:before { content: "\f06a"; }
.m-r-xs { margin-right: 5px; }

/* Icon buttons in the topbar use Font Awesome too */
.dd-icon .fa { font-size: 17px; }
.nav-toggle .fa { font-size: 18px; }
.cat-search button .fa { font-size: 13px; }
.alert-close .fa { font-size: 14px; }

/* Message avatars in the header dropdown */
.dd-msg-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }
.dd-msg-avatar.av-fallback { display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-weight: 700; font-size: 12px; }

/* ==========================================================================
   MESSAGES PAGE (/messages) — Marketplace-style inbox + compose
   ========================================================================== */
.msg-page { padding: 10px 0 40px; }
.msg-page .crumbs { font-size: 13px; color: #98a6ad; padding: 14px 0 2px; }
.msg-page .crumbs a { color: #19a9d5; text-decoration: none; }
.msg-page .crumbs a:hover { color: #1797be; }
.msg-page .crumbs .sep { margin: 0 7px; color: #cfdadd; }
.msg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.msg-list { background: #fff; border: 1px solid #dee5e7; border-radius: 8px; overflow: hidden; }
.msg-item { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px;
  border-bottom: 1px solid #edf1f2; border-left: 3px solid transparent;
  text-decoration: none; transition: background .15s; }
.msg-item:last-child { border-bottom: none; }
.msg-item:hover { background: #f6f8f8; text-decoration: none; }
.msg-item.unread { border-left-color: #23b7e5; background: #f6fbfe; }
.msg-item.unread:hover { background: #eef7fc; }
.msg-avatar { flex: none; }
.msg-avatar-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.msg-avatar-img.av-fallback { display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-weight: 700; font-size: 14px; }
.msg-body { min-width: 0; flex: 1; }
.msg-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.msg-sender { font-weight: 700; color: #363f44; font-size: 13.5px; }
.msg-time { font-size: 11.5px; color: #98a6ad; white-space: nowrap; }
.msg-snippet { display: block; margin-top: 2px; font-size: 13px; color: #58666e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .msg-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .msg-item { padding: 12px 12px; }
}

/* ==========================================================================
   PROFILE PAGE — avatar edit panel
   ========================================================================== */
.av-edit { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.av-edit-preview { flex: none; }
.av-edit-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .12); }
.av-edit-img.av-fallback { display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-weight: 700; font-size: 28px; }
.av-edit-form { flex: 1; min-width: 260px; }

/* ==========================================================================
   SELLER PAGE (/info/seller) — Marketplace sfp-page design
   Hero gradient #7266ba -> #5d7bd2 -> #23b7e5, 70% commission facts,
   benefit cards, categories, steps, checklist, FAQ, CTA.
   ========================================================================== */
.sfp-page { padding-bottom: 10px; }
.sfp-hero { background: linear-gradient(135deg, #7266ba 0%, #5d7bd2 55%, #23b7e5 100%);
  color: #fff; text-align: center; padding: 62px 15px 56px; }
.sfp-hero h1 { margin: 0 0 10px; font-size: 34px; font-weight: 700; color: #fff; }
.sfp-hero-sub { font-size: 16px; color: rgba(255, 255, 255, .93); margin: 0 auto 26px;
  max-width: 560px; line-height: 1.55; }
.sfp-hero-facts { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.sfp-fact { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 2px; padding: 12px 22px; min-width: 158px; }
.sfp-fact strong { display: block; font-size: 21px; font-weight: 700; }
.sfp-fact span { font-size: 12.5px; opacity: .92; }
.sfp-cta-btn { padding: 11px 28px; font-size: 15px; font-weight: 700; border-radius: 2px; }
.sfp-section { padding: 46px 15px; }
.sfp-h2 { text-align: center; font-size: 24px; font-weight: 700; color: #363f44; margin: 0 0 8px; }
.sfp-lead { text-align: center; color: #98a6ad; font-size: 14px; margin: 0 0 22px; }
.sfp-grid { display: grid; gap: 16px; margin-top: 22px; }
.sfp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sfp-grid-5 { grid-template-columns: repeat(5, 1fr); }
.sfp-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 2px; padding: 22px 18px; text-align: center; }
.sfp-card i { font-size: 26px; color: #23b7e5; margin-bottom: 10px; }
.sfp-card h3 { font-size: 15.5px; font-weight: 700; color: #363f44; margin: 0 0 8px; }
.sfp-card p { font-size: 13.5px; color: #98a6ad; line-height: 1.6; margin: 0; }
.sfp-cat { background: #fff; border: 1px solid #e5e5e5; border-radius: 2px; padding: 20px 12px;
  text-align: center; color: #58666e; display: block; transition: border-color .15s, color .15s; }
.sfp-cat:hover { border-color: #23b7e5; color: #23b7e5; text-decoration: none; }
.sfp-cat i { display: block; font-size: 24px; margin-bottom: 8px; color: #23b7e5; }
.sfp-cat span { font-size: 13.5px; font-weight: 600; }
.sfp-step { text-align: center; padding: 10px; }
.sfp-step-num { display: inline-flex; width: 40px; height: 40px; border-radius: 50%;
  background: #23b7e5; color: #fff; font-size: 17px; font-weight: 700;
  align-items: center; justify-content: center; margin-bottom: 10px; }
.sfp-step h3 { font-size: 15px; font-weight: 700; color: #363f44; margin: 0 0 6px; }
.sfp-step p { font-size: 13.5px; color: #98a6ad; line-height: 1.55; margin: 0; }
.sfp-guide { background: #f5f7f9; }
.sfp-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sfp-panel { background: #fff; border: 1px solid #e5e5e5; border-radius: 2px; padding: 26px 24px; }
.sfp-panel .sfp-h2 { text-align: left; font-size: 19px; margin-bottom: 14px; }
.sfp-checklist { list-style: none; margin: 0; padding: 0; }
.sfp-checklist li { font-size: 13.5px; color: #58666e; line-height: 1.55; padding: 7px 0;
  border-bottom: 1px dashed #edf1f2; display: flex; gap: 9px; }
.sfp-checklist li:last-child { border-bottom: 0; }
.sfp-checklist li i { color: #27c24c; margin-top: 2px; }
.sfp-faq-list { max-width: 760px; margin: 22px auto 0; }
.sfp-faq-item { border: 1px solid #e5e5e5; border-radius: 2px; background: #fff; margin-bottom: 8px; }
.sfp-faq-item summary { padding: 13px 16px; font-size: 14px; font-weight: 600; color: #363f44;
  cursor: pointer; list-style: none; position: relative; padding-right: 40px; }
.sfp-faq-item summary::-webkit-details-marker { display: none; }
.sfp-faq-item summary::after { content: "\f078"; font-family: FontAwesome; position: absolute;
  right: 16px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #98a6ad; }
.sfp-faq-item[open] summary::after { content: "\f077"; }
.sfp-faq-item p { margin: 0; padding: 0 16px 14px; font-size: 13.5px; color: #98a6ad; line-height: 1.6; }
.sfp-cta { background: #1c2b36; color: #fff; text-align: center; padding: 46px 15px; }
.sfp-cta h2 { margin: 0 0 6px; font-size: 24px; color: #fff; }
.sfp-cta p { color: #98a6ad; font-size: 14px; margin: 0 0 18px; }
@media (max-width: 900px) {
  .sfp-grid-4, .sfp-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .sfp-guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sfp-grid-4, .sfp-grid-5 { grid-template-columns: 1fr; }
  .sfp-hero h1 { font-size: 26px; }
  .sfp-hero-facts { flex-direction: column; align-items: center; }
  .sfp-fact { width: 100%; max-width: 260px; }
}

/* ============================================================
   Marketplace profile + settings pages (2026-08-27)
   Public profile at /{username}/ + settings at /edit/ —
   Bootstrap-like utility classes + Marketplace flat panels.
   ============================================================ */
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
/* Marketplace pull-right inside our flex rows: floats are ignored in flex
   containers, so push the item to the right edge with margin-left:auto
   (same visual result as Marketplace's float:right on a Bootstrap row). */
.row > .pull-right { margin-left: auto; }
.row > [class*="col-"] { padding: 0 15px; box-sizing: border-box; }
/* Bootstrap col properties (like Marketplace): each column is a positioned
   block with 15px side padding — the grid gutter. Widths below. */
.col-sm-3, .col-sm-6, .col-sm-9, .col-md-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-sm-3 { width: 25%; }
.col-sm-6 { width: 50%; }
.col-sm-9 { width: 75%; }
.col-md-6 { width: 50%; }
@media (max-width: 767px) {
  .col-sm-3, .col-sm-6, .col-sm-9, .col-md-6 {
    width: 100%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
}
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.wrapper { padding: 0 15px; }
.wrapper-sm { padding: 10px; }
.wrapper-xs { padding: 5px; }

.b-a { border: 1px solid #dee5e7; }
.b-b { border-bottom: 1px solid #dee5e7; }
.b-l { border-left: 1px solid #dee5e7; }
.b-r { border-right: 1px solid #dee5e7; }
.b-light { border-color: #edf1f2 !important; border: 1px solid; }

.h-xs { height: 90px; }
.pos-rlt { position: relative; }
/* Round 102: .h1/.h2/.h4 etc. are defined LATER in this file with their
   own color (#363f44 / #58666e) — same specificity, later rule wins — so
   .text-white on the same element was overridden and the blog newsletter
   "Join over 150,000…" headline rendered gray on the black panel instead
   of white like Marketplace. !important guarantees white wins. */
.text-white { color: #fff !important; }
.font-bold, .h1.font-bold, .h2.font-bold, .h3.font-bold, .h4.font-bold, .h5.font-bold, .h6.font-bold { font-weight: 700; }
.font-thin { font-weight: 300; }
.text-muted { color: #98a6ad; }
.text-danger { color: #f05050; }
a.text-danger:hover, a.text-danger:focus { color: #ee3939; }
.text-center { text-align: center; }
.text-md { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-sm { font-size: 13px; }
.h1 { font-size: 30px; font-weight: 500; color: #363f44; margin: 0; line-height: 1.2; }
.h4 { font-size: 18px; font-weight: 500; color: #58666e; margin: 0; line-height: 1.1; }
.img-rounded { border-radius: 6px; }
.thumb-xl { display: inline-block; width: 128px; height: 128px; object-fit: cover; }
.thumb-md { width: 64px; height: 64px; object-fit: cover; }
.thumb-xs { width: 34px; height: 34px; object-fit: cover; }

/* Margin utilities (Marketplace values) */
.m-t-none { margin-top: 0 !important; }
.m-t-xxs { margin-top: 1px; }
.m-t-xs { margin-top: 5px; }
.m-t { margin-top: 15px; padding: 15px; }
.m-t-md { margin-top: 20px; margin-bottom: 20px; }
.m-t-lg { margin-top: 30px; }
.m-t-xl { margin-top: 40px; }
.m-t-n-xs { margin-top: -5px; }
.m-t-n-sm { margin-top: -10px; }
.m-t-n-md { margin-top: -20px; }
.m-t-n-xxl { margin-top: -50px; }
.m-b-none { margin-bottom: 0 !important; }
.m-b-xs { margin-bottom: 5px; }
.m-b-sm { margin-bottom: 10px; }
.m-b { margin-bottom: 15px; }
/* .m-b-md removed per request */
.m-b-lg { margin-bottom: 20px; }
.m-b-xl { margin-bottom: 40px; }
.m-l-xs { margin-left: 5px; }
.m-l-sm { margin-left: 10px; }
.m-l-lg { margin-left: 30px; }
.m-l-xl { margin-left: 40px; }
.m-l-xxl { margin-left: 50px; }
.m-l-n-md { margin-left: -20px; }
.m-r-xs { margin-right: 5px; }
.m-r-sm { margin-right: 10px; }
.m-r-md { margin-right: 20px; }
.m-r-xl { margin-right: 40px; }
.m-r-xxl { margin-right: 50px; }
.m-l-n-xs { margin-left: -5px; }

/* ---------------- Public profile page (/username/) ---------------- */
.profile-page .bg-black { background: #1c2b36; }

/* Flat Marketplace panels (overflow visible so the profile avatar can
   overlap the background strip above the panel, like Marketplace) */
.profile-page .panel,
.settings-page .panel {
  background: #fff;
  border: 1px solid #dee5e7;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  margin-bottom: 18px;
  overflow: visible;
}
.profile-page .panel-heading,
.settings-page .panel-heading {
  padding: 10px 15px;
  background: #fff;
  border-bottom: 1px solid #edf1f2;
  font-size: 14px;
  color: #58666e;
}
.profile-page .panel-body,
.settings-page .panel-body { padding: 15px; }

/* Avatar overlapping the background strip (Marketplace) */
.profile-page .profile-avatar {
  z-index: 99;
  position: relative;
  border: 3px solid #ffffff;
  background-color: #ffffff;
  border-radius: 11px;
}

/* Profile menu tabs — 5px bottom border, active #0FAADC */
.profile-page .profile-menu { margin-bottom: -7px; display: flex; flex-wrap: wrap; }
.profile-page .profile-menu a {
  color: #58666e;
  display: inline-block;
  padding-bottom: 12px;
  text-decoration: none;
  /* Round 123: always reserve the 5px underline space (transparent) so
     hovering never adds height — on Followers/Following pages no tab is
     active, so the old hover border made the panel jump 5px down. */
  border-bottom: 5px solid transparent;
}
.profile-page .profile-menu a:hover,
.profile-page .profile-menu a:focus {
  text-decoration: none;
  color: #141719 !important;
  /* Round 123: colour change only — no layout shift on hover. */
  border-bottom-color: #E5E9EC;
}
.profile-page .profile-menu a.active {
  border-bottom: 5px solid #0FAADC;
  font-weight: bold;
  color: #363f44 !important;
}

/* Profile hero — Marketplace h-md (240px) when a background is uploaded;
   the default strip stays h-xs (90px). */
.h-md { height: 240px; }

/* Profile page animation: plays ONLY on the Overview tab. Shop / Likes /
   Collections visits get .no-anim so the fadeUp page animation does not
   re-trigger on every tab change (Marketplace behavior). */
.profile-page.no-anim .panel,
.profile-page.no-anim .profile-hero,
.profile-page.no-anim .hero,
.profile-page.no-anim .items-grid,
.profile-page.no-anim .section-title { animation: none !important; }

/* Info rows (Country/City/Member since/Last seen) */
.profile-page .panel .row { margin: 0 0 8px; font-size: 13.5px; padding-top: 20px; }
.profile-page .panel .row .col-sm-6 { padding: 0 5px; }
.profile-page .panel .row .col-sm-6:first-child { color: #98a6ad; }

/* Collections folder tile */
.profile-page .cl-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 8px;
  background: #edf1f2; color: #98a6ad;
}
.profile-page .cl-body { overflow: hidden; }
.profile-page .cl-body .thumb-xs { border-radius: 4px; vertical-align: middle; }

/* Round 104: Marketplace Social Channels panel — 34px brand circles */
.profile-page .soc-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: 0 4px 6px 0;
  vertical-align: middle;
}

/* RSS button (Marketplace btn-rss) */
.profile-page .btn-rss {
  color: #ffffff !important;
  background-color: #f26722;
  border: 1px solid #f26722;
  border-radius: 2px;
  padding: 6px 12px;
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.profile-page .btn-rss:hover,
.profile-page .btn-rss:focus {
  color: #ffffff !important;
  background-color: #e26020;
  border-color: #e26020;
}

/* ---------------- Settings page (/edit/) ---------------- */
.settings-page h4 { font-size: 18px; font-weight: 500; color: #363f44; margin: 0 0 10px; }

.settings-page .nav { padding-left: 0; margin-bottom: 0; list-style: none; }
.settings-page .nav-pills > li { position: relative; display: block; }
.settings-page .nav-pills > li + li { margin-top: 2px; margin-left: 0; }
.settings-page .nav-pills > li > a {
  display: block;
  padding: 6px 12px;
  border-radius: 2px;
  color: #58666e;
  text-decoration: none;
  font-size: 13.5px;
  cursor: pointer;
}
.settings-page .nav-pills > li > a:hover,
.settings-page .nav-pills > li > a:focus { background-color: #f6f8f8; color: #141719; }
.settings-page .nav-pills > li.active > a,
.settings-page .nav-pills > li.active > a:hover,
.settings-page .nav-pills > li.active > a:focus {
  color: #fff !important;
  background-color: #23b7e5 !important;
}
/* ==========================================================================
   /edit/ SIDEBAR ICONS — solid Font Awesome 4.2.0 (added 2026-08-28, rev 2)
   User asked for premium icons: the thin stroke glyphs were replaced with
   the solid FA set already embedded for the header/account menu (same font
   files, no new assets). Colors follow the link — muted by default, blue
   on hover, white when active (Marketplace behavior).
   ========================================================================== */
.settings-page .nav-pills > li > a .fa { margin-right: 10px; font-size: 14px; color: #98a6ad; }
.settings-page .nav-pills > li > a:hover .fa,
.settings-page .nav-pills > li > a:focus .fa { color: #23b7e5; }
.settings-page .nav-pills > li.active > a .fa { color: #fff; }

.settings-page .tab-content > .tab-pane { display: none; }
.settings-page .tab-content > .tab-pane.active { display: block; }

/* Marketplace form-horizontal grid */
.settings-page .form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 0 15px;
}
.settings-page .form-horizontal .control-label {
  width: 16.66666667%;
  padding-top: 7px;
  padding-right: 15px;
  text-align: right;
  font-weight: normal;
  font-size: 13.5px;
  color: #58666e;
  margin: 0;
}
.settings-page .form-horizontal .col-lg-10,
.settings-page .form-horizontal .col-md-10 { width: 83.33333333%; padding-left: 15px; }
.settings-page .form-horizontal .col-lg-offset-2 { margin-left: 16.66666667%; }
@media (max-width: 767px) {
  .settings-page .form-horizontal .control-label { width: 100%; text-align: left; padding-right: 0; }
  .settings-page .form-horizontal .col-lg-10,
  .settings-page .form-horizontal .col-md-10 { width: 100%; padding-left: 0; }
  .settings-page .form-horizontal .col-lg-offset-2 { margin-left: 0; }
}

/* Marketplace form controls (radius 2px, no shadow) */
.settings-page .form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #58666e;
  background-color: #fff;
  border: 1px solid #cfdadd;
  box-shadow: none;
}
.settings-page .form-control:focus { border-color: #23b7e5; box-shadow: none; outline: 0; }
.settings-page textarea.form-control { height: auto; min-height: 96px; }
.settings-page .profile-desc { min-height: 220px; }
.settings-page select.form-control { height: 34px; }
.settings-page .w-lg { width: 280px; }
.settings-page .help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 0;
  color: #98a6ad;
  font-size: 13px;
}

/* Radios / checkboxes (Marketplace) */
.settings-page .radio,
.settings-page .checkbox { position: relative; display: block; margin: 0 0 8px; }
.settings-page .radio label,
.settings-page .checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin: 0;
  font-weight: normal;
  font-size: 13.5px;
  color: #58666e;
  cursor: pointer;
}
.settings-page .radio input[type="radio"],
.settings-page .checkbox input[type="checkbox"] {
  position: absolute;
  margin-top: 4px;
  margin-left: -20px;
}

/* Marketplace-style alerts inside these pages (no close button) */
.alert-plain {
  display: block;
  position: static;
  gap: 0;
  padding: 12px 15px;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 15px;
}
.alert-plain.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border: 1px solid #faebcc; }
.alert-plain.alert-info    { color: #31708f; background-color: #d9edf7; border: 1px solid #bce8f1; }
.alert-plain.alert-success { color: #3c763d; background-color: #dff0d8; border: 1px solid #d6e9c6; }

/* Social brand icon circles */
.settings-page .soc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  vertical-align: middle;
}

.settings-page .business_input.hide { display: none !important; }

.settings-page input[readonly] { background-color: #f6f8f8; cursor: not-allowed; }

/* ============================================================
   Buyer pages (Downloads / Ordered Jobs / Order history)
   Marketplace /download/, /jobs/?role=buyer, /orders/ — 2026-08-28
   ============================================================ */
.bg-light.lter { background-color: #f6f8f8; }
.p-t-sm { padding-top: 10px; }
.h2 { font-size: 30px; font-weight: 500; color: #363f44; margin: 0; line-height: 1.2; }

.col-md-9 { width: 75%; }
/* Round 102: Bootstrap 3 semantics — col-md-* only applies at >=992px;
   below that Marketplace's grid stacks the content column FULL width. Ours
   had no media query, so on tablets / narrow windows the blog cover,
   comments and the newsletter panel stayed squeezed at 75% (short width)
   while Marketplace's went full width. */
@media (max-width: 991px) {
  .col-md-9 { width: 100%; }
}

/* Marketplace link colour for info copy */
.link-info a { color: #19a9d5; }
.link-info a:hover, .link-info a:focus { color: #1797be; text-decoration: none; }

.text-black { color: #363f44; }
.text-success { color: #27c24c; }
.m-r { margin-right: 15px; }
.m-r-lg { margin-right: 30px; }

/* Responsive hide/show (Bootstrap-like) */
.hidden-xs, .hidden-sm { display: none !important; }

/* Round 89: hide the profile RSS button on phones — Marketplace shows
   it on desktop only. (Scoped to .profile-rss so the footer's RSS
   social icon keeps working on mobile.) */
@media (max-width: 767px) {
  .profile-rss { display: none !important; }
}
@media (min-width: 768px) { .hidden-xs { display: block !important; } }
@media (min-width: 992px) { .hidden-sm { display: block !important; } }

.w-sm { width: 150px; }

/* Flat Marketplace panels + forms on these pages */
.buyer-page .panel {
  background: #fff;
  border: 1px solid #dee5e7;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  margin-bottom: 18px;
  overflow: visible;
}
.buyer-page .panel-heading {
  padding: 10px 15px;
  background: #f6f8f8;
  border-bottom: 1px solid #edf1f2;
  font-size: 14px;
  color: #58666e;
}
.buyer-page .panel-body { padding: 15px; }

.buyer-page .form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #58666e;
  background-color: #fff;
  border: 1px solid #cfdadd;
  box-shadow: none;
}
.buyer-page .form-control:focus { border-color: #23b7e5; box-shadow: none; outline: 0; }

/* Downloads list (list-group) */
.buyer-page .list-group { padding-left: 0; margin-bottom: 20px; list-style: none; }
.buyer-page .list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #e7ecee;
  font-size: 14px;
}
.buyer-page .list-group-item:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.buyer-page .list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; }
.buyer-page .list-group-lg .list-group-item { padding-top: 15px; padding-bottom: 15px; }

/* Item thumb + rounded corners */
.thumb-sm { width: 40px; height: 40px; object-fit: cover; }
.r { border-radius: 2px; }
.r-2x { border-radius: 4px; }

/* Buttons */
.buyer-page .btn-primary {
  color: #ffffff !important;
  background-color: #7266ba;
  border-color: #7266ba;
  border-radius: 2px;
}
.buyer-page .btn-primary:hover, .buyer-page .btn-primary:focus {
  background-color: #6254b2;
  border-color: #5a4daa;
  color: #ffffff !important;
}
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 2px; }

/* Status labels */
.buyer-page .label {
  display: inline-block;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #58666e;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 2px;
}
.buyer-page .label svg { vertical-align: -2px; }
.buyer-page .bg-light { background-color: #edf1f2; }
.buyer-page .bg-light.dker, .buyer-page .bg-light .dker { background-color: #dde6e9; }
/* Page-header band on buyer pages (Downloads / Orders / ...) keeps the
   SAME background as the rest of the site (e.g. /badges uses #f6f8f8);
   without this the .buyer-page .bg-light override above darkens it. */
.buyer-page .b-b.bg-light.lter, .buyer-page .b-b .bg-light.lter { background-color: #f6f8f8; }

/* Orders table — Marketplace flat striped table */
.buyer-page .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  background: #fff;
  border: 0;
  border-collapse: collapse;
}
.buyer-page .table th,
.buyer-page .table td {
  padding: 8px 15px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #eaeff0;
  border-bottom: 0;
  text-align: left;
  font-size: 13.5px;
  color: #58666e;
  background: transparent;
}
.buyer-page .table th {
  border-bottom: 1px solid #eaeff0;
  font-weight: 600;
  background: transparent;
}
.buyer-page .table-striped tbody tr:nth-child(odd) td { background: #fafbfc; }
.buyer-page .table tbody tr { transition: none; }
.buyer-page .table tbody tr:hover td { background: #f5f7ff; }

/* Bootstrap-style no-op variants used by the Marketplace markup
   (.panel-default = same white panel; .label-default = neutral chip) */
.panel-default { background: #fff; }
.label-default { background: #f1f3f4; color: #58666e; }

/* ============================================================
   Profile Shop tab (Marketplace /{username}/shop) — 2026-08-29
   Toolbar (results count / sort select / grid-list toggle),
   grid view = item-panel cards, list view = 160px rows.
   ============================================================ */
.col-xs-6 { width: 50%; float: left; }
.btn-group { position: relative; display: inline-block; vertical-align: middle; }
.btn-group .btn { float: left; position: relative; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn.active { background: #edf1f2; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.fa-th:before { content: "\f009"; }
.fa-bookmark:before { content: "\f02e"; }

/* Marketplace label chips (NEW / Popular on the shop list view) */
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }
.bg-success { background-color: #27c24c !important; }
.bg-danger { background-color: #f05050 !important; color: #ffffff; }
.b-success { border-color: #27c24c !important; }

/* Round 89: Wishlist count pill in the account menus — Marketplace
   same-to-same. The dropdown/mobile links are flex rows, so the
   label is pushed right with margin-left:auto instead of float, and
   gets the light pill look (.bg-light on a white .label = invisible
   white text before this rule). Border-radius stays the .label
   default 0.25em (user preference, round 105/107). */
.dd-menu li > a .label.bg-light,
.m-profile-menu a .label.bg-light {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #58666e;
  background-color: #edf1f2;
}

/* List view — Marketplace list row (/categories/all/?view=list): the 320x160
   preview fills the left side of the 160px row; on the right are the title,
   category icon + name, small stars + NEW/Popular label and the short
   description. The big price chip is top-right and the bookmark/like buttons
   sit directly underneath it. */
.w-xl { width: 320px; }
.item-listing-title-listview { display: flex; align-items: stretch; height: 160px; overflow: hidden; }
.item-listing-title-listview > a { flex: 0 0 320px; width: 320px; }
.item-listing-title-listview .w-xl { display: block; width: 320px; max-width: 320px; height: 160px; object-fit: cover; }
.item-listing-title-listview h2 { margin: 0; }
.item-listing-title-listview .cl-lv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 13px 18px 12px 0; }
.item-listing-title-listview .cl-lv-title { line-height: 1.3; }
/* Title keeps its own full line (nothing beside it, Marketplace). Under it a
   second row: item info (category/stars/desc) on the left and the price +
   bookmark/like column on the right — price BELOW the title line. */
.item-listing-title-listview .cl-lv-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 6px; min-width: 0; }
.item-listing-title-listview .cl-lv-info { flex: 1 1 auto; min-width: 0; }
.item-listing-title-listview .cl-lv-cat img { vertical-align: middle; }
.item-listing-title-listview .cl-lv-starsrow { margin-top: 7px; }
.item-listing-title-listview .hp-stars img { vertical-align: -2px; }
.item-listing-title-listview .label { color: #fff; }
.item-listing-title-listview .label.text-muted { color: #98a6ad; background: transparent; }
.item-listing-title-listview .cl-lv-desc { max-width: 540px; line-height: 1.45; }
.item-listing-title-listview .cl-lv-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.item-listing-title-listview .cl-lv-price .btn { white-space: nowrap; padding: 9px 16px; line-height: 1.5; }
.item-listing-title-listview .cl-lv-price .label { vertical-align: middle; }
.item-listing-title-listview .cl-lv-icons { margin-top: 20px; white-space: nowrap; }
.shop-toolbar .form-inline { justify-content: flex-end; }
/* Shop/profile toolbar must be ONE aligned row on PC: results count on the
   left; sort dropdown + grid/list icons on the right at the same height.
   The sort select is Bootstrap .form-control (block, width:100%) — inside
   the toolbar only it becomes inline/auto-width so the icons don't drop
   to a second line. */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; }
.shop-toolbar .col-xs-6 { width: auto; }
.shop-toolbar .col-xs-6.text-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.shop-toolbar .form-inline,
.shop-toolbar .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.shop-toolbar .form-inline .form-control { padding: 6px 14px; }
.shop-toolbar .btn-group { display: inline-block; vertical-align: middle; margin-left: 0; }
.shop-toolbar .btn-group .btn { height: 34px; }
@media (max-width: 767px) {
  .item-listing-title-listview { flex-wrap: wrap; height: auto; min-height: 0; }
  .item-listing-title-listview > a { flex: 0 0 100%; width: 100%; }
  .item-listing-title-listview .w-xl { width: 100%; height: auto; max-width: none; }
  .item-listing-title-listview .cl-lv-body { flex: 0 0 100%; padding: 12px 14px 0; }
  .item-listing-title-listview .cl-lv-main { display: block; margin-top: 8px; }
  .item-listing-title-listview .cl-lv-cat,
  .item-listing-title-listview .cl-lv-starsrow { margin-top: 6px; }
  .item-listing-title-listview .cl-lv-side { flex: 0 0 100%; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; padding: 8px 14px 12px; }
  .item-listing-title-listview .cl-lv-icons { margin-top: 0; margin-left: auto; }
  .shop-toolbar .col-xs-6 { width: 100%; float: none; margin-bottom: 8px; }
  .shop-toolbar .form-inline { justify-content: flex-start; }
}

/* ============================================================
   Collections + Wishlist (Marketplace) — ribbons, collection
   cards, item-panel cards, bookmark modal, sort select.
   ============================================================ */
.main-content { min-height: 420px; }
.cl-page { min-height: 420px; }
.cl-page .form-control { height: 34px; padding: 6px 12px; box-shadow: none; }
.bg-white { background: #fff; }
.btn-md { padding: 10px 16px; font-size: 14px; }
.clear { clear: both; }
.item { display: block; }
.item-listing-extra { display: block; }
.bookmark-button { display: block; }
.link-base a { color: #363f44; }

/* --- Grid widths missing from the flex .row system --- */
.col-xs-12 { width: 100%; }
.col-sm-4 { width: 33.33333333%; }
.col-sm-12 { width: 100%; }
.col-md-4 { width: 33.33333333%; }
.col-md-5 { width: 41.66666667%; }
.col-md-7 { width: 58.33333333%; }
.col-md-8 { width: 66.66666667%; }
.row-sm { margin-left: -8px; margin-right: -8px; }
.row-sm > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

/* Round 89: Marketplace Followers/Following counter panel — the app has
   no .hbox, so the exact Marketplace table-layout rules are added here
   (hbox = two equal table cells, no underline, padder-v spacing). */
.hbox { display: table; width: 100%; height: 100%; border-spacing: 0; table-layout: fixed; }
.hbox .col { display: table-cell; float: none; height: 100%; vertical-align: top; }

/* Round 89: followers/following cards — responsive like Marketplace.
   The app's .col-md-4 is defined WITHOUT a media query (33% at every
   size), so without this override phones would show 3 tiny cards per
   row. Marketplace: 1 per row on phones, 2 on tablets, 3 on desktop. */
.follow-grid > .col-md-4 { width: 100%; }
@media (min-width: 768px) and (max-width: 991px) {
  .follow-grid > .col-md-4 { width: 50%; }
}
@media (min-width: 992px) {
  .follow-grid > .col-md-4 { width: 33.33333333%; }
}
.visible-lg, .visible-md { display: block !important; }
@media (max-width: 991px) { .visible-lg, .visible-md { display: none !important; } }

/* --- Utilities used by the Marketplace markup --- */
.clearfix::after { content: ""; display: table; clear: both; }
.text-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-l { margin-left: 15px; }
.m-b-n-md { margin-bottom: -20px; }
.m-t-n-xl { margin-top: -40px; }
.m-t-n-xs { margin-top: -5px; }
.m-l-n-xs { margin-left: -5px; }
.m-l-n-md { margin-left: -20px; }
.w-xxs { width: 60px; }
.wrapper-lg { padding: 30px; }
.b-n { border: none; }
.h5 { font-size: 14px; }
/* .h-xs stays 90px globally (profile hero); the thin author strip on the
   collection page uses a scoped 30px variant (Marketplace h-xs = 30px) */
.cl-page .h-xs { height: 30px; }
.b-4x { border-width: 4px; }
.b-info { border-color: #23b7e5; }
.thumb-lg { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; }
.profile-avatar-sm { border-radius: 2px; object-fit: cover; }
.img-full { width: 100%; display: block; }
.no-gutter { margin-left: 0; margin-right: 0; }

/* --- Ribbons (PRIVATE / WISHLIST) --- */
.ribbon { position: absolute; top: 12px; left: -5px; z-index: 30; }
.ribbon::before { content: ""; position: absolute; left: 0; top: 100%; border: 5px solid transparent; border-left-color: rgba(0, 0, 0, .35); border-right: 0; }
.ribbon span { position: relative; display: block; padding: 4px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: #fff; text-transform: uppercase; border-radius: 0 3px 3px 0; }
.ribbon-success span { background: #27c24c; }
.ribbon-danger span { background: #f05050; }

/* --- Collection cards (profile Collections tab) --- */
.cl-col-card { height: 265px; overflow: hidden; margin-bottom: 0; }
.cl-col-card .pos-rlt { height: 118px; overflow: hidden; background: #232a31; }
.cl-col-card .pos-rlt .img-full { width: 100%; height: 100%; object-fit: cover; }
.cl-col-card h2 { margin: 0; padding: 0; font-size: 14px; line-height: 1.3; }
.cl-col-card .text-muted { color: #98a6ad; }

/* --- Marketplace item-panel card (collection page grid) --- */
.item-panel { margin-bottom: 20px; overflow: hidden; }
.item-panel .pos-rlt { background: #1c2b36; }
.item-panel .img-full { min-height: 120px; object-fit: cover; }
.item-header-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
/* Round 137: the card badge chip sits at the BOTTOM-RIGHT corner of the
   small preview image — exact Marketplace .item-label rules: right:0;
   bottom:0, a 100x32 overflow-hidden box whose span is an 80px block
   flush to the bottom-right corner (uppercase 10px, 20px line-height). */
.item-label { position: absolute; top: auto; left: auto; right: 0; bottom: 0; z-index: 20; overflow: hidden; width: 100px; height: 32px; text-align: right; pointer-events: none; }
.item-label span { position: absolute; top: 12px; right: 0; display: block; width: 80px; padding: 0; border-radius: 0; box-shadow: none; line-height: 20px; font-size: 10px; font-weight: bold; color: #fff; text-transform: uppercase; text-align: center; }
/* Popular / Featured / NEW colours — Marketplace bg-danger / bg-info / bg-success */
.item-label .bg-danger { background: #f05050; }
.item-label .bg-info { background: #23b7e5; }
.item-label .bg-success { background: #27c24c; }
/* Round 138: .fa-file glyph was missing from the subset FontAwesome
   stylesheet — the Featured badge icon (fa fa-file) rendered blank. */
.fa-file:before { content: "\f15b"; }
.item-price-button { color: #7266ba !important; font-weight: 700; }
.btn-icon { padding: 5px 9px; font-size: 13px; line-height: 1; border-radius: 2px; }
.like-button-holder { display: inline-block; }
.like-button .fa, .like-button svg { vertical-align: -2px; }
.like-button.text-success, .like-button.text-success .fa, .like-button.text-success svg { color: #27c24c !important; }
.cl-busy { opacity: .5; pointer-events: none; }

/* ==========================================================================
   ROUND 136 (2026-09-02) — regular Marketplace card polish. The old
   "modern" .item-panel rules (14px --radius + lift hover + purple price
   chip + w-sm 150px like button) leaked into cl_card() markup. Marketplace
   cards are flat, with a SQUARE full-bleed cover, one chip badge at the
   cover's bottom-right (Round 137: corrected from top-left), a
   white-veil hover over the IMAGE ONLY, and equal 30px bookmark/like/
   video icon buttons.
   ========================================================================== */

/* Square cover: kill the 14px radius clip + card lift/shadow. Marketplace's
   panel is flat with a 2px border (bootstrap .panel default). */
.item-panel { border-radius: 2px; box-shadow: none; }
.item-panel:hover { transform: none; box-shadow: none; }
.item-panel .item .img-full { border-radius: 0 !important; }

/* Hover = very light white veil over the cover image only (Marketplace
   .item-header-overlay). No whole-card effect. Round 139: softened from
   rgba(255,255,255,.45) to .1 — the old veil felt too heavy/washed out. */
.item-panel .item .item-header-overlay {
  background: rgba(255, 255, 255, 0);
  -webkit-transition: background .18s ease;
  transition: background .18s ease;
}
.item-panel .item:hover .item-header-overlay { background: rgba(255, 255, 255, .1); }

/* Badge chip: bottom-right over the cover, flat (no pill / drop shadow).
   Round 137 — position is handled by the Marketplace .item-label rules in
   the item-panel section above; keep the generic pill/box-shadow off. */
.item-label .bg-danger,
.item-label .bg-info,
.item-label .bg-success { box-shadow: none; }

/* Bookmark / Like / Video — identical 30px square buttons (Marketplace).
   Neutralises the inherited .w-sm { width:150px } on the like button. */
.item-panel .btn-icon,
.item-listing-title-listview .btn-icon,
.like-button-holder .btn-icon { width: 30px; height: 30px; padding: 0; text-align: center; }
.item-panel .btn-icon i,
.item-listing-title-listview .btn-icon i,
.like-button-holder .btn-icon i { line-height: 30px; font-size: 14px; }
.item-panel .like-button i { margin-right: 0 !important; } /* kill the fa m-r-xs offset */

/* Price chip text = Marketplace dark slate, never the old brand purple.
   Round 142: only the plain (default) chip keeps dark slate — the red
   flash-sale chip and green Free chip keep white text like Marketplace. */
.item-price-button:not(.btn-danger):not(.btn-success) { color: #58666e !important; }

/* Stars — identical 13px set on every card row */
.item-listing-extra .hp-stars { vertical-align: -6px; }
.item-listing-extra .hp-stars svg { width: 13px; height: 13px; }

/* --- SERVICE CARD: the provider + rating row -------------------------
   Marketplace's own service card prints a small rounded avatar, the provider's
   name beside it and the star set on the right — all on ONE line.

   user_avatar_html() emits no width/height, so the avatar was sized only by
   the box it happened to land in, and both boxes were wrong:
     grid — the 40px .thumb-sm slot (plus the global `img { max-width: 100% }`)
            printed a 40x40 avatar, taller than the row it sat in, and the name
            — an inline element, so its margin-top was a no-op — rode 11px
            above the avatar instead of sitting level with it;
     list — no box at all, so the 200x200 default/uploaded avatar printed at
            FULL SIZE and stretched the whole row to 200px tall.
   The sizes are pinned here and the row is laid out with flex, so the avatar,
   the name and the stars share ONE centre line instead of depending on floats.

   Scoped on the .svc-author-* hooks, which ONLY the service card emits: an
   item card never receives them, so no other card can shift. */
.svc-author-av { width: 20px; height: 20px; object-fit: cover; }
.svc-author-av.av-fallback { display: inline-flex; align-items: center;
  justify-content: center; font-size: 10px; line-height: 1; }
/* The avatar's own box, so the slot is exactly as tall as the line it is on. */
.svc-author-box { display: flex; align-items: center; }
.svc-author-box .thumb-sm { width: 20px; height: 20px; }
.svc-author-box .thumb-sm a { display: block; line-height: 0; }
.svc-author-box .svc-author-av { display: block; }
.svc-author-name { margin-left: 6px; }
.svc-author-rating { line-height: 20px; }
/* List view: 16x16 — the same size the item card gives its own list-row icon. */
.svc-author-av-list { width: 16px; height: 16px; }
/* Round 133 — "Add to collection" bookmark modal, Marketplace-exact look:
   dark backdrop, white rounded box, bordered scrollable collection list
   (folder/heart icon | name | green check / grey dash), then the
   "Collection name" input + Public checkbox + Create button row, and a
   footer with Close. The AJAX partial is injected into .bm-box. */
.bm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 2000;
  display: none; align-items: center; justify-content: center; padding: 16px; }
.bm-overlay.show { display: flex; }
.bm-box { background: #fff; border-radius: 6px; width: 100%; max-width: 600px;
  border: 1px solid #d8dde1; box-shadow: 0 12px 50px rgba(0, 0, 0, .4); overflow: hidden; }
.bm-box .modal-header { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #e6eaed; background: #f7f8fa; }
.bm-box .modal-title { font-size: 15px; font-weight: 600; color: #363f44; margin: 0; }
.bm-box .close { border: 0; background: none; font-size: 22px; line-height: 1; color: #98a6ad; cursor: pointer; }
.bm-box .close:hover { color: #363f44; }
.bm-box .modal-body { padding: 14px 16px 8px; }
.bm-box .modal-footer { padding: 12px 16px; border-top: 1px solid #e6eaed; text-align: right; }
/* Collection list: bordered inner box with scroll (Marketplace) */
.bm-box .list-group { border: 1px solid #e2e6e9; border-radius: 3px; background: #fff;
  margin: 0 0 12px; overflow-y: auto; }
.bm-box .list-group-item { display: flex; align-items: center; padding: 9px 12px;
  color: #363f44; text-decoration: none; border-bottom: 1px solid #f0f2f4; }
.bm-box .list-group-item:last-child { border-bottom: 0; }
.bm-box .list-group-item:hover { background: #f8fafb; }
/* Row order (Marketplace): folder/heart icon LEFT, name middle, the
   green check / grey dash status RIGHT of each row. */
.bm-box .list-group-item .pull-left { order: 1; display: inline-flex; align-items: center; margin-right: 10px; }
.bm-box .list-group-item > span:not(.pull-left):not(.pull-right) { order: 2; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-box .list-group-item .pull-right { order: 3; margin-left: auto; display: inline-flex; align-items: center; }
.bm-box .text-danger { color: #f05050; }
.bm-box .text-muted { color: #98a6ad; }
.bm-box .text-success { color: #27c24c; }
.bm-box .cl-heart { color: #f05050; }
.bm-box .cl-folder { color: #98a6ad; }
.bm-box .cl-check { color: #27c24c; }
.bm-box .cl-minus { color: #b9c2c9; }
.bm-box .cl-check, .bm-box .cl-minus, .bm-box .cl-heart, .bm-box .cl-folder { display: inline-flex; vertical-align: -2px; }
/* Create area: input | Public | Create on one row (Marketplace form-inline) */
.bm-box form.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bm-box form.form-inline .form-group { margin: 0; }
.bm-box form.form-inline .form-control { padding: 7px 10px; font-size: 13px;
  border: 1px solid #d4dade; border-radius: 3px; width: 300px !important; max-width: 100%; }
.bm-box form.form-inline .form-control:focus { border-color: #23b7e5; outline: 0; }
.bm-box .checkbox { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #58666e; margin: 0; }
.bm-box .checkbox input { margin: 0; }
.bm-box form.form-inline .btn { margin-left: auto; }
.bm-box .modal-body .clearfix { width: 100%; }
/* Round 134b — card video modal (Marketplace lightbox-style): dark overlay,
   responsive 16:9 YouTube embed that fits any screen width. */
.vb-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .82); z-index: 2100;
  display: none; align-items: center; justify-content: center; padding: 14px; }
.vb-overlay.show { display: flex; }
.vb-box { position: relative; width: 100%; max-width: 880px; background: #000;
  border-radius: 6px; overflow: hidden; box-shadow: 0 18px 60px rgba(0, 0, 0, .6); }
.vb-frame { position: relative; width: 100%; padding-top: 56.25%; }
.vb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vb-close { position: absolute; top: 8px; right: 10px; z-index: 2; width: 32px; height: 32px;
  background: rgba(0, 0, 0, .6); border: 0; border-radius: 50%; color: #fff; font-size: 20px;
  line-height: 1; cursor: pointer; }
.vb-close:hover { background: rgba(0, 0, 0, .85); }

/* --- Add-to-collection modal --- */
.cl-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 12px; }
.cl-modal { background: #fff; width: 540px; max-width: 100%; border-radius: 4px; box-shadow: 0 6px 30px rgba(0, 0, 0, .3); }
.modal-header { padding: 14px 18px; border-bottom: 1px solid #edf1f2; position: relative; }
.modal-title { margin: 0; font-size: 16px; font-weight: 700; color: #363f44; }
.modal-header .close { position: absolute; right: 14px; top: 10px; border: 0; background: none; font-size: 22px; line-height: 1; color: #98a6ad; cursor: pointer; }
.modal-header .close:hover { color: #58666e; }
.modal-body { padding: 16px 18px; }
.modal-footer { padding: 12px 18px; border-top: 1px solid #edf1f2; text-align: right; }
.modal-footer .btn { margin-left: 6px; }

/* modal collection list (Marketplace .list-group inside the modal) */
.cl-modal .list-group { padding-left: 0; margin-bottom: 16px; list-style: none; }
.cl-modal .list-group-item { position: relative; display: block; padding: 10px 12px; background: #fff; border-top: 1px solid #edf1f2; border-bottom: 1px solid #edf1f2; margin-bottom: -1px; font-size: 13.5px; color: #58666e; text-decoration: none; cursor: pointer; }
.cl-modal .list-group-item:first-child { border-top: 0; }
.cl-modal .list-group-item:hover { background: #f6f8f8; }
.pre-scrollable { max-height: 310px; overflow-y: auto; }
.cl-modal .cl-check { color: #27c24c; }
.cl-modal .cl-minus { color: #cfdadd; }
.cl-modal .cl-heart { color: #f05050; }
.cl-modal .cl-folder { color: #98a6ad; }
.cl-modal .cl-check svg, .cl-modal .cl-minus svg, .cl-modal .cl-heart svg, .cl-modal .cl-folder svg { vertical-align: -2px; }

/* create-collection form */
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.i-checks { position: relative; padding-left: 22px; cursor: pointer; display: inline-block; font-size: 13.5px; color: #58666e; }
.i-checks input { position: absolute; opacity: 0; }
.i-checks i { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border: 1px solid #cfdadd; border-radius: 2px; background: #fff; }
.i-checks input:checked + i { background: #7266ba; border-color: #7266ba; }
.i-checks input:checked + i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ============================================================
   Upload flow (Marketplace /upload, /upload/form, /info/upload)
   ============================================================ */
.upload-page { min-height: 420px; }
.upload-page .form-control { box-shadow: none; }
.upload-page .form-control:focus { border-color: #23b7e5; }

/* Grid widths used by the upload pages (flex .row system) */
.col-sm-7 { width: 58.33333333%; }
.col-sm-8 { width: 66.66666667%; }
.col-sm-5 { width: 41.66666667%; }
.col-lg-2 { width: 16.66666667%; }
.col-lg-10 { width: 83.33333333%; }
.col-sm-2 { width: 16.66666667%; }
.col-sm-10 { width: 83.33333333%; }
.col-sm-offset-2 { margin-left: 16.66666667%; }
.bg-white-only { background-color: #fff; }
.list-unstyled { padding-left: 0; list-style: none; margin-top: 0; margin-bottom: 10px; }
.line-lg { margin-top: 15px; margin-bottom: 15px; }
.m-b-n { margin-bottom: -15px; }
.m-t-n { margin-top: -15px; }
.w-full { width: 100%; }
.upload-page select option.placeholder { color: #98a6ad; }
.upload-page .ajaxinput { max-width: 100%; }

/* Marketplace form-horizontal layout */
.upload-page .form-group { display: flex; flex-wrap: wrap; margin-bottom: 15px; }
/* Bootstrap gutter: the label column and the field column both get
   15px side padding, so the right-aligned label never touches the input
   (fixes the cramped/overlapping label+field look on PC and mobile). */
.upload-page .form-group > [class*="col-"] { padding-left: 15px; padding-right: 15px; }
/* Marketplace alignment: their upload form has NO form-horizontal wrapper, so
   the Bootstrap right-align rule never applies — labels stay LEFT-aligned
   at the top of their column (font-weight normal, no padding-top). */
.upload-page .control-label { margin-top: 0; margin-bottom: 0; padding-top: 0; text-align: left; color: #58666e; font-weight: normal; }
.upload-page .control-label.m-t-md { margin-top: 20px; }
.upload-page .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #98a6ad; font-size: 12.5px; }
.upload-page .panel-default { border-color: #dee5e7; }
.upload-page .panel-default > .panel-heading { background-color: #f6f8f8; border-color: #edf1f2; color: #363f44; }
.upload-page textarea.form-control { min-height: 120px; }
.upload-page .link-info a, .upload-page .panel a { color: #19a9d5; }

/* Alerts (Marketplace) */
.upload-page .alert { position: relative; display: block; padding: 12px 40px 12px 15px; margin-bottom: 15px; border: 1px solid transparent; border-radius: 2px; font-size: 13px; line-height: 1.55; }
.upload-page .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.upload-page .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.upload-page .alert a { color: #19a9d5; }

/* Drag & drop zone */
.dm-uploader { border: 2px dashed #cfdadd; border-radius: 4px; padding: 24px 15px; text-align: center; background: #fff; }
.dm-uploader.dm-active { border-color: #23b7e5; background: #f6f8f8; }
.dm-uploader h3 { margin: 0 0 12px; font-size: 16px; font-weight: 400; color: #98a6ad; }
.dm-uploader .btn { position: relative; overflow: hidden; }
.dm-uploader .btn input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-5 { margin-bottom: 5px; }
.mt-5 { margin-top: 5px; }

/* Uploaded file list */
.upload-page #files li.media { padding: 8px 0; border-bottom: 1px dashed #edf1f2; font-size: 13px; }
.upload-page #files li.media:last-child { border-bottom: 0; }
.upload-page #files .empty { padding: 10px 0; }
.upload-page .line-dashed { border-style: dashed !important; }

/* Attribute checkbox groups */
.upload-page #attribute_fields .form-group { display: flex; flex-wrap: wrap; }
.upload-page #attribute_fields .col-lg-10 { display: flex; flex-wrap: wrap; }
.upload-page #attribute_fields .col-sm-3 { width: 25%; margin-bottom: 4px; font-size: 13px; }
.upload-page #attribute_fields input[type="checkbox"] { margin-right: 5px; vertical-align: -1px; }

/* Pending confirmation page */
.up-check { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #27c24c; color: #fff; margin-right: 8px; vertical-align: middle; }

/* ============================================================
   Upload flow — Marketplace same-to-same fixes (2026-08-28):
   - mobile responsive (columns stack like Marketplace)
   - "Trouble Uploading" sidebar is PC only (≥992px)
   - file-item progress bar (purple striped → green 100%)
   - labels stack above fields below 1200px (Marketplace col-lg grid)
   ============================================================ */

/* Form wraps col-sm-9 exactly like Marketplace; display:contents lets the
   flex .row place col-sm-9 + sidebar side by side on desktop. */
.upload-page .row > form { display: contents; }

/* "Trouble Uploading" sidebar: PC only, hidden on tablet + mobile */
.upload-page .trouble-sidebar { display: none !important; }
@media (min-width: 992px) {
  .upload-page .trouble-sidebar { display: block !important; }
}

/* Marketplace col-lg-* grid: below 1200px the col-lg rows stack the label
   above the field (still left-aligned, 4px breathing room). */
@media (max-width: 1199px) {
  .upload-page .col-lg-2, .upload-page .col-lg-10 { width: 100%; }
  .upload-page .control-label { margin-bottom: 4px; }
}

/* Mobile: all upload columns stack full width (Marketplace grid behavior) */
@media (max-width: 767px) {
  .col-sm-2, .col-sm-4, .col-sm-5, .col-sm-7, .col-sm-8, .col-sm-10, .col-sm-12 { width: 100%; }
  .upload-page #attribute_fields .col-sm-3 { width: 100%; }
}

/* Uploader progress bar (Marketplace dm-uploader file items) */
.upload-page .progress { height: 20px; margin-bottom: 8px; overflow: hidden; background-color: #edf1f2; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); }
.upload-page .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #428bca; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); transition: width .6s ease; }
.upload-page .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 40px 40px; }
.upload-page .progress-bar-animated { animation: progress-bar-stripes 2s linear infinite; }
@keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }
.upload-page .progress-bar.bg-primary { background-color: #7266ba; }
.upload-page .progress-bar.bg-success { background-color: #27c24c; }
.text-uploading { color: #98a6ad; }
.upload-page hr { border: 0; border-top: 1px solid #edf1f2; margin: 4px 0; }
.mt-1 { margin-top: 4px; }

/* ---------- Marketplace-style rich text editor (Redactor look-alike) ---------- */
.redactor-box { position: relative; margin-bottom: 6px; }
.redactor-box textarea.wysiwyg { display: none; }
.redactor-toolbar { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #dee5e7; border-bottom: 0; display: flex; flex-wrap: wrap; }
.redactor-toolbar li { display: inline-block; }
.redactor-toolbar .re-button { display: block; padding: 9px 14px; font-size: 13px; line-height: 1; color: #333; border-right: 1px solid #e3e9eb; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none !important; }
.redactor-toolbar .re-button:hover { background: #3d79f2; color: #fff; }
.redactor-toolbar .re-button.redactor-act, .redactor-toolbar .re-button[aria-expanded="true"] { background: #f2f2f2; color: #444; }
.redactor-voice-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.redactor-editor { min-height: 120px; padding: 12px 14px; border: 1px solid #dee5e7; background: #fff; font-size: 14px; line-height: 1.6; color: #58666e; outline: none; overflow-y: auto; }
.redactor-editor:empty:before { content: attr(data-placeholder); color: #98a6ad; pointer-events: none; }
.redactor-editor p { margin: 0 0 10px; }
.redactor-editor h3, .redactor-editor h4 { margin: 12px 0 8px; color: #3a3f51; }
.redactor-editor blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid #dee5e7; color: #657187; }
.redactor-editor pre { background: #edf1f2; padding: 10px 12px; border-radius: 3px; overflow-x: auto; }
.redactor-editor code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; }
.redactor-editor a { color: #23b7e5; text-decoration: underline; cursor: pointer; }
.redactor-editor iframe { max-width: 100%; border: 1px solid #dee5e7; }
.redactor-source { display: none; width: 100%; margin: 0; box-sizing: border-box; background: #111; color: rgba(255,255,255,.8); font-size: 14px; outline: none; padding: 16px; line-height: 22px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; min-height: 121px; border: 1px solid #111; resize: vertical; }
.redactor-box.source-mode .redactor-editor { display: none; }
.redactor-box.source-mode .redactor-source { display: block; }
.redactor-box.source-mode .re-html { background: #edf1f2; color: #141719; }
.redactor-dropdown { position: absolute; top: 100%; left: 0; z-index: 1050; display: block; min-width: 170px; background: #fff; border: 1px solid #dee5e7; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.redactor-dropdown a { display: block; padding: 8px 14px; font-size: 13px; color: #58666e; text-decoration: none !important; border-bottom: 1px solid #f1f4f5; }
.redactor-dropdown a:hover { background: #f6f8f8; color: #141719; }

/* Marketplace validation alert (upload form) — red alert with the error list */
.upload-page .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.upload-page .alert-danger ul { margin: 4px 0 0 18px; padding: 0; }
.upload-page .alert .close { position: absolute; top: 10px; right: 12px; float: none; font-size: 21px; font-weight: bold; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; text-decoration: none !important; margin: 0; }
.upload-page .alert .close:hover { opacity: .5; }

/* Redactor-style Video modal (Marketplace) */
#redactor-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); z-index: 1052; }
#redactor-modal-box { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow-x: hidden; overflow-y: auto; z-index: 1053; }
#redactor-modal { position: relative; margin: 250px auto; width: 620px; max-width: 94%; padding: 0; background: #fff; color: #000; border-radius: 5px; box-shadow: 0 4px 20px rgba(0,0,0,.35); font-family: Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif; font-size: 14px; }
#redactor-modal #redactor-modal-header { padding: 14px 24px; font-size: 11px; text-transform: uppercase; font-weight: bold; color: rgba(0,0,0,.5); }
#redactor-modal #redactor-modal-close { position: absolute; top: 0; right: 0; width: 30px; height: 40px; text-align: center; color: rgba(0,0,0,.4); font-size: 20px; font-weight: 300; cursor: pointer; border: 0; background: none; outline: none; }
#redactor-modal #redactor-modal-close:hover { color: #000; }
#redactor-modal #redactor-modal-body { padding: 32px 40px 28px; }
#redactor-modal #redactor-modal-body section { margin-bottom: 18px; }
#redactor-modal #redactor-modal-body label { font-weight: bold; font-size: 12px; display: block; margin-bottom: 6px; }
#redactor-modal #redactor-modal-body textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 3px; background: #fff; color: #333; font-size: 14px; font-family: Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif; resize: vertical; }
#redactor-modal #redactor-modal-body textarea:focus { outline: none; border-color: #aaa; }
/* Insert-link modal inputs (Marketplace redactor) */
#redactor-modal #redactor-modal-body input[type="url"],
#redactor-modal #redactor-modal-body input[type="text"] { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 3px; background: #fff; color: #333; font-size: 14px; font-family: Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif; }
#redactor-modal #redactor-modal-body input:focus { outline: none; border-color: #aaa; }
#redactor-modal #redactor-modal-body label.checkbox { display: flex; align-items: center; gap: 7px; font-weight: normal; cursor: pointer; }
#redactor-modal #redactor-modal-body label.checkbox input { width: auto; margin: 0; }
/* Images & videos inside the editor (Marketplace redactor figure/figcaption) */
.redactor-editor figure { margin: 0 0 12px; text-align: center; }
.redactor-editor figure img { max-width: 100%; height: auto; cursor: pointer; }
.redactor-editor .video-container { text-align: center; margin: 0 0 12px; }
/* Desktop: fixed 640×360 (as before). Mobile: full width with a true 16:9
   ratio via aspect-ratio — no stretching and no bad height on either. */
.redactor-editor .video-container iframe { width: 640px; max-width: 100%; height: 360px; }
@media (max-width: 767px) {
  .redactor-editor .video-container iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
.redactor-editor figcaption { font-size: 13px; color: #777; margin-top: 4px; }
/* Image edit modal layout (Marketplace) */
#redactor-modal #redactor-modal-body .redactor-modal-tab.redactor-group { display: flex; gap: 16px; align-items: flex-start; }
#redactor-modal #redactor-modal-body .redactor-modal-tab-side { flex: 0 0 130px; }
#redactor-modal #redactor-modal-body .redactor-modal-tab-side img { max-width: 100%; border: 1px solid #eee; }
#redactor-modal #redactor-modal-body .redactor-modal-tab-area { flex: 1; min-width: 0; }
#redactor-modal #redactor-modal-body button.redactor-modal-button-offset { margin-left: 24px; }
#redactor-modal button { padding: 13px 24px 14px 24px; margin: 0 8px 8px 0; height: 40px; outline: none; border: 1px solid transparent; background-color: #eee; color: #000; text-align: center; text-decoration: none; font-weight: normal; font-size: 13px; font-family: Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif; line-height: 1; cursor: pointer; }
#redactor-modal button:hover { color: #777; background: #ddd; text-decoration: none; }
#redactor-modal button#redactor-modal-button-action { background-color: #3d79f2; color: #fff; }
#redactor-modal button#redactor-modal-button-action:hover { background-color: #3263c6; color: rgba(255,255,255,.6); }
/* Delete button — Marketplace red outline + red text, red fill on hover */
#redactor-modal button#redactor-modal-button-delete { background: none; border-color: #f23d3d; color: #f23d3d; }
#redactor-modal button#redactor-modal-button-delete:hover { color: rgba(255,255,255,.6); background-color: #f23d3d; }
/* Link tooltip — Marketplace black box "URL | Edit | Unlink" when a link is clicked/selected */
.redactor-link-tooltip { position: absolute; z-index: 2000; display: flex; align-items: center; gap: 8px; background: #000; color: #fff; padding: 8px 12px; border-radius: 3px; font-size: 12px; font-family: Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.3); white-space: nowrap; }
.redactor-link-tooltip .t-url { color: #ddd; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.redactor-link-tooltip .sep { color: #888; }
.redactor-link-tooltip .t-edit, .redactor-link-tooltip .t-unlink { background: none; border: none; color: #fff; cursor: pointer; padding: 0; font-size: 12px; font-family: Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif; }
.redactor-link-tooltip .t-edit:hover, .redactor-link-tooltip .t-unlink:hover { text-decoration: underline; }
@media (max-width: 768px) {
  #redactor-modal #redactor-modal-body { padding: 20px; }
  #redactor-modal { margin-top: 180px; }
  /* Responsive modal layout: the image preview stacks ABOVE the fields
     instead of squeezing them sideways on a narrow screen */
  #redactor-modal #redactor-modal-body .redactor-modal-tab.redactor-group { flex-direction: column; gap: 14px; }
  #redactor-modal #redactor-modal-body .redactor-modal-tab-side { flex: none; width: 100%; }
  #redactor-modal #redactor-modal-body .redactor-modal-tab-side img { display: block; max-width: 100%; max-height: 180px; width: auto; height: auto; margin: 0 auto; }
}

/* ---------- Blog (Marketplace /blog) ---------- */
.blog-post h1 a { color: #363f44; }
.blog-post h1 a:hover { color: #141719; }
.blog-post .img-full { width: 100%; height: auto; display: block; }
.h-xs { line-height: 1.25; }
.blog-post .text-md { font-size: 15px; }
.blog-post .text-md p { margin: 0 0 14px; line-height: 1.65; }
.blog-post .text-md ul, .blog-post .text-md ol { margin: 0 0 14px; padding-left: 24px; }
.blog-post .text-md li { margin-bottom: 4px; }
.blog-post .text-md h2 { font-size: 21px; color: #3a3f51; margin: 24px 0 10px; }
.blog-post .text-md h3 { font-size: 18px; color: #3a3f51; margin: 22px 0 9px; }
.blog-post .text-md img { max-width: 100%; height: auto; }
.blog-post .text-md blockquote { border-color: #dee5e7; color: #657187; margin: 16px 0; }
.blog-post .text-md pre { background: #edf1f2; border-color: #dee5e7; padding: 10px 12px; overflow-x: auto; }
.blog-post .text-md code { background: #edf1f2; padding: 1px 5px; border-radius: 2px; }
/* Share buttons — Marketplace brand colors */
.btn-facebook { color: #fff !important; background-color: #3b5998; border-color: #3b5998; }
.btn-facebook:hover, .btn-facebook:focus { color: #fff !important; background-color: #334e84; border-color: #2f4779; }
.btn-twitter { color: #fff !important; background-color: #00aced; border-color: #00aced; }
.btn-twitter:hover, .btn-twitter:focus { color: #fff !important; background-color: #009ed9; border-color: #0092c9; }
.btn-linkedin { color: #fff !important; background-color: #007bb6; border-color: #007bb6; }
.btn-linkedin:hover, .btn-linkedin:focus { color: #fff !important; background-color: #006ba0; border-color: #006292; }
.btn-rss { color: #fff !important; background-color: #f26522; border-color: #f26522; }
.btn-rss:hover, .btn-rss:focus { color: #fff !important; background-color: #e25814; border-color: #d85210; }
/* Blog grid cards */
.blog-card .img-full { width: 100%; display: block; }
.blog-card .panel-body { padding: 15px 16px; }
.blog-card .panel-body h2 { font-size: 19px; line-height: 1.3; }
.blog-card .panel-body h2 a { color: #363f44; }
.blog-card .panel-body h2 a:hover { color: #141719; }
/* Pagination — Marketplace "1 2 3 … N Next" */
.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 2px; }
.pagination > li { display: inline; }
.pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #363f44; text-decoration: none; background-color: #fff; border: 1px solid #dee5e7; font-size: 13px; }
.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-radius: 2px 0 0 2px; }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 2px 2px 0; }
.pagination > li > a:hover, .pagination > li > span:hover { color: #141719; background-color: #edf1f2; border-color: #dee5e7; }
.pagination > .active > span, .pagination > .active > span:hover { z-index: 2; color: #fff; cursor: default; background-color: #23b7e5; border-color: #23b7e5; }
.pagination > li > a.next { font-weight: 700; }
.pagination-responsive { }
/* Blog sidebar */
.blog-side .panel.bg-black .panel-body { padding: 20px 18px; }
.blog-side .panel.bg-black .form-control { border-color: #cbd5e1; }
.blog-side .list-group { margin-bottom: 0; }
.blog-side .list-group-item { padding: 12px 15px; border-color: #e7ecee; }
.blog-side .list-group-item a { color: #363f44; }
.blog-side .list-group-item a:hover { color: #141719; }
.blog-side .list-group-item .icon-list, .blog-side .list-group-item .icon-calendar { color: #98a6ad; }
/* Newsletter mini panel on article pages */
.newsletter-mini .panel-body { padding: 20px 18px; }

/* ============================================================
   Upload-complete dashboard + license check
   (Marketplace author_dashboard replica) — 2026-08-28, round 34
   ============================================================ */
/* Round 44: the approval alert now has the × close button again (user
   request) — .alert-plain is position:static, so anchor the button inside
   .dash-alert and leave right padding for it. */
.dash-alert { display: block; position: relative; padding-right: 42px; }
.warn-ic { color: #f05050; margin-right: 6px; }
.minus-ic { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f05050; margin-right: 8px; vertical-align: middle; }
.text-wordbreak { word-wrap: break-word; }
/* Round 42: the sales-chart panel gets the Marketplace fixed height (h-xl),
   and the chart itself is a fixed 240px-tall flot-style replica
   (viewBox 640x240, centred in the panel). */
.h-xl { height: 320px; }
.sales-chart { display: block; width: 100%; max-width: 640px; height: 240px; margin: 0 auto; }
.sales-chart text { font-family: inherit; }
.license-form { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.license-form .form-control { max-width: 420px; }
.license-result table { width: 100%; max-width: 560px; border-collapse: collapse; }
.license-result th, .license-result td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eaeff0; font-size: 14px; }
.license-result th { color: #58666e; font-weight: 700; width: 110px; }

/* ============================================================
   Author Dashboard support thread (Marketplace "Support questions
   and comments" list-group) — 2026-08-28, round 40
   ============================================================ */
.ad-thread { padding-left: 0; margin-bottom: 20px; list-style: none; }
.ad-thread .list-group-item {
  position: relative;
  display: block;
  padding: 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #dee5e7;
  border-radius: 0;
  font-size: 14px;
}
.ad-thread .list-group-item:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.ad-thread .list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; }
.ad-thread .list-group-item.bg-light.lter { background-color: #f6f8f8; }
.ad-thread .thumb-md, .ad-thread .thumb-sm { display: inline-block; }
.ad-thread .thumb-md img, .ad-thread .thumb-sm img,
.ad-thread .thumb-md .avatar-img, .ad-thread .thumb-sm .avatar-img,
.ad-thread .thumb-md .av-fallback, .ad-thread .thumb-sm .av-fallback {
  width: 100%; height: auto; border-radius: 6px;
}
.ad-thread .thumb-md .av-fallback, .ad-thread .thumb-sm .av-fallback {
  display: block; text-align: center;
  line-height: 64px; font-size: 24px; font-weight: 700; color: #fff; background: #98a6ad;
}
.ad-thread .thumb-sm .av-fallback { line-height: 40px; font-size: 16px; }
.ad-thread .clear { display: block; overflow: hidden; }
.ad-thread .m-l-md { margin-left: 20px; }
.ad-thread .m-l-xxl { margin-left: 50px; }
.ad-thread .link-muted a, .ad-thread .link-muted { color: #98a6ad; }
.ad-thread .input-group { position: relative; display: table; border-collapse: separate; width: 100%; }
.ad-thread .input-group .form-control {
  position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0;
  display: table-cell; border-radius: 2px;
}
.ad-thread .input-group-btn { position: relative; display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; }
.ad-thread .input-group-btn .btn { margin-left: 8px; }
/* CSS-only hover dropdown (Report / Delete) — Bootstrap data-toggle not used */
.ad-dd { position: relative; display: inline-block; }
.ad-dd > .dropdown-toggle { display: inline-block; padding: 2px 4px; cursor: pointer; color: #98a6ad; }
.cd-dd > .dropdown-toggle { display: inline-block; cursor: pointer; }
.ad-dd-menu {
  position: absolute; top: 100%; right: 0; z-index: 1000;
  display: none; min-width: 140px; margin: 2px 0 0; padding: 5px 0;
  font-size: 14px; text-align: left; list-style: none;
  background-color: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
.ad-dd:hover .ad-dd-menu { display: block; }
.ad-dd-menu li { display: block; }
.ad-dd-menu li a { display: block; padding: 5px 15px; clear: both; color: #58666e; white-space: nowrap; }
.ad-dd-menu li a:hover { color: #141719; background-color: #edf1f2; }

/* ============================================================
   My Items list page (Marketplace /my-items replica) — 2026-08-28, round 35
   ============================================================ */
/* Round 46: status labels now match Marketplace's .label look — small
   radius (.25em), compact padding, no inherited form-label margin. */
.mi-label { display: inline-block; padding: .2em .6em .3em; border-radius: .25em; margin: 0; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; text-align: center; vertical-align: baseline; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.mi-label-warning { background-color: #f0ad4e; }
.mi-label-success { background-color: #5cb85c; }
.mi-label-danger  { background-color: #d9534f; }
.mi-label-default { background-color: #98a6ad; }
.thumb-xxs { display: inline-block; width: 30px; height: 30px; vertical-align: middle; }
.thumb-xxs img { width: 100%; height: 100%; object-fit: cover; }
.thumb-xxs.thumb-ph { background: #edf1f2; border-radius: 6px; }
/* Round 122 — /my-items Marketplace-exact table:
   - ONE row per item on PC AND mobile; on phones the table scrolls
     horizontally (Marketplace behaviour) instead of wrapping into many rows
   - icon column shows the item ICON (thumb-xxs, Marketplace)
   - comment / insights / edit buttons all uniform size, centered */
.mi-table { min-width: 880px; }
.mi-table th, .mi-table td { white-space: nowrap; }
.mi-table td { vertical-align: middle; }
.mi-table .mi-name { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.mi-table .mi-actions { white-space: nowrap; }
/* Buyer/user tables (e.g. /orders) — same Marketplace behaviour as the
   /my-items table: one row per entry on PC AND mobile; on phones the
   .table-responsive wrapper scrolls horizontally instead of wrapping. */
.tb-single { min-width: 780px; }
.tb-single th, .tb-single td { white-space: nowrap; }
.tb-single td { vertical-align: middle; }
/* Round 122b/c — Marketplace action buttons: chart + pencil are equal squares,
   the comment button grows just enough for the icon + count (Marketplace look).
   All share the same height, border and centered icon font-size. */
.mi-table .mi-actions .btn {
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  vertical-align: middle;
}
.mi-table .mi-actions .btn i { margin: 0; font-size: 12.5px; }

/* Round 122c — Marketplace-style tooltip: black bubble, white text, shown ABOVE
   the hovered element with a downward arrow. Rendered by the global tooltip
   script in layout/footer.php (vanilla JS, no Bootstrap dependency). */
.cl-tooltip {
  position: fixed;
  z-index: 9999;
  background: #000;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 3px;
  /* pre-line, NOT nowrap. nowrap collapsed the seller's newlines to spaces and
     stretched a long body into ONE line across the entire page — which is what
     the "Additional options" ⓘ tooltip did (the seller's list of requirements
     ran off the screen edge). pre-line keeps every real newline as a line break
     AND still wraps a line that is too long, so a short title behaves exactly as
     before and a long body wraps into a readable column. */
  white-space: pre-line;
  /* A bounded column instead of a full-width strip, which is what Marketplace's
     own bubble is. 420px is chosen so it CANNOT change any tooltip already on
     the site: the longest existing title is 62 characters (~385px at this
     size), so every short label still renders on exactly one line. Only a long
     body — the Additional options text — actually wraps.
     The second line is the real constraint and wins wherever it is supported:
     on a 360px phone a 420px bubble would hang off the screen edge, so it is
     also capped to the viewport. (The first max-width is the fallback for a
     browser that does not understand min().) */
  max-width: 420px;
  max-width: min(420px, calc(100vw - 24px));
  overflow-wrap: break-word;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  display: none;
}
.cl-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #000;
}
@media (max-width: 767px) {
  .mi-table .mi-name { max-width: 190px; }
}
.wrapper-md { padding: 20px; }
.panel-footer { padding: 10px 15px; border-top: 1px solid var(--line); }
@media print { .hidden-print { display: none !important; } }

/* ============================================================
   CODES TER ITEM PAGES (/items/...) — 2026-08-28, round 48
   Overview / Reviews / Support / FAQ / Insights / Edit / Promote
   ============================================================ */

/* Extra FontAwesome icons used by the item pages (FA 4.2.0 codes) */
.fa-comment:before { content: "\f075"; }
.fa-star-o:before { content: "\f006"; }
.fa-question-circle:before { content: "\f059"; }
.fa-pencil:before { content: "\f040"; }
.fa-bullhorn:before { content: "\f0a1"; }
.fa-info-circle:before { content: "\f05a"; }
.fa-info:before { content: "\f05a"; }
.fa-share-alt:before { content: "\f1e0"; }
.fa-twitter:before { content: "\f099"; }
.fa-linkedin:before { content: "\f0e1"; }
.fa-reddit:before { content: "\f1a1"; }
.fa-pinterest:before { content: "\f0d2"; }
.fa-trash-o:before { content: "\f014"; }

/* Small Bootstrap-ish helpers used by the item views */
.p-n { padding: 0 !important; }
.w-xs { width: 90px; }
.form-control-file { display: block; margin-top: 4px; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.m-b-n-xs { margin-bottom: -5px; }

/* Item top: title + author line + price/buy */
.item-top { padding: 22px 0 0; }
.item-title { font-size: 26px; font-weight: 300; margin: 0 0 6px; color: #141719; line-height: 1.2; }
.item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #58666e; font-size: 13.5px; }
.item-meta a { color: #23b7e5; }
.item-meta a:hover { color: #141719; }
.item-author-avatar { width: 22px !important; height: 22px !important; border-radius: 4px !important; }
.item-short { color: #98a6ad; margin-top: 8px; font-size: 13.5px; }
.item-price { font-size: 30px; font-weight: 300; color: #141719; }
.it-header-rating { display: inline-flex; align-items: center; gap: 5px; }
.it-stars { display: inline-flex; align-items: center; gap: 1px; vertical-align: -1px; }

/* Marketplace item tab menu */
.item-tabs { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #dee5e7; margin: 18px 0 22px; }
.item-tabs a { display: inline-flex; align-items: center; padding: 12px 18px; font-size: 13.5px; color: #58666e; border-bottom: 2px solid transparent; }
.item-tabs a:hover { color: #141719; background: #f6f8f8; text-decoration: none; }
.item-tabs a.active { color: #141719; font-weight: 600; border-bottom-color: #23b7e5; }

/* Preview / video / screenshots */
.item-preview { background: #fff; }
.item-preview img { display: block; width: 100%; height: auto; }
.item-preview-ph { display: flex; align-items: center; justify-content: center; min-height: 320px; color: #c0c8cc; background: #f6f8f8; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.item-screens .scr-thumb { display: block; border: 1px solid #dee5e7; border-radius: 2px; overflow: hidden; background: #fff; }
.item-screens .scr-thumb img { display: block; width: 100%; height: auto; }

/* Description content */
.item-description { line-height: 1.7; font-size: 14px; color: #363f44; }
.item-features-list { margin: 0; padding-left: 18px; }
.item-features-list li { margin-bottom: 6px; }

/* Information sidebar */
.item-info-panel { background: #fff; }
.item-info-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 15px; border-top: 1px solid #edf1f2; font-size: 13.5px; }
.item-info-row:first-child { border-top: 0; }
.item-info-row > span:first-child { color: #98a6ad; flex-shrink: 0; }
.item-info-row strong, .item-info-row a { color: #363f44; }
.item-info-row a:hover { color: #23b7e5; }
.item-info-row .text-right { display: inline-flex; align-items: center; gap: 6px; }
.item-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.item-tags a { font-size: 12px; background: #edf1f2; padding: 2px 8px; border-radius: 2px; color: #58666e; }
.item-tags a:hover { background: #dee5e7; color: #141719; text-decoration: none; }

/* Share & Earn Money */
.share-box { background: #fff; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.share-row .btn { flex: 0 0 auto; }
.btn-twitter { background: #55acee; border: 1px solid #55acee; color: #fff !important; }
.btn-twitter:hover { background: #4899d9; border-color: #4899d9; color: #fff !important; }
.btn-linkedin { background: #0077b5; border: 1px solid #0077b5; color: #fff !important; }
.btn-linkedin:hover { background: #00669c; border-color: #00669c; color: #fff !important; }
.btn-reddit { background: #ff4500; border: 1px solid #ff4500; color: #fff !important; }
.btn-reddit:hover { background: #e03e00; border-color: #e03e00; color: #fff !important; }
.btn-pinterest { background: #bd081c; border: 1px solid #bd081c; color: #fff !important; }
.btn-pinterest:hover { background: #a60718; border-color: #a60718; color: #fff !important; }
.share-link-row { display: flex; gap: 8px; margin-top: 6px; }
.share-link-row input { flex: 1; font-size: 12.5px; }

/* Author card */
.author-card .ac-avatar { flex-shrink: 0; }
.author-card .ac-avatar img, .author-card .ac-avatar .av-fallback { width: 80px; height: 80px; border-radius: 6px; font-size: 28px; }
.ac-name { font-size: 16px; font-weight: 700; color: #141719; }
.ac-name a { color: #141719; }
.ac-name a:hover { color: #23b7e5; }
.ac-joined { color: #98a6ad; font-size: 12.5px; }
.ac-text { color: #58666e; font-size: 13.5px; line-height: 1.6; margin: 8px 0; }
.ac-actions { margin-top: 10px; }

/* Rating summary (reviews page) */
.rating-summary { display: flex; gap: 30px; flex-wrap: wrap; }
.rs-avg { text-align: center; min-width: 120px; }
.rs-num { font-size: 44px; font-weight: 300; color: #141719; line-height: 1; display: block; margin-bottom: 6px; }
.rs-bars { flex: 1; min-width: 220px; }
.rs-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 12.5px; color: #98a6ad; }
.rs-row .rs-bar { flex: 1; height: 10px; background: #edf1f2; border-radius: 2px; overflow: hidden; }
.rs-row .rs-fill { display: block; height: 100%; background: #f6b623; }
.rs-row .rs-cnt { width: 30px; text-align: right; }
.rs-lbl { width: 56px; }

/* Review items */
.review-item { display: flex; gap: 14px; }
.review-item .rv-avatar { flex-shrink: 0; }
.review-item .rv-avatar img, .review-item .rv-avatar .av-fallback { width: 46px; height: 46px; border-radius: 6px; font-size: 17px; }
.rv-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rv-name { font-weight: 700; color: #141719; }
.rv-name a { color: #141719; }
.rv-name a:hover { color: #23b7e5; }
.rv-date { color: #98a6ad; font-size: 12.5px; }
.rv-text { margin-top: 6px; color: #363f44; font-size: 13.5px; line-height: 1.6; }

/* Insights stat cards + charts */
.stat-card { background: #fff; border: 1px solid #dee5e7; border-radius: 2px; padding: 20px; text-align: center; }
.stat-card .sc-num { font-size: 34px; font-weight: 300; color: #141719; line-height: 1.1; }
.stat-card .sc-lbl { color: #98a6ad; font-size: 12.5px; margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }
.insights-chart { width: 100%; height: auto; display: block; }

/* FAQ */
.faq-item { border-bottom: 1px solid #edf1f2; padding: 16px 0; }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-q { font-weight: 700; color: #141719; font-size: 14.5px; margin-bottom: 6px; }
.faq-a { color: #58666e; font-size: 13.5px; line-height: 1.65; }

/* Edit page tabs + image thumbs */
.item-edit-tabs { border-bottom: 1px solid #dee5e7; display: flex; padding: 0; margin: 0; list-style: none; background: #fff; }
.item-edit-tabs li { margin: 0; }
.item-edit-tabs li a { display: block; padding: 12px 20px; font-size: 13.5px; color: #58666e; border-bottom: 2px solid transparent; }
.item-edit-tabs li a:hover { color: #141719; text-decoration: none; }
.item-edit-tabs li.active a { border-bottom-color: #23b7e5; font-weight: 600; color: #141719; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.edit-img-thumb { max-width: 220px; max-height: 120px; border: 1px solid #dee5e7; border-radius: 2px; display: block; }

/* ============================================================
   CODES TER FLO T CHART (round 49) — canvas chart box for the
   30-day sales chart + Insights charts. The canvas is sized to
   the container width, so it stays readable on mobile.
   ============================================================ */
.flot-chart-box { position: relative; width: 100%; overflow: hidden; }

/* ============================================================
   ADMIN USERS MODULE (round 51) — /admin/users
   .admin-user / .ad-filterbar rules moved to assets/css/admin.css
   (split, round 121). Only the generic utilities stay here.
   ============================================================ */
.nowrap { white-space: nowrap; }
.w-md { width: 200px; }

/* Categories form — consistent labels, spacing and alignment (round 65) */
.cat-label { display: block; font-size: 13px; font-weight: 600; color: #3a3f51; margin-bottom: 6px; }
.cat-icon-current { display: inline-block; background: #f0f3f4; border: 1px solid #dee5e7; border-radius: 10px; padding: 10px 14px; }
.cat-icon-current img { width: 34px; height: 34px; object-fit: contain; display: block; }

/* ============================================================
   PUBLIC COLLECTIONS (round 84) — /collections listing page +
   collection detail page (/collections/{id}/{slug}) with the
   Marketplace three-mode sidebar (guest / rater / owner), the
   owner "Edit collection" modal and FA rating stars.
   ============================================================ */

/* Extra FontAwesome icons used by the collection pages (FA 4.2.0) */
.fa-fire:before { content: "\f06d"; }
.fa-thumbs-up:before { content: "\f164"; }
.fa-video-camera:before { content: "\f03d"; }
.fa-chevron-left:before { content: "\f053"; }
.fa-chevron-right:before { content: "\f054"; }
.fa-star:before { content: "\f005"; }

/* .col-md-3 — missing from the flex .row grid (Marketplace listing
   cards). Desktop: 4-across; 768-991px: 3-across (col-sm-4);
   below 768px: stacked full width. */
.col-md-3 { width: 25%; }
@media (min-width: 768px) and (max-width: 991px) {
  .cl-page .col-md-3 { width: 33.33333333%; }
}
@media (max-width: 767px) {
  .cl-page .col-md-3 { width: 100%; }
}

/* Collection listing cards — compact footer so the 265px card fits */
.cl-page .cl-col-card .panel-footer { padding: 8px 12px; }
.cl-page .cl-col-card .panel-footer a:hover { text-decoration: none; color: #141719; }
.cl-page .cl-col-card .hp-stars { vertical-align: -2px; }

/* --- Panel heading inside the collection sidebar (Marketplace) --- */
.cl-page .panel > .panel-heading:not(.bg-black) { padding: 10px 15px; background: #f6f8f8; border-bottom: 1px solid #edf1f2; font-size: 13.5px; font-weight: 700; color: #58666e; }

/* --- Rate this collection (logged-in non-owner): FA stars with
   hover feedback; the current rating stays filled (.on) --- */
.cl-rating-stars a { display: inline-block; color: #d7dde2; font-size: 20px; line-height: 1; padding: 0 2px; text-decoration: none !important; }
.cl-rating-stars a.on { color: #f6b623; }
.cl-rating-stars:hover a { color: #f6b623; }

/* --- Edit collection modal (owner) — Marketplace form-horizontal --- */
.cl-edit-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1055; display: flex; align-items: center; justify-content: center; padding: 12px; }
.cl-edit-modal { background: #fff; width: 560px; max-width: 100%; border-radius: 4px; box-shadow: 0 6px 30px rgba(0, 0, 0, .3); }
.cl-page .form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-bottom: 15px; align-items: flex-start; }
.cl-page .form-horizontal .control-label { width: 16.66666667%; padding: 7px 15px 0 0; box-sizing: border-box; text-align: right; font-weight: 400; color: #58666e; font-size: 13.5px; }
.cl-page .form-horizontal .col-lg-10 { width: 83.33333333%; padding-left: 15px; box-sizing: border-box; }
.cl-page .form-horizontal .col-lg-offset-2 { margin-left: 16.66666667%; }
.cl-page .form-horizontal .form-control { width: 100%; height: 34px; padding: 6px 12px; border: 1px solid #cfdadd; border-radius: 2px; background: #fff; font-size: 13.5px; box-shadow: none; }
.cl-page .form-horizontal textarea.form-control { height: auto; min-height: 88px; resize: vertical; }
.cl-page .form-horizontal .help-block { display: block; margin-top: 4px; color: #98a6ad; font-size: 12px; }
.cl-edit-modal .checkbox { margin: 6px 0 0; }
@media (max-width: 1199px) {
  .cl-page .form-horizontal .control-label,
  .cl-page .form-horizontal .col-lg-10 { width: 100%; text-align: left; padding-left: 0; padding-right: 0; }
  .cl-page .form-horizontal .col-lg-offset-2 { margin-left: 0; }
  .cl-page .form-horizontal .control-label { margin-bottom: 4px; }
}

/* Payment brand icons (item Buy panel, Marketplace) — FA 4.2.0 */
.fa-cc-paypal:before { content: "\f1f4"; }
.fa-cc-visa:before { content: "\f1f0"; }
.fa-cc-mastercard:before { content: "\f1f1"; }
.fa-cc-discover:before { content: "\f1f2"; }
.fa-cc-amex:before { content: "\f1f3"; }

/* Marketplace-style profile follower/following counter (round 88) */
.padder-v {
  padding-top: 15px;
  padding-bottom: 15px;
}
/* ==========================================================================
   Legacy Bootstrap-style utilities (restored after the Phase B rollback).
   These were previously provided by assets/css/marketplace.css (round 90).
   They are re-implemented here in the original design language so every
   other page keeps working after marketplace.css was removed. Nothing in this
   block overrides the premium header/footer/card styles.
   ========================================================================== */

/* Backgrounds */
.bg-black { background-color: #1c2b36; color: #fff; }
.bg-black.lt { background-color: #24384a; }
.bg-white { background-color: #fff; }
.bg-light { background-color: #edf1f2; }
.lter { background-color: #f4f6f6; }

/* Text colors */
.text-info { color: #23b7e5; }
.text-warning { color: #b9a200; }
.text-xs { font-size: 11px; }

/* Divider / borders / form helpers */
.divider { height: 1px; margin: 9px 0; overflow: hidden; background: #e5e5e5; }
.no-border { border: 0 !important; }
.font-normal { font-weight: 400 !important; }

/* Labels (status chips) */
.label-info { background: #23b7e5; }
/* "New" service badge — white on #5bc0de (scoped class; other labels unchanged) */
.label-new { background-color: #5bc0de; color: #fff; }
/* The New badge on the "Add Service" entry in the header profile list (desktop
   and mobile) sits 5px from the label, not the 10px the global .m-l-sm utility
   gives, and it no longer carries .label-sm (whose padding-top/bottom trim made
   it look off). Both .m-l-sm and .label-sm are site-wide utilities -- .m-l-sm is
   also re-keyed by `.item-panel .item-listing-title .m-l-sm`, and .label-sm is
   still used by the item, free and sale views -- so the badge gets its own class
   instead of changed global rules. Only these two badges carry label-new-tight. */
.label-new-tight { margin-left: 5px; }
.label-primary { background: #337ab7; }
.label-success { background: #27c24c; }
.label-danger { background: #f05050; }
.label-warning { background: #fad733; color: #131e26; }
.badge.bg-light, .label.bg-light { background: #edf1f2; color: #58666e; }

/* Progress bars (author/affiliate levels) */
.progress { height: 14px; margin-bottom: 20px; overflow: hidden; background: #edf1f2; border-radius: 7px; }
.progress-xs { height: 6px; margin-bottom: 4px; }
.progress-bar { float: left; width: 0; height: 100%; font-size: 11px; line-height: 14px; color: #fff; text-align: center; background: linear-gradient(135deg, #23b7e5, #1797be); border-radius: 7px; }

/* Input groups */
.input-group { position: relative; display: table; border-collapse: separate; }
.input-group .form-control, .input-group-addon, .input-group-btn { display: table-cell; }
.input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #58666e; text-align: center; background: #edf1f2; border: 1px solid #cbd5e1; border-radius: 2px; }
.input-group-btn { position: relative; white-space: nowrap; }
.input-group-btn > .btn { border-radius: 0 2px 2px 0; }

/* Grid extras */
.col-md-12 { width: 100%; }
.col-2-sm { width: 16.66666667%; }
.col-4-sm { width: 33.33333333%; }
/* Additive: col-2-sm / col-4-sm already existed.
   .col-6-sm and .m-t-n-lg were both added for the expert category page —
   a half-width results count and a -20px tug that lifted the card's action
   block up beside the name. That toolbar and that card are now flex rows
   (.exp-toolbar / .exp-card .exp-row, see "Expert category page" at the end
   of this sheet), so THIS PAGE no longer uses either class. Both are left
   defined: they are harmless, and other markup may still carry them. */
.col-6-sm { width: 50%; }
.m-t-n-lg { margin-top: -20px; }

/* Marketplace's "Expert in:" chip on an expert card:
   btn btn-xs btn-default font-bold bg-light dker. The .dker modifier is
   only defined inside .buyer-page in this sheet, so the chip would
   otherwise fall back to the plain .bg-light background. Scoped to this
   exact combination — the site's other .dker users are .label and
   .bg-white elements, which this selector cannot match. */
.btn.btn-xs.bg-light.dker { background-color: #dde6e9; }

/* Spacing / sizing */
.padder { padding: 15px; }
.p-b-sm { padding-bottom: 10px; }
.p-l-sm { padding-left: 10px; }
.p-r-sm { padding-right: 10px; }
.w-lg { width: 320px; }
.spinner { display: inline-block; }
.pagination-md > li > a { padding: 8px 14px; font-size: 14px; }
.m-b-xxs { margin-bottom: 2px; }
.m-l-n { margin-left: 0; }
.m-r-n { margin-right: 0; }
.m-b-n-sm { margin-bottom: -10px; }

/* Lists */
.list-inline { padding-left: 0; margin-left: -5px; list-style: none; }
.list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }
.list-group { margin-bottom: 20px; padding-left: 0; }
.list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background: #fff; border: 1px solid #e7ecee; color: #58666e; text-decoration: none; }
.list-group-item:first-child { border-radius: 2px 2px 0 0; }
.list-group-item:last-child { margin-bottom: 0; border-radius: 0 0 2px 2px; }
.list-group-item:hover, .list-group-item:focus { background: #f6f8f8; color: #141719; }

/* Bootstrap-style dropdowns (blog comment menus, author dashboard) */
.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 200px; padding: 5px 0; margin: 2px 0 0; list-style: none; background: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); font-size: 14px; }
.dropdown.open > .dropdown-menu { display: block; }
.dropdown-menu > li > a { display: block; padding: 8px 15px; clear: both; font-weight: 400; line-height: 1.43; color: #333; text-decoration: none; white-space: nowrap; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: #edf1f2; color: #141719; }

/* ============================================================
   Round 92 — Marketplace item page header (breadcrumb + icon +
   title + tabs), screenshots gallery and author banner.
   ============================================================ */
.item-head { padding-bottom: 0; }

.item-crumb { font-size: 13px; }
.item-crumb a { color: #23b7e5; }
.item-crumb a:hover { color: #141719; }

.item-head-row { min-height: 150px; padding-bottom: 10px; }
.item-head { padding-top: 12px; }
.item-head-icon {
    display: flex;
    align-items: flex-start;
    padding-top: 20px;
}
/* Round 166 — Recently Updated on its own line, bigger Marketplace-style */
.item-head .ru-badge { font-size: 15px; line-height: 1.4; }
.item-head .ru-badge .fa { font-size: 16px; }
.item-head-icon img { border-radius: 6px; background: #fff; }
.item-head-title { padding-top: 4px; }
.item-head-title h1, .item-head-title h2, .item-head-title h3 { margin: 0 0 6px; color: #3a3f51; line-height: 1.2; }
/* Item title: bold, dark (#3a3f51 like .text-dark). PC/tablet 30px,
   mobile (visible-xs header) 24px — one line, Marketplace heading look. */
.item-head-title .h2 { font-size: 30px; font-weight: 700; }
.item-head-title .h3 { font-size: 24px; font-weight: 700; }
/* Item "Information" panel: label stays one line on the left, values
   wrap on the right in full rows — nothing is cut off. */
.item-info-panel td { vertical-align: top; }
.item-info-panel td:first-child { font-weight: 600; color: #3a3f51; }
.item-info-panel td.item-info-value,
.item-info-panel td:last-child { overflow-wrap: break-word; word-break: break-word; }
.item-info-panel .item-info-category a { white-space: normal; }
.item-head-title > span:not(.clear) { color: #58666e; font-size: 13.5px; }

@media (max-width: 767px) {
  .item-head-row { min-height: 0; }
  .item-head-icon img { max-width: 64px; }
}

/* Marketplace tab menu (text only) */
.item-menu { padding-top: 8px; margin-bottom: -11px; }
.item-menu a { color: #58666e; display: inline-block; }
.item-menu a:hover, .item-menu a:focus { text-decoration: none; color: #141719 !important; border-bottom: 5px solid #E5E9EC; }
.item-menu .active { border-bottom: 5px solid #23b7e5; font-weight: bold; color: #363f44 !important; }
.item-menu .active:hover { border-bottom-color: #0FAADC; }
.item-tab-select { margin: 8px 0 10px; }

/* ============================================================
   Responsive visibility utilities (Bootstrap-like) — the Marketplace
   item header renders a desktop block (.visible-sm/-md/-lg/-xl)
   AND a mobile block (.visible-xs); without these rules BOTH
   blocks show and the page looks duplicated. (round 93)
   ============================================================ */
.visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xl { display: none !important; }
@media (max-width: 767px) { .visible-xs { display: block !important; } }
@media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } }
@media (min-width: 1200px) and (max-width: 1599px) { .visible-lg { display: block !important; } }
@media (min-width: 1600px) { .visible-xl { display: block !important; } }
.hidden { display: none !important; }

/* ============================================================
   Flash sale (Marketplace AutoDM style, round 93): red countdown
   panel + strikethrough sale price in the purchase panel.
   ============================================================ */
.sale-price-old { color: #98a6ad; text-decoration: line-through; font-size: 15px; margin-right: 6px; }
.sale-countdown { background: #c62828 !important; color: #fff; }
.sale-countdown .sc-timer { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.sale-countdown .sc-box { background: rgba(255,255,255,.18); border-radius: 6px; padding: 6px 10px; min-width: 58px; }
.sale-countdown .sc-num { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sale-countdown .sc-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .9; margin-top: 2px; }
.sale-countdown p { margin: 0; }
.sale-extra-opt td { vertical-align: middle !important; }
.sale-extra-opt .eo-title { font-weight: 700; }

/* ============================================================
   Screenshots lightbox (Marketplace jquery-lightbox look, round 94):
   medium modal with Maximize / Minimize / Close + prev/next.
   Maximize fills the WHOLE visible screen on desktop AND mobile:
   the panel stretches to the viewport and the image is scaled to
   fit (object-fit: contain). 100dvh is used where supported so the
   mobile browser URL bar never clips the image; taller-than-screen
   images inside the medium modal scroll instead of being cut off.
   ============================================================ */
.lb-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lb-overlay.lb-open { display: flex; }
.lb-panel { background: #fff; border-radius: 6px; box-shadow: 0 10px 44px rgba(0,0,0,.55); max-width: 940px; width: 100%; overflow: hidden; margin: auto; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f5f5f5; border-bottom: 1px solid #e3e3e3; }
.lb-counter { font-size: 13px; color: #666; }
.lb-controls { display: flex; gap: 4px; }
.lb-btn { background: none; border: none; font-size: 16px; line-height: 1; color: #444; cursor: pointer; padding: 6px 9px; border-radius: 4px; }
.lb-btn:hover { background: #e6e6e6; color: #000; }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; background: #fff; }
#lbImg { max-width: 100%; max-height: calc(85vh - 130px); display: block; }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.88); border: 1px solid #ddd; border-radius: 50%; width: 38px; height: 38px; font-size: 15px; color: #333; cursor: pointer; z-index: 2; }
.lb-arrow:hover { background: #fff; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
/* Maximize -> fills the visible viewport; Minimize -> back to the modal */
.lb-overlay.lb-max { padding: 0; top: 0; bottom: auto; height: 100vh; overflow: hidden; }
.lb-overlay.lb-max .lb-panel { margin: 0; max-width: none; width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
.lb-overlay.lb-max .lb-top { flex: 0 0 auto; border-radius: 0; }
.lb-overlay.lb-max .lb-stage { flex: 1 1 auto; min-height: 0; height: auto; }
.lb-overlay.lb-max #lbImg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Mobile browsers with a dynamic URL bar: use the *visible* viewport height */
@supports (height: 100dvh) {
  .lb-overlay.lb-max { height: 100dvh; }
}

/* ============================================================
   Video preview modal (round 95): Marketplace shows a "View Video"
   button on the preview panel; clicking opens a wider modal with
   the embedded YouTube/Vimeo player and a Close button.
   ============================================================ */
.video-modal { width: 860px; max-width: 94vw; }
.video-modal .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; }
.video-modal .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Marketplace "This item was featured" banner (mobile only) */
.featured-banner { background: #23b7e5; color: #fff; }
.featured-banner .fb-star { display: flex; align-items: center; justify-content: center; min-width: 70px; }

/* Round 114: Marketplace-exact featured banner — icon-featured.png 40x40 in the
   left column (v-middle centered), subtle dk tint on the text column, and the
   white bold text forced to ONE line (fb-text nowrap). .v-middle overrides the
   .hbox .col top-align by coming later with equal specificity. */
.featured-banner .dk { background: rgba(0, 0, 0, .06); }
.featured-banner .v-middle { vertical-align: middle; }
.featured-banner .fb-text { white-space: nowrap; }

/* Screenshots gallery (extracted from the ZIP) — tile styles and the
   show/hide state rules live in the ROUND 117/120 block further down.
   (The old line-height/100px + max-height:96px rules here conflicted with
   the 4:3 cover tiles and re-hid the extras; removed in Round 120.) */

/* Author profile panel banner */
.author-banner { height: 90px; }
.item-info-panel .table > tbody > tr > td { vertical-align: middle; }
/* Round 105: Marketplace keeps the Information panel Category value on ONE
   line — long category chains truncate with an ellipsis instead of
   wrapping to a second line. */
.item-info-panel td.item-info-category {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Item cards: icon images keep their square look */
.hp-thumb img, .nr-thumb img { object-fit: cover; }
.item-panel .item img.img-full { object-fit: cover; }

/* ==========================================================================
   FLASH SALE PAGE (Marketplace /sale/ countdown — dark flip-style timer)
   ========================================================================== */
.fs-countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.fs-cd-box {
  min-width: 80px;
  padding: 12px 10px 10px;
  text-align: center;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px;
}
.fs-cd-num {
  display: block;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.fs-cd-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c8d6de;
}
.fs-cd-sep {
  font-size: 26px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  margin-top: -14px;
}
/* Round 145: .label-md font-size removed — it overrode the .label 75%
   size on the struck original price (Marketplace keeps the small 75%). */
@media (max-width: 480px) {
  .fs-cd-box { min-width: 64px; padding: 10px 6px 8px; }
  .fs-cd-num { font-size: 24px; }
  .fs-cd-sep { font-size: 20px; margin-top: -10px; }
}

/* ==========================================================================
   ROUND 107 — Marketplace blog fixes (2026-08-31)
   - Missing FontAwesome 4.2 glyph classes: the font files under
     assets/fonts/ are the FULL FA 4.2.0 webfont — only the CSS classes were
     subsetted. These three were missing, so the archives calendar icon, the
     sidebar RSS icon and the Facebook share icon rendered blank:
       .fa-calendar (Archives), .fa-rss (RSS), .fa-facebook (Share).
   - Home page blog section: cover image zoom on card hover (Marketplace .grow),
     home page only (.home-blog).
   - Black newsletter panels: Marketplace muted #7793a7 body copy.
   - Blog share row: 4-up full width on desktop, 2-up / 1-up on mobile.
   ========================================================================== */

/* --- missing FA glyphs (glyphs already exist inside the webfont) --- */
.fa-calendar:before { content: "\f073"; }
.fa-rss:before { content: "\f09e"; }
.fa-facebook:before { content: "\f09a"; }

/* --- home page blog section cover zoom (home.php only) --- */
.home-blog .blog-card .grow { overflow: hidden; }
.home-blog .blog-card .grow img {
  display: block;
  width: 100%;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
.home-blog .blog-card:hover .grow img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

/* --- black newsletter panels: Marketplace muted text (#7793a7 = .bg-black text) --- */
/* Must come after the .bg-black rule so it wins for the panel element. */
.blog-newsletter { color: #7793a7; }
.blog-newsletter .text-white,
.blog-newsletter h4 { color: #fff; }
.blog-newsletter p { color: #7793a7; }

/* --- blog share row: desktop 4-up full width, mobile 2-up / 1-up --- */
.blog-share .btn { padding-left: 6px; padding-right: 6px; font-size: 12px; }
@media (max-width: 767px) {
  .blog-share .col-xs-3 { width: 50%; }
}
@media (max-width: 480px) {
  .blog-share .col-xs-3 { width: 100%; padding: 2px; }
}

/* ==========================================================================
   ROUND 108 — blog detail bottom alignment (2026-08-31)
   - The newsletter panel was inset by the .wrapper-sm 10px padding, so it
     looked narrower than the article panel above it → remove the padding on
     this wrapper only (flush, same line as the other sections).
   - Comments container: margins reduced 20px → 10px (m-t-sm m-b-sm) and
     0 10px side padding so it aligns with the rest of the column.
   - Share buttons on ≤480px are stacked full width with 2px padding so they
     no longer touch each other.
   ========================================================================== */
.blog-newsletter-wrap { padding: 0; }
.blog-comments { padding: 0; }

/* Round 198i — blog pages:
   - The in-article newsletter + comments now sit flush to the article
     panel width on PC AND mobile (comments previously had 10px side
     insets, which made them look narrower than the article).
   - The blog sidebar (.blog-side — shared partial) is now shown on
     phones/tablets too: full width, stacked below the content, instead
     of being hidden by the old hidden-sm class. Desktop ≥992 keeps the
     25% right-hand column. */
@media (max-width: 991px) {
  .blog-side { display: block !important; width: 100% !important; float: none !important; }
}

/* Round 198j — the blog article column is a flex .row grid, so the
   newsletter and comments blocks (flex items without a col-* class)
   shrank to their content width instead of matching the article panel.
   Force the article, newsletter and comments to each fill the FULL
   column width, aligned edge-to-edge on PC and mobile. */
.blog-post,
.blog-newsletter-wrap,
.blog-comments { flex: 0 0 100%; max-width: 100%; width: 100%; }

/* Round 198k — in-article newsletter form: email + "Send me updates" sit
   side by side and are CENTERED in the black panel on PC. The generic
   col-sm-8/col-sm-4 widths are missing from this theme's flex grid, so the
   two boxes stacked up left-aligned. Scoped to .blog-newsletter forms only
   (the sidebar widget has no .row-sm, so it is untouched). */
.blog-newsletter form .row-sm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.blog-newsletter form .col-sm-8 { flex: 0 0 66.6666%; max-width: 66.6666%; padding: 0 4px; }
.blog-newsletter form .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 4px; margin-bottom: 10px; }
.blog-newsletter form .form-control { width: 100%; }
@media (max-width: 479px) {
  .blog-newsletter form .col-sm-8,
  .blog-newsletter form .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
}

/* Round 198l — blog detail page: breathing room between the byline
   (date / author / category) and the share-buttons row below it. Only the
   top share row (which directly follows the byline) is affected; the bottom
   share row and every other section stay unchanged. */
.blog-post .text-muted + .blog-share { margin-top: 22px; }

/* ==========================================================================
   ROUND 110 — /free and /sale hero: Marketplace-exact typography + compact
   flip countdown (2026-08-31)
   - Hero content now sits in Marketplace's col-md-10 col-md-offset-1
     padder-v text-center wrapper with the exact h1/h3 class list
     (font-thin m-t-xl m-b-sm text-white padder-v animated fadeInDown /
     text-white animated fadeInUp). These rules only apply to the
     .fp-countdown hero, so the home hero keeps its own look.
   - The Soon timer no longer carries data-scale (Marketplace's markup has
     none); the base .soon 2.5rem is overridden here to the small flip
     size Marketplace renders, with steps so Days/Hours/Minutes/Seconds all
     stay on ONE line on mobile (the Seconds unit used to be clipped by
     the .soon overflow:hidden).
   ========================================================================== */

/* Utility classes from the Marketplace hero markup that don't exist yet
   (font-thin, m-t-xl, m-b-sm, m-b-xl, padder-v, text-center already do). */
.m-t-xxl { margin-top: 60px; }

/* Bootstrap grid classes used by the Marketplace hero wrapper
   (col-md-10 col-md-offset-1) — this app's custom grid only defines the
   column widths the templates use, so add these two scoped to the hero. */
.frontpage-header .col-md-10 { width: 83.33333333%; }
.frontpage-header .col-md-offset-1 { margin-left: 8.33333333%; }

/* animate.css — the two classes used by the hero headings */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
  from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInDown {
  from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@-webkit-keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
.fadeInUp   { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

/* Marketplace h1: font-thin (300), m-t-xl (40px), m-b-sm (10px), text-white,
   padder-v (15px), animated fadeInDown, text-shadow 0 0 5px rgba(0,0,5,.5);
   Bootstrap h1 36px, line-height 1.1. */
.frontpage-header.fp-countdown h1 {
  max-width: none;
  margin: 40px 0 10px;
  padding: 15px 0;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 5, .5);
}
/* Marketplace h3: text-white, animated fadeInUp, Bootstrap h3 24px/500,
   line-height 1.1, margins 20px 10px, same text-shadow. */
.frontpage-header.fp-countdown h3 {
  max-width: none;
  margin: 20px 0 10px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 5, .5);
}

/* Compact countdown — overrides the base .soon 2.5rem (higher specificity
   via the ID, so it wins even though soon.min.css loads after style.css). */
.frontpage-header.fp-countdown #my-soon-counter {
  font-size: 1.75rem;
  padding: .5em 0 .75em;
}
.frontpage-header.fp-countdown #my-soon-counter .soon-group-sub > .soon-group-inner {
  margin: 0 .3125em;
}

/* Round 168 — sale/free heroes: keep the countdown inside the same
   360px hero band as the home page (compact vertical margins). */
.frontpage-header > .container { width: 100%; }
.frontpage-header.fp-countdown .m-t-xxl.m-b-xl { margin-top: 6px; margin-bottom: 0; }
.frontpage-header.fp-countdown h1 { margin: 0 0 6px; }
.frontpage-header.fp-countdown h3 { margin: 8px 0 12px; }

/* Mobile: keep all four units on one line, shrink headings progressively */
@media (max-width: 767px) {
  .frontpage-header .col-md-10 { width: 100%; margin-left: 0; }
  .frontpage-header.fp-countdown h1 { font-size: 30px; margin-top: 30px; }
  .frontpage-header.fp-countdown h3 { font-size: 20px; }
  .frontpage-header.fp-countdown #my-soon-counter { font-size: 1.45rem; }
  .frontpage-header.fp-countdown #my-soon-counter .soon-group-sub > .soon-group-inner { margin: 0 .22em; }
}
@media (max-width: 480px) {
  .frontpage-header.fp-countdown h1 { font-size: 26px; }
  .frontpage-header.fp-countdown h3 { font-size: 18px; }
  .frontpage-header.fp-countdown #my-soon-counter { font-size: 1.25rem; }
  .frontpage-header.fp-countdown #my-soon-counter .soon-group-sub > .soon-group-inner { margin: 0 .18em; }
}

/* Home page blog grid: 4 per row on PC (col-md-3), 1 per row on mobile
   (this override makes the col-sm-6 blog cards full width on phones). */
@media (max-width: 767px) {
  .home-blog .col-sm-6 { width: 100%; }
}

/* ==========================================================================
   ROUND 112 — ONE compact timer design on every page (2026-08-31)
   - #my-soon-counter (all timers: /free hero, /sale hero AND the red
     flash-sale panel on item pages) now shares the same compact size,
     padding and group gaps. data-scale was removed from the red panel
     markup so it no longer forces 2.5rem.
   - The red panel lives in the narrow col-sm-4 right column, so it gets
     its own fit step (slightly smaller digits) — otherwise the flip
     cards would overflow the panel and clip the Seconds unit, exactly
     like the old 2.5rem did on mobile. Panel stays bg-danger red; only
     the timer sizing is adjusted.
   ========================================================================== */
#my-soon-counter {
  font-size: 1.75rem;
  padding: .5em 0 .75em;
}
#my-soon-counter .soon-group-sub > .soon-group-inner { margin: 0 .3125em; }

@media (max-width: 767px) {
  #my-soon-counter { font-size: 1.45rem; }
  #my-soon-counter .soon-group-sub > .soon-group-inner { margin: 0 .22em; }
}
@media (max-width: 480px) {
  #my-soon-counter { font-size: 1.25rem; }
  #my-soon-counter .soon-group-sub > .soon-group-inner { margin: 0 .18em; }
}

/* Red flash-sale panel (narrow right column): fit steps so Days/Hours/
   Minutes/Seconds always stay on one line — no clipped Seconds anywhere. */
.panel.bg-danger #my-soon-counter { font-size: 1.5rem; }
@media (max-width: 767px) {
  .panel.bg-danger #my-soon-counter { font-size: 1.25rem; }
}
@media (max-width: 480px) {
  .panel.bg-danger #my-soon-counter { font-size: 1.1rem; }
}

/* ==========================================================================
   ROUND 115 — item page AUTHOR panel, Marketplace-exact (2026-09-01)
   The markup already matched Marketplace; the breakage was CSS:
   - The avatar <img> (profile-avatar-sm) rendered at its intrinsic size
     (much bigger than the 72px .thumb-lg container) and covered the name.
     It is now sized to fit the container with Marketplace's white border +
     rounded corners + soft shadow.
   - The author name is dark bold like Marketplace (h4), handle stays muted.
   - The badge row uses Marketplace's 48px inline images with tooltips
     (already changed in the markup); nothing else needs styling.
   ========================================================================== */
.author-card .profile-avatar-sm {
  display: block;
  width: 66px;
  height: 66px;
  border: 3px solid #fff;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.author-card .h4 {
  color: #363f44;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
}
.author-card .h4 .text-muted { color: #98a6ad; }
.author-card .m-t.b-t.b-light.wrapper img {
  vertical-align: middle;
}

/* ==========================================================================
   ROUND 117 — item page Screenshots section, Marketplace-exact (2026-09-01)
   These classes were missing entirely, which collapsed the section:
   - .col-xs-2 gives the 6-per-row grid on PC AND mobile (Marketplace shows
     6 thumbnails per row at every width).
   - .screenshot-box / .screenshot-thumb give the uniform 4:3 thumbnail
     tiles (crop + cover) inside the bordered .item boxes.
   - .extra-screenshot hides shots 7+ (the markup also sets inline
     display:none); the "Show all N screenshots" footer button toggles
     them via the existing JS.
   ========================================================================== */
.col-xs-2 { width: 16.66666667%; }
.screenshot-box { overflow: hidden; border-radius: 2px; }
.screenshot-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Round 120 — the show/hide state is driven by a class on the panel, never by
   inline styles. The old JS cleared the inline display, but .extra-screenshot
   { display:none } still applied, so "Show all N screenshots" did nothing and
   the buttons vanished (hide button also carried .hidden !important). */
.screenshots-panel .extra-screenshot { display: none; }
.screenshots-panel.expanded .extra-screenshot { display: block; }
.screenshots-panel .btn-hide-shots { display: none; }
/* display:flex (not block) so the .btn flex centering keeps the label
   centered, exactly like the "Show all" button. */
.screenshots-panel.expanded .btn-hide-shots { display: flex; }
.screenshots-panel.expanded .btn-show-shots { display: none; }

/* ==========================================================================
   ROUND 118 — item page top section, Marketplace-exact (2026-09-01)
   - The preview action buttons (Live Demo / View Video / Add bookmark /
     Like) sit in a flex .row; without justify-content the row starts left
     and wraps into a broken 2x2 grid on narrower screens (this app's
     .row is flex with wrap, and .w-sm is 150px). Marketplace keeps them in
     ONE centered row — center the flex row and let the buttons size to
     their text (min 90px) so all four fit on one line on PC and wrap
     neatly on mobile.
   - The "Recently Updated" badge is now inline on the short-description
     line (markup change in _item_header.php), green check + bold text.
   ========================================================================== */
.item-preview-footer .row.row-sm { justify-content: center; }
.item-preview-footer .w-sm { width: auto; min-width: 90px; }
.item-preview-footer .btn { white-space: nowrap; }

/* ==========================================================================
   ROUND 119 — "Other items by this author", Marketplace-exact (2026-09-01)
   The markup already matched Marketplace; the CSS classes it relies on were
   missing entirely, so the cards rendered full-width (1 per row) with the
   preview image at natural size covering the text:
   - .col-md-6 / .col-sm-6 give the 2-per-row grid (desktop + tablet);
     on phones col-sm-6 resets to 100% like Marketplace's bootstrap.
   - .thumb-md img sizes the icon to a 64x64 rounded square (object-fit
     cover) inside the pull-left link — the huge preview no longer covers
     the title/category/stars/price.
   - .text-ellipsis keeps the title on one truncated line; .w-lg gives the
     category/stars column Marketplace's width; the row.padder.w-lg div is a
     normal block so the <br> still pushes the stars below the category
     (this app's .row is flex and would otherwise ignore the <br>).
   ========================================================================== */
/* REMOVED (2026-09-14): three rules used to sit here —
     .col-md-6 { width: 50%; }
     .col-sm-6 { width: 50%; }
     @media (max-width: 767px) { .col-sm-6 { width: 100%; } }
   The comment above says "on phones col-sm-6 resets to 100%", but the
   `.col-md-6 { width: 50%; }` was UNCONDITIONAL and sat ~2200 lines BELOW the
   grid's own `@media (max-width: 767px)` reset. Same specificity, later in the
   file: it silently overrode the reset, so `.col-md-6` NEVER collapsed on a
   phone — the admin quote page's two-column pairs stayed side by side at 390px,
   each ~194px wide, and the tables inside them were crushed.
   Both rules were duplicates anyway: `.col-sm-6`/`.col-md-6` are defined in the
   grid block at the top, WITH the phone reset, and `.col-md-6` is re-declared
   properly inside `@media (min-width: 992px)` lower down. Deleting them changes
   nothing above 768px and restores the collapse below it. */

/* NOTE (2026-09-14): that last sentence turned out to be wrong for the two
   SIBLING rules. Deleting `.col-sm-6 { width: 50%; }` and its phone reset also
   removed the only override that held `.col-md-3` / `.col-md-4` (declared
   unconditionally, further down this file) down below 992px - which is what
   broke every card on phones and tablets.
   Nothing is re-added here: that is fixed in ONE place, by the single global
   card-grid rule at the END of this file (search "ROUND 206 - GLOBAL CARD
   GRID"). */
.other-items-panel .thumb-md img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}
.other-items-panel .text-ellipsis {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.other-items-panel .row.padder.w-lg { display: block; }
.other-items-panel .w-lg { width: 160px; }

/* ==========================================================================
   ROUND 120 — item page "Related products" (Marketplace bg-light lter band).
   Marketplace renders the band with col-md-3 col-sm-6 cards: 4 per row on
   desktop, 2 on tablet, 1 on mobile. The app's .col-md-3 (25%) is declared
   BEFORE .col-sm-6 (50%), so a plain "col-md-3 col-sm-6" element would
   cascade to 50% at every size — this scoped rule forces the Marketplace
   widths (and lets .row-sm gutters keep working like the other grids).
   ========================================================================== */
.related-grid > .col-md-3 { width: 25%; }
@media (min-width: 768px) and (max-width: 991px) {
  .related-grid > .col-md-3 { width: 50%; }
}
@media (max-width: 767px) {
  .related-grid > .col-md-3 { width: 100%; }
}

/* ==========================================================================
   ROUND 121 — Marketplace desktop grid + mobile hardening (2026-09-01)
   1) DESKTOP GRID FIX. The earlier unconditional `.col-sm-6 { width: 50% }`
      rule (round 119) sits AFTER `.col-md-3`/`.col-md-4` in source order, so
      every "col-md-4 col-sm-6" / "col-md-3 col-sm-6" card stayed 50% wide
      even on desktops — item grids rendered 2-per-row instead of Marketplace's
      3-per-row (categories/search) / 4-per-row (home, related). Re-declaring
      the col-md-* widths inside a min-width:992px block AFTER the col-sm
      rules restores real Bootstrap semantics: col-sm-* wins 768–991, col-md-*
      wins ≥992, phones stay 100%.
   2) MOBILE SAFETY NET. The whole public page is wrapped in a `.page-wrap`
      div (header.php/footer.php) with `overflow-x: clip`. Any stray wide
      element is clipped instead of pushing the page sideways, so the header
      can never be cut off on the left like the reported iPhone break.
      `clip` was chosen over `hidden` because hidden turns the wrapper into
      a scroll container, which breaks the sticky header — clip clips
      without creating a scroll container, so the sticky header keeps
      working and vertical scrolling is untouched. `img { max-width: 100% }`
      keeps uploaded images inside their column.
   ========================================================================== */
@media (min-width: 992px) {
  .col-md-1  { width: 8.33333333%; }
  .col-md-2  { width: 16.66666667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.33333333%; }
  .col-md-5  { width: 41.66666667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.33333333%; }
  .col-md-8  { width: 66.66666667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-11 { width: 91.66666667%; }
  .col-md-12 { width: 100%; }
}

.page-wrap { overflow-x: clip; }
img { max-width: 100%; }

/* ==========================================================================
   ROUND 210 — Marketplace-style sticky footer (every page, no flex in content).
   Marketplace's refunds page CSS pins the dark footer to the bottom of the
   window on short/empty pages:
       html, body { height: 100%; }        % heights now = real window size
       #wrap  { min-height: 100%; ... }    page always fills the window
   We get the SAME effect with a body-level grid instead of pixel reserves
   (the footer height is data-driven here, so fixed px like Marketplace's 309px
   would break):
       body.site-body { display: grid; grid-template-rows: 1fr auto; }
   - Row 1 (auto-min 1fr) = .page-wrap (header + page content). On short
     pages it stretches to fill everything above the footer; on long pages
     it simply grows with its content, so NOTHING inside it changes.
   - Row 2 (auto) = #footer at its natural height, always sitting flush at
     the bottom edge -> no light-grey strip below the footer on empty pages.
   Why this is safe for the home page & every other page: no display change
   inside .page-wrap (children stay normal blocks, margins keep collapsing,
   the sticky header and overflow-x:clip safety net are untouched), and
   height:100% (not 100vh) avoids the mobile address-bar "stretch on reload"
   jump. layout/footer.php now closes .page-wrap BEFORE <footer> so the
   footer is a sibling, exactly like Marketplace's #wrap > #footer.
   ========================================================================== */
html, body { height: 100%; }
body.site-body {
  display: grid;
  /* IMPORTANT: pin the column to the viewport width. Without an explicit
     column the single implicit "auto" track grows to the widest intrinsic
     content inside .page-wrap, so the ENTIRE page (header/sections/footer)
     gets laid out wider than the screen on mobile -> horizontal cut-off +
     scrollbar. minmax(0, 1fr) keeps the page exactly as wide as the window,
     like the old block layout did, so .page-wrap's overflow-x: clip keeps
     working exactly as before. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
}
body.site-body > * { min-width: 0; } /* items may shrink with the viewport */
#footer { overflow-x: clip; } /* footer now sits outside .page-wrap; keep the same mobile safety net it had before */

/* ==========================================================================
   ROUND 122 — profile page: long usernames must not overflow on mobile
   (2026-09-01). The header name column (.pull-left.col-md-6.m-l-n-md) is a
   flex item; below 992px col-md-6 has no width, so a long unbreakable
   @username pushed the row wider than the screen. Fix: let the name/@handle
   wrap anywhere, allow the column to shrink (min-width 0), and on phones
   (where the 128px avatar + Follow button leave only ~38px beside them)
   move the name column onto its own full-width line below the avatar.
   ========================================================================== */
@media (max-width: 991px) {
  .profile-page .row > .col-md-6.m-l-n-md { min-width: 0; }
  .profile-page .h1,
  .profile-page .h4.text-muted {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 767px) {
  .profile-page .row > .col-md-6.m-l-n-md {
    flex: 1 1 100%;
    margin-left: 0;
    order: 2;
  }
  /* Keep the Follow button on the avatar line, top-right like Marketplace */
  .profile-page .row > .wrapper.pull-right {
    order: 1;
  }
}

/* ==========================================================================
   ROUND 140 — item-card footer: category icon + name on ONE line,
   vertically centre-aligned like Marketplace (icon left, name right after it,
   price stays far right). The name truncates with an ellipsis instead of
   wrapping under the icon on narrow 4-across cards.
   ========================================================================== */
.item-cat { display: flex; align-items: center; min-width: 0; }
.item-cat .item-cat-name {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  vertical-align: middle;
  margin-top: -3px;
  margin-bottom: 0 !important;
  line-height: 1.3;
}
.item-cat img { margin-bottom: 0 !important; flex: 0 0 auto; }
/* Round 141 — a long category name must never push the price onto a new
   row. The footer row never wraps: the category side shrinks (icon fixed,
   name gets the ellipsis) while the price keeps its own fixed width. */
.item-panel .row.b-t { flex-wrap: nowrap; }
.item-panel .item-cat { flex: 1 1 auto; }
.item-panel .row.b-t > .pull-right { flex: 0 0 auto; }
/* Round 142 — clear hover on the flash-sale (red) and Free (green) price
   chips. The old hover (#ee3939 / #23ad44) was almost the same colour as
   the button, so the hover felt like nothing. Marketplace darkens visibly.
   Round 143: deepened further (danger #c0392b, success #1d8a37) so the
   change is obvious on the small chips, with a short colour transition. */
.item-price-button.btn-danger,
.item-price-button.btn-success { transition: background-color .15s ease, border-color .15s ease; }
.item-price-button.btn-danger:hover,
.item-price-button.btn-danger:focus,
.item-price-button.btn-danger:active { background: #c0392b; border-color: #a93226; color: #fff !important; }
.item-price-button.btn-success:hover,
.item-price-button.btn-success:focus,
.item-price-button.btn-success:active { background: #1d8a37; border-color: #18752e; color: #fff !important; }

/* ==========================================================================
   ROUND 144 — card price colours (Marketplace-exact):
   1) The struck "original" price must be grey #98a6ad — the generic
      bootstrap .label { color:#fff } was overriding .text-muted and made
      the crossed price white-on-white (invisible on the card).
   2) Flash-sale offer price and the Free button always keep WHITE text on
      the red #f05050 / green #27c24c chips (never the dark slate default).
   ========================================================================== */
.item-panel .label.text-muted,
.item-listing-title-listview .label.text-muted,
.item-listing-title-sm .label.text-muted { color: #98a6ad !important; background: transparent !important; }
.item-price-button.btn-danger,
.item-price-button.btn-success { color: #fff !important; }

/* Marketplace-equal item cards: rows that contain .item-panel cards become
   flex rows, each card is a flex column, and the TITLE section absorbs
   the extra height (flex-grow). So a short 1-line title leaves its blank
   space between the title and the icon row — exactly like Marketplace — while
   the icon row, category/price footer and divider line sit at the same
   bottom position on every card. Scoped with :has() so non-card grids
   (and older browsers) keep their original behaviour. */
.row:has(> [class*="col-"] > .item-panel) { display: flex; flex-wrap: wrap; }
.row:has(> [class*="col-"] > .item-panel) > [class*="col-"] { display: flex; }
.row:has(> [class*="col-"] > .item-panel) > [class*="col-"] > .item-panel,
.row:has(> [class*="col-"] > .item-panel) > [class*="col-"] > .item-panel.panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 15px;
}
.item-panel .item-listing-title {
  flex: 1 1 auto;
  min-height: 44px;
  /* Both one-line and two-line titles start at the SAME top line of the
     reserved title area (Marketplace). A one-line title keeps its blank
     second line BELOW it — the space is inside the title block, so every
     card still ends equal. Left/right margins are zeroed so the centered
     text is truly symmetric inside the card (no 10px offset from the
     theme's m-l-sm helper on the row). */
  /* Small EQUAL breathing room on both sides — the centered text never
     touches the card edge and stays perfectly symmetric. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 12px;
  padding-right: 12px;
}
/* Public profile "Items by …" section header — dedicated class so the
   bar matches the width of the card grid below it. (.wrapper is global and
   is not touched.) */
.profile-items-head { padding-bottom: 15px; }
.profile-items-head .panel-heading { padding: 10px 15px; display: flow-root; }
.profile-items-head .pull-right { float: right; }
/* Inner margin helpers would offset the centered flex block — drop them
   inside the title area only. */
.item-panel .item-listing-title > .m-l-sm,
.item-panel .item-listing-title .m-l-sm .m-r-sm { margin: 0; width: 100%; }
.item-panel .item-listing-title h2 {
  width: 100%;
  line-height: 1.3;
  /* Cap at two lines with a normal block box so text-align: center works
     for both single-line and wrapped titles (the -webkit-box clamp used
     before ignored centering). */
  max-height: 2.6em;
  overflow: hidden;
}
/* Title text centered inside every item card — ALWAYS, whether the title
   is one line or two lines (mobile included). !important guarantees no
   other rule can left-align it. */
.item-panel .item-listing-title,
.item-panel .item-listing-title > div,
.item-panel .item-listing-title a,
.item-panel .item-listing-title h2 { text-align: center !important; }
/* Card footer divider: Marketplace #dee5e7 top line on the category/price
   row (works with and without the b-light helper class), pinned to the
   card bottom so the whole row aligns + small top padding. */
.item-panel .row.no-gutter.b-t { flex: 0 0 auto; border-top: 1px solid #dee5e7; border-color: #dee5e7 !important; }




/* ==========================================================================
   ROUND 148 — New Releases compact card (Marketplace): 4 per row on PC
   (col-md-3), 2 per row tablet (col-sm-6), 1 per row mobile. Card body is
   a flex row: [icon] [title one-line ellipsis / category icon+name /
   stars] [price bottom-right] — separate compact style, never mixed with
   the big preview grid cards of the other homepage sections.
   ========================================================================== */
.nl-card { position: relative; }
.nl-card .nl-flex { display: flex; align-items: center; padding: 10px 12px; }
.nl-card .nl-thumb { flex: 0 0 auto; margin-right: 12px; line-height: 0; }
.nl-card .nl-thumb img { display: block; }
.nl-card .nl-body { flex: 1 1 auto; min-width: 0; }
.nl-card .nl-body h2 { margin: 1px 0 5px; font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-card .nl-body h2 a { color: #363f44; }
.nl-card .nl-meta { font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #98a6ad; }
.nl-card .nl-meta a { color: #98a6ad; }
.nl-card .nl-meta img { vertical-align: middle; margin-top: -2px; }
.nl-card .nl-stars { margin-top: 7px; line-height: 1; white-space: nowrap; }
.nl-card .nl-stars img { width: 12px; height: 12px; }
/* Round 150 — price sits bottom-right WITHOUT reserving a column, so the
   title block spans the full card width and the ellipsis only appears at
   the real right edge (Marketplace look). */
.nl-card .nl-price { position: absolute; right: 12px; bottom: 12px; text-align: right; white-space: nowrap; }
.nl-card .nl-price strong { color: #363f44; }


/* ==========================================================================
   ROUND 151 (revised) — item details: code blocks (<pre> inside the item
   description) keep their full height (no vertical scrollbar, no line
   wrapping) and scroll HORIZONTALLY when a code line is wider than the
   box — like Marketplace's changelog box.
   ========================================================================== */
.item-description pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #edf1f2;
  border: 1px solid #dee5e7;
  border-radius: 4px;
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
}



/* Round 151b — Marketplace pre/well colours (background #edf1f2, border
   #dee5e7) for the item-description code/changelog blocks. */
.well,
pre {
  background-color: #edf1f2;
  border-color: #dee5e7;
}





/* Round 152 — item details offer price must be RED: the .h1/.h2 colour
   rules were overriding .text-danger on the price spans, so "$25" showed
   dark instead of red. */
.text-danger { color: #f05050 !important; }
.h1.text-danger,
.h2.text-danger,
.price_in_dollars.text-danger { color: #f05050 !important; }


/* Round 155 — Share & Earn Money box: deterministic rows with flex.
   PC/tablet: TWO buttons per row (50% each, filling the card width).
   Mobile: ONE button per row at FULL width, aligned with the share link.
   Independent of the column classes so it can't stack by accident. */
.share-box .row-sm { display: flex; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; }
.share-box .row-sm > .col-md-6 { width: 50%; box-sizing: border-box; padding: 0 8px; margin-bottom: 12px; }
@media (max-width: 767px) {
  .share-box .row-sm > .col-md-6 { width: 100%; }
}

/* Round 156 — Telegram share button (glyph + brand colour). */
.fa-paper-plane:before { content: "\f1d8"; }
.btn-telegram { background: #0088cc; border-color: #0088cc; color: #fff !important; }
.btn-telegram:hover,
.btn-telegram:focus,
.btn-telegram:active { background: #0077b3; border-color: #00699e; color: #fff !important; }

/* Round 157 — fa-desktop glyph was missing from the subset icons, so the
   Live Demo button icon showed blank. */
.fa-desktop:before { content: "\f108"; }

/* Round 165 — fa-check-circle glyph was missing (buy panel feature list
   "Free support / Updates / Quality / Price" check icons). */
.fa-check-circle:before { content: "\f058"; }

/* Round 159 — item preview footer buttons on mobile: equal gap between
   every button (both rows) and each row stays centred. PC untouched. */
@media (max-width: 767px) {
  .item-preview-footer .row.row-sm { gap: 8px; justify-content: center; }
  .item-preview-footer .row.row-sm .btn { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Round 168b — smaller equal hero height on mobile */
@media (max-width: 767px) {
  .frontpage-header { min-height: 300px; }
}

/* Round 169 — /free & /sale share block: Facebook + Twitter on ONE row
   (PC and mobile), then the Link row below, both centred with proper gaps. */
.hp-share-btns { display: flex; flex-wrap: nowrap; justify-content: center; gap: 12px; margin-top: 2px; }
.hp-share-btns .btn { white-space: nowrap; }
.hp-share-link { margin-top: 18px; }
.hp-share-link input { margin-left: 8px; vertical-align: middle; }
@media (max-width: 480px) {
  .hp-share-btns .btn { font-size: 12.5px; padding: 6px 10px; }
}

/* ======================================================================
   ROUND 163 — safe modal animation (additive only, cannot break):
   OPEN  : overlay fades in + the box rises slightly (plays automatically
           every time the overlay becomes visible).
   CLOSE : JS adds .anim-out/.anim-out-box for ~170ms, then runs the
           ORIGINAL hide code (fade-out + small drop).
   If anything ever failed, modals still open/close instantly.
   ====================================================================== */
@keyframes ovIn { from { opacity: 0; } }
.bm-overlay, .vb-overlay, .cl-edit-overlay, .cl-modal-overlay, .lb-overlay, .cm-overlay { animation: ovIn .18s ease-out; }
@keyframes boxIn { from { opacity: 0; transform: translateY(12px); } }
.bm-box, .vb-box, .lb-panel, .cl-modal, .cl-edit-modal, .cm-box { animation: boxIn .22s ease-out; }
@keyframes ovOut { to { opacity: 0; } }
.anim-out { animation: ovOut .18s ease-in forwards !important; }
@keyframes boxOut { to { opacity: 0; transform: translateY(10px); } }
.anim-out-box { animation: boxOut .16s ease-in forwards !important; }


/* Marketplace price-link hover — a.text-success hover turns green #23ad44 */
a.text-success:hover,
a.text-success:focus,
a.text-success:active,
.btn.text-success:hover,
.btn.text-success:focus,
.btn.text-success:active {
    color: #23ad44 !important;
}

/* ============================================================
   Popular category page — /popular/{id}/{slug} "Top 20 …" strip
   (round 175). Scoped under .popular-page so nothing else is
   affected. Replicates marketplace.com popular pages: light strip
   with breadcrumb + "Top 20 …" + intro on the left and the
   in-category search bar on the right (desktop only).
   ============================================================ */
.popular-page .container { max-width: 1170px; }
.popular-page .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
.popular-page .col-xs-12 { width: 100%; }
/* Below 992px the title takes the full row and the search bar hides —
   exactly like Marketplace (Bootstrap md breakpoint). */
.popular-page .col-md-7 { width: 100%; }
.popular-page .col-sm-5 { width: 100%; }
.popular-page .pop-search-col { display: none; }
@media (min-width: 992px) {
  .popular-page .col-md-7 { width: 58.33333333%; }
  .popular-page .col-sm-5 { width: 41.66666667%; }
  .popular-page .pop-search-col { display: block; }
}
/* Marketplace-style strip search bar: white addon select on the left,
   borderless input, gray "Search" button on the right. */
.popular-page .pop-search {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #dee5e7;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 14px;
}
.popular-page .pop-search select {
  flex-shrink: 0;
  max-width: 165px;
  border: 0;
  border-right: 1px solid #edf1f2;
  background: #fff;
  padding: 0 24px 0 10px;
  color: #58666e;
  font-size: 13.5px;
  height: 36px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.popular-page .pop-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0 12px;
  font-size: 13.5px;
  color: #58666e;
  height: 36px;
}
.popular-page .pop-search input:focus { outline: none; }
.popular-page .pop-search button {
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid #edf1f2;
  background: #f6f8f8;
  color: #58666e;
  font-weight: 700;
  font-size: 13px;
  padding: 0 16px;
  height: 36px;
  cursor: pointer;
}
.popular-page .pop-search button:hover { background: #edf1f2; color: #363f44; }
/* The "Browse all …" row sits inside the flex .row — keep it full width. */
.popular-page .row.m-t-lg.m-b-xl > .col-sm-12 { width: 100%; }

/* ============================================================
   Child category chips with counts — shown on category pages
   (round 177): "PHP Scripts categories: Ads 9, Blog 32 …" style,
   like marketplace.com. Scoped so nothing else is affected.
   ============================================================ */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #dee6ea;
  border-radius: 3px;
  padding: 5px 12px;
  font-size: 13px;
  color: #363f44;
  text-decoration: none;
}
.cat-chip:hover { border-color: #23b7e5; color: #1797be; }
.cat-chip-count {
  background: #edf1f2;
  border-radius: 8px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 16px;
  color: #58666e;
}

/* ============================================================
   Search results page — /search/ (round 185). Marketplace copy:
   - the strip search select carries live per-category counts, so
     it needs a wider closed width than the plain site selects;
   - sidebar Categories tree rows: small category icon and the
     label stay vertically centred next to each other.
   ============================================================ */
.s-search select.srch-counts { max-width: 250px; }
.s-search select.srch-counts option { font-size: 13px; }
.list-group-item > img { vertical-align: middle; }


/* ==========================================================================
   ROUND 190 — Marketplace category 3-tier landing (folder / topics / SEO box)
   - Folder panel children grid: 4 balanced columns on desktop, 2 on small
     screens (the categories are round-robined into the columns in PHP, the
     same balanced look as marketplace.com/categories/43/scripts-code).
   - Bottom SEO link grid: 2-column list of the child categories.
   - Missing FontAwesome 4.2 glyph classes used by the folder panel footer
     (Popular/New buttons), the strip headings and the topic links.
   ========================================================================== */
.cat-folder-cols { margin: 0; padding: 10px 15px 16px; }
.cat-folder-cols:after { content: ""; display: table; clear: both; }
.cat-folder-col { float: left; width: 25%; padding: 0 10px; box-sizing: border-box; }
.cat-folder-col ul { list-style: none; margin: 0; padding: 0; }
.cat-folder-col li { line-height: 1.8; margin-bottom: 6px; overflow: hidden; }
.cat-folder-col a { color: #58666e; }
.cat-folder-col a:hover { color: #141719; text-decoration: none; }
.cat-folder-col .badge { float: right; margin-top: 3px; }
@media (max-width: 991px) { .cat-folder-col { width: 50%; } }

.cat-seo-grid { column-count: 2; column-gap: 30px; list-style: none; padding-left: 0; }
.cat-seo-grid li { break-inside: avoid; line-height: 1.9; }
@media (max-width: 767px) { .cat-seo-grid { column-count: 1; } }

/* FA glyphs used by the Marketplace category landing (fonts already contain
   the glyphs; only the class definitions were missing from this CSS). */
.fa-folder:before { content: "\f07b"; }
.fa-shopping-cart:before { content: "\f07a"; }
.fa-dollar:before { content: "\f155"; }
.fa-angle-right:before { content: "\f105"; }
.fa-plus:before { content: "\f067"; }

/* Marketplace h1 spacing helper used by the category strip header. */
.m-r-md { margin-right: 16px !important; }

/* Round 194 — header nav entries for the separate Services / Hire a
   Freelancer marketplaces (mobile full-screen menu). */
.m-cat-link { display: block; padding: 11px 14px; color: #d9e1e5; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06); }
.m-cat-link:hover { color: #fff; background: rgba(255,255,255,.05); }

/* Empty-state panels ("No popular items …" / "No items found."): the shared
   .wrapper utility only adds horizontal padding, so the button used to sit
   flush against the box bottom. .cat-empty adds vertical breathing space
   above and below — horizontal 15px from .wrapper is untouched and no other
   wrapper/text-center block (badges grids, verify email, …) is affected. */
.panel.cat-empty { padding-top: 18px; padding-bottom: 22px; }

/* Round 194 — category count pills in the search / category / popular
   sidebars: a count badge must NEVER inherit white text when its row is
   "active". Force the light pill + dark number on every sidebar badge,
   exactly like Marketplace (overrides the bootstrap
   ".list-group-item.active" white foreground). */
.list-group-item .badge { color: #58666e; background: #edf1f2; }
.list-group-item.active .badge { color: #fff; background: #58666e; }

/* Round 194 — Results toolbar must sit on ONE line on PC: "X to Y of Z
   results" left, sort/filter + grid/list icons right. Applies to the
   profile shop toolbar (.shop-toolbar) and the All-Files listing toolbar
   (.list-toolbar). Below 992px the normal stacked layout is kept. */
@media (min-width: 992px) {
  .shop-toolbar,
  .list-toolbar { display: flex; align-items: center; }
  .shop-toolbar > div,
  .list-toolbar > div { width: auto !important; float: none; padding-left: 0; padding-right: 0; }
  .shop-toolbar .text-md,
  .list-toolbar .text-md { margin: 0 16px 0 0; white-space: nowrap; }
  .shop-toolbar > .text-right,
  .list-toolbar > .text-right { margin-left: auto; }
  .shop-toolbar .form-inline,
  .list-toolbar .form-inline { display: inline-block; }
}

/* Round 194 — mobile toolbar gap (grid/list icons to filter box) on the
   list-toolbar pages (/categories/all, /tags and /search). .form-inline is
   a flex block, so when the small toolbar wraps onto two rows the old
   horizontal m-l-sm does nothing: give it a vertical gap instead (and a
   small left gap when it does not wrap). No other toolbar is affected. */
@media (max-width: 991px) {
  .list-toolbar .form-inline { margin: 8px 0 0 10px; }
}
/* Round 194 — Marketplace header search on phones: the custom grid keeps the
   desktop col-md-7 / col-md-5 widths on small screens, squeezing the search
   bar into ~42% and clipping the input/button. Below 768px stack them: the
   title goes full width, then the search bar drops BELOW it, full width,
   one row, centered — nothing cut off. Desktop (>=768px) is untouched. */
@media (max-width: 767px) {
  .col-md-5,
  .col-md-7 { width: 100% !important; float: none; }
  .s-search { width: 100%; max-width: 100%; }
}
/* Round 194 — when the header columns stack on mobile the search bar sits
   flush under the H1; give it a little breathing room. Scoped to the header
   search column (.col-md-5 > .s-search), small screens only, so standalone
   hero search bars and the desktop layout are not affected. */
@media (max-width: 767px) {
  .col-md-5 > .s-search { margin-top: 12px; }
}
/* Round 194 — more space between the results toolbar (count + icons +
   sort) and the item grid on /categories/all, /tags and /search. Scoped to
   .list-toolbar only; the profile shop toolbar (.shop-toolbar) keeps its
   own margin. */
.list-toolbar { margin-bottom: 20px; }

/* Round 198 — .fa-tag rule was missing from the subset FontAwesome
   stylesheet (only the icons actually used get a rule), so the Filters chip
   icon on the /tags page rendered blank. FA 4.2.0 code \f02b (tag). */
.fa-tag:before { content: "\f02b"; }

/* Round 198c — Marketplace-style section headings on the category landing page.
   A DEDICATED .cl-strip-title class (this file has no Bootstrap, so the
   generic "h3" helper renders at body size ~14px and these strip titles
   looked tiny). The shared helpers (.wrapper / .h3 / .m-t-sm / .font-thin)
   are used by many other sections and stay untouched. */
.cl-strip-title { margin-bottom: 14px; }          /* gap between the heading and its item row */
.cl-strip-title .h3 {
  display: block;                                  /* Marketplace's h3 = 24px */
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
}
/* Icons need no extra rules: .fa inherits its size (24px from the h3
   heading rule above) and .m-r-sm (margin-right:10px) already spaces it. */
.cl-strip-title .h3 b, .cl-strip-title .h3 strong {
  font-weight: 700;                 /* <b>Best</b> / <b>New</b> stays bold like Marketplace */
}

/* Round 198e — home page section heading icons: .fa-usd (Flash Sale) and
   .fa-gift (Free Files) rules were missing from the subset FontAwesome
   stylesheet. FA 4.2.0 codes \f155 (dollar) and \f06b (gift). */
.fa-usd:before { content: "\f155"; }
.fa-gift:before { content: "\f06b"; }

/* Round 198g — remove the browser-default figure margin (1em 40px). */
figure { margin: 0; }

/* Round 203 — category page header: the category icon and the (often
   wrapping) category name now share one line, vertically centred, on
   PC and mobile. Previously the icon aligned with the first text line
   and a wrapped second line dropped below it. */
.cl-cat-head { display: flex; align-items: center; }
.cl-cat-head .thumb-xs { flex: 0 0 auto; margin: 0 12px 0 0; }
.cl-cat-head .cl-cat-head-text { min-width: 0; }

/* Round 204f — collection "Rate this collection" stars: the uploaded
   star PNGs are forced to their real Marketplace size (17x16) so nothing
   else (e.g. the global img max-width rule) can shrink them. The
   .cl-rating-stars class is used by this widget only — no other page
   is affected. */
.cl-rating-stars img { width: 17px !important; height: 16px !important; max-width: 17px !important; }

/* Round 204g — collection header "Average rating" summary: stars and
   text always on ONE line (PC and mobile, flex + nowrap), 10px space
   above/below, vertically centred. Scoped class used only on the
   collection page header — no other page is affected. */
.cl-col-avg { display: flex; align-items: center; white-space: nowrap; margin: 10px 0; }
.cl-col-avg > span:first-child { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cl-col-avg > span:last-child { margin-left: 10px; font-size: 13px; min-width: 0; }
@media (max-width: 767px) {
  .cl-col-avg > span:last-child { margin-left: 8px; font-size: 12px; }
}

/* Round 204h — collection page main grid row. The global .m-t helper
   (used by many pages) adds padding:15px on top of margin-top:15px,
   which pushed the item grid + sidebar out of line with the toolbar on
   this page. This page-local class keeps the 15px top gap but removes
   the extra padding — other pages using .m-t are untouched. */
.cl-col-main { margin-top: 15px; padding: 0; }

/* Round 204i — collections index card description: ALWAYS one line.
   Text that fills the line is cut with an ellipsis (…) instead of
   wrapping to a second line. Scoped to these cards only. */
.cl-col-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Round 204k/204n — /collections grid spacing: one 16px gap everywhere
   (between rows via flex row-gap, between side-by-side cards via the
   columns' 8px gutters = 16px total) and equal-height cards per row
   with the footer pinned to the bottom. Scoped to cl-col-grid only —
   no other page is affected. */
.cl-col-grid { row-gap: 16px; }
.cl-col-grid > [class*="col-"] { display: flex; padding: 0 8px; }
.cl-col-grid > [class*="col-"] > .cl-col-card { width: 100%; display: flex; flex-direction: column; }
.cl-col-grid .cl-col-card .panel-body { flex: 1 1 auto; }
.cl-col-grid .cl-col-card .panel-footer { margin-top: auto; }

/* Round 204o — the .profile-page .panel .row styling (margin/font/pad)
   must NOT apply to the ITEM CARDS themselves (grid .item-panel, list
   .cl-lv-body, home row .nl-card) — their inner rows should behave like
   the cards on every other listing page. Reset ONLY inside those card
   wrappers; all other profile sections keep the original spacing. */
.profile-page .item-panel .row { margin: 0; font-size: inherit; padding-top: 0; }
.profile-page .cl-lv-body .row { margin: 0; font-size: inherit; padding-top: 0; }
.profile-page .nl-card .row { margin: 0; font-size: inherit; padding-top: 0; }

/* Round 204q — Featured label in the LIST view: the listview container
   forces white text on every label (.item-listing-title-listview .label
   { color:#fff }), which overwrites the Featured info palette. Keep the
   info colors only on the bg-info (Featured) label — NEW/Popular etc.
   stay white as before. */
.item-listing-title-listview .label.bg-info { color: #dcf2f8; background-color: #23b7e5; }

/* Round 204s — Profile "Collections" tab cards have their OWN design
   (own classes, independent of the public /collections page). Gaps,
   avatar alignment and mobile spacing only apply here. */
.cl-pcol-grid { row-gap: 16px; }
.cl-pcol-card { overflow: hidden; }
.cl-pcol-card .pos-rlt { aspect-ratio: 2 / 1; overflow: hidden; }
.cl-pcol-card .pos-rlt .img-full { height: 100%; object-fit: cover; }
.cl-pcol-card .cl-pc-author { display: flex; align-items: center; margin: 14px 0 10px 10px; }
.cl-pcol-card .cl-pc-author img { vertical-align: middle; }
.cl-pcol-card .cl-pc-author a { margin-left: 5px; }

/* Profile Collections filter select: override the global .form-control
   width:100% ONLY for this dropdown, so it sizes to its content instead
   of stretching across the whole row. The shared .form-control rule is
   untouched for every other page. */
.cl-sel-auto { width: auto; }

/* Item page sidebar author-badge row: pf-box replaces the global .m-t
   helper here (only the top margin is wanted — .m-t also adds 15px
   padding which is NOT wanted on this row). */
.pf-box { margin-top: 15px; }

/* Round 204l — the cover keeps its REAL 2:1 shape at every screen size
   (Marketplace: e.g. 269x134 on desktop, 344x172 on mobile) instead of
   being squeezed into the old fixed 118px strip. Uploads are 800x400,
   so the image area simply follows the card width. .cl-col-card is
   used only on /collections — nothing else is affected. */
.cl-col-card { height: auto; }
.cl-col-card .pos-rlt { height: auto; aspect-ratio: 2 / 1; }
.cl-col-card .pos-rlt .img-full { height: 100%; object-fit: cover; }

/* ============================================================
   Round 198 — Marketplace item reviews page (same-to-same design).
   The base theme is missing these tiny helpers used by the
   Marketplace review rows; the .rv-* rules make the chevron Delete
   menu work without Bootstrap JS and style the delete action
   exactly like a normal dropdown-menu link. Scoped to
   .rv-menu / .rv-del-form so no other page is affected.
   ============================================================ */
.label-sm { padding-top: 0; padding-bottom: 1px; }
.m-t-n-xxs { margin-top: -1px; }

.rv-menu { position: relative; display: inline-block; }
.rv-chev { cursor: pointer; color: #98a6ad; }
.rv-drop {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 130px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.rv-menu.open .rv-drop { display: block; }
.rv-del-form { margin: 0; }
.rv-del-form button {
  display: block;
  width: 100%;
  padding: 5px 15px;
  clear: both;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  text-align: left;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.rv-del-form button:hover { color: #141719; background-color: #edf1f2; }
.rv-del-form button .fa-times { color: #f05050; }
.rv-av,
.rv-av-sm {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  background-color: #b7c4c9;
}
.rv-av { width: 40px; height: 40px; font-size: 18px; }
.rv-av-sm { width: 32px; height: 32px; font-size: 14px; line-height: 32px; }

/* ============================================================
   Round 199 — Marketplace post-a-review form spacing.
   Marketplace gets 15px under every .form-group block (rating,
   comment, submit) from its global CSS. This site has no such
   global rule, so the same 15px is applied only to the review
   form (.rv-post-form) — all other pages/forms stay untouched.
   ============================================================ */
.rv-post-form .form-group { margin-bottom: 15px; }
.rv-post-form .form-group:last-child { margin-bottom: 0; }

/* ============================================================
   Round 201 — Marketplace review rows: profile icon LEFT, and the
   username / Purchased label / Rating + stars / comment BESIDE it
   (side-by-side). The theme's global .clear { clear:both } (line
   1959) pushes the text BELOW the avatar, exactly like Marketplace's
   refund thread did — cancel it here the same way (.rv-thread is
   added to every review thread <ul> on the item reviews page).
   ============================================================ */
.rv-thread .clear { clear: none; overflow: hidden; min-width: 0; }

/* ============================================================
   Round 202 — Marketplace helpers this theme was missing.
   Marketplace defines the full spacing scale and sets a text colour
   on .bg-light. Without them the review/comment row gaps
   (.m-t-sm above Rating/comment), the "Post a review" panel
   bottom gap (.m-b-xxl) and the author-reply avatar indent
   (.m-l-md) collapse. Only the missing helpers are added —
   existing spacing rules are untouched (.m-b-md stays removed
   per the earlier request at line 1425).
   ============================================================ */
.m-t-sm { margin-top: 10px; }
.m-l-md { margin-left: 20px; }
.m-b-xxl { margin-bottom: 50px; }
.bg-light { color: #58666e; background-color: #edf1f2; }

/* ============================================================
   Round 203 — Marketplace bg palette text colours (Purchased /
   Author labels). Marketplace tints the label text: bg-success is
   pale mint #c6efd0 and bg-primary is pale lavender #f4f3f9.
   Existing backgrounds already match, only the colour was
   missing. No side effects: .item-label spans and the
   .upload-page progress bars carry their own higher-specificity
   color:#fff rules, so they are untouched.
   ============================================================ */
.bg-success { color: #c6efd0; background-color: #27c24c; }
.bg-primary { color: #f4f3f9; background-color: #7266ba; }

/* ============================================================
   Round 204 — Marketplace's Bootstrap sets img { vertical-align:
   middle } globally. This theme has no such base rule, which is
   why the review-row images (avatar + inline rating stars) sit on
   the text baseline. Scoped to the thread rows only — a global
   img rule would also nudge every small inline icon next to text
   across the whole site, which is not needed here.
   ============================================================ */
.rv-thread img,
.ad-thread img { vertical-align: middle; }

/* ============================================================
   Round 205 — Marketplace Support page threads (.cm-thread on each
   per-question <ul>). Same treatment as .rv-thread/.ad-thread:
   the theme's global .clear { clear:both } must not push the
   question/reply text below the left avatar, and inline images
   align middle like Marketplace.
   ============================================================ */
.cm-thread .clear { clear: none; overflow: hidden; min-width: 0; }
.cm-thread img { vertical-align: middle; }

/* ============================================================
   Round 206 — Support "Leave a question or comment" warning box.
   Marketplace styles it with the theme's .wrapper (padding:15px),
   but here .wrapper is used globally with padding:0 15px, so the
   alert gets its own .sup-warn class instead — 15px all sides,
   no effect on any other page.
   ============================================================ */
.sup-wrapper { padding: 15px; }

/* ============================================================
   Round 207 — .alert is used on many other pages with this
   theme's 12px radius, so the Support warning box must not rely
   on it. .sup-warn reproduces Marketplace's alert-warning box
   (radius 4px) standalone.
   ============================================================ */
.sup-warn {
  margin-bottom: 20px;
  padding: 15px;
  font-size: 16px;
  color: #8a6d3b;
  background-color: #fcf8e3;
  border: 1px solid #faebcc;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}



/* FAQ page "Add a FAQ" form spacing (Marketplace) - scoped to the FAQ page only,
   so the shared .m-b-md / .form-group classes used on other pages stay untouched */
#item_question { margin-bottom: 20px; }
#item_faq_form .form-group { display: block; margin-bottom: 15px; }

/* FAQ entry panel - dedicated class (the global .wrapper is NOT touched) */
.faq-wraper { padding: 15px; }

/* FAQ question heading - 18px like Marketplace (scoped to FAQ panels only) */
.faq-wraper h4 { font-size: 18px; }

/* Round 212 — .fa-ban (Upload page "Items we do not accept" heading)
   was missing from the subset FontAwesome glyph classes. */
.fa-ban:before { content: "\f05e"; }

/* ============================================================
   Round 213 — Marketplace /affiliate/ dashboard redesign. The new
   dashboard uses .fa-copy (referral-link Copy button) and
   .fa-line-chart (Program details bullet) — glyphs exist inside
   the full FA 4.2.0 webfont, only the CSS classes were missing.
   ============================================================ */
.fa-copy:before { content: "\f0c5"; }
.fa-line-chart:before { content: "\f201"; }

/* ==========================================================================
   ROUND 213 — Complete the Font Awesome subset (same full webfont files).
   These icon classes are used by templates but their :before rules were
   never added to the subset, so they rendered blank. Codes below are the
   official FA4 PUA codepoints (font files already contain every glyph).
   ========================================================================== */
.fa-book:before { content: "\f02d"; }
.fa-check-square-o:before { content: "\f046"; }
.fa-code:before { content: "\f121"; }
.fa-comment-o:before { content: "\f0e5"; }
.fa-comments:before { content: "\f086"; }
.fa-comments-o:before { content: "\f0e6"; }
.fa-credit-card:before { content: "\f09d"; }
.fa-cube:before { content: "\f1b2"; }
.fa-download:before { content: "\f019"; }
.fa-ellipsis-h:before { content: "\f141"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-external-link:before { content: "\f08e"; }
.fa-flag:before { content: "\f024"; }
.fa-gavel:before { content: "\f0e3"; }
.fa-globe:before { content: "\f0ac"; }
.fa-image:before { content: "\f03e"; }
.fa-life-ring:before { content: "\f1cd"; }
.fa-lightbulb-o:before { content: "\f0eb"; }
.fa-mobile:before { content: "\f10b"; }
.fa-paint-brush:before { content: "\f1fc"; }
.fa-pencil-square-o:before { content: "\f044"; }
.fa-percent:before { content: "\f295"; }
.fa-plug:before { content: "\f1e6"; }
.fa-refresh:before { content: "\f021"; }
.fa-reply:before { content: "\f112"; }
.fa-rocket:before { content: "\f135"; }
.fa-send:before { content: "\f1d8"; }
.fa-smile-o:before { content: "\f118"; }
/* Promote-your-items landing (Marketplace /info/promote_items 1:1) */
.fa-map-signs:before { content: "\f277"; }
.fa-youtube-play:before { content: "\f16a"; }
.fa-magic:before { content: "\f0d0"; }
.fa-wordpress:before { content: "\f19a"; }
.fa-html5:before { content: "\f13b"; }
/* Sell-your-work landing (Marketplace /info/seller sfp-page 1:1) */
.fa-arrow-right:before { content: "\f061"; }
.fa-unlock-alt:before { content: "\f13e"; }
.fa-pie-chart:before { content: "\f200"; }
.fa-file-archive-o:before { content: "\f1c6"; }
/* About page (Marketplace /info/about 1:1) — icon-basket & icon-badge are
   simple-line glyphs not shipped by this theme, so we map their FontAwesome
   equivalents (basket \f291, certificate/badge \f0a3). */
.fa-shopping-basket:before { content: "\f291"; }
.fa-certificate:before { content: "\f0a3"; }


/* ==========================================================================
   Services section - Marketplace parity (added 2026-09-12)

   /services/new/ and /services/new_form/ are reproduced from Marketplace's own
   markup. A few of Marketplace's metrics differ from this site's design system,
   so they are re-declared here INSIDE `.svc-page` only. The sitewide
   .panel / .panel-heading / .wrapper / .lter rules are left untouched, which
   is what keeps every other page's design intact.

   Marketplace reference values being matched:
     .panel          border 1px #dee5e7, radius 2px, margin-bottom 20px,
                     box-shadow 0 1px 1px rgba(0,0,0,.05)
     .panel-heading  padding 10px 15px, background #fff,
                     border-bottom 1px #edf1f2, text #58666e
     .wrapper        padding 15px
     .lter           background #f6f8f8
   ========================================================================== */
.svc-page .panel.b-a:not(.panel-default) {
  border: 1px solid #dee5e7;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  margin-bottom: 20px;
  overflow: visible;
}
.svc-page .panel.b-a:not(.panel-default) .panel-heading {
  padding: 10px 15px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf1f2;
  color: #58666e;
}
/* `h4 font-bold` must win: on Marketplace app.css loads after bootstrap so
   .font-bold (700) beats .h4 (500). Here both live in one file and .h4 is
   declared later, so it is pinned explicitly inside this scope. */
.svc-page .panel.b-a:not(.panel-default) .panel-heading.h4 { font-weight: 700; }
/* This theme expands `.b-light` to a full 1px border, which would draw a box
   around the heading. Marketplace only uses it for the border COLOUR, paired
   with `.b-b`, so the shorthand is reset here. */
.svc-page .panel.b-a:not(.panel-default) .panel-heading.b-light {
  border: 0;
  border-bottom: 1px solid #edf1f2;
}
.svc-page .panel.b-a:not(.panel-default) .panel-body { padding: 15px; }
.svc-page .panel.b-a:not(.panel-default) > .wrapper { padding: 15px; }
.svc-page .lter { background-color: #f6f8f8; }
/* Marketplace's checklist relies on the browser's default list styling. Pinned
   here so any global `ul` reset elsewhere in this stylesheet cannot strip the
   bullets. */
.svc-page .panel.b-a:not(.panel-default) .panel-body ul {
  padding-left: 40px;
  margin: 0 0 10px;
  list-style: disc outside;
}
/* ============================================================
   Messages page (/messages/) — Marketplace's two-column inbox
   (2026-09-13). Every rule below is scoped to .messages-page,
   so no other screen on the site is affected.
   ============================================================ */
.messages-page .list-group { margin-bottom: 0; }
/* The right column's thread rows: no box, only a 3px left edge —
   Marketplace's "list-group-item b-n b-l b-l-3x list-group-lg", none of which
   this theme has a utility for. */
.messages-page #messages-list .list-group-item {
  border: 0;
  border-left: 3px solid #e7ecee;
  margin-bottom: 0;
  padding: 15px;
}
/* The theme's global .clear { clear: both } would drop the message text BELOW
   the avatar and the timestamp instead of beside them. Inside this page the
   wrapper clears nothing and simply holds the text to the right of the float,
   which is what Marketplace's .clear does. (Same technique as
   .refund-page .list-group-item .clear.) */
.messages-page .list-group-item .clear { clear: none; overflow: hidden; min-width: 0; }
/* Long words in a message must wrap, not widen the column. */
.messages-page .link-info { overflow-wrap: break-word; word-break: break-word; }


/* ============================================================
   Quote pages - /quotes, /quotes/new, /quotes/view   (.qt-page)
   ============================================================
   Scoped to .qt-page deliberately. Every column class corrected
   below (col-md-8, col-sm-9/3, col-sm-8/4, col-lg-2/10, col-xs-8)
   is shared with other pages, and .row-sm is used across the
   site, so none of them is changed globally - only inside the
   quote pages, which are the pages that were wrong. */

/* The form column and the help column sat on top of each other: .row-sm
   only ever set negative gutters and never got the display:flex that .row
   has, so the 75% and 25% blocks each claimed a full line and the
   "Describe your request in detail" / "Please keep sales on" column dropped
   underneath the form instead of beside it. */
.qt-page .row-sm { display: flex; flex-wrap: wrap; }

/* .panel carries no padding and .wrapper pads horizontally only, so the amber
   "only use this form" notice was flush against the top edge of its panel. */
.qt-page .panel > .alert:first-child { margin-top: 15px; }

/* col-xs-8 / col-xs-4 are used by the "Quote" heading row but are defined
   nowhere in the theme, so that row fell back to content sizing. */
.qt-page .col-xs-8,
.qt-page .col-xs-4 { position: relative; min-height: 1px;
  padding-right: 15px; padding-left: 15px; box-sizing: border-box; }
.qt-page .col-xs-8 { width: 66.66666667%; }
.qt-page .col-xs-4 { width: 33.33333333%; }

/* col-md-8, col-sm-9/3 and col-lg-2/10 are fixed widths at EVERY screen size,
   so on a phone the main column stayed two thirds wide and the form labels
   stayed 16% wide (a few letters per line). Stack them below md. */
@media (max-width: 991px) {
  .qt-page .col-md-8,
  .qt-page .col-md-4,
  .qt-page .col-sm-9,
  .qt-page .col-sm-8,
  .qt-page .col-sm-4,
  .qt-page .col-sm-3 { width: 100%; }
  .qt-page .row-sm { margin-left: 0; margin-right: 0; }
  .qt-page .row-sm > [class*="col-"] { padding-left: 0; padding-right: 0; }
}

/* Below Bootstrap's lg breakpoint let each label sit above its field rather
   than in a 16% sliver. Same treatment the collections pages already use. */
@media (max-width: 1199px) {
  .qt-page .form-horizontal .form-group { display: flex; flex-wrap: wrap;
    margin-bottom: 15px; align-items: flex-start; }
  /* KEEP the columns' own 15px inset. Zeroing it (as this rule first did) put
     the Submit button hard against the panel's left edge, because .col-lg-10
     is the button's only container inside the form. Keeping the inset also
     lines the fields up with the notice text above them, which sits 15px
     inside the panel as well. */
  .qt-page .form-horizontal .control-label,
  .qt-page .form-horizontal .col-lg-2,
  .qt-page .form-horizontal .col-lg-10 { width: 100%; float: none;
    text-align: left; padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
  .qt-page .form-horizontal .control-label { margin-bottom: 4px; font-weight: 700; }
}

@media (max-width: 767px) {
  .qt-page .container { padding-left: 12px; padding-right: 12px; }
  /* ...EXCEPT the quotes LIST's strip header. That band is a copy of the jobs
     page's band, and the jobs page is not inside .qt-page, so it keeps the
     theme's own .container gutter (`padding: 0 20px`, defined at the top of
     this sheet). Widening it back to 20px is what makes the two bands line up:
     measured at 375px, this page's title sat at left=12px and the jobs page's
     at left=20px, an 8px step between two headers that are otherwise identical.
     The 12px override is untouched for every other container on these pages,
     which is what it was written for. */
  .qt-page .container.qt-band { padding-left: 20px; padding-right: 20px; }
  .qt-page .form-horizontal .form-group > * { max-width: 100%; }
  .qt-page .panel-heading { padding: 12px 14px; }
}


/* ---- the notice boxes on the quote pages (.qt-notice) ------------------
   The theme's global .alert is `display: flex; gap: 10px`. That is harmless
   for an alert holding one run of text, but these notices mix text with <b>
   tags -- and under flex EVERY <b> becomes its own flex item, so
   "Please only use this form to request a quote. This is not a contact
   form..." lays out as seven items in a row and the sentence shreds into
   narrow vertical fragments.

   The global .alert rule is NOT touched: alerts on dozens of other pages
   depend on it. These pages get their own class carrying Marketplace's own
   alert box instead.

   .wrapper is deliberately dropped from these elements as well -- it is a
   global utility used all over the site, and it was the thing supplying the
   padding here. Nothing outside the quote pages can be affected. */
.qt-page .qt-notice {
  position: relative;          /* kept: the theme positions alert icons/close on this */
  display: block;              /* NOT flex -- keeps the sentence as one flowing line box */
  gap: normal;                 /* neutralise the inherited 10px flex gap */
  padding: 15px;               /* Marketplace's alert padding */
  border: 1px solid #faebcc;
  border-radius: 4px;
  color: #8a6d3b;
  background-color: #fcf8e3;
  font-size: 16px;             /* 16px on every screen, asked for explicitly --
                                  overrides the theme's .alert 13.5px and the
                                  .text-md 16px this element no longer carries */
  line-height: 1.6;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* The theme reserves 44px of right padding on every alert for a close button.
   These notices have none, so .qt-notice reclaims it (15px all round above). */

.qt-page .qt-notice b { font-weight: 700; }

/* alert-danger / alert-success are referenced by these pages but defined
   NOWHERE in the theme (it uses .alert-error / .alert-ok), so those two
   banners were rendering with no colour at all. Bootstrap-3/Marketplace values. */
.qt-page .qt-notice.alert-danger  { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.qt-page .qt-notice.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.qt-page .qt-notice.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }

/* Every alert box on these pages is 16px, whichever banner it is.
   The .qt-notice boxes above state it directly. This catches the status
   banners on the quote view, which carry the global .text-md instead: that
   is a 16px rule but it TIES on specificity with .alert's 13.5px, so which
   one wins is decided purely by source order -- a font size that depends on
   where two rules happen to sit in the file is a bug waiting to happen.
   Scoped to .qt-page, so no other page's alerts are touched. */
.qt-page .alert { font-size: 16px; }

/* The form on /quotes/new lives inside <div class="panel wrapper ...">, and
   .wrapper pads HORIZONTALLY ONLY (`padding: 0 15px`). So the form's last row
   -- the Submit button -- ended up sitting directly on the panel's bottom
   border with nothing under it. Give the panel a floor. Scoped to .qt-page,
   so no other page's .wrapper changes. */
.qt-page .panel.wrapper { padding-bottom: 15px; }

/* On a phone the box keeps its own padding and stays full width. */
@media (max-width: 767px) {
  .qt-page .qt-notice { padding: 12px; font-size: 16px; margin-bottom: 15px; }
}


/* ============================================================
   Avatar hover card - Marketplace's "usercard"   (.uc-src / .uc-pop)
   ============================================================
   .uc-src is the hidden source block the helper emits beside each avatar;
   .uc-pop is the floating copy the script moves under the pointer. Both are
   brand-new class names, so no existing page can match them and nothing on
   the site is restyled by adding this.

   The `pop` class was already on two quote avatars with no markup, CSS or
   script behind it - hovering did nothing. This is what was missing. */
.uc-src { display: none; }

.uc-pop {
  position: fixed;
  z-index: 9998;
  width: 288px;
  background: #fff;
  border: 1px solid #d5dbe0;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  overflow: hidden;
  display: none;
  font-size: 13px;
  color: #363f44;
  text-align: left;
}
.uc-pop.uc-on { display: block; }

.uc-banner { height: 34px; background: #131e26; }

.uc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 14px 10px;
}
.uc-av { flex: 0 0 auto; margin-top: -26px; }
.uc-av-img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  background: #e9edf0;
}
.uc-names { min-width: 0; padding-top: 4px; }
.uc-name { font-size: 15px; color: #131e26; }
.uc-at { color: #98a6ad; font-size: 12px; }

.uc-rows { padding: 8px 14px 12px; border-top: 1px solid #edf1f2; }

/* THE POINT OF THIS CARD: every label sits on the left and its value sits on
   the right of the SAME row, in a second even column - which is how Marketplace
   shows it. Stacking the value under the label (what the site did for the
   quote description) is the thing being fixed here. */
.uc-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  line-height: 1.45;
}
.uc-k { flex: 0 0 44%; color: #98a6ad; }
.uc-v { flex: 1 1 auto; color: #363f44; word-break: break-word; }
.uc-empty { color: #b8c2c8; }

@media (max-width: 767px) {
  /* The script also clamps the position; this keeps the card comfortable. */
  .uc-pop { width: 262px; }
}


/* ---- the request card and every message row on the quote pages ------------
   Avatar on the LEFT with the text beside it - which is how the review tab and
   the support tab already look.

   The theme's global .clear is `clear: both` (style.css:2050), and that pushes
   the card's content BELOW the floated avatar instead of beside it. This site
   already carries the same one-line override in four other threads:

     .rv-thread .clear        (review tab)      line 4457
     .cm-thread .clear        (support tab)     line 4504
     .messages-page ... .clear (messages)       line 4684
     .refund-page ... .clear  (refunds)         line  354

   The quote pages were simply never given it, which is why they were the only
   place the card stacked. Same fix, same wording, scoped to .qt-page so no
   other page is touched. */
.qt-page .list-group-item .clear { clear: none; overflow: hidden; min-width: 0; }


/* ============================================================
   Round 209 - the review / support row menus accept an opened state on the
   data-dd-open attribute as well as on the `open` class.
   ============================================================
   Measured on the live site: ONE click on a chevron produced
   "add:open" immediately followed by "remove:open", so the menu opened and shut
   in the same click and the Delete link was unreachable. A second handler
   elsewhere on the page strips `open`. That handler lives outside this build
   (the page loads /static/js/extra214.js, which is not part of this package and
   not referenced by any view here), so it cannot be edited - but it also knows
   nothing about this attribute, which is what makes the state survive it.

   These two selectors cover every row menu in these threads: the review rows
   use .rv-menu / .rv-drop, and the support rows use a plain .dropdown. */
.rv-menu[data-dd-open="1"] .rv-drop,
.rv-thread .dropdown[data-dd-open="1"] > .dropdown-menu,
.cm-thread .dropdown[data-dd-open="1"] > .dropdown-menu,
.ad-thread .dropdown[data-dd-open="1"] > .dropdown-menu { display: block; }


/* ---- the quote status banner  (.qt-status) --------------------------------
   The theme's .alert is:

     display: flex; gap: 10px; padding: 12px 44px 12px 16px;
     border-radius: 12px; font-size: 13.5px;

   On THIS banner that produced the three things the screenshot shows:

     1. the 12px radius rounded the box so the coloured LEFT bar was clipped at
        both corners and looked like an inner element with white above and below
        it, instead of a border running the full height;
     2. `display: flex` + `gap: 10px` made the icon and the sentence two flex
        items, spacing them apart;
     3. the 44px right inset is room the theme reserves for a close X this
        banner does not have, so it left a dead white gap on the right.

   Marketplace's own alert is a plain block: padding 15px, essentially square
   corners, so the accent bar reaches top and bottom. This makes that one
   element behave the same way.

   Scoped to .qt-page .qt-status, which ONLY this element carries - the global
   .alert and .qt-notice are untouched, so no other page or box changes. */
.qt-page .qt-status {
  display: block;      /* NOT flex - the icon and the text are one line box */
  gap: normal;         /* neutralise the inherited 10px flex gap */
  border-radius: 0;    /* the radius was clipping the left accent bar */
  padding: 15px;       /* Marketplace's alert padding, kills the 44px right gap */
}


/* ============================================================
   Directional border utilities (.b-l-* / .b-t-* etc.) - the ones the status
   banners have always ASKED for and the theme never defined.
   ============================================================
   The quote status banner is emitted as

     <div class="alert bg-white b-a b-l-5x b-l-warning text-md">

   and .b-l-5x / .b-l-warning / .b-l-danger existed NOWHERE - not in this
   stylesheet and not on the live site (checked against the full 4909-line
   deployed file). So the left edge fell back to .b-a's plain 1px grey border
   and the coloured accent bar Marketplace's banner has could never appear. The
   values below are Marketplace's own.

   Only quotes/view.php uses these class names (verified: b-l-5x appears twice
   in the whole application), so adding them changes that one banner and
   nothing else. They are defined once, last in the file, so source order
   settles them against .b-a's shorthand without needing !important on the
   width too. */
.b-l-5x { border-left-width: 5px; }
.b-l-warning { border-left-color: #fad733 !important; }
.b-l-danger  { border-left-color: #f05050 !important; }
.b-l-success { border-left-color: #27c24c !important; }
.b-l-info    { border-left-color: #23b7e5 !important; }


/* ============================================================
   Service card rating stars   (.sp-stars)
   ============================================================
   The service card is drawn with the item card's own markup and classes
   (app/views/services/_card.php), so its rating stars used to be emitted
   with the item card's class — and the item card's rule further up this
   file,

     .item-listing-extra .hp-stars { vertical-align: -6px; }

   reaches every `.hp-stars` inside that action row, whichever card it
   belongs to. Those -6px were meant for the item card's own bottom row;
   on the service card they pushed the star row 6px below the provider
   avatar + name sitting beside it in the SAME row, so the two never
   lined up.

   The stars now carry their own class, so the two cards can be tuned
   independently and neither can reach the other:

     .item-listing-extra .hp-stars  →  -6px   (item card, unchanged)
     .item-listing-extra .sp-stars  →  -1px   (service card)

   The item card is deliberately NOT touched: it still gets its -6px from
   the rule above, and no selector here overrides it, because the class
   names no longer overlap at all.

   .sp-stars repeats .hp-stars' box properties (style.css, near line 831)
   because the span keeps the same inline-flex layout — a rename alone
   would have left the stars as a bare inline run with no gap. The
   list-view image nudge is repeated for the service list rows, which sit
   in .item-listing-title-listview like an item's do. */
.sp-stars { display: inline-flex; gap: 1px; align-items: center; }
.item-listing-extra .sp-stars { vertical-align: -1px; }
.item-listing-title-listview .sp-stars img { vertical-align: -2px; }


/* ============================================================
   Expert category page   (/experts, /experts/categories/{id}/{slug})
   ============================================================
   Scoped to the .exp-* hooks, which ONLY app/views/experts.php emits,
   so nothing here can reach another page.

   The page was built from Marketplace's markup, which floats its pieces
   together and relies on widths that never change. Three things were
   wrong on a phone, and one on desktop:

     · the header put a bare inline <img> on the h1's text line, so the
       category icon sat below the middle of the category name;
     · the results toolbar was three floats (.col-6-sm 50%, .col-2-sm,
       .col-4-sm 33%) whose widths are FIXED at every breakpoint, and
       they carried .pull-left/.pull-right, which are float:!important
       and so cannot be switched off in a media query — the count and
       the select therefore crowded each other instead of stacking;
     · the expert card floated its avatar, its action block (pulled up
       20px with .m-t-n-lg) and its "Expert in:" chips, with no clearfix
       between the name row and the chips row — so rows collided as the
       card narrowed.

   Each block below replaces floats with flex + gap. */

/* The category icon sits ON the h1's text line. An inline image aligns
   to the text baseline, which drops it below the middle of the heading,
   and the old .m-b-xs nudged it further down. Centring is what the theme
   already does for the profile page's .thumb-xs.
   flex is the other half of the same job: as a flex item the icon keeps the
   default flex-shrink:1, so a very narrow screen could take its 34px back and
   crush the folder into a sliver rather than letting the heading take one
   more line. Fixed size now. */
.exp-head h1 .thumb-xs { vertical-align: middle; flex: 0 0 auto; }

/* ---- Results toolbar: count left, category select right ---------- */
.exp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  /* .row-sm rides on this element, but a flex toolbar is not a grid row:
     all that class did was drag the count 8px to the LEFT of every panel
     underneath it (measured: count left = 12px against the cards' 20px, on
     desktop as well as phone). Its negative gutter is for real rows. */
  margin-left: 0;
  margin-right: 0;
  /* A little air under the count/select row so it does not sit directly on
     top of the first card. */
  padding-bottom: 10px;
}
.exp-toolbar .exp-count { flex: 1 1 180px; min-width: 0; }
.exp-toolbar .exp-select { flex: 0 1 300px; min-width: 0; }
.exp-toolbar .exp-select .form-control { width: 100%; }

/* ---- Expert card ------------------------------------------------- */
/* avatar | name | actions on one row with real gaps, then the
   "Expert in:" chips on their own row underneath. align-items:
   flex-start + gap replaces the float and .m-t-n-lg (-20px) that used
   to haul the buttons up next to the name. */
.exp-card .exp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}
.exp-card .exp-avatar { flex: 0 0 auto; }
.exp-card .exp-avatar a { display: block; line-height: 0; }
.exp-card .exp-info { flex: 1 1 220px; min-width: 0; }
.exp-card .exp-actions { flex: 0 0 auto; margin-left: auto; text-align: right; }
.exp-card .exp-chips { margin-top: 14px; }

/* The portfolio strip: the preview cards keep the .row-sm gutter and
   the inner panel drops its own bottom margin, so the spacing comes
   from one place instead of two. */
.exp-card .exp-portfolio .panel { margin-bottom: 0; }

/* ---- The "No results" panel -------------------------------------- */
/* The empty state is Marketplace's own: a bare .panel with a centred "No results"
   span. On a wide screen that is a 60px white strip with a word in it, which
   reads as a page that failed to load rather than a category with nothing in
   it yet. Same panel and the same "No results" line — a body that breathes,
   a muted glyph, and one sentence saying what to do next. */
.exp-empty .panel-body { padding: 40px 24px; }
.exp-empty .exp-empty-icon {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 10px;
  color: #cbd5e1;
}
.exp-empty .exp-empty-hint {
  max-width: 460px;
  margin: 10px auto 0;
  font-size: 13px;
  color: #98a6ad;
}

/* ---- Phones ------------------------------------------------------ */
@media (max-width: 767px) {
  /* Count above the select, both full width. BOTH children have to lose the
     horizontal flex-basis here, and this is the bug that was reported as
     "a huge gap on the expert category page": once the bar is a COLUMN, a
     flex-basis is measured VERTICALLY, so the count's `flex: 1 1 180px`
     (correct on desktop, where the axis is horizontal) made the box 180px
     TALL — measured COUNT_H=180 against a 19px line of text, i.e. ~160px of
     dead space under "0 to 0 of 0 results" before the select. The select was
     already reset to auto here; the count was simply missed. */
  .exp-toolbar { flex-direction: column; align-items: stretch; }
  .exp-toolbar .exp-count,
  .exp-toolbar .exp-select { flex: 0 0 auto; }

  /* The empty panel keeps a visible body on a phone instead of collapsing to a
     strip. */
  .exp-empty .panel-body { padding: 30px 18px; }

  /* Buttons take a full line of their own, left aligned, instead of
     sitting right-aligned on a wrapped line beside the name. The avatar
     and the name still pair up on their own line. */
  .exp-card .exp-actions {
    flex: 1 1 100%;
    margin-left: 0;
    text-align: left;
  }
  .exp-card .exp-actions .btn { margin-bottom: 8px; }

  /* THE PORTFOLIO ACTUALLY STACKS HERE — this is the whole "3 in one row on
     mobile" fix. `.col-md-4` in this app is 33.333% at EVERY viewport width:
     style.css declares it with no media query at all (the same trap the note
     at .follow-grid warns about and re-declares around). So the three preview
     cards stayed three-across on a phone, each roughly a hundred pixels wide.
     Above 767px the 33% still stands, so the desktop row is still three
     across, exactly like Marketplace.

     Stacked previews also need a gap of their own; side by side the gutter
     already provides it. That is why the two declarations are one rule. */
  .exp-card .exp-portfolio .row-sm > [class*="col-"] { width: 100%; margin-bottom: 14px; }
  .exp-card .exp-portfolio .row-sm > [class*="col-"]:last-child { margin-bottom: 0; }
}


/* ============================================================
   Profile header rating row   (.pf-rating)
   ============================================================
   The stars + "Average rating of X based on Y votes" line under the
   name on a profile. Only app/views/user/public_profile.php emits
   .pf-rating, and it only emits it when the owner has at least one
   review, so nothing here can reach another page.

   The row was a bare <span class="clear m-t-xs">. Both of those classes
   are INERT on an inline element — `clear: both` does nothing and a
   margin-top does nothing vertically — so the stars and the sentence
   simply flowed as one long inline run and wrapped wherever they hit
   the edge, mid-sentence. Flex gives the star block and the text block
   real boxes that stay together and then stack on a phone. */
.pf-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.pf-rating .pf-rating-stars { display: inline-flex; align-items: center; }

@media (max-width: 767px) {
  /* Stars on their own line, sentence underneath with no dangling
     indent from the desktop margin-left. */
  .pf-rating { display: block; }
  .pf-rating .pf-rating-txt { display: block; margin-left: 0; margin-top: 2px; }
}


/* ============================================================
   Statement  +  Quotes list, on a phone
   ============================================================
   Both are now  .panel > .table-responsive > table.tb-single.

   .tb-single is defined earlier in this sheet and already shared with
   /orders, /refunds and /my-items: it sets min-width: 780px and
   white-space: nowrap on every cell, so a row reads on ONE line at any
   width. That is exactly what these two tables needed — the statement
   wrapped "Sold item — ..." onto a second line on PC, and on a phone
   both tables squeezed four (statement) and six (quotes) columns into
   about 360px until the text broke mid-word.

   The only thing .tb-single cannot supply is the scroll container's momentum
   behaviour on a phone. */
.qt-page .table-responsive,
.st-page .table-responsive { -webkit-overflow-scrolling: touch; }

/* REMOVED 2026-09-14 — the Quotes status-filter override that used to sit here,
   inside a @media (max-width: 767px) block: it forced that select to
   float:none, width:100% and a 6px top margin, on the reasoning that a
   150px right-floated select "has no business floating on a phone". In practice
   it was the reason the Quotes strip header did not match the /jobs one on
   EITHER breakpoint: on a phone it produced a full-width slab under the
   heading, and on PC it was inert while the select still carried `w-sm`, whose
   width:150px loses to .form-control's width:100% — so the box was full width
   there too and dropped onto the line below the title.

   The /jobs strip header has no override at all and reads correctly at 360px
   (compact, right-floated), which is the behaviour these two pages are meant to
   share. The select's markup now carries width:auto inline, so nothing here is
   needed. The rule is DELETED rather than left dead so that a future
   `.qt-filter` cannot silently re-break that alignment. */


/* ============================================================
   Expert category page — Marketplace's OWN values, scoped
   ============================================================
   Read out of Marketplace's stylesheets (static/css/app.css and
   style118.css) rather than eyeballed. Both classes below are used
   site-wide here, so Marketplace's numbers are applied to .exp-card ONLY —
   .thumb-lg is a 72px box on every item card, and .profile-avatar-sm is
   the square avatar everywhere else. Nothing outside the expert card
   moves.

     Marketplace  .thumb-lg          display:inline-block; width:96px;
     Marketplace  .thumb-lg img      max-width:100%; height:auto; vertical-align:middle;
     Marketplace  .profile-avatar-sm border:3px solid #fff; border-radius:8px;

   Our .thumb-lg pins BOTH width and height to 72px with object-fit:cover,
   so the avatar filled its box edge to edge and the card read as having
   no padding. Marketplace's box is 96px wide while the <img> keeps its own
   72px attributes — those spare 24px are the breathing room around the
   avatar in the reference. Same reason for the avatar's white border. */

/* The heading, with its 34px icon, is one line-box per line. As flex the
   icon is centred against the whole wrapped title instead of sitting on
   the first baseline, which is what made it look "not aligned". */
.exp-head h1 { display: flex; align-items: center; }

.exp-card .thumb-lg { width: 96px; height: auto; border-radius: 0; }
.exp-card .thumb-lg img { max-width: 100%; height: auto; vertical-align: middle; }
.exp-card .profile-avatar-sm {
  border: 3px solid #ffffff;
  border-radius: 8px;
  background-color: #ffffff;
}

/* ---- Phones ------------------------------------------------------ */
@media (max-width: 767px) {
  /* The title is .h2 — 30px at every width. With the 34px icon beside it,
     "Web Designers & Web Developers" needed three lines on a 335px content
     box and read as a header that "doesn't show full". 22px fits it in two
     and keeps the paragraph below it in view. */
  .exp-head h1 { font-size: 22px; line-height: 1.3; }

  /* And with 3-4 wrapped lines the icon was still centred against the WHOLE
     block — align-items:center is right for a ONE-line title, but on a phone
     it parked the folder beside a middle line, floating in the text. Pinning
     it to the first line is where Marketplace's own icon sits. 28px is chosen to
     match the phone line box (22px x 1.3 = 28.6px), so the icon centres on
     that first line on its own without a magic offset. */
  .exp-head h1 { align-items: flex-start; }
  .exp-head h1 .thumb-xs { width: 28px; height: 28px; margin-right: 10px !important; }

  .exp-head p { font-size: 14px; }

  /* The filter box gets air above it once the toolbar stacks, instead of
     butting straight up against the results count. */
  .exp-toolbar { gap: 10px; }
}

/* ---- Tablets: the heading's column must stack too ------------------ */
/* The heading sits in the ONE .col-md-8 in this strip, and nothing ever reset
   it below the desktop breakpoint — the theme's own grid fix ("Round 102")
   covers .col-md-9 and nothing else. So the h1 and the intro stayed at two
   thirds width with dead space beside them, which is what wrapped the heading
   to FOUR lines at 320px: the reported "header section is broken on mobile".
   991px is the same breakpoint the theme's grid fix uses, so the column stacks
   exactly when the rest of the grid does. Scoped to .exp-head, so no other
   page's col-md-8 is touched. */
@media (max-width: 991px) {
  .exp-head .col-md-8 { width: 100%; }
}


/* ==========================================================================
   ROUND 206 - GLOBAL CARD GRID: 1 card per row on phones, 2 per row on tablets
   ==========================================================================
   This block is deliberately LAST in the file: whatever any earlier rule says
   about a card's column width, this one is read after it and wins.

   WHY EVERY CARD BROKE (one cause, all card pages)
   Every card in the app is a column carrying an md width AND an sm width:
     cl_card()                 -> col-md-4 col-sm-6   (all item grids)
     hp_row_card (home rows)   -> col-md-3 col-sm-6   (New Releases etc.)
     services/_card.php        -> col-md-4 col-sm-6   (Services)
     collection tiles          -> col-md-3 col-sm-4   (/collections)
     profile collections tab   -> col-md-4 col-sm-6
     other items by author     -> col-md-6 col-sm-6
   In this theme every .col-md-* width is declared WITHOUT a media query, so it
   applies at EVERY screen size - and those declarations sit BELOW the col-sm
   phone reset in the file. Same specificity, later in the file: the md width
   always won. So on a 390px phone a card stayed 33% / 25% / 50% wide - pinned
   to the left of an otherwise empty row - and on a 768px tablet the same rule
   gave 3 or 4 cards per row instead of 2.

   WHAT THIS DOES (the whole fix, one place)
     < 768px  (phone)  -> 100%  = ONE card per row
     768-991px (tablet) -> 50%   = TWO cards per row
     >= 992px (PC)     -> NOT TOUCHED - desktop geometry is exactly as it was

   Only CARD columns are matched (.col-md-3 / -4 / -6 / -8), and only directly
   inside a .row. Anything carrying col-xs-* is skipped on purpose, so these
   keep their own design:
     - item page screenshot tiles   (.col-xs-2, 6 per row on phones)
     - toolbar rows                 (.col-xs-6 grid/list toggle + sort select)
     - achievements tiles           (.col-xs-6 col-sm-4, 2-up on phones)
     - blog share buttons           (.col-xs-3)
   Sidebars and non-card layout keep their behaviour as well: the profile shell
   (.col-sm-3 + .col-sm-9), list/table rows (col-md-12 col-sm-12) and grids with
   their own scoped rules (.follow-grid, .related-grid, .cl-page, .exp-card,
   .share-box) are unaffected - and where they really are card grids, 50% on a
   tablet is exactly what those rules already ask for.
   ========================================================================== */
@media (max-width: 767px) {
  .row > .col-md-3:not([class*="col-xs-"]),
  .row > .col-md-4:not([class*="col-xs-"]),
  .row > .col-md-6:not([class*="col-xs-"]),
  .row > .col-md-8:not([class*="col-xs-"]) { width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .row > .col-md-3:not([class*="col-xs-"]),
  .row > .col-md-4:not([class*="col-xs-"]),
  .row > .col-md-6:not([class*="col-xs-"]) { width: 50% !important; }
}