/* =============================
   MC Emaar Projects UI Enhancer
   ============================= */

/* 1) Card shell: white border + comfy gray outline */
.eg-project-card,
.eg-project-item,
.eg-card,
.project-card,
.ad-card,
.sb-ad-card,
.listing-card,
.egt-card,
.egt-project-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important; /* comfy gray */
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
}

/* 2) Force image height 160px */
.eg-project-card .eg-card-image,
.eg-project-item .eg-card-image,
.eg-card .eg-card-image,
.project-card .eg-card-image,
.ad-card .eg-card-image,
.sb-ad-card .eg-card-image,
.listing-card .eg-card-image,
.egt-card .eg-card-image,
.egt-project-card .eg-card-image,
.eg-project-card .eg-card-media,
.eg-project-item .eg-card-media,
.egt-card .eg-card-media,
.egt-project-card .eg-card-media,
.eg-project-card .card-img,
.eg-project-item .card-img,
.egt-card .card-img,
.egt-project-card .card-img,
.eg-project-card .img-box,
.eg-project-item .img-box,
.egt-card .img-box,
.egt-project-card .img-box {
  height: 160px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* any img inside those image boxes */
.eg-project-card .eg-card-image img,
.eg-project-item .eg-card-image img,
.eg-card .eg-card-image img,
.project-card .eg-card-image img,
.ad-card .eg-card-image img,
.sb-ad-card .eg-card-image img,
.listing-card .eg-card-image img,
.egt-card .eg-card-image img,
.egt-project-card .eg-card-image img,
.eg-project-card .eg-card-media img,
.eg-project-item .eg-card-media img,
.egt-card .eg-card-media img,
.egt-project-card .eg-card-media img,
.eg-project-card .card-img img,
.eg-project-item .card-img img,
.egt-card .card-img img,
.egt-project-card .card-img img,
.eg-project-card .img-box img,
.eg-project-item .img-box img,
.egt-card .img-box img,
.egt-project-card .img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 3) Remove duplicate title overlay on image */
.eg-card-title-overlay,
.eg-title-overlay,
.card-title-overlay,
.eg-image-title,
.eg-stamp-title,
.eg-overlay-title,
.eg-project-title-overlay,
.egt-title-overlay {
  display: none !important;
}

/* 4) Move flag to be beside views:
   We do this by hiding any flag inside image area, and showing flag in meta row if present */
.eg-project-card .eg-flag,
.eg-project-item .eg-flag,
.egt-card .eg-flag,
.egt-project-card .eg-flag {
  vertical-align: middle !important;
}

/* hide flag if it is inside image box */
.eg-project-card .eg-card-image .eg-flag,
.eg-project-item .eg-card-image .eg-flag,
.egt-card .eg-card-image .eg-flag,
.egt-project-card .eg-card-image .eg-flag,
.eg-project-card .eg-card-media .eg-flag,
.eg-project-item .eg-card-media .eg-flag,
.egt-card .eg-card-media .eg-flag,
.egt-project-card .eg-card-media .eg-flag,
.eg-project-card .img-box .eg-flag,
.eg-project-item .img-box .eg-flag,
.egt-card .img-box .eg-flag,
.egt-project-card .img-box .eg-flag {
  display: none !important;
}

/* If there is a meta row, keep spacing around views + flag */
.eg-card-meta,
.eg-meta,
.card-meta,
.eg-project-meta,
.egt-meta,
.egt-project-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* If views element exists, ensure flag can sit next to it */
.eg-views,
.eg-card-views,
.card-views,
.project-views,
.egt-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 5) Expired: change status text color to red
   (expects the router adds a class like .expired or data-expired; we style both) */
.expired .eg-project-status,
.eg-project-card.expired .eg-project-status,
.eg-project-item.expired .eg-project-status,
[data-expired="1"] .eg-project-status,
.expired .eg-card-status,
[data-expired="1"] .eg-card-status {
  color: #dc2626 !important;
  font-weight: 700 !important;
}