/* حقول الهوية — زيت علاء v24 */
.personalIdentityGrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);gap:12px;align-items:end}
.birthField{min-width:0}
.birthPicker{
  position:relative;
  overflow:hidden;
  padding:12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:
    radial-gradient(circle at 92% -20%,rgba(232,35,88,.18),transparent 42%),
    linear-gradient(145deg,#111116,#09090c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.birthPicker::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,transparent,#e82358,transparent);
  opacity:.65;
}
.birthPicker.hasFocus{
  border-color:#e82358;
  box-shadow:0 0 0 3px rgba(232,35,88,.13),inset 0 1px 0 rgba(255,255,255,.045);
}
.birthPicker.isComplete{border-color:rgba(232,35,88,.45)}
.birthPickerHead{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
  min-width:0;
}
.birthCalendarIcon{
  width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid rgba(232,35,88,.32);
  border-radius:10px;
  background:rgba(232,35,88,.1);
  color:#ff4776;
}
.birthCalendarIcon svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.birthPickerTitle{font-size:12px;font-weight:800;color:#d8d1d5;white-space:nowrap}
.birthPickerValue{
  margin-right:auto;
  max-width:52%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:5px 9px;
  border-radius:999px;
  background:#09090c;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.birthPicker.isComplete .birthPickerValue{
  background:rgba(232,35,88,.12);
  border-color:rgba(232,35,88,.34);
  color:#ffb5c8;
}
.birthSegments{
  display:grid;
  grid-template-columns:minmax(78px,.72fr) minmax(125px,1.28fr) minmax(94px,.9fr);
  gap:8px;
}
.birthSegment{display:grid;gap:5px;min-width:0}
.birthSegment>span:first-child{
  padding-right:2px;
  color:#aaa3a7;
  font-size:10.5px;
  font-weight:800;
}
.birthSelectShell{position:relative;display:block;min-width:0}
.birthSelectShell select{
  width:100%;
  height:47px;
  padding:0 12px 0 34px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  outline:0;
  background:#08080b;
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.birthSelectShell select:hover{border-color:rgba(232,35,88,.44);background:#0d0b0f}
.birthSelectShell select:focus{
  border-color:#e82358;
  background:#100a0d;
  box-shadow:0 0 0 3px rgba(232,35,88,.12);
}
.birthSelectShell select:invalid{color:#8f898d}
.birthSelectShell select option{background:#111116;color:#fff}
.birthSelectShell i{
  position:absolute;
  left:12px;top:50%;
  width:8px;height:8px;
  border-left:2px solid #e82358;
  border-bottom:2px solid #e82358;
  transform:translateY(-68%) rotate(-45deg);
  pointer-events:none;
}
.compactBirthPicker{padding:10px;border-radius:14px}
.compactBirthPicker .birthPickerHead{margin-bottom:8px}
.compactBirthPicker .birthCalendarIcon{width:28px;height:28px;border-radius:9px}
.compactBirthPicker .birthPickerTitle{font-size:11px}
.compactBirthPicker .birthPickerValue{font-size:10.5px;padding:4px 7px}
.compactBirthPicker .birthSelectShell select{height:44px;font-size:12px}
.managerFormCompact .birthField{grid-column:span 1}

.genderChoices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.genderChoice{position:relative;display:block;cursor:pointer;user-select:none}
.genderChoice>input{position:absolute;opacity:0;pointer-events:none}
.genderChoiceCard{min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 13px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:#0b0b0e;color:#ddd;transition:.18s ease;position:relative;overflow:hidden}
.genderChoiceCard:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,35,88,.14),transparent 58%);opacity:0;transition:.18s ease}
.genderChoiceCard svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;z-index:1}
.genderChoiceCard b{font-size:14px;z-index:1}
.genderCheck{position:absolute;left:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e82358;color:#fff;font-size:12px;font-weight:900;opacity:0;transform:scale(.7);transition:.18s ease}
.genderChoice:hover .genderChoiceCard{border-color:rgba(232,35,88,.48);color:#fff;transform:translateY(-1px)}
.genderChoice>input:focus-visible+.genderChoiceCard{outline:3px solid rgba(232,35,88,.22);outline-offset:2px}
.genderChoice>input:checked+.genderChoiceCard{border-color:#e82358;background:#231018;color:#fff;box-shadow:0 0 0 3px rgba(232,35,88,.12)}
.genderChoice>input:checked+.genderChoiceCard:before,.genderChoice>input:checked+.genderChoiceCard .genderCheck{opacity:1}
.genderChoice>input:checked+.genderChoiceCard .genderCheck{transform:scale(1)}
.identitySection{border-color:rgba(232,35,88,.26)!important}
.identitySection .sectionIndex{background:linear-gradient(135deg,#e82358,#a70f36)!important;color:#fff!important}
.managerFormCompact .birthDateShell input{min-height:46px}
.compactGenderChoices .genderChoiceCard{min-height:46px;padding:8px 10px}
.compactGenderChoices .genderChoiceCard svg{width:21px;height:21px}
@media(max-width:760px){.personalIdentityGrid{grid-template-columns:1fr}.genderChoices{gap:8px}.genderChoiceCard{min-height:50px}.managerFormCompact .genderField,.managerFormCompact .birthField{grid-column:auto}}
@media(max-width:420px){.genderChoiceCard{padding:9px}.genderChoiceCard b{font-size:13px}.genderCheck{left:7px;width:20px;height:20px}}

@media(max-width:760px){
  .personalIdentityGrid{grid-template-columns:1fr}
  .birthSegments{grid-template-columns:minmax(70px,.72fr) minmax(112px,1.2fr) minmax(88px,.9fr)}
  .birthPicker{padding:10px}
  .birthPickerTitle{display:none}
  .birthPickerValue{max-width:calc(100% - 43px);margin-right:0}
  .birthSelectShell select{height:46px;font-size:13px;padding-right:9px;padding-left:28px}
  .birthSelectShell i{left:10px}
  .managerFormCompact .genderField,.managerFormCompact .birthField{grid-column:auto}
}
@media(max-width:420px){
  .birthSegments{grid-template-columns:72px minmax(105px,1fr) 86px;gap:6px}
  .birthPicker{padding:9px;border-radius:14px}
  .birthPickerHead{margin-bottom:8px}
  .birthCalendarIcon{width:29px;height:29px}
  .birthPickerValue{font-size:10px;padding:4px 6px}
  .birthSelectShell select{height:44px;font-size:12px;padding-left:24px}
  .birthSelectShell i{left:8px;width:7px;height:7px}
}