/* ============================================================
 *  منصة إدارة الجودة والتميز بشركة الحمراء لخدمات حجاج الداخل — Documents Modal (RTL, responsive, animated)
 * ============================================================ */
.doc-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(8,28,20,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:16px; font-family:"Cairo",sans-serif;
  opacity:0; transition:opacity .2s ease;
}
.doc-overlay.show{ opacity:1; }
.doc-modal{
  background:#fff; width:100%; max-width:560px;
  border-radius:20px; box-shadow:0 32px 72px rgba(0,0,0,.28);
  overflow:hidden; display:flex; flex-direction:column; max-height:92vh;
  transform:translateY(14px) scale(.98); opacity:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.doc-overlay.show .doc-modal{ transform:none; opacity:1; }

.doc-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; background:linear-gradient(135deg,#0d3b2a,#14533b);
  color:#fff;
}
.doc-modal-head h3{ margin:0; font-size:1.08rem; font-weight:700; }
.doc-close{
  background:transparent; border:0; color:#fff; font-size:1.7rem;
  cursor:pointer; line-height:1; padding:0 6px; transition:transform .15s;
}
.doc-close:hover{ transform:rotate(90deg); }

.doc-modal-body{
  padding:18px 22px; overflow:auto;
  display:flex; flex-direction:column; gap:12px;
}
.doc-field{ display:flex; flex-direction:column; gap:6px; }
.doc-field > span{ font-size:.85rem; font-weight:600; color:#204a3a; }
.doc-field select,
.doc-field input,
.doc-field textarea{
  width:100%; padding:10px 12px; border:1px solid #cdd9d2; border-radius:10px;
  font-family:inherit; font-size:.92rem; background:#f8fbf9; color:#0d3b2a;
  transition:border-color .15s, background .15s;
}
.doc-field select:disabled{ background:#eef2ef; color:#8a9b92; }
.doc-field select:focus,
.doc-field input:focus,
.doc-field textarea:focus{ outline:none; border-color:#c9a85c; background:#fff; }

.doc-tabs{ display:flex; gap:6px; }
.doc-tab{
  flex:1; padding:10px 10px; background:#eef2ef; color:#204a3a;
  border:1px solid transparent; border-radius:10px; cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:600;
  transition:background .15s, border-color .15s, color .15s;
}
.doc-tab.active{ background:#fff; border-color:#c9a85c; color:#0d3b2a; box-shadow:0 2px 6px rgba(201,168,92,.25); }
.doc-tab-panel.hidden,
.hidden{ display:none !important; }
.doc-hint{ margin:6px 0 0; font-size:.78rem; color:#6a7d74; }

.doc-progress{
  margin-top:10px; height:8px; background:#e9efec; border-radius:6px; overflow:hidden;
}
.doc-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,#14533b,#c9a85c);
  transition:width .2s ease;
}

.doc-modal-foot{
  display:flex; justify-content:flex-end; gap:8px;
  padding:13px 22px; border-top:1px solid #e6ece9; background:#fafbfa;
}
.doc-modal-foot .btn-primary{
  background:linear-gradient(135deg,#0d3b2a,#14533b); color:#fff;
  border:0; padding:10px 20px; border-radius:10px; cursor:pointer; font-weight:700;
  transition:transform .12s, box-shadow .12s;
}
.doc-modal-foot .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(13,59,42,.25); }
.doc-modal-foot .btn-light{
  background:#fff; color:#204a3a; border:1px solid #cdd9d2;
  padding:10px 20px; border-radius:10px; cursor:pointer; font-weight:600;
}

@media (max-width:520px){
  .doc-modal{ border-radius:14px; }
  .doc-modal-head{ padding:14px 16px; }
  .doc-modal-body{ padding:14px 16px; }
  .doc-modal-foot{ padding:12px 16px; }
}