:root {
  --site-header-offset: 0px;
  --user-accent: #f4813c;
  --mobile-bottom-nav-h: 68px;
}

/* Top Featured Services — hide category tabs scrollbar (desktop + mobile) */
.service-area .tabs-navigation,
.tabs-navigation {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.service-area .tabs-navigation::-webkit-scrollbar,
.tabs-navigation::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  background: transparent !important;
}
@media (min-width: 992px) {
  .service-area .tabs-navigation {
    overflow: visible !important;
  }
  .service-area .tabs-navigation .nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
  }
}
@media (max-width: 991.98px) {
  .service-area .tabs-navigation {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/*
  Header stays in document flow (not absolute) so the hero/banner sits
  flush under the categories bar — no fake margin-top gap.
*/
.header-area.header_v1 {
  position: sticky !important;
  top: 0;
  left: auto !important;
  right: auto !important;
  width: 100%;
  z-index: 999;
  background: #fff !important;
}

/* Theme switches sticky header to position:fixed (removes from flow → jump). Keep sticky. */
.header-area.header_v1.is-sticky {
  position: sticky !important;
  top: 0;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* No artificial offset — header occupies its own height in the layout */
body .main-wrapper .main-content,
body .main-wrapper .user-dashboard-wrap,
body .main-wrapper .product-detail-page,
body .main-wrapper .checkout-page,
body .main-wrapper .service-gig-area.header-next,
body .main-wrapper .site-page-offset,
body .main-wrapper .hero-banner.header-next {
  margin-top: 0 !important;
}

body .main-wrapper .main-content,
body .main-wrapper .user-dashboard-wrap {
  margin-bottom: 30px;
}

.header-area.header_v1 .main-navbar .navbar {
  padding: 12px 16px !important;
  row-gap: 10px;
}

.header-area.header_v1 .header-bottom {
  border-bottom: 1px solid #eef1f5;
}

.header-area.header_v1 .categories-menu {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
}

/* Compact category triggers — theme used padding-block:20px which left a white gap above banner */
.header-area.header_v1 .categories-menu .categories .sub-menu-item > a,
.header-area.header_v1 .categories-menu .amz-cat__trigger {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.header-area.header_v1 .header-toolbar {
  margin: 0 !important;
}

.header-area.header_v1 .header-actions {
  margin: 0 !important;
}

/* Categories list is only for the hamburger clone — never show in desktop bar */
.header-area.header_v1 .main-navbar .mobile-nav-categories {
  display: none !important;
}

/* Skip auto offset when a page sets its own spacing */
body .main-wrapper [data-skip-header-offset="1"] {
  margin-top: 0 !important;
}

/* =========================
   Shared mobile bottom nav
   ========================= */
.app-mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: none;
  height: var(--mobile-bottom-nav-h);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  background: #ffffff;
  border-top: 1px solid #e8edf3;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}

.app-mobile-bottom-nav--seller {
  background: linear-gradient(180deg, #151528 0%, #0e0e1c 100%);
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
}

.app-mnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  text-decoration: none !important;
  color: #6b7280;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  padding: 4px 2px;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}

.app-mnav-item i {
  font-size: 17px;
  line-height: 1;
}

.app-mnav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.app-mnav-item.is-active,
.app-mnav-item:hover {
  color: var(--user-accent);
  background: rgba(244, 129, 60, 0.08);
}

.app-mobile-bottom-nav--seller .app-mnav-item {
  color: #9ca3af;
}

.app-mobile-bottom-nav--seller .app-mnav-item.is-active,
.app-mobile-bottom-nav--seller .app-mnav-item:hover {
  color: #f4e4bc;
  background: rgba(212, 175, 55, 0.12);
}

.app-mnav-item--center {
  transform: translateY(-10px);
}

.app-mnav-center-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #1a1a2e;
  box-shadow: 0 8px 18px rgba(212, 175, 55, 0.35);
  margin-bottom: 2px;
}

.app-mnav-center-btn i {
  font-size: 18px;
}

.app-mobile-bottom-nav--seller .app-mnav-item--center.is-active,
.app-mobile-bottom-nav--seller .app-mnav-item--center:hover {
  background: transparent;
}

/* =========================
   Mobile / tablet header + drawer
   ========================= */
@media (max-width: 1199.98px) {
  :root {
    /* Header is in document flow — content needs no fake offset */
    --site-header-offset: 0px;
  }

  .header-area.header_v1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    width: 100%;
    z-index: 1040;
    background: #fff;
  }

  /* Always hide top horizontal category strip on mobile/tablet — categories stay in hamburger menu */
  .header-area .categories-menu,
  .header-area.header_v1 .categories-menu,
  body.show-mobile-categories-bar .header-area .categories-menu,
  body.show-mobile-categories-bar .header-area.header_v1 .categories-menu,
  body:not(.show-mobile-categories-bar) .header-area.header_v1 .categories-menu,
  .show-category-menu .header-area .categories-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  /* Mobile header must grow with content (theme set fixed 60px) */
  .header-area.header_v1 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .header-area.header_v1 .header-bottom {
    overflow: visible !important;
  }

  .header-area.header_v1 .main-responsive-nav {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #fff;
    border-bottom: 1px solid #eef1f5;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    width: 100%;
  }

  /* Seller-style: left menu | center logo | right actions — flush to edges */
  .header-area.header_v1 .main-responsive-nav .container.mobile-topbar,
  .header-area.header_v1 .main-responsive-nav > .container.mobile-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    gap: 0 !important;
    min-height: 56px;
    height: 56px;
    line-height: normal !important;
    padding: 0 6px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-area.header_v1 .main-responsive-nav .mobile-topbar .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1;
    margin: 0 !important;
    max-width: calc(100% - 100px);
    text-align: center;
    pointer-events: none;
    flex: none !important;
  }

  .header-area.header_v1 .main-responsive-nav .mobile-topbar .logo a {
    pointer-events: auto;
    display: inline-block;
    line-height: 1;
  }

  .header-area.header_v1 .main-responsive-nav .logo img {
    max-height: 32px;
    width: auto;
    max-width: 130px;
  }

  /* Hamburger: hard left */
  .header-area.header_v1 .main-responsive-nav .menu-toggler {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px;
    border: 1px solid #e8ecf1;
    background: #fff !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    z-index: 3;
    order: 1;
    position: relative;
    left: 0;
    flex-shrink: 0;
  }

  .header-area.header_v1 .main-responsive-nav .menu-toggler span {
    position: static !important;
    top: auto !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 10px;
    background: #f4813c !important;
    opacity: 1 !important;
    transition: transform .2s ease, opacity .2s ease;
  }

  .header-area.header_v1 .main-responsive-nav .menu-toggler.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .header-area.header_v1 .main-responsive-nav .menu-toggler.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0);
  }

  .header-area.header_v1 .main-responsive-nav .menu-toggler.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 3-dot: hard right */
  .header-area.header_v1 .main-responsive-nav .mobile-actions-toggler {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px;
    border: 1px solid #e8ecf1;
    background: #fff !important;
    color: #f4813c;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 3;
    order: 3;
    font-size: 18px;
    line-height: 1;
    padding: 0 !important;
    flex-shrink: 0;
    position: relative;
    right: 0;
  }

  .header-area.header_v1 .main-responsive-nav .mobile-actions-toggler.is-open {
    background: rgba(244, 129, 60, 0.12) !important;
    border-color: rgba(244, 129, 60, 0.35);
  }

  .header-area.header_v1 .mobile-top-actions {
    display: none;
    border-top: 1px solid #eef1f5;
    background: #fff;
    padding: 10px 10px 12px;
    width: 100%;
  }

  body.mobile-actions-open .header-area.header_v1 .mobile-top-actions {
    display: block;
  }

  .header-area.header_v1 .mobile-top-actions__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header-area.header_v1 .mobile-top-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e8ecf1;
    background: #f8fafc;
    color: #1f2937 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1.2;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .header-area.header_v1 .mobile-top-action-btn i {
    color: #f4813c;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
  }

  .header-area.header_v1 .mobile-top-action-btn--wallet {
    background: linear-gradient(135deg, #f4813c, #ff9a56);
    border-color: #f4813c;
    color: #fff !important;
    font-weight: 700;
  }

  .header-area.header_v1 .mobile-top-action-btn--wallet i {
    color: #fff !important;
  }

  .header-area.header_v1 .mobile-top-action-btn--primary {
    background: #f4813c;
    border-color: #f4813c;
    color: #fff !important;
    grid-column: auto;
  }

  .header-area.header_v1 .mobile-top-action-btn--primary i {
    color: #fff;
  }

  .header-area.header_v1 .mobile-top-action-btn--outline {
    background: #fff;
    border-color: #f4813c;
    color: #f4813c !important;
  }

  .header-area.header_v1 .mobile-top-action-btn--danger {
    color: #dc2626 !important;
  }

  .header-area.header_v1 .mobile-top-action-btn--danger i {
    color: #dc2626;
  }

  .header-area.header_v1 .mobile-top-action-btn--profile {
    grid-column: 1 / -1;
  }

  /* Guest: two equal full-width buttons */
  .header-area.header_v1 .mobile-top-actions__inner > .mobile-top-action-btn--outline,
  .header-area.header_v1 .mobile-top-actions__inner > .mobile-top-action-btn--primary {
    width: 100%;
  }

  .header-area.header_v1 .mobile-top-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f4813c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Desktop: hide mobile-only controls */
  @media (min-width: 1200px) {
    .header-area.header_v1 .mobile-actions-toggler,
    .header-area.header_v1 .mobile-top-actions {
      display: none !important;
    }
  }

  body .main-wrapper .hero-banner.header-next,
  body .main-wrapper .service-gig-area.header-next,
  body .main-wrapper .site-page-offset,
  body .main-wrapper .main-content,
  body .main-wrapper .product-detail-page,
  body .main-wrapper .checkout-page,
  body .main-wrapper .user-dashboard-wrap {
    margin-top: 0 !important;
  }

  /* ---- Hamburger drawer: categories + auth ---- */
  .header-area .mobile-menu .mobile-menu-wrapper {
    padding: 8px 16px 28px;
    gap: 8px;
  }

  .header-area .mobile-menu .mobile-nav-categories {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    order: 1;
  }

  .header-area .mobile-menu .more-option {
    order: 2 !important;
    margin-top: 12px;
    padding-top: 16px;
    padding-bottom: 8px;
    border-top: 1px solid #eef1f5;
    border-bottom: none;
    justify-content: stretch;
    gap: 10px;
  }

  .header-area .mobile-menu .mobile-nav-heading {
    list-style: none;
    margin: 4px 0 10px;
    pointer-events: none;
  }

  .header-area .mobile-menu .mobile-nav-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa3b2;
    padding: 4px 0;
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item {
    position: relative;
    list-style: none;
    margin: 0;
    border-bottom: 1px solid #f1f4f8;
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item > .nav-link {
    display: block;
    padding: 14px 40px 14px 4px !important;
    border-bottom: none !important;
    color: #1f2937 !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item > .toggle {
    position: absolute;
    top: 8px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e8ecf1;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #f4813c;
    z-index: 2;
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item > .toggle i {
    font-size: 12px;
    line-height: 1;
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item.show > .toggle {
    background: rgba(244, 129, 60, 0.12);
    border-color: rgba(244, 129, 60, 0.35);
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item > ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 4px 0 8px 10px;
    border-left: 2px solid rgba(244, 129, 60, 0.35);
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item > ul .nav-link {
    display: block;
    padding: 10px 8px !important;
    border-bottom: none !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
  }

  .header-area .mobile-menu .mobile-nav-categories > .nav-item > ul .nav-link:hover,
  .header-area .mobile-menu .mobile-nav-categories > .nav-item > ul .nav-link:active {
    background: #fff7f0;
    color: #f4813c !important;
  }

  .header-area .mobile-menu .header-btn-login,
  .header-area .mobile-menu .header-btn-register {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
  }
}

/* =========================
   User dashboard mobile
   ========================= */
@media (max-width: 991.98px) {
  body.has-mobile-bottom-nav .main-wrapper {
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 12px);
  }

  .app-mobile-bottom-nav {
    display: grid;
  }

  body .main-wrapper .user-dashboard-wrap {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  .user-dashboard-wrap > .row {
    margin-left: 0;
    margin-right: 0;
  }

  .user-dashboard-wrap > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Hide desktop sidebar on mobile — bottom nav replaces it */
  .user-dashboard-wrap .col-md-3 {
    display: none !important;
  }

  .user-dashboard-wrap .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
  }

  .user-dashboard-wrap .card {
    margin-bottom: 12px;
    border-radius: 14px !important;
  }

  .user-dashboard-wrap .card.p-3,
  .user-dashboard-wrap .card.p-4 {
    padding: 14px !important;
  }

  .buyer-orders-page .orders-hero,
  .buyer-orders-page .orders-filter {
    margin-bottom: 12px;
  }

  .buyer-orders-page .orders-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* General page spacing */
  body .main-wrapper .main-content,
  body .main-wrapper .product-detail-page,
  body .main-wrapper .checkout-page {
    margin-bottom: 20px !important;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 992px) {
  .app-mobile-bottom-nav {
    display: none !important;
  }
}