/* ====================================================
   OLX-STYLE ITEM PAGE LAYOUT
   Isolated styles - only for item page with .olx-layout class
   ==================================================== */

/* Mobile-only elements - hidden on desktop */
.olx-mobile-info,
.olx-mobile-bottom-bar {
  display: none;
}

/* Hide gallery favorite on desktop, but show in no-image box */
.swiper-container .olx-mobile-favorite {
  display: none;
}

/* Hide shortcuts block (Print, Send to friend) */
body#item.olx-layout #shortcuts {
  display: none !important;
}

/* Hide favorite items block on item page */
body#item.olx-layout #fi_list_items {
  display: none !important;
}

/* Position for mobile favorite button in gallery */
body#item.olx-layout #item-image {
  position: relative;
}

/* Main wrapper - OLX-style two columns */
body#item.olx-layout .container.primary {
  padding-bottom: 24px;
  flex-direction: column;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 90px;
  padding-right: 90px;
}

.olx-item-wrapper {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  gap: 16px;
}

.olx-item-wrapper.sold {
  position: relative;
  overflow: hidden;
  user-select: none;
  padding: 4px;
}

.olx-item-wrapper.sold:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 4px;
}

.olx-item-wrapper.sold:before {
  content: attr(title);
  position: absolute;
  border-radius: 4px;
  left: 10px;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: var(--mb-color-primary);
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  color: #fff;
  padding: 10px;
  text-align: center;
}

/* Left Column - Main Content */
.olx-left-column {
  flex: 1;
  max-width: calc(100% - 330px);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Desktop gallery - fixed height for consistency */
body#item.olx-layout #item-image {
  height: 420px;
  max-height: 420px;
  overflow: hidden;
  border-radius: 12px;
}

body#item.olx-layout #item-image.noimg {
  height: 420px;
  max-height: 420px;
}

body#item.olx-layout #item-image .item-noimg-box {
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mb-color12, #2a2a2a);
  position: relative;
}

/* Favorite button for no-image listings - hidden on desktop */
body#item.olx-layout #item-image .olx-noimg-favorite {
  display: none;
}

/* Right Column - Sidebar */
.olx-right-column {
  width: 346px;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: sticky;
  top: 80px;
}

/* Gallery in left column */
body#item.olx-layout #item-image {
  margin: 0 0 16px 0;
  border-radius: 12px;
}

/* OLX-style gallery - single large image */
body#item.olx-layout #item-image li {
  width: 100% !important;
  padding-top: 0 !important;
  height: 420px !important;
  margin: 0 !important;
}

body#item.olx-layout #item-image .swiper-wrapper {
  justify-content: center;
  flex-wrap: nowrap;
}

body#item.olx-layout #item-image.fewimg .swiper-wrapper {
  justify-content: center;
}

body#item.olx-layout #item-image .img-bg {
  border-radius: 12px;
}

body#item.olx-layout #item-image .swiper-slide {
  width: 100% !important;
  flex-shrink: 0 !important;
}

/* Action buttons under gallery */
.olx-action-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 0 0 20px 0;
}

