/* ============================================================
   NOCHOMAJ MARKETPLACE — style.css  v1.0
   Brand: #0d1033 (dark)  |  #ff5e00 (primary/orange)
   ============================================================ */

:root {
  --ncm-primary:  #ff5e00;
  --ncm-primary2: #e05200;
  --ncm-dark:     #0d1033;
  --ncm-text:     #3d3f4e;
  --ncm-muted:    #6b6e82;
  --ncm-border:   #e5e7ef;
  --ncm-bg:       #f6f7fb;
  --ncm-white:    #ffffff;
  --ncm-topbar:   68px;
  --ncm-nav:      46px;
  --ncm-radius:   6px;
  --ncm-shadow:   0 2px 10px rgba(13,16,51,.07);
  --ncm-shadow-md:0 6px 24px rgba(13,16,51,.11);
  --ncm-shadow-lg:0 12px 48px rgba(13,16,51,.15);
  --ncm-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── Reset scoped ── */
#ncm-header *, .ncm-dash *, .ncm-listing-wrap *,
.ncm-messages-wrap *, .ncm-form-wrap *, .ncm-become-vendor-wrap *,
.ncm-modal * { box-sizing: border-box; }

#ncm-header, .ncm-dash, .ncm-listing-wrap, .ncm-messages-wrap,
.ncm-form-wrap, .ncm-become-vendor-wrap, .ncm-modal {
  font-family: var(--ncm-font);
  color: var(--ncm-text);
}

/* ════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════ */
#ncm-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  background: var(--ncm-white);
  box-shadow: var(--ncm-shadow);
}
#ncm-header.scrolled { box-shadow: 0 2px 16px rgba(13,16,51,.12); }

.ncm-wrap {
  display: flex;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  gap: 18px;
}

/* Topbar */
.ncm-topbar {
  height: var(--ncm-topbar);
  border-bottom: 1px solid var(--ncm-border);
}
.ncm-logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; }
.ncm-logo img { height: 40px; width: auto; display: block; }

