/* Arqon tortish — telefon raqamli klaviatura misol maydoniga to'liq sig'ishi.
   Faqat #pageOyin2.arqon-active uchun. */
@media (max-width:700px) and (orientation:landscape){
  #pageOyin2.arqon-active .arqon-example-wrap{
    position:relative !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  /* Klaviatura MISOL qutisi ustida turadi, sarlavhani yopmaydi. */
  #pageOyin2.arqon-active .arqon-example-wrap .o2-keypad-overlay{
    position:absolute !important;
    top:22px !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:auto !important;
    height:auto !important;
    padding:2px 4px 3px !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    border-radius:7px !important;
  }
  #pageOyin2.arqon-active .arqon-example-wrap .o2-kp-close{
    top:2px !important;
    right:2px !important;
    width:18px !important;
    height:18px !important;
    font-size:9px !important;
    line-height:18px !important;
  }
  #pageOyin2.arqon-active .arqon-example-wrap .o2-keypad{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:repeat(4,minmax(0,1fr)) !important;
    gap:2px !important;
  }
  #pageOyin2.arqon-active .arqon-example-wrap .o2-key,
  #pageOyin2.arqon-active .arqon-example-wrap .o2-submit{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:5px !important;
    font-size:clamp(9px,2.8dvh,14px) !important;
    line-height:1 !important;
  }
  #pageOyin2.arqon-active .arqon-example-wrap .o2-submit{
    font-size:clamp(7px,2.2dvh,11px) !important;
  }
}

@media (max-width:700px) and (orientation:landscape) and (max-height:360px){
  #pageOyin2.arqon-active .arqon-example-wrap .o2-keypad-overlay{
    top:20px !important;
    padding:2px 3px !important;
  }
  #pageOyin2.arqon-active .arqon-example-wrap .o2-kp-close{
    width:16px !important;height:16px !important;line-height:16px !important;font-size:8px !important;
  }
  #pageOyin2.arqon-active .arqon-example-wrap .o2-keypad{gap:1px !important;}
  #pageOyin2.arqon-active .arqon-example-wrap .o2-key,
  #pageOyin2.arqon-active .arqon-example-wrap .o2-submit{border-radius:4px !important;font-size:9px !important;}
  #pageOyin2.arqon-active .arqon-example-wrap .o2-submit{font-size:7px !important;}
}