/*
 * OyaKudi – Image Styles
 * Category tiles and listing card backgrounds
 */

/* ════════════════════════════════════════════
   CATEGORY TILE IMAGES
════════════════════════════════════════════ */

/* Base category tile image area */
.ok-cat-tile-img {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}

/* Emoji sits on top of background */
.ok-cat-emoji {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
  font-size: clamp(1.8rem, 6vw, 2.6rem);
}

/* Per-category backgrounds */
.ok-cat-electronics  .ok-cat-tile-img { background: linear-gradient(145deg, #EBF5FB 0%, #D6EAF8 100%); }
.ok-cat-vehicles     .ok-cat-tile-img { background: linear-gradient(145deg, #FDEDEC 0%, #F9CCCA 100%); }
.ok-cat-property     .ok-cat-tile-img { background: linear-gradient(145deg, #EAFAF1 0%, #C9F0D6 100%); }
.ok-cat-fashion      .ok-cat-tile-img { background: linear-gradient(145deg, #F5EEF8 0%, #E8D8F4 100%); }
.ok-cat-furniture    .ok-cat-tile-img { background: linear-gradient(145deg, #FEF9E7 0%, #FDE8B3 100%); }
.ok-cat-generator    .ok-cat-tile-img { background: linear-gradient(145deg, #FEFCE8 0%, #FDF0B0 100%); }
.ok-cat-phones       .ok-cat-tile-img { background: linear-gradient(145deg, #E8F8F5 0%, #C8EDE8 100%); }
.ok-cat-jobs         .ok-cat-tile-img { background: linear-gradient(145deg, #EAECEE 0%, #D5D8DC 100%); }
.ok-cat-agriculture  .ok-cat-tile-img { background: linear-gradient(145deg, #E8F8F5 0%, #A9DFBF 100%); }
.ok-cat-gaming       .ok-cat-tile-img { background: linear-gradient(145deg, #F4ECF7 0%, #E2D0F0 100%); }
.ok-cat-kids         .ok-cat-tile-img { background: linear-gradient(145deg, #FDEDEC 0%, #FCCBC8 100%); }
.ok-cat-sports       .ok-cat-tile-img { background: linear-gradient(145deg, #EBF5FB 0%, #BBDEFB 100%); }

/* Hover shimmer overlay */
.ok-cat-tile:hover .ok-cat-tile-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, transparent 60%);
  border-radius: inherit;
}

/* ════════════════════════════════════════════
   LISTING CARD — NO-IMAGE PLACEHOLDERS
   Category-coloured backgrounds with emoji
════════════════════════════════════════════ */
.ok-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  line-height: 1;
  position: relative;
  overflow: hidden;
}

/* Category-matched listing card backgrounds */
.ok-listing-card[data-category="electronics"]  .ok-listing-img-wrap,
.ok-listing-card[data-category="phones"]       .ok-listing-img-wrap {
  background: linear-gradient(145deg, #D6EAF8, #AED6F1) !important;
}
.ok-listing-card[data-category="vehicles"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #FADBD8, #F1948A) !important;
}
.ok-listing-card[data-category="property"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #D5F5E3, #A9DFBF) !important;
}
.ok-listing-card[data-category="fashion"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #E8DAEF, #D2B4DE) !important;
}
.ok-listing-card[data-category="furniture"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #FDEBD0, #FAD7A0) !important;
}
.ok-listing-card[data-category="generator"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #FEF9E7, #FCF3CF) !important;
}
.ok-listing-card[data-category="jobs"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #EAECEE, #D5D8DC) !important;
}
.ok-listing-card[data-category="agriculture"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #D0ECE7, #A2D9CE) !important;
}
.ok-listing-card[data-category="gaming"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #E8DAEF, #D2B4DE) !important;
}
.ok-listing-card[data-category="kids"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #FDEDEC, #F9CCCA) !important;
}
.ok-listing-card[data-category="sports"] .ok-listing-img-wrap {
  background: linear-gradient(145deg, #D6EAF8, #AED6F1) !important;
}

/* Emoji in listing card gets extra styling */
.ok-listing-img-wrap .ok-no-img {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}

/* ════════════════════════════════════════════
   LISTING CARD — REAL IMAGE ENHANCEMENTS
════════════════════════════════════════════ */
.ok-listing-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.ok-listing-card:hover .ok-listing-img-wrap img {
  transform: scale(1.06);
}

/* Image gradient overlay on bottom */
.ok-listing-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.12), transparent);
  pointer-events: none;
}

/* ════════════════════════════════════════════
   LISTING DETAIL GALLERY
════════════════════════════════════════════ */
.ok-listing-gallery {
  background: #1A1A2E;
}
.ok-gallery-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Demo listing card — emoji with coloured bg */
.ok-listing-card .ok-no-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.4;
  filter: blur(20px);
}
.ok-listing-card .ok-no-img span,
.ok-listing-card .ok-no-img {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════
   SELLER / USER AVATARS
════════════════════════════════════════════ */
.ok-seller-avatar img,
.ok-dashboard-avatar img,
.ok-avatar-btn img,
.ok-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ════════════════════════════════════════════
   DARK MODE ADJUSTMENTS
════════════════════════════════════════════ */
[data-theme="dark"] .ok-cat-electronics  .ok-cat-tile-img { background: linear-gradient(145deg, #1A3A4C 0%, #1D4670 100%) !important; }
[data-theme="dark"] .ok-cat-vehicles     .ok-cat-tile-img { background: linear-gradient(145deg, #4C1C1A 0%, #6E2020 100%) !important; }
[data-theme="dark"] .ok-cat-property     .ok-cat-tile-img { background: linear-gradient(145deg, #1A3D2B 0%, #1E5235 100%) !important; }
[data-theme="dark"] .ok-cat-fashion      .ok-cat-tile-img { background: linear-gradient(145deg, #3D2155 0%, #512E6E 100%) !important; }
[data-theme="dark"] .ok-cat-furniture    .ok-cat-tile-img { background: linear-gradient(145deg, #4D3416 0%, #6B4A1E 100%) !important; }
[data-theme="dark"] .ok-cat-generator    .ok-cat-tile-img { background: linear-gradient(145deg, #4D4010 0%, #6B591A 100%) !important; }
[data-theme="dark"] .ok-cat-phones       .ok-cat-tile-img { background: linear-gradient(145deg, #1A3D37 0%, #1E5249 100%) !important; }
[data-theme="dark"] .ok-cat-jobs         .ok-cat-tile-img { background: linear-gradient(145deg, #252B33 0%, #2C3440 100%) !important; }
[data-theme="dark"] .ok-cat-agriculture  .ok-cat-tile-img { background: linear-gradient(145deg, #1A3D37 0%, #145A32 100%) !important; }
[data-theme="dark"] .ok-cat-gaming       .ok-cat-tile-img { background: linear-gradient(145deg, #3A1A55 0%, #4A206E 100%) !important; }
[data-theme="dark"] .ok-cat-kids         .ok-cat-tile-img { background: linear-gradient(145deg, #4C1C1A 0%, #6E2020 100%) !important; }
[data-theme="dark"] .ok-cat-sports       .ok-cat-tile-img { background: linear-gradient(145deg, #1A3A4C 0%, #1D4670 100%) !important; }

[data-theme="dark"] .ok-listing-card[data-category="electronics"] .ok-listing-img-wrap,
[data-theme="dark"] .ok-listing-card[data-category="phones"]      .ok-listing-img-wrap { background: linear-gradient(145deg, #1A3A4C, #1D4670) !important; }
[data-theme="dark"] .ok-listing-card[data-category="vehicles"]    .ok-listing-img-wrap { background: linear-gradient(145deg, #4C1C1A, #6E2020) !important; }
[data-theme="dark"] .ok-listing-card[data-category="property"]    .ok-listing-img-wrap { background: linear-gradient(145deg, #1A3D2B, #1E5235) !important; }
[data-theme="dark"] .ok-listing-card[data-category="fashion"]     .ok-listing-img-wrap { background: linear-gradient(145deg, #3D2155, #512E6E) !important; }
[data-theme="dark"] .ok-listing-card[data-category="furniture"]   .ok-listing-img-wrap { background: linear-gradient(145deg, #4D3416, #6B4A1E) !important; }
[data-theme="dark"] .ok-listing-card[data-category="generator"]   .ok-listing-img-wrap { background: linear-gradient(145deg, #4D4010, #6B591A) !important; }
[data-theme="dark"] .ok-listing-card[data-category="jobs"]        .ok-listing-img-wrap { background: linear-gradient(145deg, #252B33, #2C3440) !important; }
[data-theme="dark"] .ok-listing-card[data-category="agriculture"] .ok-listing-img-wrap { background: linear-gradient(145deg, #1A3D37, #145A32) !important; }
[data-theme="dark"] .ok-listing-card[data-category="gaming"]      .ok-listing-img-wrap { background: linear-gradient(145deg, #3A1A55, #4A206E) !important; }
[data-theme="dark"] .ok-listing-card[data-category="kids"]        .ok-listing-img-wrap { background: linear-gradient(145deg, #4C1C1A, #6E2020) !important; }
[data-theme="dark"] .ok-listing-card[data-category="sports"]      .ok-listing-img-wrap { background: linear-gradient(145deg, #1A3A4C, #1D4670) !important; }

/* ════════════════════════════════════════════
   EMOJI BADGE OVERLAY on placeholder images
════════════════════════════════════════════ */
.ok-card-emoji-badge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.22));
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

/* Ensure placeholder images fill the card nicely */
.ok-listing-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Category-tile images — min height so emoji is always visible */
.ok-cat-tile-img {
  min-height: 80px;
}

/* ════════════════════════════════════════════
   CATEGORY TILE — border on hover
════════════════════════════════════════════ */
.ok-cat-electronics:hover  .ok-cat-tile-img { border-color: #2980B9 !important; box-shadow: 0 4px 20px #2980B920; }
.ok-cat-vehicles:hover     .ok-cat-tile-img { border-color: #C0392B !important; box-shadow: 0 4px 20px #C0392B20; }
.ok-cat-property:hover     .ok-cat-tile-img { border-color: #1E8449 !important; box-shadow: 0 4px 20px #1E844920; }
.ok-cat-fashion:hover      .ok-cat-tile-img { border-color: #7D3C98 !important; box-shadow: 0 4px 20px #7D3C9820; }
.ok-cat-furniture:hover    .ok-cat-tile-img { border-color: #CA6F1E !important; box-shadow: 0 4px 20px #CA6F1E20; }
.ok-cat-generator:hover    .ok-cat-tile-img { border-color: #D4AC0D !important; box-shadow: 0 4px 20px #D4AC0D20; }
.ok-cat-phones:hover       .ok-cat-tile-img { border-color: #148F77 !important; box-shadow: 0 4px 20px #148F7720; }
.ok-cat-jobs:hover         .ok-cat-tile-img { border-color: #2C3E50 !important; box-shadow: 0 4px 20px #2C3E5020; }
.ok-cat-agriculture:hover  .ok-cat-tile-img { border-color: #0E6655 !important; box-shadow: 0 4px 20px #0E665520; }
.ok-cat-gaming:hover       .ok-cat-tile-img { border-color: #6C3483 !important; box-shadow: 0 4px 20px #6C348320; }
.ok-cat-kids:hover         .ok-cat-tile-img { border-color: #C0392B !important; box-shadow: 0 4px 20px #C0392B20; }
.ok-cat-sports:hover       .ok-cat-tile-img { border-color: #1A5276 !important; box-shadow: 0 4px 20px #1A527620; }

/* ════════════════════════════════════════════
   LISTING CARD SOLD STATE
════════════════════════════════════════════ */
.ok-listing-sold .ok-listing-img-wrap {
  opacity: 0.7;
}
.ok-listing-sold .ok-listing-price {
  text-decoration: line-through;
  opacity: 0.6;
}