/* =================================================================
   BIDPOTS CRITICAL FIX v2.0
   Loaded LAST in btkt.Master — wins over all other CSS files
   Fixes: old style.css sidebar layout, pointer-events blocking,
          nav position, page-wrapper margins, dropdown z-index
   ================================================================= */

/* 0. OVERRIDE OLD style.css NAVBAR & LAYOUT RULES
   style.css sets navbar-top to position:absolute at 768px+ and
   page-wrapper to margin-left:225px for sidebar. Both must die. */

.navbar-top {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1050 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a2a5e 45%, #0f3460 100%) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.25) !important;
}

.navbar-top .navbar-header {
  background-color: transparent !important;
  width: auto !important;
  float: none !important;
  height: 72px !important;
  border: none !important;
}

.navbar-top .nav-top {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Kill old sidebar-aware page-wrapper offset */
#page-wrapper {
  margin-top: 72px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 28px 32px !important;
  border: none !important;
  min-height: calc(100vh - 72px) !important;
  background: #f8f9fb !important;
}

@media (max-width: 991px) {
  .navbar-top {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
  }
  #page-wrapper {
    margin-top: 62px !important;
    padding: 14px !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 575px) {
  #page-wrapper { padding: 10px !important; padding-bottom: 76px !important; }
}

/* Fix old style.css nav link height override */
.navbar-top > .nav-top > .nav > li > a,
.navbar-top .bp-main-nav > li > a {
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 1. POINTER-EVENTS: make all interactive elements clickable */

a, button, input, select, textarea, label,
[role="button"], [role="menuitem"], [role="link"] {
  pointer-events: auto !important;
}

/* Entire nav bar */
.navbar-top, .navbar-header, .navbar-brand, .navbar-brand a,
.nav-top, .bp-main-nav, .bp-main-nav > li, .bp-main-nav > li > a,
.bp-sell-btn, .bp-login-btn, .bp-register-btn,
.bp-auth-btns, .bp-login-signup-nav,
.bp-nav-icon-btn, .bp-nav-avatar,
#bpHamburger, .navbar-toggle,
.dropdown-menu, .dropdown-menu > li, .dropdown-menu > li > a,
.bp-dropdown-menu, .bp-dropdown-menu > li, .bp-dropdown-menu > li > a {
  pointer-events: auto !important;
}

/* Mobile menus */
.bp-mobile-menu, #bpMobileMenuClose,
.bp-mobile-nav, .bp-mobile-nav a,
.bp-mobile-post-btn, .bp-fab-post {
  pointer-events: auto !important;
}

/* Footer */
.bp-footer, .bp-footer a, .bp-footer button,
.bp-footer-nav a, .bp-social-link, .bp-app-badge,
.bp-footer-legal a, .bp-footer-contact a,
.bp-footer-newsletter-btn, .bp-footer-bottom a {
  pointer-events: auto !important;
}

/* Page content */
#page-wrapper, .page-content, #main-content {
  pointer-events: auto !important;
}

/* 2. SIDEBAR: completely dead */
.navbar-side {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hidden placeholder ul */
ul[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
}

/* 3. OVERLAYS: hidden by default, never block clicks */
#loginModel, #loginModel_background,
#logout_background, .popup_background {
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Logout modal when JS shows it */
#logout[style*="display: block"],
#logout[style*="display:block"] {
  pointer-events: auto !important;
  z-index: 99999 !important;
}
#logout[style*="display: block"] *,
#logout[style*="display:block"] * {
  pointer-events: auto !important;
}

/* 4. DROPDOWN z-index fix */
.dropdown.open > .dropdown-menu {
  display: block !important;
  pointer-events: auto !important;
  z-index: 1055 !important;
  position: absolute !important;
}

.navbar-top .dropdown-menu {
  z-index: 1055 !important;
  top: 100% !important;
}

/* 5. BODY SCROLL LOCK when mobile menu open */
body.bp-menu-open {
  overflow: hidden;
}

/* 6. FOOTER link display fix */
.bp-footer-nav ul li a,
.bp-footer-legal a,
.bp-footer-contact a {
  display: inline-flex !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 7. FOOTER newsletter button */
.bp-footer-newsletter-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* 8. WRAPPER div should never intercept clicks */
#wrapper {
  pointer-events: auto;
  position: relative;
}