/* Search */
.ncm-search {
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ncm-border);
  border-radius: 50px;
  overflow: hidden;
  background: var(--ncm-bg);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ncm-search:focus-within {
  border-color: var(--ncm-primary);
  background: var(--ncm-white);
  box-shadow: 0 0 0 3px rgba(255,94,0,.12);
}
.ncm-search input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 11px 18px; font-size: 14px; color: var(--ncm-text);
  font-family: var(--ncm-font);
}
.ncm-search input::placeholder { color: #aab; }
.ncm-search button {
  flex-shrink: 0; border: none; background: var(--ncm-dark);
  color: var(--ncm-white); padding: 0 20px; height: 100%;
  min-height: 44px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background .18s;
}
.ncm-search button:hover { background: var(--ncm-primary); }

/* Actions */
.ncm-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.ncm-link-nav { font-size: 13.5px; font-weight: 500; color: var(--ncm-muted); text-decoration: none; white-space: nowrap; transition: color .15s; }
.ncm-link-nav:hover { color: var(--ncm-dark); }

/* Buttons */
.ncm-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--ncm-radius);
  font-size: 13.5px; font-weight: 600; font-family: var(--ncm-font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent; transition: all .18s; line-height: 1;
}
.ncm-btn svg { flex-shrink: 0; }
.ncm-btn-primary { background: var(--ncm-primary); color: #fff; border-color: var(--ncm-primary); }
.ncm-btn-primary:hover { background: var(--ncm-primary2); border-color: var(--ncm-primary2); color: #fff; }
.ncm-btn-ghost { background: transparent; color: var(--ncm-dark); border-color: var(--ncm-border); }
.ncm-btn-ghost:hover { border-color: var(--ncm-dark); color: var(--ncm-dark); }
.ncm-btn-outline { background: transparent; color: var(--ncm-primary); border-color: var(--ncm-primary); }
.ncm-btn-outline:hover { background: var(--ncm-primary); color: #fff; }
.ncm-btn-dark { background: var(--ncm-dark); color: #fff; border-color: var(--ncm-dark); }
.ncm-btn-dark:hover { opacity: .88; }
.ncm-btn-sm { padding: 6px 12px; font-size: 12.5px; }
.ncm-block { display: flex; width: 100%; justify-content: center; }

/* Icon nav */
.ncm-icon-nav {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ncm-border);
  color: var(--ncm-muted); text-decoration: none; transition: all .18s;
}
.ncm-icon-nav:hover { border-color: var(--ncm-dark); color: var(--ncm-dark); }
.ncm-badge-dot {
  position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ncm-primary); border: 2px solid #fff;
}

/* User menu */
.ncm-user { position: relative; }
.ncm-user-btn {
  display: flex; align-items: center; gap: 9px; background: transparent;
  border: 1.5px solid var(--ncm-border); border-radius: 50px;
  padding: 5px 12px 5px 5px; cursor: pointer; font-family: var(--ncm-font);
  transition: border-color .18s, box-shadow .18s;
}
.ncm-user-btn:hover, .ncm-user.open .ncm-user-btn {
  border-color: var(--ncm-primary);
  box-shadow: 0 0 0 3px rgba(255,94,0,.10);
}
.ncm-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.ncm-avatar-md { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; }
.ncm-avatar-lg { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; }
.ncm-user-name { font-size: 13.5px; font-weight: 600; color: var(--ncm-dark); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncm-caret { color: var(--ncm-muted); transition: transform .18s; flex-shrink: 0; }
.ncm-user.open .ncm-caret { transform: rotate(180deg); }

/* Dropdown */
.ncm-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 244px; background: var(--ncm-white);
  border: 1px solid var(--ncm-border); border-radius: 10px;
  box-shadow: var(--ncm-shadow-lg); z-index: 9100; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .15s, transform .15s;
}
.ncm-user.open .ncm-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
.ncm-dd-top { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--ncm-bg); border-bottom: 1px solid var(--ncm-border); }
.ncm-dd-top strong { display: block; font-size: 14px; color: var(--ncm-dark); }
.ncm-role-pill { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.ncm-role-pill.vendeur, .ncm-role-pill.administrator { background: #fff0e6; color: var(--ncm-primary); }
.ncm-role-pill.client { background: #e8eaf6; color: var(--ncm-dark); }
.ncm-dd-section { padding: 5px 0; border-bottom: 1px solid var(--ncm-border); }
.ncm-dd-section:last-child { border-bottom: none; }
.ncm-dd-section a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13.5px; color: var(--ncm-text); text-decoration: none; transition: background .12s; }
.ncm-dd-section a:hover { background: var(--ncm-bg); color: var(--ncm-dark); }
.ncm-dd-section a.ncm-logout { color: #c0392b; }
.ncm-dd-section a.ncm-logout:hover { background: #fff5f5; }

/* Nav categories */
.ncm-nav { height: var(--ncm-nav); background: var(--ncm-white); border-bottom: 1px solid var(--ncm-border); position: relative; overflow: hidden; }
.ncm-nav .ncm-wrap { position: relative; }
.ncm-nav-list { display: flex; list-style: none; margin: 0; padding: 0; height: var(--ncm-nav); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1; }
.ncm-nav-list::-webkit-scrollbar { display: none; }
.ncm-nav-list li a { display: flex; align-items: center; gap: 6px; height: var(--ncm-nav); padding: 0 14px; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--ncm-text); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.ncm-nav-list li a:hover, .ncm-nav-list li a.active { color: var(--ncm-primary); border-bottom-color: var(--ncm-primary); }
.ncm-nav-arrow { position: absolute; right: 28px; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: flex-end; background: linear-gradient(to right, transparent, white 50%); border: none; cursor: pointer; color: var(--ncm-muted); transition: color .15s; padding: 0; }
.ncm-nav-arrow:hover { color: var(--ncm-primary); }
.ncm-nav-arrow.hidden { display: none; }

/* Hamburger */
.ncm-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 1.5px solid var(--ncm-border); border-radius: var(--ncm-radius); padding: 7px 8px; cursor: pointer; }
.ncm-hamburger span { display: block; width: 20px; height: 2px; background: var(--ncm-dark); border-radius: 2px; }

/* Mobile menu */
.ncm-mobile { display: none; position: fixed; inset: 0; z-index: 9200; }
.ncm-mobile.open { display: flex; }
.ncm-mobile-backdrop { position: absolute; inset: 0; background: rgba(13,16,51,.45); }
.ncm-mobile-panel {
  position: relative; z-index: 1; width: min(320px,88vw); height: 100%;
  background: var(--ncm-white); overflow-y: auto; margin-left: auto;
  display: flex; flex-direction: column;
  animation: ncmPanelIn .22s ease;
}
@keyframes ncmPanelIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
.ncm-mobile-close { display: flex; align-items: center; justify-content: flex-end; padding: 16px 20px; background: none; border: none; cursor: pointer; color: var(--ncm-muted); width: 100%; }
.ncm-mobile-search { margin: 0 16px 16px; border-radius: 50px; }
.ncm-mobile-user-info { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--ncm-bg); border-bottom: 1px solid var(--ncm-border); }
.ncm-mobile-user-info strong { display: block; font-size: 14px; color: var(--ncm-dark); }
.ncm-mobile-user-info span { font-size: 12px; color: var(--ncm-muted); }
.ncm-mobile-nav { display: flex; flex-direction: column; padding: 8px 12px; }
.ncm-mobile-nav a { padding: 11px 12px; font-size: 14px; color: var(--ncm-text); text-decoration: none; border-radius: var(--ncm-radius); transition: background .12s; }
.ncm-mobile-nav a:hover { background: var(--ncm-bg); }
.ncm-mobile-nav a.ncm-logout-link { color: #c0392b; }
.ncm-mobile-section-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ncm-muted); padding: 16px 20px 6px; margin: 0; }
.ncm-mobile-cats { display: flex; flex-direction: column; padding: 0 12px 20px; }
.ncm-mobile-cats a { padding: 10px 12px; font-size: 13.5px; color: var(--ncm-text); text-decoration: none; border-radius: var(--ncm-radius); transition: background .12s; }
.ncm-mobile-cats a:hover { background: var(--ncm-bg); }

/* Responsive header */
@media(max-width:900px){ .ncm-search{max-width:300px;} }
@media(max-width:768px){
  .ncm-search,.ncm-nav,.ncm-btn:not(.ncm-hamburger),.ncm-link-nav,.ncm-icon-nav{display:none!important;}
  .ncm-hamburger{display:flex!important;}
}

/* ════════════════════════════════════════════════════════
   SERVICES LISTING
════════════════════════════════════════════════════════ */
.ncm-listing-wrap {
  max-width: 1400px; margin: 0 auto; padding: 32px 24px 60px;
  display: grid; grid-template-columns: 260px 1fr; gap: 28px;
}
@media(max-width:900px){ .ncm-listing-wrap{grid-template-columns:1fr;} }

/* Filters sidebar */
.ncm-filters {
  background: var(--ncm-white); border: 1px solid var(--ncm-border);
  border-radius: 10px; padding: 20px; height: fit-content;
  position: sticky; top: calc(var(--ncm-topbar) + var(--ncm-nav) + 16px);
}
.ncm-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ncm-filters-head strong { font-size: 15px; color: var(--ncm-dark); font-weight: 700; }
.ncm-filter-reset { background: none; border: none; font-size: 12.5px; color: var(--ncm-primary); cursor: pointer; font-weight: 600; }
.ncm-filter-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ncm-border); }
.ncm-filter-section:last-of-type { border-bottom: none; }
.ncm-filter-section h4 { font-size: 13px; font-weight: 700; color: var(--ncm-dark); margin: 0 0 10px 0; }
.ncm-radio { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; cursor: pointer; font-size: 13.5px; }
.ncm-radio input { accent-color: var(--ncm-primary); }
.ncm-radio em { font-style: normal; color: var(--ncm-muted); font-size: 12px; }
.ncm-range-row { display: flex; align-items: center; gap: 8px; }
.ncm-range-row input { flex: 1; padding: 7px 10px; border: 1.5px solid var(--ncm-border); border-radius: var(--ncm-radius); font-size: 13px; outline: none; }
.ncm-range-row input:focus { border-color: var(--ncm-primary); }
.ncm-apply-filters { margin-top: 8px; }

