/* 186 · Access Codes polish — modal + list micro-interactions. Loaded LAST.
   Roll back: remove this <link> and the 186 <script> tag from index.html. */
:root{--ox-navy:#162D4C;--ox-sand:#CEA577;--ox-sand-d:#B88A57;--ox-line:#E3E7EC;--ox-ink:#1d2b3f;--ox-mute:#6b7788;--ox-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- Modal ---------- */
#quickOtacModal{background:rgba(10,20,36,.58);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
#quickOtacModal .modal-box{width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:auto;border:0;border-radius:20px;background:#fff;
  box-shadow:0 30px 70px -20px rgba(10,20,36,.55),0 0 0 1px rgba(22,45,76,.06);
  transform:translateY(18px) scale(.97);opacity:0;animation:oxPop .42s var(--ox-ease) forwards}
#quickOtacModal .modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:18px 22px;background:linear-gradient(180deg,#fff 70%,rgba(255,255,255,.92));border-bottom:1px solid var(--ox-line)}
#quickOtacModal .modal-head h3{display:flex;align-items:center;gap:12px;margin:0;font-size:1.15rem;color:var(--ox-navy);letter-spacing:.1px}
#quickOtacModal .modal-head h3 i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ox-navy);color:var(--ox-sand);font-size:15px;box-shadow:inset 0 0 0 1px rgba(206,165,119,.35)}
#quickOtacModal .modal-close{order:2;margin-inline-start:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--ox-mute);background:#f3f5f8;transition:background .2s,color .2s,transform .3s var(--ox-ease)}
#quickOtacModal .modal-close:hover{background:var(--ox-navy);color:#fff;transform:rotate(90deg)}
#quickOtacModal .modal-body{padding:20px 22px 22px}
#quickOtacModal .form-row{position:relative;margin-bottom:14px;opacity:0;transform:translateY(8px);animation:oxRise .45s var(--ox-ease) forwards}
#quickOtacModal .form-row:nth-child(1){animation-delay:.08s}#quickOtacModal .form-row:nth-child(2){animation-delay:.13s}
#quickOtacModal .form-row:nth-child(3){animation-delay:.18s}#quickOtacModal .form-row:nth-child(4){animation-delay:.23s}
#quickOtacModal .form-row:nth-child(5){animation-delay:.28s}#quickOtacModal .form-row:nth-child(6){animation-delay:.33s}
#quickOtacModal label{display:block;margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.2px;color:var(--ox-mute);text-transform:none}
#quickOtacModal input,#quickOtacModal select{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--ox-line);border-radius:12px;background:#fafbfc;color:var(--ox-ink);font-size:.95rem;transition:border-color .2s,box-shadow .2s,background .2s}
#quickOtacModal input:hover,#quickOtacModal select:hover{border-color:#cfd6df}
#quickOtacModal input:focus,#quickOtacModal select:focus{outline:0;background:#fff;border-color:var(--ox-sand);box-shadow:0 0 0 4px rgba(206,165,119,.22)}
#quickOtacModal input::placeholder{color:#a3adba}
#quickOtacModal #qOtacPhone{direction:ltr;text-align:start;font-variant-numeric:tabular-nums;letter-spacing:.3px}
#quickOtacModal .form-row[data-valid="1"]::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;inset-inline-end:14px;bottom:13px;font-size:.8rem;color:#12a15b;animation:oxPopIn .35s var(--ox-ease)}
#quickOtacModal .qotac-contract-status:not(:empty){margin-top:8px;animation:oxRise .35s var(--ox-ease)}
#quickOtacModal .btn-ghost{height:46px;width:46px;display:grid;place-items:center;border:1.5px solid var(--ox-line);border-radius:12px;background:#fff;color:var(--ox-navy);transition:background .2s,transform .2s var(--ox-ease)}
#quickOtacModal .btn-ghost:hover{background:var(--ox-navy);color:#fff;transform:translateY(-1px)}
/* devices stepper */
#quickOtacModal .ox-step{display:flex;gap:8px}
#quickOtacModal .ox-step input{text-align:center;font-weight:700;-moz-appearance:textfield}
#quickOtacModal .ox-step input::-webkit-outer-spin-button,#quickOtacModal .ox-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#quickOtacModal .ox-step button{flex:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--ox-line);background:#fff;color:var(--ox-navy);font-size:1.1rem;cursor:pointer;transition:background .2s,color .2s,transform .15s}
#quickOtacModal .ox-step button:hover{background:var(--ox-navy);color:#fff}
#quickOtacModal .ox-step button:active{transform:scale(.92)}
#quickOtacModal .ox-classes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#quickOtacModal .ox-class>span{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:.82rem;font-weight:700;color:var(--ox-navy)}
#quickOtacModal .ox-class>span i{color:var(--ox-sand-d)}
#quickOtacModal .ox-classes .ox-step{gap:6px}
#quickOtacModal .ox-classes .ox-step button{width:40px}
.ox-flag{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 8px;border-radius:999px;background:#FFF3DC;color:#8a5a00;font-size:.7rem;font-weight:700;animation:oxPopIn .35s var(--ox-ease)}
/* primary action */
#quickOtacModal .btn-gold{position:relative;overflow:hidden;height:50px;padding:0 18px!important;border:0;border-radius:13px;font-weight:800;letter-spacing:.2px;color:var(--ox-navy);
  background:linear-gradient(135deg,#e2c397,var(--ox-sand) 55%,var(--ox-sand-d));box-shadow:0 10px 22px -10px rgba(184,138,87,.8);transition:transform .25s var(--ox-ease),box-shadow .25s}
#quickOtacModal .btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ox-ease)}
#quickOtacModal .btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(184,138,87,.9)}
#quickOtacModal .btn-gold:hover::after{transform:translateX(120%)}
#quickOtacModal .btn-gold:active{transform:translateY(0) scale(.99)}
#quickOtacModal .btn-gold.is-busy{pointer-events:none;opacity:.8}
#quickOtacModal .btn-gold.is-busy i{animation:oxSpin .8s linear infinite}

/* ---------- List ---------- */
.ocx{position:relative;transition:transform .25s var(--ox-ease),box-shadow .25s,background .2s}
@media (hover:hover){.ocx:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(22,45,76,.45)}}
.ocx-acts button{transition:transform .2s var(--ox-ease),background .2s,color .2s,box-shadow .2s}
.ocx-acts button:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 6px 12px -6px rgba(22,45,76,.5)}
.ocx-acts button:active{transform:scale(.94)}
.ocx-acts button:focus-visible,.oc-cp:focus-visible,.oc-chips button:focus-visible{outline:2px solid var(--ox-sand);outline-offset:2px}
.ocx-codebox{transition:box-shadow .2s,border-color .2s}
.ocx:hover .ocx-codebox{box-shadow:0 0 0 2px rgba(206,165,119,.35)}
.oc-live i{animation:oxLive 1.8s ease-out infinite}
.oc-life-fill{transition:width .9s var(--ox-ease)}
.oc-chips>*{transition:transform .2s var(--ox-ease),box-shadow .2s}
.oc-chips>*:hover{transform:translateY(-1px)}
.oc-search input:focus{box-shadow:0 0 0 4px rgba(206,165,119,.22)}

@keyframes oxPop{to{opacity:1;transform:none}}
@keyframes oxRise{to{opacity:1;transform:none}}
@keyframes oxPopIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes oxSpin{to{transform:rotate(360deg)}}
@keyframes oxLive{0%{box-shadow:0 0 0 0 rgba(18,161,91,.55)}100%{box-shadow:0 0 0 7px rgba(18,161,91,0)}}
@media (max-width:520px){#quickOtacModal{align-items:flex-end;padding:0}#quickOtacModal .modal-box{width:100%;border-radius:22px 22px 0 0;max-height:92dvh}}
@media (prefers-reduced-motion:reduce){#quickOtacModal *,.ocx,.ocx *{animation:none!important;transition:none!important}#quickOtacModal .modal-box,#quickOtacModal .form-row{opacity:1;transform:none}}