/* ============================================================
   QuickAd PWA patterns for Dubuz — mobile ≤767px only
   Excludes: landing feed, bottom tab bar, sticky Call/WA bar,
   chat dock, quick-post modal, desktop views
   Primary kept as Dubuz #FF4B33 (not QuickAd #2962D1)
   Revert: delete this file + restore backups in agent-tools/quickad-backup/
   ============================================================ */

/* ---- 1. TYPOGRAPHY ---- */
@media (max-width: 767px) {
  html[dir="ltr"] body,
  html[dir="ltr"] .sng-feed-container,
  html[dir="ltr"] .page-content,
  html[dir="ltr"] .dash-body,
  html[dir="ltr"] .dash-main,
  html[dir="ltr"] .sng-mtopbar,
  html[dir="ltr"] .sng-tab-bar {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  }

  html[dir="ltr"] body {
    font-size: 14px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
  }

  /* Keep logo font */
  .font-logo {
    font-family: 'Outfit', 'Roboto', sans-serif !important;
  }

  /* Heading scale (QuickAd) */
  .h1, h1,
  .ld-title,
  .ld-card h1,
  .detail .classifi-content .classifi-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  .h2, h2,
  .ld-section-title,
  .sng-section-title,
  .mp-section-title,
  .pa-section-title,
  .dash-section-title,
  h1.dash-page-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* Similar listings — shown on mobile as horizontal strip */
  .ld-similar-empty-mobile {
    display: none !important;
  }

  .h3, h3,
  .ld-features-title,
  .wow-widget-title,
  .heading-section .title {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .h4, h4 {
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  .h5, h5 { font-size: 14px !important; }
  .h6, h6 { font-size: 13px !important; }

  button, input, optgroup, select, textarea {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  }
}

/* ---- 2. BODY & PAGE SHELL ---- */
@media (max-width: 767px) {
  body {
    background: #F8F9FA !important;
    color: #535353 !important;
  }

  /* Feed/marketplace shells are full-bleed. Do NOT zero .dash-content —
     account layout needs horizontal padding; zeroing it + .dash-list-mobile
     negative margins expands the document and clips the bottom tab bar. */
  .page-content,
  #page-feed,
  #page-marketplace,
  #page-search,
  #page-post-ad {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #F8F9FA !important;
  }
  body.dash-body .dash-content {
    background: #F8F9FA !important;
  }
}

/* ---- 3. FORM — Material underline (form-line) ---- */
@media (max-width: 767px) {
  /* Exclude landing feed/search form inputs from form-line (keep landing style) */
  /* Only affect forms on post-ad, account, auth, and detail pages */

  /* QuickAd form-line container styling */
  .form-line {
    width: 100%;
    border-bottom: 2px solid #e1e1e1;
    position: relative;
  }

  .form-line .form-control,
  .form-line input,
  .form-line select,
  .form-line textarea {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: 44px !important;
    font-size: 14px !important;
    color: #535353 !important;
    background: transparent !important;
  }

  .form-line textarea.form-control,
  .form-line textarea {
    height: auto !important;
    min-height: 80px !important;
    padding-top: 12px !important;
  }

  .form-line .form-control:focus,
  .form-line input:focus,
  .form-line select:focus,
  .form-line textarea:focus {
    box-shadow: none !important;
    outline: none !important;
  }

  /* Animated bottom border on focus */
  .form-line::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    bottom: -1px;
    transform: scaleX(0);
    transition: transform 0.25s ease-in;
    border-bottom: 2px solid var(--primary, #FF4B33);
  }

  .form-line:focus-within::after {
    transform: scaleX(1);
  }

  /* Error/success states */
  .form-line.error::after {
    transform: scaleX(1);
    border-bottom-color: #FC356B;
  }
  .form-line.success::after {
    transform: scaleX(1);
    border-bottom-color: #4CAF50;
  }
  .form-line.warning::after {
    transform: scaleX(1);
    border-bottom-color: #FF9800;
  }

  /* Floating label */
  .form-line .form-label {
    font-weight: normal !important;
    color: #aaa !important;
    position: absolute;
    top: 12px;
    left: 0;
    cursor: text;
    transition: 0.2s;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
  }

  .form-line .form-control:focus + .form-label,
  .form-line input:focus + .form-label,
  .form-line textarea:focus + .form-label,
  .form-line .form-label.floating {
    top: -10px !important;
    left: 0 !important;
    font-size: 12px !important;
    color: var(--primary, #FF4B33) !important;
  }

  /* Placeholder styling */
  .form-line .form-control::placeholder,
  .form-line input::placeholder {
    color: #929292;
    opacity: 1;
  }

  .form-line .form-control:-ms-input-placeholder {
    color: #929292;
  }

  .form-line .form-control::-ms-input-placeholder {
    color: #929292;
  }

  /* Icon label inside form-line */
  .form-group .icon-label {
    font-size: 20px;
    color: #535353;
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
  }

  .form-group .icon-label + .form-line .form-control,
  .form-group .icon-label + .form-line input {
    padding-left: 38px !important;
  }

  /* Apply form-line to post-ad form inputs */
  #page-post-ad .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  #page-post-ad input[type="text"],
  #page-post-ad input[type="email"],
  #page-post-ad input[type="number"],
  #page-post-ad input[type="tel"],
  #page-post-ad input[type="url"],
  #page-post-ad input[type="password"],
  #page-post-ad textarea,
  #page-post-ad select {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid #e1e1e1 !important;
    height: 44px !important;
    font-size: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #page-post-ad textarea {
    height: auto !important;
    min-height: 80px !important;
    padding-top: 12px !important;
  }

  #page-post-ad .form-control:focus,
  #page-post-ad input:focus,
  #page-post-ad select:focus,
  #page-post-ad textarea:focus {
    border-bottom-color: var(--primary, #FF4B33) !important;
    box-shadow: none !important;
  }

  /* Auth form inputs */
  .auth-content .form-control,
  .auth-content input[type="text"],
  .auth-content input[type="email"],
  .auth-content input[type="password"],
  .auth-content input[type="number"],
  .auth-shell .form-control,
  .auth-shell input[type="text"],
  .auth-shell input[type="email"],
  .auth-shell input[type="password"] {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid #e1e1e1 !important;
    height: 44px !important;
    font-size: 14px !important;
    padding-left: 0 !important;
  }

  .auth-content .form-control:focus,
  .auth-shell .form-control:focus {
    border-bottom-color: var(--primary, #FF4B33) !important;
    box-shadow: none !important;
  }

  /* Account/dashboard form inputs */
  .dash-content .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .dash-body .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .dash-main .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid #e1e1e1 !important;
    height: 44px !important;
    font-size: 14px !important;
    padding-left: 0 !important;
  }

  .dash-content .form-control:focus,
  .dash-body .form-control:focus,
  .dash-main .form-control:focus {
    border-bottom-color: var(--primary, #FF4B33) !important;
    box-shadow: none !important;
  }

  /* Search input — keep rounded but QuickAd compact */
  .search-wrapper input.search {
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }
}

/* ---- 4. DETAIL PAGE — Immersive Header ---- */
@media (max-width: 767px) {
  /* Full-bleed gallery as backdrop */
  .detail-page .ld-card:first-of-type,
  .ld-page.detail-immersive .ld-card:first-of-type {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  .detail-page .ld-gallery-wrap,
  .ld-page.detail-immersive .ld-gallery-wrap {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .detail-page .carousel-inner,
  .ld-page.detail-immersive .carousel-inner {
    height: 240px !important;
  }

  .detail-page .ld-gallery-wrap img,
  .ld-page.detail-immersive .ld-gallery-wrap img {
    border-radius: 0 !important;
  }

  /* Sticky app chrome — must NOT use absolute (conflicts with immersive sticky bar) */
  .detail-page .ld-topbar.sng-hide-desktop,
  .ld-page.detail-immersive .ld-topbar.sng-hide-desktop,
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 50 !important;
    background: var(--bg-card, #fff) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    padding: 4px 8px !important;
    padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
    height: auto !important;
    min-height: var(--mobile-topbar-h, 50px);
  }

  .detail-page .ld-topbar.sng-hide-desktop .ld-back-hit,
  .detail-page .ld-topbar.sng-hide-desktop .ld-topbar-hit,
  .ld-page.detail-immersive .ld-topbar.sng-hide-desktop .ld-back-hit,
  .ld-page.detail-immersive .ld-topbar.sng-hide-desktop .ld-topbar-hit,
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop .ld-back-hit,
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop .ld-topbar-hit {
    color: var(--text-main, #1e293b) !important;
    background: transparent !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .detail-page .ld-topbar.sng-hide-desktop .ld-topbar-page-title,
  .ld-page.detail-immersive .ld-topbar.sng-hide-desktop .ld-topbar-page-title,
  body.sng-listing-immersive .ld-topbar.sng-hide-desktop .ld-topbar-page-title {
    color: var(--text-main, #1e293b) !important;
    font-size: 16px;
    font-weight: 600;
  }

  /* White card overlapping the photo (subsite) */
  .detail-subsite {
    margin-top: -20px !important;
    padding: 16px 16px 14px !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 2;
    position: relative;
    background-color: var(--bg-card, #fff) !important;
    box-shadow: none !important;
  }

  /* Title hierarchy — title uses former price size; price uses former title size */
  .detail-subsite .classifi-title,
  .detail-subsite .ld-title,
  .detail-subsite h1,
  .ld-page.detail-immersive .detail-subsite .classifi-content .classifi-title,
  .ld-page.detail-immersive .classifi-content > .classifi-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-main, #1e293b) !important;
    padding-top: 0 !important;
    margin: 6px 0 8px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;
  }

  .detail-subsite .classifi-price,
  .detail-subsite .classifi-content .classifi-price,
  .detail-subsite .ld-price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--primary, #FF4B33) !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  .detail-subsite .classifi-location,
  .detail-subsite .ld-location {
    font-size: 13px !important;
    color: var(--text-muted, #64748b) !important;
    padding-top: 2px !important;
    white-space: normal !important;
  }

  .detail-subsite .li-features {
    padding-top: 6px !important;
  }

  .detail-subsite .li-features span {
    padding-right: 14px !important;
    font-size: 12px !important;
    color: var(--text-muted, #64748b) !important;
  }

  .detail-subsite .li-features span i {
    font-size: 14px;
    vertical-align: sub;
    color: var(--text-muted, #64748b);
  }

  /* Seller in subsite compact row */
  .detail-subsite .ld-seller-inline {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
  }

  .detail-subsite .ld-seller-inline .user-image {
    width: 32px !important;
    height: 32px !important;
    border-radius: 100% !important;
    overflow: hidden !important;
    flex-shrink: 0;
  }

  .detail-subsite .ld-seller-inline .user-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .detail-subsite .ld-seller-inline .seller-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-main, #1e293b) !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-subsite .ld-seller-inline .vi-profile {
    font-size: 11px !important;
    color: var(--primary, #FF4B33) !important;
    text-transform: uppercase !important;
    white-space: nowrap;
    font-weight: 600;
  }

  /* Hide the old separate seller card on mobile */
  .ld-page .ld-seller-card {
    display: none !important;
  }

  /* Specs/details as list-group rows */
  .detail-section .list-group-item,
  .ld-specs .list-group-item,
  .classifi-section .list-group-item {
    padding: 10px 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    margin-bottom: 0 !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 13px !important;
    text-transform: capitalize;
  }

  .detail-section .list-group-item:last-child,
  .ld-specs .list-group-item:last-child,
  .classifi-section .list-group-item:last-child {
    border-bottom: 0 !important;
  }

  /* Map section */
  .detail-section #map,
  .classifi-section #map {
    height: 200px !important;
    width: 100% !important;
  }

  /* Section headings */
  .heading-section .title {
    color: #1e1e1e !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .section,
  .classifi-section,
  .detail-section {
    background-color: #fff !important;
    padding: 10px 20px !important;
    margin-bottom: 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ---- 5. MARKETPLACE GRID CARDS — QuickAd .col-6 pattern ---- */
@media (max-width: 767px) {
  /* Grid layout: 2-column */
  .mp-grid,
  .grid-view,
  #page-marketplace .row > [class*="col-"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 10px !important;
    padding: 10px 15px !important;
  }

  /* Card: no shadow, 6px radius */
  .mp-card,
  .sng-card {
    border-radius: 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    position: relative;
    background: #fff !important;
    transform: none !important;
    transition: none !important;
  }

  .mp-card:hover {
    transform: none !important;
  }

  /* Square image container — keep aspect via all-viewport rules; clamp height on narrow phones */
  .mp-card .aspect-square,
  .mp-card [style*="padding-bottom:100%"],
  .mp-card .classifi-image,
  .mp-card > div:first-child {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 110px !important;
    padding-bottom: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    border: none !important;
    background-color: #F8F9FA !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .mp-card img,
  .classifi-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px 6px 0 0 !important;
    position: absolute !important;
    inset: 0 !important;
  }

  /* Badge on image top-left absolute */
  .mp-card .badge,
  .mp-card [style*="position:absolute;top"],
  .classifi-box .badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    z-index: 3 !important;
  }

  /* Card body */
  .mp-card .p-2,
  .mp-card .mp-card-body,
  .classifi-content {
    padding: 6px 8px !important;
  }

  /* Title: 14px/500 — marketplace cards only (not listing detail) */
  .mp-card .fw-bold,
  .mp-card .mp-card-title,
  .mp-card .classifi-content .classifi-title,
  .listings-grid .classifi-content .classifi-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-muted, #64748b) !important;
    display: block !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
    min-height: 1.3em !important;
    max-height: 1.3em !important;
    padding-top: 2px !important;
    margin: 0 !important;
  }

  /* Price: primary color, 14px/700 */
  .mp-card .mp-card-price,
  .mp-card .classifi-price,
  .mp-card [style*="color:var(--primary)"],
  .mp-card .text-primary {
    color: var(--primary, #FF4B33) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding-top: 2px !important;
    margin: 0 !important;
  }

  /* Location: muted meta (not link blue) */
  .mp-card .text-muted,
  .mp-card .mp-card-meta,
  .mp-card .classifi-content .classifi-location,
  .listings-grid .classifi-content .classifi-location {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    color: var(--text-muted, #64748b) !important;
    font-size: 12px !important;
    padding-top: 2px !important;
  }

  /* Suppress duplicate location icons from original theme pseudo-elements */
  .classifi-content .classifi-location::before,
  .classifi-content .classifi-location::after,
  .mp-card .classifi-location::before,
  .mp-card .classifi-location::after,
  .mp-card-meta::before,
  .mp-card-meta::after {
    content: none !important;
    display: none !important;
  }

  /* Time: 12px */
  .classifi-content .ad-time {
    font-size: 12px !important;
    color: #535353 !important;
    padding-top: 2px !important;
  }

  /* Favourite icon */
  .favourite-icon {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    z-index: 3;
    color: #fff;
    padding: 0;
  }

  .favourite-icon.checked {
    color: #FC356B !important;
  }

  .favourite-icon.default {
    color: #B9D4DC !important;
  }

  /* List view cards (also QuickAd style) */
  .mp-list-row {
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 10px !important;
    margin-bottom: 5px !important;
    background: #fff !important;
  }

  .mp-list-row .mp-list-thumb {
    width: 100px !important;
    height: 100px !important;
    border-radius: 6px !important;
    flex: 0 0 100px !important;
    overflow: hidden !important;
  }

  .mp-list-row .mp-list-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .mp-list-row .mp-list-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--primary, #FF4B33) !important;
  }

  .mp-list-row .mp-list-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mp-list-row .mp-list-meta {
    font-size: 12px !important;
  }
  .mp-list-row .classifi-location.mp-list-meta {
    color: #3b82f6 !important;
  }
  .mp-list-row .ad-time.mp-list-meta {
    color: #64748b !important;
  }
}

/* Duplicate location pin guard — all viewports (HTML already has one FA icon) */
.classifi-content .classifi-location::before,
.classifi-content .classifi-location::after,
.mp-card .classifi-location::before,
.mp-card .classifi-location::after,
.mp-card-meta::before,
.mp-card-meta::after {
  content: none !important;
  display: none !important;
}

/* Marketplace listing badges — on-image overlay (all viewports; mobile block also styles these) */
.mp-card .classifi-image,
.classifi-box .classifi-image,
.mp-list-thumb.classifi-image {
  position: relative;
  overflow: hidden;
}

/* Uniform marketplace grid cards — equal height, fixed image aspect (all viewports) */
.listings-grid > .classifi-box {
  display: flex !important;
  min-width: 0 !important;
  height: 100% !important;
}
.listings-grid .mp-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.listings-grid .mp-card .classifi-image {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  background-color: #F8F9FA !important;
}
.listings-grid .mp-card .classifi-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.listings-grid .mp-card .classifi-image .default-img {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8;
}
.listings-grid .mp-card .classifi-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 88px !important;
  padding: 8px 10px 10px !important;
}
.listings-grid .mp-card .classifi-title {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  color: #4b5563 !important;
  min-height: 1.3em !important;
  max-height: 1.3em !important;
}
.listings-grid .mp-card .classifi-location,
.listings-grid .mp-card .classifi-location i {
  color: #3b82f6 !important;
}
.listings-grid .mp-card .classifi-location i {
  font-size: 11px !important;
  margin-right: 3px !important;
}
.listings-grid .mp-card .ad-time {
  margin-top: auto !important;
  color: #64748b !important;
}
.classifi-content .classifi-location,
.mp-card .classifi-location,
.mp-list-meta.classifi-location {
  color: #3b82f6 !important;
}
.mp-card .classifi-location i,
.classifi-content .classifi-location i {
  color: #3b82f6 !important;
}

/* Listing detail location stays muted brand text (not marketplace link blue) */
.ld-page.detail-immersive .classifi-content .classifi-location,
.ld-page.detail-immersive .classifi-content .classifi-location i,
.detail-subsite .classifi-location,
.detail-subsite .classifi-location i {
  color: var(--text-muted, #64748b) !important;
}
.mp-card .classifi-image .badge,
.classifi-box .classifi-image .badge,
.mp-list-thumb .badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
}
.mp-card .classifi-image .badge[style*="right:6px"],
.classifi-box .classifi-image .badge[style*="right:6px"] {
  left: auto;
}

/* ---- 6. SIDEBAR DRAWER (slide-left) ----
   Markup lives in shared layouts/mobile.blade.php on ALL viewports.
   Without a desktop hide, the drawer dumps into normal document flow and
   breaks home / marketplace / listing detail / account bottoms on ≥768px.
   Mobile chrome (topbar + hamburger) shows until 1023px — match that here.
   ============================================================ */

/* Desktop safety net: never paint drawer chrome in the page flow */
@media (min-width: 1024px) {
  .qa-overlay,
  .qa-sidebar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: fixed !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
  }
}

@media (max-width: 1023px) {
  /* Lock scroll while drawer is open */
  body.noscroll {
    overflow: hidden !important;
    touch-action: none;
  }

  /* Sidebar overlay */
  .qa-overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    top: 0;
    left: 0;
    transition: opacity 0.28s ease;
  }

  .qa-overlay.active {
    display: block;
    opacity: 1;
  }

  /* Slide-left drawer */
  .qa-sidebar {
    width: min(300px, 86vw);
    position: fixed;
    top: 0;
    left: -310px;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    background-color: var(--bg-card, #ffffff);
    color: var(--text-main, #1e293b);
    transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.14);
    display: flex;
    flex-direction: column;
  }

  .qa-sidebar.active {
    left: 0;
  }

  /* Sidebar header — brand red, compact */
  .qa-sidebar .sidebar-header {
    padding: 14px 14px 12px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: linear-gradient(145deg, var(--primary, #FF4B33) 0%, var(--primary-hover, #e03a24) 100%);
    color: #fff;
    flex-shrink: 0;
  }

  .qa-sidebar .sidebar-header .profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .qa-sidebar .sidebar-header .user-image {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.18);
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }

  .qa-sidebar .sidebar-header .user-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .qa-sidebar .sidebar-header .name {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .qa-sidebar .sidebar-header .acc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,0.78);
    margin-top: 1px;
  }

  .qa-sidebar .sidebar-header .stats {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }

  .qa-sidebar .sidebar-header .stat {
    flex: 1;
    text-align: center;
    color: #fff;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 6px 4px;
  }

  .qa-sidebar .sidebar-header .stat .count {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }

  .qa-sidebar .sidebar-header .stat .label {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Nav structure — denser Yui-like list */
  .qa-sidebar-nav {
    flex: 1;
    padding: 4px 0 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .qa-sidebar .qa-nav-label {
    margin: 10px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
  }

  .qa-sidebar ul {
    padding: 0 8px;
    margin: 0;
    list-style: none;
  }

  .qa-sidebar ul li {
    margin: 1px 0;
  }

  .qa-sidebar ul li a {
    padding: 10px 10px !important;
    min-height: 44px;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.3 !important;
    color: var(--text-main, #1e293b) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.12s ease, color 0.12s ease !important;
  }

  .qa-sidebar ul li a:hover,
  .qa-sidebar ul li a:focus {
    color: var(--text-main, #1e293b) !important;
    background-color: var(--sidebar-hover, #f1f5f9) !important;
  }

  /* Current route — match account dash-nav active */
  .qa-sidebar ul li a.active,
  .qa-sidebar ul li a[aria-current="page"] {
    background-color: var(--sidebar-active-bg, rgba(255, 75, 51, 0.08)) !important;
    color: var(--primary, #FF4B33) !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--primary, #FF4B33);
  }

  /* Colored icon tiles — match account .dash-colored-icon (mobile 32px) */
  .qa-sidebar .qa-nav-ico {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #8e8e93;
    color: #fff !important;
    flex-shrink: 0 !important;
  }

  .qa-sidebar ul li a i,
  .qa-sidebar ul li a .f7-icons,
  .qa-sidebar ul li a .qa-nav-ico i {
    font-size: 13px !important;
    width: auto !important;
    text-align: center !important;
    color: #fff !important;
  }

  /* Keep tile colors on hover/active — only row bg changes */
  .qa-sidebar ul li a:hover .qa-nav-ico,
  .qa-sidebar ul li a.active .qa-nav-ico,
  .qa-sidebar ul li a[aria-current="page"] .qa-nav-ico {
    /* inline style background wins; do not gray out */
    opacity: 1;
  }

  .qa-sidebar ul li a:hover i,
  .qa-sidebar ul li a:hover .f7-icons,
  .qa-sidebar ul li a:hover .qa-nav-ico i,
  .qa-sidebar ul li a.active i,
  .qa-sidebar ul li a.active .f7-icons,
  .qa-sidebar ul li a.active .qa-nav-ico i,
  .qa-sidebar ul li a[aria-current="page"] i,
  .qa-sidebar ul li a[aria-current="page"] .f7-icons,
  .qa-sidebar ul li a[aria-current="page"] .qa-nav-ico i {
    color: #fff !important;
  }

  .qa-sidebar .qa-nav-txt {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .qa-sidebar ul li a.active .qa-nav-txt,
  .qa-sidebar ul li a[aria-current="page"] .qa-nav-txt {
    color: var(--primary, #FF4B33) !important;
    font-weight: 600 !important;
  }

  .qa-sidebar .qa-nav-footer {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border, #e2e8f0);
  }

  .qa-sidebar .qa-nav-signout {
    color: #dc2626 !important;
  }

  .qa-sidebar .qa-nav-signout .qa-nav-txt {
    color: #dc2626 !important;
  }

  .qa-sidebar .qa-nav-cta {
    background: var(--primary-light, rgba(255, 75, 51, 0.08));
    color: var(--primary, #FF4B33) !important;
  }

  .qa-sidebar .qa-nav-cta .qa-nav-txt {
    color: var(--primary, #FF4B33) !important;
    font-weight: 600 !important;
  }

  /* Dismiss button */
  #qa-dismiss {
    cursor: pointer;
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    transition: background 0.2s, color 0.2s;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255,255,255,0.14);
    border: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  #qa-dismiss:hover,
  #qa-dismiss:active {
    color: #fff;
    background: rgba(255,255,255,0.28);
  }

  /* Hamburger trigger in topbar */
  .qa-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 22px;
    cursor: pointer;
  }

  .sng-hide-desktop .qa-hamburger {
    display: flex !important;
  }

  /* Night mode — drawer only (keep with drawer breakpoint) */
  .night-mode .qa-sidebar {
    background-color: #1a1a2e !important;
    color: #ddd !important;
  }

  .night-mode .qa-sidebar .qa-nav-label {
    color: #94a3b8 !important;
  }

  .night-mode .qa-sidebar ul li a {
    color: #e2e8f0 !important;
  }

  .night-mode .qa-sidebar ul li a:hover,
  .night-mode .qa-sidebar ul li a.active,
  .night-mode .qa-sidebar ul li a[aria-current="page"] {
    background-color: rgba(255, 75, 51, 0.16) !important;
  }

  .night-mode .qa-sidebar ul li a.active .qa-nav-txt,
  .night-mode .qa-sidebar ul li a[aria-current="page"] .qa-nav-txt {
    color: #fca5a5 !important;
  }

  .night-mode .qa-sidebar .qa-nav-ico,
  .night-mode .qa-sidebar ul li a .qa-nav-ico i,
  .night-mode .qa-sidebar ul li a:hover .qa-nav-ico i,
  .night-mode .qa-sidebar ul li a.active .qa-nav-ico i,
  .night-mode .qa-sidebar ul li a[aria-current="page"] .qa-nav-ico i {
    color: #fff !important;
  }

  .night-mode .qa-sidebar .qa-nav-footer {
    border-top-color: rgba(255,255,255,0.1) !important;
  }
}

/* ---- 7. SECTION SPACING ---- */
@media (max-width: 767px) {
  .classifi-section,
  .section-a {
    background: #fff;
    position: relative;
    z-index: 2;
    padding: 15px !important;
    margin-bottom: 10px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .section-single-page {
    padding: 15px !important;
  }

  #content {
    padding: 56px 0 !important;
    margin-bottom: env(safe-area-inset-bottom);
  }

  /* Line separator */
  .line-separate {
    width: 100%;
    height: 1px;
    background-color: #e1e1e1;
    margin: 20px 0;
  }

  /* Dark mode overrides: keep form-line border visible */
  .night-mode .form-line {
    border-bottom-color: rgba(255,255,255,0.15) !important;
  }

  .night-mode .form-line .form-control {
    color: #ddd !important;
  }

  .night-mode .form-line .form-label {
    color: #888 !important;
  }

  .night-mode .form-line::after {
    border-bottom-color: var(--primary, #FF4B33) !important;
  }

  .night-mode .detail-subsite {
    background-color: #1a1a2e !important;
  }

  .night-mode .detail-subsite .classifi-title,
  .night-mode .detail-subsite .ld-title {
    color: #ddd !important;
  }

  .night-mode .detail-subsite .ld-seller-inline {
    border-top-color: rgba(255,255,255,0.1) !important;
  }

  .night-mode .classifi-section,
  .night-mode .section {
    background-color: #1a1a2e !important;
  }

  .night-mode .classifi-section .list-group-item {
    border-bottom-color: rgba(255,255,255,0.06) !important;
    color: #888 !important;
  }

  .night-mode .mp-card,
  .night-mode .sng-card,
  .night-mode .mp-list-row {
    background: #1a1a2e !important;
  }

  /* ---- Fix 2: Post Ad — Tags overlapping ---- */
  .post-ad-page .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  .post-ad-page .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    float: none !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .post-ad-page .select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: 38px !important;
    height: auto !important;
    padding: 4px 6px !important;
    overflow: visible !important;
  }

  /* ---- Fix 3: Post Ad — Package cards shrink to fit one row ---- */
  .post-ad-page .pa-pkg-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  .post-ad-page .pa-pkg-card {
    flex: 0 0 auto !important;
    min-width: 110px !important;
    max-width: 130px !important;
    min-height: 70px !important;
    padding: 8px 8px !important;
    gap: 2px !important;
    height: auto !important;
  }
  .post-ad-page .pa-pkg-badge {
    font-size: 8px !important;
    padding: 1px 6px !important;
    margin-bottom: 2px !important;
  }
  .post-ad-page .pa-pkg-name {
    font-size: 11px !important;
  }
  .post-ad-page .pa-pkg-price {
    font-size: 13px !important;
    margin: 2px 0 !important;
  }
  .post-ad-page .pa-pkg-meta,
  .post-ad-page .pa-pkg-desc {
    font-size: 10px !important;
    min-height: 0 !important;
  }

  /* ---- Fix 4: Post Form — Full width ---- */
  .post-ad-page .form-card {
    max-width: 100% !important;
    width: 100% !important;
    padding: 10px 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
  }
  .post-ad-page .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .post-ad-page .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .post-ad-page .col-lg-9 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---- 8. TAB BUTTON OVERFLOW FIX (mobile nav icon leak) ---- */
@media (max-width: 767px) {
  .sng-tab-btn {
    overflow: hidden !important;
  }
  .sng-tab-btn:active i,
  .sng-tab-btn.active i {
    transform: none !important;
  }
  .sng-tab-btn.sng-tab-promo {
    overflow: visible !important;
  }
  .sng-tab-btn .sng-tab-promo-fab,
  .sng-tab-promo-fab {
    display: inline-flex !important;
  }
}

/* ---- 9. DO NOT TOUCH (protection) ---- */
/* Landing feed stays untouched */
/* Bottom tab bar stays untouched */
/* Chat dock stays untouched */
/* Quick-post modal stays untouched */
/* Desktop ≥768 stays untouched */

/* ---- 10. MESSAGES — Sticky input at bottom ---- */
@media (max-width: 767px) {
  .dash-messages-page .messaging-wrapper {
    height: calc(100vh - 56px - var(--mobile-tabbar-h, 48px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 56px - var(--mobile-tabbar-h, 48px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
  }

  .dash-messages-page .chat-window {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .dash-messages-page .messages-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .dash-messages-page .message-input-area {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    background: var(--bg-card, #ffffff) !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    padding: 8px 10px !important;
    margin-top: auto !important;
    box-shadow: none !important;
  }

  .dash-messages-page .message-input-area .input-wrap {
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .dash-messages-page .message-input-area .input-wrap input {
    height: 42px !important;
    border-radius: 22px !important;
    border: none !important;
    padding: 0 4px !important;
    width: 100% !important;
    font-size: 15px !important;
    background: transparent !important;
  }

  .dash-messages-page .message-input-area .send-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .dash-messages-page .chat-header {
    flex-shrink: 0 !important;
    background: color-mix(in srgb, var(--primary, #FF4B33) 14%, #ffffff) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #FF4B33) 18%, var(--border, #e2e8f0)) !important;
    box-shadow: none !important;
  }

  .dash-messages-page .messaging-wrapper {
    background: var(--bg-page, #f0f2f5) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .dash-messages-page .chat-window,
  .dash-messages-page .messages-container {
    background: var(--bg-card, #ffffff) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .dash-messages-page .message.sent .bubble {
    background: #fde8e8 !important;
    color: var(--text-main, #1e293b) !important;
  }

  .dash-messages-page .message.received .bubble {
    background: #f8fafc !important;
    color: var(--text-main, #1e293b) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
  }

  /* Night mode */
  .night-mode .dash-messages-page .message-input-area {
    background: #1a1a2e !important;
    border-top-color: rgba(255,255,255,0.1) !important;
  }
  .night-mode .dash-messages-page .message-input-area .input-wrap {
    background: rgba(255,255,255,0.05) !important;
  }
  .night-mode .dash-messages-page .message-input-area .input-wrap input {
    background: transparent !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ddd !important;
  }
  .night-mode .dash-messages-page .message.sent .bubble {
    background: rgba(255, 75, 51, 0.28) !important;
    color: #f8fafc !important;
  }
}

/* ---- 11. TOPBAR ICONS — Compact, muted, no underlines ---- */
@media (max-width: 767px) {
  .sng-mtopbar a,
  .sng-mtopbar-actions a,
  .sng-mtopbar-icon,
  .qa-hamburger,
  .sng-mtopbar-search {
    text-decoration: none !important;
  }

  /* New unified icon button: small, muted gray, 34×34 */
  .sng-mtopbar-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    border: none;
    background: transparent;
    color: #8896b8 !important;
    font-size: 18px !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .sng-mtopbar-icon:active {
    background: #ecf1f5 !important;
    transform: scale(0.94);
  }
  .sng-mtopbar-icon i,
  .sng-mtopbar-icon .f7-icons {
    font-size: 18px !important;
    line-height: 1;
  }

  .sng-mtopbar-actions .qa-hamburger {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    color: #8896b8 !important;
  }
  .sng-mtopbar-actions .qa-hamburger i {
    font-size: 18px !important;
  }

  a.qa-hamburger i,
  a.sng-mtopbar-search i,
  .sng-mtopbar-actions a i,
  .sng-mtopbar-icon i,
  .sng-mtopbar-icon:hover i {
    text-decoration: none !important;
  }

  .qa-hamburger:hover,
  .qa-hamburger:focus,
  .qa-hamburger:active,
  .sng-mtopbar-icon:hover,
  .sng-mtopbar-icon:focus,
  .sng-mtopbar-icon:active,
  .sng-mtopbar-actions a:hover,
  .sng-mtopbar-actions a:focus,
  .sng-mtopbar-actions a:active {
    text-decoration: none !important;
  }

  /* Night mode */
  .night-mode .sng-mtopbar-icon:active {
    background: rgba(255,255,255,0.08) !important;
  }
}

/* ---- 12. FOUC PREVENTION — x-cloak / Alpine flash guard ---- */
@media (max-width: 767px) {
  [x-cloak] { display: none !important; }

  /* Prevent FOUC for elements that start hidden via Alpine x-show.
     Do NOT keep [x-show][x-cloak] at !important after Alpine init — it traps modals closed. */
  .sng-mtopbar-menu[x-cloak] {
    display: none !important;
  }

  .no-fouc { visibility: hidden; }
}

/* Also apply globally (not just mobile) for x-cloak */
[x-cloak] { display: none !important; }

/* ---- 13. QUICK POST FORM — Compact Material-style fields ---- */
@media (max-width: 767px) {
  .sng-qp-panel {
    border-radius: 0 !important;
  }
  .sng-qp-header {
    padding: 12px 16px 10px !important;
  }
  .sng-qp-title {
    font-size: 16px !important;
  }
  .sng-qp-body {
    padding: 12px 16px 20px !important;
    gap: 12px !important;
  }
  .sng-qp-field {
    gap: 4px !important;
  }
  .sng-qp-label {
    font-size: 13px !important;
  }
  .sng-qp-input {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    border-width: 1px !important;
  }
  .sng-qp-input:focus {
    box-shadow: 0 0 0 2px rgba(198,73,73,.1) !important;
  }
  .sng-qp-textarea {
    min-height: 60px !important;
  }
  .sng-qp-price-currency {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .sng-qp-price-wrap {
    border-radius: 8px !important;
  }
  /* Smaller category tiles */
  .sng-qp-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 6px !important;
  }
  .sng-qp-cat-tile {
    padding: 10px 6px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
  }
  .sng-qp-cat-icon {
    font-size: 18px !important;
  }
  .sng-qp-cat-name {
    font-size: 11px !important;
  }
  /* Smaller media zone */
  .sng-qp-media-dropzone {
    padding: 20px 12px !important;
    border-radius: 10px !important;
  }
  .sng-qp-media-dropzone-icon {
    font-size: 28px !important;
  }
  .sng-qp-media-dropzone-title {
    font-size: 14px !important;
  }
  .sng-qp-media-dropzone-hint {
    font-size: 12px !important;
  }
  .sng-qp-media-item {
    width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
  }
  .sng-qp-media-add-more {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .sng-qp-publish-btn {
    padding: 12px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
}
@media (max-width: 767px) {
  /* ---- Search dropdown overlay ---- */
  .sng-mtopbar-search-dropdown {
    position: relative;
    flex-shrink: 0;
  }
  .search-dropdown-panel {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    padding: 12px 16px;
  }
  .search-dropdown-form {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .search-dropdown-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e1e1e1;
    border-radius: 10px;
    font-size: 16px;
    background: #f8f9fa;
    color: #535353;
    outline: none;
    min-width: 0;
  }
  .search-dropdown-input:focus {
    border-color: var(--primary, #FF4B33);
  }
  .search-dropdown-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--primary, #FF4B33);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---- 14. MARKETPLACE — Pill filter chips (≤1023 = mobile/tablet chrome) ---- */
@media (max-width: 1023px) {
  .mp-filters-sticky {
    display: block !important;
    position: sticky !important;
    top: calc(var(--mobile-topbar-h, 52px) + env(safe-area-inset-top, 0px)) !important;
    z-index: 40 !important;
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: var(--bg-card, #fff) !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  }

  .mp-mobile-toolbar,
  .mp-mobile-toolbar--sticky,
  .mp-filters-sticky .mp-mobile-toolbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px 10px !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .mp-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .mp-filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .mp-filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-main, #1e293b) !important;
    background: var(--bg-page, #f0f2f5) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    transition: all 0.15s !important;
  }

  .mp-filter-chip:active {
    transform: scale(0.96) !important;
  }

  .mp-filter-chip.is-active,
  .mp-filter-chip.active {
    background: var(--primary, #FF4B33) !important;
    color: #fff !important;
    border-color: var(--primary, #FF4B33) !important;
  }

  .mp-filter-chip i {
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .mp-filter-chip span {
    display: none !important;
  }

  .mp-filter-chip.mp-filter-chip--text {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    gap: 6px !important;
  }
  .mp-filter-chip.mp-filter-chip--text span {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    max-width: 7.5rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* View/Style chip: never look selected */
  .mp-filter-chip.mp-filter-chip--view.is-active,
  .mp-filter-chip.mp-filter-chip--view.active {
    background: var(--bg-page, #f0f2f5) !important;
    color: var(--text-main, #1e293b) !important;
    border-color: var(--border, #e2e8f0) !important;
  }

  /* Night mode */
  .night-mode .mp-mobile-toolbar--sticky {
    background: #1a1a2e !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
  }
  .night-mode .mp-filter-bar {
    background: transparent !important;
  }
  .night-mode .mp-filter-chip {
    background: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.12) !important;
  }
  .night-mode .mp-filter-chip.is-active,
  .night-mode .mp-filter-chip.active {
    background: var(--primary, #FF4B33) !important;
    color: #fff !important;
    border-color: var(--primary, #FF4B33) !important;
  }
  .night-mode .mp-filter-chip.mp-filter-chip--view.is-active,
  .night-mode .mp-filter-chip.mp-filter-chip--view.active {
    background: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.12) !important;
  }
}

/* ---- 9. TOPBAR ICON FIXES ---- */
@media (max-width: 767px) {
  /* Remove underlines on topbar icon links */
  .sng-mtopbar-actions a,
  .sng-mtopbar-actions button,
  .sng-mtopbar-search,
  .qa-hamburger,
  .sng-mtopbar a {
    text-decoration: none !important;
  }

  /* Prevent FOUC: hide Alpine-controlled elements until JS runs */
  [x-cloak] {
    display: none !important;
  }

  /* Override any link styling that causes underlines */
  .sng-mtopbar a i,
  .sng-mtopbar a:hover i {
    text-decoration: none !important;
  }

  /* Account tab icon overflow fix */
  .sng-tab-btn i {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* ---- Chat / Messages — sticky input at bottom ---- */
  .messaging-wrapper {
    height: calc(100vh - 56px - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .messaging-wrapper.erp-msg-has-thread .chat-sidebar {
    display: none !important;
  }

  .chat-window {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  .chat-header {
    flex-shrink: 0 !important;
  }

  .messages-container {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px !important;
  }

  .message-input-area {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg-card, #ffffff) !important;
    flex-shrink: 0 !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    z-index: 10 !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
  }

  .message-input-area .input-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 22px !important;
    padding: 4px 14px !important;
  }

  .message-input-area .input-wrap input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 15px !important;
    width: 100% !important;
    height: 36px !important;
  }

  .message-input-area .send-btn {
    background: var(--primary, #FF4B33) !important;
    border: none !important;
    color: #fff !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
}