/* =====================================================================
   PORTFOLIO CREATE — صفحة إنشاء ملف الإنجاز (/portfolio/file/new)
   بطاقة زجاجية + بطاقات اختيار النموذج بهوية cmp النحاسية. RTL.
   بلا تغيير منطق — نفس خطافات JS (radio portfolio_master_id، الحقول، الأزرار).
   ===================================================================== */
.pf-create {
  --pc-brand: #D46E2A;
  --pc-brand-rgb: 212, 110, 42;
  --pc-brand-hover: #B85B21;
  --pc-brand-light: #E8A05F;
  --pc-ink: #2b3a4a;
  --pc-ink-2: #6b7a89;
  --pc-border: rgba(34, 48, 63, .12);
  --pc-ease: cubic-bezier(.4, 0, .2, 1);

  max-width: 720px; margin: 1rem auto;
}

/* ---------- البطاقة ---------- */
.pf-create .pf-create-card {
  border: 1px solid rgba(255, 255, 255, .65) !important; border-radius: 20px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 20px 46px rgba(34, 48, 63, .08), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}
.pf-create .card-body { padding: 1.6rem; }

/* ---------- الترويسة ---------- */
.pf-create .text-center h3 { font-weight: 800; color: var(--pc-ink); }
.pf-create .text-center p { color: var(--pc-ink-2); }

/* ---------- الحقول ---------- */
.pf-create .form-label { font-weight: 700; color: var(--pc-ink); }
.pf-create .form-control {
  border-radius: 11px; border: 1.5px solid var(--pc-border); padding: .7rem 1rem;
  transition: border-color .2s var(--pc-ease), box-shadow .2s ease;
}
.pf-create .form-control:focus { border-color: var(--pc-brand); box-shadow: 0 0 0 .2rem rgba(var(--pc-brand-rgb), .15); }

/* ---------- بطاقات اختيار النموذج ---------- */
.pf-masters { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.pf-master {
  position: relative; display: flex; align-items: center; gap: .85rem; cursor: pointer; margin: 0;
  padding: .9rem 1rem; border-radius: 14px;
  background: #fff; border: 1.5px solid var(--pc-border);
  transition: border-color .2s var(--pc-ease), box-shadow .2s ease, background .2s ease, transform .15s var(--pc-ease);
}
.pf-master:hover { border-color: rgba(var(--pc-brand-rgb), .4); box-shadow: 0 8px 20px rgba(var(--pc-brand-rgb), .1); }
.pf-master-radio { position: absolute; opacity: 0; pointer-events: none; }
.pf-master-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.3rem; color: var(--pc-brand); background: rgba(var(--pc-brand-rgb), .12);
  transition: all .2s var(--pc-ease);
}
.pf-master-body { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.pf-master-name { font-weight: 800; color: var(--pc-ink); }
.pf-master-view {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 700; color: var(--pc-brand-hover); text-decoration: none;
  padding: .1rem .1rem;
}
.pf-master-view:hover { text-decoration: underline; }
/* دائرة اختيار فارغة ظاهرة دائماً — توحي بوجوب الاختيار وتمتلئ عند التحديد */
.pf-master-check {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 2px solid var(--pc-border); border-radius: 50%;
  font-size: 0; /* يخفي علامة الصح قبل الاختيار ويُبقي الدائرة */
  color: #fff; background: transparent;
  transition: all .2s var(--pc-ease);
}
.pf-master:hover .pf-master-check { border-color: rgba(var(--pc-brand-rgb), .5); }

/* الحالة المختارة */
.pf-master:has(.pf-master-radio:checked) {
  border-color: var(--pc-brand); background: linear-gradient(180deg, rgba(var(--pc-brand-rgb), .07), #fff);
  box-shadow: 0 8px 22px rgba(var(--pc-brand-rgb), .16);
}
.pf-master:has(.pf-master-radio:checked) .pf-master-ic {
  background: linear-gradient(135deg, var(--pc-brand-light), var(--pc-brand)); color: #fff;
}
.pf-master-radio:checked ~ .pf-master-check {
  border-color: var(--pc-brand); background: var(--pc-brand); font-size: 1rem;
}

/* ---------- الموافقات ---------- */
.pf-create .pf-agree,
.pf-create .form-check { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0; cursor: pointer; }
.pf-create .form-check-input { transform: scale(1.3); margin-top: .15rem; }
.pf-create .form-check-input:checked { background-color: var(--pc-brand); border-color: var(--pc-brand); }
.pf-create .pf-agree span { color: var(--pc-ink); font-weight: 600; line-height: 1.7; }
.pf-create .pf-agree a { color: var(--pc-brand-hover); font-weight: 700; }
.pf-create .pf-agree.is-sub span { color: var(--pc-brand-hover); }

/* ---------- الأزرار ---------- */
.pf-create .pf-create-actions { margin-top: 1.2rem; }
.pf-create .btn-add-book {
  display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(135deg, var(--pc-brand-light), var(--pc-brand) 55%, var(--pc-brand-hover)) !important;
  border: 0 !important; color: #fff !important; font-weight: 800; border-radius: 12px; padding: .8rem 1.8rem; font-size: 1.02rem;
  box-shadow: 0 10px 22px rgba(var(--pc-brand-rgb), .32);
  transition: transform .2s var(--pc-ease), box-shadow .2s ease;
}
.pf-create .btn-add-book:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(var(--pc-brand-rgb), .48); }

@media (prefers-reduced-motion: reduce) { .pf-create * { transition: none !important; } }