/* ========================================
   «مشاركاتي»: pages/portal/contributions.html
======================================== */

.ct-card { padding: 24px 26px; border: 1px solid var(--a-line); border-radius: 20px; background: #fff; }
.ct-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ct-card-head h2 { margin: 0 0 4px; color: var(--a-navy); font-size: 20px; }
.ct-card-head p { margin: 0; color: var(--a-muted); font-size: 14.5px; line-height: 1.8; }
.ct-step { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--a-navy); color: var(--a-mint); font-weight: 700; font-size: 17px; }

.ct-form { display: grid; gap: 18px; }
.ct-drop {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 16px;
  border: 2px dashed #c9d9dd; border-radius: 16px; background: var(--a-soft); text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ct-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ct-drop.is-over, .ct-drop:hover { border-color: var(--a-mint); background: #effaf8; }
.ct-drop.has-file { border-style: solid; border-color: var(--a-mint); background: #effaf8; }
.ct-drop-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--a-teal); }
.ct-drop-icon svg { width: 28px; height: 28px; }
.ct-drop strong { color: var(--a-navy); font-size: 16px; }
.ct-drop small { color: var(--a-muted); font-size: 13px; }

.ct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ct-fields label { display: grid; gap: 6px; color: var(--a-navy); font-size: 14px; font-weight: 700; }
.ct-fields label small { color: var(--a-muted); font-weight: 500; }
.ct-fields .ct-wide { grid-column: 1 / -1; }
.ct-fields input, .ct-fields select, .ct-fields textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #d5e1e4; border-radius: 11px;
  background: #fff; color: var(--a-ink); font: inherit; font-size: 14.5px; font-weight: 500;
}
.ct-fields input:focus, .ct-fields select:focus, .ct-fields textarea:focus { outline: 2px solid rgba(0, 206, 183, .35); border-color: var(--a-mint); }

.ct-agree { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #fff8ea; color: #5c4300; font-size: 14px; line-height: 1.8; cursor: pointer; }
.ct-agree input { flex: none; width: 18px; height: 18px; margin-top: 4px; accent-color: var(--a-navy); }

.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.ct-status { color: var(--a-muted); font-size: 14px; }

.ct-pick-tools { display: flex; gap: 8px; margin-bottom: 14px; }
.ct-pick-tools .acc-btn { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.ct-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ct-slide { position: relative; display: grid; gap: 8px; padding: 8px; border: 2px solid var(--a-line); border-radius: 14px; background: #fff; cursor: pointer; opacity: .6; transition: border-color .15s ease, opacity .15s ease; }
.ct-slide.is-on { border-color: var(--a-mint); opacity: 1; }
.ct-slide input { position: absolute; top: 14px; right: 14px; z-index: 1; width: 20px; height: 20px; accent-color: var(--a-navy); }
.ct-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: var(--a-soft); color: var(--a-muted); font-size: 12px; }
.ct-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ct-slide-name { overflow: hidden; color: var(--a-ink); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ct-slide-name b { color: var(--a-teal); }

.ct-list { display: grid; gap: 12px; }
.ct-item { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid var(--a-line); border-radius: 16px; background: #fff; }
.ct-item-thumbs { position: relative; height: 72px; }
.ct-item-thumbs img { position: absolute; top: 0; width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 52, 75, .12); }
.ct-item-thumbs img:nth-child(1) { right: 0; z-index: 3; }
.ct-item-thumbs img:nth-child(2) { right: 12px; top: 6px; z-index: 2; }
.ct-item-thumbs img:nth-child(3) { right: 24px; top: 12px; z-index: 1; }
.ct-item-body h3 { margin: 0 0 4px; color: var(--a-navy); font-size: 16.5px; }
.ct-item-body small { color: var(--a-muted); font-size: 13px; }
.ct-reason { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #eef6fb; color: #12415c; font-size: 13.5px; line-height: 1.8; }
.ct-reason.is-no { background: #fdecec; color: #8f2626; }
.ct-item-side { display: grid; justify-items: end; gap: 8px; }
.ct-chip { padding: 4px 12px; border-radius: 999px; background: #fff7e6; color: #8a5a00; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ct-chip.is-approved { background: #e6faf7; color: #00796b; }
.ct-chip.is-partial { background: #eef6fb; color: #12415c; }
.ct-chip.is-rejected { background: #fdecec; color: #a12d2d; }
.ct-withdraw { padding: 0; border: 0; background: none; color: #a12d2d; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ct-empty { padding: 34px 16px; border: 1px dashed #c9d9dd; border-radius: 16px; background: #fff; text-align: center; }
.ct-empty strong { color: var(--a-navy); font-size: 16px; }
.ct-empty p { margin: 6px 0 0; color: var(--a-muted); font-size: 14px; }

@media (max-width: 720px) {
  .ct-card { padding: 18px 16px; }
  .ct-fields { grid-template-columns: minmax(0, 1fr); }
  .ct-item { grid-template-columns: minmax(0, 1fr); }
  .ct-item-thumbs { display: none; }
  .ct-item-side { justify-items: start; grid-auto-flow: column; align-items: center; }
}