/* ==================== ITEM CARD (AD CARD) STYLES ==================== */
/* ✅ UPDATED TO MATCH MOCKUP SIZING / SPACING / FONTS */

:root {
  --ad-orange: #ff7a18;
  --ad-orange-dark: #e66a15;
  --ad-border: #fdba74;
  --ad-border-hover: #ff7a18;
  --ad-radius: 22px;
  --ad-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --ad-shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.10);
}

.ad-card,
.ad-card * {
  box-sizing: border-box !important;
}

/* ✅ Card */
.ad-card {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  background: #fff !important;
  border: 2px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  overflow: hidden !important;

  flex-direction: column !important;

  box-shadow: var(--ad-shadow) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;

  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;

  /* Container queries: card adapts its internals to its own width */
  container-type: inline-size !important;
  container-name: ad-card !important;
}

.ad-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ad-shadow-hover) !important;
  border-color: var(--ad-border-hover) !important;
}

/* ==================== IMAGE SECTION ==================== */

.ad-img-container {
  position: relative !important;
}

.ad-imgwrap {
  position: relative !important;
  background: #f3f4f6 !important;
  overflow: hidden !important;

  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  flex: 0 0 auto !important;

  display: block !important;
  height: auto !important;
}

.ad-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

.ad-card:hover .ad-img {
  transform: scale(1.06) !important;
}

.ad-img-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.875rem !important;
  color: #9ca3af !important;
  background: #f3f4f6 !important;
}

/* ==================== FAVORITE BUTTON ==================== */

.ad-fav-btn {
  position: absolute !important;
  bottom: 0.75rem !important;
  left: 0.75rem !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--ad-orange) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease !important;
  cursor: pointer !important;
  z-index: 20 !important;
}

.ad-fav-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16) !important;
  filter: drop-shadow(0 0 3px rgba(255, 122, 24, 0.35)) !important;
}

.ad-fav-btn .heart-filled { display: none !important; }
.ad-fav-btn .heart-outline { display: block !important; }

.ad-fav-btn.is-active .heart-filled {
  display: block !important;
  animation: favPop 0.22s ease-out;
}
.ad-fav-btn.is-active .heart-outline { display: none !important; }
.ad-fav-btn.is-active { color: var(--ad-orange) !important; }

@keyframes favPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Hide owner fav if needed */
.ad-fav-btn[data-is-owner="1"] { display: none !important; }

/* ==================== CATEGORY BADGE ==================== */

.ad-cat-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 30 !important;

  background: #fff !important;
  border: 2px solid var(--ad-orange) !important;
  color: #1f2937 !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;

  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;

  text-decoration: none !important;
  display: inline-block !important;
}

.ad-cat-badge:hover {
  background: #ffedd5 !important;
  color: #1e293b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12) !important;
}

/* ==================== FEATURED BADGE ==================== */

.ad-featured-badge,
.ad-featured-tag {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 30 !important;

  background: var(--ad-orange) !important;
  color: #fff !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18) !important;
}

/* ==================== CONTENT WRAPPER WITH HOVER ==================== */

.ad-content-wrapper,
.ad-lower {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 !important;
}

/* Hover overlay */
.ad-hover-overlay,
.ad-hover-layer {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;

  z-index: 60 !important;          /* above content */
  pointer-events: none !important; /* overlay doesn't block */
  background: rgba(255, 237, 213, 0) !important;
}

.ad-card:hover .ad-hover-overlay,
.ad-card:hover .ad-hover-layer {
  opacity: 1 !important;
  background: rgba(255, 237, 213, 0.70) !important;
  pointer-events: none !important;
}

.ad-hover-bg {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 237, 213, 0) !important;
  transition: all 0.2s ease !important;
  pointer-events: none !important;
}

.ad-card:hover .ad-hover-bg {
  background: rgba(255, 237, 213, 0.7) !important;
}

/* Hint (pointer on "عرض الإعلان") */
.ad-hover-hint {
  position: absolute !important;
  top: calc(50% - 14px) !important;
  left: 4px !important;
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  gap: 4px !important;

  opacity: 0 !important;
  transition: opacity 0.2s ease !important;

  text-decoration: none !important;
  color: inherit !important;

  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 70 !important;
}

.ad-card:hover .ad-hover-hint { opacity: 1 !important; }

.ad-hint-text,
.ad-hover-hint .txt {
  display: flex !important;
  flex-direction: column !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  color: var(--ad-orange) !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

.ad-hint-arrow,
.ad-hover-hint .arrow {
  color: var(--ad-orange) !important;
  transform-origin: center !important;
}

/* Arrow animation */
@keyframes nudgeLeft {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}

.ad-card:hover .ad-hint-arrow,
.ad-card:hover .ad-hover-hint .arrow {
  animation: nudgeLeft 0.65s ease-in-out infinite !important;
}

/* ==================== BODY (UPDATED TO MATCH MOCKUP) ==================== */
/* mockup: <div class="relative flex-1 flex flex-col pt-2 p-4 gap-2"> */

.ad-body {
  position: relative !important;
  z-index: 20 !important;

  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;

  padding: 16px !important;      /* p-4 */
  padding-top: 8px !important;   /* pt-2 */
  gap: 8px !important;           /* gap-2 */
}

/* mockup: font-bold text-sm ... min-h-[48px] ... py-1 rounded-lg */
.ad-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  font-size: 14px !important;    /* text-sm */
  font-weight: 700 !important;   /* font-bold */
  color: #111827 !important;     /* text-gray-900 */
  line-height: 1.4 !important;   /* tighter (fix tall card) */

  margin: 0 !important;          /* remove extra height */
  min-height: 48px !important;   /* min-h-[48px] */

  position: relative !important;
  z-index: 5 !important;

  backdrop-filter: blur(8px) !important;
  padding: 4px 0 !important;     /* py-1 */
  border-radius: 8px !important; /* rounded-lg */

  transition: color 0.2s ease !important;
}