.olx-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s;
  background: var(--mb-color11, #f5f5f5);
  color: var(--mb-color4, #333);
}

.olx-action-btn:hover {
  background: var(--mb-color10, #e0e0e0);
  text-decoration: none;
}

.olx-action-btn i {
  font-size: 16px;
}

.olx-action-btn.activate {
  background: var(--mb-color-primary);
  color: #fff;
}

.olx-action-btn.activate:hover {
  background: var(--mb-color-primary-hover);
}

/* Tags / Pills section */
.olx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px 0;
}

.olx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: 0.2s;
  background: var(--mb-color12, #2a2a2a);
  color: var(--mb-color2, #e0e0e0);
  border: 1px solid var(--mb-color11, #444);
  color: var(--mb-color4, #333);
}

.olx-tag:hover {
  background: var(--mb-color11, #333);
  text-decoration: none;
}

.olx-tag i {
  font-size: 13px;
  opacity: 0.7;
}

/* All tag types use same neutral style with light text */
.olx-tag.company,
.olx-tag.private,
.olx-tag.location,
.olx-tag.condition {
  background: var(--mb-color12, #2a2a2a);
  color: var(--mb-color2, #e0e0e0);
}

/* Hide location tag on mobile - it's too long */
@media screen and (max-width: 768px) {
  .olx-tag.location {
    display: none;
  }
}

/* Content sections */
.olx-section {
  margin: 0 0 24px 0;
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--mb-color11, #eee);
}

.olx-section:last-child {
  border-bottom: none;
}

.olx-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--mb-color2, #2c2c2c);
}

/* Description */
.olx-description {
  padding-bottom: 24px;
}

.olx-description .olx-desc-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mb-color4, #333);
}

/* Attributes / Custom fields */
.olx-attributes .custom-fields {
  margin: 0;
}

/* Item meta (ID, views, Report) */
.olx-item-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--mb-color11, #eee);
  font-size: 13px;
  color: var(--mb-color7, #888);
}

.olx-item-id {
  font-size: 13px;
  color: var(--mb-color7, #888);
}

.olx-item-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mb-color7, #888);
}

.olx-item-views i {
  font-size: 14px;
}

.olx-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mb-color7, #888);
  text-decoration: none;
  transition: 0.2s;
}

.olx-report-btn:hover {
  color: var(--mb-color-primary);
  text-decoration: none;
}

/* Sidebar boxes */
.olx-sidebar-box {
  background: var(--mb-color12, #f9f9f9);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 16px 0;
}

.olx-sidebar-box:last-child {
  margin-bottom: 0;
}

.olx-box-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mb-color7, #888);
  margin: 0 0 12px 0;
}

/* Main info box */
.olx-main-info {
  background: var(--mb-color12, #f9f9f9);
}

.olx-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px 0;
}

.olx-pub-date {
  font-size: 13px;
  color: var(--mb-color7, #888);
}

/* Favorite button OLX style */
.olx-favorite-btn {
  display: flex;
  align-items: center;
}

.olx-favorite-btn a,
.olx-favorite-btn .fi_save_favorite,
.olx-favorite-btn .svi-save-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mb-color11, #f5f5f5);
  color: var(--mb-color7, #888);
  text-decoration: none;
  transition: 0.2s;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden;
}

.olx-favorite-btn a:hover,
.olx-favorite-btn .fi_save_favorite:hover,
.olx-favorite-btn .svi-save-btn:hover {
  background: var(--mb-color10, #e0e0e0);
  text-decoration: none;
}

.olx-favorite-btn a.is_favorite,
.olx-favorite-btn .fi_save_favorite.is_favorite,
.olx-favorite-btn .svi-save-btn.saved {
  color: #e53935;
  background: #ffebee;
}

.olx-favorite-btn a i,
.olx-favorite-btn .fi_save_favorite i,
.olx-favorite-btn .svi-save-btn i {
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Hide text in favorite button, show only icon */
.olx-favorite-btn a span,
.olx-favorite-btn .fi_save_favorite span,
.olx-favorite-btn .svi-save-btn span {
  display: none !important;
}

/* Title in sidebar */
.olx-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px 0;
  color: var(--mb-color2, #2c2c2c);
}

.olx-title .label {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

.olx-title .label.premium {
  background: var(--mb-color-primary);
  color: #fff;
}

.olx-title .label.expired {
  background: #9e9e9e;
  color: #fff;
}

.olx-title .label.sold {
  background: #f44336;
  color: #fff;
}

.olx-title .label.reserved {
  background: #ff9800;
  color: #fff;
}

/* Price */
.olx-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--mb-color2, #2c2c2c);
  margin: 0 0 16px 0;
}

/* Make offer link */
.olx-make-offer {
  display: inline-block;
  font-size: 14px;
  color: var(--mb-color-secondary);
  text-decoration: underline;
  margin: -8px 0 16px 0;
}

.olx-make-offer:hover {
  color: var(--mb-color-secondary-hover);
}

/* Contact buttons */
.olx-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.olx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
  cursor: pointer;
  border: none;
}

.olx-btn:hover {
  text-decoration: none;
}

.olx-btn-primary {
  background: var(--mb-color-primary);
  color: #fff;
}

.olx-btn-primary:hover {
  background: var(--mb-color-primary-hover);
  color: #fff;
}

.olx-btn-secondary {
  background: var(--mb-color11, #f5f5f5);
  color: var(--mb-color2, #2c2c2c);
  border: 1px solid var(--mb-color10, #ddd);
}

.olx-btn-secondary:hover {
  background: var(--mb-color10, #e0e0e0);
  color: var(--mb-color2, #2c2c2c);
}

.olx-btn-full {
  width: 100%;
}

.olx-btn i {
  font-size: 16px;
}

/* Seller box */
.olx-seller-box {
  background: var(--mb-color12, #f9f9f9);
}

.olx-seller-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.olx-seller-avatar-sm {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.olx-seller-avatar-sm img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.olx-seller-avatar-sm .online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4caf50;
  border: 2px solid var(--mb-color12, #f9f9f9);
}

.olx-seller-avatar-sm .online.off {
  background: #9e9e9e;
}

.olx-seller-data {
  flex: 1;
  min-width: 0;
}

.olx-seller-name-sm {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--mb-color2, #2c2c2c);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.olx-seller-name-sm:hover {
  color: var(--mb-color-primary);
  text-decoration: none;
}

.olx-seller-rating-sm {
  margin: 4px 0 0 0;
}

.olx-seller-items {
  font-size: 13px;
  color: var(--mb-color7, #888);
  margin: 2px 0 0 0;
}

.olx-seller-reg {
  font-size: 12px;
  color: var(--mb-color7, #888);
  margin: 2px 0 0 0;
}

.olx-all-listings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0 0;
  margin: 12px 0 0 0;
  border-top: 1px solid var(--mb-color11, #eee);
  font-size: 14px;
  color: var(--mb-color-secondary);
  text-decoration: none;
}

.olx-all-listings:hover {
  color: var(--mb-color-secondary-hover);
  text-decoration: none;
}

.olx-all-listings i {
  font-size: 12px;
}

/* Location box */
.olx-location-box {
  background: var(--mb-color12, #f9f9f9);
}

.olx-location-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.olx-location-content > i {
  font-size: 20px;
  color: var(--mb-color-primary);
  margin-top: 2px;
}

.olx-location-text {
  flex: 1;
}

.olx-location-text span {
  display: block;
  font-size: 14px;
  color: var(--mb-color2, #2c2c2c);
}

.olx-directions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--mb-color-secondary);
  text-decoration: none;
  margin-top: 4px;
}

.olx-directions:hover {
  text-decoration: underline;
}

.olx-directions i {
  font-size: 11px;
}

/* Owner actions */
.olx-owner-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--mb-color12, #f9f9f9);
}

.olx-owner-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s;
  background: var(--mb-color11, #fff);
  color: var(--mb-color4, #333);
}

.olx-owner-btn:hover {
  background: var(--mb-color10, #e0e0e0);
  text-decoration: none;
}

.olx-owner-btn i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.olx-owner-btn.delete {
  color: #f44336;
}

.olx-owner-btn.delete:hover {
  background: #ffebee;
}

/* Contact seller section (bottom of left column) */
.olx-contact-seller {
  background: var(--mb-color12, #f9f9f9);
  border-radius: 12px;
  padding: 24px;
  margin: 0 0 24px 0;
}

.olx-seller-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.olx-seller-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.olx-seller-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.olx-seller-avatar .online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4caf50;
  border: 2px solid var(--mb-color12, #f9f9f9);
}

.olx-seller-info {
  flex: 1;
  min-width: 150px;
}

.olx-seller-name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--mb-color2, #2c2c2c);
  text-decoration: none;
  margin: 0 0 4px 0;
}

.olx-seller-name:hover {
  color: var(--mb-color-primary);
  text-decoration: none;
}

.olx-seller-rating {
  margin: 4px 0;
}

.olx-seller-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--mb-color7, #888);
}

.olx-seller-meta span:not(:last-child):after {
  content: "•";
  margin-left: 8px;
}

.olx-seller-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

/* ====================================================
   RESPONSIVE - TABLET (max-width: 1024px)
   ==================================================== */
@media screen and (max-width: 1024px) {
  .olx-item-wrapper {
    flex-direction: column;
  }
  
  .olx-left-column {
    width: 100%;
  }
  
  .olx-right-column {
    width: 100%;
    position: relative;
    top: 0;
  }
}

/* Hide location-mobile on desktop */
.olx-location-mobile {
  display: none;
}

/* ====================================================
   RESPONSIVE - MOBILE (max-width: 768px)
   OLX Mobile Style
   ==================================================== */
@media screen and (max-width: 768px) {
  /* CRITICAL: Prevent horizontal scroll on entire page */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  body#item.olx-layout,
  body#item.olx-layout html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  /* Show mobile-only elements */
  .olx-mobile-favorite,
  .olx-mobile-info {
    display: block !important;
  }
  
  /* Favorite button inside no-image box - ensure visible */
  .item-noimg-box .olx-mobile-favorite {
    display: flex !important;
  }
  
  /* Favorite button for no-image listings - mobile only */
  body#item.olx-layout #item-image .olx-noimg-favorite {
    display: flex !important;
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body#item.olx-layout #item-image .olx-noimg-favorite .favorite {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  body#item.olx-layout #item-image .olx-noimg-favorite a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    color: #666 !important;
    font-size: 0 !important;
    text-decoration: none !important;
  }
  
  body#item.olx-layout #item-image .olx-noimg-favorite a i {
    font-size: 20px !important;
    margin: 0 !important;
    color: #666 !important;
    line-height: 1 !important;
  }
  
  body#item.olx-layout #item-image .olx-noimg-favorite a.is_favorite i,
  body#item.olx-layout #item-image .olx-noimg-favorite .is_favorite i {
    color: #e53935 !important;
  }
  
  body#item.olx-layout #item-image .olx-noimg-favorite a span {
    display: none !important;
  }
  
  /* Mobile header with date and favorite */
  .olx-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  
  .olx-mobile-fav-btn {
    display: flex !important;
  }
  
  .olx-mobile-fav-btn .favorite {
    display: flex !important;
  }
  
  .olx-mobile-fav-btn a,
  .olx-mobile-fav-btn .fi_save_favorite {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%;
    color: #333 !important;
    font-size: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .olx-mobile-fav-btn a i,
  .olx-mobile-fav-btn .fi_save_favorite i {
    font-size: 20px !important;
    margin: 0 !important;
  }
  
  .olx-mobile-fav-btn a.is_favorite,
  .olx-mobile-fav-btn .fi_save_favorite.is_favorite {
    color: #e53935;
  }
  
  .olx-mobile-fav-btn a span,
  .olx-mobile-fav-btn .fi_save_favorite span {
    display: none !important;
  }
  
  .olx-mobile-bottom-bar {
    display: flex;
  }
  
  /* Hide desktop sidebar on mobile */
  body#item.olx-layout .olx-right-column {
    display: none;
  }
  
  /* Mobile container - prevent horizontal overflow */
  body#item.olx-layout .container.primary {
    padding: 0 !important;
    margin: 0 auto;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  
  body#item.olx-layout .olx-item-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  
  body#item.olx-layout .olx-left-column {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }
  
  /* Mobile wrapper - single column */
  .olx-item-wrapper {
    flex-direction: column;
    gap: 0;
    padding-bottom: 80px; /* Space for fixed bottom bar */
  }
  
  .olx-left-column {
    width: 100%;
    padding: 0;
  }
  
  /* Gallery - Full width, reduced height, NO horizontal overflow */
  body#item.olx-layout #item-image {
    margin: 0;
    border-radius: 0;
    position: relative;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }
  
  body#item.olx-layout #item-image .img-bg {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  body#item.olx-layout #item-image .img-bg > img {
    max-width: 100% !important;
    width: 100% !important;
    object-fit: cover;
  }
  
  body#item.olx-layout #item-image .swiper-container {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
  }
  
  body#item.olx-layout #item-image .swiper-wrapper {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  body#item.olx-layout #item-image li {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  body#item.olx-layout #item-image li a {
    max-width: 100% !important;
    width: 100% !important;
    display: block;
  }
  
  body#item.olx-layout #item-image li img,
  body#item.olx-layout #item-image li a img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto;
    object-fit: cover;
  }
  
  body#item.olx-layout #item-image li {
    padding-top: 56.25% !important; /* 16:9 aspect ratio - more compact */
  }
  
  body#item.olx-layout #item-image {
    max-height: 280px;
    overflow: hidden;
  }
  
  body#item.olx-layout #item-image .swiper-slide {
    max-height: 280px;
  }
  
  body#item.olx-layout #item-image .item-noimg-box,
  body#item.olx-layout #item-image.noimg .item-noimg-box {
    height: 280px !important;
    max-height: 280px !important;
    min-height: 280px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }
  
  /* Favorite button inside no-image box */
  body#item.olx-layout #item-image .item-noimg-box .olx-mobile-favorite {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body#item.olx-layout #item-image .item-noimg-box .olx-mobile-favorite .favorite {
    display: flex !important;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  
  body#item.olx-layout #item-image .item-noimg-box .olx-mobile-favorite a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #666 !important;
    font-size: 0;
  }
  
  body#item.olx-layout #item-image .item-noimg-box .olx-mobile-favorite a i {
    font-size: 22px !important;
    margin: 0 !important;
  }
  
  body#item.olx-layout #item-image .item-noimg-box .olx-mobile-favorite a span {
    display: none !important;
  }
  
  body#item.olx-layout #item-image.noimg {
    height: 280px !important;
    max-height: 280px !important;
    min-height: 280px !important;
  }
  
  body#item.olx-layout #item-image .swiper-container {
    border-radius: 0;
  }
  
  /* Floating favorite button over gallery */
  body#item.olx-layout .olx-mobile-favorite {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure gallery wrapper is positioned for absolute children */
  body#item.olx-layout #item-image .swiper-container {
    position: relative;
  }
  
  .olx-mobile-favorite a,
  .olx-mobile-favorite .fi_save_favorite {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 0;
  }
  
  .olx-mobile-favorite a i,
  .olx-mobile-favorite .fi_save_favorite i {
    font-size: 22px !important;
    margin: 0 !important;
  }
  
  .olx-mobile-favorite a.is_favorite,
  .olx-mobile-favorite .fi_save_favorite.is_favorite {
    color: #e53935;
  }
  
  .olx-mobile-favorite a span,
  .olx-mobile-favorite .fi_save_favorite span {
    display: none !important;
  }
  
  /* Mobile main info section - transparent, no background */
  body#item.olx-layout .olx-mobile-info {
    padding: 12px 16px 8px 16px !important;
    background: transparent !important;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  body#item.olx-layout .olx-mobile-info.isMobile {
    display: block;
  }
  
  body#item.olx-layout .olx-mobile-date {
    font-size: 13px;
    color: var(--mb-color7, #888);
    margin: 0 0 6px 0;
    padding: 0;
  }
  
  body#item.olx-layout .olx-mobile-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
    color: var(--mb-color2, #2c2c2c);
  }
  
  .olx-mobile-title .label {
    display: inline-block;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 3px;
    margin: 0 6px 0 0;
    vertical-align: middle;
  }
  
  .olx-mobile-title .label.premium {
    background: var(--mb-color-primary);
    color: #fff;
  }
  
  .olx-mobile-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--mb-color2, #2c2c2c);
    margin: 0 0 8px 0;
  }
  
  /* Mobile tags/attributes */
  /* Mobile tags - wrap, no scroll */
  .olx-tags {
    padding: 0 16px 12px 16px;
    margin: 0;
    gap: 8px;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  
  .olx-tag {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  
  /* Mobile sections */
  .olx-section {
    padding: 16px;
    margin: 0;
    border-bottom: 1px solid var(--mb-color10, #333);
  }
  
  .olx-section h2 {
    font-size: 16px;
    margin: 0 0 12px 0;
  }
  
  /* Mobile description */
  .olx-description .olx-desc-content {
    font-size: 14px;
    line-height: 1.5;
  }
  
  /* Mobile item meta */
  .olx-item-meta {
    padding: 12px 16px;
    border-top: none;
    border-bottom: 1px solid var(--mb-color10, #333);
    background: transparent;
  }
  
  /* Mobile contact seller section */
  .olx-contact-seller {
    border-radius: 0;
    margin: 0;
    padding: 16px;
    background: transparent;
    border-bottom: 1px solid var(--mb-color10, #333);
  }
  
  .olx-seller-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  
  .olx-seller-avatar {
    width: 56px;
    height: 56px;
  }
  
  .olx-seller-avatar img {
    width: 56px;
    height: 56px;
  }
  
  .olx-seller-name {
    font-size: 16px;
  }
  
  .olx-seller-actions {
    display: none; /* Hide in contact seller block, use fixed bottom bar instead */
  }
  
  /* Mobile action buttons (owner) */
  .olx-action-buttons {
    padding: 0 16px 16px 16px;
    margin: 0;
    flex-wrap: wrap;
  }
  
  .olx-action-btn {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  /* Hide desktop promote block on mobile */
  body#item.olx-layout .promote-block {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mb-color11, #eee);
  }
  
  /* Comments section mobile */
  body#item.olx-layout #comments {
    padding: 16px;
    border-radius: 0;
  }
  
  body#item.olx-layout #comments h2 {
    font-size: 16px;
  }
  
  /* Mobile location section */
  .olx-location-mobile {
    display: block;
    border-radius: 0;
    margin: 0;
    padding: 16px;
    background: transparent;
    border-bottom: 1px solid var(--mb-color10, #333);
  }
  
  .olx-location-mobile h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mb-color7, #888);
    margin: 0 0 12px 0;
  }
  
  .olx-location-card {
    background: transparent;
  }
  
  .olx-location-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }
  
  .olx-location-info i {
    color: var(--mb-color-primary, #ff6600);
    font-size: 18px;
    margin-top: 2px;
  }
  
  .olx-location-details strong {
    font-size: 15px;
    color: var(--mb-color2, #fff);
    font-weight: 500;
  }
  
  .olx-location-map {
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .olx-location-map img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .olx-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mb-color-secondary, #ff6600);
    font-size: 14px;
    text-decoration: none;
  }
  
  .olx-directions-link:hover {
    text-decoration: underline;
  }
  
  .olx-all-listings-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0 0;
    margin-top: 12px;
    border-top: 1px solid var(--mb-color10, #333);
    color: var(--mb-color-secondary, #ff6600);
    font-size: 14px;
    text-decoration: none;
  }
  
  .olx-all-listings-link:hover {
    text-decoration: underline;
  }
  
  /* Contact seller header */
  .olx-contact-seller h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mb-color7, #888);
    margin: 0 0 12px 0;
  }
}

/* ====================================================
   FIXED BOTTOM CONTACT BAR - Mobile Only
   ==================================================== */
.olx-mobile-bottom-bar {
  display: none;
}

@media screen and (max-width: 768px) {
  .olx-mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--mb-color13, #1a1a1a);
    padding: 10px 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    gap: 10px;
    border-top: 1px solid var(--mb-color11, #333);
  }
  
  .olx-mobile-bottom-bar .olx-btn {
    flex: 1;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 500;
  }
  
  .olx-mobile-bottom-bar .olx-btn i {
    font-size: 16px;
  }
  
  .olx-mobile-bottom-bar .olx-btn-phone {
    background: var(--mb-color12, #2a2a2a);
    color: var(--mb-color2, #fff);
    border: 1px solid var(--mb-color10, #444);
  }
  
  .olx-mobile-bottom-bar .olx-btn-phone:hover {
    background: var(--mb-color11, #333);
    text-decoration: none;
  }
  
  .olx-mobile-bottom-bar .olx-btn-message {
    background: var(--mb-color-primary, #ff6600);
    color: #fff;
    border: none;
  }
  
  .olx-mobile-bottom-bar .olx-btn-message:hover {
    background: var(--mb-color-primary-hover, #e55a00);
    text-decoration: none;
  }
}

/* ====================================================
   RESPONSIVE - SMALL MOBILE (max-width: 375px)
   ==================================================== */
@media screen and (max-width: 375px) {
  .olx-mobile-title {
    font-size: 18px;
  }
  
  .olx-mobile-price {
    font-size: 22px;
  }
  
  .olx-tag {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .olx-mobile-bottom-bar .olx-btn {
    padding: 12px 12px;
    font-size: 14px;
  }
  
  .olx-section h2 {
    font-size: 15px;
  }
}

