/* PIN-login volledig responsive: kaart + icoon + titel + toetsen + velden
       schalen mee op smalle en/of lage schermen. Inline stijlen blijven de
       desktop-standaard; deze media-queries overschrijven ze enkel kleiner. */
    @media (max-width: 560px){
        #loginScreen{padding:12px 0 !important}
        .pin-login-card{padding:24px 18px !important;width:94% !important;border-radius:14px !important}
        .pin-login-card > div:first-child{margin-bottom:20px !important}
        .pin-login-card .plc-icon{width:60px !important;height:60px !important;font-size:30px !important;margin-bottom:12px !important}
        .pin-login-card .plc-title{font-size:20px !important}
        .pin-login-card label{font-size:12px !important}
        .pin-login-card select,.pin-login-card #pinInput{padding:10px !important;font-size:14px !important}
        .pin-login-card #pinInput{font-size:20px !important;letter-spacing:6px !important}
        .pin-login-card .plc-keypad{gap:8px !important;margin-bottom:14px !important}
        .pin-login-card .dp-input-lg,.pin-login-card .plc-keypad button{padding:12px !important;font-size:18px !important}
        .pin-login-card > button{padding:12px !important;font-size:15px !important}
    }
    @media (max-height: 720px){
        .pin-login-card{padding-top:22px !important;padding-bottom:22px !important}
        .pin-login-card > div:first-child{margin-bottom:16px !important}
        .pin-login-card .plc-icon{width:56px !important;height:56px !important;font-size:28px !important;margin-bottom:10px !important}
        .pin-login-card .dp-input-lg,.pin-login-card .plc-keypad button{padding:12px !important}
    }
    @media (max-width: 380px){
        .pin-login-card{padding:18px 12px !important}
        .pin-login-card .dp-input-lg,.pin-login-card .plc-keypad button{padding:10px !important;font-size:16px !important}
    }