/* =================================================================
   AD CARDS GRID (replaces Bootstrap carousel)
   ================================================================= */
.bp-ads-section {
  margin-bottom: 36px;
}

.bp-ads-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2f5;
}

.bp-ads-cat-title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bp-ads-cat-title::before {
  content: '';
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #e94560, #c0283f);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.bp-ads-view-more {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bp-ads-view-more:hover { color: #1d4ed8; }

/* Responsive grid: 4 cols desktop, 3 tablet, 2 phone, 1 small */
.bp-ads-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) { .bp-ads-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .bp-ads-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px)  { .bp-ads-grid { grid-template-columns: 1fr; } }

.bp-ad-card {
  background: #fff;
  border: 1.5px solid #f0f2f5;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.bp-ad-card:hover {
  border-color: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
}

.bp-ad-card-link {
  text-decoration: none !important;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bp-ad-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f8f9fb;
}

.bp-ad-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.bp-ad-card:hover .bp-ad-card-img img {
  transform: scale(1.05);
}

.bp-ad-card-body {
  padding: 12px 14px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bp-ad-cat-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}

.bp-ad-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bp-ad-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.bp-ad-loc {
  font-size: 11.5px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-ad-loc .fa { color: #9ca3af; }

.bp-ad-price {
  font-size: 13px;
  font-weight: 700;
  color: #e94560;
  white-space: nowrap;
  flex-shrink: 0;
}

.bp-ad-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: #f8f9fb;
  border: none;
  border-top: 1px solid #f0f2f5;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin: 0;
}

.bp-ad-chat-btn:hover {
  background: #eff6ff;
  color: #2563eb;
}

/* =================================================================
   PAGE LAYOUT — Center content, full width, no wasted space
   ================================================================= */

/* Ensure page-wrapper fills width and content is centered */
#page-wrapper {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* On very large screens, don't let content stretch too wide */
.page-content {
  max-width: 100%;
}

/* Kill old Bootstrap container padding that pushes content left */
#wrapper {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer full width */
.bp-footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* =================================================================
   LOGIN / REGISTER — Remove duplicate logo from card
   ================================================================= */
.bp-auth-card .bp-auth-logo {
  display: none !important;
}

/* =================================================================
   FORGOT PASSWORD — Style the old page to match premium theme
   ================================================================= */

/* =================================================================
   ALERT STYLES (used in ForgotPassword, Login, Register messages)
   ================================================================= */
.bp-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.bp-alert i { flex-shrink: 0; margin-top: 1px; }

.bp-alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.bp-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.bp-alert-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.bp-alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ForgotPassword label: show when it has content */
[id$=lblMsg]:not(:empty) { display: block !important; }

/* =================================================================
   LAYOUT — Full-width centered content, no wasted space
   Overrides old style.css/custom.css layout assumptions
   ================================================================= */

/* Full-width wrapper — no left sidebar indent */
body, #wrapper { width: 100% !important; overflow-x: hidden; }

#page-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1400px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Kill old Bootstrap row negative margins at page level */
#page-wrapper > .page-content > .row:first-child {
  margin-left: 0;
  margin-right: 0;
}

/* Ensure all Bootstrap columns don't overflow */
.row { margin-left: -12px; margin-right: -12px; }
[class*="col-"] { box-sizing: border-box; }

/* =================================================================
   AD LIST PAGE (filterads.aspx) — Better list item layout
   ================================================================= */
.ad-list {
  background: #fff;
  border: 1.5px solid #f0f2f5;
  border-radius: 14px;
  margin-bottom: 14px;
  transition: all 0.2s ease;
  overflow: hidden;
}

.ad-list:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.ad-list .row { margin: 0; }

.ad-list a.col-sm-9 {
  padding: 16px;
  display: flex;
  align-items: flex-start;
  text-decoration: none !important;
  color: inherit;
}

