/* ===================================
   WACHTWOORD OOGJE FIX - MOBIEL
   Plaatst oogje rechts in invoerveld
   =================================== */

/* Mobiel - Fix password eye positie */
@media (max-width: 768px) {
    /* Password input container */
    .form-group div[style*="position: relative"] {
        position: relative !important;
        display: block !important;
    }
    
    /* Password input field - maak ruimte voor oogje */
    input[type="password"],
    input[type="text"]#password,
    input[type="text"]#sub_password {
        padding-right: 45px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Password toggle button (oogje) */
    button[onclick*="togglePassword"] {
        position: absolute !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        border: none !important;
        color: #666 !important;
        cursor: pointer !important;
        padding: 10px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }
    
    /* Icon in button */
    button[onclick*="togglePassword"] i {
        font-size: 18px !important;
        pointer-events: none !important;
    }
    
    /* Hover effect */
    button[onclick*="togglePassword"]:hover {
        color: #333 !important;
    }
    
    /* Active/focus state */
    button[onclick*="togglePassword"]:active {
        color: #000 !important;
    }
}

/* Extra kleine schermen */
@media (max-width: 576px) {
    /* Nog meer ruimte voor oogje */
    input[type="password"],
    input[type="text"]#password,
    input[type="text"]#sub_password {
        padding-right: 50px !important;
    }
    
    /* Groter touch target */
    button[onclick*="togglePassword"] {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
    }
    
    button[onclick*="togglePassword"] i {
        font-size: 20px !important;
    }
}