/* ==========================================================================
   پلاک ایرانی — شبیه پلاک واقعی: نوار آبی I.R. IRAN | ۲ رقم | حرف | ۳ رقم | کد ایران
   همهٔ ابعاد بر حسب em است؛ اندازهٔ کل با عرض کارت (container query) تنظیم می‌شود.
   ========================================================================== */

.plate{
  position:relative;display:flex;direction:ltr;align-items:stretch;height:2.1em;
  font-size:clamp(26px,calc(100cqw / 9),58px);
  font-family:var(--font-display);font-weight:800;color:#141414;
  background:linear-gradient(180deg,#fdfdf8 0,#ecece2 100%);
  border:.055em solid #17181a;border-radius:.2em;
  box-shadow:0 .3em .7em -.25em rgba(0,0,0,.7),inset 0 .04em 0 #fff,inset 0 -.07em .14em rgba(0,0,0,.13);
  transition:box-shadow .4s var(--ease),transform .3s var(--ease);
}
.plate.is-complete{box-shadow:0 .3em .7em -.25em rgba(0,0,0,.7),inset 0 .04em 0 #fff,0 0 0 .05em rgba(209,159,25,.95),0 0 1.4em rgba(209,159,25,.4)}
.plate.is-error{animation:rec-shake .42s;box-shadow:0 0 0 .05em #e5604a,0 0 1.2em rgba(229,96,74,.45)}

.plate__strip{
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;flex:none;width:5.5em;
  padding:.4em .16em;color:#fff;font-family:var(--font-body);font-weight:800;font-size:.24em;line-height:1.15;text-align:center;
  background:linear-gradient(180deg,#1f5cbc 0,#103c8a 100%);border-radius:.55em 0 0 .55em;letter-spacing:.02em;
}
.plate__flag{display:block;width:2.5em;height:1.7em;border-radius:.16em;box-shadow:0 0 0 .05em rgba(255,255,255,.65);background:linear-gradient(#239f40 0 33.3%,#fff 33.3% 66.6%,#da0000 66.6% 100%)}

.plate__body{flex:1;display:flex;align-items:center;justify-content:space-evenly;min-width:0;padding:0 .14em 0 .08em;gap:.06em}
.plate__group{display:flex;gap:.04em}
.plate__slot{
  width:.66em;height:1.36em;padding:0;border:0;border-radius:.1em;background:transparent;color:inherit;
  font:inherit;text-align:center;cursor:pointer;caret-color:transparent;transition:background .2s,box-shadow .2s;
}
.plate__slot::placeholder{color:rgba(20,20,20,.2)}
.plate__slot:hover{background:rgba(20,20,20,.06)}
.plate__slot:focus-visible,.plate__slot:focus{outline:0;background:rgba(209,159,25,.22);box-shadow:inset 0 0 0 .03em rgba(160,115,10,.95)}
.plate__slot.is-filled{color:#111}
.plate__slot--letter{width:1.15em;font-family:var(--font-display)}
.plate__slot--letter:not(.is-filled){color:rgba(20,20,20,.22)}
.plate__slot--letter[data-long="1"]{font-size:.6em}
.plate__divider{align-self:stretch;width:.05em;margin:.24em .05em;background:#17181a;border-radius:1px;opacity:.9}
.plate__region{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.plate__region .plate__slot{width:.56em;height:1.02em;font-size:.86em}
.plate__iran{margin-top:-.02em;font-family:var(--font-body);font-weight:800;font-size:.27em;line-height:1;letter-spacing:.03em}

/* پنجرهٔ انتخاب رقم/حرف */
.plate__pop{
  position:absolute;z-index:40;direction:rtl;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.5;color:var(--cream);
  padding:10px;border-radius:14px;background:#1c1402;border:1px solid rgba(209,159,25,.5);
  box-shadow:0 30px 60px -14px rgba(0,0,0,.85),0 0 0 4px rgba(0,0,0,.25);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top center;transition:opacity .16s var(--ease),transform .16s var(--ease);
}
.plate__pop.is-open{opacity:1;transform:none}
.plate__pop--digits{display:grid;grid-template-columns:repeat(6,46px);gap:6px}
.plate__pop--letters{width:min(330px,92vw)}
.plate__opt{
  display:grid;place-items:center;height:46px;min-width:46px;padding:0 8px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,244,215,.12);background:rgba(255,244,215,.05);color:var(--cream);font:800 21px/1 var(--font-display);
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.plate__opt:hover,.plate__opt:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-1px);outline:0}
.plate__opt.is-selected{background:rgba(209,159,25,.25);border-color:var(--gold)}
.plate__opt--clear{font-size:18px;color:var(--sand)}
.plate__searchbox{position:relative;margin-bottom:8px}
.plate__searchbox .i{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:17px;pointer-events:none}
.plate__search{width:100%;height:44px;padding-inline:38px 12px;border-radius:10px;border:1px solid rgba(255,244,215,.16);background:rgba(255,244,215,.05);color:var(--cream);font:500 16px var(--font-body);outline:0}
.plate__search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(209,159,25,.18)}
.plate__letters{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:232px;overflow:auto;padding:2px}
.plate__letters .plate__opt{font-size:19px}
.plate__none{grid-column:1/-1;margin:8px 0;text-align:center;color:var(--sand);font-size:14px}

/* پلاک کوچک برای فهرست سوابق */
.plate--mini{
  display:inline-flex;height:auto;width:max-content;font-size:16px;border-width:2px;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 #fff inset,0 3px 8px -4px rgba(0,0,0,.6);
}
.plate--mini .plate__strip{width:20px;padding:0;font-size:0;border-radius:0;justify-content:center}
.plate--mini .plate__flag{width:13px;height:9px;border-radius:1px}
.plate__mini-txt{display:flex;align-items:center;gap:7px;padding:2px 10px 2px 8px;font-family:var(--font-display);font-weight:800;font-size:1em;line-height:1.55;color:#141414;white-space:nowrap}
.plate__mini-txt b{font-weight:800}
.plate__mini-txt .l{font-size:1em}.plate__mini-txt .l.long{font-size:.75em}
.plate__mini-txt s{align-self:stretch;width:1.5px;margin:3px 0;background:#17181a;text-decoration:none}

@media (max-width:575px){
  .plate{font-size:clamp(22px,calc(100cqw / 9.2),46px)}
  .plate__pop--digits{grid-template-columns:repeat(5,44px)}
}