/* mehsul/css/mehsul.css
 * Məhsul Modulu — yalnız mövcud saytda qarşılığı olmayan, modula xas stillər.
 * Mövcud sinif adları (job-card, job-badges, dash-layout, form-group, admin-card,
 * data-table, status-pill, alert və s.) olduğu kimi təkrar istifadə olunur ki,
 * sayt UI/UX üslubu qorunsun (bax: TT bənd 24).
 */

.mehsul-card { display: flex; flex-direction: column; }

.mehsul-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-soft, #f4f4f6);
  margin-bottom: 14px;
}

.mehsul-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}

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

.mehsul-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; opacity: .35;
}

.mehsul-card-new-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-ink, #241417);
  color: #fffbe8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: var(--radius-full, 999px);
}

.mehsul-price-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #fff;
  color: var(--color-primary-dark, #d81f3d);
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 15px;
  padding: 6px 13px;
  border-radius: var(--radius-full, 999px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.mehsul-card-body { display: flex; flex-direction: column; flex: 1; }

.mehsul-card-body h3 {
  margin: 0 0 12px;
  font-size: 16.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mehsul-condition-badge.mehsul-condition-new { background: var(--color-success-bg, #ecfdf3); color: var(--color-success, #16a34a); }
.mehsul-condition-badge.mehsul-condition-used { background: var(--color-surface-alt, #fdf2f4); color: var(--color-ink-soft, #5c464a); }

.mehsul-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed var(--color-border, #f1e4e6);
  padding-top: 12px;
}

.mehsul-card-seller {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mehsul-seller-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-primary-tint, #fff1f3);
}

.mehsul-seller-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 11px;
  color: var(--color-primary-dark, #d81f3d);
}

.mehsul-seller-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-ink-soft, #5c464a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mehsul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.status-suspended { background: #edeef2; color: #4b4f5a; }

.mehsul-detail-img {
  width: 100%;
  aspect-ratio: 800 / 440;
  max-height: 440px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--color-surface-soft, #f4f4f6);
  display: block;
  cursor: zoom-in;
  /* Şəkil hələ yüklənməmiş olsa belə (məs. səhifə yenilənəndə, stil faylı tam
     tətbiq olunmazdan əvvəlki anlıq pəncərədə), alt mətni (məhsul adı) qutunun
     üzərinə "yazı düşməsin" deyə vizual olaraq gizlədilir — ekran oxuyucuları
     üçün əlçatanlıq təsirlənmir, çünki alt atributu DOM-da olduğu kimi qalır. */
  color: transparent;
  font-size: 0;
}

.mehsul-detail-img-placeholder {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  background: var(--color-surface-soft, #f4f4f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; opacity: .3;
}

.mehsul-gallery-main {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.mehsul-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 10, 12, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.mehsul-gallery-arrow:hover { background: rgba(20, 10, 12, .78); transform: translateY(-50%) scale(1.06); }
.mehsul-gallery-arrow-prev { left: 12px; }
.mehsul-gallery-arrow-next { right: 12px; }

.mehsul-gallery-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(20, 10, 12, .6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.mehsul-gallery-zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(20, 10, 12, .55);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

.mehsul-gallery-main:hover .mehsul-gallery-zoom-hint { opacity: 1; }

/* Elan detalı — "Premium" nişanı Qiymət qutusunun altında.
   .job-hero-salary saytda job-detail.php ilə paylaşılan ümumi bir sinifdir,
   amma bu fayl (mehsul.css) yalnız Məhsul səhifələrində yüklənir, ona görə
   buradakı düzəlişlər iş elanı səhifəsinə təsir etmir. */
@media (min-width: 761px) {
  /* Yalnız veb (masaüstü) görünüşü — mobil ayrıca aşağıdakı media query ilə idarə olunur, toxunulmayıb.
     Qiymət və "Premium" nişanı eyni sətirdə (tək sıra) yan-yana göstərilir,
     "Qiymət" etiketi isə ayrıca, öz sətrində yuxarıda qalır. HTML strukturu
     dəyişdirilmədən, sırf CSS Grid yerləşdirməsi ilə əldə olunur. Bütün
     məzmun ortalanıb və qutuya daha səliqəli, nəfəs alan boşluq verilib. */
  .job-hero-salary {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 16px 28px;
    min-width: 150px;
    width: fit-content;
    flex: 0 0 auto;
  }
  .job-hero-salary-label { grid-column: 1 / -1; justify-self: center; }
  .job-hero-salary-value { grid-column: 1; justify-self: center; }
  .mehsul-price-premium-badge {
    grid-column: 2;
    justify-self: center;
    display: inline-flex !important;
    align-items: center;
    width: auto;
    max-width: max-content;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 5px 12px !important;
    line-height: 1.3;
    white-space: nowrap;
    margin: 0 !important;
  }
}

@media (max-width: 760px) {
  /* Mobildə "Qiymət" qutusu əvvəllər tam eninə uzanıb (flex-basis:100%),
     içindəki qiymət/nişan sağa sıxılırdı, solda böyük boş sahə qalırdı.
     İndi masaüstündəki kimi yığcam, öz məzmununa görə ölçülü və ortalanmış
     kart kimi göstərilir — etiket, qiymət və "Premium" hamısı EYNİ SƏTİRDƏ
     (tək sıra), yan-yana. */
  .job-hero { flex-direction: column; row-gap: 14px; }
  .job-hero-salary {
    flex-basis: auto;
    width: fit-content;
    max-width: 100%;
    align-self: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    padding: 14px 22px;
  }
  .job-hero-salary-value {
    white-space: nowrap;
  }
  .mehsul-price-premium-badge {
    flex-basis: auto;
    display: inline-flex;
    justify-content: center;
    margin-top: 0;
  }
}

.mehsul-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.mehsul-thumb-btn {
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
  transition: border-color .15s ease, transform .15s ease;
}

.mehsul-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;
  font-size: 0;
}

.mehsul-thumb-btn:hover { transform: translateY(-2px); }
.mehsul-thumb-btn.active { border-color: var(--color-primary, #f43f5e); }

/* Lightbox — mehsul-detay.php-də şəklin üzərinə vuranda açılan tam-ekran böyütmə */
.mehsul-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 6, 7, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.mehsul-lightbox-overlay[hidden] { display: none; }

.mehsul-lightbox-inner {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 90vh;
}

.mehsul-lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  display: block;
}

.mehsul-lightbox-counter {
  margin-top: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  opacity: .85;
}

.mehsul-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease, transform .15s ease;
}

.mehsul-lightbox-close:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }

.mehsul-lightbox-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, transform .15s ease;
  z-index: 2;
}

.mehsul-lightbox-arrow:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }

@media (max-width: 640px) {
  .mehsul-lightbox-overlay { padding: 14px; gap: 10px; }
  .mehsul-lightbox-arrow { width: 40px; height: 40px; }
  .mehsul-gallery-arrow { width: 34px; height: 34px; }
  .mehsul-gallery-premium-badge { top: 6px; left: 6px; font-size: 10.5px !important; padding: 4px 10px !important; }
}

.mehsul-contact-box {
  border: 1px solid var(--color-border, #e5e5ea);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

.mehsul-contact-box div + div { margin-top: 6px; }

.mehsul-reject-reason {
  margin-top: 6px;
  font-size: 12.5px;
  color: #b3261e;
}

.mehsul-image-preview {
  margin-top: 10px;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.mehsul-image-preview img { border-radius: 10px; display: block; }

/* Şəkil yükləmə qutusu — user/cv.php-dəki iş nümunəsi şəkilləri ilə eyni dizayn dilində
   (kəsik xətli sərhəd, klikləmə ilə fayl seçimi, hover-də rəng dəyişimi) */
.mehsul-upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 24px;
  border: 1.5px dashed var(--color-border-strong, #f2c9cf);
  border-radius: var(--radius-md, 14px);
  background: var(--color-surface-alt, #fdf2f4);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.mehsul-upload-box:hover,
.mehsul-upload-box.has-files {
  border-color: var(--color-primary-light, #fecdd6);
  background: var(--color-primary-tint, #fff1f3);
}

.mehsul-upload-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--color-primary-dark, #d81f3d);
  box-shadow: 0 0 0 6px var(--color-primary-tint, #fff1f3), var(--shadow-sm, 0 1px 2px rgba(36,20,23,.06));
  margin-bottom: 14px;
}

.mehsul-upload-text {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink, #241417);
  margin-bottom: 8px;
}

.mehsul-upload-formats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.mehsul-upload-format-pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-primary-dark, #d81f3d);
  background: #fff;
  border: 1px solid var(--color-primary-light, #fecdd6);
  padding: 3px 9px;
  border-radius: 999px;
}

.mehsul-upload-hint {
  font-size: 12.5px;
  color: var(--color-ink-faint, #9a8286);
  max-width: 340px;
  line-height: 1.55;
}

.mehsul-upload-box input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Admin > Redaktə et: kompakt şəkil pəncərələri — istifadəçi tərəfindəki böyük
   "dropzone" qutusu əvəzinə, mövcud önizləmə şəkilləri ilə eyni sırada, eyni
   ölçüdə (100x100) "+" pəncərəsi — admin panelin daha funksional üslubuna uyğun. */
.mehsul-admin-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mehsul-admin-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-alt, #f4f4f6);
}

.mehsul-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mehsul-admin-thumb-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--color-primary, #d81f3d);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

.mehsul-admin-thumb-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 10, 12, .6);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.mehsul-admin-thumb-remove:hover { background: rgba(20, 10, 12, .85); }

.mehsul-admin-thumb-add {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1.5px dashed var(--color-border-strong, #f2c9cf);
  background: var(--color-surface-alt, #fdf2f4);
  color: var(--color-primary-dark, #d81f3d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.mehsul-admin-thumb-add:hover {
  border-color: var(--color-primary-light, #fecdd6);
  background: var(--color-primary-tint, #fff1f3);
}

.mehsul-admin-thumb-add-text {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  padding: 0 6px;
}

.mehsul-admin-detail dl { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; margin: 0; }
.mehsul-admin-detail dt { color: var(--color-ink-faint, #8a8a95); font-size: 13px; }
.mehsul-admin-detail dd { margin: 0; font-size: 14px; }

/* Admin > Məhsul cədvəli — jobs-table-dən ayrı, çünki 7 sütunu var (jobs-table 6 üçün nəzərdə tutulub
   və table-layout:fixed ilə faiz genişlikləri sərtdir; təkrar istifadə 7-ci sütunu sıxışdırırdı). */
.mehsul-table { table-layout: fixed; min-width: 880px; }
.mehsul-table th { white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
.mehsul-table th:nth-child(1), .mehsul-table td:nth-child(1) { width: 8%; }
.mehsul-table th:nth-child(2), .mehsul-table td.admin-title-cell { width: 22%; }
.mehsul-table th:nth-child(3) { width: 14%; }
.mehsul-table th:nth-child(4) { width: 10%; }
.mehsul-table th:nth-child(5) { width: 11%; }
.mehsul-table th:nth-child(6) { width: 10%; }
.mehsul-table th:nth-child(7) { width: 25%; }
.mehsul-table .row-actions { row-gap: 8px; }

/* Admin > Məhsul cədvəli — "Şəkil" sütunu (masaüstü).
   Kart-tərzi kiçik thumbnail: sabit ölçü, yumşaq künc, incə çərçivə + kölgə. */
.mehsul-thumb-link {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  border: 1px solid var(--color-border, #f1e4e6);
  background: var(--color-surface-alt, #fdf2f4);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(36,20,23,.06));
  flex-shrink: 0;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mehsul-thumb-link:hover {
  border-color: var(--color-primary-light, #fecdd6);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(180,20,50,.08));
  transform: translateY(-1px);
}
.mehsul-thumb-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  display: block;
}
.mehsul-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm, 8px);
  border: 1.5px dashed var(--color-border-strong, #f2c9cf);
  background: var(--color-surface-alt, #fdf2f4);
  color: var(--color-ink-faint, #9a8286);
  flex-shrink: 0;
}

/* ===========================================================================
   Admin > Məhsul cədvəli — MOBİL KART görünüşü.
   Standart data-table mobil fallback-ı (responsive.css: hər td öz sətrində,
   solda etiket / sağda dəyər) bu cədvəldə uyğun deyildi — şəkil sağa
   sıxışırdı, məhsul adı isə demək olar görünməz qalırdı (-webkit-line-clamp
   sıxılmış enə sığmırdı). Bunun əvəzinə CSS Grid ilə əsl "kart" düzülüşü:
   sol tərəfdə sabit thumbnail, sağda başlıq; altında yığcam satıcı/qiymət/
   tarix sətri, status və əməliyyat sətirləri. named grid-area istifadə
   olunduğu üçün DOM-dakı sütun sırası (Şəkil, Məhsul, Satıcı, Qiymət,
   Status, Tarix, Əməliyyat) toxunulmadan qalır.
   =========================================================================== */
@media (max-width: 860px) {
  .mehsul-table { table-layout: auto; min-width: 0; width: 100%; }
  .mehsul-table th:nth-child(n) { width: auto; }

  .data-table.mehsul-table tbody tr {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    grid-template-areas:
      "thumb  title  title"
      "thumb  seller seller"
      "thumb  price  date"
      "status status status"
      "actions actions actions";
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  /* Bütün hüceyrələr üçün ümumi sıfırlama: generic flex/label sətri ləğv olunur.
     .data-table.mehsul-table (2 class) responsive.css-dəki .admin-main .data-table
     (də 2 class) qaydaları ilə spesifiklik baxımından bərabərdir; mehsul.css
     responsive.css-dən SONRA yüklənir (bax: admin/mehsul.php), ona görə bu
     qaydalar üstünlük təşkil edir. */
  .data-table.mehsul-table td {
    display: block;
    padding: 0;
    border-top: none;
    text-align: left;
  }
  .data-table.mehsul-table td::before { content: none; }

  .data-table.mehsul-table td.mehsul-thumb-cell { grid-area: thumb; }
  .mehsul-table .mehsul-thumb-link,
  .mehsul-table .mehsul-thumb-placeholder { width: 60px; height: 60px; }

  .data-table.mehsul-table td.admin-title-cell {
    grid-area: title;
    align-self: center;
    min-width: 0;
    width: 100%;
  }
  .mehsul-table td.admin-title-cell .admin-title-link {
    display: -webkit-box;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--color-ink);
  }

  .data-table.mehsul-table td:nth-child(3) {
    grid-area: seller;
    font-size: 12.5px;
    color: var(--color-ink-faint);
  }
  .data-table.mehsul-table td:nth-child(3)::before { content: "👤 "; }

  .data-table.mehsul-table td:nth-child(4) {
    grid-area: price;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--color-primary-dark, #d81f3d);
  }

  .data-table.mehsul-table td:nth-child(6) {
    grid-area: date;
    font-size: 12px;
    color: var(--color-ink-faint);
    text-align: right;
  }

  .data-table.mehsul-table td:nth-child(5) {
    grid-area: status;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
  }

  .data-table.mehsul-table td.dt-stack {
    grid-area: actions;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
  }
}

@media (max-width: 640px) {
  .mehsul-admin-detail dl { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Məhsul şəkli yükləmə — Resept formasındakı dizayn (mup-*)
   ========================================================================== */
.mup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mup-num {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 17px;
  background: var(--color-primary-tint, #fff1f3); border: 1px solid var(--color-primary-light, #fecdd6);
}
.mup-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mup-head-text label { margin: 0; font-weight: 700; font-size: 14px; color: var(--color-ink, #241417); }
.mup-head-text small { font-size: 12px; color: var(--color-ink-faint, #9a8286); }
.mup-count {
  flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--color-ink-soft, #5c464a);
  background: var(--color-surface-alt, #fdf2f4); border: 1px solid var(--color-border, #f7e3e7);
}

.mup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; border-radius: 14px; }
.mup-grid.is-over { background: var(--color-primary-tint, #fff1f3); box-shadow: 0 0 0 2px var(--color-primary-light, #fecdd6) inset; }

.mup-photo {
  position: relative; aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden;
  border: 1.5px solid var(--color-border, #f7e3e7); background: var(--color-surface-alt, #fdf2f4);
  animation: mup-pop .25s cubic-bezier(.22, .85, .3, 1);
}
@keyframes mup-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.mup-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mup-x {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(20, 8, 14, .55);
  transition: background .15s ease, transform .15s ease;
}
.mup-x svg { width: 13px; height: 13px; }
.mup-x:hover { background: var(--color-danger, #dc2626); transform: scale(1.08); }
.mup-tag {
  position: absolute; left: 6px; bottom: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #5a3a00; background: linear-gradient(135deg, #fff3c4, #f5c451);
}
.mup-tag[hidden] { display: none; }

/* `label` seçicisi forma stillərində display:block alır — spesifiklik qəsdən artırılıb */
.mup-grid label.mup-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  position: relative; aspect-ratio: 4 / 3; padding: 10px; margin: 0; cursor: pointer; text-align: center;
  border: 2px dashed var(--color-border-strong, #f2c9cf); border-radius: 13px;
  background: linear-gradient(160deg, #fffaf2, var(--color-primary-tint, #fff1f3));
  transition: border-color .15s ease, transform .15s ease;
}
.mup-grid label.mup-drop[hidden] { display: none; }
.mup-grid label.mup-drop:hover { border-color: var(--color-primary, #f43f5e); transform: translateY(-2px); }
.mup-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mup-drop-icon {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--color-primary, #f43f5e), var(--color-primary-dark, #d81f3d));
  box-shadow: 0 8px 16px -10px rgba(216, 31, 61, .9);
}
.mup-drop-icon svg { width: 19px; height: 19px; }
.mup-drop-title { font-size: 13px; font-weight: 800; color: var(--color-primary-dark, #d81f3d); }
.mup-drop-sub { font-size: 11px; color: var(--color-ink-faint, #9a8286); line-height: 1.3; }

.mup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mup-chip {
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--color-primary-dark, #d81f3d); background: var(--color-primary-tint, #fff1f3);
  border: 1px solid var(--color-primary-light, #fecdd6);
}
.mup-chip.is-soft {
  color: var(--color-ink-faint, #9a8286); background: var(--color-surface-alt, #fdf2f4);
  border-color: var(--color-border, #f7e3e7);
}
.mup-error { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #b3261e; }
.mup-error[hidden] { display: none; }

@media (max-width: 560px) {
  .mup-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .mup-drop-sub { display: none; }
}