.ad-list figure { margin: 0; border-radius: 10px; overflow: hidden; }
.ad-list figure img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.ad-list aside h2 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.ad-list aside p {
  font-size: 12.5px;
  color: #6b7280;
  margin: 0 0 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ad-list .col-sm-3 {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-left: 1px solid #f3f4f6;
}

.ad-list .item_price {
  font-size: 18px;
  font-weight: 800;
  color: #e94560;
}

/* Filter sidebar */
.side-bar.filter {
  background: #fff;
  border: 1.5px solid #f0f2f5;
  border-radius: 14px;
  padding: 16px;
  position: sticky;
  top: 90px;
}

.side-bar.filter .portlet { box-shadow: none !important; border: none; }
.side-bar.filter .portlet-heading { background: transparent; border-bottom: 1px solid #f0f2f5; }

/* =================================================================
   AD DETAIL PAGE (adinfo.aspx) — Better layout
   ================================================================= */
.ad-detail {
  background: #fff !important;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1.5px solid #f0f2f5;
}

.ad-detail .ttl {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

article.bg-white {
  background: #fff !important;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1.5px solid #f0f2f5;
}

.ad1, .ad2 { padding: 0 0 16px; }

.ad1 h3.ttl2, .ad2 h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  border-bottom: 2px solid #f0f2f5;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

/* Bid section */
.bid-history {
  background: #f8f9fb;
  border-radius: 14px;
  padding: 20px;
}

.bid-history ul { list-style: none; padding: 0; margin: 0; }

.bid-history li {
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bid-history li strong { color: #e94560; font-size: 16px; font-weight: 700; }
.bid-history li .date { font-size: 12px; color: #9ca3af; }
.bid-history li p { margin: 0; font-size: 12px; color: #6b7280; }

.post-bid { background: #f8f9fb; border-radius: 14px; padding: 24px; }

/* Carousel override for detail page thumbnails */
.thubnial-slider { margin-bottom: 16px; }
.detail-slider .carousel-inner img {
  width: 100% !important;
  height: 360px !important;
  object-fit: contain !important;
  background: #f1f5f9;
  border-radius: 12px;
}

.adThubnail li {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.adThubnail li.active { border-color: #2563eb; }

/* Related ads section */
h2.ttl {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin: 24px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

h2.ttl::before {
  content: '';
  width: 4px; height: 22px;
  background: linear-gradient(180deg, #e94560, #c0283f);
  border-radius: 2px;
  flex-shrink: 0;
}

/* =================================================================
   CHANGE PASSWORD PAGE — Premium card style
   ================================================================= */
.form-bg {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.07) !important;
  padding: 40px 36px !important;
  max-width: 480px;
  margin: 40px auto;
}

@media (max-width: 575px) {
  .form-bg { padding: 24px 18px !important; }
}

.form-bg .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

.form-bg .form-control {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  padding: 11px 14px;
  height: auto;
  background: #fafafa;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-bg .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  background: #fff;
  outline: none;
}

.form-bg .btn-yellow,
.form-bg .btn {
  background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 32px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 3px 12px rgba(15,52,96,0.2) !important;
}

.form-bg .btn-yellow:hover,
.form-bg .btn:hover {
  background: linear-gradient(135deg, #0d1b3e, #0a2548) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(15,52,96,0.3) !important;
}

/* Add a heading above change password form */
.form-bg::before {
  content: '🔑  Change Password';
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f2f5;
}

/* =================================================================
   GENERAL PAGE HEADINGS — Consistent across all pages
   ================================================================= */
.page-content h1, .page-content h2,
.page-content .ttl, .page-content .ttl2 {
  font-family: 'Inter', sans-serif !important;
}

/* Page-level sections should be white cards */
.page-content > .row > [class*="col-"] > .portlet,
.page-content > .row > .portlet {
  border-radius: 14px !important;
  border: 1.5px solid #f0f2f5 !important;
  box-shadow: none !important;
}

/* =================================================================
   RESPONSIVE — Mobile content padding
   ================================================================= */
@media (max-width: 767px) {
  .ad-list a.col-sm-9 { flex-direction: column; }
  .ad-list figure { width: 100%; margin-bottom: 12px; }
  .ad-list aside { padding: 0; }
  .ad-list .col-sm-3 { border-left: none; border-top: 1px solid #f3f4f6; flex-direction: row; }
  .ad-detail { padding: 16px; }
  article.bg-white { padding: 16px; }
  .form-bg { margin: 16px auto !important; }
  .detail-slider .carousel-inner img { height: 220px !important; }
}

/* =================================================================
   ADD POST PAGE — remove duplicate page-wrapper, fix layout
   ================================================================= */
.bp-addpost-wrap {
  width: 100%;
  max-width: 100%;
}

.bp-page-heading {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bp-page-heading::before {
  content: '';
  width: 4px; height: 22px;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  border-radius: 2px;
  flex-shrink: 0;
}

/* =================================================================
   MY ADS / MY BIDS — Section heading row
   ================================================================= */
.bp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0f2f5;
  flex-wrap: wrap;
  gap: 12px;
}

.bp-section-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bp-section-title::before {
  content: '';
  width: 4px; height: 22px;
  background: linear-gradient(180deg, #e94560, #c0283f);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

/* =================================================================
   FORM BG — Used in AddPost, ChangePassword, Profile forms
   Already styled above but ensuring form-bg inside page works
   ================================================================= */
.bp-addpost-wrap .form-bg {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  padding: 28px 32px !important;
  margin-bottom: 20px;
}

.bp-addpost-wrap .form-bg h4 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f5;
}

.bp-addpost-wrap .form-control {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  padding: 10px 14px;
  height: auto;
  background: #fafafa;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bp-addpost-wrap .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  background: #fff;
  outline: none;
}

.bp-addpost-wrap label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.bp-addpost-wrap .btn-yellow,
.bp-addpost-wrap .btn-warning {
  background: linear-gradient(135deg, #e94560, #c0283f) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.2s;
  box-shadow: 0 3px 10px rgba(233,69,96,0.25) !important;
}

.bp-addpost-wrap .btn-yellow:hover,
.bp-addpost-wrap .btn-warning:hover {
  background: linear-gradient(135deg, #d63050, #a8223a) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(233,69,96,0.35) !important;
}

/* Image upload area */
.bp-addpost-wrap .image-upload-wrap {
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  background: #f8f9fb;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.bp-addpost-wrap .image-upload-wrap:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

/* =================================================================
   PEOPLE PAGE — Profile cards upgrade
   ================================================================= */
.peoples-item {
  background: #ffffff;
  border: 1.5px solid #f0f2f5;
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 16px;
  transition: all 0.22s ease;
}

.peoples-item:hover {
  border-color: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
}

.peoples-item .img-circle {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border: 3px solid #e5e7eb;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}

.peoples-item:hover .img-circle { border-color: #2563eb; }

.peoples-item h4 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.peoples-item h4 span {
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
  display: block;
  margin-top: 2px;
}

.peoples-item .btn-yellow {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  transition: all 0.2s;
  margin-top: 6px;
}

.peoples-item .btn-yellow:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* People filter tabs */
.people-filter .nav-tabs {
  border-bottom: 2px solid #f0f2f5;
  margin-bottom: 20px;
}

.people-filter .nav-tabs > li > a {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  transition: color 0.2s, border-color 0.2s;
}

.people-filter .nav-tabs > li.active > a,
.people-filter .nav-tabs > li > a:hover {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: transparent;
}

.people-filter h2.ttl {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
}

/* People search input */
.people-filter .input-group .form-control {
  border-radius: 12px 0 0 12px !important;
  border: 1.5px solid #e5e7eb;
  font-size: 14px;
  padding: 12px 16px;
  height: auto;
}

.people-filter .input-group-btn .btn {
  border-radius: 0 12px 12px 0 !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 20px;
  font-size: 15px;
}

/* =================================================================
   PROFILE PAGE — Better layout
   ================================================================= */
.user-bdge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  color: #374151 !important;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  text-decoration: none !important;
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all 0.2s;
}

.user-bdge:hover {
  background: #eff6ff;
  color: #2563eb !important;
}

.user-bdge .badge {
  background: #e94560;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* Profile page ttl2 heading */
.ttl2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  border-bottom: 2px solid #f0f2f5;
  padding-bottom: 10px;
  margin-bottom: 16px !important;
}

/* =================================================================
   CHAT BUTTON (used across pages)
   ================================================================= */
.btn-yellow,
.btn.btn-yellow {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

.btn-yellow:hover {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* =================================================================
   GLOBAL MISC IMPROVEMENTS
   ================================================================= */

/* Standard heading for all pages */
.ttl {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin-bottom: 20px !important;
}

/* Ensure all buttons have pointer cursor */
.btn, button, [role="button"] { cursor: pointer !important; }

/* Status indicators */
.status.online, .link_green { color: #16a34a !important; font-weight: 600; }
.link_red { color: #dc2626 !important; font-weight: 600; }

/* Search text inputs — consistent style */
.stylish-input-group .form-control {
  border-right: none;
  border-radius: 10px 0 0 10px !important;
}

.stylish-input-group .input-group-addon {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: none !important;
  border-radius: 0 10px 10px 0 !important;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.2s;
}

.stylish-input-group .input-group-addon:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

.stylish-input-group .input-group-addon a,
.stylish-input-group .input-group-addon span {
  color: #fff !important;
}

/* =================================================================
   RESPONSIVE FINAL PASS
   ================================================================= */
@media (max-width: 767px) {
  .bp-section-header { flex-direction: column; align-items: flex-start; }
  .peoples-item { margin-bottom: 12px; }
  .bp-addpost-wrap .form-bg { padding: 18px 14px !important; }
}

/* =================================================================
   NAV FINAL FIX — Logo always visible, Sign In/Register right-aligned
   ================================================================= */

/* 1. Logo — always visible, never hidden */
.navbar-brand img,
.navbar-header .navbar-brand img,
.navbar-top .navbar-brand img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
}

/* 2. Navbar layout: header left, nav-top fills remaining space */
.navbar-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

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

/* nav-top: flex row, push auth buttons to far right */
.nav-top {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  height: 72px !important;
  min-height: 72px !important;
  overflow: hidden;
}

/* Main nav: takes up middle space */
.bp-main-nav {
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
  white-space: nowrap;
}

/* Right side logged-in user dropdown */
.nav.navbar-right#menuRightOptions,
ul.nav.navbar-right {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none;
}

/* Auth buttons wrapper: flex, right-aligned, no overflow */
.bp-login-signup-nav {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
  float: none !important;
}

.bp-auth-btns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

.bp-login-btn,
.bp-register-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Hamburger: rightmost, flex-shrink-0 */
#bpHamburger, .navbar-toggle {
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  margin-right: 12px !important;
}

/* 3. Remove FAB floating post button entirely */
.bp-fab-post {
  display: none !important;
}

/* 4. Mobile bottom nav — remove "Post" circular button */
.bp-mobile-post-btn {
  display: none !important;
}

/* When Post is hidden from bottom nav, redistribute items evenly */
.bp-mobile-nav ul {
  justify-content: space-evenly;
}

@media (max-width: 991px) {
  .nav-top { height: 62px !important; min-height: 62px !important; }
}

/* =================================================================
   CHAT WINDOW — Premium floating chat box
   ================================================================= */
.chat-boxs {
  position: fixed !important;
  bottom: 16px !important;
  right: 16px !important;
  z-index: 9990 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 10px !important;
  pointer-events: none;
}

.chat-boxs > * { pointer-events: auto; }

/* Individual chat box */
.chat-open,
.portlet.chat-open {
  width: 300px !important;
  max-height: 420px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1) !important;
  border: 1px solid #e5e7eb !important;
  overflow: hidden !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Chat header */
.chat-open .portlet-heading,
.portlet.chat-open .portlet-heading {
  background: linear-gradient(135deg, #0d1b3e, #0f3460) !important;
  padding: 12px 14px !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}

.chat-open .portlet-heading h4,
.portlet.chat-open .portlet-heading h4 {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-open .portlet-heading h4 .fa-circle {
  color: #22c55e !important;
  font-size: 9px;
}

/* Chat close button */
.chat-open .portlet-widgets,
.portlet.chat-open .portlet-widgets {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-open .portlet-widgets .fa,
.portlet.chat-open .portlet-widgets .fa {
  color: rgba(255,255,255,0.7) !important;
  cursor: pointer;
  font-size: 15px;
  transition: color 0.2s;
}

.chat-open .portlet-widgets .fa:hover { color: #fff !important; }

/* Chat messages area */
.chat-open .chat-widget,
.portlet.chat-open .chat-widget {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px !important;
  background: #f8f9fb !important;
  min-height: 200px !important;
  max-height: 260px !important;
}

.chat-open .chat-widget::-webkit-scrollbar { width: 4px; }
.chat-open .chat-widget::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

/* Chat messages */
.chat-open .chat-msg-recv,
.chat-open .chat-msg-sent {
  display: flex;
  margin-bottom: 8px;
}

.chat-open .chat-msg-recv { justify-content: flex-start; }
.chat-open .chat-msg-sent { justify-content: flex-end; }

.chat-open .chat-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

.chat-open .chat-msg-recv .chat-bubble {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  border-radius: 2px 12px 12px 12px;
}

.chat-open .chat-msg-sent .chat-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-radius: 12px 2px 12px 12px;
}

/* Chat input area */
.chat-open .portlet-footer,
.portlet.chat-open .portlet-footer {
  padding: 10px 12px !important;
  border-top: 1px solid #f0f2f5 !important;
  background: #ffffff !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0;
}

.chat-open .chatMsg,
.portlet.chat-open .chatMsg {
  flex: 1 !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.chat-open .chatMsg:focus { border-color: #2563eb !important; }

.chat-open .chat-send-btn,
.portlet.chat-open .chat-send-btn {
  width: 34px !important;
  height: 34px !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}

.chat-open .chat-send-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  transform: scale(1.08) !important;
}

/* Mobile: stack chats vertically, full width */
@media (max-width: 575px) {
  .chat-boxs {
    bottom: 70px !important;
    right: 8px !important;
    left: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .chat-open, .portlet.chat-open { width: 100% !important; }
}

/* =================================================================
   AD DETAIL — Contact privacy notice
   ================================================================= */
.bp-contact-privacy-notice {
  background: #f0f4ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: #1e40af;
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}

.bp-contact-privacy-notice .fa-lock {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
  color: #3b82f6;
}

/* =================================================================
   MESSAGES PANEL — Fix chat icon dropdown positioning
   ================================================================= */
div#messages {
  position: fixed !important;
  top: 72px !important;
  right: 16px !important;
  width: 300px !important;
  max-height: 420px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important;
  overflow-y: auto !important;
  z-index: 1055 !important;
  display: none;
}

div#messages.active,
.dropdown.open div#messages {
  display: block !important;
}

@media (max-width: 991px) {
  div#messages { top: 62px !important; }
}

/* =================================================================
   AD LIST — Premium rich look for filterads + MyAds + MyAdBids
   ================================================================= */

/* Override old custom.css ad-list completely */
.ad-list {
  background: #ffffff !important;
  border: 1.5px solid #f0f2f5 !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  transition: all 0.22s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  padding: 0 !important;
}

.ad-list:hover {
  border-color: #2563eb !important;
  box-shadow: 0 6px 24px rgba(37,99,235,0.1) !important;
  transform: translateY(-2px) !important;
}

/* Row inside ad-list: flex layout */
.ad-list .row { margin: 0 !important; display: flex !important; align-items: stretch !important; }

/* Link column */
.ad-list .row a.col-sm-9 {
  display: flex !important;
  align-items: flex-start !important;
  padding: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  color: inherit !important;
  flex: 1;
}

/* Figure / image column */
.ad-list figure {
  margin: 0 !important;
  flex-shrink: 0;
  width: 200px !important;
  min-height: 160px !important;
  overflow: hidden;
}

.ad-list figure img {
  width: 200px !important;
  height: 100% !important;
  min-height: 160px !important;
  max-height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  transition: transform 0.3s ease !important;
  display: block !important;
}

.ad-list:hover figure img { transform: scale(1.05) !important; }

/* Text aside */
.ad-list aside {
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

.ad-list aside h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 4px !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.ad-list aside p {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  line-height: 1.55 !important;
}

.ad-list aside .date {
  font-size: 12px !important;
  color: #9ca3af !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ad-list aside .loc {
  font-size: 12px !important;
  color: #6b7280 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ad-list aside .loc .fa { color: #e94560; }

/* Price / action column */
.ad-list .col-sm-3 {
  padding: 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border-left: 1px solid #f3f4f6 !important;
  background: #fafafa !important;
  min-width: 120px !important;
  flex-shrink: 0 !important;
}

.ad-list .item_price {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #e94560 !important;
  text-align: center !important;
}

/* Ad card grid items (.ads class from PostAds) */
.ads {
  background: #ffffff !important;
  border: 1.5px solid #f0f2f5 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all 0.22s ease !important;
  display: block !important;
  text-decoration: none !important;
}

.ads:hover {
  border-color: #2563eb !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.1) !important;
  text-decoration: none !important;
}

.ads figure {
  height: 180px !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #f8f9fb !important;
}

.ads figure img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.3s ease !important;
}

.ads:hover figure img { transform: scale(1.06) !important; }

.ads h2 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  background: none !important;
  padding: 10px 12px 4px !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.ad-cont {
  padding: 4px 12px 12px !important;
}

.ad_ttl {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  margin-bottom: 4px !important;
}

.ad_Price {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #e94560 !important;
  margin-bottom: 4px !important;
}

.ad_loc {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  color: #6b7280 !important;
  float: none !important;
}

.ad_loc .fa { color: #9ca3af; font-size: 11px; }

.ads .chat, .ads .status {
  font-size: 11px !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ad-list aside .status.online,
.ads .status.online { color: #16a34a !important; font-size: 11px !important; }

/* Section heading inside ads-sec */
.ads-sec > .bp-ads-section-header,
.ads-sec hr { border-color: #f0f2f5 !important; margin: 0 0 16px !important; }

/* Responsive ad-list */
@media (max-width: 767px) {
  .ad-list .row { flex-direction: column !important; }
  .ad-list .row a.col-sm-9 { flex-direction: column !important; }
  .ad-list figure { width: 100% !important; min-height: 180px !important; }
  .ad-list figure img { width: 100% !important; height: 200px !important; }
  .ad-list aside { padding: 12px 14px !important; }
  .ad-list .col-sm-3 { border-left: none !important; border-top: 1px solid #f3f4f6 !important; flex-direction: row !important; justify-content: space-between !important; padding: 12px 14px !important; background: #fff !important; }
}

/* =================================================================
   AD DETAIL PAGE — Premium image slider
   ================================================================= */

/* Main carousel images */
.detail-slider .carousel-inner .item img,
#detailsSlider .carousel-inner .item img {
  width: 100% !important;
  height: 400px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #f1f5f9 !important;
  border-radius: 12px !important;
}

/* Thumbnail strip */
.adThubnail li img {
  width: 100% !important;
  height: 70px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* Ad detail header section */
.ad-detail {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 24px !important;
  border: 1.5px solid #f0f2f5 !important;
  margin-bottom: 20px !important;
}

.ad-detail .ttl {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  margin: 0 0 16px !important;
  line-height: 1.3 !important;
}

.ad-detail p.desc {
  font-size: 14px !important;
  color: #4b5563 !important;
  line-height: 1.75 !important;
}

/* =================================================================
   DROPDOWN — Fix Change Password appearing on hover / misclick
   Only open on explicit click, not hover
   ================================================================= */

/* Disable Bootstrap's hover-open behavior */
.bp-user-dropdown:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu {
  display: none;
}

/* Only show on .open class (set by Bootstrap on click) */
.bp-user-dropdown.open > .dropdown-menu,
.dropdown.open > .dropdown-menu {
  display: block !important;
}

/* Ensure the dropdown toggle cursor is pointer */
.bp-user-dropdown .dropdown-toggle { cursor: pointer !important; }

/* =================================================================
   "SELL / POST AD" — Single location, no duplicates
   Remove from mobile menu since it's in nav
   ================================================================= */

/* The mobile menu's Post New Ad CTA was removed from HTML.
   Footer "Post Free Ad" link stays as navigation only — no button style conflict */

/* Ensure bp-sell-btn in nav is the ONLY prominent post CTA */
.bp-sell-btn {
  background: linear-gradient(135deg, #e94560, #c0283f) !important;
  color: #ffffff !important;
  padding: 8px 22px !important;
  border-radius: 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all 0.2s !important;
  box-shadow: 0 3px 10px rgba(233,69,96,0.3) !important;
  border: none !important;
}

.bp-sell-btn:hover {
  background: linear-gradient(135deg, #d63050, #a8223a) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(233,69,96,0.4) !important;
}

/* Mobile bottom nav — 4 items evenly spaced, no circle button */
.bp-mobile-nav ul li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  padding: 6px 10px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  border-radius: 8px !important;
}

.bp-mobile-nav ul li a:hover,
.bp-mobile-nav ul li a.active { color: #2563eb !important; }

.bp-mobile-nav ul li a i { font-size: 18px !important; }

/* Post Ad link in mobile nav — same style as others, no circle */
.bp-mobile-nav ul li a[href*="AddPost"] {
  color: #e94560 !important;
}

.bp-mobile-nav ul li a[href*="AddPost"] i { font-size: 18px !important; }