.ad-card:hover .ad-title { color: var(--ad-orange) !important; }

/* mockup: text-[11px] text-gray-500 mt-3 gap-4 */
.ad-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;          /* gap-4 */

  font-size: 11px !important;    /* text-[11px] */
  font-weight: 400 !important;
  color: #6b7280 !important;     /* text-gray-500 */

  margin-top: 12px !important;   /* mt-3 */
  padding-bottom: 0 !important;  /* remove extra height */
}

.ad-meta > span,
.ad-meta-item {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
}

/* mockup icons: w-3.5 h-3.5 */
.ad-meta-icon,
.ad-ico {
  width: 14px !important;
  height: 14px !important;
  color: var(--ad-orange) !important;
}

@media (min-width: 640px) {
  .ad-meta { font-size: 12px !important; } /* sm:text-xs */
}

/* ==================== FOOTER (UPDATED TO MATCH MOCKUP) ==================== */
/* mockup: <div class="... p-4 bg-white border-t-2 border-orange-200"> */

.ad-footer {
  position: relative !important;
  z-index: 20 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  padding: 16px !important;                  /* p-4 */
  border-top: 2px solid #fed7aa !important;  /* border-orange-200 */
  background: #fff !important;
}

.ad-seller {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

/* mockup avatar: w-7 h-7 rounded-full border */
.ad-avatar,
.ad-footer img {
  width: 28px !important;        /* w-7 */
  height: 28px !important;       /* h-7 */
  border-radius: 999px !important;
  background: #e5e7eb !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid #e5e7eb !important;
}

.ad-avatar-fallback {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #e5e7eb !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 900 !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.ad-seller-name {
  font-weight: 500 !important;
  color: #111827 !important;
  font-size: 12px !important;   /* text-xs */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 !important;
}

/* mockup price: px-4 py-1.5 rounded-xl text-xs sm:text-sm font-bold */
.ad-price {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;   /* text-xs */
  padding: 6px 16px !important; /* py-1.5 ~ 6px, px-4 */
  border-radius: 12px !important; /* rounded-xl */
  background: var(--ad-orange) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

@media (min-width: 640px) {
  .ad-seller-name { font-size: 14px !important; } /* sm:text-sm */
  .ad-price { font-size: 14px !important; }       /* sm:text-sm */
}

@media (max-width: 639px) {
  /* ── Mobile: bigger everything ── */
  .ad-body          { padding: 14px !important; padding-top: 10px !important; gap: 10px !important; }
  .ad-title         { font-size: 16px !important; min-height: 52px !important; line-height: 1.45 !important; }
  .ad-meta          { font-size: 13px !important; gap: 14px !important; margin-top: 10px !important; }
  .ad-ico           { width: 15px !important; height: 15px !important; }
  .ad-footer        { padding: 14px 16px !important; }
  .ad-footer img    { width: 34px !important; height: 34px !important; }
  .ad-avatar-fallback { width: 34px !important; height: 34px !important; font-size: 14px !important; }
  .ad-seller-name   { font-size: 14px !important; }
  .ad-price         { font-size: 14px !important; padding: 7px 16px !important; }
}

/* ==================== CONTAINER QUERIES (desktop only — mobile always uses default sizes) ==================== */

@media (min-width: 640px) {

  /* ── 4-col width: card ≤ 310px ── */
  @container ad-card (max-width: 310px) {
    .ad-body          { padding: 12px !important; padding-top: 6px !important; gap: 6px !important; }
    .ad-title         { font-size: 13px !important; min-height: 40px !important; }
    .ad-meta          { gap: 10px !important; margin-top: 8px !important; }
    .ad-ico           { width: 12px !important; height: 12px !important; }
    .ad-footer img    { width: 26px !important; height: 26px !important; }
    .ad-avatar-fallback { width: 26px !important; height: 26px !important; font-size: 11px !important; }
    .ad-price         { padding: 6px 12px !important; }
    .ad-cat-badge     { font-size: 10px !important; padding: 4px 8px !important; }
    .ad-featured-tag  { font-size: 10px !important; padding: 4px 8px !important; }
  }

  /* ── 5-col width: card ≤ 260px ── */
  @container ad-card (max-width: 260px) {
    .ad-body          { padding: 8px !important; padding-top: 5px !important; gap: 4px !important; }
    .ad-title         { font-size: 11px !important; min-height: 32px !important; }
    .ad-meta          { gap: 6px !important; margin-top: 5px !important; }
    .ad-ico           { width: 11px !important; height: 11px !important; }
    .ad-footer        { padding: 14px !important; }
    .ad-footer img    { width: 25px !important; height: 25px !important; }
    .ad-avatar-fallback { width: 25px !important; height: 25px !important; font-size: 10px !important; }
    .ad-seller-name   { font-size: 11px !important; }
    .ad-price         { font-size: 11px !important; padding: 5px 12px !important; }
    .ad-cat-badge     { font-size: 9px !important; padding: 3px 6px !important; top: 8px !important; right: 8px !important; }
    .ad-featured-tag  { font-size: 9px !important; padding: 3px 6px !important; top: 8px !important; left: 8px !important; }
  }

}