/* Birth-date picker — روز / ماه / سال.

   Paired with shared/onyx/birth-picker.js and loaded by /auth as well as by the
   panel, so it deliberately styles only what is its own: layout, the chevron,
   and the placeholder colour. The selects inherit the host page's input class —
   `.input` at /auth, `.kyc-field__input` in the panel — so the control looks
   native to whichever card it is sitting in.

   Three native selects. Sized so all three fit at 320px with the month — the
   widest, because its options are words — taking the slack; a fixed 1fr each
   clipped «اردیبهشت» on small phones. */
.bd{display:grid;grid-template-columns:0.8fr 1.3fr 1fr;gap:8px;}
.bd__sel{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-inline-end:30px;
  /* Chevron drawn in the box rather than left to the platform, which otherwise
     puts a grey triangle on the wrong edge in an RTL document. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px center;
}
.bd__sel:invalid,.bd__sel option[value=""]{opacity:.62;}
@media (max-width:360px){
  .bd{gap:6px;}
  .bd__sel{padding-inline-start:8px;padding-inline-end:26px;font-size:14px;background-position:left 8px center;}
}