/* Toolbar */
.ncm-listing-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.ncm-listing-count { font-size: 14px; color: var(--ncm-muted); }
.ncm-listing-count span { font-weight: 700; color: var(--ncm-dark); }
.ncm-search-term { margin-left: 6px; }
.ncm-listing-sort { display: flex; align-items: center; gap: 10px; }
.ncm-listing-sort label { font-size: 13px; color: var(--ncm-muted); }
.ncm-listing-sort select { padding: 7px 12px; border: 1.5px solid var(--ncm-border); border-radius: var(--ncm-radius); font-size: 13.5px; outline: none; cursor: pointer; }
.ncm-listing-sort select:focus { border-color: var(--ncm-primary); }
.ncm-filter-toggle-btn { display: none; }
@media(max-width:900px){ .ncm-filter-toggle-btn{display:flex;align-items:center;gap:6px;} }

/* Gig grid */
.ncm-gig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.ncm-grid-empty { grid-column: 1/-1; }

/* Gig card */
.ncm-gig-card {
  background: var(--ncm-white); border: 1px solid var(--ncm-border);
  border-radius: 10px; overflow: hidden; position: relative;
  transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.ncm-gig-card:hover { box-shadow: var(--ncm-shadow-md); transform: translateY(-3px); }
.ncm-gig-thumb-link { display: block; position: relative; padding-top: 66%; overflow: hidden; }
.ncm-gig-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ncm-gig-card:hover .ncm-gig-thumb { transform: scale(1.04); }
.ncm-gig-thumb-placeholder { position: absolute; inset: 0; background: var(--ncm-bg); display: flex; align-items: center; justify-content: center; color: #ccd; }
.ncm-gig-delivery-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(13,16,51,.75); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
.ncm-fav-btn {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(255,255,255,.85); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ncm-muted); transition: all .15s;
}
.ncm-fav-btn:hover, .ncm-fav-btn.active { color: var(--ncm-primary); background: #fff; }
.ncm-gig-body { padding: 12px 14px; flex: 1; }
.ncm-gig-author { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.ncm-gig-author-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ncm-gig-author-name { font-size: 12.5px; font-weight: 600; color: var(--ncm-muted); text-decoration: none; }
.ncm-gig-author-name:hover { color: var(--ncm-primary); }
.ncm-gig-title { display: block; font-size: 14px; font-weight: 600; color: var(--ncm-dark); text-decoration: none; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncm-gig-title:hover { color: var(--ncm-primary); }
.ncm-gig-rating { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.ncm-stars { color: #f0a500; font-size: 13px; }
.ncm-rating-val { font-weight: 700; color: var(--ncm-dark); }
.ncm-review-count { color: var(--ncm-muted); }
.ncm-gig-footer { padding: 10px 14px; border-top: 1px solid var(--ncm-border); display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ncm-gig-price-from { font-size: 11.5px; color: var(--ncm-muted); }
.ncm-gig-price { font-size: 16px; font-weight: 800; color: var(--ncm-dark); }

/* Load more */
.ncm-load-more-wrap { text-align: center; margin-top: 32px; }

/* ════════════════════════════════════════════════════════
   DASHBOARD COMMUN
════════════════════════════════════════════════════════ */
.ncm-dash { max-width: 1200px; margin: 0 auto; padding: 36px 24px 60px; }
.ncm-dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.ncm-dash-identity { display: flex; align-items: center; gap: 16px; }
.ncm-dash-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ncm-border); }
.ncm-dash-title { font-size: 24px; font-weight: 800; color: var(--ncm-dark); }
.ncm-dash-sub { font-size: 14px; color: var(--ncm-muted); margin-top: 4px; }
.ncm-dash-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Stats */
.ncm-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
@media(max-width:900px){ .ncm-stats{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .ncm-stats{grid-template-columns:1fr;} }
.ncm-stat { background: var(--ncm-white); border: 1px solid var(--ncm-border); border-radius: 10px; padding: 22px 20px; border-top: 3px solid transparent; box-shadow: var(--ncm-shadow); transition: box-shadow .18s, transform .18s; }
.ncm-stat:hover { box-shadow: var(--ncm-shadow-md); transform: translateY(-2px); }
.ncm-stat.orange { border-top-color: var(--ncm-primary); }
.ncm-stat.dark   { border-top-color: var(--ncm-dark);    }
.ncm-stat.teal   { border-top-color: #00897b;            }
.ncm-stat.violet { border-top-color: #7c3aed;            }
.ncm-stat-ico { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ncm-stat.orange .ncm-stat-ico { background: #fff0e6; color: var(--ncm-primary); }
.ncm-stat.dark   .ncm-stat-ico { background: #e8eaf6; color: var(--ncm-dark);   }
.ncm-stat.teal   .ncm-stat-ico { background: #e0f2f1; color: #00897b;           }
.ncm-stat.violet .ncm-stat-ico { background: #ede9fe; color: #7c3aed;           }
.ncm-stat-val { font-size: 28px; font-weight: 800; color: var(--ncm-dark); }
.ncm-stat-lbl { font-size: 13px; color: var(--ncm-muted); margin-top: 4px; }

/* Cards */
.ncm-card { background: var(--ncm-white); border: 1px solid var(--ncm-border); border-radius: 10px; box-shadow: var(--ncm-shadow); margin-bottom: 20px; overflow: hidden; }
.ncm-card-alert { border-left: 3px solid var(--ncm-primary); }
.ncm-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--ncm-border); background: var(--ncm-bg); }
.ncm-card-head h3 { font-size: 15px; font-weight: 700; color: var(--ncm-dark); display: flex; align-items: center; gap: 8px; margin: 0; }
.ncm-card-head h3 svg { color: var(--ncm-primary); }
.ncm-card-body { padding: 20px; }

/* Grid 2col */
.ncm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width:768px){ .ncm-grid-2{grid-template-columns:1fr;} }
.ncm-grid-full { grid-column: 1/-1; }

/* Table */
.ncm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ncm-table th { text-align: left; padding: 9px 12px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ncm-muted); border-bottom: 2px solid var(--ncm-border); white-space: nowrap; }
.ncm-table td { padding: 11px 12px; border-bottom: 1px solid #f0f1f6; vertical-align: middle; }
.ncm-table tr:last-child td { border-bottom: none; }
.ncm-table tr:hover td { background: #fafbff; }
.ncm-table a { color: var(--ncm-dark); text-decoration: none; font-weight: 600; }
.ncm-table a:hover { color: var(--ncm-primary); }

/* Badges */
.ncm-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ncm-badge-publish, .ncm-badge-completed { background: #e8f5e9; color: #2e7d32; }
.ncm-badge-draft    { background: #f5f5f5; color: #666; }
.ncm-badge-pending  { background: #fff3e0; color: #e65100; }
.ncm-badge-in_progress, .ncm-badge-active { background: #e3f2fd; color: #1565c0; }
.ncm-badge-delivered{ background: #f3e5f5; color: #6a1b9a; }
.ncm-badge-cancelled{ background: #ffebee; color: #c62828; }

/* Tabs */
.ncm-tabs { display: flex; border-bottom: 2px solid var(--ncm-border); gap: 0; overflow-x: auto; scrollbar-width: none; }
.ncm-tabs::-webkit-scrollbar { display: none; }
.ncm-tab { padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--ncm-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; white-space: nowrap; user-select: none; }
.ncm-tab:hover { color: var(--ncm-dark); }
.ncm-tab.active { color: var(--ncm-primary); border-bottom-color: var(--ncm-primary); }
.ncm-tab-pane { display: none; padding-top: 16px; }
.ncm-tab-pane.active { display: block; }

/* Icon button */
.ncm-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid var(--ncm-border); background: var(--ncm-white); cursor: pointer; color: var(--ncm-muted); transition: all .15s; text-decoration: none; }
.ncm-icon-btn:hover { color: var(--ncm-dark); border-color: var(--ncm-dark); }
.ncm-icon-btn.danger:hover { color: #c0392b; border-color: #c0392b; background: #fff5f5; }
.ncm-tbl-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ncm-thumb { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--ncm-border); display: block; }

/* Empty state */
.ncm-empty-state { text-align: center; padding: 40px 20px; color: var(--ncm-muted); }
.ncm-empty-state svg { opacity: .25; display: block; margin: 0 auto 14px; }
.ncm-empty-state p { font-size: 14px; margin-bottom: 18px; }

/* Service list */
.ncm-service-list { display: flex; flex-direction: column; gap: 10px; }
.ncm-service-item { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--ncm-border); border-radius: 8px; text-decoration: none; transition: box-shadow .18s; }
.ncm-service-item:hover { box-shadow: var(--ncm-shadow-md); }
.ncm-service-item-img { width: 70px; height: 52px; object-fit: cover; border-radius: 5px; border: 1px solid var(--ncm-border); flex-shrink: 0; }
.ncm-img-placeholder { background: var(--ncm-bg); display: flex; align-items: center; justify-content: center; color: #ccd; }
.ncm-service-item-body { flex: 1; min-width: 0; }
.ncm-service-item-title { font-size: 13.5px; font-weight: 600; color: var(--ncm-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncm-service-item-author { font-size: 12px; color: var(--ncm-muted); margin-top: 2px; }
.ncm-service-item-price { font-size: 13px; font-weight: 700; color: var(--ncm-primary); margin-top: 4px; }

/* Cat grid */
.ncm-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.ncm-cat-item { display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: var(--ncm-bg); border: 1px solid var(--ncm-border); border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ncm-text); text-decoration: none; transition: all .15s; }
.ncm-cat-item:hover { background: #fff0e6; border-color: var(--ncm-primary); color: var(--ncm-primary); }

/* Auth gate */
.ncm-auth-gate { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.ncm-auth-gate-inner { text-align: center; max-width: 360px; padding: 48px 32px; background: var(--ncm-white); border: 1px solid var(--ncm-border); border-radius: 12px; box-shadow: var(--ncm-shadow); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ncm-auth-gate-inner h3 { font-size: 20px; color: var(--ncm-dark); }
.ncm-auth-gate-inner p { font-size: 14px; color: var(--ncm-muted); margin: 0; }

/* ════════════════════════════════════════════════════════
   FORMS (gig + become vendor)
════════════════════════════════════════════════════════ */
.ncm-form-wrap { max-width: 780px; margin: 0 auto; padding: 36px 24px 60px; }
.ncm-form-wrap h1 { font-size: 26px; font-weight: 800; color: var(--ncm-dark); margin-bottom: 6px; }
.ncm-form-wrap > p { font-size: 14px; color: var(--ncm-muted); margin-bottom: 28px; }
.ncm-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ncm-muted); margin-bottom: 20px; }
.ncm-breadcrumb a { color: var(--ncm-muted); text-decoration: none; font-weight: 500; }
.ncm-breadcrumb a:hover { color: var(--ncm-primary); }

.ncm-form { display: flex; flex-direction: column; gap: 0; }
.ncm-form-section { background: var(--ncm-white); border: 1px solid var(--ncm-border); border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.ncm-form-section-title { font-size: 16px; font-weight: 700; color: var(--ncm-dark); margin: 0 0 20px 0; padding-bottom: 14px; border-bottom: 1px solid var(--ncm-border); }
.ncm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:600px){ .ncm-form-row{grid-template-columns:1fr;} }
.ncm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ncm-field:last-child { margin-bottom: 0; }
.ncm-field label { font-size: 13px; font-weight: 700; color: var(--ncm-dark); }
.ncm-req { color: var(--ncm-primary); }
.ncm-field input[type="text"],
.ncm-field input[type="number"],
.ncm-field input[type="email"],
.ncm-field input[type="file"],
.ncm-field select,
.ncm-field textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--ncm-border);
  border-radius: var(--ncm-radius); font-size: 14px; font-family: var(--ncm-font);
  color: var(--ncm-text); background: var(--ncm-white); outline: none; transition: border-color .18s, box-shadow .18s;
}
.ncm-field input:focus, .ncm-field select:focus, .ncm-field textarea:focus { border-color: var(--ncm-primary); box-shadow: 0 0 0 3px rgba(255,94,0,.10); }
.ncm-field textarea { resize: vertical; min-height: 120px; }
.ncm-hint { font-size: 12px; color: var(--ncm-muted); }
.ncm-form-submit { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.ncm-form-msg { font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: var(--ncm-radius); }
.ncm-form-msg.success { background: #e8f5e9; color: #2e7d32; }
.ncm-form-msg.error   { background: #ffebee; color: #c62828; }

/* Packages grid */
.ncm-packages-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media(max-width:700px){ .ncm-packages-grid{grid-template-columns:1fr;} }
.ncm-pkg-card { border: 1.5px solid var(--ncm-border); border-radius: 10px; overflow: hidden; }
.ncm-pkg-card.required { border-color: var(--ncm-primary); }
.ncm-pkg-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--ncm-bg); border-bottom: 1px solid var(--ncm-border); }
.ncm-pkg-header strong { font-size: 14px; color: var(--ncm-dark); font-weight: 700; }
.ncm-pkg-fields { padding: 16px; }
.ncm-pkg-hidden { display: none; }
.ncm-toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ncm-muted); }
.ncm-toggle-switch input { accent-color: var(--ncm-primary); width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════
   MESSAGES
════════════════════════════════════════════════════════ */
.ncm-messages-wrap { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - var(--ncm-topbar) - var(--ncm-nav) - 2px); max-height: 700px; margin: 0 auto; max-width: 1100px; padding: 24px; gap: 0; }
@media(max-width:700px){ .ncm-messages-wrap{grid-template-columns:1fr; padding:12px;} }
.ncm-conv-list { border: 1px solid var(--ncm-border); border-radius: 10px 0 0 10px; overflow-y: auto; background: var(--ncm-white); }
.ncm-conv-head { padding: 16px; border-bottom: 1px solid var(--ncm-border); background: var(--ncm-bg); }
.ncm-conv-head strong { font-size: 15px; font-weight: 700; color: var(--ncm-dark); }
.ncm-conv-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ncm-border); text-decoration: none; transition: background .12s; }
.ncm-conv-item:hover, .ncm-conv-item.active { background: var(--ncm-bg); }
.ncm-conv-item.active { border-left: 3px solid var(--ncm-primary); }
.ncm-conv-body { flex: 1; min-width: 0; }
.ncm-conv-name { font-size: 13.5px; font-weight: 700; color: var(--ncm-dark); display: flex; align-items: center; gap: 6px; }
.ncm-conv-preview { font-size: 12.5px; color: var(--ncm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ncm-conv-time { font-size: 11px; color: var(--ncm-muted); white-space: nowrap; }
.ncm-unread-count { background: var(--ncm-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
.ncm-conv-empty { padding: 32px 16px; text-align: center; color: var(--ncm-muted); font-size: 13px; }

/* Chat zone */
.ncm-chat-zone { border: 1px solid var(--ncm-border); border-left: none; border-radius: 0 10px 10px 0; display: flex; flex-direction: column; background: var(--ncm-white); overflow: hidden; }
.ncm-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ncm-border); background: var(--ncm-bg); }
.ncm-chat-head strong { font-size: 15px; font-weight: 700; color: var(--ncm-dark); }
.ncm-chat-head span { font-size: 12px; color: var(--ncm-muted); display: block; }
.ncm-messages-feed { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ncm-msg { display: flex; align-items: flex-end; gap: 8px; }
.ncm-msg-mine { flex-direction: row-reverse; }
.ncm-msg-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.ncm-msg-bubble { max-width: 68%; }
.ncm-msg-text { display: block; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-break: break-word; }
.ncm-msg-theirs .ncm-msg-text { background: var(--ncm-bg); color: var(--ncm-text); border-bottom-left-radius: 4px; }
.ncm-msg-mine .ncm-msg-text { background: var(--ncm-primary); color: #fff; border-bottom-right-radius: 4px; }
.ncm-msg-time { display: block; font-size: 11px; color: var(--ncm-muted); margin-top: 4px; text-align: right; }
.ncm-msg-theirs .ncm-msg-time { text-align: left; }
.ncm-chat-form { display: flex; align-items: flex-end; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--ncm-border); background: var(--ncm-white); }
.ncm-chat-form textarea { flex: 1; border: 1.5px solid var(--ncm-border); border-radius: 20px; padding: 10px 16px; font-size: 14px; font-family: var(--ncm-font); outline: none; resize: none; max-height: 120px; line-height: 1.5; }
.ncm-chat-form textarea:focus { border-color: var(--ncm-primary); }
.ncm-chat-send { width: 40px; height: 40px; border-radius: 50%; background: var(--ncm-primary); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .18s; }
.ncm-chat-send:hover { background: var(--ncm-primary2); }
.ncm-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ncm-muted); text-align: center; padding: 40px; gap: 16px; }
.ncm-chat-empty svg { opacity: .2; }
.ncm-chat-empty h3 { font-size: 18px; color: var(--ncm-dark); margin: 0; }
.ncm-chat-empty p { font-size: 14px; margin: 0; }

/* ════════════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════════════ */
.ncm-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; background: rgba(13,16,51,.45); }
.ncm-modal-box { background: var(--ncm-white); border-radius: 12px; padding: 28px; max-width: 480px; width: 92%; box-shadow: var(--ncm-shadow-lg); animation: ncmModalIn .18s ease; }
@keyframes ncmModalIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.ncm-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ncm-modal-head strong { font-size: 17px; font-weight: 700; color: var(--ncm-dark); }
.ncm-modal-close { background: none; border: none; cursor: pointer; color: var(--ncm-muted); display: flex; align-items: center; justify-content: center; border-radius: 4px; padding: 4px; }
.ncm-modal-close:hover { color: var(--ncm-dark); }

/* Star picker */
.ncm-star-picker { display: flex; gap: 4px; }
.ncm-star { font-size: 28px; color: #ddd; cursor: pointer; transition: color .12s; }
.ncm-star.active, .ncm-star:hover { color: #f0a500; }

/* ════════════════════════════════════════════════════════
   BECOME VENDOR
════════════════════════════════════════════════════════ */
.ncm-become-vendor-wrap { max-width: 820px; margin: 0 auto; padding: 40px 24px 60px; }
.ncm-bv-hero { text-align: center; margin-bottom: 40px; }
.ncm-bv-hero h1 { font-size: 30px; font-weight: 800; color: var(--ncm-dark); margin-bottom: 10px; }
.ncm-bv-hero p { font-size: 16px; color: var(--ncm-muted); }
.ncm-bv-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 40px; }
@media(max-width:600px){ .ncm-bv-features{grid-template-columns:1fr;} }
.ncm-bv-feature { display: flex; gap: 14px; padding: 20px; background: var(--ncm-bg); border-radius: 10px; border: 1px solid var(--ncm-border); }
.ncm-bv-feature svg { flex-shrink: 0; margin-top: 2px; }
.ncm-bv-feature strong { display: block; font-size: 14px; color: var(--ncm-dark); margin-bottom: 4px; }
.ncm-bv-feature p { font-size: 13px; color: var(--ncm-muted); margin: 0; }
.ncm-bv-form-wrap .ncm-form { background: var(--ncm-white); border: 1px solid var(--ncm-border); border-radius: 12px; padding: 28px; box-shadow: var(--ncm-shadow); }
.ncm-bv-done, .ncm-bv-guest { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ncm-bv-done h2, .ncm-bv-guest h2 { font-size: 26px; font-weight: 800; color: var(--ncm-dark); margin: 0; }
.ncm-bv-done p, .ncm-bv-guest p { font-size: 15px; color: var(--ncm-muted); margin: 0; }