/* ============================================================
   MARKETPLACE SEO REDESIGN — marketplace-seo.css
   Giggrabbers 2026  |  Prefix: gb-mp-
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────── */
.gb-mp-hero {
  background: linear-gradient(135deg, #1a2a4a 0%, #2d4f8a 60%, #3a66a5 100%);
  padding: 48px 24px 40px;
  color: #fff;
}
.gb-mp-hero__inner {
  max-width: 1120px;
  margin: 0 auto;
}
.gb-mp-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.gb-mp-breadcrumb__item { font-size: 13px; color: rgba(255,255,255,0.7); }
.gb-mp-breadcrumb__link { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
.gb-mp-breadcrumb__link:hover { color: #fff; }
.gb-mp-breadcrumb__sep { color: rgba(255,255,255,0.4); margin: 0 2px; }
.gb-mp-breadcrumb__item--current { color: rgba(255,255,255,0.95); }
.gb-mp-hero__title {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.gb-mp-hero__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 24px;
  max-width: 680px;
  line-height: 1.6;
}
.gb-mp-hero__searchbar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px 6px 16px;
  max-width: 640px;
  gap: 8px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.gb-mp-hero__searchicon { color: #999; font-size: 15px; flex-shrink: 0; }
.gb-mp-hero__searchinput {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: #333;
  background: transparent;
  padding: 8px 0;
  min-width: 0;
}
.gb-mp-hero__searchbtn {
  background: #3a66a5;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s;
}
.gb-mp-hero__searchbtn:hover { background: #2d4f8a; }
.gb-mp-hero__stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.gb-mp-hero__stat {
  display: flex;
  flex-direction: column;
  padding: 0 28px 0 0;
}
.gb-mp-hero__statnum {
  font-size: 22px;
  font-weight: 800;
  color: #a8c4f0;
  line-height: 1;
}
.gb-mp-hero__statlbl {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.gb-mp-hero__statdivider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.2);
  margin-right: 28px;
}

/* ── CATEGORY BAR ─────────────────────────────────────────── */
.gb-mp-catbar {
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.gb-mp-catbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}
.gb-mp-catbar__inner::-webkit-scrollbar { display: none; }
.gb-mp-catpill {
  background: none;
  border: 1.5px solid #d1d5db;
  border-radius: 40px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  flex-shrink: 0;
}
.gb-mp-catpill:hover { border-color: #3a66a5; color: #3a66a5; background: #f0f5ff; }
.gb-mp-catpill--active { background: #3a66a5; border-color: #3a66a5; color: #fff; }
/* .gb-mp-catpills-dyn removed — pills injected directly into #gbCatBar */

/* ── MAIN LAYOUT ──────────────────────────────────────────── */
.gb-mp-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 0 28px;
  align-items: start;
}
.gb-mp-sidebar-toggle {
  display: none;
  background: #fff;
  border: 1.5px solid #e0e4eb;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1a2a4a;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  grid-column: 1 / -1;
  width: fit-content;
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.gb-mp-sidebar {
  position: sticky;
  top: 68px;
}
.gb-mp-filter-card {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.gb-mp-filter-card__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a2a4a !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.gb-mp-filter-card__edit {
  background: none;
  border: none;
  color: #3a66a5;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}
.gb-mp-filter-card__rangelbl {
  font-size: 13px;
  color: #555;
  display: block;
  margin-bottom: 12px;
}
.gb-mp-slider-wrap { padding: 8px 4px; }
.gb-mp-sidebar-cat {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  font-size: 13px;
  color: #444;
  transition: color 0.15s;
}
.gb-mp-sidebar-cat:last-child { border-bottom: none; }
.gb-mp-sidebar-cat:hover { color: #3a66a5; }
.gb-mp-filter-reset {
  width: 100%;
  background: none;
  border: 1.5px solid #e0e4eb;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gb-mp-filter-reset:hover { border-color: #3a66a5; color: #3a66a5; }

/* ── MAIN AREA ────────────────────────────────────────────── */
.gb-mp-main { min-width: 0; }
/* ── TOOLBAR ──────────────────────────────────────────────── */
.gb-mp-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gb-mp-toolbar__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.gb-mp-sort { position: relative; }
.gb-mp-sort__input {
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  width: 165px;
  outline: none;
}
.gb-mp-sort__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e0e4eb;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  list-style: none;
  padding: 6px 0;
  min-width: 180px;
  z-index: 200;
  display: none;
}
.addnewdeal__sortlists--active,
.addnewdeal__sort--active .addnewdeal__sortlists { display: block !important; }
.gb-mp-sort__item { padding: 9px 16px; font-size: 13px; cursor: pointer; color: #444; transition: background 0.15s; }
.gb-mp-sort__item:hover { background: #f5f7ff; color: #3a66a5; }
.addnewdeal__sortitem--active.gb-mp-sort__item { color: #3a66a5; font-weight: 600; }
.gb-mp-price-filter {
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  outline: none;
}

/* ── RESULT COUNT ─────────────────────────────────────────── */
.gb-mp-result-bar { margin-bottom: 16px; min-height: 20px; }
.gb-mp-result-bar__count { font-size: 13px; color: #777; font-weight: 500; }

/* ── CARD GRID ────────────────────────────────────────────── */
.gb-mp-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── INDIVIDUAL CARD ──────────────────────────────────────── */
.gb-mp-card-wrap {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
}
.gb-mp-card {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}
.gb-mp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(26,42,74,0.12);
}
.gb-mp-card__sponsored {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  pointer-events: none;
}
.gb-mp-card__sponsored span {
  background: rgba(58,102,165,0.88);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
}
.mplace__loopitems--besponserd .gb-mp-card { border-color: #3a66a5; border-width: 2px; }
.gb-mp-card__img-area {
  background: #f5f7fa;
  min-height: 160px;
  overflow: hidden;
}
.gb-mp-card__gallery {
  display: flex;
  min-height: 160px;
}
.gb-mp-card__gallery .flcupload__browseimgloop {
  flex: 1;
  cursor: pointer;
  overflow: hidden;
}
.gb-mp-card__gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.gb-mp-card__gallery:hover img { transform: scale(1.04); }
.gb-mp-card__body { padding: 14px 16px 6px; flex: 1; }
.gb-mp-card__title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a2a4a;
  line-height: 1.4;
  margin: 0 0 8px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gb-mp-card__title a { color: inherit; text-decoration: none; }
.gb-mp-card__title a:hover { color: #3a66a5; }
.gb-mp-card__price { font-size: 13px; color: #777; margin: 0 0 2px; }
.gb-mp-card__price-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1a7d3e;
}
.gb-mp-card__seller {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #f0f2f5;
}
.gb-mp-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8eaed;
}
.gb-mp-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gb-mp-card__sellerinfo { flex: 1; min-width: 0; }
.gb-mp-card__rating { display: flex !important; gap: 2px; margin-bottom: 2px; }
.gb-mp-card__rating .fa-star { font-size: 11px; color: #d1d5db; }
.gb-mp-card__rating .fa-star.activestar { color: #f5a623; }
.gb-mp-card__name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #333;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-mp-card__name a { color: inherit; text-decoration: none; }
.gb-mp-card__name a:hover { color: #3a66a5; }
.gb-mp-card__name .gigtype {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #888;
}
.gb-mp-card__skills {
  font-size: 12px !important;
  color: #888;
  padding: 0 16px 10px !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gb-mp-card__skills span { font-weight: 600; color: #555; }
.gb-mp-card__cartbtn {
  margin: 0 16px 16px !important;
  width: calc(100% - 32px) !important;
  background: #3a66a5 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.12s;
  text-transform: none !important;
  letter-spacing: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gb-mp-card__cartbtn:hover { background: #2d4f8a !important; transform: translateY(-1px); }

/* ── LOAD MORE ────────────────────────────────────────────── */
.gb-mp-loadmore-wrap { text-align: center; padding: 28px 0 8px; }
.gb-mp-loadmore {
  background: #fff;
  border: 2px solid #3a66a5;
  color: #3a66a5;
  border-radius: 40px;
  padding: 12px 36px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gb-mp-loadmore:hover { background: #3a66a5; color: #fff; }

/* ── FAQ SECTION ──────────────────────────────────────────── */
.gb-mp-faq {
  background: #f8f9fb;
  border-top: 1px solid #e8eaed;
  padding: 64px 24px;
}
.gb-mp-faq__inner { max-width: 800px; margin: 0 auto; }
.gb-mp-faq__heading {
  font-size: 28px;
  font-weight: 800;
  color: #1a2a4a;
  text-align: center;
  margin: 0 0 8px;
}
.gb-mp-faq__subhead { text-align: center; color: #666; font-size: 15px; margin: 0 0 40px; }
.gb-mp-faq__list { border: 1px solid #e8eaed; border-radius: 12px; overflow: hidden; }
.gb-mp-faq__item { border-bottom: 1px solid #e8eaed; }
.gb-mp-faq__item:last-child { border-bottom: none; }
.gb-mp-faq__q {
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #1a2a4a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.15s;
}
.gb-mp-faq__q:hover { background: #f5f7ff; }
.gb-mp-faq__item.open .gb-mp-faq__q { background: #f5f7ff; color: #3a66a5; }
.gb-mp-faq__icon { font-size: 13px; flex-shrink: 0; transition: transform 0.25s; }
.gb-mp-faq__item.open .gb-mp-faq__icon { transform: rotate(180deg); }
.gb-mp-faq__a { display: none; padding: 0 24px 20px; background: #f5f7ff; }
.gb-mp-faq__item.open .gb-mp-faq__a { display: block; }
.gb-mp-faq__a p { font-size: 14px; color: #555; line-height: 1.7; margin: 16px 0 0; }
.gb-mp-faq__link { color: #3a66a5; text-decoration: underline; }

/* ── WHY SECTION ──────────────────────────────────────────── */
.gb-mp-why {
  background: #fff;
  padding: 64px 24px;
  border-top: 1px solid #e8eaed;
}
.gb-mp-why__inner { max-width: 1120px; margin: 0 auto; }
.gb-mp-why__heading { font-size: 28px; font-weight: 800; color: #1a2a4a; text-align: center; margin: 0 0 8px; }
.gb-mp-why__sub { text-align: center; color: #666; font-size: 15px; margin: 0 0 40px; }
.gb-mp-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gb-mp-why__card {
  text-align: center;
  padding: 28px 20px;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.gb-mp-why__card:hover { box-shadow: 0 8px 24px rgba(26,42,74,0.08); transform: translateY(-2px); }
.gb-mp-why__icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #1a2a4a, #3a66a5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.gb-mp-why__icon .fa { font-size: 20px; color: #fff; }
.gb-mp-why__cardtitle { font-size: 16px; font-weight: 700; color: #1a2a4a; margin: 0 0 8px; }
.gb-mp-why__carddesc { font-size: 13px; color: #666; line-height: 1.6; margin: 0; }

/* ── CTA STRIP ────────────────────────────────────────────── */
.gb-mp-cta {
  background: linear-gradient(135deg, #1a2a4a, #3a66a5);
  padding: 48px 24px;
  text-align: center;
}
.gb-mp-cta__inner { max-width: 600px; margin: 0 auto; }
.gb-mp-cta h2 { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 10px; }
.gb-mp-cta p { font-size: 15px; color: rgba(255,255,255,0.85); margin: 0 0 24px; line-height: 1.6; }
.gb-mp-cta__btn {
  display: inline-block;
  background: #fff;
  color: #3a66a5;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 32px;
  border-radius: 40px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}
.gb-mp-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); color: #3a66a5; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gb-mp-layout { grid-template-columns: 220px 1fr; }
  .gb-mp-why__grid { grid-template-columns: repeat(2, 1fr); }
  .gb-mp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .gb-mp-hero__title { font-size: 26px; }
  .gb-mp-layout { grid-template-columns: 1fr; padding: 16px; }
  .gb-mp-sidebar-toggle { display: flex; }
  .gb-mp-sidebar { display: none; position: static; }
  .gb-mp-toolbar { flex-direction: column; align-items: stretch; }
  .gb-mp-toolbar__right { width: 100%; flex-wrap: wrap; }
  .gb-mp-grid { grid-template-columns: repeat(2, 1fr); }
  .gb-mp-why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .gb-mp-hero { padding: 32px 16px 28px; }
  .gb-mp-hero__title { font-size: 22px; }
  .gb-mp-hero__searchbar { padding: 4px 6px 4px 12px; }
  .gb-mp-hero__searchbtn { padding: 8px 14px; font-size: 13px; }
  .gb-mp-hero__stats { gap: 16px; }
  .gb-mp-hero__statdivider { display: none; }
  .gb-mp-grid { grid-template-columns: 1fr; }
  .gb-mp-why__grid { grid-template-columns: 1fr; }
  .gb-mp-faq__q { font-size: 14px; padding: 16px; }
  .gb-mp-sort__input { width: 130px; }
}